/* ==========================================================================
   Santiago Fundas · Tienda online
   --------------------------------------------------------------------------
   Referencia: docs/design/source/Ecommerce - Alta fidelidad.dc.html

   Mobile-first de verdad: todo esta pensado a 390 px y escala hacia arriba.
   Nada depende de :hover. La tienda comparte la marca y los tokens con
   gestion, pero no su chrome ni su densidad: aca no hay sidebar, ni tablas,
   ni min-width operativo.

   El cliente ve disponibilidad, nunca cantidades: el numero exacto de stock
   vive solo en gestion.
   ========================================================================== */

:root {
    --sf-store-bg: #08080d;
    --sf-store-header: #0d0d15;
    --sf-store-card: #101019;
    --sf-store-field: #13131d;
    --sf-store-divider: #12121b;
    --sf-store-warn: #e0b062;
    --sf-store-max: 1180px;
}

/* ==========================================================================
   Chasis
   ========================================================================== */

body.sf-store {
    margin: 0;
    min-height: 100vh;
    background: var(--sf-store-bg);
    display: flex;
    flex-direction: column;
}

.sf-store-main {
    flex: 1;
    width: 100%;
    max-width: var(--sf-store-max);
    margin: 0 auto;
    padding: 0 0 48px;
}

/* El ancho util del contenido. En movil son 14 px de margen, como el diseno. */
.sf-store-pad {
    padding-inline: 14px;
}

.sf-store-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
}

.sf-store-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.sf-store-section__title {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

/* ==========================================================================
   Header · 52 px
   ========================================================================== */

.sf-store-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--sf-store-header);
    border-bottom: 1px solid var(--sf-line);
}

.sf-store-header__inner {
    width: 100%;
    max-width: var(--sf-store-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sf-store-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--sf-text);
}

/* El logo tiene que pesar tanto como el nombre. El archivo es cuadrado y de
   alta resolucion, asi que se lo muestra mas grande sin deformarlo: la misma
   proporcion, mas presencia. En telefono baja un escalon para no comerse el
   ancho que necesitan Buscar y Carrito. */
.sf-store-brand__logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: block;
    flex: none;
    object-fit: contain;
}

.sf-store-brand__name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.15;
}

@media (min-width: 760px) {
    .sf-store-brand__logo {
        width: 46px;
        height: 46px;
    }

    .sf-store-brand__name {
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   Acciones del header
   Ícono y palabra en escritorio; en teléfono queda el ícono, con el área
   táctil entera y su etiqueta accesible.
   -------------------------------------------------------------------------- */

.sf-store-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
}

.sf-store-nav__link {
    padding: 8px 10px;
    border-radius: var(--sf-r-sm);
    font-size: 13.5px;
    color: var(--sf-n-300);
    text-decoration: none;
}

.sf-store-nav__link:hover {
    color: var(--sf-text);
    background: rgba(255, 255, 255, .04);
}

.sf-store-action {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-sm);
    color: var(--sf-n-200);
    text-decoration: none;
    font-size: 13.5px;
}

.sf-store-action:hover {
    color: var(--sf-text);
    border-color: var(--sf-n-700);
}

.sf-store-action:focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: 2px;
}

.sf-store-action--cart {
    border-color: var(--sf-accent-700);
    background: var(--sf-accent-900);
    color: var(--sf-accent-100);
}

.sf-store-action__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sf-store-action__badge {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--sf-accent);
    color: #14121f;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Buscador
   ========================================================================== */

.sf-store-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    margin-top: 12px;
    border-radius: var(--sf-r-md);
    background: var(--sf-store-field);
    border: 1px solid var(--sf-line);
}

.sf-store-search:focus-within {
    border-color: var(--sf-accent);
}

.sf-store-search__mark {
    display: inline-flex;
    align-items: center;
    color: var(--sf-accent-300);
    flex: none;
}

.sf-store-search input[type="search"] {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 14px;
    color: var(--sf-text);
    caret-color: var(--sf-accent);
    background: transparent;
    border: 0;
    border-radius: 0;
    min-height: 40px;
    padding: 0;
    appearance: none;
}

.sf-store-search input[type="search"]::placeholder {
    color: var(--sf-n-600);
}

.sf-store-search input[type="search"]:hover,
.sf-store-search input[type="search"]:focus-visible {
    border: 0;
    outline: none;
}

.sf-store-search__submit {
    flex: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sf-accent-200);
    background: transparent;
    border: 1px solid var(--sf-accent-600);
    border-radius: var(--sf-r-sm);
    padding: 7px 12px;
    cursor: pointer;
}

