/*
Theme Name:   First Day Editions
Theme URI:    https://firstdayeditions.com
Description:  Tema hijo de Astra para First Day Editions. Es el sistema visual de FamilyCrests, portado tal cual: mismos colores, misma tipografía, mismas medidas. Lo único que cambia es el contenido.
Author:       First Day Studio LLC
Template:     astra
Version:      0.2.0
Text Domain:  firstdayeditions
*/

/* ════════════════════════════════════════════════════════════════════
   LOS TOKENS — SON LOS DE FAMILYCRESTS, VALOR POR VALOR
   ════════════════════════════════════════════════════════════════════

   🔴 ESTO REEMPLAZA UNA PALETA Y UNA TIPOGRAFÍA QUE YO HABÍA ELEGIDO, y el
   cambio es una decisión explícita del owner: «usá los mismos fondos, mismos
   colores, tipografía, todo igual que FamilyCrests; no debés crear nada, sino
   agarrar lo que ya está creado».

   Yo había armado un sistema propio —Jost, Source Sans 3, Spectral, y la
   paleta sacada de la tapa del pack— y es exactamente lo que no había que
   hacer. Lo de acá sale de
   C:\dev\FamilyCrestsWeb\wp-content\themes\familycrests\style.css, copiado
   valor por valor, no «parecido».

   ⚠️ Antes de cambiar cualquiera de estos números: no son preferencias, son el
   sistema de una página que vende. Si algún día la marca se separa
   visualmente, se separa entera y a propósito, no token por token.

   📌 La paleta del pack impreso —navy #1c2b45, papel #f3ecda, latón #a07b33—
   queda SÓLO para el PDF, que es otro sistema. Están cerca igual: el navy
   difiere en poco y el crema casi no se distingue.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Color — los de FamilyCrests */
  --fde-navy: #112b3d;
  --fde-navy-rgb: 17, 43, 61;
  --fde-cream: #f2ece3;
  --fde-cream-rgb: 242, 236, 227;
  --fde-white: #ffffff;
  --fde-text: #121212;
  --fde-text-soft: #54595f;
  --fde-gold: #c9a84c;          /* decorativo: filetes, iconos, detalles */
  --fde-red: #bd1700;           /* el tachado del precio de referencia */
  --fde-border-soft: rgba(17, 43, 61, 0.1);

  /* Tipografía — Cardo en titulares, Besley en cuerpo, Montserrat en interfaz */
  --fde-font-heading: "Cardo", Georgia, "Times New Roman", serif;
  --fde-font-body: "Besley", Georgia, "Times New Roman", serif;
  --fde-font-ui: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Maqueta */
  --fde-container-width: 1500px;
  --fde-container-padding: 24px;

  --fde-button-radius: 0px;
  --fde-input-radius: 4px;
  --fde-pill-radius: 40px;
  --fde-card-radius: 0px;

  --fde-section-padding: 80px;
  --fde-section-padding-mobile: 48px;
}

/* ════════════════════════════════════════════════════════════════════
   LA BASE
   ════════════════════════════════════════════════════════════════════ */

body {
  background: var(--fde-white);
  color: var(--fde-text);
  font-family: var(--fde-font-body);
  font-size: 21px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
  font-family: var(--fde-font-heading);
  font-weight: 400;
  color: var(--fde-navy);
  line-height: 1.12;
  text-wrap: balance;
}

a { color: inherit; }

/* El foco de teclado se ve siempre: es lo único que tiene quien no usa mouse. */
:focus-visible {
  outline: 2px solid var(--fde-gold);
  outline-offset: 2px;
}

/* ⚠️ MOVIMIENTO REDUCIDO: SE ATENÚA, NO SE APAGA.
   El comodín de siempre —`* { animation-duration: .01ms !important }`— deja
   los `delay` intactos, así que todo aparece de golpe unos segundos después
   (le pasó a FamilyCrests en un embudo), y apagar las animaciones deja
   secciones quietas o vacías que se leen como una página rota.
   La amplitud se recorta donde cada animación se define. Acá queda sólo lo que
   sí corresponde apagar: el scroll suave, que no revela nada. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}


/* ════════════════════════════════════════════════════════════════════
   PORTADO DE FAMILYCRESTS · header, hamburguesa y cajón del menú
   ════════════════════════════════════════════════════════════════════ */

/* ▸ style.css L2455 */
/* Logo link: kill the dashed focus outline that appears after clicking.
   Keep :focus-visible (keyboard navigation) for accessibility — only the
   mouse-click :focus ring is removed. */
.custom-logo-link:focus,
.site-logo-img a:focus,
.site-branding a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ▸ style.css L2461 */
.custom-logo-link:focus:not(:focus-visible),
.site-logo-img a:focus:not(:focus-visible),
.site-branding a:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* ▸ style.css L3137 */
/* ============================================================
   Header layout: ALWAYS show mobile-style (logo + hamburger).
   Matches Shopify reference where no horizontal nav exists on desktop.
   ============================================================ */
#ast-desktop-header {
  display: none !important;
}

/* ▸ style.css L3144 */
/* === Header: replicar patron Shopify (menu_type_desktop:"drawer")
   El "ast-mobile-header" se muestra en TODOS los breakpoints — hamburger always visible.
   El "ast-desktop-header" se oculta completamente. */
#ast-mobile-header {
  display: block !important;
}

/* ▸ style.css L3147 */
#ast-desktop-header {
  display: none !important;
}

/* ▸ style.css L3151 */
.ast-mobile-header-wrap {
  width: 100%;
}

/* ▸ style.css L3156 */
/* Hide the redundant site-title text (we use the logo image). */
.ast-site-title-wrap,
.ast-site-identity .ast-site-title-wrap,
#ast-mobile-header .ast-site-title-wrap,
#ast-desktop-header .ast-site-title-wrap {
  display: none !important;
}

/* ▸ style.css L3166 */
/* Header bar — Shopify spec:
   - Desktop ≥750: 71px TOTAL height, padding 12px 32px
   - Mobile <750:  56px TOTAL height, padding 6px 16px  (DevTools mediciones reales) */
#ast-mobile-header .ast-primary-header-bar,
#ast-mobile-header .main-header-bar,
.main-header-bar {
  box-sizing: border-box !important;
  height: 71px !important;
  min-height: 71px !important;
  max-height: 71px !important;
  padding: 12px 32px !important;
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  box-shadow: none !important;
}

/* ▸ style.css L3179 */
/* Grid-row interno alineado al 71px desktop */
#ast-mobile-header .ast-builder-grid-row {
  height: 47px;
  align-items: center;
}

/* ▸ style.css L3183 */
@media (max-width: 749px) {
  /* Header bar: 56px alto, padding asimétrico — Shopify spec real:
       hamburger sale a 4px del left edge, cart deja 12px right gap. */
  #ast-mobile-header .ast-primary-header-bar,
    #ast-mobile-header .main-header-bar,
    .main-header-bar {
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      padding: 6px 12px 6px 4px !important;
    }
  #ast-mobile-header .ast-builder-grid-row {
      height: 44px;
    }
}

/* ▸ style.css L3202 */
/* Logo: Shopify spec
   - Desktop: 250 × 32px
   - Mobile:  164 × 21px (DevTools real measure) */
#ast-mobile-header .custom-logo {
  width: auto;
  max-width: 250px;
  height: 32px;
  max-height: 32px;
  object-fit: contain;
}

/* ▸ style.css L3209 */
@media (max-width: 749px) {
  #ast-mobile-header .custom-logo {
      max-width: 164px !important;
      height: 21px !important;
      max-height: 21px !important;
    }
  /* Logo centrado al midpoint del viewport — Astra lo pone en la "left section"
       junto al hamburger. Posicionamos la IMG directamente (no el wrapper) usando
       left:50% + margin-left:-82px (mitad del width 164) sobre el header bar. */
  #ast-mobile-header .ast-primary-header-bar,
    #ast-mobile-header .main-header-bar {
      position: relative !important;
    }
  #ast-mobile-header .custom-logo {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      margin-left: -82px !important;  /* = width/2 = 164/2 */
      margin-top: -10.5px !important;  /* = height/2 = 21/2 */
      z-index: 5;
    }
}

/* ▸ style.css L3233 */
/* Hamburger button: 44x44 clickable area, navy SVG. Shopify spec. */
.menu-toggle.main-header-menu-toggle,
.menu-toggle.main-header-menu-toggle .mobile-menu-toggle-icon,
.menu-toggle.main-header-menu-toggle .ahfb-svg-iconset,
.menu-toggle.main-header-menu-toggle svg {
  color: var(--fde-text) !important;
  fill: currentColor !important;
  background: transparent !important;
  border: none !important;
}

/* ▸ style.css L3243 */
.menu-toggle.main-header-menu-toggle {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10001; /* above drawer (10000) so X is clickable */
}

/* ▸ style.css L3253 */
.menu-toggle.main-header-menu-toggle svg {
  width: 22px !important;
  height: 22px !important;
}

/* ▸ style.css L3257 */
@media (max-width: 749px) {
  .menu-toggle.main-header-menu-toggle svg {
      width: 20px !important;
      height: 20px !important;
    }
}

/* ▸ style.css L3264 */
.menu-toggle.main-header-menu-toggle:hover {
  opacity: 1;
}

/* ▸ style.css L3268 */
/* No focus outline / box on mouse click. Keep it for keyboard nav (:focus-visible). */
.menu-toggle.main-header-menu-toggle,
.menu-toggle.main-header-menu-toggle:focus,
.menu-toggle.main-header-menu-toggle:active,
.menu-toggle.main-header-menu-toggle.toggled {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* ▸ style.css L3277 */
.menu-toggle.main-header-menu-toggle:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* ▸ style.css L3281 */
.menu-toggle.main-header-menu-toggle:focus-visible {
  outline: 2px solid var(--fde-navy);
  outline-offset: 2px;
}

/* ▸ style.css L3287 */
/* Animated hamburger ↔ X (3 lines morph). Shopify Dawn / Apple-style micro-animation. */
.menu-toggle .fde-hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 22px;
  position: relative;
  transition: transform 0.2s ease;
}

/* ▸ style.css L3296 */
.menu-toggle .fde-hamburger-line {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center center;
  transition: transform 0.3s cubic-bezier(0.65, 0.05, 0.36, 1),
              opacity 0.2s ease;
  will-change: transform, opacity;
}

/* ▸ style.css L3307 */
@media (max-width: 749px) {
  /* Shopify SVG path bounding box exact: 18.57 × 16.67px */
  .menu-toggle .fde-hamburger {
      width: 18.57px;
      height: 16.67px;
    }
  /* Líneas un poco más grises (no full black) — Shopify usa ~75% navy */
  .menu-toggle .fde-hamburger-line {
      width: 18.57px;
      background: rgba(18, 18, 18, 0.75) !important;
    }
  /* Re-calibrate X open-state translate distance for new 16.67px height
       (half of 16.67 = ~8.3, minus 1px for line thickness = 7.3) */
  .menu-toggle[aria-expanded="true"] .fde-hamburger-line:nth-child(1) {
      transform: translateY(7.3px) rotate(45deg);
    }
  .menu-toggle[aria-expanded="true"] .fde-hamburger-line:nth-child(3) {
      transform: translateY(-7.3px) rotate(-45deg);
    }
}

/* ▸ style.css L3328 */
/* Open state: line 1 ↓+rotate 45°, line 2 fades, line 3 ↑+rotate -45° → X */
.menu-toggle[aria-expanded="true"] .fde-hamburger-line:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

/* ▸ style.css L3331 */
.menu-toggle[aria-expanded="true"] .fde-hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

/* ▸ style.css L3335 */
.menu-toggle[aria-expanded="true"] .fde-hamburger-line:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* ▸ style.css L3339 */
/* Hover zoom — mini scale on the icon inside the button */
.menu-toggle:hover .fde-hamburger {
  transform: scale(1.12);
}

/* ▸ style.css L3343 */
/* Hide Astra's original SVG (we replace its innerHTML so this is a safety net) */
.menu-toggle .ahfb-svg-iconset:not(:has(.fde-hamburger)),
.menu-toggle .mobile-menu-toggle-icon:not(:has(.fde-hamburger)) {
  display: none;
}

/* ▸ style.css L3349 */
/* Body lock when drawer is open — prevents background scroll */
body.fde-menu-open {
  overflow: hidden;
}

/* ▸ style.css L3354 */
/* Hide Astra's default footer completely (we render fde-footer via wp_footer) */
footer.site-footer,
.site-footer,
#colophon,
.ast-small-footer,
.footer-sml-section-1,
.footer-sml-section-2,
.ast-builder-footer-grid-row {
  display: none !important;
}

/* ▸ style.css L3774 */
/* Off-canvas drawer: brand styling */
.ast-mobile-header-content {
  background: var(--fde-white);
}

/* ▸ style.css L3778 */
.ast-mobile-header-content .menu-link {
  font-family: var(--fde-font-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: var(--fde-navy);
}

/* ▸ style.css L3787 */
.ast-mobile-header-content .menu-item {
  border-bottom: 1px solid var(--fde-border-soft);
}

/* ▸ style.css L3795 */
/* ============================================================
   Cart icon in header (injected via child theme)
   ============================================================ */
/* Cart icon area — Shopify spec: 44x44 clickable */
.fde-header-cart {
  display: inline-flex;
  align-items: center;
}

/* ▸ style.css L3856 */
/* Right section of mobile header: align items */
#ast-mobile-header .site-header-primary-section-right {
  display: flex !important;
  align-items: center;
  gap: 4px;
}

