@import url('variables.css');

/* ==========================================================================
   Utilidades comunes
   ========================================================================== */

/* Un elemento con el atributo hidden queda oculto siempre, lleve las clases
   que lleve: las utilidades de Bootstrap (.d-flex, .d-block...) usan
   display:...!important y, si no, ganan al [hidden] y lo dejan visible
   (pasaba con el aviso de contraseña temporal de Mi perfil). */
[hidden] {
    display: none !important;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 13px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    padding: 8px 14px;
    border-radius: 999px;
}

.section-heading {
    max-width: 640px;
    margin-bottom: 44px;
}

.section-heading h2 {
    font: 800 clamp(26px, 4vw, 38px)/1.15 var(--font-display);
    letter-spacing: -.025em;
    margin: 14px 0 12px;
}

.section-heading p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

.section-heading.center p {
    margin-inline: auto;
}

/* Botones de marca: se apoyan en el reset/comportamiento de .btn de
   Bootstrap (foco, disabled, cursor...) pero con nuestra propia piel,
   para no pelear con el azul/paddings por defecto de Bootstrap. */
   
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: 600 15px/1 var(--font-body);
    padding: 15px 26px;
    border-radius: var(--radius-pill);
    /* Con la variable de Bootstrap (transparente por defecto): así los
       .btn-outline-* conservan su borde de color en vez de perderlo. */
    border: 1px solid var(--bs-btn-border-color, transparent);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out),
        background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
}

/* Feedback táctil al pulsar: el botón "se hunde" un instante. */
.btn:active {
    transform: translateY(0) scale(.97);
}

.btn:focus-visible {
    box-shadow: var(--focus-ring);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(23, 92, 58, .2), 0 8px 20px rgba(31, 122, 77, .22);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 2px 4px rgba(23, 92, 58, .2), 0 14px 30px rgba(31, 122, 77, .3);
}

.btn-primary:focus-visible {
    box-shadow: var(--focus-ring), 0 14px 30px rgba(31, 122, 77, .3);
}

/* Deshabilitado: el verde de la marca atenuado (Bootstrap ponía su azul). */
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    opacity: .45;
    box-shadow: none;
    cursor: not-allowed;
}

.btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

/* El .btn propio fija border transparente y pisaba el borde de
   .btn-outline-light de Bootstrap (quedaba solo el texto). */
.btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}

.btn-outline-light:hover {
    color: var(--color-text);
    background: #fff;
    border-color: #fff;
}

.btn-light,
.btn-light:hover {
    background: #fff;
    color: var(--color-primary-dark);
    border-color: #fff;
}

