/** Shopify CDN: Minification failed

Line 1990:27 Unexpected "*"

**/
/* ================================================================
   ef-bundle.css — Generated bundle (DO NOT EDIT DIRECTLY)
   ================================================================
   Rebuild via bundle-css.bat. Sources: ef-tokens + ef-custom + ef-font-override.
   ================================================================ */

/* ════════════════════════════════════════════════════════════════
   PRESTIGE VARIABLE OVERRIDES — 2026-05-08
   Prestige theme (snippets/css-variables.liquid) reads its CSS vars from
   Customizer settings. Redefining them HERE at :root means every
   downstream Prestige rule using `var(--text-base)`, `var(--heading-
   font-family)`, etc. naturally picks up our values WITHOUT the need
   for `!important` overrides on individual selectors.

   Pair this with these Customizer settings (Admin → Customize →
   Theme Settings):
     - Text font: Inter
     - Heading font: Inter
     - Text font size desktop: 17, mobile: 16
     - Heading letter spacing: -1
     - Button border radius: 100, letter-spacing: 6, text-transform: uppercase
     - Color scheme 1: bg #FEFCF9 / fg #1E1E1B / accent #8A6A43

   When Customizer matches these defaults, this :root block is redundant
   but harmless. When Customizer drifts, this block keeps EF brand intact.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Typography — force Inter site-wide.
     'Inter Fallback' (defined in css-variables.liquid as Arial pre-scaled
     to Inter's metrics via size-adjust + ascent-override) eliminates
     visible reflow if Inter is slow to load on cold cache. */
  --text-font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --heading-font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-font-weight: 400;
  --heading-font-weight: 600;
  --heading-letter-spacing: -0.01em;
  --text-letter-spacing: 0;
  --heading-text-transform: none;

  /* Body text base 16px (1rem) — never below for 40+ readability */
  --text-base: 1rem;        /* 16px */
  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.875rem;      /* 14px */
  --text-lg: 1.125rem;      /* 18px */
  --text-xl: 1.25rem;       /* 20px */
  --text-heading-size-factor: 1.05;

  /* Brand colors — match orderform design north-star */
  --text-color: 30 30 27;            /* charcoal #1E1E1B in r g b */
  --page-background: 247 243 238;    /* cream-page #F7F3EE */
  --color-foreground: var(--text-color);

  /* Buttons — pill shape matching our ATC */
  --button-border-radius: 6.25rem;   /* 100px = pill */
  --button-letter-spacing: 0.06em;
  --button-text-transform: uppercase;

  /* Spacing — slightly more generous than Prestige defaults */
  --section-vertical-spacing: 3rem;
}

/* ============================================================
   ExceptionalFire — Design Tokens
   SOURCE OF TRUTH — all other CSS files reference these vars
   File: assets/ef-tokens.css
   ============================================================ */

:root {

  /* ── COLORS ─────────────────────────────────────────────── */

  /* Backgrounds */
  --ef-ivory:     #F7F3EE;   /* primary light section bg */
  --ef-white:     #FEFCF9;   /* cards, header bg */
  --ef-graphite:  #242628;   /* dark sections, utility bar, footer */
  --ef-charcoal:  #1E1E1B;   /* primary dark text, darkest bg */

  /* Accent / Brand */
  --ef-bronze:    #8A6A43;   /* CTAs, active states, light bg accent */
  --ef-bronze-lt: #B8955F;   /* accent on dark backgrounds */
  --ef-bronze-hover: #A07D52; /* button hover state */
  --ef-bronze-text:  #6F5336; /* WCAG AA accessible bronze for text on light bg */
  --color-bronze-accessible: #6F5336; /* QW-11: WCAG AA text-safe bronze */

  /* Text */
  --ef-text-primary:   #1E1E1B;              /* headings on light */
  --ef-text-secondary: #5C5852;              /* body text on light */
  --ef-text-muted:     #5C5852;              /* meta, labels on light */
  --ef-text-light:     #FEFCF9;             /* text on dark bg */
  --ef-text-dark-muted: rgba(199,184,163,0.78); /* body on dark bg */
  --ef-text-dark-dim:   rgba(199,184,163,0.58); /* muted on dark bg */
  --ef-text-dark-faint: rgba(199,184,163,0.38); /* very dim on dark bg */

  /* Borders */
  --ef-border-light:  #DED6CB;                   /* cards, dividers on light */
  --ef-border-subtle: #E8E2D9;                   /* very subtle on light */
  --ef-border-dark:   rgba(199,184,163,0.17);    /* borders on dark bg */
  --ef-border-dark-hover: rgba(184,149,95,0.5);  /* hover border on dark */
  --ef-border-footer: rgba(199,184,163,0.12);    /* footer divider */

  /* Surface overlays (dark cards) */
  --ef-surface-dark:  rgba(254,252,249,0.04);
  --ef-surface-dark2: rgba(254,252,249,0.06);
  --ef-surface-dark3: rgba(254,252,249,0.08);

  /* Utility bar bg */
  --ef-trust-bar-bg: #242628;

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */

  --ef-font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --ef-font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Typographic scale (shorthand: weight size/line-height family) */
  --font-h1: 300 clamp(42px,5vw,64px)/1.1 'Inter',sans-serif;
  --font-h2: 400 clamp(32px,4vw,48px)/1.2 'Inter',sans-serif;
  --font-h3: 500 clamp(24px,3vw,32px)/1.3 'Inter',-apple-system,sans-serif;
  --font-body: 400 16px/1.6 'Inter',sans-serif;
  --font-small: 400 13px/1.5 'Inter',sans-serif;
  --font-btn: 600 14px/1 'Inter',sans-serif;
  --font-nav: 500 13px/1 'Inter',sans-serif;

  /* Sizes */
  --ef-text-overline:  10px;   /* ALL overline labels */
  --ef-text-xs:        11px;
  --ef-text-sm:        12px;
  --ef-text-base:      13px;
  --ef-text-md:        15px;
  --ef-text-body:      16px;

  /* Line heights */
  --ef-lh-tight:  1.1;
  --ef-lh-snug:   1.25;
  --ef-lh-normal: 1.65;
  --ef-lh-relaxed: 1.75;
  --ef-lh-body:   1.7;

  /* Letter spacing */
  --ef-tracking-overline: 0.16em;   /* Inter overline labels */
  --ef-tracking-cta:      0.12em;   /* button text */
  --ef-tracking-badge:    0.10em;   /* badge text */
  --ef-tracking-tight:    -0.025em; /* display headings */

  /* ── SPACING (8px grid) ─────────────────────────────────── */

  --ef-space-1:  8px;
  --ef-space-2:  16px;
  --ef-space-3:  24px;
  --ef-space-4:  32px;
  --ef-space-5:  40px;
  --ef-space-6:  48px;
  --ef-space-7:  56px;
  --ef-space-8:  64px;
  --ef-space-10: 80px;
  --ef-space-11: 88px;

  /* ── CANONICAL SPACING SCALE (4px base) ─────────────────── */
  /* Available for future use — do not bulk-replace existing values */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ── BORDERS / RADII ────────────────────────────────────── */

  --ef-radius-sm:  4px;
  --ef-radius-md:  8px;
  --ef-radius-lg:  10px;
  --ef-radius-xl:  12px;
  --ef-radius-pill: 999px;

  /* ── SHADOWS ────────────────────────────────────────────── */

  --ef-shadow-card:   0 20px 48px rgba(30,30,27,0.10);
  --ef-shadow-hero:   0 32px 80px rgba(30,30,27,0.18);
  --ef-shadow-header: 0 2px 24px rgba(30,30,27,0.08);

  /* ── MOTION ─────────────────────────────────────────────── */

  --ef-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ef-dur-fast:   180ms;
  --ef-dur-btn:    220ms;
  --ef-dur-card:   320ms;
  --ef-dur-img:    480ms;
  --ef-dur-reveal: 520ms;

  /* ── Z-INDEX SCALE ──────────────────────────────────────── */

  --z-base:     1;
  --z-card:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── LAYOUT ─────────────────────────────────────────────── */

  --ef-max-width: 1240px;
  --ef-pad-desktop: 0 40px;
  --ef-pad-mobile:  0 16px;

  --ef-section-pad-desktop: 88px 40px;
  --ef-section-pad-mobile:  56px 16px;

  --ef-header-height-desktop: 64px;
  --ef-header-height-mobile:  56px;
  --ef-trust-bar-height-desktop: 40px;
  --ef-trust-bar-height-mobile:  32px;
}

/* ── GLOBAL RESETS USING TOKENS ──────────────────────────── */

body {
  font-size: 15px;
  line-height: 1.7;
  color: #3A3732;
  background: var(--ef-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── OVERLINE UTILITY CLASS ─────────────────────────────── */

.ef-overline {
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-overline);
  font-weight: 600;
  letter-spacing: var(--ef-tracking-overline);
  text-transform: uppercase;
}

/* On light backgrounds */
.ef-overline--bronze { color: var(--ef-bronze-text); }

/* On dark backgrounds */
.ef-overline--gold   { color: var(--ef-bronze-lt); }

/* ── HEADING UTILITY ────────────────────────────────────── */

.ef-heading {
  font-family: var(--ef-font-display);
  font-weight: 400;
  line-height: var(--ef-lh-tight);
  letter-spacing: var(--ef-tracking-tight);
}

.ef-heading--light { color: var(--ef-text-primary); }   /* on ivory/white */
.ef-heading--dark  { color: var(--ef-text-light); }     /* on graphite */

/* ── SECTION BACKGROUND UTILITIES ───────────────────────── */

.ef-bg--ivory    { background: var(--ef-ivory);    }
.ef-bg--white    { background: var(--ef-white);    }
.ef-bg--graphite { background: var(--ef-graphite); }
.ef-bg--charcoal { background: var(--ef-charcoal); }

/* ── BUTTON BASE ─────────────────────────────────────────── */

.ef-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-xs);
  font-weight: 700;
  letter-spacing: var(--ef-tracking-cta);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--ef-radius-sm);
  border: none;
  cursor: pointer;
  transition:
    background var(--ef-dur-btn) var(--ef-ease),
    color var(--ef-dur-btn) var(--ef-ease),
    border-color var(--ef-dur-btn) var(--ef-ease),
    transform var(--ef-dur-fast) var(--ef-ease);
}
.ef-btn:active { transform: scale(0.99); }

/* Primary — dark fill */
.ef-btn--primary {
  background: var(--ef-charcoal);
  color: var(--ef-white);
  padding: 16px 30px;
}
.ef-btn--primary:hover { background: var(--ef-bronze); }

/* Secondary — outline dark */
.ef-btn--secondary {
  background: transparent;
  color: var(--ef-charcoal);
  border: 1.5px solid var(--ef-charcoal);
  padding: 15px 28px;
}
.ef-btn--secondary:hover {
  border-color: var(--ef-bronze);
  color: var(--ef-bronze);
}

/* Bronze fill — on dark backgrounds */
.ef-btn--bronze {
  background: var(--ef-bronze);
  color: var(--ef-white);
  padding: 15px 28px;
}
.ef-btn--bronze:hover { background: var(--ef-bronze-hover); }

/* Outlined charcoal — "Show all" style */
.ef-btn--outline {
  background: transparent;
  color: var(--ef-charcoal);
  border: 1.5px solid var(--ef-charcoal);
  padding: 13px 32px;
}
.ef-btn--outline:hover {
  background: var(--ef-charcoal);
  color: var(--ef-white);
}

/* ── "MORE PAYMENT OPTIONS" subtle link ──────────────────── */
/* Used below ATC on both Standard and Configurator forms.
   Intentionally low-key — reads as "optional, click if you want more". */
.ef-payment-more-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 4px 0;
  text-align: center;
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ef-bronze-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px !important;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--ef-dur-fast) var(--ef-ease);
}
.ef-payment-more-link:hover {
  color: var(--ef-charcoal) !important;
  text-decoration-thickness: 1.5px !important;
}

/* Hide Shopify's default "More payment options" toggle — we render our own link.
   Uses both class hooks Shopify uses across legacy and current dynamic checkout. */
.shopify-payment-button__more-options,
.shopify-payment-button [role="button"][data-testid="more-payment-options-button"] {
  display: none !important;
}

/* ── BADGE BASE ──────────────────────────────────────────── */

