/*
Theme Name:   EL-LADI Child
Theme URI:    https://el-ladi.gr
Description:  Child theme for Bricks — EL-LADI single-estate olive oil. Holds design tokens, self-hosted fonts, and custom snippets.
Author:       EL-LADI
Template:     bricks
Version:      1.0.0
Text Domain:  el-ladi
*/

/* ============================================================
   BASE LAYER
   Light, editorial defaults. Applies the design tokens (see
   assets/css/tokens.css) to bare elements so prose, headings and
   links look right out of the box. Ported from the design
   system's base.css — element resets/utility classes only;
   variable definitions live in tokens.css.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-text); text-decoration: none; transition: color var(--dur-fast) var(--ease-soft); }
a:hover { color: var(--accent-ink); }

img { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-7) 0; }

::selection { background: var(--gold-200); color: var(--ink-900); }

/* Keyboard focus — offset puts the ring on the surrounding surface, so it stays
   visible over gold buttons and the hero photo as well as on cream. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ——— Shared utility primitives used across cards & kit ——— */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--accent-text);
}
.serif-italic { font-family: var(--font-display); font-style: italic; }

.display-rule {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.display-rule::before,
.display-rule::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--border-gold);
  flex: none;
}
/* Eyebrow modifiers (Bricks Components pass): leading rule only, and on-dark color. */
.display-rule--lead::after { content: none; }
.eyebrow--on-dark { color: var(--gold-300); }

/* ——— Scroll reveal (Phase 7) — `.reveal` gets `.is-in` from script.js ——— */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Never fade in the hero: it's the first screen, so .reveal left the headline, intro and CTAs
   invisible until script.js ran (seconds on a slow phone). It also removed them from Chrome's
   LCP candidates (anything first painted at opacity 0 is ignored), so LCP fell through to the
   cookie-banner text, which only appears after all the JS. */
.el-hero .reveal { opacity: 1; transform: none; transition: none; }

/* ——— Header (Phase 5) — transparent over hero, solid after 60px (script.js toggles .is-solid) ——— */
.el-nav.is-solid {
  background: rgba(250, 246, 236, 0.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}
.el-nav.is-solid .el-nav__logo--gold { display: none; }
.el-nav.is-solid .el-nav__logo--ink { display: block; }
.el-nav.is-solid .el-nav__link { color: var(--ink-700) !important; }
.el-nav.is-solid .el-nav__lang { color: var(--accent-text) !important; }
@media (max-width: 991px) { /* matches Bricks' default tablet_portrait breakpoint */
  /* !important throughout: the nav's native per-element settings (display, padding,
     column-gap) compile to unlayered ID rules that beat plain class selectors. */
  .el-nav__links { display: none !important; }
  .el-nav { padding-left: 20px !important; padding-right: 20px !important; }
  /* nav-right container: `.el-nav > .brxe-container > .el-auto` (the links container
     nested deeper is also .el-auto, hence the child combinators) */
  .el-nav > .brxe-container > .el-auto {
    column-gap: 16px !important;
    flex-wrap: nowrap !important;
  }
  /* Outer row (logo | lang+hamburger group) was never given the same nowrap treatment —
     it never needed it while the logo could shrink to silently absorb overflow. Once the
     logo was locked to flex-shrink:0 (to fix it stretching under that same overflow on
     Safari), the row started doing what Bricks' default wrap was always configured to do:
     drop the nav-right group to its own line. */
  .el-nav > .brxe-container {
    flex-wrap: nowrap !important;
  }
}
@media (max-width: 767px) { /* mobile_landscape: not enough room for logo + lang + CTA + hamburger */
  .el-nav__cta { display: none !important; }
}

/* ——— Mobile nav (Phase 9) — hamburger + offcanvas panel, built at runtime in
   script.js from the existing .el-nav__links / .el-nav__cta hrefs and labels, so
   there's no separate content to maintain. Hamburger only shows at/under the
   breakpoint where the inline links are hidden. ——— */
.el-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 60;
}
.el-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-on-dark);
  border-radius: 2px;
  transition: background var(--dur-base) var(--ease-soft), transform var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
}
.el-nav.is-solid .el-nav__hamburger span { background: var(--ink-900); }
@media (max-width: 991px) {
  .el-nav__hamburger { display: inline-flex; }
}
.el-nav__hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.el-nav__hamburger.is-active span:nth-child(2) { opacity: 0; }
.el-nav__hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.el-mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);
  background: var(--cream);
  box-shadow: var(--shadow-lg);
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: 96px 32px 32px;
  transform: translateX(100%);
  visibility: hidden; /* off-canvas panel must leave the tab order while closed */
  transition: transform var(--dur-base) var(--ease-soft), visibility 0s linear var(--dur-base);
}
.el-mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}
.el-mobile-nav__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-900);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.el-mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.el-mobile-nav__links a {
  display: flex;
  align-items: center;
  min-height: 44px;   /* tap target */
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-900);
  text-decoration: none;
}
.el-mobile-nav__cta {
  display: none;
  margin-top: 32px;
  padding: 14px 24px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-900);
  background: var(--gold-400);
  border-radius: var(--radius-pill);
  text-decoration: none;
}
@media (max-width: 767px) { .el-mobile-nav__cta { display: block; } }
.el-mobile-nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22, 19, 14, 0.5);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-soft);
}
.el-mobile-nav__backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .el-mobile-nav, .el-mobile-nav__backdrop { transition: none; }
}