.btn-chip {
    font: 600 13.5px/1 var(--font-body);
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

a.btn-chip {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.btn-chip:hover:not(.active) {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.btn-chip:hover,
.btn-chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Opción que no se puede elegir (p. ej. efectivo si un producto no lo admite). */
.btn-chip.is-disabled,
.btn-chip.is-disabled:hover {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    opacity: .55;
    cursor: not-allowed;
}

/* Estado vacío honesto (sin ofertas / sin negocios / sin pedidos todavía),
   en vez de mostrar datos inventados para que la sección "no se vea vacía".
   Reutilizado por inicio, negocios, productos, cesta y mis-pedidos. */
.empty-shelf {
    text-align: center;
    padding: 48px 20px;
    color: var(--color-text-soft);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

.empty-shelf i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

/* ==========================================================================
   Topbar de anuncio
   ========================================================================== */

.announce-bar {
    background: var(--color-primary-dark);
    color: #fff;
    font: 500 13px/1 var(--font-body);
}

.announce-bar strong {
    font-weight: 700;
}

/* ==========================================================================
   Header — dos niveles al estilo Amazon Fresh: barra oscura con buscador
   dominante + selector de zona, y debajo una franja de categorías reales.
   ========================================================================== */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand__logo {
    height: 40px;
    width: auto;
    display: block;
}

/* Símbolo del logo en una placa blanca: el verde oscuro del carrito no
   contrasta con la cabecera ni el pie oscuros. El nombre va al lado en
   texto (el logo completo ya lo llevaba dentro y salía duplicado). */
.brand__marca {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: width var(--dur) var(--ease-out), height var(--dur) var(--ease-out);
}

.brand__marca .brand__logo {
    width: 32px;
    height: auto;
}

.brand__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.topbar {
    background: var(--color-header);
    padding-block: 12px;
    transition: padding-block var(--dur) var(--ease-out);
}

.brand__logo {
    transition: height var(--dur) var(--ease-out);
}

/* Al bajar, el header se compacta: menos alto fijo robando pantalla. */
.site-header.is-scrolled .topbar {
    padding-block: 7px;
}

.site-header.is-scrolled .topbar .brand__marca {
    width: 36px;
    height: 36px;
}

.site-header.is-scrolled .topbar .brand__marca .brand__logo {
    width: 28px;
}

.topbar__row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar__zone {
    flex-shrink: 0;
}

.topbar__zone-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: #fff;
    padding: 6px 10px;
    font-size: 13px;
}

.topbar__zone-btn:hover {
    border-color: rgba(255, 255, 255, .25);
}

.topbar__zone-btn > i:first-child {
    font-size: 15px;
}

.topbar__zone-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.topbar__zone-text small {
    color: rgba(255, 255, 255, .65);
    font-size: 11px;
}

.topbar__zone-text strong {
    font: 600 13.5px/1 var(--font-body);
    white-space: nowrap;
}

.topbar__zone-chevron {
    font-size: 10px;
    color: rgba(255, 255, 255, .6);
}

.topbar .dropdown-menu {
    max-height: 60vh;
    overflow-y: auto;
    border-radius: var(--radius);
    border: none;
    box-shadow: var(--shadow-float);
    min-width: 240px;
    padding: 8px;
}

.topbar .dropdown-item {
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

/* Los desplegables aparecen con un leve deslizamiento en vez de "saltar". */
@keyframes acajera-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.site-header .dropdown-menu.show {
    animation: acajera-dropdown-in var(--dur) var(--ease-out);
    transform-origin: top center;
}

/* Fondo/texto del menú fijados con nuestros propios tokens en vez de
   depender de las variables de Bootstrap (--bs-dropdown-bg/color): así no
   importa si algo externo (extensión de modo oscuro, etc.) las pisa — el
   menú del topbar (zona, categorías de usuario logueado) sigue siendo un
   fondo claro con texto legible pase lo que pase. */
.topbar .dropdown-menu,
.catnav__categorias-menu {
    --bs-dropdown-bg: var(--color-surface);
    --bs-dropdown-color: var(--color-text);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: var(--color-primary-dark);
    --bs-dropdown-link-hover-bg: var(--color-primary-soft);
    --bs-dropdown-header-color: var(--color-text-soft);
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-divider-bg: var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.topbar .dropdown-item,
.catnav__categorias-menu .dropdown-item {
    color: var(--color-text);
}

.topbar .dropdown-item:hover,
.topbar .dropdown-item:focus,
.catnav__categorias-menu .dropdown-item:hover,
.catnav__categorias-menu .dropdown-item:focus {
    color: var(--color-primary-dark);
    background-color: var(--color-primary-soft);
}

.topbar__search {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(242, 160, 61, 0);
    transition: box-shadow var(--dur) var(--ease-out);
}

/* El foco se marca en todo el buscador (input + botón) con un halo del
   color de acento, no con un contorno solo dentro del input. */
.topbar__search:focus-within {
    box-shadow: 0 0 0 3px rgba(242, 160, 61, .55);
}

.topbar__search input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    padding: 12px 16px;
    font: 500 14.5px/1.2 var(--font-body);
    background: #fff;
    color: var(--color-text);
}

.topbar__search input::placeholder {
    color: var(--color-text-soft);
}

.topbar__search input:focus,
.topbar__search input:focus-visible {
    outline: none;
    box-shadow: none;
}

.topbar__search button {
    border: none;
    background: var(--color-accent);
    color: #1b1f1d;
    padding: 0 20px;
    font-size: 15px;
    flex-shrink: 0;
    transition: background-color var(--dur-fast) ease;
}

.topbar__search button:hover {
    background: #e5943a;
}

.topbar__search button i {
    transition: transform var(--dur) var(--ease-spring);
}

.topbar__search button:hover i {
    transform: scale(1.15);
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.topbar__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #fff;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    font-weight: 600;
    /* El botón de cuenta (con sesión) es un <button>, no un <a> — sin este
       reset se ve con el fondo/borde blanco por defecto del navegador,
       como si estuviera siempre en hover. */
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease;
}

.topbar__action:hover,
.topbar__action.show,
.topbar__action[aria-expanded="true"] {
    background: rgba(255, 255, 255, .1);
}

.topbar__action i {
    font-size: 17px;
}

.topbar__action--cart {
    position: relative;
}

/* Numerito flotante con la cantidad total de productos en la cesta (suma de
   todas las cestas abiertas, no solo la de un negocio) — assets/js/
   carrito-badge.js lo mantiene al día tras cada cambio. */
.cart-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #1b1f1d;
    font: 700 10px/16px var(--font-body);
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-header);
}

/* "Salto" del numerito cuando sube la cantidad (carrito-badge.js añade
   .is-bumped y la quita al terminar la animación). */
@keyframes acajera-badge-bump {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.45);
    }

    100% {
        transform: scale(1);
    }
}

.cart-badge.is-bumped {
    animation: acajera-badge-bump .45s var(--ease-spring);
}

.topbar__action--cart.is-bumped > i {
    animation: acajera-badge-bump .45s var(--ease-spring);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow var(--dur) ease;
}

.site-header.is-scrolled {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

.catnav {
    background: var(--color-header-light);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Botón "Categorías": primero en la franja, queda justo debajo del logo
   (que es lo primero en la fila de arriba) y despliega las categorías de
   producto reales (`categorias`), no las de negocio de los demás enlaces. */
.catnav__categorias {
    flex-shrink: 0;
}

.catnav__categorias-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 11px 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    font: 600 13px/1 var(--font-body);
    white-space: nowrap;
}

.catnav__categorias-btn:hover,
.catnav__categorias-btn[aria-expanded="true"] {
    background: var(--color-primary-dark);
}

.catnav__categorias-menu {
    max-height: 70vh;
    overflow-y: auto;
    border-radius: var(--radius-sm);
    border: none;
    box-shadow: var(--shadow-float);
    min-width: 260px;
    padding: 8px;
}

.catnav__categorias-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}

.catnav__categorias-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

.catnav__categorias-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catnav__inner {
    display: flex;
    align-items: stretch;
}

.catnav__row {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}

.catnav__row::-webkit-scrollbar {
    display: none;
}

.catnav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 11px 14px;
    font: 600 13px/1 var(--font-body);
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    position: relative;
    transition: color var(--dur-fast) ease;
}

/* Subrayado que crece desde el centro, en vez de aparecer de golpe. */
.catnav__link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease-out);
}

.catnav__link:hover,
.catnav__link.active {
    color: #fff;
}

.catnav__link:hover::after,
.catnav__link.active::after {
    transform: scaleX(1);
}

.catnav__link--accent {
    color: var(--color-accent);
}

.catnav__link--accent:hover {
    color: var(--color-accent);
}