.ef-badge {
  display: inline-block;
  font-family: var(--ef-font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--ef-tracking-badge);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--ef-radius-sm);
}
.ef-badge--bronze   { background: var(--ef-bronze);  color: var(--ef-white); }
.ef-badge--masonry  { background: var(--ef-charcoal); color: var(--ef-white); }
.ef-badge--prefab   { background: #243040; color: #90B0CC; }
.ef-badge--ship     { background: #1A2D1A; color: #7AC792; }

/* ── SCROLL REVEAL ───────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--ef-dur-reveal) var(--ef-ease),
    transform var(--ef-dur-reveal) var(--ef-ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-d="1"] { transition-delay: 80ms;  }
[data-d="2"] { transition-delay: 160ms; }
[data-d="3"] { transition-delay: 240ms; }

/* ── FOCUS RINGS (WCAG 2.1 AA) ──────────────────────────── */

:focus-visible {
  outline: 2px solid #8A6A43;
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── SCREEN-READER-ONLY UTILITY ─────────────────────────── */

.ef-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── REDUCED MOTION ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}
/* ==========================================================================
   ExceptionalFire.com — Custom CSS Override
   Prestige Theme v11.0.0 (Maestrooo)
   Phase 1: Warm Palette + Typography + Component Overrides
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. CUSTOM FONT: Cormorant Garamond (self-hosted)
   
   INSTRUCTIONS: 
   1. Download Cormorant Garamond from Google Fonts (woff2 format)
   2. Get weights 400 and 600, Latin subset only
   3. Upload these files to Shopify: Settings → Files
   4. Replace the URLs below with your Shopify CDN URLs
   
   For now, we fall back to Google Fonts CDN as a safe starting point.
   Self-hosting is recommended for production (better CWV scores).
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   2. GLOBAL CSS VARIABLE OVERRIDES
   These layer on top of Prestige's existing CSS variable system
   ------------------------------------------------------------------------- */

:root {
  /* === ExceptionalFire Brand Tokens === */
  --ef-ivory: 247 243 238;            /* #F7F3EE */
  --ef-ivory-deep: 237 232 225;       /* #EDE8E1 */
  --ef-white: 254 252 249;            /* #FEFCF9 */
  --ef-charcoal: 30 30 27;            /* #1E1E1B */
  --ef-graphite: 36 38 40;            /* #242628 */
  --ef-bronze: 138 106 67;            /* #8A6A43 */
  --ef-bronze-light: 160 125 82;      /* #A07D52 */
  --ef-bronze-glow: 184 149 95;       /* #B8955F */
  --ef-taupe: 199 184 163;            /* #C7B8A3 */
  --ef-secondary-text: 92 88 82;      /* #5C5852 */
  --ef-line: 222 214 203;             /* #DED6CB */

  /* === Typography: All Inter (Cormorant fully removed) ===
     Single sans-serif system across UI + headings for cleaner brand. */
  --heading-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --heading-font-weight: 600;
  --heading-font-style: normal;
  --heading-letter-spacing: -0.01em;
  --heading-text-transform: none;
  --ef-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ef-font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* === Button styling === */
  --button-border-radius: 0.125rem;   /* 2px — luxury square feel */
  --input-border-radius: 0.125rem;

  /* === Shadow overrides (warm tone) === */
  --shadow-sm: 0 2px 8px rgb(30 30 27 / 0.06);
  --shadow: 0 5px 15px rgb(30 30 27 / 0.06);
  --shadow-md: 0 5px 30px rgb(30 30 27 / 0.06);
}

/* -------------------------------------------------------------------------
   3. COLOR SCHEME OVERRIDES
   Prestige uses scheme-1 through scheme-4. We remap them to EF's palette.
   These will be applied via Shopify Admin → Theme Settings → Colors,
   but we provide CSS fallbacks here for immediate visual impact.
   ------------------------------------------------------------------------- */

/* Scheme 1: Ivory (primary light sections) */
.color-scheme--scheme-1 {
  --background: var(--ef-ivory);
  --text-color: var(--ef-charcoal);
  --accent: var(--ef-bronze);
  --button-background: var(--ef-bronze);
  --button-text-color: var(--ef-white);
  --border-color: var(--ef-line);
}

/* Scheme 2: White (cards, product pages) */
.color-scheme--scheme-2 {
  --background: var(--ef-white);
  --text-color: var(--ef-charcoal);
  --accent: var(--ef-bronze);
  --button-background: var(--ef-bronze);
  --button-text-color: var(--ef-white);
  --border-color: var(--ef-line);
}

/* Scheme 3: Graphite (dark sections) */
.color-scheme--scheme-3 {
  --background: var(--ef-graphite);
  --text-color: var(--ef-ivory);
  --accent: var(--ef-bronze-glow);
  --button-background: var(--ef-bronze-glow);
  --button-text-color: var(--ef-charcoal);
  --border-color: 255 255 255 / 0.12;
}

/* Scheme 4: Transparent overlay (hero, banners) */
.color-scheme--scheme-4 {
  --text-color: var(--ef-ivory);
  --accent: var(--ef-bronze-glow);
  --button-background: var(--ef-bronze);
  --button-text-color: var(--ef-white);
}

/* -------------------------------------------------------------------------
   4. TYPOGRAPHY REFINEMENTS
   ------------------------------------------------------------------------- */

/* Heading styles — Cormorant Garamond at display sizes.
   EXCLUDED: any h-tag inside an EF UI component (caught by FONT SHIELD
   at bottom of file). These h-tags inherit Inter via the shield's
   --heading-font-family scope reset. Without exclusion, this raw h-tag
   selector (specificity 0,0,1) was the actual winning rule because
   it set font-family directly (not via var), bypassing the shield. */
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  letter-spacing: 0.02em;
  text-transform: none;
}
h1:not([class*="ef-"]):not([class*="efm-"]):not([class*="efg-"]):not([class*="efs-"]):not([class*="efn-"]),
h2:not([class*="ef-"]):not([class*="efm-"]):not([class*="efg-"]):not([class*="efs-"]):not([class*="efn-"]),
h3:not([class*="ef-"]):not([class*="efm-"]):not([class*="efg-"]):not([class*="efs-"]):not([class*="efn-"]),
h4:not([class*="ef-"]):not([class*="efm-"]):not([class*="efg-"]):not([class*="efs-"]):not([class*="efn-"]),
h5:not([class*="ef-"]):not([class*="efm-"]):not([class*="efg-"]):not([class*="efs-"]):not([class*="efn-"]),
h6:not([class*="ef-"]):not([class*="efm-"]):not([class*="efg-"]):not([class*="efs-"]):not([class*="efn-"]) {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Body text refinements */
body,
.prose,
.prose p {
  color: rgb(var(--ef-charcoal));
  line-height: 1.5;
}

/* Secondary text color for descriptions */
.prose p:not(:first-child),
.text-subdued {
  color: rgb(var(--ef-secondary-text));
}

/* -------------------------------------------------------------------------
   5. BUTTON OVERRIDES
   Strategy: Bronze primary, Charcoal outlined secondary
   Height: 48px, padding: 24px horizontal, border-radius: 2px
   ------------------------------------------------------------------------- */

.button {
  --button-background: var(--ef-bronze);
  --button-text-color: 254 252 249;
  min-height: 48px;
  padding-inline: 1.5rem;
  border-radius: 2px;
  letter-spacing: 0.04em;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.button:hover {
  --button-background: var(--ef-bronze-light);
}

.button--outline {
  --button-outline-color: var(--ef-charcoal);
  border-radius: 2px;
}

.button--outline:hover {
  --button-background: var(--ef-charcoal);
  --button-text-color: 254 252 249;
}

/* Dark section button adjustments */
.color-scheme--scheme-3 .button {
  --button-background: var(--ef-bronze-glow);
  --button-text-color: var(--ef-charcoal);
}

.color-scheme--scheme-3 .button:hover {
  --button-background: var(--ef-bronze);
  --button-text-color: 254 252 249;
}

.color-scheme--scheme-3 .button--outline {
  --button-outline-color: var(--ef-ivory);
  --button-text-color: var(--ef-ivory);
}

.color-scheme--scheme-3 .button--outline:hover {
  --button-background: var(--ef-ivory);
  --button-text-color: var(--ef-charcoal);
}

/* -------------------------------------------------------------------------
   6. CARD OVERRIDES
   Background: White #FEFCF9, border: 1px #DED6CB, radius: 4px
   Hover: deeper shadow + taupe border
   ------------------------------------------------------------------------- */

.product-card,
.card {
  border-radius: 4px;
  border: 1px solid rgb(var(--ef-line));
  background: rgb(var(--ef-white));
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.product-card:hover,
.card:hover {
  box-shadow: 0 4px 16px rgb(30 30 27 / 0.10);
  border-color: rgb(var(--ef-taupe));
}

/* Product card image zoom on hover */
.features--zoom-image .product-card img {
  transition: transform 400ms ease;
}

.features--zoom-image .product-card:hover img {
  transform: scale(1.03);
}

/* -------------------------------------------------------------------------
   7. PRICE STYLING
   Prices in Bronze
   ------------------------------------------------------------------------- */

.price-list,
.price,
sale-price,
compare-at-price {
  color: rgb(var(--ef-bronze));
  font-family: var(--text-font-family);
  font-weight: 600;
}

/* Star ratings in Bronze */
.rating {
  --star-color: var(--ef-bronze);
}

/* -------------------------------------------------------------------------
   8. HEADER / ANNOUNCEMENT BAR REFINEMENTS
   ------------------------------------------------------------------------- */

/* Announcement bar: warm styling */
.announcement-bar {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Header separation border */
.header {
  border-bottom: 1px solid rgb(var(--ef-line) / 0.5);
}

/* Nav link hover: bronze underline */
.header__primary-nav-item > a:hover,
.header__primary-nav-item > details > summary:hover {
  color: rgb(var(--ef-bronze));
}

/* -------------------------------------------------------------------------
   9. SECTION SPACING (matches strategy: 80px desktop, 48px mobile)
   ------------------------------------------------------------------------- */

.section-spacing {
  padding-block: 3rem; /* 48px mobile */
}

@media screen and (min-width: 1000px) {
  .section-spacing {
    padding-block: 5rem; /* 80px desktop */
  }
}

/* -------------------------------------------------------------------------
   10. EF CUSTOM SECTION STYLES
   Styles for custom sections built for ExceptionalFire
   ------------------------------------------------------------------------- */

/* --- ef-hero --- */

@media screen and (min-width: 1000px) {
  .ef-hero {
    min-height: 100vh;
  }
}

.ef-hero__media img,
.ef-hero__media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 1000px) {
  .ef-hero__content {
    text-align: left;
    justify-content: center;
    padding: 5rem;
    max-width: 680px;
  }
}

@media screen and (max-width: 999px) {
  .ef-hero__subheading {
    margin-inline: auto;
  }
}

@media screen and (max-width: 999px) {
  .ef-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- ef-type-selector --- */
.ef-type-selector {
  padding-block: 3rem;
  background: rgb(var(--ef-ivory));
}

@media screen and (min-width: 1000px) {
  .ef-type-selector {
    padding-block: 5rem;
  }
}

@media screen and (min-width: 700px) {
  .ef-type-selector__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.ef-type-selector__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.ef-type-selector__card:hover .ef-type-selector__card-image img {
  transform: scale(1.03);
}

.ef-type-selector__help a {
  color: rgb(var(--ef-bronze));
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms ease;
}

.ef-type-selector__help a:hover {
  color: rgb(var(--ef-bronze-light));
}

/* --- ef-trust-bar (header utility strip) --- */

@media screen and (min-width: 700px) {
  .ef-trust-bar {
    justify-content: center;
    padding: 0.5rem 3rem;
    font-size: 0.6875rem;
  }
}

@media screen and (max-width: 699px) {
  .ef-trust-bar__divider {
    display: none;
  }

  .ef-trust-bar__messages {
    gap: 0.25rem;
  }

  .ef-trust-bar__message:not(:first-child)::before {
    content: '·';
    margin-right: 0.25rem;
    color: rgb(255 255 255 / 0.35);
  }
}

@media screen and (min-width: 700px) {
  .ef-trust-bar__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
}

.ef-trust-bar__actions a {
  color: rgb(var(--ef-ivory));
  text-decoration: none;
  transition: color 200ms ease;
}

.ef-trust-bar__actions a:hover {
  color: rgb(var(--ef-bronze-glow));
}

/* -------------------------------------------------------------------------
   11. LINK & ACCENT COLOR
   All links should use bronze
   ------------------------------------------------------------------------- */

a:not(.button):not([class*="header"]):not([class*="nav"]):not(.ef-hero__btn-primary):not(.ef-hero__btn-secondary):not(.ef-cfg-review-item__edit):not(.ef-cv2__card-btn):not(.ef-cv2__card-link) {
  color: rgb(var(--ef-bronze));
  transition: color 200ms ease;
}

a:not(.button):not([class*="header"]):not([class*="nav"]):not(.ef-hero__btn-primary):not(.ef-hero__btn-secondary):not(.ef-cfg-review-item__edit):not(.ef-cv2__card-btn):not(.ef-cv2__card-link):hover {
  color: rgb(var(--ef-bronze-light));
}

/* Dark section link colors */
.color-scheme--scheme-3 a:not(.button) {
  color: rgb(var(--ef-bronze-glow));
}

/* -------------------------------------------------------------------------
   12. FOOTER WARM STYLING
   ------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid rgb(var(--ef-line));
}

/* -------------------------------------------------------------------------
   13. MOTION / ANIMATION
   Subtle fade-up only. No parallax, no stagger.
   Mobile: disable scroll animations.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  [reveal-on-scroll] img,
  [reveal-on-scroll] .content {
    transition: opacity 400ms ease-out, transform 400ms ease-out;
  }
}

/* -------------------------------------------------------------------------
   14. UTILITY CLASSES
   Reusable classes for custom sections
   ------------------------------------------------------------------------- */

.ef-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* -------------------------------------------------------------------------
   15. COMPATIBILITY BADGES
   Metafield-driven badges for product cards and PDPs
   ------------------------------------------------------------------------- */

.ef-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 2px;
  line-height: 1.4;
  white-space: nowrap;
}

.ef-badge--masonry {
  background: rgb(var(--ef-ivory-deep));
  color: rgb(var(--ef-charcoal));
  border: 1px solid rgb(var(--ef-taupe));
}

.ef-badge--prefab {
  background: rgb(var(--ef-charcoal));
  color: rgb(var(--ef-ivory));
}

.ef-badge--both {
  background: rgb(var(--ef-bronze));
  color: rgb(254 252 249);
}

/* Badge on product cards: position top-left */
.product-card .ef-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: var(--z-base);
}

/* -------------------------------------------------------------------------
   16. TRUST BAR PHONE ICON ALIGNMENT
   ------------------------------------------------------------------------- */

@media screen and (min-width: 700px) {
  .ef-trust-bar__phone {
    display: inline-flex;
  }
}

.ef-trust-bar__phone svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   15. EF HERO — SPLIT LAYOUT
   Text left on light background + image right with badges
   Inspired by premium editorial split hero pattern
   ------------------------------------------------------------------------- */

@media screen and (min-width: 1000px) {
  .ef-hero-split {
    padding: 3.5rem 3rem;
  }
}

@media screen and (min-width: 1000px) {
  .ef-hero-split__inner {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}

/* Split: Left content */

.ef-hero-split__heading em,
.ef-hero-split__heading i {
  font-style: italic;
  color: rgb(var(--ef-bronze, 138 106 67));
}

@media screen and (max-width: 499px) {
  .ef-hero-split__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}

/* Split: Right image */

.ef-hero-split__image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media screen and (min-width: 1000px) {
  .ef-hero-split__image-wrap img {
    aspect-ratio: auto;
    min-height: 520px;
    max-height: 680px;
  }
}

/* Image badge: top-right */

.ef-hero-split__image-badge svg {
  flex-shrink: 0;
}

/* Image caption: bottom-left pill */

.ef-hero-split__image-caption-icon svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
}

/* =========================================================================
   PHASE 2: HOMEPAGE SECTION STYLES
   ========================================================================= */

/* -------------------------------------------------------------------------
   SECTION 5: EF Door Spotlight (dark graphite, 50/50)
   ------------------------------------------------------------------------- */

@media screen and (min-width: 1000px) {
  .ef-spotlight__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.ef-spotlight__media img,
.ef-spotlight__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (min-width: 1000px) {
  .ef-spotlight__media {
    min-height: 500px;
  }
}

@media screen and (min-width: 1000px) {
  .ef-spotlight__content {
    padding: 4rem 5rem;
  }
}

.ef-spotlight__feature svg {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   SECTION 7: EF Brand Stats
   ------------------------------------------------------------------------- */

.ef-brand-stats {
  padding: 3rem 0;
}

@media screen and (min-width: 1000px) {
  .ef-brand-stats {
    padding: 5rem 0;
  }
}

.ef-brand-stats__heading {
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: rgb(var(--ef-charcoal, 30 30 27));
  margin-bottom: 1.25rem;
}

.ef-brand-stats__body {
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem);
  line-height: 1.7;
  color: rgb(var(--ef-secondary-text, 92 88 82));
}

.ef-brand-stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

@media screen and (min-width: 700px) {
  .ef-brand-stats__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.ef-brand-stats__stat {
  text-align: center;
  padding: 1.5rem;
  border: 1px solid rgb(var(--ef-line, 222 214 203));
  border-radius: 4px;
  background: rgb(var(--ef-ivory, 247 243 238));
}

.ef-brand-stats__number {
  display: block;
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1;
  color: rgb(var(--ef-bronze, 138 106 67));
  margin-bottom: 0.5rem;
}

.ef-brand-stats__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(var(--ef-secondary-text, 92 88 82));
  letter-spacing: 0.02em;
}

.ef-brand-stats__cta {
  text-align: center;
}

.ef-brand-stats__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 2rem;
  background: transparent;
  color: rgb(var(--ef-bronze, 138 106 67));
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgb(var(--ef-bronze, 138 106 67));
  border-radius: 2px;
  transition: background-color 200ms ease, color 200ms ease;
}

.ef-brand-stats__btn:hover {
  background: rgb(var(--ef-bronze, 138 106 67));
  color: rgb(254 252 249);
}

/* -------------------------------------------------------------------------
   SECTION 8: EF Education Cards
   ------------------------------------------------------------------------- */

.ef-education {
  padding: 3rem 0;
}

@media screen and (min-width: 1000px) {
  .ef-education {
    padding: 5rem 0;
  }
}

.ef-education__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.ef-education__heading {
  font-weight: 400;
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: rgb(var(--ef-charcoal, 30 30 27));
}

.ef-education__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media screen and (min-width: 700px) {
  .ef-education__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

.ef-education__card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  background: rgb(var(--ef-white, 254 252 249));
  border: 1px solid rgb(var(--ef-line, 222 214 203));
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.ef-education__card:hover {
  box-shadow: 0 4px 16px rgb(30 30 27 / 0.08);
  border-color: rgb(var(--ef-taupe, 199 184 163));
  transform: translateY(-2px);
}

.ef-education__icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.ef-education__card-title {
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: rgb(var(--ef-charcoal, 30 30 27));
  margin-bottom: 0.5rem;
}

.ef-education__card-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgb(var(--ef-secondary-text, 92 88 82));
  margin-bottom: 1rem;
  flex-grow: 1;
}

.ef-education__card-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(var(--ef-bronze, 138 106 67));
  letter-spacing: 0.02em;
}

.ef-education__card:hover .ef-education__card-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   SECTION 11: EF Expert CTA
   ------------------------------------------------------------------------- */

@media screen and (min-width: 1000px) {
  .ef-expert {
    padding: 5rem 0;
  }
}

.ef-expert__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 499px) {
  .ef-expert__actions {
    flex-direction: column;
    width: 100%;
  }
}

.ef-expert__btn-phone svg {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   SECTION 15: EF Final CTA
   ------------------------------------------------------------------------- */

@media screen and (min-width: 1000px) {
  .ef-final-cta {
    padding: 6rem 0;
  }
}

@media screen and (max-width: 499px) {
  .ef-final-cta__actions {
    flex-direction: column;
  }
}

@media screen and (max-width: 499px) {
  .ef-final-cta__form-row {
    flex-direction: column;
  }
}

.ef-final-cta__input::placeholder {
  color: rgb(255 255 255 / 0.45);
}

/* ═══════════════════════════════════════════════════════════════
   EFN SECTIONS — 5 new sections (appended, do not edit above)
   All colors are hardcoded hex. No CSS variables needed.
   Font: inherits from theme (Cormorant for headings)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Shared utilities ─── */
.efn-wrap { width: min(1260px, 90vw); margin: 0 auto; }
.efn-sec-header { text-align: center; margin-bottom: 56px; }
.efn-sec-header .efn-label { margin-bottom: 14px; display: block; }
.efn-sec-header p { max-width: 540px; margin: 16px auto 0; font-size: 16px; line-height: 1.65; color: #5C5852; }
.efn-heading-lg { font-family: var(--heading-font-family); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; color: #1E1E1B; }

.efn-body { font-size: 16px; line-height: 1.65; color: #5C5852; }
.efn-label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: #6F5336; }
.efn-label--gold { color: #B8955F; }

/* ─── Buttons ─── */

/* ═══ 3. CATEGORIES ═══ */

.efn-categories__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.22,1,0.36,1); }
.efn-categories__card:hover img { transform: scale(1.04); }

/* ═══ 5. SPOTLIGHT ═══ */

.efn-spotlight__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s cubic-bezier(0.22,1,0.36,1); }
.efn-spotlight__media:hover img { transform: scale(1.03); }
.efn-spotlight__content .efn-label { margin-bottom: 16px; display: block; }
.efn-spotlight__content .efn-heading-lg { margin-bottom: 20px; }

.efn-spotlight__value-icon svg { width: 18px; height: 18px; }

/* ═══ 7. TRUST BLOCK ═══ */

.efn-trust__content .efn-label--gold { margin-bottom: 16px; display: block; }
.efn-trust__content .efn-heading-lg { margin-bottom: 16px; }

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

/* ═══ 9. REVIEWS ═══ */

/* ═══ 11. EXPERT CTA ═══ */

.efn-expert__content .efn-label--gold { margin-bottom: 16px; display: block; }
.efn-expert__content .efn-heading-lg { margin-bottom: 18px; }
.efn-expert__content > p { color: rgba(255,255,255,0.5); margin-bottom: 40px; max-width: 440px; font-size: 16px; line-height: 1.7; }

.efn-expert__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .efn-categories__grid { grid-template-columns: repeat(2, 1fr); }
  .efn-categories__card--big { aspect-ratio: 3/4; }
  .efn-spotlight__grid { grid-template-columns: 1fr; gap: 48px; }
  .efn-trust__inner { grid-template-columns: 1fr; }
  .efn-trust__media { min-height: 280px; }
  .efn-expert__grid { grid-template-columns: 1fr; }
  .efn-expert__media { max-height: 320px; }
}
/* Tablet intermediate (2-col) — prevents 3→1 jump */
@media (max-width: 1024px) and (min-width: 768px) {
  .efn-best__grid,
  .efn-complete__grid,
  .efn-education__grid,
  .efn-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .efn-categories__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .efn-spotlight__grid { grid-template-columns: 1fr; gap: 24px; }
  .efn-trust__inner { grid-template-columns: 1fr; gap: 24px; }
  .efn-reviews__grid { grid-template-columns: 1fr; }
  .efn-reviews__summary { flex-wrap: wrap; padding: 20px; gap: 12px; }
  .efn-expert__ctas { flex-direction: column; }
  .efn-expert__ctas .efn-btn { width: 100%; }
}

/* ═══ HERO BUTTON HOVER FIX ═══ */

/* ═══ TYPE SELECTOR — Exact mockup colors ═══ */

/* Section: dark graphite with subtle glow */
.shopify-section--ef-type-selector {
  position: relative;
  overflow: hidden;
}
.shopify-section--ef-type-selector::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -8%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138,106,67,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Heading: white */
h2.ef-type-selector__heading,
.ef-type-selector__heading.h2,
.ef-type-selector__heading {
  color: #FEFCF9 !important;
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 400;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

/* Subtext: soft white */

/* Cards: dark graphite-light background */

/* Card image: 16:9, slight opacity */

.ef-type-selector__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: all 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ef-type-selector__card:hover .ef-type-selector__card-image img {
  opacity: 1;
  transform: scale(1.04);
}

/* Card body */

/* Card title: white, Cormorant */

/* Card description: soft white */

/* Help link: soft white, bronze link */

.ef-type-selector__help a {
  color: #B8955F !important;
  border-bottom: 1px solid rgba(184,149,95,0.4) !important;
  padding-bottom: 1px;
  text-decoration: none !important;
}
.ef-type-selector__help a:hover {
  border-color: #B8955F !important;
  color: #fff !important;
}

/* ═══ EFN BESTSELLERS — collection-based with auto-badges ═══ */

/* Product card */

.efn-pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.22,1,0.36,1); }
.efn-pcard:hover .efn-pcard__img img { transform: scale(1.04); }

/* Auto badges */

/* Card body */

.efn-pcard__price span { font-weight: 400; color: #5C5852; font-size: 13px; margin-left: 4px; }

/* Customize Now button */

@media (max-width: 767px) {
  .efn-best__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .efn-best__chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; scrollbar-width: none; }
  .efn-best__chips::-webkit-scrollbar { display: none; }
}

/* ═══ EFN SPOTLIGHT — Button fix + hover animation ═══ */

/* Hover animation on value rows */

/* ═══ EFN COMPLETE LOOK — Pair Your Door With These ═══ */

.efn-complete__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.22,1,0.36,1); }
.efn-complete__card:hover .efn-complete__img img { transform: scale(1.04); }