/* ▸ style.css L3863 */
/* Left section: hamburger now lives here (moved via JS), then logo */
#ast-mobile-header .site-header-primary-section-left {
  display: flex !important;
  align-items: center;
  gap: 16px;
}

/* ▸ style.css L3869 */
/* Hamburger sits to the left of the logo */
#ast-mobile-header .site-header-primary-section-left [data-section="section-header-mobile-trigger"] {
  order: -1;
  margin-right: 4px;
}

/* ▸ style.css L5050 */
/* Hide Astra's broken mobile menu container — we use our own .fde-menu-drawer instead */
.main-header-bar-navigation { display: none !important; }

/* ▸ style.css L5061 */
/* === Custom mobile menu drawer (Shopify Dawn pattern) === */
.fde-menu-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.3s;
}

/* ▸ style.css L5069 */
.fde-menu-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* ▸ style.css L5073 */
.fde-menu-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ▸ style.css L5080 */
.fde-menu-drawer.is-open .fde-menu-drawer__backdrop { opacity: 1; }

/* ▸ style.css L5081 */
.fde-menu-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px; /* same width as cart drawer */
  background: var(--fde-navy, #112B3D);
  color: #ffffff;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 16px rgba(0,0,0,0.25);
}

/* ▸ style.css L5096 */
.fde-menu-drawer.is-open .fde-menu-drawer__panel { transform: translateX(0); }

/* ▸ style.css L5098 */
/* Menu drawer: no pull-to-refresh, panel completamente inmóvil. Tap en links sigue funcionando — touch-action:none solo desactiva pan/zoom, no taps */
.fde-menu-drawer__panel {
  overscroll-behavior: none;
  touch-action: none;
  overflow: hidden;
  /* iPhone safe-area inferior pintada para que la URL bar matchee al header */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ▸ style.css L5105 */
.fde-menu-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #ffffff;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ▸ style.css L5118 */
.fde-menu-drawer__close:hover { color: rgba(255, 255, 255, 0.7); }

/* ▸ style.css L5119 */
.fde-menu-drawer__nav {
  padding: 64px 24px 24px;
  overflow-y: auto;
  flex: 1;
}

/* ▸ style.css L5124 */
.fde-menu-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ▸ style.css L5129 */
.fde-menu-drawer__list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* ▸ style.css L5132 */
.fde-menu-drawer__list a {
  display: block;
  padding: 18px 12px;
  margin: 0 -12px;
  font-family: var(--fde-font-heading, Cardo), serif;
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

/* ▸ style.css L5144 */
.fde-menu-drawer__list a:hover,
.fde-menu-drawer__list a:focus {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

/* ▸ style.css L5152 */
/* Quitar outline punteado al click (browser default focus ring). Solo lo
   mostramos en :focus-visible que es navegación por teclado — accesibilidad
   preservada, click con mouse limpio. */
.fde-menu-drawer__list a:focus { outline: none; }

/* ▸ style.css L5153 */
.fde-menu-drawer__list a:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ▸ style.css L5154 */
.fde-menu-drawer__list a::-moz-focus-inner { border: 0; }

/* ▸ style.css L5159 */
/* Press + post-tap feedback — JS agrega .is-loading después del click, queda
   visible hasta que la navegación complete (página nueva = drawer cerrado).
   :active cubre el momento del press físico, .is-loading el post-tap. */
.fde-menu-drawer__list a:active,
.fde-menu-drawer__list a.is-loading {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* ▸ style.css L5687 */
/* ============================================================
   Smart Sticky Header — slide on scroll direction (Shopify Dawn parity)
   - Always fixed at top
   - Scroll down past THRESHOLD: slide up & hide
   - Scroll up: slide back in
   - Top of page: always visible, no shadow
   - Mobile menu open: never hide
   ============================================================ */
.site-header,
#masthead.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10100; /* above menu drawer (10000), BELOW cart drawer (10200) — cart drawer dim covers header (Shopify Dawn pattern) */
  background: #ffffff;
  transform: translateY(0) !important;
  transition: transform 0.25s ease-out, box-shadow 0.2s ease-out;
  will-change: transform;
}

/* ▸ style.css L5699 */
.site-header.fde-header--hidden,
#masthead.site-header.fde-header--hidden {
  transform: translateY(-100%) !important;
}

/* ▸ style.css L5703 */
.site-header.fde-header--at-top,
#masthead.site-header.fde-header--at-top {
  box-shadow: none;
}

/* ▸ style.css L5707 */
.site-header:not(.fde-header--at-top),
#masthead.site-header:not(.fde-header--at-top) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ▸ style.css L5711 */
.site-header.fde-menu-open,
#masthead.site-header.fde-menu-open {
  transform: translateY(0) !important;
}

/* ▸ style.css L5865 */
/* Heritage funnel email popup: hide site header so user can click the X.
   Works on heritage-results AND heritage-results-origins (both render .hr-popup-bg). */
body:has(.hr-popup-bg.active) #masthead,
body:has(.hr-popup-bg.active) .site-header,
body:has(.hr-popup-bg.active) #ast-mobile-header {
  display: none !important;
}

/* ▸ style.css L6747 */
/* Menu drawer: nada se mueve, nada de pan. Tap en links sigue funcionando. */
html.fde-scroll-locked .fde-menu-drawer__panel { touch-action: none !important; }

/* ▸ style.css L6786 */
@media (max-width: 749px) {
  /* ── D. Astra header — fix 4px overflow ────────────────────────────────── */
  .ast-builder-grid-row,
    .ast-builder-grid-row-container,
    .site-header-primary-section-right {
      max-width: 100% !important;
      box-sizing: border-box;
    }
  /* ── F. Astra header — kill doble padding (outer 16px + inner 16px = 32px desde edge).
           Shopify mobile: icons a 16px del edge, no a 32px. */
  .ast-builder-grid-row.ast-builder-grid-row-has-sides {
      padding-left: 0 !important;
      padding-right: 0 !important;
      column-gap: 0 !important;
      box-sizing: border-box;
    }
}

/* ▸ style.css L8778 */
/* ═══════════════════════════════════════════════════════════════════════════
   TIPOGRAFIA DEL CARRITO Y DEL MENU HAMBURGUESA   (2026-09-04)
   ═══════════════════════════════════════════════════════════════════════════
   Los dos paneles quedaban en la tipografia vieja mientras el resto del sitio
   ya era Montserrat: el carrito con los titulos en Cardo y los datos en Besley,
   y el menu con los items en Cardo.

   SOLO la familia. Ni un tamano, ni un color, ni un peso, ni un espaciado.

   ALCANCE: los dos paneles propios (.fde-cart-drawer y .fde-menu-drawer), que
   viven en functions.php. Nada mas del sitio los usa.

   Se excluye <svg> y su contenido: los iconos (-, +, tacho, X) son SVG y no
   tienen tipografia que cambiar.

   No se tocan ::before/::after con un selector universal A PROPOSITO: eso
   pisaria las tipografias de iconos. Los unicos pseudo-elementos con texto de
   estos paneles son los placeholders, cubiertos aparte abajo.
   ═══════════════════════════════════════════════════════════════════════════ */
body .fde-cart-drawer,
body .fde-cart-drawer *:not(svg):not(svg *),
body .fde-menu-drawer,
body .fde-menu-drawer *:not(svg):not(svg *) {
  font-family: var(--fde-font-ui) !important;
}

/* ▸ style.css L8784 */
body .fde-cart-drawer ::placeholder,
body .fde-menu-drawer ::placeholder {
  font-family: var(--fde-font-ui) !important;
}


/* ════════════════════════════════════════════════════════════════════
   PORTADO DE FAMILYCRESTS · el pie de marca
   ════════════════════════════════════════════════════════════════════ */

/* ▸ style.css L3354 */
/* Hide Astra's default footer completely (we render fde-footer via wp_footer) */
footer.site-footer,
.site-footer,
#colophon,
.ast-small-footer,
.footer-sml-section-1,
.footer-sml-section-2,
.ast-builder-footer-grid-row {
  display: none !important;
}

/* ▸ style.css L3373 */
/* ============================================================
   Brand footer — fde-footer
   Matches Shopify Dawn scheme-5: navy bg + white text/buttons.
   ============================================================ */
.fde-footer {
  background: var(--fde-navy);
  color: var(--fde-white);
  padding: 0;
  margin-top: 0;
  font-family: var(--fde-font-body);
  font-size: 15px;
  line-height: 1.6;
}

/* ▸ style.css L3383 */
.fde-footer a {
  color: var(--fde-white);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* ▸ style.css L3389 */
.fde-footer a:hover {
  opacity: 0.7;
  color: var(--fde-white);
}

/* ▸ style.css L3394 */
.fde-footer__inner {
  max-width: var(--fde-container-width);
  margin: 0 auto;
  padding: 52px 24px 44px;
}

/* ▸ style.css L3416 */
/* Top: 2-column layout (disclaimer left, newsletter right) on desktop;
   stacks vertically on mobile. Matches Shopify footer.liquid layout. */
/* ⚠️⚠️ EL PIE USA LA TIPOGRAFÍA DE LA MAIN PAGE, NO LA DEL TEMA VIEJO.
   Medido el 2026-08-24: la main page es Montserrat de punta a punta (titular
   70/300, bajada 21/400, rótulos 18/600 con tracking ancho) y el pie era Besley
   y Cardo de punta a punta. Eran dos sitios distintos pegados uno abajo del
   otro. El sistema de abajo copia la escala de la main page:

     · rótulos de columna  = el mismo gesto que los rótulos de sección
                             (600, mayúsculas, tracking ancho, apagado)
     · links y prosa       = 400, como la bajada
     · la marca            = 600 con tracking, como el logo del header

   Se declara la familia UNA vez como variable del pie: las reglas de teléfono
   del tema la vuelven a pedir con !important y así no hay dos listas que se
   desincronicen. */
.fde-footer__top {
  --fde-pie-tipo: var(--fde-font-ui);
}

/* ▸ style.css L3420 */
.fde-footer__top,
.fde-footer__bottom {
  font-family: var(--fde-font-ui);
}

/* ▸ style.css L3426 */
/* ── zona de arriba: la marca y los links ──────────────────────────────── */
.fde-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 0;
}

/* ▸ style.css L3441 */
/* ⚠️ LA MARCA VA AL COSTADO RECIÉN DESDE 1000px, Y LOS LINKS NUNCA BAJAN DE
   672px (2026-10-06, cuarta columna «Free to explore»). El link más ancho es
   "The Surname Index": 146,5px medido en Montserrat 15px. Cuatro columnas de
   150px + tres huecos de 24px = 672px. Con la proporción de antes (1 : 1,5)
   eso recién se cumple a 1212px; por eso el mínimo va en la pista y no en la
   proporción: a 1440 queda idéntico (797px de links) y entre 1000 y 1211 la que
   cede es la marca. Debajo de 1000 la marca se apila arriba, como en tablet:
   a 900px la pista de links habría quedado en 473px. */
@media (min-width: 1000px) {
  .fde-footer__top {
      grid-template-columns: minmax(0, 1fr) minmax(672px, 1.5fr);
      gap: 64px;
      align-items: start;
    }
}

/* ▸ style.css L3449 */
.fde-footer__marca-n {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--fde-white);
}

/* ▸ style.css L3458 */
.fde-footer__marca-t {
  margin: 0 0 16px;
  max-width: 30ch;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  opacity: .72;
}

/* ▸ style.css L3471 */
/* ⚠️ ACÁ ESTABA EL MAIL ESCRITO, ABAJO DE LA MARCA. Se fue el 2026-08-24: ahora
   es el botón "Email us" de la grilla de links (.fde-footer__contacto). La
   dirección sigue accesible en el title del botón y en /contact/. */
.fde-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 30px 24px;
}

/* ▸ style.css L3481 */
/* Cuatro columnas desde 720px (4 × 150 + 3 × 24 = 672 de links + 48 de margen).
   Entre 560 y 719 siguen las dos del teléfono: tres ya no alcanzan para cinco
   celdas sin dejar un hueco en el medio. */
@media (min-width: 720px) {
  .fde-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* En desktop la fila 2 existe sólo para esto: el botón cae debajo de
       "Company", que es la última columna, y cierra el bloque por abajo a la
       derecha en vez de dejar el escalón. */
  .fde-footer__contacto { grid-column: 4; grid-row: 2; }
}

/* ▸ style.css L3491 */
/* El botón. Contorno y no relleno: es el pie, no puede competir con el botón de
   búsqueda de la página. El relleno aparece recién al pasar por encima. */
.fde-footer__contacto {
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fde-white);
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ▸ style.css L3511 */
.fde-footer__contacto::before {
  content: "";
  width: 15px;
  height: 11px;
  flex: 0 0 auto;
  background: currentColor;
  /* sobre de líneas — máscara, así hereda el color en los dos estados */
  -webkit-mask: var(--fde-sobre) center / contain no-repeat;
  mask: var(--fde-sobre) center / contain no-repeat;
}

/* ▸ style.css L3526 */
/* ⚠️ VA CON `.fde-footer` ADELANTE. `.fde-footer a:hover` —la regla general del
   pie— pesa más que `.fde-footer__contacto:hover` (suma el selector de etiqueta)
   y ganaba el color: medido, el texto quedaba BLANCO SOBRE DORADO, que da 2:1
   de contraste y no se lee. Con navy sobre dorado da 7,5:1. */
.fde-footer .fde-footer__contacto:hover,
.fde-footer .fde-footer__contacto:focus-visible {
  background: var(--fde-gold);
  border-color: var(--fde-gold);
  color: var(--fde-navy);
  opacity: 1;
}