/* ---------- Tipos de establecimiento en la franja ----------
   Salen de las categorías de negocio de marketplace (header.php): en
   escritorio, cada uno es un botón con su menú (.tipo-menu); en el móvil,
   un enlace más dentro de la franja desplazable (.catnav__link--tipo). */

.catnav__tipos {
    align-items: stretch;
    flex-shrink: 0;
    gap: 2px;
    padding: 0 6px;
    margin-right: 4px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

/* Desplegable limpio, como los enlaces de la franja: sin fondo ni píldora;
   al pasar, abrirlo o estar activo, el texto se aclara y sale la misma línea
   naranja inferior que en .catnav__link. */
.catnav__tipo-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font: 600 13px/1 var(--font-body);
    white-space: nowrap;
    transition: color var(--dur-fast) ease;
}

.catnav__tipo-btn::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease-out);
}

.catnav__tipo-btn:hover,
.catnav__tipo-btn[aria-expanded="true"],
.catnav__tipo-btn.active {
    color: #fff;
}

.catnav__tipo-btn:hover::after,
.catnav__tipo-btn[aria-expanded="true"]::after,
.catnav__tipo-btn.active::after {
    transform: scaleX(1);
}

/* Sin anillo de foco al hacer clic con el ratón (con el teclado sí se ve). */
.catnav__tipo-btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.catnav__tipo-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--color-header);
    background: var(--color-accent);
    overflow: hidden;
    flex-shrink: 0;
}

.catnav__tipo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catnav__tipo-chevron {
    font-size: 9px;
    opacity: .7;
    transition: transform var(--dur) var(--ease-out);
}

.catnav__tipo-btn[aria-expanded="true"] .catnav__tipo-chevron {
    transform: rotate(180deg);
}

/* En el móvil, un enlace más de la franja (con su ícono y la misma línea
   naranja al estar activo), sin píldora ni fondo. */
.catnav__link--tipo {
    gap: 8px;
    padding-top: 7px;
    padding-bottom: 7px;
}

/* Menú de un tipo: cabecera con su ícono, acceso principal a sus productos,
   ofertas y establecimientos, y sus categorías de producto más surtidas
   (las carga home.js al abrirlo por primera vez). */
.tipo-menu {
    width: 340px;
    padding: 14px;
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-float);
    background: var(--color-surface);
    color: var(--color-text);
}

.tipo-menu.show {
    animation: tipo-menu-entrada var(--dur) var(--ease-out);
}

@keyframes tipo-menu-entrada {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.tipo-menu__cabeza {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 12px;
}

.tipo-menu__icono {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    overflow: hidden;
    flex-shrink: 0;
}

.tipo-menu__icono img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tipo-menu__nombre {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
}

.tipo-menu__sub {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.tipo-menu__accion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    border: 1px solid var(--color-border);
    transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}

.tipo-menu__accion:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.tipo-menu__accion > i:first-child {
    width: 18px;
    text-align: center;
    color: var(--color-primary);
}

.tipo-menu__accion span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.tipo-menu__accion strong {
    font-size: 14px;
}

.tipo-menu__accion small {
    font-size: 12px;
    color: var(--color-text-muted);
}

.tipo-menu__accion--principal {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.tipo-menu__accion--principal > i:first-child,
.tipo-menu__accion--principal small {
    color: rgba(255, 255, 255, .85);
}

.tipo-menu__accion--principal:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

.tipo-menu__flecha {
    margin-left: auto;
    transition: transform var(--dur-fast);
}

.tipo-menu__accion--principal:hover .tipo-menu__flecha {
    transform: translateX(3px);
}

/* Tipo sin establecimientos todavía: aviso en lugar de los accesos. */
.tipo-menu__vacio {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-accent-soft);
    color: #7a4a0c;
    font-size: 13px;
    line-height: 1.5;
}

.tipo-menu__acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.tipo-menu__categorias {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.tipo-menu__titulo {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

.tipo-menu__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tipo-menu__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.tipo-menu__chip:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.tipo-menu__chip small {
    color: var(--color-text-soft);
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .topbar__row {
        flex-wrap: wrap;
    }

    .topbar__search {
        order: 3;
        flex: 1 1 100%;
    }

    .topbar__zone-text,
    .topbar__zone-chevron {
        display: none;
    }
}

/* Cualquier sección con ancla (home, ficha de negocio) debe despejar el
   header sticky de dos filas al saltar con un enlace #ancla. */
main section[id] {
    scroll-margin-top: 112px;
}

/* ==========================================================================
   Encabezado de página interior (listados, cuenta, etc.)
   ========================================================================== */

.page-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.page-header .breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.page-header .breadcrumb a:hover {
    color: var(--color-primary-dark);
}

.page-header .breadcrumb-item.active {
    color: var(--color-text-soft);
}

.page-header .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-text-soft);
}

.pagination .page-link {
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.pagination .page-link:hover {
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}

.pagination .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: var(--color-text-soft);
}

/* ==========================================================================
   Tarjeta de negocio — usada en inicio (destacados), negocios/index.php
   (listado) y cesta/index.php (selector de cestas abiertas por negocio)
   ========================================================================== */

/* Tarjetas "clicables" (negocio, producto, categoría): el marcado lleva
   .shadow-sm de Bootstrap, que aplica su sombra con !important — sin
   igualar ese !important aquí, la sombra de hover nunca llegaba a verse. */
.business-card.shadow-sm,
.product-card.shadow-sm,
.category-card.shadow-sm {
    box-shadow: var(--shadow-card) !important;
}

.business-card.shadow-sm:hover,
.product-card.shadow-sm:hover,
.category-card.shadow-sm:hover {
    box-shadow: var(--shadow-hover) !important;
}

.business-card {
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.business-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.business-card .card-body {
    padding: 18px 20px 20px;
}

.business-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    transition: color var(--dur-fast) ease;
}

.business-card:hover h3 {
    color: var(--color-primary-dark);
}

.business-card__cover img {
    transition: transform var(--dur-slow) var(--ease-out);
}

.business-card:hover .business-card__cover img {
    transform: scale(1.05);
}

.business-card__cover {
    height: 144px;
    background: var(--color-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--color-primary-dark);
    position: relative;
    overflow: hidden;
}

.business-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.business-card__time {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-xs);
    font: 600 12px/1 var(--font-body);
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
}