.efn-complete__body .efn-label { margin-bottom: 6px; display: block; }

.efn-ghost-link svg { width: 14px; height: 14px; }

/* Complete Look responsive */
@media (max-width: 767px) {
  .efn-complete__grid { grid-template-columns: 1fr; gap: 16px; }
  .efn-complete__img { aspect-ratio: 16/9; }
  .efn-complete__title { font-size: 20px; }
}

/* ═══ EFN EDUCATION — Expert Guides ═══ */
.efn-education { padding: clamp(72px,8.5vw,140px) 0; background: #F7F3EE; font-family: var(--text-font-family); }
.efn-education *,
.efn-education h1,
.efn-education h2,
.efn-education h3,
.efn-education h4,
.efn-education p,
.efn-education span,
.efn-education a { font-family: var(--text-font-family); }
.efn-education__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.efn-education__card { background: #FEFCF9; border: 1px solid #E8E2D9; border-radius: 12px; padding: 36px 32px; transition: all 260ms cubic-bezier(0.22,1,0.36,1); cursor: pointer; display: block; text-decoration: none; color: inherit; }
.efn-education__card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(30,30,27,0.07); border-color: #8A6A43; }
.efn-education__icon { width: 50px; height: 50px; background: #F7F3EE; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; color: #8A6A43; }
.efn-education__icon svg { width: 24px; height: 24px; }
.efn-education__title { font-family: var(--heading-font-family); font-size: 22px; font-weight: 500; color: #1E1E1B; margin-bottom: 10px; line-height: 1.3; }
.efn-education__desc { font-size: 14px; color: #5C5852; line-height: 1.65; margin-bottom: 22px; }
.efn-education__time { font-size: 12px; color: #5C5852; display: flex; align-items: center; gap: 5px; }
.efn-education__time svg { width: 13px; height: 13px; }
@media (max-width: 767px) {
  .efn-education__grid { grid-template-columns: 1fr; gap: 16px; }
  .efn-education__card { padding: 24px 20px; }
}

/* ═══ EFN BEFORE & AFTER — Interactive Slider ═══ */

.efn-ba__layer img { width: 100%; height: 100%; object-fit: cover; }

.efn-ba__handle::before { content: ''; position: absolute; width: 48px; height: 48px; border-radius: 50%; background: #FEFCF9; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 4px 24px rgba(0,0,0,0.15); }
.efn-ba__handle::after { content: '‹ ›'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 16px; color: #1E1E1B; z-index: var(--z-base); font-weight: 600; letter-spacing: 8px; }

@media (max-width: 767px) {
  .efn-ba__slider { aspect-ratio: 16/10; }
  .efn-ba__callout { right: 12px; top: 12px; padding: 14px 16px; min-width: 160px; }
  .efn-ba__callout-title { font-size: 16px; }
}

/* ═══ FOOTER — Dark styling to match mockup ═══ */
.shopify-section-group-footer-group .footer,
.shopify-section-group-footer-group [class*="footer"] {
  --scheme-background: #1E1E1B;
  --scheme-text: #9A9590;
}
.shopify-section-group-footer-group {
  background: #1E1E1B !important;
  color: #9A9590 !important;
}
.shopify-section-group-footer-group h2,
.shopify-section-group-footer-group h3,
.shopify-section-group-footer-group h4,
.shopify-section-group-footer-group .footer__block-title {
  color: #FEFCF9 !important;
  font-size: 11px;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 600;
}
.shopify-section-group-footer-group a {
  color: #9A9590 !important;
  text-decoration: none !important;
  transition: color 260ms ease !important;
}
.shopify-section-group-footer-group a:hover {
  color: #FEFCF9 !important;
}
.shopify-section-group-footer-group .footer__copyright,
.shopify-section-group-footer-group .footer__bottom {
  color: #5C5852 !important;
  border-color: rgba(184,149,95,0.12) !important;
}
.shopify-section-group-footer-group input[type="email"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #FEFCF9 !important;
  border-radius: 6px !important;
}
.shopify-section-group-footer-group input[type="email"]::placeholder {
  color: #5C5852 !important;
}
.shopify-section-group-footer-group button[type="submit"],
.shopify-section-group-footer-group .footer__newsletter-button {
  background: #8A6A43 !important;
  color: #FEFCF9 !important;
  border-radius: 6px !important;
  border: none !important;
}
.shopify-section-group-footer-group button[type="submit"]:hover {
  background: #A07D52 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — Minimal overrides (respects Theme Settings)
   ═══════════════════════════════════════════════════════════════ */

/* Background & border only */
#shopify-section-header .header,
.shopify-section--header .header {
  background: #FEFCF9;
  border-bottom: 1px solid #E8E2D9 !important;
  box-shadow: none !important;
}

/* Nav hover color */
.header__primary-nav-item > a:hover,
.header__primary-nav-item > details > summary:hover {
  color: #6F5336 !important;
}

/* Active page — bronze underline */
.header__primary-nav-item > a[aria-current="page"] {
  color: #6F5336 !important;
  text-decoration: underline !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 1.5px !important;
  text-decoration-color: #6F5336 !important;
}

/* Icons — ALL black */
.header__secondary-nav .header__icon,
.header__secondary-nav .header__icon:hover,
.header .header__icon,
.header .header__nav-icon {
  color: #1E1E1B;
}
.header__secondary-nav svg,
.header .header__nav-icon svg {
  color: #1E1E1B;
  stroke: currentColor !important;
}

/* Phone number — clickable link injected via JS */
.header__secondary-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ef-phone-link svg {
  flex-shrink: 0;
}

/* Hide currency selector */
.header .localization-selectors,
.header__secondary-nav .localization-selectors {
  display: none !important;
}

/* Cart dot — black */
.header__cart-dot.is-visible {
  background: #1E1E1B !important;
}

/* Trust bar — tighter */

@media (min-width: 1000px) {
  .header .header__icon--menu { display: none !important; }
}
@media (max-width: 999px) {
  .ef-phone-link { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — Dark charcoal matching mockup
   ═══════════════════════════════════════════════════════════════ */

/* Main footer section */
.shopify-section--footer,
.shopify-section--footer .footer {
  background: #1E1E1B !important;
  color: #9A9590 !important;
}

/* Force color scheme override */
.shopify-section--footer .footer.color-scheme {
  --scheme-background: 30 30 27 !important;
  --scheme-text: 154 149 144 !important;
  background: #1E1E1B !important;
  color: #9A9590 !important;
}

/* Footer block titles */
.shopify-section--footer .footer h2,
.shopify-section--footer .footer h3,
.shopify-section--footer .footer h4,
.shopify-section--footer .footer__block-title,
.shopify-section--footer .footer .h6 {
  color: #FEFCF9 !important;
  font-size: 11px;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 600;
}

/* Footer links */
.shopify-section--footer .footer a {
  color: #9A9590 !important;
  text-decoration: none !important;
}
.shopify-section--footer .footer a:hover {
  color: #FEFCF9 !important;
}

/* Footer text */
.shopify-section--footer .footer p,
.shopify-section--footer .footer .rte {
  color: #9A9590 !important;
}

/* Footer bottom bar */
.shopify-section--footer .footer__aside,
.shopify-section--footer .footer__bottom {
  color: #5C5852 !important;
  border-color: rgba(184,149,95,0.12) !important;
}
.shopify-section--footer .footer__aside a {
  color: #5C5852 !important;
}

/* Newsletter input */
.shopify-section--footer .footer input[type="email"],
.shopify-section--footer .footer .input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #FEFCF9 !important;
  border-radius: 6px !important;
}
.shopify-section--footer .footer input::placeholder {
  color: #5C5852 !important;
}

/* Subscribe button */
.shopify-section--footer .footer button[type="submit"],
.shopify-section--footer .footer .button {
  background: #8A6A43 !important;
  color: #FEFCF9 !important;
  border-radius: 6px !important;
  border: none !important;
}
.shopify-section--footer .footer button[type="submit"]:hover,
.shopify-section--footer .footer .button:hover {
  background: #A07D52 !important;
}

/* Country selector in footer — also dark */
.shopify-section--footer .footer .localization-selectors {
  color: #5C5852 !important;
}
.shopify-section--footer .footer .localization-selectors button {
  color: #5C5852 !important;
}

/* Payment icons — dim them slightly */
.shopify-section--footer .footer__payment-icons img {
  opacity: 0.6;
  filter: brightness(0.8);
}

/* Text with icons section above footer */
.shopify-section--text-with-icons {
  background: #1E1E1B !important;
  color: #9A9590 !important;
}
.shopify-section--text-with-icons .color-scheme {
  background: #1E1E1B !important;
  color: #9A9590 !important;
}

/* Cart indicator dot */
.header__cart-dot.is-visible {
  background: #1E1E1B !important;
}

/* Trust bar — hide phone + actions, center messages */

/* ═══ ANNOUNCEMENT BAR — Dark graphite matching trust bar ═══ */
.shopify-section--announcement-bar,
.shopify-section--announcement-bar .announcement-bar,
.shopify-section--announcement-bar .announcement-bar.color-scheme {
  background: #242628 !important;
  color: #F7F3EE !important;
  --scheme-background: 36 38 40 !important;
  --scheme-text: 247 243 238 !important;
}
/* Force ALL text white */
.shopify-section--announcement-bar .announcement-bar *,
.shopify-section--announcement-bar .announcement-bar span,
.shopify-section--announcement-bar .announcement-bar p,
.shopify-section--announcement-bar .announcement-bar a,
.shopify-section--announcement-bar .announcement-bar__carousel {
  color: #F7F3EE !important;
}
.shopify-section--announcement-bar .announcement-bar a:hover {
  color: #B8955F !important;
}
/* Arrows */
.shopify-section--announcement-bar .announcement-bar button,
.shopify-section--announcement-bar .announcement-bar svg {
  color: #F7F3EE !important;
  stroke: #F7F3EE !important;
}
/* Text style — inherits size from theme settings */
.shopify-section--announcement-bar .announcement-bar__carousel {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ═══ EF TRUST BAR — Mobile: show only first 3 messages ═══ */
@media (max-width: 767px) {
  .ef-trust-bar__message:nth-child(n+4),
  .ef-trust-bar__message:nth-child(n+4) + .ef-trust-bar__divider,
  .ef-trust-bar__divider:nth-of-type(n+4) {
    display: none !important;
  }
}

/* ═══ EF UTILITY BAR — Dark graphite, single top bar ═══ */
.ef-ubar {
  background: #242628;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(184,149,95,0.08);
  transform: translateY(0);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  will-change: transform;
}
.ef-ubar--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.ef-ubar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: min(1400px, 93vw);
  margin: 0 auto;
  padding: 9px 24px;
}
/* Phone number — desktop only */
.ef-ubar__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #F5F0E8 !important;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 260ms ease;
}
.ef-ubar__phone:hover {
  color: #B8955F !important;
}
.ef-ubar__phone svg {
  color: #B8955F;
  flex-shrink: 0;
}
/* Diamond dividers */
.ef-ubar__diamond {
  color: rgba(184,149,95,0.25);
  font-size: 6px;
  line-height: 1;
  flex-shrink: 0;
  margin: 0 16px;
  opacity: 0.4;
}
.ef-ubar__blocks {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}
.ef-ubar__block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 260ms ease;
}
.ef-ubar__block:hover .ef-ubar__title {
  color: #B8955F;
}
.ef-ubar__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B8955F;
}
.ef-ubar__icon svg {
  width: 22px;
  height: 22px;
}
.ef-ubar__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ef-ubar__title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F5F0E8;
  transition: color 260ms ease;
}
.ef-ubar__desc {
  font-size: 11.5px;
  color: rgba(245,240,232,0.65);
}
.ef-ubar__link {
  color: #B8955F !important;
  font-weight: 600;
  transition: color 260ms ease;
}
.ef-ubar__block:hover .ef-ubar__link {
  color: #F5F0E8 !important;
}
/* CTA — pill shape */
.ef-ubar__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 24px;
  background: #8A6A43 !important;
  color: #FEFCF9 !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 6px;
  transition: all 260ms ease;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 24px;
}
.ef-ubar__cta:hover {
  background: #A07D52 !important;
  color: #FEFCF9 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(138,106,67,0.35);
}

/* Mobile rotating messages */
.ef-ubar__mobile-rotate {
  display: none;
}
.ef-ubar__mobile-msg {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F5F0E8;
  transition: opacity 300ms ease;
}

/* Tablet */
@media (max-width: 1024px) {
  .ef-ubar__diamond { margin: 0 10px; }
  .ef-ubar__desc { display: none; }
}
/* Mobile */
@media (max-width: 767px) {
  .ef-ubar__inner { display: none; }
  .ef-ubar__mobile-rotate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    min-height: 38px;
    text-align: center;
  }
  .ef-ubar__phone { display: none; }
}

/* ═══ BAR COLORS ═══ */
/* Single utility bar: dark graphite */
.shopify-section--ef-utility-bar,
.shopify-section--ef-utility-bar .ef-ubar,
.ef-ubar {
  background: #242628 !important;
}

/* ═══ HERO — Force ivory background (prevent Prestige override) ═══ */
.ef-hero-split,
.shopify-section--ef-hero .ef-hero-split,
#shopify-section-template--*__ef_hero .ef-hero-split,
[class*="shopify-section"] .ef-hero-split {
  background: #F7F3EE !important;
}

/* ═══ EF CATEGORIES — Force dark background ═══ */
.ef-categories,
.shopify-section .ef-categories,
[class*="shopify-section"] .ef-categories {
  background: #242628 !important;
}
/* Prevent color scheme leaking INTO categories */
.ef-categories .ef-section-header .ef-heading-lg,
.ef-categories .ef-cat-title {
  color: #FEFCF9 !important;
}
.ef-categories .ef-section-header p,
.ef-categories .ef-body-md {
  color: rgba(255,255,255,0.5) !important;
}
.ef-categories .ef-label {
  color: #B8955F !important;
}
/* Prevent categories leaking OUT to other sections */
.ef-categories + * {
  background: inherit;
}

/* Hide announcement bar (replaced by utility bar) */
.shopify-section--announcement-bar {
  display: none !important;
}

/* ═══ FOOTER — Premium enhancements (matching Glorin design) ═══ */

/* Store name with italic */
.shopify-section--footer .footer__block--text:first-child .h6 em,
.shopify-section--footer .footer__block--text:first-child em {
  font-style: italic !important;
  font-weight: 400;
}
.shopify-section--footer .footer__block--text:first-child .h6,
.shopify-section--footer .footer__block--text:first-child .footer__block-title {
  font-family: var(--heading-font-family);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #FEFCF9 !important;
}

/* Phone number in footer — prominent */
.shopify-section--footer .footer a[href^="tel:"] {
  color: #FEFCF9 !important;
  font-weight: 600;
  font-size: 15px;
}
.shopify-section--footer .footer a[href^="tel:"]:hover {
  color: #B8955F !important;
}

/* Consultation link — bronze accent */
.shopify-section--footer .footer a[href*="contact"],
.shopify-section--footer .footer a[href*="consultation"],
.shopify-section--footer .footer a[href*="calendly"] {
  color: #B8955F !important;
  font-weight: 500;
}

/* Newsletter heading bigger */
.shopify-section--footer .footer__block--newsletter .h6,
.shopify-section--footer .footer__block--newsletter .footer__block-title {
  font-size: 14px;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  font-weight: 600;
}

/* Copyright — cleaner */
.shopify-section--footer .footer__copyright {
  font-size: 12px;
  color: #5C5852 !important;
}

/* Payment icons — subtle */
.shopify-section--footer .footer .payment-icon {
  opacity: 0.5;
  transition: opacity 260ms ease;
}
.shopify-section--footer .footer .payment-icon:hover {
  opacity: 0.8;
}

/* Social icons */
.shopify-section--footer .footer .social-media a {
  color: #5C5852 !important;
}
.shopify-section--footer .footer .social-media a:hover {
  color: #FEFCF9 !important;
}

/* ═══ EFN Reviews — CTA button ═══ */

/* ═══════════════════════════════════════════════════
   PRESTIGE MAIN-COLLECTION HIDE — REMOVED 2026-04-28
   `main-collection` section deleted from all collection JSON templates.
   Server no longer double-renders 24+48 product cards per page.
   Hiding rule no longer needed.
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   GRID v2 FILTER BAR — Responsive Overrides
   Force All Filters visible, hide secondary on small desktops,
   mobile: only All Filters + Sort.
   ═══════════════════════════════════════════════════ */
.ef-cv2__filter-btn,
html body .ef-cv2__filter-btn,
html body .ef-cv2__bar-right .ef-cv2__filter-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 115px !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 9px 16px !important;
}
.ef-cv2__bar-right {
  flex-shrink: 0 !important;
}
.ef-cv2__bar-inner {
  flex-wrap: wrap !important;
}
@media (max-width: 767px) {
  .ef-cv2__pills--primary,
  .ef-cv2__pills--secondary {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .ef-cv2__pills--primary::-webkit-scrollbar,
  .ef-cv2__pills--secondary::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════
   EF COLLECTION FILTERS — Mockup Match
   ═══════════════════════════════════════════════════ */
.ef-cf {
  background: #F7F3EE;
  padding: clamp(24px,3vw,36px) 0 clamp(20px,2.5vw,28px);
}
.ef-cf__wrap {
  max-width: min(1340px, 92vw);
  margin: 0 auto;
}
.ef-cf__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ef-cf__pills {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
  padding-bottom: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ef-cf__pills::-webkit-scrollbar { display: none; }
.ef-cf__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 24px;
  height: 46px;
  border-radius: 8px;
  border: 1.5px solid #D5CEC3;
  font-family: var(--text-font-family, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: #1E1E1B;
  background: #FEFCF9;
  transition: all 240ms cubic-bezier(0.22,1,0.36,1);
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  line-height: 1;
}
.ef-cf__pill:hover {
  border-color: #8A6A43;
  color: #1E1E1B;
}
.ef-cf__pill svg {
  color: inherit !important;
}
.ef-cf__pill:hover svg {
  color: inherit !important;
}
.ef-cf__pill--on {
  background: #1E1E1B !important;
  border-color: #1E1E1B;
  color: #FEFCF9 !important;
}
.ef-cf__pill--on svg {
  color: #FEFCF9 !important;
}
.ef-cf__pill--on:hover {
  background: #1E1E1B !important;
  border-color: #1E1E1B;
  color: #FEFCF9 !important;
}
.ef-cf__pill--allfilters {
  background: #1E1E1B;
  color: #FEFCF9 !important;
  border-color: #1E1E1B;
  flex-shrink: 0;
  padding: 0 18px;
}
.ef-cf__pill--allfilters svg {
  color: #FEFCF9 !important;
}
.ef-cf__pill--allfilters:hover {
  background: #333;
  border-color: #333;
  color: #FEFCF9 !important;
}
.ef-cf__ic {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
}

/* Right side — view + sort */
.ef-cf__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
/* ── Benefit bar ── */
.ef-cf__benefit {
  margin-top: 14px;
  overflow: hidden;
}
.ef-cf__benefit-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #F9F6F1 0%, #F3EDE4 100%);
  border: 1px solid #E8E2D9;
  border-radius: 8px;
  animation: ef-benefit-in 400ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes ef-benefit-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ef-cf__benefit-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #1E1E1B;
  border-radius: 50%;
  color: #FEFCF9;
}
.ef-cf__benefit-text {
  font-family: var(--text-font-family, sans-serif);
  font-size: 13px;
  color: #4A4740;
  line-height: 1.5;
}
.ef-cf__benefit-text strong {
  color: #1E1E1B;
  font-weight: 600;
}
.ef-cf__benefit-highlight {
  color: #6F5336;
  font-weight: 600;
}
/* ── Responsive pills — always one line, shrink to fit ── */
@media (max-width: 1400px) {
  .ef-cf__pill { padding: 0 16px; height: 42px; font-size: 13px; gap: 5px; }
  .ef-cf__pills { gap: 8px; }
  .ef-cf__bar { gap: 12px; }
  .ef-cf__ic { width: 14px; height: 14px; }
}
@media (max-width: 1200px) {
  .ef-cf__pill { padding: 0 12px; height: 40px; font-size: 12px; gap: 4px; }
  .ef-cf__pills { gap: 6px; flex-wrap: nowrap; }
  .ef-cf__bar { gap: 8px; }
  .ef-cf__right { gap: 6px; }
  .ef-cf__ic { width: 13px; height: 13px; }
  .ef-cf__pill--secondary { display: none !important; }
  .ef-cf__dropdown { display: none !important; }
}
@media (max-width: 999px) {
  .ef-cf__pill { padding: 0 10px; height: 38px; font-size: 11px; gap: 3px; }
  .ef-cf__pills { gap: 5px; }
  .ef-cf__bar { gap: 6px; }
  .ef-cf__ic { width: 12px; height: 12px; }
}

/* Mobile: hide benefit bar below 767px */
@media (max-width: 767px) {
  .ef-cf__benefit { display: none; }
}

/* Dropdown filter pill */
.ef-cf__dropdown {
  position: relative;
  flex-shrink: 0;
}
.ef-cf__pill--drop {
  background: #FEFCF9;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  font-family: var(--text-font-family, sans-serif);
}
.ef-cf__pill--drop-open {
  border-color: #8A6A43;
  color: #6F5336;
}
.ef-cf__pill--drop-open .ef-cf__chev {
  transform: rotate(180deg);
}
.ef-cf__chev {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}
.ef-cf__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: #FEFCF9;
  border: 1px solid #DED6CB;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(30,30,27,0.1);
  padding: 6px 0;
  z-index: var(--z-dropdown);
}
.ef-cf__dropdown-menu--open {
  display: block;
}
.ef-cf__dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 18px;
  font-size: 13px;
  color: #1E1E1B;
  text-decoration: none !important;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--text-font-family, sans-serif);
  cursor: pointer;
  outline: none;
  transition: background 150ms ease;
}
.ef-cf__dropdown-item:hover {
  background: rgba(138,106,67,0.06);
  color: #6F5336;
}

.ef-cf__count {
  font-size: 13px;
  color: #5C5852;
  white-space: nowrap;
  flex-shrink: 0;
}
/* View dropdown (grid + sort combined) */
.ef-cf__view-dropdown { position: relative; flex-shrink: 0; }
.ef-cf__pill--view {
  gap: 4px;
  padding: 0 18px;
}
.ef-cf__view-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #FEFCF9;
  border: 1px solid #DED6CB;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(30,30,27,0.1);
  padding: 16px;
  z-index: var(--z-dropdown);
}
.ef-cf__view-menu--open { display: block; }
.ef-cf__view-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5C5852;
  margin-bottom: 8px;
}
.ef-cf__view-options {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.ef-cf__view-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  border: 1.5px solid #E8E2D9;
  border-radius: 8px;
  background: transparent;
  color: #B0A898;
  cursor: pointer;
  transition: all 200ms ease;
  padding: 0;
}
.ef-cf__view-opt:hover { border-color: #8A6A43; color: #1E1E1B; }
.ef-cf__view-opt--on {
  background: #1E1E1B;
  border-color: #1E1E1B;
  color: #FEFCF9;
}
@media (max-width: 1023px) {
  .ef-cf__view-dropdown { display: none; }
}
.ef-cf__sort-dropdown { position: relative; flex-shrink: 0; }
.ef-cf__pill--sort { gap: 6px; padding: 0 18px; }
.ef-cf__pill--sort svg:first-child { color: inherit; }
.ef-cf__sort-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #FEFCF9;
  border: 1px solid #DED6CB;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(30,30,27,0.12);
  padding: 6px;
  z-index: var(--z-dropdown);
}
.ef-cf__sort-menu--open { display: block; }
.ef-cf__sort-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: var(--text-font-family, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: #5C5852;
  cursor: pointer;
  transition: all 180ms ease;
  text-align: left;
}
.ef-cf__sort-item:hover { background: #F7F3EE; color: #1E1E1B; }
.ef-cf__sort-item--on { color: #1E1E1B; font-weight: 600; background: #F7F3EE; }
.ef-cf__sort-item-icon { display: flex; align-items: center; color: #B0A898; flex-shrink: 0; }
.ef-cf__sort-item--on .ef-cf__sort-item-icon { color: #8A6A43; }
.ef-cf__sort-item:hover .ef-cf__sort-item-icon { color: #8A6A43; }
.ef-cf__sort-check { margin-left: auto; color: #8A6A43; flex-shrink: 0; }
@media (max-width: 767px) {
  .ef-cf__sort-dropdown { display: none; }
}

.ef-cf__sort {
  width: 100%;
  padding: 10px 28px 10px 12px;
  border: 1.5px solid #D5CEC3;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1E1E1B;
  background: #FEFCF9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235C5852' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/11px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 240ms ease;
}
.ef-cf__sort:hover,
.ef-cf__sort:focus {
  border-color: #8A6A43;
  outline: none;
}

/* Active tags */
.ef-cf__active {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 16px 0 0;
}
.ef-cf__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #EDE8E1;
  color: #5C5852;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 200ms ease;
  cursor: pointer;
}
.ef-cf__tag:hover {
  background: #DED6CB;
}
.ef-cf__tag svg {
  width: 11px;
  height: 11px;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════
   EF COLLECTION GRID — Mockup Match
   ═══════════════════════════════════════════════════ */

.ef-grid__list {
  display: grid;
  grid-template-columns: repeat(var(--ef-cols, 3), 1fr);
  gap: clamp(16px, 2vw, 24px);
}

/* ─── CARD ─── */
.ef-card {
  display: flex;
  flex-direction: column;
  background: #FEFCF9;
  border: 1px solid #E5DFD5;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none !important;
  color: #1E1E1B;
  transition: border-color 300ms cubic-bezier(0.22,1,0.36,1), box-shadow 300ms cubic-bezier(0.22,1,0.36,1);
  isolation: isolate;
}
.ef-card:hover {
  border-color: #C4B7A4;
  box-shadow: 0 20px 56px rgba(30,30,27,0.08);
}

/* ─── Image area ─── */
.ef-card__media {
  position: relative;
  aspect-ratio: 1 / 0.82;
  overflow: hidden;
  background: #DDD7CC;
}
.ef-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22,1,0.36,1), opacity 400ms ease;
}
.ef-card__img--hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ef-card:hover .ef-card__img:not(.ef-card__img--hover) {
  transform: scale(1.05);
}
.ef-card:hover .ef-card__img--hover {
  opacity: 1;
  transform: scale(1.05);
}
.ef-card__placeholder {
  width: 100%;
  height: 100%;
  background: #DDD7CC;
}

/* Watermark title overlay */

/* Badges */
.ef-card__badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: var(--z-base);
}

.ef-card__badge svg {
  width: 12px;
  height: 12px;
}

/* Type badge — bottom-right of card image */
.ef-card__type-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 5px 11px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-base);
  pointer-events: none;
}
.ef-card__type-badge--customize { background: rgba(30,30,27,0.82); color: #FEFCF9; }
.ef-card__type-badge--size-only { background: rgba(20,40,20,0.85); color: #7AC792; }
.ef-card__type-badge--custom-made { background: rgba(138,106,67,0.85); color: #FEFCF9; }

/* 3D View in Room badge — Prestige product cards */
.badge--ar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(30, 30, 27, 0.85) !important;
  color: #FEFCF9 !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 240ms ease;
  z-index: var(--z-base);
}
.badge--ar svg { color: #B8955F; flex-shrink: 0; }
.badge--ar:hover { background: rgba(138, 106, 67, 0.9) !important; }
.product-card:hover .badge--ar { background: rgba(138, 106, 67, 0.9) !important; }

/* 3D View in Room badge — EF custom cards */
.ef-card__3d-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(30,30,27,0.85);
  color: #FEFCF9;
  border-radius: 6px;
  font-family: var(--text-font-family, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  z-index: var(--z-base);
  transition: all 240ms ease;
}
.ef-card__3d-badge svg { color: #B8955F; flex-shrink: 0; }
.ef-card:hover .ef-card__3d-badge { background: rgba(138,106,67,0.9); }
@media (max-width: 767px) {
  .ef-card__3d-badge { display: none; }
}

/* Wishlist heart */
.ef-card__heart {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(254,252,249,0.85);
  border: 1px solid rgba(228,222,213,0.6);
  color: #5C5852;
  cursor: pointer;
  transition: all 240ms ease;
  padding: 0;
  outline: none;
}
.ef-card__heart svg {
  width: 18px;
  height: 18px;
}
.ef-card__heart:hover {
  color: #C53030;
  background: rgba(254,252,249,0.95);
}
.ef-card__heart--on {
  color: #C53030 !important;
}
.ef-card__heart--on svg {
  fill: #C53030;
}

/* ─── Body ─── */
.ef-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: clamp(16px,1.8vw,24px);
  gap: 6px;
}
.ef-card__vendor {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6F5336;
}
h3.ef-card__title,
.ef-card .ef-card__title {
  font-family: var(--text-font-family);
  font-size: 15px;
  font-weight: 600;
  color: #1E1E1B;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
  flex: 1;
}
h3.ef-card__title a,
.ef-card .ef-card__title a {
  color: inherit;
  text-decoration: none;
}

/* Price */
.ef-card__pricing {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ef-card__from {
  font-size: 13px;
  font-weight: 500;
  color: #5C5852;
}
.ef-card__price {
  font-family: var(--text-font-family, sans-serif);
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 600;
  color: #1E1E1B;
}
.ef-card__price--sale {
  color: #6F5336;
}
.ef-card__compare {
  font-size: 13px;
  color: #B0A898;
  text-decoration: line-through;
  font-weight: 400;
}

/* Stars + finishes row */
.ef-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
}
.ef-card__stars {
  display: flex;
  align-items: center;
  gap: 1px;
}
.ef-card__star {
  width: 14px;
  height: 14px;
  color: #8A6A43;
}
.ef-card__star--full {
  color: #8A6A43;
}
.ef-card__review-count {
  font-size: 12px;
  color: #5C5852;
  margin-left: 4px;
}

/* CTA buttons */
.ef-card__ctas {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.ef-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 13px 16px;
  background: #1E1E1B;
  color: #FEFCF9 !important;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background 240ms ease;
}
.ef-card__cta svg {
  width: 14px;
  height: 14px;
}
/* Shipping info inline */
.ef-card__ship-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #5C5852;
  white-space: nowrap;
}
.ef-card__ship-inline svg {
  stroke: #5C5852;
  fill: none;
  flex-shrink: 0;
}

.ef-card__cta::before,
.ef-card__cta::after,
.ef-card__cta a::before,
.ef-card__cta a::after,
.ef-card__quick::before,
.ef-card__quick::after,
.ef-bs-card__cta::before,
.ef-bs-card__cta::after,
.ef-bs-card__link::before,
.ef-bs-card__link::after,
.ef-bs-card a::before,
.ef-bs-card a::after {
  content: none !important;
}
.ef-card__cta:hover {
  background: #8A6A43;
}

/* CTA micro-animations — gear spin, checkmark draw, arrow nudge */
.ef-cta-gear { transition: transform 240ms ease; }
.ef-card:hover .ef-cta-gear { animation: ef-gear-spin 1s linear infinite; }
@keyframes ef-gear-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Expand arrows on hover — 4 corners spread out */
.ef-cta-expand { flex-shrink: 0; }
.ef-expand-tl, .ef-expand-tl-line { transition: transform 280ms cubic-bezier(0.22,1,0.36,1); }
.ef-expand-tr, .ef-expand-tr-line { transition: transform 280ms cubic-bezier(0.22,1,0.36,1); }
.ef-expand-bl, .ef-expand-bl-line { transition: transform 280ms cubic-bezier(0.22,1,0.36,1); }
.ef-expand-br, .ef-expand-br-line { transition: transform 280ms cubic-bezier(0.22,1,0.36,1); }
.ef-card:hover .ef-expand-tl, .ef-card:hover .ef-expand-tl-line { transform: translate(-2px, -2px); }
.ef-card:hover .ef-expand-tr, .ef-card:hover .ef-expand-tr-line { transform: translate(2px, -2px); }
.ef-card:hover .ef-expand-bl, .ef-card:hover .ef-expand-bl-line { transform: translate(-2px, 2px); }
.ef-card:hover .ef-expand-br, .ef-card:hover .ef-expand-br-line { transform: translate(2px, 2px); }

.ef-cta-check path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 400ms cubic-bezier(0.22,1,0.36,1); }
.ef-card:hover .ef-cta-check path { stroke-dashoffset: 0; }

.ef-cta-arrow { transition: transform 240ms cubic-bezier(0.22,1,0.36,1); flex-shrink: 0; }
.ef-card:hover .ef-cta-arrow { transform: translateX(3px); }
.ef-card__quick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  background: transparent;
  color: #1E1E1B;
  border: 1.5px solid #DED6CB;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 240ms ease;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--text-font-family, sans-serif);
  appearance: none;
  position: relative;
  z-index: var(--z-base);
}
.ef-card__quick svg {
  width: 14px;
  height: 14px;
}
.ef-card__quick:hover {
  border-color: #8A6A43;
  color: #6F5336 !important;
}

/* ─── Pagination ─── */

.ef-grid__pag-btn svg {
  width: 16px;
  height: 16px;
}

/* Empty */

.ef-grid__empty svg {
  width: 48px;
  height: 48px;
  color: #B0A898;
  margin-bottom: 16px;
}
.ef-grid__empty h3 {
  font-family: var(--heading-font-family, serif);
  font-size: 22px;
  color: #1E1E1B;
  margin: 0 0 8px;
}
.ef-grid__empty p {
  font-size: 15px;
  color: #5C5852;
}
.ef-grid__empty a {
  color: #6F5336;
}

/* AJAX Loading */
.ef-grid[data-ef-loading] .ef-grid__list {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile Ecommerce Experience
   ═══════════════════════════════════════════════════ */

/* Mobile toolbar — hidden on desktop */
.ef-cf__mobile-bar {
  display: none;
}

.ef-cf__layout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid #D5CEC3;
  background: #FEFCF9;
  color: #5C5852;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: all 200ms ease;
}
.ef-cf__layout-btn svg {
  width: 18px;
  height: 18px;
}
.ef-cf__layout-btn--on {
  background: #1E1E1B;
  border-color: #1E1E1B;
  color: #FEFCF9;
}

/* Tablet — 2 cols */
@media (max-width: 999px) {
  .ef-grid__list { --ef-cols: 2 !important; }
}

/* Mobile — full redesign */
@media (max-width: 1023px) {

  /* ── Sticky filter section ── */
  .ef-cf {
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    padding: 14px 0 12px;
    background: #F7F3EE;
    border-bottom: 1px solid #E8E2D9;
    box-shadow: 0 2px 12px rgba(30,30,27,0.04);
  }
  .ef-cf__wrap {
    max-width: 100%;
    padding: 0;
  }

  /* ── On tablets: hide pills, keep bar for All Filters + Sort ── */
  .ef-cf__pills {
    display: none !important;
  }

  /* ── Mobile card styling ── */
  .ef-cf__ic { width: 14px; height: 14px; }

  /* ── Dropdowns — full width on mobile ── */
  .ef-cf__dropdown { position: static; }
  .ef-cf__dropdown-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    min-width: 100%;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(30,30,27,0.18);
    padding: 8px 0 env(safe-area-inset-bottom, 16px);
    z-index: var(--z-sticky);
    max-height: 60vh;
    overflow-y: auto;
  }
  .ef-cf__dropdown-menu::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #DED6CB;
    border-radius: 2px;
    margin: 8px auto 12px;
  }
  .ef-cf__dropdown-item {
    padding: 14px 24px;
    font-size: 15px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  /* Backdrop overlay */
  .ef-cf__dropdown-menu--open ~ .ef-cf__backdrop,
  .ef-cf__dropdown .ef-cf__dropdown-menu--open + .ef-cf__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Sort + count — compact row ── */
  .ef-cf__count { font-size: 13px; }
  .ef-cf__sort {
    font-size: 13px;
    padding: 10px 32px 10px 14px;
    border-radius: 8px;
  }

  /* ── Active tags — horizontal scroll ── */
  .ef-cf__active {
    padding: 10px 16px 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ef-cf__active::-webkit-scrollbar { display: none; }
  .ef-cf__tag {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 12px;
    min-height: 36px;
  }

  /* ── Mobile toolbar — only shown at ≤767px, not here ── */
  .ef-cf__mobile-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 24px;
    font-family: var(--text-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all 180ms ease;
  }
  .ef-cf__mobile-pill--filters {
    background: #1E1E1B;
    color: #FFFFFF;
    border: 1px solid #1E1E1B;
  }
  .ef-cf__mobile-pill--filters svg { color: #FFFFFF; }
  .ef-cf__mobile-pill--sort {
    background: #FFFFFF;
    color: #1E1E1B;
    border: 1px solid rgba(30,30,27,0.18);
  }
  .ef-cf__mobile-pill--sort:hover { border-color: #1E1E1B; }
  .ef-cf__mobile-sort-label { font-weight: 400; }
  .ef-cf__mobile-sort-current { font-weight: 700; }
  .ef-cf__mobile-sort-wrap { position: relative; }
  .ef-cf__mobile-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background: #FFFFFF;
    border: 1px solid rgba(30,30,27,0.10);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(30,30,27,0.12);
    padding: 6px;
    list-style: none;
    margin: 0;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: all 160ms ease;
    z-index: 60;
  }
  .ef-cf__mobile-sort-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .ef-cf__mobile-sort-menu li { margin: 0; padding: 0; }
  .ef-cf__mobile-sort-opt {
    display: block;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    background: transparent;
    border: none;
    font-family: var(--text-font-family);
    font-size: 13px;
    font-weight: 500;
    color: #1E1E1B;
    border-radius: 6px;
    cursor: pointer;
    transition: background 150ms ease;
  }
  .ef-cf__mobile-sort-opt:hover { background: rgba(30,30,27,0.05); }
  .ef-cf__mobile-sort-opt--on { background: rgba(30,30,27,0.06); font-weight: 600; }
  .ef-cf__count--mobile {
    font-size: 12px;
    color: #5C5852;
    margin-left: auto;
  }

  /* ── Grid — use mobile cols variable ── */
  .ef-grid { padding: 16px 0 48px; }
  .ef-grid__wrap { max-width: 100%; padding: 0 12px; }
  .ef-grid__list {
    --ef-cols: var(--ef-cols-mobile, 2) !important;
    gap: 12px;
  }

  /* ── Cards — simplified mobile ── */
  .ef-card { border-radius: 8px; display: flex; flex-direction: column; }
  .ef-card__media { aspect-ratio: 1 / 0.82; }
  .ef-card__body {
    padding: 14px 14px 16px; gap: 4px;
    display: flex; flex-direction: column; flex: 1;
  }
  .ef-card__vendor { font-size: 10px; letter-spacing: 0.08em; color: #6F5336; }
  .ef-card__title { font-size: 15px; line-height: 1.3; }
  /* Price inline on mobile */
  .ef-card__pricing { display: flex; align-items: baseline; gap: 5px; flex-wrap: nowrap; }
  .ef-card__from { font-size: 11px; }
  .ef-card__price { font-size: 15px; }

  /* Show stars on mobile, hide rest of meta */
  .ef-card__meta { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; padding-top: 0; }
  .ef-card__stars { display: flex; }
  .ef-card__star { width: 12px; height: 12px; }
  .ef-card__review-count { font-size: 10px; }
  .ef-card__ship-inline { display: none; }
  .ef-card__finishes { display: none; }
  .ef-card__compare { display: none; }
  .ef-card__heart { display: none; }

  /* CTA — always at bottom, full width */
  .ef-card__ctas { gap: 0; margin-top: auto; }
  .ef-card__cta {
    padding: 12px 8px;
    font-size: 10px;
    letter-spacing: 0.08em;
    border-radius: 5px;
    margin-top: 0;
    width: 100%;
  }
  .ef-card__cta svg { width: 12px; height: 12px; }
  /* Hide Quick View on mobile — just one CTA */
  .ef-card__quick { display: none; }

  /* Badges compact */
  .ef-card__badges { top: 8px; left: 8px; gap: 4px; }
  .ef-pcard-badge,
  .ef-card__badge { padding: 6px 10px; font-size: 11px; border-radius: 4px; }
  .ef-pcard-badge svg,
  .ef-card__badge svg { width: 10px; height: 10px; }

  /* Type badge — keep visible, compact */
  .ef-card__type-badge { bottom: 8px; right: 8px; font-size: 8px; padding: 3px 8px; }

  /* 3D badge hide on mobile */
  .ef-card__3d-badge { display: none; }

  /* Pagination compact */
  .ef-grid__pag { padding-top: 28px; gap: 2px; }
  .ef-grid__pag-btn,
  .ef-grid__pag-num { width: 36px; height: 36px; min-width: 36px; font-size: 13px; }
  /* Touch targets — M-10 */
  .ef-cf__pill { min-height: 44px !important; }
  .ef-card__type-badge { padding: 5px 10px !important; }
}

/* ── Extra small screens ── */
@media (max-width: 374px) {
  .ef-cf__pill { padding: 8px 12px; font-size: 12px; }
  .ef-card__body { padding: 14px 14px 16px; }
  .ef-card__title { font-size: 13px; }
  .ef-card__cta { padding: 11px 6px; font-size: 11px; }
}

/* Desktop/mobile element visibility */
.ef-cf__count--mobile { display: none; }

@media (max-width: 767px) {
  .ef-cf__active { display: none !important; }
  .ef-cf__count--mobile { display: block; }
}

/* Mobile dropdown backdrop */
.ef-cf__backdrop {
  display: none;
}
@media (max-width: 767px) {
  .ef-cf__backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30,30,27,0.4);
    z-index: calc(var(--z-sticky) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
  }
  .ef-cf__backdrop--on {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ═══════════════════════════════════════════════════
   MOBILE SORT & FILTER DRAWER
   ═══════════════════════════════════════════════════ */

/* Sort & Filter button */

/* Drawer container */
.ef-drawer {
  display: none;
}

@media (max-width: 767px) {
  /* Show filter button */
  .ef-cf__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1.5px solid #D5CEC3;
    background: #FEFCF9;
    font-family: var(--text-font-family, sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #1E1E1B;
    cursor: pointer;
    white-space: nowrap;
    transition: all 200ms ease;
    outline: none;
    flex-shrink: 0;
  }
  .ef-cf__filter-btn:active {
    background: #1E1E1B;
    color: #FEFCF9;
    border-color: #1E1E1B;
  }
  .ef-cf__filter-btn svg {
    flex-shrink: 0;
  }

  /* Hide entire desktop bar on mobile — mobile-bar replaces it */
  .ef-cf__bar {
    display: none !important;
  }

  /* Mobile bar layout */
  .ef-cf__mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 16px;
  }

  /* Drawer system */
  .ef-drawer {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: var(--z-modal);
    pointer-events: none;
    visibility: hidden;
  }
  .ef-drawer--open {
    pointer-events: auto;
    visibility: visible;
  }

  /* Overlay */
  .ef-drawer__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(30,30,27,0.45);
    opacity: 0;
    transition: opacity 300ms ease;
  }
  .ef-drawer--open .ef-drawer__overlay {
    opacity: 1;
  }

  /* Panel — slides up from bottom */
  .ef-drawer__panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    max-height: 92vh;
    background: #FEFCF9;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .ef-drawer--open .ef-drawer__panel {
    transform: translateY(0);
  }

  /* Drag handle */
  .ef-drawer__handle {
    width: 40px;
    height: 4px;
    background: #DED6CB;
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  /* Header */
  .ef-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #EDE8E1;
    flex-shrink: 0;
  }
  .ef-drawer__title {
    font-family: var(--heading-font-family, serif);
    font-size: 20px;
    font-weight: 500;
    color: #1E1E1B;
    margin: 0;
  }
  .ef-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F0EBE3;
    border: none;
    color: #5C5852;
    cursor: pointer;
    padding: 0;
    transition: all 200ms ease;
  }
  .ef-drawer__close:hover {
    background: #E5DFD5;
  }

  /* Body — scrollable */
  .ef-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
  }

  /* Section */
  .ef-drawer__section {
    padding: 18px 0;
    border-bottom: 1px solid #EDE8E1;
  }
  .ef-drawer__section:last-child {
    border-bottom: none;
  }
  .ef-drawer__section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5C5852;
    margin-bottom: 12px;
    background: none;
    border: none;
    width: 100%;
    padding: 0;
    cursor: default;
    font-family: var(--text-font-family, sans-serif);
  }

  /* Sort radio options */
  .ef-drawer__sort-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ef-drawer__radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 15px;
    color: #1E1E1B;
    cursor: pointer;
    transition: color 150ms ease;
  }
  .ef-drawer__radio input {
    display: none;
  }
  .ef-drawer__radio-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #D5CEC3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 200ms ease;
  }
  .ef-drawer__radio input:checked ~ .ef-drawer__radio-dot {
    border-color: #8A6A43;
  }
  .ef-drawer__radio input:checked ~ .ef-drawer__radio-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #8A6A43;
  }
  .ef-drawer__radio input:checked ~ .ef-drawer__radio-dot + * {
    font-weight: 600;
  }

  /* Filter pills in drawer */
  .ef-drawer__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ef-drawer__pill {
    padding: 10px 18px;
    border-radius: 8px;
    border: 1.5px solid #D5CEC3;
    background: #FEFCF9;
    font-family: var(--text-font-family, sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: #1E1E1B;
    cursor: pointer;
    transition: all 200ms ease;
    outline: none;
  }
  .ef-drawer__pill--on {
    background: #1E1E1B;
    color: #FEFCF9;
    border-color: #1E1E1B;
  }

  /* Accordion */
  .ef-drawer__accordion {
    cursor: pointer;
    margin-bottom: 0;
  }
  .ef-drawer__accordion svg {
    transition: transform 200ms ease;
    flex-shrink: 0;
  }
  .ef-drawer__accordion--open svg {
    transform: rotate(180deg);
  }
  .ef-drawer__accordion-body {
    display: none;
    padding-top: 8px;
  }
  .ef-drawer__accordion-body--open {
    display: block;
  }

  /* Checkbox-style options */
  .ef-drawer__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 15px;
    color: #1E1E1B;
    cursor: pointer;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid #F0EBE3;
    text-align: left;
    font-family: var(--text-font-family, sans-serif);
    outline: none;
  }
  .ef-drawer__option:last-child {
    border-bottom: none;
  }
  .ef-drawer__option--on {
    font-weight: 600;
    color: #6F5336;
  }
  .ef-drawer__check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #D5CEC3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 200ms ease;
  }
  .ef-drawer__option--on .ef-drawer__check {
    background: #8A6A43;
    border-color: #8A6A43;
    color: #FEFCF9;
  }

  /* Footer — sticky at bottom */
  .ef-drawer__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #EDE8E1;
    background: #FEFCF9;
    flex-shrink: 0;
  }
  .ef-drawer__clear {
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #5C5852;
    background: none;
    border: 1.5px solid #D5CEC3;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--text-font-family, sans-serif);
    transition: all 200ms ease;
    outline: none;
  }
  .ef-drawer__clear:hover {
    border-color: #5C5852;
    color: #1E1E1B;
  }
  .ef-drawer__apply {
    flex: 1;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #FEFCF9;
    background: #1E1E1B;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--text-font-family, sans-serif);
    transition: background 200ms ease;
    outline: none;
  }
  .ef-drawer__apply:active {
    background: #8A6A43;
  }
}