/* ▸ style.css L3539 */
/* ⚠️ EL SOBRE VA DIBUJADO CON TRAZO, NO CON RELLENO. Con `fill`, la solapa y el
   cuerpo son subrecorridos que giran para el mismo lado que el marco: la regla
   nonzero los rellena a todos y la máscara termina siendo un rectángulo macizo.
   Con `stroke` + `fill='none'` el alfa queda sólo en las líneas, que es lo que
   la máscara necesita. */
.fde-footer {
  --fde-sobre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='.85' y='.85' width='18.3' height='12.3' rx='1.7'/%3E%3Cpath d='m1.9 2.4 8.1 5.6 8.1-5.6'/%3E%3C/svg%3E");
}

/* ▸ style.css L3556 */
/* ⚠️ EN TELÉFONO SON DOS COLUMNAS, Y NO ES POR COMODIDAD: NO ENTRAN TRES.
   Medido forzando tres a 390px (98px por columna): se parten en dos renglones
   "Search a name", "The collection" y "Track your order", más el rótulo
   "ALREADY ORDERED". A 360px (88px) se parten seis links y dos rótulos. Con dos
   columnas no se parte nada.

   Entrarían achicando la letra, pero 15px es piso: el comprador tiene 55+ y el
   pie es donde busca cómo contactar y dónde está su pedido.

   Desde el 2026-10-06 son cinco celdas: The record / Free to explore,
   Already ordered / Company, y el botón Email us solo en la última fila, a la
   izquierda, como cierre del bloque. El orden del HTML alcanza: no hace falta
   reordenar nada por CSS. */
@media (max-width: 559px) {
  .fde-footer__cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 26px 20px;
    }
}

/* ▸ style.css L3566 */
/* ⚠️ A 360px "The Surname Index" (146,5px) no entraba por medio píxel en una
   columna de 146: se partía en dos renglones. Con 14px de hueco la columna
   mide 149. A 320 se parte igual, como ya se partía "Already ordered". */
@media (max-width: 374px) {
  .fde-footer__cols { column-gap: 14px; }
}

/* ▸ style.css L3572 */
/* El mismo gesto que los rótulos de la main page ("1740 → 1902"): mayúsculas,
   600, tracking ancho. Es lo que hace que el pie se lea como parte del sitio. */
.fde-footer__col-t {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0 0 14px;
}

/* ▸ style.css L3581 */
.fde-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

/* ▸ style.css L3592 */
/* ⚠️ 15px y no 11px: el comprador tiene 55+ y el pie es donde busca "cómo los
   contacto" y "dónde está mi pedido". Achicarlo para que entre es exactamente
   la decisión que hace que esa persona no encuentre y llame al banco. */
.fde-footer__col a {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  display: inline-block;
  padding-block: 3px;
}

/* ▸ style.css L3622 */
/* ⚠️ ACÁ VIVÍA EL PÁRRAFO DE DISCLAIMER DEL PIE. Se sacó el 2026-08-24.

   No es una pérdida legal: lo que protege no es dónde está escrito el aviso
   sino que el comprador lo haya visto ANTES de pagar. Por fuerza real: la
   ficha del producto y el checkout primero, después el aviso dentro del
   reporte y del mail de entrega, después Términos, y ÚLTIMO el pie. El link
   Disclaimer sigue en la línea legal de abajo, así que el texto completo
   queda a un clic desde todas las páginas.

   Dato que lo respalda: ni Ancestry ni MyHeritage tienen párrafo de
   disclaimer en el pie. Lo tienen en Términos y lo linkean.

   ⚠️ Si se lo repone, que NO sea acá. La línea del escudo —interpretación
   artística ligada a un apellido, no una concesión de armas— tiene que estar
   en la FICHA DEL PRODUCTO, que es donde el comprador se forma la
   expectativa y donde un aviso de verdad sirve. */
/* ⚠️ UNA FILA: lo legal a la izquierda, los medios de pago a la derecha.
   Antes era una columna centrada, y ése era el origen del desorden: la zona de
   arriba alineada a la izquierda y la de abajo centrada hacían que el
   disclaimer del medio no perteneciera a ninguna de las dos. Con todo sobre el
   mismo eje, la letra chica se lee como el pie de la misma página. */
.fde-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}

/* ▸ style.css L3633 */
@media (min-width: 900px) {
  .fde-footer__bottom {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 32px;
    }
}

/* ▸ style.css L3642 */
.fde-footer__legalcol { display: grid; gap: 7px; }

/* ▸ style.css L3676 */
/* ⚠️ LOS SEIS LEGALES VAN EN UN SOLO RENGLÓN, Y EL TAMAÑO SE CALCULA — NO SE
   ELIGE. La zona de abajo va centrada en cualquier pantalla donde se apile.

   ⚠️ EL PRIMER DIAGNÓSTICO FUE MALO Y HAY QUE SABERLO: el 2026-08-24 se midió
   "no entran ni a 11px" y se armó una tabla de 3×2 por eso. Estaba mal. La
   sonda bajaba la letra con `.fde-footer__legal-l a{font-size:…!important}` y
   PERDÍA contra la regla de teléfono del tema —`.fde-footer .fde-footer__bottom
   a{font-size:12.5px!important}`, que suma un selector más—, así que el texto
   nunca se achicaba y las seis pruebas daban idéntico: 350,3px siempre. Con la
   especificidad correcta, lo que entra en un renglón es:

     ancho de pantalla   máximo que entra (separación 6px)
       320px                9,4px   ← no entra a un tamaño legible
       360px               11,0px
       375px               11,55px
       390px               12,15px  ← el teléfono del owner, casi el actual
       412px y más         12,5px (el tope)

   Fórmula medida: los seis textos ocupan 25,64px de ancho por cada px de
   tamaño, más las cinco separaciones. De ahí sale el clamp: se despeja el
   tamaño que hace que la línea entre justo en el ancho disponible
   (100vw menos los 24px de margen de cada lado, menos 6px de aire).

   El piso es 10,8px: abajo de ~355px de pantalla la línea no entra a un tamaño
   legible, y ahí se deja que corte en dos renglones centrados. Por eso queda
   `flex-wrap: wrap` — es la red, no el plan.

   ⚠️ TODO VA CON `.fde-footer` ADELANTE. La regla base
   `.fde-footer__legal{display:flex}` vive MÁS ABAJO en este mismo archivo y pesa
   igual (una clase); las media queries no suman especificidad, así que ganaba
   por orden y el bloque entero no hacía nada. Y el `font-size` de los links
   necesita `!important` con tres clases adelante para ganarle al del tema. */
@media (max-width: 899px) {
  .fde-footer .fde-footer__bottom {
      align-items: center;
      text-align: center;
    }
  .fde-footer .fde-footer__legalcol { justify-items: center; width: 100%; }
  .fde-footer .fde-footer__legal { justify-content: center; }
  .fde-footer .fde-footer__legal-l {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px 0.52em;
      /* ⚠️ EL `!important` DEL PÁRRAFO NO ES OPCIONAL. El bloque de teléfono del
         tema trae `.fde-footer__bottom, .fde-footer__legal{font-size:12.5px
         !important}`: le gana a cualquier regla propia sin `!important`, por más
         clases que tenga. Sin esto el clamp no hacía nada, los links heredaban
         12,5px igual y la línea seguía cortándose en dos. */
      font-size: clamp(10.8px, calc((100vw - 54px) / 28.2), 12.5px) !important;
    }
  .fde-footer .fde-footer__bottom .fde-footer__legal-l a {
      font-size: inherit !important;
      white-space: nowrap;
    }
  .fde-footer .fde-footer__legal-l .fde-footer__legal-sep { display: none; }
  .fde-footer .fde-footer__payments {
      align-self: stretch;
      justify-content: center;
    }
}

/* ▸ style.css L3708 */
.fde-footer__payments {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

/* ▸ style.css L3727 */
/* Mobile: 8 íconos × 38px + gaps = ~374px, no entra en una sola fila en
   viewports 320-390. Reducir tamaño + gap para forzar single row. */
@media (max-width: 749px) {
  /* El centrado vive en el bloque de ≤899px junto con el resto de la zona de
       abajo; acá queda sólo lo que es propio del teléfono: una sola fila y los
       íconos más chicos. */
  .fde-footer__payments {
      flex-wrap: nowrap;
      gap: 4px;
    }
}

/* ▸ style.css L3746 */
/* Dos renglones y no uno: la razón social arriba y los links legales abajo.
   En una sola línea, en un ancho de teléfono, la sociedad quedaba partida entre
   dos renglones y mezclada con los links — que es justo lo contrario de lo que
   se busca al publicarla. */
.fde-footer__legal {
  font-size: 12.5px;
  opacity: .62;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--fde-font-ui);
  font-weight: 400;
}

/* ▸ style.css L3759 */
.fde-footer__legal a {
  color: var(--fde-white);
  text-decoration: none;
}

/* ▸ style.css L3764 */
.fde-footer__legal a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* ▸ style.css L3769 */
.fde-footer__legal-sep {
  opacity: 0.55;
}

/* ▸ style.css L6786 */
@media (max-width: 749px) {
  /* ── L. El pie en teléfono.
  
       ⚠️⚠️ ESTE BLOQUE ESTABA ESCRITO PARA EL PIE VIEJO. La mitad de sus reglas
       apuntaban a .fde-footer__newsletter y a .fde-footer__disclaimer / -title /
       -body: clases que ya NO EXISTEN en el marcado. Se limpiaron.
  
       Las que quedaban imponían "Besley" 11px con !important, y de ahí venía que
       el pie no se pareciera en nada a la main page —que es Montserrat de punta a
       punta— y que el texto legal fuera ilegible para un comprador de 55+.
       Ahora la familia y el tamaño son los mismos que arriba. */
  .fde-footer__bottom,
    .fde-footer__legal {
      color: rgba(255, 255, 255, 0.62) !important;
      font-family: var(--fde-font-ui) !important;
      font-size: 12.5px !important;
    }
  /* ⚠️ NO volver a apuntar estos links por su href —a[href*="contact"] y
       compañía—. Alcanzaba a cualquier link a esa dirección, viviera donde
       viviera: el 2026-08-24 dejó "Contact" en 11px dentro de la columna Company
       mientras "About us", al lado, salía en 15px, y con !important. Se apunta al
       LUGAR (la barra de abajo), que es lo que de verdad define la letra chica. */
  .fde-footer .fde-footer__bottom a,
    .fde-footer__legal a,
    .fde-footer__bottom a {
      font-family: var(--fde-font-ui) !important;
      font-size: 12.5px !important;
      color: rgba(255, 255, 255, 0.62) !important;
      padding: 4px 0 !important;
    }
}

/* ▸ style.css L8179 */
/* En el pie el fondo es navy, y el oro oscuro se pierde contra él.
   Ahí el anillo va en oro claro, que sobre #112B3D da 6.4:1. */
.fde-footer a:focus-visible,
.fde-footer button:focus-visible {
  outline-color: #C9A84C !important;
}


/* ════════════════════════════════════════════════════════════════════
   PORTADO DE FAMILYCRESTS · el cajon del carrito
   ════════════════════════════════════════════════════════════════════ */

/* ▸ style.css L3800 */
.fde-cart-link {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fde-text);
  text-decoration: none;
  position: relative;
  padding: 0;
}

/* ▸ style.css L3812 */
.fde-cart-link:hover {
  color: var(--fde-text);
}

/* ▸ style.css L3816 */
.fde-cart-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  transition: transform 0.2s ease;
}

/* ▸ style.css L3823 */
/* Hover zoom — mini scale on cart icon (mirror hamburger) */
.fde-cart-link:hover .fde-cart-icon {
  transform: scale(1.12);
}

/* ▸ style.css L3827 */
.fde-cart-count {
  font-family: var(--fde-font-body);
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  text-align: center;
  background: var(--fde-navy);
  color: var(--fde-white);
  border-radius: 999px;
  padding: 0 4px;
  line-height: 16px;
  position: absolute;
  /* Overlap the bag icon (lower-right) like Shopify: badge sits ON the bag,
     not floating outside it. SVG is 22×22 centered in a 44×44 link, so its
     bottom-right corner is at ~(33,33) → badge bottom-right at (~42,~42). */
  bottom: 4px;
  right: 4px;
  transform: none;
  display: none;
  box-shadow: 0 0 0 1.5px #ffffff;
}

/* ▸ style.css L3849 */
.fde-cart-count--has-items {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ▸ style.css L5171 */
/* ============================================================
   Cart Drawer — Shopify Dawn exact pattern:
   The drawer IS the overlay (full viewport with semi-transparent bg).
   The panel is a flex-end child (right-aligned, white, 420px).
   Header stays untouched — drawer's dim bg covers it visually.
   ============================================================ */
.fde-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 10200; /* above site header (10100) so dim covers it */
  background-color: rgba(0, 0, 0, 0); /* dim color — transparent when closed */
  visibility: hidden;
  transition: visibility 0.3s ease, background-color 0.3s ease;
  pointer-events: none;
}

/* ▸ style.css L5180 */
.fde-cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.5); /* dim activates on open */
}

/* ▸ style.css L5187 */
/* The backdrop element is now redundant (drawer container itself is the dim);
   keep it as an invisible click target for accessibility. */
.fde-cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: pointer;
}

