/* ==========================================================================
   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;
    /* Las tarjetas de una misma fila miden lo mismo aunque una lleve el aviso
       de minimo mayorista y la otra no. Sin esto, agregar esa linea a un solo
       producto desalinea toda la fila. */
    align-items: stretch;
}

/* El cuerpo empuja y la accion queda abajo, asi que "Agregar" y "Guardar" caen
   a la misma altura en todas las tarjetas de la fila. */
.sf-store-grid .sf-card__body,
.sf-store-carousel .sf-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sf-store-grid .sf-card__action,
.sf-store-carousel .sf-card__action {
    margin-top: auto;
}

/* ==========================================================================
   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);
}

/* El credito del desarrollador. Secundario a proposito: se lee despues de todo
   lo del negocio, y envuelve en vez de empujar la pagina a lo ancho. */
.sf-store-foot__credit {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--sf-sp-3);
    margin-top: var(--sf-sp-3);
    padding-top: var(--sf-sp-3);
    border-top: 1px solid var(--sf-line-soft);
    color: var(--sf-n-600);
}

.sf-store-foot__credit-link {
    color: var(--sf-n-400);
    text-decoration: none;
    border-bottom: 1px solid var(--sf-line);
    overflow-wrap: anywhere;
}

.sf-store-foot__credit-link:hover {
    color: var(--sf-text);
    border-bottom-color: var(--sf-n-600);
}

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

/* ==========================================================================
   La cuenta del comprador, donde asoma en la tienda
   --------------------------------------------------------------------------
   Tres piezas que NO son de /cuenta/ sino de la tienda entera: la senal de
   con que cuenta se navega (header), el corazon (catalogo y ficha) y el aviso
   de cantidad minima mayorista (tarjeta, ficha y carrito). Por eso viven aca
   y no en account.css, que solo carga en las pantallas de la cuenta.
   ========================================================================== */

/* La franja de la cuenta, debajo del header y no dentro. El header es una fila
   de altura fija; una segunda fila adentro se le pone al costado y empuja la
   pagina mas ancha que la pantalla. Es discreta a proposito: decir "cuenta
   mayorista" no puede convertirse en otra interfaz. */
.sf-store-accountbar {
    width: 100%;
    padding: 8px 14px;
    background: var(--sf-panel);
    border-bottom: 1px solid var(--sf-line);
}

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

.sf-acc-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--sf-line);
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--sf-text-muted);
    background: var(--sf-panel);
}

.sf-acc-badge--wholesale {
    border-color: var(--sf-accent-700);
    background: var(--sf-accent-900);
    color: var(--sf-accent-200);
}

.sf-acc-badge--pending {
    border-color: var(--sf-warn-line);
    background: var(--sf-warn-bg);
    color: var(--sf-warn-text);
}

.sf-acc-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* El corazon. Area tactil completa en telefono, y el mismo dibujo para el
   boton con cuenta y para el enlace a Ingresar sin ella. */
.sf-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-sm, 8px);
    background: transparent;
    color: var(--sf-n-300);
    font: inherit;
    font-size: 12.5px;
    text-decoration: none;
    cursor: pointer;
}

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

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

.sf-fav-btn--on {
    border-color: var(--sf-accent-700);
    background: var(--sf-accent-900);
    color: var(--sf-accent-100);
}

.sf-fav-btn__mark {
    display: inline-flex;
}

/* En la tarjeta el corazon va debajo de Agregar y ocupa el ancho: a 390 px, dos
   controles lado a lado en una tarjeta de media columna quedan impracticables. */
.sf-card__action .sf-fav-btn {
    width: 100%;
    margin-top: 6px;
}

/* En la ficha va fuera de la barra pegajosa: dos barras sticky se pisarian. */
.sf-pd__fav {
    display: flex;
    margin-top: 12px;
}

/* El minimo mayorista, dicho donde se decide la cantidad. Una accion
   bloqueada explica: el aviso va al lado del control, no escondido. */
.sf-min-note {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--sf-warn-text);
}

.sf-min-note--blocked {
    padding: 8px 10px;
    border: 1px solid var(--sf-warn-line);
    border-radius: var(--sf-r-sm, 8px);
    background: var(--sf-warn-bg);
}

/* ==========================================================================
   Carrusel de productos destacados
   --------------------------------------------------------------------------
   Los MISMOS productos que Axel marco como destacados, en el orden que les
   puso. La tarjeta es la del catalogo, asi que el precio ya respeta la cuenta
   de quien mira y no hay un segundo lugar donde el precio pueda desfasarse.

   Se desplaza con el dedo. Sin JavaScript: scroll-snap y nada mas. Si el
   navegador no lo soporta, sigue siendo una fila que se puede arrastrar.
   ========================================================================== */

.sf-store-carousel {
    display: flex;
    gap: var(--sf-sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    padding-bottom: var(--sf-sp-3);
    /* La barra de scroll no se esconde: es la unica pista de que hay mas al
       costado, y esconderla dejaria el resto invisible en escritorio. */
    scrollbar-width: thin;
}

.sf-store-carousel:focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: 3px;
    border-radius: var(--sf-r-sm);
}

.sf-store-carousel__item {
    flex: 0 0 68%;
    max-width: 260px;
    scroll-snap-align: start;
    /* Todas las tarjetas del carrusel miden lo mismo aunque una lleve el aviso
       de minimo mayorista: si no, la fila queda con los bordes escalonados. */
    display: flex;
}

.sf-store-carousel__item > .sf-card {
    flex: 1;
}

/* A 390 px se ve una tarjeta entera y el borde de la siguiente: eso es lo que
   le dice al dedo que hay mas para el costado. */
@media (min-width: 560px) {
    .sf-store-carousel__item {
        flex-basis: 40%;
    }
}

@media (min-width: 900px) {
    .sf-store-carousel__item {
        flex-basis: 24%;
    }
}

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