/* ═══════════════════════════════════════════════════
   DESKTOP ALL FILTERS PANEL — slides from right
   ═══════════════════════════════════════════════════ */

.ef-fp {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: var(--z-modal);
  pointer-events: none;
  visibility: hidden;
}
.ef-fp--open {
  pointer-events: auto;
  visibility: visible;
}
.ef-fp__overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(30,30,27,0.35);
  opacity: 0;
  transition: opacity 300ms ease;
}
.ef-fp--open .ef-fp__overlay {
  opacity: 1;
}

/* Panel — slides from right */
.ef-fp__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 90vw;
  background: #FEFCF9;
  transform: translateX(100%);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(30,30,27,0.1);
}
.ef-fp--open .ef-fp__panel {
  transform: translateX(0);
}

/* Header */
.ef-fp__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px;
  border-bottom: 1px solid #EDE8E1;
  flex-shrink: 0;
}
.ef-fp__title {
  font-family: var(--heading-font-family, serif);
  font-size: 22px;
  font-weight: 500;
  color: #1E1E1B;
  margin: 0;
}
.ef-fp__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F0EBE3;
  border: none;
  color: #5C5852;
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
  outline: none;
}
.ef-fp__close:hover {
  background: #E5DFD5;
  color: #1E1E1B;
}