.business-card__tag {
    font: 600 12px/1 var(--font-body);
    color: var(--color-primary-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.business-card__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--color-text-soft);
}

.business-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.business-card__meta .rating {
    color: var(--color-accent);
    font-weight: 600;
}

/* ==========================================================================
   Zonas de cobertura — usada en inicio (vista previa) y en zonas/index.php
   (row-cols-* de Bootstrap para la rejilla)
   ========================================================================== */

.coverage {
    background: var(--color-surface);
}

.coverage-card {
    --bs-card-border-color: var(--color-border);
    border-radius: var(--radius);
}

.coverage-card .card-body {
    padding: 24px;
}

.coverage-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.coverage-card__head span {
    font: 600 11.5px/1 var(--font-body);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    padding: 5px 9px;
    border-radius: 999px;
}

.coverage-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.coverage-card li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--color-text-muted);
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--color-border);
}

.coverage-card li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.coverage-card li b {
    color: var(--color-text);
    font-weight: 600;
}

/* ==========================================================================
   Tarjeta de producto — usada en inicio (destacados/más vendidos),
   productos/index.php (listado) y negocios/detalle.php (catálogo del
   negocio)
   ========================================================================== */

.product-card {
    border-radius: var(--radius);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* La tarjeta entera es un <a>, pero el levantamiento + sombra de arriba no
   deja claro que el texto en sí es parte de un enlace — el título cambia de
   color al pasar el cursor, como cualquier enlace del sitio. */
.product-card h3 {
    transition: color var(--dur-fast) ease;
}

.product-card:hover h3 {
    color: var(--color-primary-dark);
}

/* Foto de producto al estilo marketplace: proporción fija, la foto entera
   (contain, no recortada) sobre un gris neutro. multiply funde el fondo
   blanco típico de las fotos de producto con ese gris, así no se ve un
   "recuadro blanco" dentro del recuadro gris. */
.product-card__icon {
    aspect-ratio: 4 / 3;
    margin: 8px 8px 0;
    padding: 14px;
    background: var(--color-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--color-primary);
    border-radius: calc(var(--radius) - 6px);
    overflow: hidden;
}

.product-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform var(--dur-slow) var(--ease-out);
}

.product-card__icon > i {
    transition: transform var(--dur-slow) var(--ease-out);
}

.product-card:hover .product-card__icon img,
.product-card:hover .product-card__icon > i {
    transform: scale(1.06);
}

.product-card__body {
    padding: 14px 16px 16px;
}

.product-card__category {
    font: 600 11px/1 var(--font-body);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-soft);
}

.product-card h3 {
    font: 700 15px/1.35 var(--font-display);
    margin: 6px 0 2px;
    /* Nombres largos: máximo dos líneas, así todas las tarjetas de una fila
       alinean precio y botón a la misma altura. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__unit {
    font-size: 12.5px;
    color: var(--color-text-soft);
    margin: 0 0 12px;
}

.product-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.product-card__price {
    font: 800 19px/1 var(--font-display);
    letter-spacing: -.02em;
    color: var(--color-text);
}

.product-card__price-old {
    font-size: 12.5px;
    color: var(--color-text-soft);
    text-decoration: line-through;
    display: block;
    font-weight: 500;
    margin-bottom: 3px;
}

/* Precio rebajado en el color de la oferta: el ojo lo asocia con la
   insignia de descuento de la esquina. */
.product-card__price-old + .product-card__price {
    color: #C0392B;
}

.product-card__add {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(31, 122, 77, .28);
    transition: background-color var(--dur-fast) ease, transform var(--dur) var(--ease-spring), box-shadow var(--dur) ease;
}

.product-card__add:hover {
    background: var(--color-primary-dark);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(31, 122, 77, .36);
}

.product-card__add:hover i.fa-plus {
    transform: rotate(90deg);
}

.product-card__add i {
    transition: transform var(--dur) var(--ease-out);
}

.product-card__add:active {
    transform: scale(.92);
}

/* Confirmación de "agregado" (el bloque del botón "+" de cada página pone .is-added unos
   instantes): el botón pasa a check con un pequeño rebote. */
@keyframes acajera-add-pop {
    0% {
        transform: scale(.6);
    }

    60% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1);
    }
}

.product-card__add.is-added,
.product-card__add.is-added:hover {
    background: var(--color-primary-light);
    animation: acajera-add-pop .45s var(--ease-spring);
}

/* Corazón de Favoritos en la esquina de la tarjeta (bloque "Corazón de las
   tarjetas" de inicio.js, productos.js y establecimiento-detalle.js). */
.product-card__fav {
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--color-surface, #fff);
    color: var(--color-critical, #d03b3b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transition: transform var(--dur) var(--ease-spring);
}

.product-card__fav:hover {
    transform: scale(1.1);
}

.product-card__fav[aria-pressed="true"] {
    animation: acajera-add-pop .45s var(--ease-spring);
}

.product-card__fav:disabled {
    opacity: .6;
}

.product-card__discount {
    z-index: 1;
    font: 800 11.5px/1 var(--font-body);
    color: #fff;
    background: #D6453A;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 10px rgba(214, 69, 58, .25);
}

/* Insignia de "más vendidos": tono distinto al de descuento, para no
   confundir "está de oferta" con "se vende mucho". */
.product-card__badge-ventas {
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 700 11px/1 var(--font-body);
    color: #fff;
    background: var(--color-primary-dark);
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 10px rgba(23, 92, 58, .25);
}

.product-card__from {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-soft);
    margin-bottom: 1px;
}