.sf-store-search__submit:hover {
    background: var(--sf-accent-900);
}

/* ==========================================================================
   Mensajes
   La tienda no carga chrome.css, asi que los avisos del carrito necesitan su
   propio tratamiento.
   ========================================================================== */

body.sf-store .sf-messages {
    width: auto;
    max-width: var(--sf-store-max);
    margin: 12px auto 0;
    display: grid;
    gap: 8px;
}

body.sf-store .sf-messages .message {
    border-radius: var(--sf-r-md);
    padding: 11px 13px;
    font-size: var(--sf-fs-sub);
    background: var(--sf-store-card);
    border: 1px solid var(--sf-line);
    color: var(--sf-text);
}

body.sf-store .sf-messages .message-success {
    border-color: var(--sf-accent-600);
    background: var(--sf-accent-900);
    color: var(--sf-accent-100);
}

body.sf-store .sf-messages .message-warning {
    border-color: var(--sf-warn-line);
    background: var(--sf-warn-bg);
    color: var(--sf-warn-text);
}

body.sf-store .sf-messages .message-error {
    border-color: var(--sf-danger-line);
    background: var(--sf-danger-bg);
    color: var(--sf-danger-text);
}

/* ==========================================================================
   Hero
   Mensaje comercial neutro: no promete precios, cuotas, envios ni plazos.
   ========================================================================== */

.sf-store-hero {
    position: relative;
    overflow: hidden;
    margin-top: 12px;
    border-radius: var(--sf-r-md);
    border: 1px solid var(--sf-accent-800);
    background: linear-gradient(140deg, #16122b 0%, #0e0e18 62%);
    padding: 18px 16px;
}

.sf-store-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(145, 132, 217, .30), transparent 68%);
    pointer-events: none;
}

.sf-store-hero__kicker {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sf-accent-300);
}

.sf-store-hero__title {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 7px 0 0;
    max-width: 22ch;
}

.sf-store-hero__body {
    font-size: 12.5px;
    color: var(--sf-text-muted);
    margin: 7px 0 0;
    max-width: 34ch;
    line-height: 1.5;
}

.sf-store-hero__cta {
    position: relative;
    display: inline-flex;
    margin-top: 14px;
}

/* ==========================================================================
   Categorias · fila con scroll horizontal
   Son las categorias reales que expone la vista, cada una enlazada a su
   filtro real ?categoria=<id>.
   ========================================================================== */

.sf-store-cats {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.sf-store-cats::-webkit-scrollbar {
    display: none;
}

.sf-store-cat {
    flex: none;
    font-size: 12.5px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--sf-line);
    color: var(--sf-n-300);
    text-decoration: none;
    white-space: nowrap;
}

.sf-store-cat--on {
    border-color: var(--sf-accent);
    background: var(--sf-accent-900);
    color: var(--sf-text);
}

/* ==========================================================================
   Grilla de productos
   Dos columnas en movil, cuatro en escritorio. Mismo markup.
   ========================================================================== */

.sf-store-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* ==========================================================================
   Card de producto
   ========================================================================== */

.sf-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-md);
    background: var(--sf-store-card);
    overflow: hidden;
}

/* Placeholder de imagen. El hueco tiene la proporcion final, asi que cuando
   existan fotos entran sin rediseno. */
.sf-card__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: linear-gradient(150deg, #191926, #0e0e16);
    text-decoration: none;
    color: var(--sf-n-700);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    overflow: hidden;
}

.sf-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sin foto cargada la tarjeta no muestra un hueco ni una palabra suelta:
   muestra un lugar con el nombre de la categoria. */
.sf-card__nophoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--sf-n-700);
}

.sf-card__nophoto-mark {
    font-size: 26px;
    line-height: 1;
    color: var(--sf-n-800);
}

.sf-card__nophoto-text {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sf-card__flag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 11px;
    border: 1px solid var(--sf-accent-700);
    background: var(--sf-accent-900);
    color: var(--sf-accent-200);
    font-size: 10.5px;
    letter-spacing: 0;
}

.sf-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 10px 11px;
}

.sf-card__name {
    margin: 0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.35;
}

.sf-card__name a {
    color: var(--sf-text);
    text-decoration: none;
}

.sf-card__name a:hover {
    color: var(--sf-accent-200);
}

.sf-card__cat {
    font-size: 11px;
    color: var(--sf-text-ghost);
    margin: 0;
}

.sf-card__price {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding-top: 3px;
}

.sf-card__price small {
    font-size: 10.5px;
    font-weight: 400;
    color: var(--sf-text-ghost);
}