/* Body — scrollable */
.ef-fp__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 28px;
  -webkit-overflow-scrolling: touch;
}

/* Filter groups */
.ef-fp__group {
  border-bottom: 1px solid #EDE8E1;
}
.ef-fp__group:last-child {
  border-bottom: none;
}
.ef-fp__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  font-family: var(--heading-font-family, serif);
  font-size: 17px;
  font-weight: 500;
  color: #1E1E1B;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  transition: color 200ms ease;
}
.ef-fp__group-title:hover {
  color: #6F5336;
}
.ef-fp__group-title svg {
  transition: transform 200ms ease;
  color: #B0A898;
  flex-shrink: 0;
}
.ef-fp__group-title--open svg {
  transform: rotate(180deg);
}

/* Group body */
.ef-fp__group-body {
  display: none;
  padding-bottom: 20px;
}
.ef-fp__group-body--open {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Filter chips */
.ef-fp__chip {
  padding: 10px 18px;
  border-radius: 8px;
  border: 1.5px solid #D5CEC3;
  background: #FEFCF9;
  font-family: var(--text-font-family, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: #1E1E1B;
  cursor: pointer;
  transition: all 200ms ease;
  outline: none;
  white-space: nowrap;
}
.ef-fp__chip:hover {
  border-color: #8A6A43;
  color: #6F5336;
}
.ef-fp__chip--3d {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ef-fp__chip--3d svg { color: #8A6A43; flex-shrink: 0; }
.ef-fp__chip--3d.ef-fp__chip--on svg { color: #B8955F; }
.ef-fp__chip:active,
.ef-fp__chip--on {
  background: #1E1E1B;
  color: #FEFCF9;
  border-color: #1E1E1B;
}

/* Footer */
.ef-fp__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 28px;
  border-top: 1px solid #EDE8E1;
  flex-shrink: 0;
}
.ef-fp__clear {
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #5C5852;
  background: none;
  border: 1.5px solid #D5CEC3;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--text-font-family, sans-serif);
  transition: all 200ms ease;
  outline: none;
}
.ef-fp__clear:hover {
  border-color: #5C5852;
  color: #1E1E1B;
}
.ef-fp__apply {
  flex: 1;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  color: #FEFCF9;
  background: #1E1E1B;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--text-font-family, sans-serif);
  transition: background 200ms ease;
  outline: none;
}
.ef-fp__apply:hover {
  background: #8A6A43;
}

/* Hide on mobile — drawer handles it */
@media (max-width: 767px) {
  .ef-cf__pill--allfilters {
    display: none !important;
  }
}

/* ═══ PHASE 1 — Nav hover underline (bronze, grow from center) ═══ */
.header__primary-nav-item > a,
.header__primary-nav-item > details > summary {
  position: relative;
}
.header__primary-nav-item > a::after,
.header__primary-nav-item > details > summary::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: #8A6A43;
  transform: translateX(-50%);
  transition: width 280ms ease-out;
}
.header__primary-nav-item > a:hover::after,
.header__primary-nav-item > details > summary:hover::after {
  width: 100%;
}
/* Keep active page underline via text-decoration — disable ::after for it */
.header__primary-nav-item > a[aria-current="page"]::after {
  display: none;
}

/* ═══ PHASE 2 — Shimmer effect on FIT GUARANTEE ═══ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ef-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
  }
  .ef-ubar__title--shimmer {
    background: linear-gradient(
      90deg,
      #F5F0E8 0%,
      #F5F0E8 35%,
      #B8955F 50%,
      #F5F0E8 65%,
      #F5F0E8 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ef-shimmer 2s linear forwards;
  }
}

/* ═══ PHASE 3 — Cart count badge ═══ */
.ef-cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 50%;
  background: #8A6A43;
  color: #FEFCF9;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes ef-badge-pop {
    0% { transform: scale(0.5); }
    50% { transform: scale(1.25); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
  }
  .ef-cart-badge--pop {
    animation: ef-badge-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
}

/* ============================================================
   PERFORMANCE FIX — eliminate transition:all jitter
   Override all "transition: all" to only animate safe properties.
   This prevents Chrome from recalculating every CSS property
   on hover/scroll, which causes page-wide vibration.
   ============================================================ */
.efn-btn,
.efn-chip,
.efn-pcard,
.efn-pcard__cta,
.efn-complete__card,
.efn-education__card,
.efn-spotlight__value,
.efn-ba__callout-btn,
[class^="efn-"][class*="card"],
[class^="efn-"][class*="btn"],
[class^="ef-"][class*="card"],
[class^="ef-"][class*="btn"] {
  transition-property: background, background-color, border-color, color, box-shadow, opacity, transform !important;
}

/* ── Hide hamburger on desktop ── */
@media (min-width: 1024px) {
  .header__sidebar-toggle,
  [class*="sidebar-toggle"] {
    display: none !important;
  }
}

/* ── Global layout stability ── */
html {
  overflow-y: scroll;
  interpolate-size: normal !important;
}
body {
  overflow-x: clip;
  font-size: 15px;
  color: #3A3732 !important;
  line-height: 1.7 !important;
}

/* ── FONT SYSTEM: Cormorant Garamond ONLY for display elements ── */
h1, h2, h3,
.ef-heading, .ef-heading-lg, .ef-heading-md, .ef-heading-sm, .ef-heading-xl,
[class*="section-title"],
[class*="card__title"],
[class*="card-title"],
.ef-bs-card__title,
.ef-pd-title {
  font-family: var(--text-font-family);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1E1E1B;
}

.ef-pd-price-current,
.ef-cart-page-title,
.ef-cart-item-price,
[class*="featured-name"] {
}

/* ── Bestseller card "From" prefix — small uppercase, eye lands on price ── */

/* ── Body text, descriptions, labels — always Inter ── */
p, span, a, li, td, th, label, input, select, textarea, button,
.ef-body-md, .ef-label,
[class*="desc"], [class*="subtitle"], [class*="subtext"],
[class*="__vendor"], [class*="__role"],
[class*="overline"], [class*="eyebrow"] {
}

/* ── Reduced-motion accessibility ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════
   EF STANDARD PRODUCT PAGE — Design System Overrides
   Template: product.standard.json
   ═══════════════════════════════════════════════════════ */

/* Product title — Cormorant Garamond */
.product-info .product-info__title {
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  color: #1E1E1B;
  line-height: 1.25;
}

/* Vendor — bronze */
.product-info .product-info__vendor {
  color: #6F5336 !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Price */
.product-info .price-list .price {
  font-size: 28px;
  font-weight: 600;
  color: #1E1E1B;
}
.product-info .price-list .price--on-sale {
  color: #6F5336 !important;
}
.product-info .price-list .price--compare {
  color: #B0A898 !important;
  text-decoration: line-through;
}

/* ATC button — charcoal, hover bronze */
.product-info .button--primary,
.product-info [type="submit"].button {
  background: #1E1E1B !important;
  color: #FEFCF9 !important;
  border-radius: 5px !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.product-info .button--primary:hover,
.product-info [type="submit"].button:hover {
  background: #8A6A43 !important;
}

/* Variant pills — match filter pills */
.product-info .block-swatch__item {
  border-radius: 5px !important;
  border: 1.5px solid #D5CEC3 !important;
  transition: all 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.product-info .block-swatch__item:hover {
  border-color: #8A6A43 !important;
}
.product-info .block-swatch__item.is-selected {
  background: #1E1E1B !important;
  border-color: #1E1E1B;
  color: #FEFCF9 !important;
}

/* Trust signals */
.product-info .accordion__title {
  font-size: 13px;
  font-weight: 600;
  color: #1E1E1B;
}

/* Product gallery border radius */
.product-info .product-gallery__media img {
  border-radius: 8px !important;
}

/* Sticky ATC — fixed bottom bar */
.ef-sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-modal);
  background: #FEFCF9;
  border-top: 1px solid #E8E2D9;
  box-shadow: 0 -4px 24px rgba(30,30,27,0.08);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.22,1,0.36,1);
}
.ef-sticky-atc--visible {
  transform: translateY(0);
}

@media (max-width: 767px) {
  .ef-sticky-atc { padding: 10px 16px; gap: 10px; }
  .ef-sticky-atc__title { max-width: 120px; font-size: 13px; }
}

/* Ensure header sits above filter bar so megamenu can cover it */
.shopify-section-group-header-group,
header.shopify-section {
  z-index: 100 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   FONT OVERRIDES — beat Prestige's Cormorant Garamond on UI components
   that should be Inter (account modal, search overlay, predictive results)
   ─────────────────────────────────────────────────────────────────── */

/* Shopify Account web-component (sign-in modal) */
shopify-account,
shopify-account *,
shopify-account-modal,
shopify-account-modal *,
[part="dialog"],
[part="dialog"] * {
  font-family: var(--text-font-family);
}

/* Search input + no-results / predictive results */
.search-modal,
.search-modal *,
.search-form,
.search-form *,
.predictive-search,
.predictive-search *,
.predictive-search__results,
.predictive-search__results *,
search-form,
search-form *,
predictive-search,
predictive-search *,
input[type="search"],
.field--search input,
.search__input,
[role="searchbox"] {
  font-family: var(--text-font-family);
}

/* Generic "no results" text used by Prestige search */
.search-empty,
.search-results__empty,
.predictive-search__no-results,
.no-results,
.search__no-results,
.search-results-empty {
  font-family: var(--text-font-family);
}

/* ════════════════════════════════════════════════════════════════════
   EF FONT SHIELD — permanent fix for Prestige heading-font cascade.

   PROBLEM: Prestige sets --heading-font-family to Cormorant Garamond
   (configured in this same file, line ~44, intentionally for big display
   headings on homepage). Theme.css then propagates this through:
     .heading, .h1-.h6, .prose :where(h1-h6) { font-family: var(--heading-font-family) }
   When EF UI components contain inheriting elements (or are wrapped by
   parent .h-classes), text renders as serif Cormorant instead of Inter.
   We've been patching with !important on every new component → fragile.

   SOLUTION: scope-level reset. For every UI-EF prefixed component:
     1. Locally redefine --heading-font-family to Inter (so any nested
        .h1-.h6 markup inside resolves to Inter, not Cormorant)
     2. Set font-family: Inter on the component root
     3. Children inherit naturally — no * selector spam, no !important
   Display-heavy sections (efn-*) keep Cormorant since that's intentional.

   OPT-IN: Add class .ef-display-font to any element inside a UI-EF
   component to bring Cormorant back for that specific element.
   ════════════════════════════════════════════════════════════════════ */
[class^="ef-cfg-"], [class*=" ef-cfg-"],
[class^="ef-pd-"], [class*=" ef-pd-"],
[class^="ef-cv2"], [class*=" ef-cv2"],
[class^="ef-mdrawer"], [class*=" ef-mdrawer"],
[class^="ef-mega"], [class*=" ef-mega"],
[class^="ef-bs-"], [class*=" ef-bs-"],
[class^="ef-cart"], [class*=" ef-cart"],
[class^="ef-search"], [class*=" ef-search"],
[class^="ef-help"], [class*=" ef-help"],
[class^="ef-confidence"], [class*=" ef-confidence"],
[class^="ef-trust"], [class*=" ef-trust"],
[class^="ef-process"], [class*=" ef-process"],
[class^="ef-payment"], [class*=" ef-payment"],
[class^="ef-pay-"], [class*=" ef-pay-"],
[class^="ef-pill-"], [class*=" ef-pill-"],
[class^="ef-review"], [class*=" ef-review"],
[class^="ef-quote"], [class*=" ef-quote"],
[class^="ef-ai-"], [class*=" ef-ai-"],
[class^="efm-"], [class*=" efm-"],
[class^="efg-"], [class*=" efg-"],
[class^="efs-"], [class*=" efs-"],
[class^="ef-trade"], [class*=" ef-trade"],
[class^="ef-about"], [class*=" ef-about"],
[class^="ef-track"], [class*=" ef-track"] {
  --heading-font-family: var(--ef-font-ui);
  font-family: var(--ef-font-ui);
}

/* Opt-in escape hatch — bring back Cormorant for any element that
   should display in the elegant brand serif (rare in UI components). */
.ef-display-font {
  font-family: var(--ef-font-display) !important;
}
.ef-display-font--italic {
  font-family: var(--ef-font-display) !important;
  font-style: italic !important;
}

/* ════════════════════════════════════════════════════════════════════
   Gas Logs Family Meta — count + price range + Compare button
   Renders below size pills on each card (snippets/ef-gas-sizes.liquid)
   ════════════════════════════════════════════════════════════════════ */
.efg-family-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;         /* flush left to align with title/price/stars in card-info */
  padding: 0;
  font-size: 11px;
  color: #5C5852;
}
/* Pull meta tight under the swatch row (the "dots") so they read as one unit */
.ef-cv2__card-swatches + .efg-family-meta { margin-top: 4px; }

.efg-family-meta__compare {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid #DED6CB;
  border-radius: 8px;       /* match the rounded-rect feel of card image (~14px), scaled down */
  color: #6F5336;
  font: 600 10px/1 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.efg-family-meta__compare:hover {
  border-color: #8A6A43;
  color: #1E1E1B;
  background: rgba(138,106,67,0.05);
}
.efg-family-meta__compare-arrow {
  transition: transform 180ms ease;
  flex-shrink: 0;
}
.efg-family-meta__compare:hover .efg-family-meta__compare-arrow { transform: translateX(2px); }
.efg-family-meta__compare-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
  flex-shrink: 0;
}
.efg-family-meta__compare-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background-clip: padding-box;
  display: inline-block;
  transform: scale(1);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 280ms ease;
}
/* Hover wave — each dot pops sequentially L→R then settles */
@keyframes efgDotWave {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(138,106,67,0); }
  40%  { transform: scale(1.35); box-shadow: 0 0 0 2px rgba(138,106,67,0.18); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(138,106,67,0); }
}
.efg-family-meta__compare:hover .efg-family-meta__compare-dot {
  animation: efgDotWave 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.efg-family-meta__compare:hover .efg-family-meta__compare-dot:nth-child(1) { animation-delay: 0ms; }
.efg-family-meta__compare:hover .efg-family-meta__compare-dot:nth-child(2) { animation-delay: 70ms; }
.efg-family-meta__compare:hover .efg-family-meta__compare-dot:nth-child(3) { animation-delay: 140ms; }
.efg-family-meta__compare:hover .efg-family-meta__compare-dot:nth-child(4) { animation-delay: 210ms; }
.efg-family-meta__compare:hover .efg-family-meta__compare-dot:nth-child(5) { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  .efg-family-meta__compare:hover .efg-family-meta__compare-dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Gas Logs Compare Modal — side-by-side preview of all sizes in family
   ════════════════════════════════════════════════════════════════════ */
.efg-compare {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.efg-compare[hidden] { display: none; }
.efg-compare__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20,20,20,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: efgCompareFade 240ms ease;
}
.efg-compare__panel {
  position: relative;
  width: min(960px, 100%);
  max-height: 90vh;
  background: #FEFCF9;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(20,20,20,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: efgCompareSlide 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes efgCompareFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes efgCompareSlide {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.efg-compare__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid #E8E2D9;
}
.efg-compare__eyebrow {
  font: 700 10px/1 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A6A43;
  margin-bottom: 6px;
}
.efg-compare__title {
  font-family: var(--text-font-family);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: #1E1E1B;
  margin: 0;
  letter-spacing: -0.01em;
}
.efg-compare__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(30,30,27,0.04);
  border: none;
  color: #5C5852;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, color 160ms ease;
}
.efg-compare__close:hover { background: rgba(30,30,27,0.1); color: #1E1E1B; }
.efg-compare__body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1;
}
.efg-compare__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.efg-compare-card {
  display: flex;
  flex-direction: column;
  background: #FEFCF9;
  border: 1.5px solid #E8E2D9;
  border-radius: 8px;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.efg-compare-card:hover {
  border-color: #8A6A43;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30,30,27,0.08);
}
.efg-compare-card.is-current {
  border-color: #1E1E1B;
  box-shadow: 0 0 0 1px #1E1E1B inset;
}
.efg-compare-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1.2 / 1;
  background: #1A1410;
  overflow: hidden;
}
.efg-compare-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.efg-compare-card__current {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  background: rgba(30,30,27,0.85);
  color: #FEFCF9;
  font: 700 9px/1 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
}
.efg-compare-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
  flex: 1;
}
.efg-compare-card__size {
  font: 700 16px/1 'Inter', -apple-system, sans-serif;
  color: #1E1E1B;
}
.efg-compare-card__price {
  font: 600 13px/1 'Inter', -apple-system, sans-serif;
  color: #5C5852;
}
.efg-compare-card__cta {
  margin-top: 6px;
  font: 700 10px/1 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6F5336;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: gap 180ms ease;
}
.efg-compare-card:hover .efg-compare-card__cta { gap: 6px; }
.efg-compare__footnote {
  font: 400 12px/1.5 'Inter', -apple-system, sans-serif;
  color: #5C5852;
  text-align: center;
  margin: 0;
}
@media (max-width: 599px) {
  .efg-compare { padding: 12px; }
  .efg-compare__panel { max-height: 95vh; }
  .efg-compare__header { padding: 18px 18px 14px; }
  .efg-compare__title { font-size: 18px; }
  .efg-compare__body { padding: 16px 18px 20px; }
  .efg-compare__grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .efg-compare-card__size { font-size: 14px; }
  .efg-family-meta { font-size: 10px; }
  .efg-family-meta__compare { padding: 3px 8px; font-size: 9px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Gas Logs — cross-product size selector (collection cards + product page)
   Source: snippets/ef-gas-sizes.liquid
   ────────────────────────────────────────────────────────────────────── */

/* Compact pills inside product cards (collection page).
   Pills double as `.ef-cv2__card-swatch` so the family-swatch JS in
   ef-collection-grid.js handles hover preview + click swap. We override
   the 16×16 circle defaults of `.ef-cv2__card-swatch` here. */
.efg-card-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 8px;
  padding: 0 4px;
}
.efg-card-sizes .efg-size-pill,
.efg-card-sizes .ef-cv2__card-swatch.efg-size-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 44px;
  padding: 5px 12px;
  border: 1px solid #DED6CB;
  border-radius: 999px;
  background: #FEFCF9;
  color: #5C5852;
  font: 500 11px/1 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.efg-card-sizes .efg-size-pill:hover {
  border-color: #8A6A43;
  color: #1E1E1B;
  transform: none;
}
.efg-card-sizes .efg-size-pill.is-active {
  border-color: #1E1E1B;
  color: #1E1E1B;
  background: #FEFCF9;
  font-weight: 600;
  box-shadow: 0 0 0 1px #1E1E1B inset;
}

/* Product page — thumbnail size cards (between price block and configurator) */
.efg-sizes-block {
  margin: 8px 0 24px;
  padding: 14px 16px;
  background: #FEFCF9;
  border: 1px solid rgba(138,106,67,0.12);
  border-radius: 8px;
}
.efg-sizes-block__label {
  font: 600 11px/1 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1E1E1B;
  margin-bottom: 12px;
}
.efg-size-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.efg-size-thumb {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1.5px solid #DED6CB;
  border-radius: 6px;
  background: #FEFCF9;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.efg-size-thumb:hover {
  border-color: #8A6A43;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(30,30,27,0.06);
}
.efg-size-thumb.is-active {
  border-color: #1E1E1B;
  box-shadow: 0 0 0 1px #1E1E1B inset;
}
.efg-size-thumb__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;     /* 2026-05-06 — was 1.25/1, source images are 1:1 */
  background: #1A1410;
  overflow: hidden;
}
.efg-size-thumb__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.efg-size-thumb__label {
  display: block;
  padding: 7px 10px 1px;
  font: 600 12px/1.1 'Inter', -apple-system, sans-serif;
  color: #1E1E1B;
}
.efg-size-thumb__price {
  display: block;
  padding: 0 10px 8px;
  font: 400 11px/1.2 'Inter', -apple-system, sans-serif;
  color: #5C5852;
}
@media (max-width: 599px) {
  .efg-size-thumbs { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
  .efg-size-thumb__label { font-size: 11px; padding-top: 6px; }
  .efg-size-thumb__price { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FIX 2026-04-28 — Horizontal scrollers must declare touch-action.
   Without explicit touch-action, Samsung Internet (Chromium) aggressively
   claims "horizontal scroll" mode at the slightest sideways finger movement
   and blocks vertical page scroll until finger lifts. `pan-x pinch-zoom`
   means: this element only owns horizontal pan + pinch; vertical pan bubbles
   to ancestor scroll (i.e. body). DO NOT use `pan-x pan-y` — that gives the
   browser a choice again. DO NOT use `pan-y` alone — it kills horizontal
   scrolling.
   ═══════════════════════════════════════════════════════════════════════ */
/* `touch-action` does NOT inherit. Without explicit rules on children
   (the actual touch targets — thumbnails, pills, images), Samsung Internet
   reads child's default `auto` and locks into horizontal-mode capture,
   blocking vertical page scroll. List both container AND descendants.

   2026-04-28 v2: pan-x pinch-zoom alone wasn't enough on Samsung — even
   with the rule properly applied, vertical pan didn't bubble to ancestor.
   Switched to `pan-y` for the SMALL gallery thumbnails (.ef-pd-thumb-rail,
   .ef-pd-thumb): the rail has prev/next arrows for horizontal navigation,
   so losing horizontal swipe is acceptable. Vertical page scroll always
   wins — that's the user-facing requirement. Other horizontal scrollers
   (Prestige scroll-area, EF tabs/chips) get pan-x pinch-zoom because they
   have NO arrow nav fallback — accept the small Samsung bubble risk there. */
.scroll-area,
.scroll-area *,
.product-gallery__carousel,
.product-gallery__carousel *,
.product-gallery__thumbnail-scroller,
.product-gallery__thumbnail-scroller *,
.ef-product-tabs,
.ef-product-tabs *,
.efn-best__chips,
.efn-best__chips *,
.ef-insp-tabs,
.ef-insp-tabs *,
.ef-so__cats,
.ef-so__cats * {
  touch-action: pan-x pinch-zoom;
}
.ef-pd-thumb-rail,
.ef-pd-thumb-rail *,
.ef-pd-thumb,
.ef-pd-thumb * {
  touch-action: pan-y;
}

/* PERF AUDIT 2026-04-29 (Fix #4) — Loox star recolor consolidated here from
   5 inline <style> blocks duplicated across product templates. */
.loox-rating span,
.loox-rating .loox-star,
.loox-rating svg {
  color: #8A6A43 !important;
  fill: #8A6A43 !important;
}

/* PERF AUDIT 2026-04-29 (Fix #6) — CLS prevention. Default --header-height
   set BEFORE header.liquid's clientHeight read fires → no 0→88px jump. */
:root { --header-height: 88px; }

/* PERF AUDIT 2026-04-29 (Fix #7) — Loox reviews container reservation prevents
   600px CLS when Loox app block injects rating + review carousel. */
#looxReviews:not(:empty),
#loox-reviews:not(:empty),
.ef-pd-loox-wrap:not(:empty) {
  min-height: 600px;
}
/* ═══════════════════════════════════════════════
   EF FONT SYSTEM — Overrides all Prestige defaults
   Single source of truth for all typography
   Last file loaded = highest cascade priority

   ARCHITECTURE:
   • Sections 1-9: Prestige-only rules (scoped via :not)
   • Section 10:   Blanket ef- → Inter (catches everything)
   • Section 11:   Cormorant whitelist (explicit opt-in)
═══════════════════════════════════════════════ */

/* 1. Override Prestige CSS variables at root */
:root {
  --heading-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --heading-font-weight: 400;
  --heading-font-style: normal;
  --text-font-family: 'Inter', sans-serif;
  --text-font-weight: 400;
  --text-font-style: normal;
  --ef-font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ef-font-body: 'Inter', sans-serif;
}

/* ═══════════════════════════════════════════════
   2. Prestige headings → Cormorant
   SCOPED: :not([class*="ef-"]) on every heading tag
   so our custom elements are NEVER touched here.
═══════════════════════════════════════════════ */
h1:not([class*="ef-"]):not([class*="ab-"]),
h2:not([class*="ef-"]):not([class*="ab-"]),
h3:not([class*="ef-"]):not([class*="ab-"]),
h4:not([class*="ef-"]):not([class*="ab-"]),
h5:not([class*="ef-"]):not([class*="ab-"]),
h6:not([class*="ef-"]):not([class*="ab-"]),
.h1, .h2, .h3, .h4, .h5, .h6,
[class*="heading"]:not([class*="ef-"]):not([class*="ab-"]),
[class*="title"]:not(title):not([class*="ef-"]):not([class*="ab-"]),
.card__heading,
.product-card__title,
.collection-hero__title,
.section-header__title,
.product__title {
  font-family: var(--text-font-family);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
}

/* 3. Prestige product card titles — Cormorant */
.card__heading a,
.card-information .card__heading,
.product-card .card__heading {
  font-family: var(--text-font-family);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* 4. Body, UI, buttons, nav — all Inter */
body,
p, span, a, li, td, th, dd, dt, figcaption,
input, select, textarea, button,
.button, [class*="btn"],
nav, .nav, [class*="navigation"],
[class*="price"],
[class*="label"],
[class*="badge"]:not(.ef-card__badge--quick):not(.ef-pcard-badge),
[class*="vendor"],
[class*="caption"],
.quantity, .cart,
[class*="footer"],
[class*="accordion"],
[class*="tab"] {
  font-family: var(--text-font-family);
}

/* 5. Button styling */
button, .button, [role="button"],
[class*="btn"]:not([class*="btn--"]) {
  font-family: var(--text-font-family);
  font-weight: 600;
}

/* 6. Price displays */
.price, [class*="price"],
.product-price, .cart-price {
  font-family: var(--text-font-family);
  font-weight: 500;
}

/* 7. Navigation */
.header__primary-nav-item a,
.header__primary-nav-item summary,
.header__dropdown-menu a,
.ef-mega-link,
.ef-more-link,
.ef-more-trigger {
  font-family: var(--text-font-family);
}

/* 8. Override any inline DM Sans / Jost / forbidden fonts */
[style*="DM Sans"],
[style*="Jost"],
[style*="Assistant"],
[style*="EB Garamond"],
[style*="Playfair"] {
  font-family: var(--text-font-family);
}

/* ═══════════════════════════════════════════════
   9. Typographic scale — PRESTIGE ONLY
   Scoped so ef- elements keep their own sizing.
═══════════════════════════════════════════════ */
h1:not([class*="ef-"]):not([class*="ab-"]) { font-size: clamp(40px, 5vw, 72px); font-weight: 300; line-height: 1.1; }
h2:not([class*="ef-"]):not([class*="ab-"]) { font-size: clamp(32px, 4vw, 52px); font-weight: 400; line-height: 1.2; }
h3:not([class*="ef-"]):not([class*="ab-"]) { font-size: clamp(24px, 3vw, 36px); font-weight: 400; line-height: 1.3; }
h4:not([class*="ef-"]):not([class*="ab-"]) { font-size: clamp(20px, 2.5vw, 28px); font-weight: 400; line-height: 1.3; }
body { font-size: 16px; line-height: 1.6; font-weight: 400; }

/* ═══════════════════════════════════════════════
   10. MASTER EF OVERRIDE — all ef- elements → Inter

   This catches EVERYTHING with ef- prefix:
   • Elements with ef- class themselves
   • ANY descendant of an ef- parent
   • Headings inside ef- containers
   • Elements with "title"/"heading" in class + ef-

   Result: zero Cormorant leaks on custom EF elements.
   New sections with ef- prefix auto-inherit Inter.
═══════════════════════════════════════════════ */
[class^="ef-"],
[class*=" ef-"],
[class*="ef-"] *,
[class*="ef-"] h1,
[class*="ef-"] h2,
[class*="ef-"] h3,
[class*="ef-"] h4,
[class*="ef-"] h5,
[class*="ef-"] h6,
[class*="ef-"][class*="title"],
[class*="ef-"][class*="heading"],
[class*="ef-"] [class*="title"],
[class*="ef-"] [class*="heading"] {
  font-family: var(--text-font-family);
  font-style: normal !important;
}

/* EF sizing overrides */
.ef-pd-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}
.ef-cfg-step-title,
.ef-cfg-step__title {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
.ef-cfg-step__subtitle,
p.ef-cfg-step__subtitle,
[class*="ef-cfg-"] [class*="subtitle"] {
  font-weight: 400 !important;
}
.ef-pd-shipping-note {
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════
   11. CORMORANT WHITELIST — REMOVED
   All EF elements now use Inter (single sans-serif system).
═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   12. CHAT WIDGETS — force Inter
   Most chat apps render their launcher button in the
   parent DOM (no shadow root) so they inherit Prestige
   Cormorant via the universal heading rules above.
   Cover Shopify Inbox, Crisp, Tidio, Gorgias, Tawk,
   Drift, Intercom, HubSpot, Zendesk and generic chat
   containers.
═══════════════════════════════════════════════ */
#shopify-chat,
#shopify-chat *,
shopify-chat,
shopify-chat *,
[id*="ShopifyChat"],
[id*="ShopifyChat"] *,
.shopify-chat-widget,
.shopify-chat-widget *,
#crisp-chatbox,
#crisp-chatbox *,
.crisp-client,
.crisp-client *,
#tidio-chat,
#tidio-chat *,
.tidio-chat,
.tidio-chat *,
#gorgias-chat-container,
#gorgias-chat-container *,
.gorgias-chat-container,
.gorgias-chat-container *,
#tawkchat-container,
#tawkchat-container *,
.tawk-frame,
.tawk-frame *,
#drift-frame-controller,
#drift-frame-controller *,
.drift-frame-controller,
.drift-frame-controller *,
.drift-widget,
.drift-widget *,
#intercom-container,
#intercom-container *,
.intercom-app,
.intercom-app *,
#hubspot-messages-iframe-container,
#hubspot-messages-iframe-container *,
[class*="hubspot-chat"],
[class*="hubspot-chat"] *,
#launcher,
#launcher *,
#webWidget,
#webWidget *,
[id*="chat-widget"],
[id*="chat-widget"] *,
[class*="chat-widget"],
[class*="chat-widget"] *,
[class*="chat-launcher"],
[class*="chat-launcher"] *,
[aria-label*="chat" i],
[aria-label*="chat" i] *,
[aria-label*="messenger" i],
[aria-label*="messenger" i] * {
  font-family: var(--text-font-family);
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Chat widget headings — keep Inter, drop Cormorant sizing */
[id*="chat" i] h1,
[id*="chat" i] h2,
[id*="chat" i] h3,
[id*="chat" i] h4,
[class*="chat" i] h1,
[class*="chat" i] h2,
[class*="chat" i] h3,
[class*="chat" i] h4 {
  font-family: var(--text-font-family);
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════
   13. KASATOR — wymuś Inter wszędzie, łącznie ze stylami inline
   w sekcjach/template'ach (gdzie Cormorant został wpisany na sztywno
   w atrybucie style=""). Inline styles mają specyficzność 1,0,0,0,
   ale przegrywają z !important w stylesheet ładowanym ostatnio.
   Ta reguła musi być OSTATNIA w pliku.
   Tymczasowy band-aid — docelowo usunie się przez find/replace
   (krok 4 z planu) po weryfikacji.
═══════════════════════════════════════════════ */
*, *::before, *::after {
  font-family: var(--text-font-family);
}

/* 2026-05-07 — Bronze-on-cream contrast fix (WCAG 2.2 AA 1.4.3).
   Audit found 408 contrast fails dominated by small bronze text on cream bg.
   Switch body-text contexts to --ef-bronze-text (#6D4D27 = 5.8:1 ratio).
   Decorative bronze (borders, large titles, hover states) stays #8A6A43.
   Targets common eyebrow/meta/breadcrumb classes. Use :where() to avoid
   specificity bump that would break section-level overrides. */
:where(
  .ef-collection-hero__breadcrumb,
  .ef-collection-hero__rating,
  .ef-collection-hero__meta,
  .ef-collection-hero__eyebrow,
  .efnch-eyebrow,
  .ef-uni-breadcrumbs,
  .ef-uni-breadcrumbs a,
  .ef-pd-breadcrumbs,
  .ef-pd-breadcrumbs a,
  .ef-cv2__card-eyebrow,
  .ef-cv2__card-vendor,
  .ef-cfg-strip__label,
  .ef-cfg-eyebrow,
  .ef-cfg-mantel-section-header__eyebrow,
  .ef-cfg-gas-step__eyebrow,
  .ef-cfg-mantel-step__eyebrow,
  .ef-mantel-rating-text a,
  .ef-pd-status,
  .ef-pd-status .ef-pd-status__sub,
  .ef-pd-shipping-note,
  .ef-pd-activity__text,
  .ef-mega-link-desc,
  .efm-tier-callout__title
) {
  color: #6D4D27 !important;
}
/* Standalone bronze-on-cream small text rule for in-product use */
.ef-bronze-aa { color: #6D4D27 !important; }

/* 2026-05-07 — Universal a11y utility — visually-hide labels for screen readers
   while keeping them in the DOM. Used to associate <label> with <input> when
   visible label would clutter the design. WCAG 2.2 AA compliant. */
.ef-visually-hidden,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   COLLECTION HERO + FILTER STRIP — 40+ readability upgrade
   2026-05-08. Overrides section's inline CSS via higher specificity
   (uses [data-ef-hero] / .ef-collection-filter prefix). Bumps body
   font sizes 13→15px, sub-text 11→12.5px, labels 9-10→11-12px,
   contrast on subtle greys to WCAG AAA #5C5852 / #1E1E1B.
   ════════════════════════════════════════════════════════════════ */
[data-ef-hero] .ef-collection-hero__tagline,
[data-ef-hero] .ef-collection-hero__tagline-text,
[data-ef-hero] .ef-collection-hero__tagline-meta {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #3A3732 !important;
  line-height: 1.5 !important;
}
[data-ef-hero] .ef-collection-hero__tagline strong { color: #1E1E1B; font-weight: 700 !important; }
[data-ef-hero] .ef-collection-hero__tagline-sep { color: #B0A89B !important; opacity: 1 !important; }

[data-ef-hero] .ef-collection-hero__desc {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #3A3732 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}

[data-ef-hero] .ef-collection-hero__rating,
[data-ef-hero] .ef-collection-hero__rating > * {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #3A3732 !important;
}
[data-ef-hero] .ef-collection-hero__rating strong { color: #1E1E1B; font-weight: 700 !important; }
[data-ef-hero] .ef-collection-hero__rating-sep { color: #B0A89B !important; }

/* AI Expert dark card — bigger, more legible body */
[data-ef-hero] .ef-hero-ai-card__title { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.005em !important; }
[data-ef-hero] .ef-hero-ai-card__desc {
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.88) !important;
}
[data-ef-hero] .ef-hero-ai-card__cta { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; }
[data-ef-hero] .ef-hero-ai-card__badge { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.10em !important; padding: 4px 10px !important; }

/* "Already know" sidebar — was 9-11px tiny caps. Bump to 11-13/600. */
[data-ef-hero] .ef-collection-hero__actions--compact .ef-hero-ai-card__title { font-size: 15px !important; }
[data-ef-hero] .ef-collection-hero__actions--compact .ef-hero-ai-card__desc { font-size: 13px !important; }

[data-ef-hero] [class*="already-know"],
[data-ef-hero] [class*="ALREADY"],
[data-ef-hero] .ef-hero-side__label,
[data-ef-hero] .ef-hero-aside__label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #5C5852 !important;
}

/* ── Filter pills strip ──────────────────────────────────────── */
.ef-collection-filter__pill,
.ef-cf__pill,
.ef-filter-pill,
.ef-collection-filters__pill {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #1E1E1B;
  letter-spacing: 0 !important;
  padding: 10px 18px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-width: 1.5px !important;
  border-color: #D5CCC0 !important;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.ef-collection-filter__pill:hover,
.ef-cf__pill:hover,
.ef-filter-pill:hover,
.ef-collection-filters__pill:hover {
  border-color: #8A6A43 !important;
  color: #1E1E1B;
  background: rgba(138, 106, 67, 0.04) !important;
}
.ef-collection-filter__pill.is-active,
.ef-cf__pill.is-active,
.ef-filter-pill.is-active,
.ef-collection-filters__pill.is-active {
  border-color: #1E1E1B;
  background: #1E1E1B !important;
  color: #FEFCF9 !important;
}
.ef-collection-filter__pill-count,
.ef-cf__pill-count,
.ef-filter-pill__count {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #5C5852 !important;
  background: rgba(138, 106, 67, 0.10) !important;
  padding: 2px 8px !important;
  border-radius: 100px;
  min-width: 22px !important;
  text-align: center !important;
}

/* ALL FILTERS button + Sort by */
.ef-collection-filter__all,
.ef-cf__all-btn,
.ef-filter-all,
.ef-collection-filters__all {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  min-height: 44px !important;
  border-width: 1.5px !important;
  color: #1E1E1B;
}
.ef-collection-filter__sort,
.ef-cf__sort,
.ef-filter-sort,
.ef-collection-filters__sort {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #3A3732 !important;
}
.ef-collection-filter__sort strong,
.ef-cf__sort strong,
.ef-filter-sort strong { color: #1E1E1B; font-weight: 700 !important; }

/* ── Mobile ≤768 ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  [data-ef-hero] .ef-collection-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  [data-ef-hero] .ef-collection-hero__title { font-size: clamp(26px, 7vw, 34px) !important; }
  [data-ef-hero] .ef-collection-hero__tagline,
  [data-ef-hero] .ef-collection-hero__tagline-text,
  [data-ef-hero] .ef-collection-hero__tagline-meta { font-size: 13.5px !important; }
  [data-ef-hero] .ef-collection-hero__desc { font-size: 14px !important; line-height: 1.55 !important; }

  /* AI Expert card slimmer on mobile */
  [data-ef-hero] .ef-hero-ai-card { padding: 16px 18px !important; }
  [data-ef-hero] .ef-hero-ai-card__title { font-size: 16px; }
  [data-ef-hero] .ef-hero-ai-card__desc { font-size: 13.5px !important; }

  /* Filter pills — horizontal scroll w/ snap, bigger touch targets,
     hide scrollbar. ALL FILTERS becomes sticky-right via flex order. */
  .ef-collection-filter,
  .ef-collection-filters,
  .ef-cf-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    scrollbar-width: none !important;
  }
  .ef-collection-filter::-webkit-scrollbar,
  .ef-collection-filters::-webkit-scrollbar,
  .ef-cf-strip::-webkit-scrollbar { display: none !important; }
  .ef-collection-filter__pill,
  .ef-cf__pill,
  .ef-filter-pill,
  .ef-collection-filters__pill {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
}
@media (max-width: 411px) {
  [data-ef-hero] .ef-collection-hero__title { font-size: 24px !important; }
  [data-ef-hero] .ef-collection-hero__desc { font-size: 13.5px !important; }
  [data-ef-hero] .ef-hero-ai-card__title { font-size: 15px !important; }
  [data-ef-hero] .ef-hero-ai-card__desc { font-size: 13px !important; }
  .ef-collection-filter__pill,
  .ef-cf__pill,
  .ef-filter-pill { font-size: 13.5px !important; padding: 9px 14px !important; }
}