/* Insignia del negocio que la vende — en su propia fila, separada del
   precio por un borde, para que un nombre real de negocio (a veces largo)
   tenga sitio y no se trunque apretado junto al precio como antes. */
.product-card__seller {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
    font-size: 11.5px;
    color: var(--color-text-soft);
}

.product-card__seller i {
    color: var(--color-primary);
    flex-shrink: 0;
    font-size: 11px;
}

.product-card__seller span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card__go {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   Fila de línea de pedido — usada en el mockup de inicio y en el detalle
   de "Mis pedidos" (pages/cuenta/pedido-detalle.php)
   ========================================================================== */

.order-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-border);
}

.order-line:last-of-type {
    border-bottom: none;
}

.order-line__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--color-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.order-line__info {
    flex: 1;
}

.order-line__info strong {
    display: block;
    font-size: 14px;
}

.order-line__info span {
    font-size: 12.5px;
    color: var(--color-text-soft);
}

.order-line__price {
    font: 600 14px/1 var(--font-body);
}

/* ==========================================================================
   Fila de "vendido por" / especificaciones — usada en negocios/detalle.php
   (catálogo) y productos/detalle.php ("Disponible en")
   ========================================================================== */

.seller-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border);
}

.seller-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.seller-row:first-child {
    padding-top: 0;
}

/* Vendedor buy-box (negocio_ofertas_producto.es_buy_box): el que Acajera
   destaca como referencia entre varios que venden la misma variante. */
.seller-row--buybox {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    border-radius: var(--radius-sm, 10px);
    padding-left: 12px;
    padding-right: 12px;
    margin-left: -12px;
    margin-right: -12px;
}

.seller-row__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--color-bg);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.seller-row__info {
    flex: 1 1 170px;
    min-width: 0;
}

.seller-row__info strong {
    display: block;
    font-size: 14.5px;
}

.seller-row__info span {
    font-size: 12.5px;
    color: var(--color-text-soft);
}

.seller-row__aside {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    margin-left: auto;
}

.seller-row__price {
    font: 700 17px/1 var(--font-display);
    color: var(--color-text);
    text-align: right;
}

.seller-row__price-old {
    display: block;
    font-size: 12px;
    color: var(--color-text-soft);
    text-decoration: line-through;
    font-weight: 500;
    margin-bottom: 2px;
}

.spec-table {
    --bs-table-striped-bg: var(--color-bg);
    font-size: 13.5px;
}

.spec-table th,
.spec-table td {
    padding: 11px 14px;
    vertical-align: middle;
    border: none;
}

.spec-table th {
    width: 46%;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.spec-table td {
    color: var(--color-text);
}

/* ==========================================================================
   Resumen de totales — usado en cesta/index.php, cesta/confirmacion.php,
   cesta/compartida.php y pages/cuenta/pedido-detalle.php
   ========================================================================== */

.summary-card {
    border-radius: var(--radius);
    position: sticky;
    top: 100px;
}

.summary-card .card-body {
    padding: 24px;
}

.summary-card h2 {
    font: 700 18px/1.3 var(--font-display);
    margin: 0 0 18px;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--color-text-muted);
    padding: 8px 0;
}

.summary-row.total {
    border-top: 1px solid var(--color-border);
    margin-top: 6px;
    padding-top: 14px;
    font: 700 17px/1 var(--font-display);
    color: var(--color-text);
}

/* ==========================================================================
   Confirmación — usado en cesta/confirmacion.php y cuenta/bienvenida.php
   ========================================================================== */

.confirm-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    margin: 0 auto 24px;
}

.qr-box {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 28px 36px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: var(--color-surface);
}

.qr-box i {
    font-size: 84px;
    color: var(--color-text);
}

.order-code {
    font: 700 20px/1 var(--font-display);
    letter-spacing: .08em;
    color: var(--color-text);
}

.confirm-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.confirm-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.confirm-steps i {
    color: var(--color-primary);
    margin-top: 2px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: #101610;
    color: rgba(255, 255, 255, .7);
    padding: 72px 0 28px;
    margin-top: 40px;
}

.footer-grid-row {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer-brand .brand__marca {
    width: 50px;
    height: 50px;
    border-radius: 14px;
}

.footer-brand .brand__marca .brand__logo {
    width: 38px;
}

.footer-brand .brand__name {
    font-size: 26px;
}

.footer-brand p {
    font-size: 14px;
    line-height: 1.7;
    max-width: 320px;
    margin: 16px 0 20px;
}

/* Datos de contacto de la marca (servicio de ajustes) */
.footer-contacto {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0 0 20px;
    font-size: 14px;
}

.footer-contacto li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.footer-contacto i {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    color: var(--color-primary);
}

.footer-contacto a {
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.footer-contacto a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    transition: background-color var(--dur-fast) ease, transform var(--dur) var(--ease-spring);
}

.footer-social a:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
}

.footer-col h4 {
    color: #fff;
    font: 600 14px/1 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 20px;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer-col a {
    text-decoration: none;
    font-size: 14px;
    color: rgba(255, 255, 255, .68);
    transition: color .15s ease;
}

.footer-col a:hover {
    color: #fff;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    text-align: center;
    padding-top: 28px;
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
}

.footer-bottom a {
    text-decoration: none;
    color: rgba(255, 255, 255, .5);
}

.footer-bottom a:hover {
    color: #fff;
}

/* "Instalar la app" (assets/js/pwa.js lo muestra si el navegador lo permite). */
.footer-staff-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .15s, border-color .15s;
}