/* Disponibilidad semantica. Nunca la cantidad exacta. */
.sf-card__stock {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sf-card__stock--available {
    color: var(--sf-accent-300);
}

.sf-card__stock--low {
    color: var(--sf-store-warn);
}

.sf-card__stock--out {
    color: var(--sf-text-faint);
}

.sf-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.sf-card__action {
    margin-top: 8px;
}

/* Los controles de la tienda son grandes: se usan con el dedo. */
.sf-card__btn {
    width: 100%;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    min-height: 38px;
    padding: 8px 10px;
    color: var(--sf-accent-200);
    background: transparent;
    border: 1px solid var(--sf-accent);
    border-radius: var(--sf-r-sm);
    cursor: pointer;
}

.sf-card__btn:hover {
    background: var(--sf-accent-900);
}

.sf-card__btn:disabled {
    color: var(--sf-text-faint);
    border-color: var(--sf-n-800);
    cursor: not-allowed;
}

.sf-card--out .sf-card__media {
    opacity: .6;
}

/* ==========================================================================
   Banda informativa de entrega
   Solo dice lo que esta confirmado: retiro en sucursal y envio a domicilio
   existen como modalidades. No promete costos ni plazos.
   ========================================================================== */

.sf-store-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 18px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-md);
    background: var(--sf-line);
    overflow: hidden;
}

.sf-store-band__cell {
    background: var(--sf-store-card);
    padding: 12px;
}

.sf-store-band__title {
    font-size: 12.5px;
    font-weight: 500;
}

.sf-store-band__note {
    font-size: 11.5px;
    color: var(--sf-text-faint);
    padding-top: 3px;
    line-height: 1.45;
    margin: 0;
}

/* ==========================================================================
   Resultados de busqueda
   ========================================================================== */

.sf-store-results-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 14px;
}

.sf-store-results-head__title {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}

.sf-store-results-head__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--sf-text-faint);
}

/* Vacio de busqueda: repite el termino y ofrece salidas concretas. */
.sf-store-empty {
    margin-top: 18px;
    border: 1px dashed var(--sf-n-700);
    border-radius: var(--sf-r-md);
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-store-empty__title {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.sf-store-empty__body {
    font-size: 13px;
    color: var(--sf-text-muted);
    line-height: 1.55;
    margin: 0;
}

.sf-store-empty__exits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

.sf-store-exit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-sm);
    background: var(--sf-store-card);
    color: var(--sf-text);
    font-size: 13px;
    text-decoration: none;
}

.sf-store-exit:hover {
    border-color: var(--sf-accent-600);
}

.sf-store-exit__chev {
    color: var(--sf-text-ghost);
    flex: none;
}

/* ==========================================================================
   Pie
   ========================================================================== */

.sf-store-foot {
    margin-top: 28px;
    border-top: 1px solid var(--sf-line);
    padding: 18px 14px 0;
    font-size: 11.5px;
    color: var(--sf-text-ghost);
    line-height: 1.6;
}

.sf-store-foot__line {
    margin: 0 0 6px;
}

.sf-store-foot__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: var(--sf-text-faint);
}

/* ==========================================================================
   Escritorio
   El mismo markup: solo cambian las columnas y el ancho util.
   ========================================================================== */

@media (min-width: 700px) {
    .sf-store-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .sf-store-pad {
        padding-inline: 20px;
    }

    .sf-store-hero {
        padding: 28px 26px;
    }

    .sf-store-hero__title {
        font-size: 30px;
    }
}

@media (min-width: 1000px) {
    .sf-store-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sf-store-search {
        height: 48px;
    }

    .sf-card__name {
        font-size: 13.5px;
    }

    .sf-store-band {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Ficha de producto
   Referencia: docs/design/source/Ecommerce - Alta fidelidad.dc.html (Ficha).
   ========================================================================== */

.sf-pd {
    display: flex;
    flex-direction: column;
}

.sf-pd__crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0 0;
    font-size: 12.5px;
    color: var(--sf-text-faint);
}

.sf-pd__crumb a {
    color: var(--sf-text-faint);
    text-decoration: none;
}

.sf-pd__crumb a:hover {
    color: var(--sf-accent-200);
}

/* Hueco de imagen con la proporcion final: cuando haya fotos entran sin
   rediseno. */
.sf-pd__gallery {
    margin-top: 12px;
}

.sf-pd__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 340px;
    border-radius: var(--sf-r-md);
    background: linear-gradient(160deg, #1c1c2b, #0d0d15);
    color: var(--sf-n-700);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    object-fit: contain;
}

.sf-pd__media--empty {
    flex-direction: column;
    gap: 8px;
}

.sf-pd__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
}