/* ——— Contact form (Phase 8) — underline fields on the native Bricks Form element ——— */
.el-form label,
.el-form .form-group label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.el-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.el-form textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 0.65rem 0;
  width: 100%;
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
/* A bolder glowing underline instead of the generic box outline — box-shadow doesn't
   affect layout, so the field never shifts, and it stays clearly visible for keyboard
   focus without looking like a plain default rectangle around an underline-style field.
   !important: Name/Email compile their own native per-field ID rule (Message/textarea
   doesn't), which otherwise beats this class-based rule on those two fields only. */
.el-form input:focus,
.el-form textarea:focus {
  border-bottom-color: var(--accent-text) !important;
  box-shadow: 0 2px 0 0 var(--accent-text) !important;
}
/* transparent outline instead of none — invisible normally (the box-shadow glow above
   carries the visible focus state), but forced-colors mode (Windows High Contrast) strips
   box-shadow entirely, and only an actual outline gets repainted with the system's focus
   colour there. */
.el-form input:focus-visible,
.el-form textarea:focus-visible { outline: 2px solid transparent; }
.el-form .form-group { margin-bottom: var(--space-5); }
.el-form .bricks-button,
.el-form button[type="submit"] {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-on-dark);
  background: var(--ink-900);
  border: 1px solid var(--ink-900);
  border-radius: var(--btn-radius);
  padding: 15px 34px;
  align-self: flex-start;
}

/* ============================================================
   BRICKS-PASTE UTILITY CLASSES (Phases 5–7)
   Bricks' %root% element custom CSS is inert on any element that
   is nested or has children (confirmed on this install). Every
   CSS-only property for such elements lives here instead and is
   attached through the element's CSS classes. Layout, spacing,
   colour, borders, sizing and typography stay on native Bricks
   controls; these classes only carry what Bricks has no control for.
   ============================================================ */

/* Type */
.el-display { font-family: var(--font-display); }
.el-display--italic { font-family: var(--font-display); font-style: italic; }
.el-body { font-family: var(--font-body); }

/* Neutralise Bricks' nested-container width/margin defaults where a child must fill its parent */
.el-full { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.el-auto { width: auto; max-width: none; margin-left: 0; margin-right: 0; }

/* Badge (pill hugs its text) */
.el-badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  width: auto; white-space: nowrap; line-height: 1; font-family: var(--font-body);
}
.el-badge--abs { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 1; }

