/*
 * Base de todos los temas (ver tenants/theme.py -> TEMAS). Se carga después de
 * base.css y antes de la hoja del tema. Acá solo va lo que necesitan las piezas
 * de templates/themes/comun/; el aspecto de cada tienda va en <tema>.css.
 */

/* Sin esto el <body> hace de contenedor de scroll y lo "sticky" no se pega. */
html,
body {
    overflow-x: clip;
}

/* Cerrado, su sombra se asomaría por el borde derecho sobre los fondos claros. */
.cart-drawer:not(.is-open) {
    box-shadow: none;
}

/* Lo que base.css y checkout.css solo aplican en @media (dark): estos temas son
   oscuros aunque el dispositivo esté en claro. Mantener igual que allá. */
body.solo-oscuro .checkout-page {
    --ck-sage: #1f2a14;
    --ck-green-dark: #2c2d32;
    --ck-text: #f1f1ee;
    --ck-text-muted: #a4a4a0;
    --ck-border: #2c2d32;
}

body.solo-oscuro .stock-badge--disponible { --stock-fondo: #173d24; --stock-letra: #8fe0a8; }
body.solo-oscuro .stock-badge--pocos { --stock-fondo: #4a3110; --stock-letra: #ffc46b; }
body.solo-oscuro .stock-badge--ultimo { --stock-fondo: #c4372d; --stock-letra: #ffffff; }
body.solo-oscuro .stock-badge--agotado { --stock-fondo: #6b4128; --stock-letra: #f6e6da; }

body.solo-oscuro .button.product-detail__whatsapp {
    border-color: #1faa53;
    color: #5fe08e;
}

body.solo-oscuro .button.product-detail__whatsapp:hover {
    background: #0b6b45;
    border-color: #0b6b45;
    color: #ffffff;
}

body.solo-oscuro .whatsapp-flotante {
    background: #0b6b45;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

body.solo-oscuro .confirmation__subtitle--pendiente {
    border-color: #6b5410;
    background: #2b2410;
    color: #f5d67a;
}

/* -- encabezado: las piezas se ubican por área en cada tema -- */

.tema-encabezado {
    display: grid;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "menu marca carrito"
        "buscar buscar buscar";
}

.tema-encabezado__menu { grid-area: menu; display: inline-flex; align-items: center; gap: 8px; font: inherit; }
.tema-encabezado__marca { grid-area: marca; }
.tema-encabezado__buscar { grid-area: buscar; min-width: 0; }
.tema-encabezado__carrito { grid-area: carrito; justify-self: end; }

.tema-encabezado__categorias {
    grid-area: categorias;
    display: flex;
    gap: var(--space-lg);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tema-encabezado__categorias::-webkit-scrollbar {
    display: none;
}

.tema-encabezado__categorias a {
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
}

.tema-encabezado__categorias a:hover {
    color: var(--color-lime);
}

.tema-encabezado .site-header__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: inherit;
}

.tema-encabezado .store-search {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* -- portada -- */

/* La portada se reordena con `order` en cada tema; solo en la portada. */
.site-main:has(.portada-hero) {
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

.site-main:has(.portada-hero) > * {
    min-width: 0;
}

.portada-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: var(--space-xl);
}

.portada-hero__texto {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.portada-hero__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.portada-hero__titulo {
    margin: 0;
    font-family: var(--font-heading, var(--font-family));
    line-height: 1.02;
    overflow-wrap: break-word;
}

.portada-hero__titulo em {
    display: block;
}

.portada-hero__cta {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    background: var(--color-lime);
    color: var(--color-lime-ink);
    border-radius: var(--radius-button, var(--radius-pill));
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.portada-hero__cta:hover {
    filter: brightness(0.95);
    transform: translateY(-2px);
}

.portada-hero__foto {
    margin: 0;
    overflow: hidden;
}

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

/* El carrusel se pega al hero del tema clásico; acá cada tema pone su aire. */
.site-main:has(.portada-hero) .featured {
    margin-top: 0;
}

/* En celular base.css sube el texto sobre la foto porque esta se desvanece; en
   los temas la foto es firme y lo taparía. */
@media (max-width: 720px) {
    .site-main:has(.portada-hero) .featured-banner__media {
        width: 100%;
    }
    .site-main:has(.portada-hero) .featured-banner__info {
        width: 100%;
        margin-top: 0;
        padding-top: var(--space-md);
    }
}

/* Título de categoría: nunca más ancho que su banner (--largo = letras de su
   palabra más larga), así los mosaicos angostos no parten las palabras. */
.site-main:has(.portada-hero) .cat-banner {
    container-type: inline-size;
}

.site-main:has(.portada-hero) .cat-banner__titulo {
    font-size: min(var(--tema-cat-titulo, 40px), calc((100cqw - 56px) / (var(--largo, 8) * var(--tema-cat-letra, 0.62))));
    overflow-wrap: normal;
}

/* Sobre la foto del banner, sin color de títulos elegido: blanco (el acento de
   algunos temas es oscuro y no se leería). */
.category-showcase__title a {
    color: var(--color-title, #fff);
}

/* -- pie -- */

.tema-pie {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: minmax(180px, 1.2fr) 2fr 1fr;
    padding: 56px max(var(--space-xl), calc((100vw - var(--container-max)) / 2 + var(--space-xl))) var(--space-xl);
    text-align: left;
    color: var(--color-text);
}

.tema-pie__marca {
    font-family: var(--font-heading, var(--font-family));
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.tema-pie__enlaces {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px 32px;
    max-height: 170px;
}

.tema-pie__enlaces a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.tema-pie__enlaces a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.tema-pie__legal {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 12px;
}

@media (max-width: 700px) {
    .tema-pie {
        grid-template-columns: 1fr;
        padding: var(--space-xl) var(--space-md);
    }
    .tema-pie__enlaces {
        max-height: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .portada-hero__texto > * {
        animation: tema-entrada 0.7s ease both;
    }
    .portada-hero__titulo { animation-delay: 0.08s; }
    .portada-hero__cta { animation-delay: 0.16s; }
}

@keyframes tema-entrada {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* -- Variantes elegidas por el dueño: con `body.` le ganan a la hoja del diseño,
   que define su aspecto recomendado (ver theme.ESTILO_DE_TEMA). -- */

body.tarjetas-borde .card,
body.tarjetas-sombra .card,
body.tarjetas-plana .card {
    padding: var(--space-sm);
    background: var(--color-surface);
}

body.tarjetas-borde .card__body,
body.tarjetas-sombra .card__body,
body.tarjetas-plana .card__body,
body.tarjetas-dura .card__body,
body.tarjetas-doble .card__body,
body.tarjetas-vidrio .card__body {
    padding: var(--space-sm) var(--space-xs) var(--space-xs);
}

body.tarjetas-borde .card { border: 1px solid var(--color-border); box-shadow: none; }
body.tarjetas-sombra .card { border: 1px solid transparent; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); }
body.tarjetas-plana .card { border: 1px solid transparent; box-shadow: none; }

body.hover-levantar .card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14); }
body.hover-zoom .card:hover,
body.hover-ninguno .card:hover { transform: none; box-shadow: none; }
body.hover-zoom .card:hover .card__media .card__image { transform: scale(1.06); }
body.hover-ninguno .card:hover .card__media .card__image { transform: none; }

body.tarjetas-izquierda .card { text-align: left; }
body.tarjetas-izquierda .card__body { align-items: stretch; }
body.tarjetas-izquierda .card__acciones { justify-content: flex-start; }

body.tarjetas-centradas .card { text-align: center; }
body.tarjetas-centradas .card__body { align-items: center; }
body.tarjetas-centradas .card__acciones { display: flex; justify-content: center; }
body.tarjetas-centradas .product-tags,
body.tarjetas-centradas .card__colores { justify-content: center; }

body.encabezado-claro { --tema-encabezado-fondo: var(--color-surface); --tema-encabezado-letra: var(--color-text); }
body.encabezado-oscuro { --tema-encabezado-fondo: #111216; --tema-encabezado-letra: #f4f4f1; }
body.encabezado-marca { --tema-encabezado-fondo: var(--color-lime); --tema-encabezado-letra: var(--color-lime-ink); }

body.encabezado-claro .tema-encabezado,
body.encabezado-oscuro .tema-encabezado,
body.encabezado-marca .tema-encabezado {
    background: var(--tema-encabezado-fondo);
    color: var(--tema-encabezado-letra);
}

body.encabezado-claro .tema-encabezado__marca,
body.encabezado-oscuro .tema-encabezado__marca,
body.encabezado-marca .tema-encabezado__marca,
body.encabezado-claro .tema-encabezado__menu,
body.encabezado-oscuro .tema-encabezado__menu,
body.encabezado-marca .tema-encabezado__menu,
body.encabezado-claro .tema-encabezado__categorias,
body.encabezado-oscuro .tema-encabezado__categorias,
body.encabezado-marca .tema-encabezado__categorias {
    color: inherit;
}

/* El nombre de la tienda nunca ocupa más que una parte del encabezado: con varias
   palabras baja de renglón; con una sola larga, ajustar-titulos.js achica la letra. */
.tema-encabezado__marca {
    min-width: 0;
    max-width: min(100%, 34vw);
}

@media (max-width: 860px) {
    .tema-encabezado__marca { max-width: 100%; }
}