.sf-pd__thumb {
    flex: none;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-sm);
    background: var(--sf-panel);
    overflow: hidden;
    cursor: pointer;
}

.sf-pd__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sf-pd__thumb--on {
    border-color: var(--sf-accent);
}

.sf-pd__thumb:focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: 2px;
}

.sf-pd__name {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    margin: 14px 0 0;
}

.sf-pd__cat {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sf-accent-300);
    margin: 12px 0 0;
}

.sf-pd__price {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    padding-top: 12px;
}

.sf-pd__stock {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    padding-top: 8px;
}

.sf-pd__desc {
    font-size: 13px;
    color: var(--sf-text-muted);
    line-height: 1.6;
    margin: 14px 0 0;
}

/* --- Variantes: radios reales con la etiqueta estilizada --- */

.sf-pd__group {
    padding-top: 18px;
}

.sf-pd__group-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sf-pd__group-title {
    font-size: 12.5px;
    font-weight: 500;
}

.sf-pd__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 0 0;
    border: 0;
    margin: 0;
}

.sf-pd-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--sf-line);
    border-radius: 18px;
    background: var(--sf-store-card);
    font-size: 12.5px;
    color: var(--sf-n-300);
    cursor: pointer;
}

.sf-pd-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.sf-pd-opt__code {
    font-size: 10.5px;
    color: var(--sf-text-ghost);
    font-variant-numeric: tabular-nums;
}

.sf-pd-opt:has(input:checked) {
    border-color: var(--sf-accent);
    background: var(--sf-accent-900);
    color: var(--sf-text);
}

.sf-pd-opt:has(input:focus-visible) {
    outline: 2px solid var(--sf-accent);
    outline-offset: 2px;
}

/* Una variante sin stock se ve, se entiende y no se puede elegir. */
.sf-pd-opt--out {
    cursor: not-allowed;
    opacity: .55;
    border-style: dashed;
}

.sf-pd-opt--out .sf-pd-opt__code {
    color: var(--sf-text-faint);
}

.sf-pd__note {
    font-size: 11.5px;
    color: var(--sf-text-ghost);
    line-height: 1.5;
    padding-top: 9px;
    margin: 0;
}

/* --- Entrega --- */

.sf-pd__delivery {
    margin-top: 18px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-md);
    overflow: hidden;
}

.sf-pd__delivery-row {
    display: flex;
    gap: 10px;
    padding: 11px 12px;
    background: var(--sf-store-card);
}

.sf-pd__delivery-row + .sf-pd__delivery-row {
    border-top: 1px solid var(--sf-line);
}

.sf-pd__delivery-mark {
    color: var(--sf-accent-300);
    font-size: 13px;
    flex: none;
}

.sf-pd__delivery-title {
    font-size: 12.5px;
}

.sf-pd__delivery-note {
    font-size: 11.5px;
    color: var(--sf-text-faint);
    padding-top: 2px;
    margin: 0;
}

/* ==========================================================================
   Barra de accion fija
   Vive dentro del <form>, asi que el submit sigue siendo el mismo.
   ========================================================================== */

.sf-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-inline: -14px;
    padding: 11px 14px calc(16px + env(safe-area-inset-bottom));
    background: var(--sf-card-foot);
    border-top: 1px solid var(--sf-line);
}

.sf-actionbar__cta {
    flex: 1;
    min-height: 44px;
    font-size: 14px;
}

.sf-actionbar__reason {
    flex: 1;
    font-size: 11.5px;
    color: var(--sf-text-faint);
    line-height: 1.4;
}

/* ==========================================================================
   Stepper de cantidad
   El numero sigue siendo un input[type=number] real con su min y su max.
   Los botones menos y mas son mejora progresiva: sin JS no aparecen y el
   campo se edita a mano.
   ========================================================================== */

.sf-stepper {
    display: flex;
    align-items: center;
    flex: none;
    height: 44px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-sm);
    background: var(--sf-store-field);
    overflow: hidden;
}

.sf-stepper--sm {
    height: 32px;
}