/* Link-style button (Button variant `link`) + arrow nudge + gold hover */
.el-btn-link { background: transparent; border: 0; padding: 0; font-family: var(--font-body); line-height: 1; gap: 0.6em; }
/* Stockist "Directions" link measured 12px tall on phones — give it a proper tap area. */
.el-scard .el-btn-link { display: inline-flex; align-items: center; min-height: 44px; }
.el-btn-link--plain { text-transform: none; letter-spacing: 0; }
/* Matches both the old Font Awesome <i> (if any button still uses it) and the inline
   SVG that replaced it. */
.el-btn-arrow i, .el-btn-arrow svg { transition: transform 0.3s var(--ease-out); }
.el-btn-arrow:hover i, .el-btn-arrow:hover svg { transform: translateX(4px); }
.el-btn-gold:hover { background: var(--gold-500); }
.el-btn-ghost { background: transparent; transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); }
.el-btn-ghost:hover { background: var(--text-on-dark); color: var(--ink-900) !important; }
.el-btn-block { width: 100%; justify-content: center; }

/* Product card */
.el-pcard { box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.el-pcard__img { display: block; max-width: 100%; filter: drop-shadow(0 18px 26px rgba(var(--border-rgb), 0.18)); transition: transform var(--dur-slow) var(--ease-out); }
.el-gradient-gold { background: linear-gradient(180deg, var(--gold-100), var(--sand)); }
/* hover:hover — without this, a tap on a touchscreen can leave the lift/zoom stuck on
   since there's no mouseout to clear it. */
@media (hover: hover) {
  .el-pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .el-pcard:hover .el-pcard__img { transform: scale(1.05); }
}

/* Stockist card */
.el-scard { text-decoration: none; transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
@media (hover: hover) {
  .el-scard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}
.el-circle { display: flex; align-items: center; justify-content: center; line-height: 1; }

/* Round icon button (carousel prev/next, popup close) */
.el-circle-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; border: 0; cursor: pointer; transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); }
.el-circle-btn--outline:hover { background: var(--ink-900) !important; color: var(--text-on-dark) !important; }
.el-arrow-icon--default { display: block; }
.el-arrow-icon--hover { display: none; }
.el-circle-btn--outline:hover .el-arrow-icon--default { display: none; }
.el-circle-btn--outline:hover .el-arrow-icon--hover { display: block; }
.el-arrow-icon--flip { transform: rotate(180deg); }

/* Sections */
.el-section { padding-block: var(--section-y); }
.el-fill { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; max-width: none; }
/* .el-fill sits on the Bricks <picture> wrapper, not the <img> inside it — without this the
   img falls back to the global `img { height: auto }` and stops short of the box (the hero
   photo ended ~200px above the section bottom). object-fit comes from Bricks' own ID rule. */