.footer-staff-link:hover,
.footer-staff-link:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.footer-staff-link[hidden] {
    display: none;
}

/* ==========================================================================
   Botón flotante "volver arriba" (include/back-to-top.php)
   ========================================================================== */

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 40;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 10px 24px rgba(31, 122, 77, .3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background-color .15s ease;
}

.back-to-top:hover {
    background: var(--color-primary-dark);
    color: #fff;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Avisos propios (bloque "Avisos flotantes" de cada js de página) en vez del alert() nativo
   del navegador, que muestra el diálogo genérico "localhost dice..." fuera
   de lugar con el resto de la interfaz. */
#acajera-toasts {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}

.acajera-toast {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(19, 28, 23, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 11px 20px 11px 12px;
    border-radius: var(--radius-pill);
    font: 600 13.5px/1.3 var(--font-body);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    text-align: left;
    opacity: 0;
    transform: translateY(16px) scale(.96);
    transition: opacity var(--dur) ease, transform .35s var(--ease-spring);
}

.acajera-toast.is-visible {
    opacity: 1;
    transform: none;
}

.acajera-toast__icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    background: var(--color-primary-light);
    color: #fff;
}

.acajera-toast--error .acajera-toast__icon {
    background: var(--color-danger);
}

/* ==========================================================================
   Skeletons de carga — siluetas grises con brillo en movimiento mientras
   llega el contenido por AJAX (portada), en vez de un spinner con texto:
   la página conserva su forma y el contenido "aparece" sin saltos.
   ========================================================================== */

@keyframes acajera-shimmer {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -50% 0;
    }
}

.skeleton {
    display: block;
    border-radius: var(--radius-xs);
    background: linear-gradient(90deg, #ECEFEC 0%, #ECEFEC 35%, #F7F8F7 50%, #ECEFEC 65%, #ECEFEC 100%);
    background-size: 250% 100%;
    animation: acajera-shimmer 1.4s linear infinite;
}

.skeleton-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    height: 100%;
    overflow: hidden;
}

.skeleton-card__media {
    aspect-ratio: 4 / 3;
    margin: 8px 8px 0;
    border-radius: calc(var(--radius) - 6px);
}

.skeleton-card__media--cover {
    aspect-ratio: auto;
    height: 144px;
    margin: 0;
    border-radius: 0;
}

.skeleton-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-line {
    height: 12px;
}

.skeleton-line--sm {
    height: 9px;
    width: 40%;
}

.skeleton-line--lg {
    height: 18px;
    width: 55%;
}

.skeleton-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    margin-bottom: 6px;
}

/* ==========================================================================
   Aparición al hacer scroll (assets/js/home.js). Solo se oculta si el JS
   marcó <html class="js-reveal">: sin JS, todo se ve normal.
   ========================================================================== */

.js-reveal .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
}

.js-reveal .reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* Rejillas que se pintan por AJAX (.stagger-in, la pone inicio.js): cada
   tarjeta entra con un pequeño retraso respecto a la anterior (efecto
   cascada). Con JS, la cascada espera a que la rejilla ([data-stagger])
   entre en pantalla — home.js le pone .is-revealed — para no gastarse
   fuera de la vista. */
@keyframes acajera-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.stagger-in > *,
.js-reveal .stagger-in[data-stagger].is-revealed > * {
    animation: acajera-fade-up .5s var(--ease-out) both;
}

.js-reveal .stagger-in[data-stagger]:not(.is-revealed) > * {
    animation: none;
    opacity: 0;
}

.stagger-in > *:nth-child(2) { animation-delay: .05s; }
.stagger-in > *:nth-child(3) { animation-delay: .1s; }
.stagger-in > *:nth-child(4) { animation-delay: .15s; }
.stagger-in > *:nth-child(5) { animation-delay: .2s; }
.stagger-in > *:nth-child(6) { animation-delay: .25s; }
.stagger-in > *:nth-child(7) { animation-delay: .3s; }
.stagger-in > *:nth-child(n+8) { animation-delay: .35s; }

.skeleton-chip {
    display: inline-block;
    width: 130px;
    height: 40px;
    border-radius: var(--radius-pill);
}

/* ==========================================================================
   Cabecera de sección con acciones (título a la izquierda; "ver todo" y
   flechas del carrusel a la derecha) — portada y futuros listados.
   ========================================================================== */

.shelf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.shelf-head__text {
    max-width: 640px;
}

.shelf-head h2 {
    font: 800 clamp(24px, 3.2vw, 32px)/1.15 var(--font-display);
    letter-spacing: -.025em;
    margin: 12px 0 0;
}

.shelf-head p {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.shelf-head__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.shelf-head__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 6px;
    font: 600 14px/1 var(--font-body);
    color: var(--color-primary-dark);
    text-decoration: none;
}

.shelf-head__link i {
    font-size: 12px;
    transition: transform var(--dur) var(--ease-out);
}

.shelf-head__link:hover {
    color: var(--color-primary);
}

.shelf-head__link:hover i {
    transform: translateX(4px);
}

.eyebrow--sale {
    color: #B8322A;
    background: #FDE8E6;
}

/* ==========================================================================
   Carrusel horizontal ([data-rail] + [data-rail-track], assets/js/home.js):
   rejilla de una sola fila con desplazamiento por pasos (scroll-snap). En
   móvil se desliza con el dedo y asoma la siguiente tarjeta; en escritorio,
   flechas. --rail-cols admite decimales para ese "asomar".
   ========================================================================== */