.sf-stepper__btn {
    width: 36px;
    align-self: stretch;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    color: var(--sf-n-300);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.sf-stepper--sm .sf-stepper__btn {
    width: 28px;
    font-size: 14px;
}

.sf-stepper__btn:hover {
    color: var(--sf-text);
}

.sf-stepper__btn:disabled {
    color: var(--sf-n-700);
    cursor: not-allowed;
}

.sf-stepper input[type="number"] {
    width: 46px;
    min-width: 0;
    align-self: stretch;
    font: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--sf-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    appearance: textfield;
    -moz-appearance: textfield;
}

.sf-stepper--sm input[type="number"] {
    width: 36px;
    font-size: 13px;
}

.sf-stepper input[type="number"]::-webkit-outer-spin-button,
.sf-stepper input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.sf-stepper input[type="number"]:hover,
.sf-stepper input[type="number"]:focus-visible {
    border: 0;
    outline: none;
}

.sf-stepper__ok {
    font: inherit;
    font-size: 11.5px;
    color: var(--sf-accent-200);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--sf-line);
    padding: 0 10px;
    align-self: stretch;
    cursor: pointer;
}

.sf-stepper__ok:hover {
    background: var(--sf-accent-900);
}

/* ==========================================================================
   Carrito
   ========================================================================== */

.sf-cart__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-top: 14px;
}

.sf-cart__title {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

.sf-cart__count {
    font-size: 12px;
    color: var(--sf-text-faint);
    font-variant-numeric: tabular-nums;
}

.sf-cart-line {
    display: flex;
    gap: 11px;
    padding: 14px 0;
    border-bottom: 1px solid var(--sf-store-divider);
}

.sf-cart-line__thumb {
    width: 72px;
    height: 72px;
    flex: none;
    border-radius: var(--sf-r-sm);
    border: 1px solid var(--sf-line);
    background: linear-gradient(150deg, #1b1b29, #0e0e16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-n-700);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-decoration: none;
}

.sf-cart-line__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}


.sf-cart-line__body {
    flex: 1;
    min-width: 0;
}

.sf-cart-line__name {
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
    font-weight: 400;
}

.sf-cart-line__name a {
    color: var(--sf-text);
    text-decoration: none;
}

.sf-cart-line__name a:hover {
    color: var(--sf-accent-200);
}

.sf-cart-line__meta {
    font-size: 11.5px;
    color: var(--sf-text-faint);
    padding-top: 3px;
}

.sf-cart-line__meta--low {
    color: var(--sf-store-warn);
}

.sf-cart-line__controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
}

.sf-cart-line__price {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.sf-cart-line__remove {
    font: inherit;
    font-size: 11.5px;
    color: var(--sf-text-ghost);
    background: transparent;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sf-cart-line__remove:hover {
    color: var(--sf-danger-text);
}

/* --- Resumen --- */

.sf-cart-summary {
    position: sticky;
    bottom: 0;
    margin-top: 4px;
    margin-inline: -14px;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
    background: var(--sf-card-foot);
    border-top: 1px solid var(--sf-line);
}

.sf-cart-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--sf-text-muted);
    padding-bottom: 4px;
}

.sf-cart-summary__row span:last-child {
    font-variant-numeric: tabular-nums;
}

.sf-cart-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0 11px;
}

.sf-cart-summary__total-label {
    font-size: 13.5px;
}

.sf-cart-summary__total-value {
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sf-cart-summary__actions {
    display: flex;
    gap: 8px;
}

.sf-cart-summary__actions > * {
    flex: 1;
    min-height: 44px;
}

.sf-cart-summary__note {
    font-size: 11px;
    color: var(--sf-text-ghost);
    line-height: 1.5;
    padding-top: 9px;
    margin: 0;
}

/* ==========================================================================
   Escritorio: ficha en dos columnas, carrito con ancho contenido.
   Mismo markup.
   ========================================================================== */

@media (min-width: 800px) {
    .sf-pd {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
        align-items: start;
        padding-top: 8px;
    }

    .sf-pd__crumb {
        grid-column: 1 / -1;
    }

    .sf-pd__media {
        max-height: none;
        margin-top: 0;
        position: sticky;
        top: 68px;
    }

    .sf-pd__name {
        margin-top: 4px;
    }

    /* En escritorio la barra deja de ser una franja al pie y se integra. */
    .sf-actionbar {
        position: static;
        margin-inline: 0;
        padding: 16px 0 0;
        background: transparent;
        border-top: 1px solid var(--sf-line);
    }

    .sf-cart {
        max-width: 760px;
        margin: 0 auto;
    }

    .sf-cart-summary {
        position: static;
        margin-inline: 0;
        margin-top: 18px;
        border: 1px solid var(--sf-line);
        border-radius: var(--sf-r-md);
        padding: 16px;
        background: var(--sf-store-card);
    }
}

/* ==========================================================================
   Checkout · grupos de entrega
   Retiro y envío se excluyen: nunca se ven los dos a la vez.
   ========================================================================== */

.sf-checkout-group {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* [hidden] pierde contra un display propio: el atributo lo pone la plantilla al
   renderizar y el script al cambiar de entrega, pero sin esta regla el grupo se
   seguiria dibujando y se verian los dos a la vez. Mismo par que .sf-table__row
   en components.css y .sf-prod-filter en products.css. */
.sf-checkout-group[hidden] {
    display: none;
}

/* La misma trampa, en la fila del resumen. Es display:flex, asi que el [hidden]
   que le pone la plantilla no la ocultaba: la aclaracion del flete de Via Cargo
   se veia tambien en un pedido de retiro, que no tiene ningun envio. */
.sf-cart-summary__row[hidden] {
    display: none;
}

/* ==========================================================================
   Páginas de texto (cambios y garantías)
   Mobile-first como el resto de la tienda: una columna, medida cómoda.
   ========================================================================== */

.sf-legal {
    max-width: 68ch;
    margin: 0 auto;
    padding: 8px 0 24px;
}

.sf-legal__title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
}

.sf-legal__intro {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--sf-text-muted);
    line-height: 1.65;
}