.el-fill img { width: 100%; height: 100%; }
.el-cover { object-fit: cover; }
.el-contain { object-fit: contain; }
.el-noclick { pointer-events: none; }
.el-hero__photo { object-position: var(--hero-pos, center); filter: var(--img-filter, none); }
.el-hero__scrim { background: linear-gradient(100deg, rgba(var(--hero-rgb), var(--hd-a1)) 0%, rgba(var(--hero-rgb), var(--hd-a2)) 36%, rgba(var(--hero-rgb), var(--hd-a3)) 60%, rgba(var(--hero-rgb), 0) 80%); }
.el-hero__vignette { background: linear-gradient(180deg, rgba(var(--hero-rgb), var(--hd-v1)) 0%, transparent 22%, transparent 70%, rgba(var(--hero-rgb), var(--hd-v2)) 100%); }
.el-story__wm { width: clamp(160px, 18vw, 260px); height: auto; opacity: var(--story-wm-opacity, 0); pointer-events: none; user-select: none; }
.el-craft__photo { opacity: 0.5; filter: var(--img-filter, none); }
.el-craft__scrim { background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0.82) 0%, rgba(var(--scrim-rgb), 0.7) 50%, rgba(var(--scrim-rgb), 0.86) 100%); }
.el-map { display: block; text-decoration: none; background: linear-gradient(135deg, var(--olive-100), var(--sand)); }
.el-map__wm { position: absolute; inset: 0; margin: auto; width: 88px; height: auto; opacity: 0.18; }
.el-map__bar { background: rgba(250, 246, 236, 0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* Illustrated map (inline SVG in the Bricks Code element, drawn from OpenStreetMap coastline
   data) — replaces the Google Maps embed, which set Google cookies without consent. No
   third-party requests at all; the "View on Google Maps" link in the bar is the way out.
   The SVG uses `slice` so it fills any card shape, cropping the sides on narrow cards. The pin
   marks Chora, the island's village. Both languages' labels ship in the one snippet and the
   page's lang attribute picks which shows. */
.el-map__frame { position: absolute; inset: 0; }
.el-map__art, .el-map__art svg { display: block; width: 100%; height: 100%; }
.el-map__sea { fill: #E4E6D8; }                  /* between --olive-100 and --sand */
.el-map__sea-s { stroke: #E4E6D8; }               /* same colour — cuts the gaps between ripple lines */
.el-map__ripple { color: rgba(107, 122, 79, 0.22); }  /* --olive-500 */
.el-map__land { fill: var(--cream); stroke: var(--gold-500); stroke-width: 0.9; stroke-linejoin: round; }
.el-map__label { font-family: var(--font-display); font-size: 17px; font-weight: 600; fill: var(--ink-900); }
.el-map__pin circle { fill: var(--gold-600); stroke: var(--cream); stroke-width: 2; }
.el-map__pin .el-map__pulse { fill: none; stroke: var(--gold-600); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: el-map-pulse 2.4s var(--ease-out) infinite; }
@keyframes el-map-pulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3); opacity: 0; } }
.el-map__el { display: none; }
html[lang^="el"] .el-map__el { display: inline; }
html[lang^="el"] .el-map__en { display: none; }
@media (max-width: 600px) {
  .el-map__label { font-size: 15px; }
}
.el-form-card { box-shadow: var(--shadow-sm); }

/* Grids (native responsive keys are also set; these are the fallback at Bricks' 991/767 breakpoints) */
.el-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.el-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.el-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.el-grid-footer { display: grid; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 991px) { /* matches Bricks' default tablet_portrait breakpoint */
  .el-grid-3, .el-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-grid-2.el-grid-2--stack { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) { /* matches Bricks' default mobile_landscape breakpoint */
  .el-grid-2, .el-grid-3, .el-grid-4, .el-grid-footer { grid-template-columns: minmax(0, 1fr); }
}

/* Discover button loading state — the popup's per-product content comes from a real
   network request (Bricks' load_popup_content, ~200-300ms), so the button gets a spinner
   the instant it's clicked rather than sitting silent while that request is in flight. */
.el-pcard .el-btn-arrow.is-loading,
.el-pcard .el-btn-link.is-loading {
  pointer-events: none;
  color: transparent !important;
  position: relative;
}
.el-pcard .el-btn-arrow.is-loading::after,
.el-pcard .el-btn-link.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--accent-strong);
  border-top-color: transparent;
  border-radius: 50%;
  animation: el-spin 0.7s linear infinite;
}
@keyframes el-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .el-pcard .el-btn-arrow.is-loading::after,
  .el-pcard .el-btn-link.is-loading::after { animation: none; opacity: 0.6; }
}