.rail__track {
    --rail-cols: 2.15;
    --rail-gap: 12px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--rail-gap) * (var(--rail-cols) - 1)) / var(--rail-cols));
    gap: var(--rail-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Aire para que la sombra y el levantamiento del hover no se corten
       (overflow-x:auto también recorta en vertical), compensado con
       margen negativo para no mover el resto del diseño. */
    padding: 8px 6px 28px;
    margin: -8px -6px -28px;
    scroll-padding-inline: 6px;
}

.rail__track::-webkit-scrollbar {
    display: none;
}

.rail__item {
    scroll-snap-align: start;
    min-width: 0;
}

@media (min-width: 576px) {
    .rail__track {
        --rail-cols: 3.15;
        --rail-gap: 16px;
    }
}

@media (min-width: 992px) {
    .rail__track {
        --rail-cols: 4;
    }
}

@media (min-width: 1200px) {
    .rail__track {
        --rail-cols: 5;
    }
}

.rail-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: var(--shadow-xs);
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease,
        opacity var(--dur) ease, transform var(--dur) var(--ease-spring);
}

.rail-btn:hover:not(:disabled) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: scale(1.06);
}

.rail-btn:disabled {
    opacity: .35;
    cursor: default;
}

/* Sin nada que desplazar (pocas tarjetas o estado vacío) o en pantallas
   táctiles pequeñas, las flechas sobran. */
[data-rail].is-static .rail-btn {
    display: none;
}

@media (max-width: 767.98px) {
    .rail-btn {
        display: none;
    }
}

/* Última tarjeta de un carrusel: "ver todas", mismo alto que las demás. */
.rail-more {
    height: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    border-radius: var(--radius);
    border: 2px dashed var(--color-border);
    color: var(--color-text);
    font: 700 15px/1.3 var(--font-display);
    text-decoration: none;
    transition: border-color var(--dur) ease, background-color var(--dur) ease, color var(--dur) ease;
}

.rail-more__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    transition: transform var(--dur) var(--ease-spring), background-color var(--dur) ease, color var(--dur) ease;
}

.rail-more:hover {
    border-color: var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary-dark);
}

.rail-more:hover .rail-more__icon {
    background: var(--color-primary);
    color: #fff;
    transform: translateX(4px);
}

.skeleton-tile {
    flex: 1 0 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 6px;
}

.skeleton-tile__media {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

.skeleton-row__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
}

.skeleton-row__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* "FCFA" junto a un precio: más pequeño que la cifra (xafHtml en los js de página). */
.moneda {
    font-size: .62em;
    font-weight: 700;
    letter-spacing: .02em;
    margin-left: 1px;
    color: inherit;
    opacity: .75;
}

/* Contenido ya pintado que se está recargando por AJAX (cambio de filtro,
   de página o de presentación): se atenúa en vez de desaparecer. */
.is-cargando {
    opacity: .45;
    pointer-events: none;
    transition: opacity var(--dur) ease;
}

/* Aviso de contraseña temporal (include/header.php): mismo sitio que la
   barra de anuncios, en ámbar para que se distinga de una novedad. */
.announce-bar--aviso {
    background: var(--color-accent-soft);
    color: #7A4B0E;
}

.announce-bar--aviso a {
    color: #7A4B0E;
}

/* Nota informativa (envío no incluido, etc.) en las fichas de producto y de
   establecimiento: icono + texto sobre fondo suave, en vez de una línea gris
   suelta. */
.nota-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.5;
}