.sf-legal__block {
    margin-top: 26px;
}

.sf-legal__subtitle {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 10px;
}

.sf-legal__list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13.5px;
    color: var(--sf-n-300);
    line-height: 1.6;
}

.sf-legal__foot {
    margin-top: 26px;
    padding-top: 14px;
    border-top: 1px solid var(--sf-line);
    font-size: 12px;
    color: var(--sf-text-ghost);
    line-height: 1.6;
}

/* En teléfono la palabra sobra: queda el ícono con su área táctil entera. */
@media (max-width: 599px) {
    .sf-store-action__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .sf-store-action {
        min-width: 44px;
        justify-content: center;
        padding: 0 10px;
    }

    .sf-store-nav {
        display: none;
    }

    .sf-store-brand__name {
        font-size: 11.5px;
    }
}

/* ==========================================================================
   Cierre del pedido
   El pedido ya está registrado: acá sólo se elige cómo terminarlo.
   ========================================================================== */

.sf-order-close {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.sf-order-close__note {
    margin: 0;
    font-size: 12.5px;
    color: var(--sf-text-faint);
    line-height: 1.6;
}

/* ==========================================================================
   Multimedia de la tienda: diapositivas y video.
   Mobile-first, como el resto de la tienda. Nada de esto existe si el negocio
   no cargo contenido: los parciales no dibujan nada y la portada queda igual.
   ========================================================================== */

/* --- Diapositivas --------------------------------------------------------- */

.sf-slider {
    position: relative;
    margin-bottom: var(--sf-sp-6);
    background: var(--sf-panel);
    overflow: hidden;
}

.sf-slider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sf-slider__track::-webkit-scrollbar {
    display: none;
}

/* Sin JavaScript no hay desplazamiento programado, pero el track es un
   scroller real: se pasa con el dedo igual. */
.sf-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}

.sf-slide__image {
    display: block;
    width: 100%;
    height: clamp(200px, 52vw, 420px);
    object-fit: cover;
}

.sf-slide__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--sf-sp-8) var(--sf-sp-6) var(--sf-sp-6);
    background: linear-gradient(to top, rgba(9, 9, 14, .88), rgba(9, 9, 14, 0));
    color: var(--sf-text);
}

.sf-slide__title {
    font-size: clamp(19px, 5vw, 27px);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.sf-slide__text {
    font-size: var(--sf-fs-body);
    color: var(--sf-n-300);
    line-height: 1.5;
    margin: 6px 0 0;
    max-width: 52ch;
}

.sf-slide__cta {
    margin-top: var(--sf-sp-4);
}

.sf-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--sf-line);
    background: rgba(9, 9, 14, .72);
    color: var(--sf-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.sf-slider__arrow--prev { left: 10px; }
.sf-slider__arrow--next { right: 10px; }

.sf-slider__arrow:hover {
    background: rgba(9, 9, 14, .9);
}

.sf-slider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 7px;
}

.sf-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--sf-n-400);
    background: transparent;
    cursor: pointer;
}

.sf-slider__dot--on {
    background: var(--sf-accent-200);
    border-color: var(--sf-accent-200);
}

/* --- Video ---------------------------------------------------------------- */

.sf-store-video {
    margin: var(--sf-sp-8) 0;
}

.sf-store-video__title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 4px;
}

