/* ================================================================
   ALMACEN-FIGMA — Fiel al Figma original (layout-almacen-figma)
   Fuente: estilos figma/almacen/src/app/App.tsx
   ================================================================ */

/* ── Step 1: Fuentes + paleta base ───────────────────────────────────────── */
body.layout-almacen-figma {
  --af-bg: var(--color-fondo, #F4EFE4); --af-fg: #1A2E1A; --af-card: #FDFAF3;
  --af-primary: var(--color-primario, #1B4332); --af-primary-fg: #F4EFE4;
  --af-secondary: #A8D455; --af-secondary-fg: #1A2E1A;
  --af-muted: #E6DFD0; --af-muted-fg: #6B7C6B;
  --af-accent: var(--color-acento, #D94F2B); --af-accent-fg: #FFFFFF;
  --af-border: rgba(27,67,50,0.15);
  /* La fuente elegida en Configuración → Diseño manda; lo de acá queda
     como fallback y es lo que se ve si el comercio no eligió ninguna,
     así el tema conserva su tipografía de fábrica. */
  /* La fuente elegida en Configuración → Diseño manda sobre la del tema.
     El literal queda en --tema-font-*-base: es la tipografía de fábrica y se
     usa cuando el comercio no eligió ninguna (app/tienda/js/api.js la lee de
     acá para los componentes compartidos). Ojo con reexportar --font-display
     desde la variable del tema: eso arma un ciclo, CSS anula las dos y los
     títulos caen al font-family heredado. */
  --tema-font-display-base: 'Playfair Display', Georgia, serif;
  --af-font-display: var(--font-display, var(--tema-font-display-base));
  --tema-font-body-base: 'DM Sans', system-ui, sans-serif;
  --af-font-body: var(--font-body, var(--tema-font-body-base));
  background: var(--af-bg); color: var(--af-fg); font-family: var(--af-font-body);
}
body.layout-almacen-figma h1, body.layout-almacen-figma h2, body.layout-almacen-figma h3,
body.layout-almacen-figma .product p { font-family: var(--af-font-display); }

/* ── Step 2: Barra utilidad + navbar ─────────────────────────────────────── */
body.layout-almacen-figma #banner-envio { background: var(--af-primary); color: var(--af-primary-fg); }
body.layout-almacen-figma header, body.layout-almacen-figma #category-buttons {
  background: var(--af-card); border-bottom: 1px solid var(--af-border);
}
body.layout-almacen-figma header { position: sticky; top: 0; z-index: 40; }
body.layout-almacen-figma .header-logo-text strong { font-family: var(--af-font-display); font-weight: 900; color: var(--af-primary); }
body.layout-almacen-figma .header-logo-text span { color: var(--af-muted-fg); }
body.layout-almacen-figma .nav-link-btn, body.layout-almacen-figma .quick-pill, body.layout-almacen-figma .dropdown-btn { color: var(--af-fg) !important; }
body.layout-almacen-figma #category-buttons a:hover, body.layout-almacen-figma .nav-link-btn:hover, body.layout-almacen-figma .quick-pill:hover { color: var(--af-primary) !important; }
body.layout-almacen-figma .header-search { background: var(--af-muted) !important; border-color: var(--af-border) !important; }
body.layout-almacen-figma .header-search input { color: var(--af-fg) !important; }
body.layout-almacen-figma .header-search input::placeholder { color: var(--af-muted-fg) !important; }
body.layout-almacen-figma .header-search-icon { color: var(--af-muted-fg) !important; }
body.layout-almacen-figma .header-cart-btn, body.layout-almacen-figma .header-fav-btn {
  background: var(--af-primary); color: var(--af-primary-fg); border-radius: .8rem;
}

/* ── Step 3: Hero split — nuevo markup ───────────────────────────────────── */
body.layout-almacen-figma .hero-section { display: none !important; }
body.layout-almacen-figma .hero-section--af {
  display: block; background: var(--af-primary); color: var(--af-primary-fg);
  padding: 3rem 1rem 5rem; position: relative; overflow: hidden;
}
body.layout-almacen-figma .hero-af-grid {
  max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: 1fr;
  gap: 2.5rem; align-items: center;
}
@media (min-width: 1024px) { body.layout-almacen-figma .hero-af-grid { grid-template-columns: 1fr 1fr; } }
body.layout-almacen-figma .hero-af-badge {
  display: inline-block; background: rgba(244,239,228,0.15); border-radius: 999px;
  padding: .4rem 1rem; font-size: .85rem; margin-bottom: 1rem;
}
body.layout-almacen-figma .hero-af-text h1 { font-size: clamp(2.5rem,5vw,4rem); font-weight: 900; line-height: 1.1; margin: 0 0 1rem; }
body.layout-almacen-figma .hero-af-text p { color: rgba(244,239,228,0.7); max-width: 30rem; line-height: 1.6; }
body.layout-almacen-figma .hero-af-accent { color: var(--af-secondary); }
body.layout-almacen-figma .hero-af-cta { display: flex; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }
body.layout-almacen-figma .hero-af-btn-primary {
  background: var(--af-secondary); color: var(--af-secondary-fg); border-radius: 999px;
  padding: .9rem 1.8rem; font-weight: 600; text-decoration: none;
}
body.layout-almacen-figma .hero-af-btn-secondary {
  border: 1px solid var(--af-primary-fg); color: var(--af-primary-fg); border-radius: 999px;
  padding: .9rem 1.8rem; text-decoration: none;
}
body.layout-almacen-figma .hero-af-stats { display: flex; gap: 2rem; margin-top: 1.5rem; }
body.layout-almacen-figma .hero-af-stats strong { display: block; font-family: var(--af-font-display); font-size: 1.5rem; color: var(--af-secondary); }
body.layout-almacen-figma .hero-af-stats span { font-size: .8rem; opacity: .8; }
body.layout-almacen-figma .hero-af-img-wrap { position: relative; }
body.layout-almacen-figma .hero-af-img {
  width: 100%; border-radius: 2.5rem; display: block; object-fit: cover;
  aspect-ratio: 4/3; background: var(--af-muted);
}
body.layout-almacen-figma .hero-af-float {
  position: absolute; background: var(--af-card); color: var(--af-fg); border-radius: 1rem;
  padding: .8rem 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.15); font-size: .8rem;
}
body.layout-almacen-figma .hero-af-float strong { display: block; font-family: var(--af-font-display); }
/* El emoji del badge es editable (clave almacen_figma_float1_emoji): va en su
   propio <span> para poder cambiarlo desde Textos o con doble clic en el
   editor visual. Vacío no deja hueco ni el espacio que lo separaba del
   título. */
body.layout-almacen-figma .hero-af-float-emoji { font-size: 1.05rem; line-height: 1; }
body.layout-almacen-figma .hero-af-float-emoji:empty { display: none; }
body.layout-almacen-figma .hero-af-float-1 { top: -1rem; left: -1rem; }
body.layout-almacen-figma .hero-af-float-2 { bottom: -1rem; right: -1rem; }
@media (max-width: 640px) {
  body.layout-almacen-figma .hero-af-float { display: none; }
}

/* ── Step 4: Categorías + perks strip ────────────────────────────────────── */
body.layout-almacen-figma .cat-visual-card {
  border-radius: 1rem; background: var(--af-card); border: 1px solid var(--af-border);
  text-align: center; padding: 1rem .5rem; transition: background .15s, color .15s;
}
body.layout-almacen-figma .cat-visual-card:hover { background: var(--af-primary); color: var(--af-primary-fg); }
body.layout-almacen-figma .cat-visual-count { color: var(--af-muted-fg); }
body.layout-almacen-figma .cat-visual-card:hover .cat-visual-count { color: rgba(244,239,228,0.6); }
body.layout-almacen-figma .strip-info {
  background: rgba(168,212,85,0.2); border-top: 1px solid var(--af-border);
  border-bottom: 1px solid var(--af-border); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-content: stretch;
}
body.layout-almacen-figma .strip-sep { display: none; }
body.layout-almacen-figma .strip-item { max-width: none; min-width: 0; flex: none; justify-content: center; border-right: 1px solid var(--af-border); }
body.layout-almacen-figma .strip-item:last-child { border-right: none; }

/* ── Step 5: Oferta del día ───────────────────────────────────────────────
   El bloque es de toda la tienda (css/oferta-dia.css); acá van sólo los
   ajustes de este tema. */
body.layout-almacen-figma .af-od-badge { background: var(--af-accent); }
body.layout-almacen-figma .af-od-cta { background: var(--af-secondary); color: var(--af-secondary-fg); }
body.layout-almacen-figma .af-od-img { background: var(--af-muted); }
body.layout-almacen-figma .af-od-pct { background: var(--af-accent); color: #fff; }

/* ── Step 6: Grid de productos ────────────────────────────────────────────── */
body.layout-almacen-figma .product-grid { gap: 1rem; }
body.layout-almacen-figma .product {
  border-radius: 1rem; background: var(--af-card); border: 1px solid var(--af-border);
  padding-bottom: .75rem;
}
body.layout-almacen-figma .prod-img-wrap { border-radius: 1rem 1rem 0 0; aspect-ratio: 1/1; margin-bottom: 0; }
body.layout-almacen-figma .product h3 { padding: 0 .75rem; }
body.layout-almacen-figma .product p { color: var(--af-primary) !important; font-weight: 900; padding: 0 .75rem; }
body.layout-almacen-figma .product > button:not(.quantity-controls button) {
  border-radius: 999px; background: var(--af-primary); color: var(--af-primary-fg);
}

/* ── Step 7: Newsletter + footer ─────────────────────────────────────────── */
/* Fondo claro: los textos del newsletter heredan el color del bloque
   (pages.css), así que hay que declararlo o quedan blancos e ilegibles. */
body.layout-almacen-figma #footer-newsletter { border: 1px solid var(--af-border); border-radius: 1.5rem; background: var(--af-card); color: var(--af-fg); }
body.layout-almacen-figma .footer-rico { background: var(--af-primary); color: var(--af-primary-fg); }
body.layout-almacen-figma .footer-rico a { color: var(--af-primary-fg); opacity: .8; }
body.layout-almacen-figma .footer-rico a:hover { opacity: 1; }

/* El detalle de producto, el blog y mi cuenta usan los tokens genéricos
   (--font-display, --color-borde, etc.), que este tema no declaraba: esas
   páginas salían con el diseño por defecto en vez del estilo del tema.
   Acá se mapean sus variables propias a los tokens compartidos. */
body.layout-almacen-figma {
    --color-borde: var(--af-border);
    --color-texto: var(--af-fg);
    --color-texto-suave: var(--af-muted-fg);
    --color-fondo-claro: var(--af-bg);
    --color-secundario: var(--af-card);
}


/* Ficha de producto: foto ENTERA, no recortada. Sin regla propia heredaba el
   default de product-detail.css (`cover` + min-height 70vh sobre el 55% del
   ancho): en escritorio la foto quedaba de ~700×540 y a una botella o un
   frasco vertical se le cortaba la etiqueta — que es lo que el cliente quiere
   leer. Mismo criterio que almacen, alimentos, estandar y mayorista; los
   temas de ropa se quedan con `cover` a propósito. En el celular el alto lo
   acota movil-fold.css, que va última y le gana a este selector. */
body.layout-almacen-figma .pd-carousel-frame { min-height: 340px; max-height: 72vh; }
body.layout-almacen-figma .pd-ab-main-img    { min-height: 340px; max-height: 72vh; object-fit: contain; background: var(--color-secundario, #fff); }