/* ▸ style.css L5194 */
/* Kill focus outline + lock cart link color to text/navy in every state (Astra default blue is killed) */
.fde-cart-link,
.fde-cart-link:link,
.fde-cart-link:visited,
.fde-cart-link:hover,
.fde-cart-link:focus,
.fde-cart-link:active,
.fde-cart-link:focus-visible,
.fde-cart-link:focus-within {
  outline: none !important;
  box-shadow: none !important;
  color: var(--fde-text, #121212) !important;
  text-decoration: none !important;
}

/* ▸ style.css L5207 */
.fde-cart-link svg,
.fde-cart-link:link svg,
.fde-cart-link:visited svg,
.fde-cart-link:hover svg,
.fde-cart-link:focus svg,
.fde-cart-link:active svg,
.fde-cart-link:focus-visible svg {
  color: var(--fde-text, #121212) !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* ▸ style.css L5218 */
.fde-cart-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* ▸ style.css L5222 */
.fde-cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ▸ style.css L5229 */
.fde-cart-drawer.is-open .fde-cart-drawer__backdrop { opacity: 1; }

/* ▸ style.css L5230 */
.fde-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: -400px; /* hidden off the right edge */
  bottom: 0;
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  color: var(--fde-text, #121212);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  /* Crisp text — no transform = no GPU layer = subpixel anti-aliasing stays active */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ▸ style.css L5248 */
.fde-cart-drawer.is-open .fde-cart-drawer__panel {
  right: 0;
}

/* ▸ style.css L5251 */
@media (max-width: 640px) {
  .fde-cart-drawer__panel { right: -100vw; }
  .fde-cart-drawer.is-open .fde-cart-drawer__panel { right: 0; }
}

/* ▸ style.css L5256 */
/* Close X — sits inside .fde-cart-drawer__header, aligned right */
.fde-cart-drawer__close,
.fde-cart-drawer__close:hover,
.fde-cart-drawer__close:focus,
.fde-cart-drawer__close:active,
.fde-cart-drawer .fde-cart-drawer__close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: 2;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  color: var(--fde-text) !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: auto;
  height: auto;
  width: auto;
  border-radius: 0;
}

/* ▸ style.css L5282 */
.fde-cart-drawer__close:focus:not(:focus-visible) { outline: none !important; }

/* ▸ style.css L5283 */
.fde-cart-drawer__close svg {
  transition: transform 0.2s ease;
  display: block;
}

/* ▸ style.css L5287 */
.fde-cart-drawer__close:hover svg {
  transform: scale(1.12);
}

/* ▸ style.css L5290 */
.fde-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Scroll del listado de items sí, pero no propaga a body → no pull-to-refresh */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ▸ style.css L5301 */
/* Cart panel: no overscroll bounce a nivel container */
.fde-cart-drawer__panel {
  overscroll-behavior: contain;
  /* Safe-area bottom blanco — matchea el header (panel ya es bg: #fff) */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ▸ style.css L5306 */
.fde-cart-drawer__items {
  padding: 16px 15px; /* Spec Shopify: drawer__inner padding 0 15px */
}

/* ▸ style.css L5310 */
/* Empty state — Shopify Dawn exact: full-height flex center, 24px New York heading, 216×45 button */
.fde-cart-drawer__empty {
  display: flex;
  align-items: center;          /* vertical center inside body */
  justify-content: center;
  flex: 1;
  width: 100%;
  padding: 24px;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 16px;
  color: rgba(18, 18, 18, 0.75); /* #121212BF */
}

/* ▸ style.css L5322 */
/* Honor the [hidden] attribute over the display:flex above */
.fde-cart-drawer__empty[hidden],
.fde-cart-drawer__items[hidden],
.fde-cart-drawer__footer[hidden] { display: none !important; }

/* ▸ style.css L5325 */
.fde-cart-drawer__empty-content {
  text-align: center;
  width: 100%;
  max-width: 369px;
}

/* ▸ style.css L5330 */
.fde-cart-drawer__empty-heading {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  margin: 0 0 30px !important;
  line-height: 1.3;
  letter-spacing: normal;
}

/* ▸ style.css L5339 */
.fde-cart-drawer__continue,
.fde-cart-drawer__continue:hover,
.fde-cart-drawer__continue:focus,
.fde-cart-drawer__continue:active {
  /* Spec: matches hamburger drawer panel navy (--fde-navy = #112B3D) */
  background: var(--fde-navy, #112B3D) !important;
  background-color: var(--fde-navy, #112B3D) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 30px !important;
  min-width: 120px !important;
  min-height: 45px !important;
  width: auto !important;
  height: auto !important;
  font-family: 'Besley', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  cursor: pointer;
  border-radius: 0 !important;
  transition: opacity 0.2s;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-decoration: none;
}

/* ▸ style.css L5370 */
.fde-cart-drawer__continue:hover { opacity: 0.85; }

/* ▸ style.css L5371 */
.fde-cart-drawer__items { list-style: none; margin: 0; padding: 0; }

/* ▸ style.css L5374 */
/* Cart drawer header — Spec Shopify: padding 15px 0, h2 24px "New York" #121212, margin 0 0 10px */
.fde-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  margin: 0 15px;
  flex-shrink: 0;
}

/* ▸ style.css L5383 */
/* When cart is empty: no title text (X close stays right-aligned) */
.fde-cart-drawer__header--empty {
  justify-content: flex-end;
}

/* ▸ style.css L5386 */
.fde-cart-drawer__title[hidden] { display: none !important; }

/* ▸ style.css L5387 */
.fde-cart-drawer__title {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  margin: 0 0 10px !important;
  letter-spacing: 0 !important;
  line-height: 1.3;
}

/* ▸ style.css L5398 */
/* PRODUCT / TOTAL column headers — placed BELOW header, ABOVE the gray separator */
.fde-cart-drawer__col-headers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 15px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(18, 18, 18, 0.1);
}

/* ▸ style.css L5406 */
.fde-cart-drawer__col-headers[hidden] { display: none !important; }

/* ▸ style.css L5407 */
.fde-cart-drawer__col-product,
.fde-cart-drawer__col-total {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 400;
  color: rgba(18, 18, 18, 0.75);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ▸ style.css L5418 */
/* Cart item row — Spec Shopify: margin 0 0 15px, 369 wide */
.fde-cart-drawer__item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 14px;
  padding: 20px 0;
  margin: 0 15px;
  align-items: start;
}

/* ▸ style.css L5426 */
.fde-cart-drawer__item-imglink {
  display: block;
  width: 100px;
}

/* ▸ style.css L5430 */
.fde-cart-drawer__item-img {
  width: 100%;
  height: auto;
  display: block;
  background: #f5f5f5;
}

/* ▸ style.css L5437 */
.fde-cart-drawer__item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ▸ style.css L5444 */
/* Title link — Spec Shopify: 15px "New York" #121212, NOT purple visited */
.fde-cart-drawer__item-title,
.fde-cart-drawer__item-title:link,
.fde-cart-drawer__item-title:visited,
.fde-cart-drawer__item-title:hover,
.fde-cart-drawer__item-title:focus,
.fde-cart-drawer__item-title:active {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  text-decoration: none !important;
  line-height: 1.3;
  margin: 0;
}

/* ▸ style.css L5460 */
/* Unit price below title — 14px Besley #121212BF, margin 6px 0 0 */
.fde-cart-drawer__item-unitprice {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: rgba(18, 18, 18, 0.75);
  margin: 6px 0 0;
  font-weight: 400;
}

/* ▸ style.css L5469 */
/* Options list — dt/dd 14px Besley #121212BF */
.fde-cart-drawer__item-options {
  margin: 6px 0 0;
  display: block;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: rgba(18, 18, 18, 0.75);
  line-height: 1.4;
}

/* ▸ style.css L5477 */
.fde-cart-drawer__item-options dt {
  display: inline;
  margin: 0;
  font-weight: 400;
}

/* ▸ style.css L5482 */
.fde-cart-drawer__item-options dd {
  display: inline;
  margin: 0 0 0 4px;
  font-weight: 400;
}

/* ▸ style.css L5487 */
.fde-cart-drawer__item-options dd::after {
  content: '';
  display: block;
  height: 2px;
}

/* ▸ style.css L5494 */
/* Quantity controls wrapper — Spec Shopify: 248×47, 16px Besley */
.fde-cart-drawer__item-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 4px;
  width: fit-content;
  margin-top: 12px;
  height: 47px;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 16px;
}

/* ▸ style.css L5506 */
.fde-cart-drawer__item-qty button {
  background: transparent;
  border: none;
  width: 40px;
  height: 100%;
  cursor: pointer;
  font-size: 18px;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  color: #121212;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ▸ style.css L5519 */
.fde-cart-drawer__item-qty button:hover { background: rgba(18, 18, 18, 0.04); }

/* ▸ style.css L5520 */
.fde-cart-drawer__item-qty span {
  min-width: 32px;
  text-align: center;
  font-size: 16px;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  color: #121212;
}

/* ▸ style.css L5528 */
/* Trash icon — Spec Shopify: span.svg-wrapper 20×20 color #112B3D navy */
.fde-cart-drawer__item-trash {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
  height: 100%;
  width: 47px !important;
  cursor: pointer;
  color: #112B3D !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  outline: none !important;
  box-shadow: none !important;
}

/* ▸ style.css L5543 */
.fde-cart-drawer__item-trash:hover { background: rgba(18, 18, 18, 0.04) !important; }

/* ▸ style.css L5544 */
.fde-cart-drawer__item-trash svg { color: #112B3D; }

/* ▸ style.css L5547 */
/* Shopify-style "This item has a minimum of 1" notice */
.fde-cart-drawer__item-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(18, 18, 18, 0.12), 0 0 0 1px rgba(18, 18, 18, 0.06);
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 13px;
  color: #121212;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ▸ style.css L5564 */
.fde-cart-drawer__item-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ▸ style.css L5568 */
.fde-cart-drawer__item-notice.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
}

/* ▸ style.css L5572 */
.fde-cart-drawer__item-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #E5A02E;
  color: #ffffff;
  flex-shrink: 0;
}

/* ▸ style.css L5583 */
.fde-cart-drawer__item-notice-text { display: inline-block; }

/* ▸ style.css L5586 */
/* Right side (line total) */
.fde-cart-drawer__item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: 0;
}

/* ▸ style.css L5593 */
.fde-cart-drawer__item-price {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: #121212;
}

/* ▸ style.css L5599 */
/* Footer (div.totals) — Spec Shopify: margin 10px 0 0, padding 20px 0 40px, 16px Besley #121212BF */
.fde-cart-drawer__footer {
  padding: 20px 0 40px;
  margin: 10px 0 0 !important;
  border-top: 1px solid rgba(18, 18, 18, 0.1);
  flex-shrink: 0;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 16px;
  color: rgba(18, 18, 18, 0.75);
}

/* ▸ style.css L5609 */
/* Subtotal row — "Estimated total" h2 + value */
.fde-cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  margin: 0 0 16px !important;
}

/* ▸ style.css L5617 */
/* h2.totals__total — Spec: 16px "New York" #121212, margin 5px 0 0 */
.fde-cart-drawer__subtotal > :first-child {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  margin: 5px 0 0 !important;
  line-height: 1;
}

/* ▸ style.css L5626 */
/* p.totals__total-value — Spec: 18px Besley #121212BF, margin 0 0 0 20px */
.fde-cart-drawer__subtotal > :last-child {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgba(18, 18, 18, 0.75) !important;
  margin: 0 0 0 20px !important;
}

/* ▸ style.css L5635 */
/* "Taxes, discounts and shipping calculated at checkout." disclaimer
   — Shopify spec: 13px Besley / rgba(18,18,18,0.6) / text-align center / margin 0 0 16px */
.fde-cart-drawer__disclaimer {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  color: rgba(18, 18, 18, 0.6) !important;
  text-align: center !important;
  margin: 0 15px 16px !important;
  line-height: 1.4 !important;
}

/* ▸ style.css L5644 */
/* Checkout button — Spec: 367×45 navy */
.fde-cart-drawer__checkout,
.fde-cart-drawer__checkout:link,
.fde-cart-drawer__checkout:visited,
.fde-cart-drawer__checkout:hover,
.fde-cart-drawer__checkout:focus,
.fde-cart-drawer__checkout:active {
  display: block;
  width: calc(100% - 30px);
  margin: 0 15px;
  text-align: center;
  height: 45px;
  line-height: 45px;
  padding: 0;
  background: var(--fde-navy, #112B3D) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  transition: opacity 0.2s;
  border: none !important;
  border-radius: 0;
  cursor: pointer;
}

/* ▸ style.css L5670 */
.fde-cart-drawer__checkout:hover { opacity: 0.88; }

/* ▸ style.css L5673 */
/* Body lock + scrollbar compensation when cart drawer open */
body.fde-cart-open { overflow: hidden; }

/* ▸ style.css L5675 */
@media (max-width: 640px) {
  .fde-cart-drawer__panel { max-width: 100vw; }
}

/* ▸ style.css L6258 */
/* La <ul> de items mantiene clases del drawer pero sobreescribimos padding
   horizontal (el drawer tenía 16px 15px porque el panel es estrecho). */
.fde-cart-page .fde-cart-drawer__items { padding: 8px 0 0; }

/* ▸ style.css L6259 */
.fde-cart-page .fde-cart-drawer__col-headers { padding: 0 0 12px; }

/* ▸ style.css L6262 */
/* Hide unit price debajo del título — tanto en cart page como en drawer.
   El line total a la derecha ya muestra el precio, no hace falta duplicarlo. */
.fde-cart-drawer__item-unitprice { display: none !important; }

/* ▸ style.css L6264 */
/* Empty state full-width en cart page */
.fde-cart-page .fde-cart-drawer__empty { padding: 80px 24px; flex: 1; }

/* ▸ style.css L6295 */
/* ─── Cart item layout en mobile — SOLO cart PAGE (drawer queda como estaba)
   En 375-400px viewport con la cart page wrapper de 12px padding, queremos la
   imagen pegada al borde izquierdo y más ancho para título/opciones. */
@media (max-width: 749px) {
  .fde-cart-page .fde-cart-drawer__items { padding: 8px 0 !important; }
  .fde-cart-page .fde-cart-drawer__item {
      grid-template-columns: 72px 1fr auto;
      gap: 10px;
      margin: 0;
      padding: 16px 0;
    }
  .fde-cart-page .fde-cart-drawer__item-imglink { width: 72px; }
  .fde-cart-page .fde-cart-drawer__item-title,
    .fde-cart-page .fde-cart-drawer__item-title:link,
    .fde-cart-page .fde-cart-drawer__item-title:visited { font-size: 14px !important; line-height: 1.25; }
  .fde-cart-page .fde-cart-drawer__item-options { font-size: 13px; }
  .fde-cart-page .fde-cart-drawer__item-price { font-size: 14px; }
  .fde-cart-page .fde-cart-drawer__col-headers { padding-left: 0; padding-right: 0; }
}

/* ▸ style.css L6744 */
/* Cart drawer: panel acepta pan vertical interno (para que se vea la lista de
   items si hay muchos). El body interno scrollea. */
html.fde-scroll-locked .fde-cart-drawer__panel { touch-action: pan-y !important; }

/* ▸ style.css L6745 */
html.fde-scroll-locked .fde-cart-drawer__body { touch-action: pan-y !important; }

/* ▸ style.css L8778 */
/* ═══════════════════════════════════════════════════════════════════════════
   TIPOGRAFIA DEL CARRITO Y DEL MENU HAMBURGUESA   (2026-09-04)
   ═══════════════════════════════════════════════════════════════════════════
   Los dos paneles quedaban en la tipografia vieja mientras el resto del sitio
   ya era Montserrat: el carrito con los titulos en Cardo y los datos en Besley,
   y el menu con los items en Cardo.

   SOLO la familia. Ni un tamano, ni un color, ni un peso, ni un espaciado.

   ALCANCE: los dos paneles propios (.fde-cart-drawer y .fde-menu-drawer), que
   viven en functions.php. Nada mas del sitio los usa.

   Se excluye <svg> y su contenido: los iconos (-, +, tacho, X) son SVG y no
   tienen tipografia que cambiar.

   No se tocan ::before/::after con un selector universal A PROPOSITO: eso
   pisaria las tipografias de iconos. Los unicos pseudo-elementos con texto de
   estos paneles son los placeholders, cubiertos aparte abajo.
   ═══════════════════════════════════════════════════════════════════════════ */
body .fde-cart-drawer,
body .fde-cart-drawer *:not(svg):not(svg *),
body .fde-menu-drawer,
body .fde-menu-drawer *:not(svg):not(svg *) {
  font-family: var(--fde-font-ui) !important;
}

/* ▸ style.css L8784 */
body .fde-cart-drawer ::placeholder,
body .fde-menu-drawer ::placeholder {
  font-family: var(--fde-font-ui) !important;
}

/* ▸ style.css L8805 */
/* ═══════════════════════════════════════════════════════════════════════════
   1 · CARRITO: los 4 nodos que quedaron fuera de Montserrat   (2026-09-04)
   ═══════════════════════════════════════════════════════════════════════════
   La regla general del cajon (body .fde-cart-drawer *) dejaba 4 elementos en la
   tipografia vieja: el titulo del item y el "Estimated total" en New York, y el
   monto y el boton Check out en Besley.

   ⚠️ Por que fallaba y por que esta regla si gana: la declaracion que competia
   NO es un `font-family` sino la abreviatura `font:` — que fija la familia
   entera y no aparece al buscar "font-family" en las hojas. Con `!important` de
   los dos lados manda la especificidad, y `*` (0,1,0 + el :not) perdia. Con dos
   clases (0,2,0) gana. Comprobado en el navegador antes de subirlo: la familia
   cambia y el tamano, el peso y el color quedan idénticos.

   SOLO la familia.
   ═══════════════════════════════════════════════════════════════════════════ */
body .fde-cart-drawer .fde-cart-drawer__item-title,
body .fde-cart-drawer .fde-cart-drawer__subtotal-label,
body .fde-cart-drawer .fde-cart-drawer__subtotal-value,
body .fde-cart-drawer .fde-cart-drawer__checkout {
  font-family: var(--fde-font-ui) !important;
}

/* ▸ style.css L8905 */
/* los que traen pseudo-clases con más peso que lo de arriba */
body .fde-cart-page .fde-cart-drawer__item-title,
body .fde-cart-page .fde-cart-drawer__item-title:link,
body .fde-cart-page .fde-cart-drawer__item-title:visited,
body .fde-cart-page .fde-cart-drawer__item-title:hover,
body .fde-cart-page .fde-cart-drawer__item-title:focus,
body .fde-cart-page .fde-cart-drawer__item-title:active,
body .fde-cart-page .fde-cart-drawer__checkout,
body .fde-cart-page .fde-cart-drawer__checkout:link,
body .fde-cart-page .fde-cart-drawer__checkout:visited,
body .fde-cart-page .fde-cart-drawer__checkout:hover,
body .fde-cart-page .fde-cart-drawer__checkout:focus,
body .fde-cart-page .fde-cart-drawer__checkout:active,
body .fde-cart-page .fde-cart-drawer__continue,
body .fde-cart-page .fde-cart-drawer__continue:hover,
body .fde-cart-page .fde-cart-drawer__continue:focus,
body .fde-cart-page .fde-cart-drawer__continue:active,
body .fde-cart-page .fde-cart-drawer__subtotal > :first-child,
body .fde-cart-page .fde-cart-drawer__subtotal > :last-child { font-family: var(--fde-font-ui) !important; }


/* ════════════════════════════════════════════════════════════════════
   PORTADO DE FAMILYCRESTS · el bloque de reseñas
   ════════════════════════════════════════════════════════════════════

   🔴 ESTAS REGLAS NO ESTABAN EN home-v2.css. El bloque de reseñas usa clases
   SIN prefijo —testimonial-card, carousel-inner, rv-stars—, heredadas del tema
   de Shopify del que FamilyCrests importó su sitio, y viven en su style.css
   general de 313 kB. Al portar sólo home-v2.css, el marcado salía correcto y
   las tarjetas se apilaban a lo largo en vez de ir en carrusel.

   Se extrajeron por selector, no copiando el tramo del archivo: en ese tramo
   conviven reglas del carrito, del menú y de la tienda.

   ⚠️ Si alguna vez falta estilo en una pieza portada, el primer lugar donde
   mirar es si sus clases llevan prefijo. Las que no lo llevan vienen de la
   herencia de Shopify y su CSS está en otro archivo.
   ════════════════════════════════════════════════════════════════════ */

/* Hide WC star rating on loop (Shopify Dawn doesn't show stars per card) */
.fde-collection-grid ul.products li.product .star-rating,
.fde-collection-grid ul.products li.product .star-rating,
.fde-collection-grid ul.products li.product .woocommerce-product-rating,
.fde-collection-grid ul.products li.product .woocommerce-product-rating {
  display: none !important;
}

/* ============================================================
   Testimonials carousel
   ============================================================ */
.fde-testimonials {
  max-width: 900px;
  margin: 56px auto 80px;
  padding: 0 24px;
  text-align: center;
}

.fde-testimonials-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 0;
}

.fde-testimonials-carousel::-webkit-scrollbar { display: none; }

/* Home page sections: break out of Astra's .entry-content max-width
   to span the FULL viewport width like Shopify reference does. */
.home .entry-content[data-ast-blocks-layout] > .fde-home-hero,
.home .entry-content[data-ast-blocks-layout] > .fde-home-mobile-promo,
.home .entry-content[data-ast-blocks-layout] > .fde-home-rich-text,
.home .entry-content[data-ast-blocks-layout] > .fde-home-multirow,
.home .entry-content[data-ast-blocks-layout] > #fde-desktop-ring-promo,
.home .entry-content[data-ast-blocks-layout] > .fde-home-tutorial,
.home .entry-content[data-ast-blocks-layout] > .fde-home-featured,
.home .entry-content[data-ast-blocks-layout] > .fde-home-collection,
.home .entry-content[data-ast-blocks-layout] > .fde-home-icons-list,
.home .entry-content[data-ast-blocks-layout] > .fde-faqs,
.home .entry-content[data-ast-blocks-layout] > .fde-testimonials,
.home .entry-content[data-ast-blocks-layout] > .testimonial-section-apolo,
.home .entry-content[data-ast-blocks-layout] > #fde-trust-badges-desktop,
.home .entry-content[data-ast-blocks-layout] > .woocommerce,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-hero,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-mobile-promo,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-rich-text,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-multirow,
.page-id-29 .entry-content[data-ast-blocks-layout] > #fde-desktop-ring-promo,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-tutorial,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-featured,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-collection,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-icons-list,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-faqs,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-testimonials,
.page-id-29 .entry-content[data-ast-blocks-layout] > .testimonial-section-apolo,
.page-id-29 .entry-content[data-ast-blocks-layout] > #fde-trust-badges-desktop,
.page-id-29 .entry-content[data-ast-blocks-layout] > .woocommerce {
  max-width: 100vw !important;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* "You may also like" carousel en PDP — full-bleed scroll-snap horizontal.
   El ul.products rompe el max-width centrado del container padre y ocupa
   100vw (viewport completo) usando margin trick. Así cuando deslizás en mobile
   los productos aparecen DESDE el borde de la pantalla, no desde el gap blanco
   del content area centrado. */
.fde-collection-grid.single-product .related.products,
.fde-collection-grid.single-product .upsells.products {
  display: block !important;
}

/* ============================================================
   TANDA 4 — testimonial-section-apolo (reviews_full.liquid replica)
   Source: sections/reviews_full.liquid del theme export Shopify.
   Single card visible at a time, prev/next + dots + autoplay 5s + swipe.
   ============================================================ */
.testimonial-section-apolo * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.testimonial-section-apolo {
  /* Shopify exact: section is ~333px total. Compact padding. */
  padding: 20px 10px;
}

.testimonial-section-apolo .container {
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-section-apolo .testimonial-container {
  position: relative;
  padding: 0 1rem;
}

.testimonial-section-apolo .carousel {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.testimonial-section-apolo .carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.testimonial-section-apolo .testimonial-card {
  width: 100%;
  flex-shrink: 0;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.testimonial-section-apolo .card-content {
  padding: 1.25rem;
}

@media (min-width: 768px) {
.testimonial-section-apolo .card-content { padding: 1.25rem 1.75rem; }
}

.testimonial-section-apolo .testimonial-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
.testimonial-section-apolo .testimonial-content {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }
}

.testimonial-section-apolo .avatar-container { flex-shrink: 0; }

.testimonial-section-apolo .avatar,
.testimonial-section-apolo .placeholder-avatar {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.testimonial-section-apolo .placeholder-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  color: white;
}

.testimonial-section-apolo .testimonial-body {
  flex: 1;
  text-align: center;
}

@media (min-width: 768px) {
.testimonial-section-apolo .testimonial-body { text-align: left; }
}

.testimonial-section-apolo .rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
.testimonial-section-apolo .rating { justify-content: flex-start; }
}

/* Stars rating — Shopify exact: 17px Times serif, #121212BF (75% alpha navy) */
.testimonial-section-apolo .rating,
.testimonial-section-apolo .rv-stars,
.testimonial-section-apolo .stars {
  font-size: 17px !important;
  font-family: Times, "Times New Roman", serif !important;
  color: rgba(18, 18, 18, 0.75) !important;
  line-height: 1 !important;
}

/* Quote — Shopify exact: 12.5px Besley serif italic, #334155, margin-bottom 15px */
.testimonial-section-apolo .quote,
.testimonial-section-apolo blockquote.quote {
  font-style: italic !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 12.5px !important;
  color: #334155 !important;
  margin: 0 0 15px !important;
  line-height: 1.7 !important;
}

/* Author name h4 — Shopify exact: 11.25px New York, #1E293B, margin-bottom 2.5px */
.testimonial-section-apolo .author-name,
.testimonial-section-apolo h4.author-name {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif !important;
  font-size: 11.25px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  margin: 0 0 2.5px !important;
}

/* Location p.author-info — Shopify exact: 16px Besley serif, #64748B */
.testimonial-section-apolo .author-location,
.testimonial-section-apolo .author-info,
.testimonial-section-apolo p.author-info {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  color: #64748B !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

.testimonial-section-apolo .carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

/* Hide dots pagination on desktop — Shopify only shows prev/next arrows */
@media (min-width: 750px) {
.testimonial-section-apolo .carousel-dots { display: none !important; }
}

.testimonial-section-apolo .carousel-button {
  /* Shopify exact: 25×25 round buttons, #FFF bg, #000 icon, 13.33px Arial */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px !important;
  height: 25px !important;
  padding: 0 !important;
  border-radius: 50%;
  background-color: #FFFFFF !important;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s;
  color: #000000 !important;
  font-family: Arial, sans-serif;
  font-size: 13.3333px;
  line-height: 1;
}

.testimonial-section-apolo .carousel-button svg {
  width: 14px;
  height: 14px;
}

.testimonial-section-apolo .carousel-button:hover { background-color: #f8fafc !important; }

.testimonial-section-apolo .carousel-button:focus,
.testimonial-section-apolo .carousel-button:focus-visible,
.testimonial-section-apolo .carousel-button:active {
  outline: none !important;
  box-shadow: none !important;
  background-color: #FFFFFF !important;
}

.testimonial-section-apolo .carousel-dots {
  display: flex;
  gap: 0.5rem;
  margin: 0 1rem;
}

.testimonial-section-apolo .dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: #cbd5e1;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* ─── Testimonial carousel: clipping en el WRAPPER, no en el inner ──────
   IMPORTANTE: overflow-hidden tiene que estar en .carousel (el wrapper),
   NUNCA en .carousel-inner ni en #testimonialCarousel-* (el inner es flex
   container de 600% de ancho — overflow:hidden ahí clipea los cards 2-6
   antes de que el translateX los pueda traer a la vista). */
.testimonial-container {
  overflow-x: hidden;
}

.testimonial-section-apolo .carousel {
  overflow: hidden !important;
}

@media (max-width: 749px) {
/* ── A. Ocultar secciones desktop-only en mobile (mirror Shopify) ──────── */
  body.home .fde-home-rich-text--arms,
  body.home .fde-home-multirow,
  body.home .fde-home-tutorial,
  body.home .fde-home-featured,
  body.home .fde-home-rich-text--arrives,
  body.home .fde-home-icons-list,
  body.home .fde-home-rich-text--trusted,
  body.home .testimonial-section-apolo,
  body.home #fde-reviews {
    display: none !important;
  }
/* ── C. Testimonial carousel — clipping en wrapper (NO en inner) ────── */
  .testimonial-container { overflow-x: hidden !important; }
/* ── O. Product page (PDP) en mobile — ocultar thumbnails del gallery carousel.
         Existing rule tiene `.flex-control-thumbs.has-overflow` (4 classes); usamos
         5 classes para ganarle. */
  html body.single-product .woocommerce-product-gallery .flex-control-nav,
  html body.single-product .woocommerce-product-gallery .flex-control-thumbs,
  html body.single-product .woocommerce-product-gallery .flex-control-thumbs.has-overflow,
  html body.fde-funnel-product-wrap .woocommerce-product-gallery .flex-control-thumbs,
  html body.fde-funnel-product-wrap .woocommerce-product-gallery .flex-control-thumbs.has-overflow,
  /* Hide ALSO main image carousel arrows (flex-direction-nav + flex-prev/next)
     AND the thumb-strip arrows (fde-thumbs-arrow) */
  html body.single-product .woocommerce-product-gallery .flex-direction-nav,
  html body.single-product .woocommerce-product-gallery .flex-prev,
  html body.single-product .woocommerce-product-gallery .flex-next,
  html body.single-product .fde-thumbs-arrow,
  html body.single-product .fde-thumbs-arrow--prev,
  html body.single-product .fde-thumbs-arrow--next {
    display: none !important;
  }
/* Hide the original WC product title AND the custom fde-home-featured__title
     + reviews block from the product mu-plugin (we render hpt-title + hpt-stars-row
     above the gallery instead — see .hpt-wrap). Also hide the .hg-badge (90-Day
     Satisfaction Guarantee) that lives inside the product card — the funnel page
     has its own guarantee section at the bottom, so the in-card one is redundant.
     Also hide section.related (WC's "You may also like" carousel) — funnels should
     not cross-sell other products. */
  body .fde-funnel-product-wrap .product_title,
  body .fde-funnel-product-wrap h1.entry-title,
  body .fde-funnel-product-wrap .product-title,
  body .fde-funnel-product-wrap .fde-home-featured__title,
  body .fde-funnel-product-wrap .fde-home-featured__reviews,
  body .fde-funnel-product-wrap .hg-badge,
  body .fde-funnel-product-wrap section.related,
  body .fde-funnel-product-wrap .related.products,
  /* In-card "Only X family spots left today!" pill from familycrests-product-
     content.php (only rendered for product 136). On the funnel we already
     show a top spots pill (.fde-funnel-spots) right below the price, so the
     in-card one is a duplicate. */
  body .fde-funnel-product-wrap .fde-spots,
  /* Section partial heritage-related-products.php renders a SECOND "You may
     also like" block OUTSIDE .fde-funnel-product-wrap. Hide it on funnel pages. */
  body.fde-funnel-with-header .fde-funnel-related-wrap,
  /* heritage-extra-content-origins.php / heritage-extra-content.php render a
     legacy .hx-faq-section that duplicates the .fde-faqs above (the .fde-faqs is
     the canonical one). Hide the legacy duplicate. */
  body.fde-funnel-with-header .hx-faq-section {
    display: none !important;
  }
/* Hide the funnel-specific UI bits that don't apply to upsells, plus the
     heavy marketing / FAQ / testimonial / rich-text content that ships with the
     standard product page render. Upsells stay slim: gallery + title + price +
     variants + ADD TO CART. */
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .hg-badge,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .fde-spots,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .fde-funnel-spots,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .fde-funnel-cd,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .fde-funnel-limited,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .fde-extra-slots-wrap,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap section.related,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .related.products,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .fde-marketing-sections,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .fde-marketing-section,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .fde-faqs,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .fde-home-rich-text,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .testimonial-section-apolo,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .fde-testimonials,
  body.fde-funnel-with-header .fde-funnel-upsell-wrap .fde-accordion-product {
    display: none !important;
  }
/* "You may also like" (related products) — horizontal scroll carousel en mobile,
     no grid single column. Misma técnica que home featured carousel. */
  html body.single-product .related.products ul.products,
  html body.single-product .related ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px !important;
    margin: 0 !important;
    gap: 0 !important;
    box-sizing: border-box;
  }
/* Testimonial carousel reviews — match Shopify exact:
     - .carousel container con overflow: hidden
     - .carousel-inner con display: flex + transition: transform 0.5s
     - Cada .testimonial-card width: 100%; flex-shrink: 0
     - JS controla navigation via translateX(-index * 100%)
     - Swipe via touchstart/touchend events */
  html body.single-product .testimonial-section-apolo,
  html body.fde-funnel-product-wrap .testimonial-section-apolo {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 16px 16px 32px !important;
    box-sizing: border-box;
  }
html body.single-product .testimonial-section-apolo .testimonial-container,
  html body.fde-funnel-product-wrap .testimonial-section-apolo .testimonial-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    height: auto !important;
    padding: 0 !important;
    position: relative;
  }
html body.single-product .testimonial-section-apolo .carousel,
  html body.fde-funnel-product-wrap .testimonial-section-apolo .carousel {
    overflow: hidden !important;
    position: relative;
  }
html body.single-product .testimonial-section-apolo .carousel-inner,
  html body.fde-funnel-product-wrap .testimonial-section-apolo .carousel-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    transition: transform 0.5s ease-in-out;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    scroll-snap-type: none !important;
  }
html body.single-product .testimonial-section-apolo .testimonial-card,
  html body.fde-funnel-product-wrap .testimonial-section-apolo .testimonial-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    scroll-snap-align: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA DE LAS PÁGINAS DE PRODUCTO · una sola familia   (2026-09-04)
   ═══════════════════════════════════════════════════════════════════════════
   Medido en /product/the-full-family-package-limited-edition/ antes del cambio:
   SIETE familias conviviendo en el contenido — Besley ×131, Inter ×22,
   New York ×18, Montserrat ×16, Times ×10, Cardo ×9 y ui-sans-serif ×2. Las dos
   últimas ni siquiera son de la marca: ui-sans-serif es la que ponga el sistema
   operativo del visitante, y Times aparece como respaldo de algo que no carga.
   El mismo desorden en todos los productos físicos.
   (El Heritage Volume ya venía en Montserrat ×101: usa la plantilla nueva.)

   Es la regla escrita del sistema visual: UNA SOLA FAMILIA, cambia el PESO y no
   la fuente.

   ⚠️ SÓLO la familia. Ni un tamaño, ni un color, ni un peso.

   ⚠️ ALCANCE: el .ast-article-single de las páginas de producto. Verificado que
      TODO el contenido vive ahí —summary, marketing, FAQs, reseñas,
      relacionados— y que la CABECERA y el PIE quedan afuera: son chrome del
      sitio, compartido con todas las páginas, y no entran en este pedido.

   ⚠️ EL FUNNEL NO ENTRA: su body no es single-product (verificado), aunque
      contiene siete .ast-article-single de los [product_page] embebidos. El
      discriminante es la clase del BODY, no el contenedor.

   🔴 SE EXCLUYEN LAS ESTRELLAS (.rating, .rv-stars, .fde-home-featured__stars).
      El carácter ★ (U+2605) no existe en ninguna de estas tipografías: siempre
      cae a un respaldo del sistema. Cambiar la familia declarada cambia CUÁL
      respaldo se usa y con eso el dibujo y el ancho de la calificación. Se dejan
      exactamente como están.

   ⚠️ No se tocan los pseudo-elementos: los únicos visibles con texto son los
      chevrones › del acordeón, en Arial. Eso es un glifo, no tipografía.
   ═══════════════════════════════════════════════════════════════════════════ */
body.single-product .ast-article-single,
body.single-product .ast-article-single *:not(svg):not(svg *):not(.rating):not(.rating *):not(.rv-stars):not(.fde-home-featured__stars) {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}


/* ════════════════════════════════════════════════════════════════════
   PORTADO DE FAMILYCRESTS · Our Collection y la grilla de tarjetas
   ════════════════════════════════════════════════════════════════════
   Extraído por selector de su style.css de 313 kB, no copiando un tramo: en
   ese archivo conviven las reglas de la tienda con las del carrito y el menú.
   La clase .fde-collection-grid la pone functions.php en el <body> de la
   portada, los archivos de categoría, la tienda, las fichas y la búsqueda: es
   la que hace que la tarjeta se vea igual en los seis lugares.
   ════════════════════════════════════════════════════════════════════ */

/* ============================================================
   WC product card override — Shopify Dawn parity for collection grid
   ============================================================ */
.fde-collection-grid ul.products li.product,
.fde-collection-grid ul.products li.product,
.woocommerce-archive ul.products li.product {
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  position: relative;
}

/* Hide Astra-injected category label + Astra icon button on loop cards */
.fde-collection-grid ul.products li.product .ast-woo-product-category,
.fde-collection-grid ul.products li.product .ast-on-card-button {
  display: none !important;
}

/* Hide the secondary WC "Add to cart" / "Select options" text button that
   Astra renders BELOW the price block. Shopify Dawn cards never show a button. */
.fde-collection-grid ul.products li.product .button,
.fde-collection-grid ul.products li.product .add_to_cart_button,
.fde-collection-grid ul.products li.product .product_type_variable,
.fde-collection-grid ul.products li.product .product_type_simple,
.fde-collection-grid ul.products li.product .wp-block-button,
.fde-collection-grid ul.products li.product .added_to_cart {
  display: none !important;
}

/* Sale badge: HIDDEN — Shopify Dawn does not show this badge on cards */
.fde-collection-grid ul.products li.product .ast-onsale-card,
.fde-collection-grid ul.products li.product .ast-onsale-card,
.fde-collection-grid ul.products li.product .onsale,
.fde-collection-grid ul.products li.product .onsale,
.woocommerce ul.products li.product .ast-onsale-card,
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .ast-on-card-button {
  display: none !important;
}

/* Card image wrapper — portrait 4:5 (Shopify Dawn default), contain (no crop) */
.fde-collection-grid ul.products li.product .astra-shop-thumbnail-wrap,
.fde-collection-grid ul.products li.product .astra-shop-thumbnail-wrap,
.fde-collection-grid ul.products li.product .woocommerce-loop-product__link,
.fde-collection-grid ul.products li.product .woocommerce-loop-product__link {
  position: relative;
  display: block;
  background: #FFFFFF;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.fde-collection-grid ul.products li.product .astra-shop-thumbnail-wrap img,
.fde-collection-grid ul.products li.product .woocommerce-loop-product__link img,
.fde-collection-grid ul.products li.product img[class*="attachment-woocommerce"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  transition: transform 0.6s ease;
}

/* Hover zoom: subtle scale on the image when hovering the card */
.fde-collection-grid ul.products li.product:hover .astra-shop-thumbnail-wrap img,
.fde-collection-grid ul.products li.product:hover .woocommerce-loop-product__link img,
.fde-collection-grid ul.products li.product:hover img[class*="attachment-woocommerce"] {
  transform: scale(1.03);
}

/* Title — Cardo serif center, weight 400 — 13px tight to image */
.fde-collection-grid ul.products li.product .woocommerce-loop-product__title,
.fde-collection-grid ul.products li.product .woocommerce-loop-product__title {
  font-family: "Cardo", Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  text-align: center !important;
  margin: 4px 0 2px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  /* padding-bottom: 6px gives the underline room to draw inside the H2 box.
     Without this, the underline (drawn below text baseline) gets clipped by
     `overflow: hidden` which is needed for the ellipsis truncation. */
  padding: 0 0 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Force title link to BLACK in all states — kill Astra default blue */
.fde-collection-grid ul.products li.product a,
.fde-collection-grid ul.products li.product a,
.fde-collection-grid ul.products li.product a:link,
.fde-collection-grid ul.products li.product a:link,
.fde-collection-grid ul.products li.product a:visited,
.fde-collection-grid ul.products li.product a:visited,
.fde-collection-grid ul.products li.product a:hover,
.fde-collection-grid ul.products li.product a:hover,
.fde-collection-grid ul.products li.product a:focus,
.fde-collection-grid ul.products li.product a:focus {
  color: #121212 !important;
  text-decoration: none !important;
}

.fde-collection-grid ul.products li.product a .woocommerce-loop-product__title,
.fde-collection-grid ul.products li.product a .woocommerce-loop-product__title,
.fde-collection-grid ul.products li.product a:visited .woocommerce-loop-product__title,
.fde-collection-grid ul.products li.product a:visited .woocommerce-loop-product__title {
  color: #121212 !important;
}

/* Underline product title on hover — SOLO en devices con mouse real
   (`@media (hover: hover)`). En mobile/touch, `:hover` se queda "sticky"
   después del tap y produce un subrayado fantasma que confunde al user.
   Esta regla solo se evalúa en cursor-driven UAs. */
@media (hover: hover) {
.fde-collection-grid ul.products li.product:hover .woocommerce-loop-product__title,
  .fde-collection-grid ul.products li.product:focus-within .woocommerce-loop-product__title,
  .fde-collection-grid ul.products li.product:hover a .woocommerce-loop-product__title,
  .fde-collection-grid ul.products li.product a:hover .woocommerce-loop-product__title,
  .fde-collection-grid ul.products li.product:hover .ast-loop-product__link .woocommerce-loop-product__title,
  .fde-collection-grid ul.products li.product:hover .woocommerce-LoopProduct-link .woocommerce-loop-product__title {
    color: #121212 !important;
    text-decoration-line: underline !important;
    text-decoration-color: #121212 !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
  }
}

/* Price block — center, sale price larger black, compare-at smaller RED strike */
.fde-collection-grid ul.products li.product .price,
.fde-collection-grid ul.products li.product .price {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin: 0 !important;
  text-align: center !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
}

.fde-collection-grid ul.products li.product .price del,
.fde-collection-grid ul.products li.product .price del,
.fde-collection-grid ul.products li.product .price del .amount,
.fde-collection-grid ul.products li.product .price del .amount {
  text-decoration: line-through !important;
  color: #BD1700 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.fde-collection-grid ul.products li.product .price ins,
.fde-collection-grid ul.products li.product .price ins,
.fde-collection-grid ul.products li.product .price ins .amount,
.fde-collection-grid ul.products li.product .price ins .amount,
.fde-collection-grid ul.products li.product .price ins .fde-from-prefix,
.fde-collection-grid ul.products li.product .price ins .fde-from-prefix {
  text-decoration: none !important;
  color: #121212 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  background: transparent !important;
}

.fde-collection-grid ul.products li.product .price > .amount,
.fde-collection-grid ul.products li.product .price > .amount {
  color: #121212 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* Hide WC star rating on loop (Shopify Dawn doesn't show stars per card) */
.fde-collection-grid ul.products li.product .star-rating,
.fde-collection-grid ul.products li.product .star-rating,
.fde-collection-grid ul.products li.product .woocommerce-product-rating,
.fde-collection-grid ul.products li.product .woocommerce-product-rating {
  display: none !important;
}

.fde-home-h2 {
  font-family: var(--fde-font-heading);
  color: var(--fde-navy);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  margin: 0 0 12px;
  text-align: center;
}

/* Home page sections: break out of Astra's .entry-content max-width
   to span the FULL viewport width like Shopify reference does. */
.home .entry-content[data-ast-blocks-layout] > .fde-home-hero,
.home .entry-content[data-ast-blocks-layout] > .fde-home-mobile-promo,
.home .entry-content[data-ast-blocks-layout] > .fde-home-rich-text,
.home .entry-content[data-ast-blocks-layout] > .fde-home-multirow,
.home .entry-content[data-ast-blocks-layout] > #fde-desktop-ring-promo,
.home .entry-content[data-ast-blocks-layout] > .fde-home-tutorial,
.home .entry-content[data-ast-blocks-layout] > .fde-home-featured,
.home .entry-content[data-ast-blocks-layout] > .fde-home-collection,
.home .entry-content[data-ast-blocks-layout] > .fde-home-icons-list,
.home .entry-content[data-ast-blocks-layout] > .fde-faqs,
.home .entry-content[data-ast-blocks-layout] > .fde-testimonials,
.home .entry-content[data-ast-blocks-layout] > .testimonial-section-apolo,
.home .entry-content[data-ast-blocks-layout] > #fde-trust-badges-desktop,
.home .entry-content[data-ast-blocks-layout] > .woocommerce,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-hero,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-mobile-promo,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-rich-text,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-multirow,
.page-id-29 .entry-content[data-ast-blocks-layout] > #fde-desktop-ring-promo,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-tutorial,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-featured,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-collection,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-home-icons-list,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-faqs,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fde-testimonials,
.page-id-29 .entry-content[data-ast-blocks-layout] > .testimonial-section-apolo,
.page-id-29 .entry-content[data-ast-blocks-layout] > #fde-trust-badges-desktop,
.page-id-29 .entry-content[data-ast-blocks-layout] > .woocommerce {
  max-width: 100vw !important;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* === SECTION 7: Our Collection === */
.fde-home-collection {
  padding: 64px 24px 16px;
  background: var(--fde-white);
  text-align: center;
}

.fde-home-collection__sub {
  font-family: var(--fde-font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fde-text-soft);
  margin-top: 4px;
}

/* WC products grid (home + "Our Collection" archive) — all visual rules are
   defined ABOVE via `.fde-collection-grid ul.products li.product...`
   selectors, applied via body class added in functions.php to home + archive.
   This keeps the look 100% consistent (no duplicated rules drifting). */
.fde-collection-grid ul.products {
  max-width: 1240px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

/* Hide WC + Astra archive chrome on ANY page that has the fde-collection-grid
   body class: WC page title, breadcrumbs, result count, sort dropdown, term
   description, sale flash, Astra archive title bar. Keeps every grid page
   visually identical to the home section. */
.fde-collection-grid .woocommerce-products-header,
.fde-collection-grid .woocommerce-result-count,
.fde-collection-grid .woocommerce-ordering,
.fde-collection-grid .woocommerce-breadcrumb,
.fde-collection-grid .term-description,
.fde-collection-grid .ast-archive-description,
.fde-collection-grid ul.products li.product .onsale {
  display: none !important;
}

/* Page title visibility: hide on archives (handled by our-collection custom
   template), but DON'T touch single product pages (they need the H1 title) */
.fde-collection-grid.archive .page-title,
.fde-collection-grid.tax-product_cat .page-title,
.fde-collection-grid.tax-product_tag .page-title,
.fde-collection-grid.search .page-title {
  display: none !important;
}

/* "Our Collection" / All Products archive: tighten the gap between the
   header and the "Our collection" title. The archive page has no entry
   content above the section, so the home's larger top padding looks too airy. */
.tax-product_cat.fde-collection-grid .ast-woocommerce-container,
.tax-product_cat.fde-collection-grid .site-content > .ast-container {
  padding-top: 0 !important;
}

.tax-product_cat.fde-collection-grid .fde-home-collection {
  padding-top: 16px !important;
  padding-bottom: 0 !important;
}

/* "Our Collection" / All Products archive: wider grid container (1654px max)
   to match Shopify reference. Home stays at default 1240px. Only applies to
   the category archive body class.
   Astra ships with a 1240px ceiling on `.ast-woo-shop-archive .ast-container`
   that we need to lift first, otherwise the inner grid stays capped. */
.tax-product_cat.fde-collection-grid .site-content > .ast-container,
.tax-product_cat.fde-collection-grid .ast-woocommerce-container,
.tax-product_cat.fde-collection-grid .fde-our-collection-page {
  max-width: 1654px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.tax-product_cat.fde-collection-grid ul.products,
.tax-product_cat.fde-collection-grid .products {
  max-width: 1654px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   HOME "Our Collection" — DESKTOP-ONLY reorder + add Hat/Tee.
   Mobile (<750px): Hat(1356) + Tee(59) hidden, original 9-product
   order preserved (untouched). Desktop (>=750px): CSS order =
   Origins, LE, Only Coat, Dual, Signet, Women's, Pendant, Banner,
   Hat, Tee, Legacy. Scoped to body.page-id-29 so the
   /product-category/our-collection/ archive is NOT affected. */
@media (max-width: 749px) {
body.page-id-29.fde-collection-grid ul.products li.product.post-1356,
  body.page-id-29.fde-collection-grid ul.products li.product.post-59 {
    display: none !important;
  }
}

@media (min-width: 750px) {
body.page-id-29.fde-collection-grid ul.products li.product.post-170  { order: 1; }
body.page-id-29.fde-collection-grid ul.products li.product.post-136  { order: 2; }
body.page-id-29.fde-collection-grid ul.products li.product.post-103  { order: 3; }
body.page-id-29.fde-collection-grid ul.products li.product.post-48   { order: 4; }
body.page-id-29.fde-collection-grid ul.products li.product.post-106  { order: 5; }
body.page-id-29.fde-collection-grid ul.products li.product.post-178  { order: 6; }
body.page-id-29.fde-collection-grid ul.products li.product.post-88   { order: 7; }
body.page-id-29.fde-collection-grid ul.products li.product.post-54   { order: 8; }
body.page-id-29.fde-collection-grid ul.products li.product.post-1356 { order: 9; }
body.page-id-29.fde-collection-grid ul.products li.product.post-59   { order: 10; }
body.page-id-29.fde-collection-grid ul.products li.product.post-1313 { order: 11; }
}

/* "Related products" heading on single product page — match Shopify look */
.fde-collection-grid.single-product .related.products > h2,
.fde-collection-grid.single-product .upsells.products > h2,
.fde-collection-grid.woocommerce-cart .cross-sells > h2 {
  font-family: "New York", "Iowan Old Style", Baskerville, "Times New Roman", serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  text-align: center !important;
  margin: 60px 0 24px !important;
  letter-spacing: 0 !important;
}

/* "You may also like" carousel en PDP — full-bleed scroll-snap horizontal.
   El ul.products rompe el max-width centrado del container padre y ocupa
   100vw (viewport completo) usando margin trick. Así cuando deslizás en mobile
   los productos aparecen DESDE el borde de la pantalla, no desde el gap blanco
   del content area centrado. */
.fde-collection-grid.single-product .related.products,
.fde-collection-grid.single-product .upsells.products {
  display: block !important;
}

.fde-collection-grid.single-product .related.products ul.products,
.fde-collection-grid.single-product .upsells.products ul.products {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  padding: 8px 0 16px !important;
  /* Full-bleed: rompe el max-width del container padre, ocupa 100vw */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.fde-collection-grid.single-product .related.products ul.products::-webkit-scrollbar,
.fde-collection-grid.single-product .upsells.products ul.products::-webkit-scrollbar {
  display: none;
}

/* li.product: scroll-snap + flex-shrink siempre. Width SOLO en desktop
   (mobile tiene su propio width:220px ya seteado en @media max-width 749px).
   Sin width explícita en desktop, los items toman natural 25% del ul.products
   que es 100vw → ~400px por card en monitores grandes = enorme + no parece
   carrusel. Forzamos 280px que matchea spec Shopify (~4 cards visibles en 1280
   viewport con horizontal scroll para más). */
.fde-collection-grid.single-product .related.products ul.products li.product,
.fde-collection-grid.single-product .upsells.products ul.products li.product {
  flex-shrink: 0;
  scroll-snap-align: start;
}

@media (min-width: 750px) {
/* `safe center` centra los items cuando entran todos en el viewport (caso 4
     productos) y cae a flex-start automáticamente cuando los items overflowean
     (caso 8 productos) para que el scroll funcione bien. Browser support
     Chrome 93+ / Firefox 63+ / Safari 16+ — fallback natural a flex-start
     en browsers viejos. */
  .fde-collection-grid.single-product .related.products ul.products,
  .fde-collection-grid.single-product .upsells.products ul.products {
    justify-content: safe center !important;
  }
.fde-collection-grid.single-product .related.products ul.products li.product,
  .fde-collection-grid.single-product .upsells.products ul.products li.product {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    margin: 0 8px !important;
  }
}

/* Funnel related products wrap — container only.
   The actual card styling (typography, hover, sale strike) comes from
   .fde-collection-grid rules above. We re-declare the grid layout here because
   the `.fde-collection-grid .products` rule applies but `.fde-collection-grid
   .related.products` has higher specificity in some WC contexts. */
.fde-funnel-related-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 36px;
}

/* WC + .fde-collection-grid both add display: grid to .related.products which
   then collapses its children (h2, ul.products) into auto-sized columns.
   Force block here so h2 stacks above the full-width ul.products grid. */
.fde-funnel-related-wrap .related.products {
  display: block !important;
}

/* === featured-collection wrapper (Our Collection) ===
   Source: sections/featured-collection.liquid + template-collection.css
   padding 52px desktop / 39px mobile (×0.75 factor)
   grid 4-col-desktop / 1-col-tablet-down — sin slider */
.fde-home-collection {
  padding: 39px 24px;
  background: #ffffff;
}

@media (min-width: 750px) {
.fde-home-collection {
    padding: 52px 50px;
  }
}

.fde-home-collection__heading {
  /* Shopify Dawn exact: 40px New York system serif / #121212 / mb 10px */
  text-align: center;
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  margin: 0 0 10px !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
}

.fde-home-collection__sub {
  /* Shopify Dawn exact: 16px Besley serif / #121212BF (75% alpha navy) */
  text-align: center;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(18, 18, 18, 0.75) !important;
  margin: 0 0 12px !important;
  line-height: 1.8 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* WC [products] shortcode grid — Shopify Dawn: uniform gap ambos ejes (~10px) */
.fde-collection-grid .products,
.fde-collection-grid .products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1440px;
}

@media (min-width: 750px) {
.fde-collection-grid .products,
  .fde-collection-grid .products {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}

/* Collection section padding match Shopify — tight side padding + small bottom to bring grid closer */
@media (min-width: 750px) {
.fde-home-collection {
    padding: 52px 10px 8px;
  }
}

.fde-collection-grid .products .product,
.fde-collection-grid .products .product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

@media (max-width: 749px) {
/* ── E. WC products SINGLE COLUMN en mobile (apilados vertical, full-width).
         Aplica a: home, category archive (/product-category/), shop, etc. */
  body.home .woocommerce ul.products.columns-4,
  body.tax-product_cat ul.products,
  body.post-type-archive-product ul.products,
  body.woocommerce-shop ul.products,
  body.woocommerce-page ul.products,
  .fde-home-collection ul.products,
  ul.products.columns-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }
body.home .woocommerce ul.products.columns-4 > li,
  body.tax-product_cat ul.products > li,
  body.post-type-archive-product ul.products > li,
  body.woocommerce-shop ul.products > li,
  body.woocommerce-page ul.products > li,
  .fde-home-collection ul.products > li,
  ul.products.columns-4 > li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
body.home .woocommerce ul.products.columns-4 > li img,
  body.tax-product_cat ul.products > li img,
  body.post-type-archive-product ul.products > li img,
  body.woocommerce-shop ul.products > li img,
  body.woocommerce-page ul.products > li img,
  .fde-home-collection ul.products > li img,
  ul.products.columns-4 > li img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
/* ── M. "Our collection" archive page title — bold */
  body.tax-product_cat .fde-home-collection__heading,
  body.tax-product_cat .ast-archive-title,
  body.tax-product_cat h1.page-title,
  body.tax-product_cat h2.fde-home-h2 {
    font-weight: 700 !important;
  }
/* ── N. Category archive (Our Collection) — match home width.
         Outer containers a 0 padding, ul a 16px (igual que home). */
  body.tax-product_cat.fde-collection-grid .site-content > .ast-container,
  body.tax-product_cat.fde-collection-grid .ast-woocommerce-container,
  body.tax-product_cat.fde-collection-grid .fde-our-collection-page,
  body.tax-product_cat.fde-collection-grid .site-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
body.tax-product_cat.fde-collection-grid ul.products,
  body.tax-product_cat.fde-collection-grid .products {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
/* Kill aspect-ratio 4/5 (Shopify Dawn portrait card) en mobile.
     Desktop sí usa 4:5, pero mobile single-col se ve mejor con imagen square natural.
     Override con specificity igual al rule original (body.fde-collection-grid). */
  body.fde-collection-grid ul.products li.product .astra-shop-thumbnail-wrap,
  body.fde-collection-grid ul.products li.product .woocommerce-loop-product__link,
  body.fde-collection-grid ul.products li.product .woocommerce-LoopProduct-link,
  body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
  body.woocommerce ul.products li.product .woocommerce-loop-product__link {
    aspect-ratio: auto !important;
    height: auto !important;
  }
body.fde-collection-grid ul.products li.product .astra-shop-thumbnail-wrap img,
  body.fde-collection-grid ul.products li.product .woocommerce-loop-product__link img,
  body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
  body.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    height: auto !important;
    object-fit: contain !important;
    margin-bottom: 0 !important;
  }
/* Title pegado a la imagen — alta specificity para ganarle a Astra/fde-collection-grid */
  body.fde-collection-grid ul.products li.product .astra-shop-summary-wrap,
  body ul.products li.product .astra-shop-summary-wrap {
    margin-top: 4px !important;
    padding-top: 0 !important;
  }
body.fde-collection-grid ul.products li.product .woocommerce-loop-product__title,
  body ul.products li.product .woocommerce-loop-product__title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }
/* ── I. "Our collection" wrapper + h2 + subtitle — Shopify spec:
         - wrapper: 390×76, margin 48px 0 25px (top push for breathing room from
           previous section), padding 0 16px
         - h2:       358×39, 30px serif #121212, margin 0 0 10px
         - p:        358×27, 15px Besley #121212BF */
  .fde-home-collection {
    margin: 48px 0 25px !important;
    padding: 0 16px !important;
  }
.fde-home-collection__heading {
    font-size: 30px !important;
    line-height: 1.3 !important;
    margin: 0 0 10px !important;
  }
.fde-home-collection__sub {
    font-size: 15px !important;
    line-height: 1.8 !important;  /* 15×1.8=27 (Shopify spec) */
  }
}


/* ════════════════════════════════════════════════════════════════════
   LOS AJUSTES DE FDE SOBRE EL CÓDIGO PORTADO
   ════════════════════════════════════════════════════════════════════

   ⚠️ ESTE BLOQUE VA AL FINAL DE style.css Y NO ES UN DETALLE DE ORDEN.
   Una media query no suma especificidad: si estas reglas estuvieran arriba
   perderían contra las reglas base del CSS portado, que están más abajo, y el
   resultado sería un ajuste que aplica a medias — que es peor que no aplicar,
   porque parece que anduvo.

   Son pocas a propósito. Todo lo que se pueda resolver cambiando un token se
   cambia en :root, no acá: cada override es una divergencia más que mantener
   contra FamilyCrests.
   ════════════════════════════════════════════════════════════════════ */

/* El cajón del menú usa la misma serif de titulares que FamilyCrests (Cardo).
   completa en teléfono, tipografía de 20 px sobre navy. FamilyCrests lo pone en
   su serif; nosotros también usamos el serif, pero el nuestro. Es el único
   lugar de la navegación donde aparece Spectral, y por eso se nota. */
.fde-menu-drawer__list a {
  font-family: var(--fde-font-heading);
  font-size: 21px;
  letter-spacing: -0.005em;
}

/* 🔴 LA CAUSA DEL BUG DE LOS CAJONES, ARREGLADA EN EL ORIGEN.
   En las páginas de categoría, Astra le pone `woocommerce columns-4` al <body>.
   El scroll-reveal de FamilyCrests busca la grilla con
   `.woocommerce.columns-4, ul.products` y agarra el <body> primero: le deja una
   animación con fill-mode:forwards y, con ella, un `transform` permanente.
   Un elemento con transform pasa a ser el contenedor de TODOS los
   position:fixed de adentro — por eso en FC el cajón del carrito mide 4.605 px
   en /product-category/our-collection/ y la ✕ queda fuera de la pantalla.

   El arreglo de verdad es acotar el selector en el JS, y así va en FDE. Esto es
   el cinturón de seguridad por si algún día alguien vuelve a escribir un
   selector suelto: el <body> nunca anima. */
body {
  animation: none !important;
  transform: none !important;
}

/* El contenedor de Astra toma el ancho de FDE, que es más angosto que el de FC. */
.ast-container,
.site-content .ast-container {
  max-width: var(--fde-container-width);
}

/* ════════════════════════════════════════════════════════════════════
   HABLARLE A ASTRA EN SU IDIOMA
   ════════════════════════════════════════════════════════════════════

   Medido en el navegador, no supuesto: el fondo blanco del sitio no salía de
   una regla suelta sino de `.ast-plain-container { background: var(--ast-global-color-4) }`,
   que es un token propio de Astra. Pelearle con `body { background: … }` perdía
   por especificidad (0,1,0 contra 0,0,1) y el resultado era un fondo blanco con
   un pie crema — o sea, el ajuste parecía aplicado y no lo estaba.

   Lo correcto es redefinir SUS tokens con los nuestros. Así Astra sigue
   pintando todo lo suyo —bordes, fondos alternos, títulos del blog, la tienda
   de WooCommerce— pero con la paleta del pack, y no hay que ir cazando reglas
   una por una cada vez que aparece una pantalla nueva.

   ⚠️ `:root:root` y no `:root`: Astra imprime SU :root en un <style> inline que
   va después de esta hoja. Con la misma especificidad gana el último, así que
   hay que subir a (0,2,0). Repetir el selector es la forma más barata. */

:root:root {
  --ast-global-color-0: #c9a84c;   /* enlaces y acento — el oro de FamilyCrests */
  --ast-global-color-1: #112b3d;   /* enlace hover */
  --ast-global-color-2: #112b3d;   /* títulos */
  --ast-global-color-3: #121212;   /* cuerpo */
  --ast-global-color-4: #ffffff;   /* EL FONDO del sitio */
  --ast-global-color-5: #f2ece3;   /* fondo alterno: el crema de FamilyCrests */
  --ast-global-color-6: #112b3d;
  --ast-global-color-7: rgba(17, 43, 61, 0.1);  /* bordes */
  --ast-global-color-8: #112b3d;

  --ast-blog-title-font-weight: 400;
}

/* Los titulares: Astra los imprime a 600 y 2.25rem desde su hoja inline, que va
   después de ésta. Acá no alcanza con ir al final —eso resuelve el orden, no la
   especificidad—: hay que ganarle en el selector. De ahí el `body` adelante.
   `header.entry-header .entry-title` de Astra pesa (0,1,2), así que el nuestro
   necesita (0,1,3). */
body h1, body h2, body h3, body h4, body h5, body h6,
body .entry-title,
body header.entry-header .entry-title {
  font-family: var(--fde-font-heading);
  font-weight: 400;
  color: var(--fde-navy);
  line-height: 1.12;
}

body h1,
body header.entry-header .entry-title { font-size: clamp(38px, 5.4vw, 66px); }
body h2 { font-size: clamp(30px, 4vw, 48px); }
body h3 { font-size: clamp(23px, 2.4vw, 30px); }

/* La excepción al bloque anterior: los links del cajón del menú van en el serif.
   Lleva !important porque la regla general de los cajones también lo lleva —
   `body .fde-cart-drawer *, body .fde-menu-drawer * { … !important }` existe
   para que ningún tema ni plugin meta su tipografía adentro del cajón, y está
   bien que exista. Esta es la única excepción, y se declara como tal. */
.fde-menu-drawer .fde-menu-drawer__list a {
  /* Cardo, igual que en FamilyCrests. Antes apuntaba a una serif propia que ya
     no forma parte del sistema. */
  font-family: var(--fde-font-heading) !important;
}

/* ════════════════════════════════════════════════════════════════════
   EL ANCHO DE LECTURA DE LAS PÁGINAS DE TEXTO
   ════════════════════════════════════════════════════════════════════
   Las legales salían a 1280 px de ancho: renglones de ~120 caracteres, donde
   el ojo pierde el principio de la línea siguiente. La medida cómoda está
   entre 60 y 75 caracteres, y con el cuerpo a 21 px eso son unos 38 rem.

   No aplica a la portada ni a la tienda, que tienen su propia maqueta: se
   acota a las páginas sueltas. */
.page:not(.fde-portada):not(.woocommerce-page) .entry-content > * {
  max-width: 38rem;
}

.page:not(.fde-portada):not(.woocommerce-page) .entry-content {
  margin-inline: auto;
  max-width: 38rem;
  padding-block: 8px 72px;
}

.page:not(.fde-portada):not(.woocommerce-page) .entry-content h2 {
  margin-top: 2.2em;
  font-size: clamp(25px, 2.6vw, 31px);
}

.page:not(.fde-portada):not(.woocommerce-page) .entry-content li {
  margin-bottom: .5em;
  line-height: 1.6;
}

/* El título de la página queda pegado al header: le falta aire arriba. */
.page:not(.fde-portada) .entry-header,
.page:not(.fde-portada) .ast-container > .site-main > article > .entry-header {
  margin-inline: auto;
  max-width: 38rem;
  padding-top: 48px;
}

/* ════════════════════════════════════════════════════════════════════
   LO PROPIO DEL CAJÓN: la fila de sugerencias y el aviso
   ════════════════════════════════════════════════════════════════════
   El resto del cajón viene portado de FamilyCrests. Esto es lo que FDE suma:
   los upsells adentro —donde ellos abren un panel aparte— y un aviso visible
   cuando una escritura falla, que en FC no existe. */

.fde-cart-sug {
  border-top: 1px solid var(--fde-border-soft);
  padding: 16px 20px 4px;
}

.fde-cart-sug__t {
  font-family: var(--fde-font-ui);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 12px;
  font-weight: 500;
  color: var(--fde-gold);
  margin: 0 0 12px;
}

.fde-cart-sug__lista { list-style: none; margin: 0; padding: 0; }

.fde-cart-sug__item { margin-bottom: 12px; }

.fde-cart-sug__item a {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--fde-text);
}

.fde-cart-sug__img {
  width: 44px;
  height: 62px;
  object-fit: contain;
  background: var(--fde-cream);
  border: 1px solid var(--fde-border-soft);
}

.fde-cart-sug__nombre {
  font-size: 16px;
  line-height: 1.3;
  color: var(--fde-navy);
}

.fde-cart-sug__precio {
  font-family: var(--fde-font-heading);
  font-size: 15px;
  white-space: nowrap;
}

/* El tachado del ancla, acá chiquito: en una fila de 44 px de alto, dos
   precios del mismo tamaño no se distinguen. */
.fde-cart-sug__precio del { opacity: .5; font-size: .82em; margin-right: .3em; }
.fde-cart-sug__precio ins { text-decoration: none; font-weight: 600; }

/* El aviso de error. Va arriba de los ítems, ocupa su lugar en la maqueta y
   desaparece solo. No es un modal: no hay que cerrarlo para seguir comprando. */
.fde-cart-drawer__aviso {
  margin: 0 0 12px;
  padding: 11px 14px;
  background: rgba(160, 123, 51, .12);
  border-left: 3px solid var(--fde-gold);
  font-size: 15px;
  line-height: 1.45;
  color: var(--fde-text);
}

.fde-cart-drawer__aviso[hidden] { display: none; }