.sf-store-video__text {
    font-size: var(--sf-fs-body);
    color: var(--sf-n-400);
    line-height: 1.5;
    margin: 0 0 var(--sf-sp-4);
}

.sf-video {
    position: relative;
    border-radius: var(--sf-r-md);
    overflow: hidden;
    background: var(--sf-panel);
    border: 1px solid var(--sf-line);
}

/* La proporcion se reserva antes de cargar nada, asi la pagina no salta
   cuando aparece el reproductor. */
.sf-video__cover,
.sf-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.sf-video__cover {
    position: relative;
    background-color: var(--sf-card);
    background-size: cover;
    background-position: center;
    text-decoration: none;
}

.sf-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(9, 9, 14, .78);
    border: 1px solid var(--sf-n-500);
    color: var(--sf-text);
    font-size: 22px;
    padding-left: 4px;
}

.sf-video__cover:hover .sf-video__play {
    background: rgba(9, 9, 14, .92);
    border-color: var(--sf-accent-400);
}

.sf-video__badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: var(--sf-fs-meta);
    color: var(--sf-n-300);
    background: rgba(9, 9, 14, .7);
    border-radius: var(--sf-r-sm);
    padding: 2px 7px;
}

.sf-pd__video {
    margin: var(--sf-sp-6) 0;
}

.sf-pd__video-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 var(--sf-sp-3);
}

/* ==========================================================================
   Seguimiento del pedido y recuperacion.
   ========================================================================== */

.sf-track__head {
    padding-bottom: var(--sf-sp-5);
    border-bottom: 1px solid var(--sf-line-soft);
}

.sf-track__kicker {
    font-size: var(--sf-fs-kicker);
    letter-spacing: var(--sf-ls-kicker);
    text-transform: uppercase;
    color: var(--sf-n-500);
    margin: 0;
}

.sf-track__code {
    font-size: 25px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin: 4px 0 0;
}

.sf-track__date {
    font-size: var(--sf-fs-sub);
    color: var(--sf-n-400);
    margin: 4px 0 0;
}

.sf-track__states {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--sf-sp-4);
    margin: var(--sf-sp-6) 0;
}

.sf-track__state {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-md);
    padding: var(--sf-sp-4);
    background: var(--sf-panel);
}

.sf-track__state-label {
    font-size: var(--sf-fs-kicker);
    letter-spacing: var(--sf-ls-kicker);
    text-transform: uppercase;
    color: var(--sf-n-500);
}

.sf-track__pickup {
    border: 1px solid var(--sf-accent-700);
    background: var(--sf-accent-900);
    border-radius: var(--sf-r-md);
    padding: var(--sf-sp-6);
    text-align: center;
    margin-bottom: var(--sf-sp-6);
}

.sf-track__pickup--done {
    border-color: var(--sf-line);
    background: var(--sf-panel);
}

.sf-track__pickup-label {
    font-size: var(--sf-fs-kicker);
    letter-spacing: var(--sf-ls-kicker);
    text-transform: uppercase;
    color: var(--sf-accent-300);
    margin: 0;
}

.sf-track__pickup-code {
    font-size: clamp(30px, 9vw, 40px);
    font-weight: 600;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    color: var(--sf-accent-100);
    margin: 6px 0;
}

.sf-track__pickup-help {
    font-size: var(--sf-fs-sub);
    color: var(--sf-n-300);
    margin: 0;
}

.sf-track__block {
    padding: var(--sf-sp-5) 0;
    border-top: 1px solid var(--sf-line-soft);
}

.sf-track__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 var(--sf-sp-4);
}

.sf-track__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sf-sp-4);
}

.sf-track__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--sf-sp-4);
    font-size: var(--sf-fs-body);
}

.sf-track__item-name {
    grid-column: 1;
    overflow-wrap: anywhere;
}

.sf-track__item-qty {
    grid-column: 1;
    font-size: var(--sf-fs-meta);
    color: var(--sf-n-500);
    font-variant-numeric: tabular-nums;
}

.sf-track__item-sub {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-variant-numeric: tabular-nums;
}

.sf-track__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: var(--sf-sp-5) 0 0;
    padding-top: var(--sf-sp-4);
    border-top: 1px solid var(--sf-line-soft);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.sf-track__line,
.sf-track__body {
    font-size: var(--sf-fs-body);
    color: var(--sf-n-300);
    line-height: 1.6;
    margin: 0 0 4px;
}

.sf-track__body--soft {
    color: var(--sf-n-500);
    font-size: var(--sf-fs-sub);
    margin-top: var(--sf-sp-4);
}

.sf-track__back {
    padding: var(--sf-sp-6) 0;
}