.nota-info > i {
    color: var(--color-primary);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.nota-info p {
    margin: 0;
}

/* ==========================================================================
   Tarjetas de producto en el móvil (menos de 576 px). En PC no cambia nada.
   - Carruseles: 1,5 tarjetas a la vista (~230 px cada una) en vez de 2,15.
   - Rejillas de 2 columnas (Productos, catálogo de un establecimiento):
     menos separación entre tarjetas y menos relleno dentro, foto más alta,
     subcategoría en una línea y precio + FCFA siempre juntos.
   ========================================================================== */
@media (max-width: 575.98px) {
    .rail__track {
        --rail-cols: 1.5;
    }

    .row:has(> .col > .product-card) {
        --bs-gutter-x: .625rem;
        --bs-gutter-y: .625rem;
    }

    .product-card__icon {
        aspect-ratio: 1 / 1;
        margin: 6px 6px 0;
        padding: 10px;
    }

    .product-card__body {
        padding: 10px 10px 12px;
    }

    .product-card__category {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 10.5px;
    }

    .product-card h3 {
        font-size: 14px;
    }

    .product-card__unit {
        font-size: 12px;
        margin-bottom: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-card__footer {
        gap: 6px;
    }

    .product-card__footer > div {
        min-width: 0;
    }

    .product-card__price {
        font-size: 17px;
        white-space: nowrap;
    }

    .product-card__price-old {
        font-size: 11.5px;
    }

    .product-card__add {
        width: 36px;
        height: 36px;
    }

    .product-card__seller {
        font-size: 11px;
        margin-top: 8px;
        padding-top: 8px;
    }

    .product-card__discount,
    .product-card__badge-ventas {
        margin: 10px !important;
        font-size: 10.5px;
        padding: 5px 8px;
    }
}

/* ==========================================================================
   Producto sin foto: en vez de una caja verde con un icono grande, un
   marcador discreto (trama suave, icono en un círculo y "Foto próximamente").
   Solo cambia cuando no hay <img> (el JS pone un <i> en su lugar).
   ========================================================================== */
.product-card__icon:has(> i) {
    position: relative;
    flex-direction: column;
    gap: 8px;
    background:
        radial-gradient(circle at 1px 1px, rgba(31, 122, 77, .10) 1px, transparent 0) 0 0 / 14px 14px,
        linear-gradient(160deg, var(--color-surface-2) 0%, #EAF2ED 100%);
}

.product-card__icon > i {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 22px;
    box-shadow: 0 4px 14px rgba(23, 92, 58, .12);
    transition: transform var(--dur) var(--ease-spring);
}

.product-card__icon:has(> i)::after {
    content: "Foto próximamente";
    font: 500 11.5px/1 var(--font-body);
    letter-spacing: .02em;
    color: var(--color-text-soft);
}

.product-card:hover .product-card__icon > i {
    transform: scale(1.06);
}

/* ==========================================================================
   Pie siempre al fondo: en páginas cortas (Zonas, cesta vacía...) ya no
   queda una franja gris por debajo en pantallas altas.
   ========================================================================== */
body:not(.auth-body) {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body:not(.auth-body) > main {
    flex: 1 0 auto;
}

/* ==========================================================================
   Tarjeta de establecimiento (portada y directorio): avatar con iniciales o
   logo, tipo, nombre, zona, tiempo de entrega y "Ver catálogo".
   ========================================================================== */
.biz-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

.biz-card__cabeza {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.biz-card__avatar {
    --tono: 150;
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: hsl(var(--tono) 42% 92%);
    color: hsl(var(--tono) 45% 27%);
    font: 800 19px/1 var(--font-display);
    letter-spacing: .02em;
}

.biz-card__avatar--imagen {
    background: #fff;
    border: 1px solid var(--color-border);
}

.biz-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.biz-card__tipo {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 10.5px;
    border: 2px solid var(--color-surface);
}

.biz-card__titulos {
    min-width: 0;
}

.biz-card__nombre {
    margin: 6px 0 0;
    font: 700 16.5px/1.25 var(--font-display);
    overflow-wrap: anywhere;
}

.biz-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.biz-card__meta i {
    color: var(--color-primary);
    margin-right: 4px;
}

.biz-card__ver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    font: 600 13.5px/1 var(--font-body);
    color: var(--color-primary-dark);
}

.biz-card__ver i {
    font-size: 11px;
    transition: transform var(--dur) var(--ease-out);
}

.biz-card:hover .biz-card__ver i {
    transform: translateX(4px);
}

.skeleton-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

/* Contador de caracteres bajo los textarea con data-contador (lo pone el JS). */
.contador-caracteres {
    margin-top: 4px;
    text-align: right;
    font-size: 12px;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}

.contador-caracteres.is-cerca {
    color: #B86E12;
    font-weight: 600;
}

/* Bienvenida "¿Dónde te lo llevamos?" (include/header.php): primera visita sin zona. */
.zona-bienvenida .modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(16, 24, 20, .25);
}

.zona-bienvenida__cabeza {
    position: relative;
    padding: 28px 28px 18px;
    text-align: center;
    background:
        radial-gradient(520px 220px at 50% -40%, rgba(31, 122, 77, .22), transparent 70%),
        var(--color-primary-soft);
}

.zona-bienvenida__cabeza .btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.zona-bienvenida__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    border-radius: 18px;
    background: var(--color-primary);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 10px 24px rgba(31, 122, 77, .3);
}

.zona-bienvenida__titulo {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(22px, 4vw, 28px);
}

.zona-bienvenida__texto {
    max-width: 460px;
    margin: 0 auto 16px;
    color: var(--color-text-muted);
    font-size: 14.5px;
}

.zona-bienvenida__buscar {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
}

.zona-bienvenida__buscar i {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--color-text-muted);
}

.zona-bienvenida__buscar input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 15px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.zona-bienvenida__buscar input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(31, 122, 77, .15);
}

.zona-bienvenida__cuerpo {
    padding: 20px 28px 8px;
}

.zona-bienvenida__region + .zona-bienvenida__region {
    margin-top: 18px;
}

.zona-bienvenida__region h3 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.zona-bienvenida__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.zona-opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    text-align: left;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.zona-opcion:hover,
.zona-opcion:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px rgba(31, 122, 77, .14);
    transform: translateY(-1px);
    outline: none;
}

.zona-opcion[hidden],
.zona-bienvenida__region[hidden] {
    display: none;
}

.zona-opcion__cp {
    flex: 0 0 auto;
    padding: 6px 8px;
    border-radius: 10px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 13px;
}

.zona-opcion__texto {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.zona-opcion__texto strong {
    display: block;
    font-size: 15px;
}

.zona-opcion__texto small {
    display: block;
    color: var(--color-text-muted);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zona-opcion__tiendas {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-primary);
}

.zona-opcion__tiendas.is-vacia {
    max-width: 90px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: right;
    line-height: 1.2;
}

.zona-bienvenida__nada {
    margin: 8px 0 0;
    text-align: center;
    color: var(--color-text-muted);
}

.zona-bienvenida__pie {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 20px 16px;
}

.zona-bienvenida__pie .btn-link {
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 575px) {
    .zona-bienvenida__cabeza {
        padding: 24px 18px 16px;
    }

    .zona-bienvenida__cuerpo {
        padding: 16px 18px 4px;
    }
}

/* "Mostrando lo de tu zona · Ver también otras zonas" (listados del catálogo). */
.zona-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 12px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    font-size: 14px;
}

.zona-filtro a {
    font-weight: 600;
}

.zona-filtro__opciones {
    white-space: nowrap;
}

.zona-filtro__actual {
    color: var(--color-primary-dark);
}

/* Posicionamiento pagado (marketplace: patrocinios): siempre visible, para que
   el cliente sepa que ese establecimiento sale primero porque paga. */
.etiqueta-patrocinado {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    vertical-align: middle;
}