/* Popup */
.el-popup { box-shadow: var(--shadow-lg); max-height: 90vh; max-height: 90dvh; }
.el-popup__img { display: block; max-height: 420px; max-width: 100%; filter: drop-shadow(0 24px 36px rgba(var(--border-rgb), 0.22)); }
.el-popup__scroll { overflow-y: auto; min-width: 0; }
.el-popup__half { flex: 1 1 50%; min-width: 0; }
.el-popup-close { min-width: 44px; min-height: 44px; }   /* native _width/_height are 40px — min-* wins without !important */
@media (max-width: 767px) { /* matches Bricks' default mobile_landscape breakpoint */
  /* Stacked layout: the dialog itself is the ONLY scroller. The dialog's native
     _overflow:hidden and the columns' native _flexGrow/_padding compile to unlayered
     ID rules, so each override below needs !important to land. */
  /* nowrap is essential: Bricks containers compute flex-wrap:wrap, and a wrapping COLUMN
     container with a capped height starts a second column to the right instead of
     overflowing downward — the banner and details end up side by side, off-screen. */
  .el-popup { flex-direction: column; flex-wrap: nowrap !important; overflow-x: hidden !important; overflow-y: auto !important; }
  .el-popup__scroll { overflow: visible; }
  .el-popup__half { flex: 0 0 auto !important; }
  /* Media half becomes a compact banner instead of filling the dialog. */
  .el-popup .el-popup__half.el-gradient-gold {
    min-height: 200px;
    max-height: 240px;
    padding: var(--space-5) !important;
  }
  .el-popup__img { max-height: 180px; }
  .el-popup .el-popup__half.el-popup__scroll { padding: var(--space-5) !important; }
}
@media (max-width: 478px) { /* mobile_portrait — 3 spec columns cannot hold their values side by side */
  .el-popup .el-popup__scroll > .el-full { flex-wrap: wrap; row-gap: var(--space-4); }
  .el-popup .el-popup__scroll > .el-full > .el-auto { flex-basis: 45%; }
}

/* Header extras */
/* Don't override #brx-header's `position` — Bricks' own Sticky feature manages that (sticky at
   rest, fixed once scrolled) and an ID-selector override here would freeze it permanently. Instead
   pull the Hero up underneath it by the header's known fixed height (16px padding + 44px logo +
   16px padding + 1px border = 77px — stable across breakpoints since nav height doesn't change
   when links hide on mobile) and just make sure the header paints above the Hero once they overlap. */
:root { --header-h: 77px; }
/* Otherwise #story/#products/#contact land flush under the sticky header on anchor jump. */
html { scroll-padding-top: var(--header-h); }
#brx-header { z-index: 50; }
.el-hero { margin-top: calc(-1 * var(--header-h)) !important; padding-top: var(--header-h) !important; }
@media (max-width: 767px) {
  /* Bricks' native _heightMin:100vh ignores mobile browser chrome and pushes the CTAs
     below the fold; svh is the visible-viewport equivalent (ignored by old browsers,
     which keep the 100vh ID rule). */
  .el-hero { min-height: 100svh !important; }
}
.el-nav { border-bottom: 1px solid transparent; transition: background var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft); }
.el-nav__link, .el-nav__lang { transition: color var(--dur-base) var(--ease-soft); white-space: nowrap; }
/* flex-shrink:0 + object-fit:contain guard against Safari's flexbox min-content bug with
   <img> children, which can compute a non-square box under width pressure and stretch the
   (square) logo to fill it — Chrome isn't affected, so this was invisible until reported
   on iOS Safari. Both are no-ops everywhere the box is already square. */
.el-nav__logo { display: block; flex-shrink: 0; }
.el-nav__logo img { object-fit: contain; aspect-ratio: 1 / 1; }
.el-nav__logo--ink { display: none; }

/* ——— Stockists track (Phase 7) — snap track, hidden scrollbar; JS nudges on prev/next ——— */
.stockist-track {
  display: flex; gap: 20px; padding: 6px 0;
  /* nowrap is essential: Bricks containers compute flex-wrap:wrap, so once the cards no
     longer fit on one line (phones, or 5+ stockists on desktop) they wrap into rows and the
     track never overflows sideways — nothing to scroll or swipe. */
  flex-wrap: nowrap !important;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.stockist-track::-webkit-scrollbar { display: none; }
.stockist-track > * { flex: 0 0 290px; scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
}