.sf-lookup__title {
    font-size: 22px;
    font-weight: 600;
    margin: var(--sf-sp-6) 0 4px;
}

.sf-lookup__lead {
    font-size: var(--sf-fs-body);
    color: var(--sf-n-400);
    line-height: 1.6;
    margin: 0 0 var(--sf-sp-6);
}

.sf-lookup__error {
    border: 1px solid var(--sf-danger-line);
    background: var(--sf-danger-bg);
    color: var(--sf-danger-text);
    border-radius: var(--sf-r-sm);
    padding: var(--sf-sp-4);
    font-size: var(--sf-fs-sub);
    margin: 0 0 var(--sf-sp-5);
}

.sf-lookup__form {
    display: flex;
    flex-direction: column;
    gap: var(--sf-sp-5);
}

.sf-lookup__help,
.sf-lookup__back {
    font-size: var(--sf-fs-sub);
    color: var(--sf-n-500);
    line-height: 1.6;
    margin: var(--sf-sp-6) 0 0;
}

.sf-order-track {
    margin: var(--sf-sp-6) 0;
}

/* --- Pantallas grandes ---------------------------------------------------- */

@media (min-width: 900px) {
    .sf-slide__image {
        height: clamp(320px, 34vw, 520px);
    }

    .sf-slide__body {
        padding: var(--sf-sp-8) 40px 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-slider__track {
        scroll-behavior: auto;
    }
}

/* --- Reproductor de un video propio --- */

.sf-video--own {
    border-color: var(--sf-line);
    background: var(--sf-card);
}

.sf-video__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.sf-video__fallback {
    padding: var(--sf-sp-5);
    font-size: var(--sf-fs-sub);
    color: var(--sf-n-300);
    margin: 0;
}

/* La salida a la plataforma, para el video que no permite incrustarse. */
.sf-video__escape {
    font-size: var(--sf-fs-meta);
    color: var(--sf-n-400);
    padding: var(--sf-sp-3) var(--sf-sp-4);
    margin: 0;
    border-top: 1px solid var(--sf-line);
}

/* --- Aclaracion del flete en el checkout --- */

.sf-checkout-note {
    border: 1px solid var(--sf-accent-800);
    background: var(--sf-accent-900);
    border-radius: var(--sf-r-sm);
    padding: var(--sf-sp-4);
    font-size: var(--sf-fs-sub);
    color: var(--sf-accent-200);
    line-height: 1.55;
    margin: 0 0 var(--sf-sp-4);
}

.sf-checkout-shipping span:last-child {
    color: var(--sf-n-400);
    font-size: var(--sf-fs-sub);
}

.sf-track__ship-note {
    color: var(--sf-accent-200);
}


/* --- Paginas legales --- */

.sf-legal {
    max-width: 68ch;
}

.sf-legal__title {
    font-size: 23px;
    font-weight: 600;
    margin: var(--sf-sp-6) 0 var(--sf-sp-5);
}

.sf-legal__subtitle {
    font-size: 16px;
    font-weight: 600;
    margin: var(--sf-sp-8) 0 var(--sf-sp-4);
}

.sf-legal__text {
    font-size: var(--sf-fs-body);
    color: var(--sf-n-300);
    line-height: 1.7;
}

.sf-legal__text p {
    margin: 0 0 var(--sf-sp-4);
}

.sf-legal__list {
    font-size: var(--sf-fs-body);
    color: var(--sf-n-300);
    line-height: 1.7;
    padding-left: 1.2em;
    margin: 0 0 var(--sf-sp-4);
}

.sf-legal__identity {
    margin-top: var(--sf-sp-8);
    padding-top: var(--sf-sp-5);
    border-top: 1px solid var(--sf-line-soft);
}

.sf-legal__facts {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sf-sp-4);
}

.sf-legal__facts dt {
    font-size: var(--sf-fs-kicker);
    letter-spacing: var(--sf-ls-kicker);
    text-transform: uppercase;
    color: var(--sf-n-500);
    margin: 0 0 3px;
}

.sf-legal__facts dd {
    font-size: var(--sf-fs-body);
    margin: 0;
    overflow-wrap: anywhere;
}

.sf-legal__back {
    padding: var(--sf-sp-8) 0 var(--sf-sp-6);
    font-size: var(--sf-fs-sub);
}

.sf-store-foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-sp-3) var(--sf-sp-5);
    padding: var(--sf-sp-2) 0;
}

.sf-store-foot__legal-id {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--sf-sp-4);
    color: var(--sf-n-500);
}