/*
 * ============================================================
 * MOC BY DYLAN — Premium Header Styles
 * Brand: minimal, calm, natural, Zen — modern & Gen Z
 * ============================================================
 */

/* ── Google Font import (Cormorant Garamond for logo elegance) ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ─────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
───────────────────────────────────────────── */
:root {
  --moc-font-logo: 'Cormorant Garamond', Georgia, serif;
  --moc-font-nav: 'DM Sans', system-ui, sans-serif;
  --moc-color-bg: rgba(217, 226, 211, 0.92);
  --moc-color-bg-solid: #D9E2D3;
  --moc-color-text: #1E2B1C;
  --moc-color-text-muted: #5C7057;
  --moc-color-accent: #7A9070;
  --moc-color-border: rgba(30, 43, 28, 0.09);
  --moc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --moc-transition-fast: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --moc-shadow-header: 0 1px 20px rgba(30, 43, 28, 0.06);
}

/* ─────────────────────────────────────────────
   2. HEADER BACKDROP & BACKGROUND OVERRIDE
   Apply premium frosted-glass background to the header
───────────────────────────────────────────── */
#header-component {
  background: var(--moc-color-bg) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border-bottom: 1px solid var(--moc-color-border) !important;
  transition: box-shadow 0.35s ease, background 0.35s ease !important;
}

/* Richer shadow when sticky/scrolled */
#header-component[data-sticky-state='active'],
.header-section:has(> #header-component[sticky='always']) #header-component {
  box-shadow: var(--moc-shadow-header) !important;
  background: rgba(217, 226, 211, 0.97) !important;
}

/* Override the underlay backgrounds so they use our earthy palette */
#header-component .header__underlay-closed {
  background: var(--moc-color-bg) !important;
}

/* ─────────────────────────────────────────────
   3. PREMIUM LOGO TYPOGRAPHY
   Applied to the .header-logo anchor
───────────────────────────────────────────── */
.moc-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none !important;
  line-height: 1;
  gap: 4px;
  padding-inline-end: clamp(6px, 0.6vw, 10px);
  transition: opacity 0.4s cubic-bezier(0.25, 0, 0.1, 1);
}

.moc-logo:hover {
  text-decoration: none !important;
  opacity: 0.72;
}

.moc-logo__primary {
  font-family: var(--moc-font-logo);
  font-weight: 400;
  font-style: italic;
  font-size: 2.4rem;
  letter-spacing: -0.015em;
  color: var(--moc-color-text);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.moc-logo__leaf {
  display: inline-flex;
  align-items: center;
  opacity: 0.88;
  transform: translateY(-1px);
  transition: var(--moc-transition);
}

.moc-logo:hover .moc-logo__leaf {
  transform: translateY(-2px) rotate(-8deg);
  opacity: 0.9;
}

.moc-logo__byline {
  font-family: var(--moc-font-nav);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(30, 43, 28, 0.58);
  padding-left: 2px;
}

/* Mobile logo sizing */
@media screen and (max-width: 749px) {
  .moc-logo__primary {
    font-size: 2.0rem;
  }
  .moc-logo__byline {
    font-size: 0.56rem;
  }
}

/* ─────────────────────────────────────────────
   4. NAVIGATION LINK REFINEMENTS
   Smooth underline slide + earthy colors
───────────────────────────────────────────── */
.header-menu .menu-list__link,
header-menu .menu-list__link {
  font-family: var(--moc-font-nav) !important;
  font-weight: 300 !important;
  font-size: 0.775rem !important;
  letter-spacing: 0.065em !important;
  color: rgba(30, 43, 28, 0.82) !important;
  text-transform: none !important;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.38s cubic-bezier(0.25, 0, 0.1, 1) !important;
}

/* Animated underline — warm wood tone, not digital green */
.header-menu .menu-list__link::after,
header-menu .menu-list__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(139, 98, 69, 0.52);
  transition: width 0.45s cubic-bezier(0.25, 0, 0.1, 1);
}

/* Hover: full ink reveal */
.header-menu .menu-list__link:hover,
header-menu .menu-list__link:hover {
  color: rgba(30, 43, 28, 0.95) !important;
}

.header-menu .menu-list__link:hover::after,
header-menu .menu-list__link:hover::after {
  width: 100%;
}

/* Active page state — persistent warm underline as emotional anchor */
.header-menu .menu-list__link[aria-current='page'],
header-menu .menu-list__link[aria-current='page'] {
  color: rgba(30, 43, 28, 0.95) !important;
}

.header-menu .menu-list__link[aria-current='page']::after,
header-menu .menu-list__link[aria-current='page']::after {
  width: 100%;
  background: rgba(139, 98, 69, 0.45);
}

/* Generous horizontal spacing between nav items — key to editorial rhythm */
header-menu .menu-list__list-item,
.header-menu .menu-list__list-item {
  padding-inline: clamp(8px, 0.75vw, 12px);
}

/* ─────────────────────────────────────────────
   5. HEADER ACTION ICONS (cart, search)
   Match earthy brand color
───────────────────────────────────────────── */
.header-actions__action,
.search-action {
  color: rgba(30, 43, 28, 0.72) !important;
  transition: color 0.38s cubic-bezier(0.25, 0, 0.1, 1), opacity 0.38s cubic-bezier(0.25, 0, 0.1, 1) !important;
}

/* Hover: full ink reveal */
.header-actions__action:hover,
.search-action:hover {
  color: rgba(30, 43, 28, 0.95) !important;
  opacity: 1 !important;
}

/* Cart icon dot indicator */
.cart-count-bubble {
  background-color: var(--moc-color-accent) !important;
}

/* ─────────────────────────────────────────────
   6. "SHOP NOW" CTA BUTTON IN HEADER
───────────────────────────────────────────── */
.moc-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--moc-font-nav);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(30, 43, 28, 0.85) !important;
  text-decoration: none;
  background: rgba(250, 246, 238, 0.48);
  border: 1px solid rgba(139, 98, 69, 0.28);
  border-radius: 40px;
  padding: 6px 20px;
  transition: border-color 0.38s cubic-bezier(0.25, 0, 0.1, 1),
              background 0.38s cubic-bezier(0.25, 0, 0.1, 1),
              color 0.38s cubic-bezier(0.25, 0, 0.1, 1);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Richer parchment hover — warm and quietly confident */
.moc-header-cta:hover {
  background: rgba(250, 246, 238, 0.78);
  color: rgba(30, 43, 28, 0.95) !important;
  border-color: rgba(139, 98, 69, 0.52);
  text-decoration: none;
}

/* Hide CTA on small screens to avoid clutter */
@media screen and (max-width: 749px) {
  .moc-header-cta {
    display: none;
  }
}

/* ─────────────────────────────────────────────
   7. HEADER ROW SPACING ENHANCEMENT
───────────────────────────────────────────── */
.header__columns {
  padding-inline: clamp(36px, 6vw, 80px) !important;
}

/* Taller header for premium feel */
body {
  --header-height: 74px !important;
}

/* ─────────────────────────────────────────────
   8. ANNOUNCEMENT BAR — lighter Sage Mist ribbon
   Distinctly lighter than header (#D8DED3) so the
   two tiers read as separate intentional layers
───────────────────────────────────────────── */
.color-scheme-3,
.color-scheme-scheme-3 {
  background-color: #EDF3E8 !important;
}

/* Hairline separator between bar and nav */
.announcement-bar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ─────────────────────────────────────────────
   9. MOBILE DRAWER REFINEMENTS
───────────────────────────────────────────── */
.header__icon--menu svg,
.header__icon--close svg {
  color: var(--moc-color-text);
}

/* ─────────────────────────────────────────────
   10. FADE-IN ANIMATION ON PAGE LOAD
───────────────────────────────────────────── */
@keyframes moc-header-fadein {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-section {
  animation: moc-header-fadein 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ─────────────────────────────────────────────
   11. HEADER ROW — remove default borders
───────────────────────────────────────────── */
#header-component .header__row {
  --border-bottom-width: 0px !important;
}

/* ─────────────────────────────────────────────
   12. LANGUAGE / LOCALIZATION — HEADER REFINEMENT
   Two scenarios:
   A) button (country + language) → .dropdown-localization__button
   B) select (language only)      → .localization-form__select
   Deeper cascade overrides live in header.liquid {% stylesheet %}.
───────────────────────────────────────────── */

/* A) Button path */
.dropdown-localization__button.dropdown-localization__button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
  font-family: var(--moc-font-nav) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  color: var(--moc-color-text-muted) !important;
  transition: color 0.22s ease !important;
}

.dropdown-localization__button.dropdown-localization__button:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--moc-color-text) !important;
}

.dropdown-localization__button .currency-code {
  display: none !important;
}

.dropdown-localization__button .svg-wrapper.icon-caret {
  width: 9px !important;
  height: 9px !important;
  opacity: 0.4 !important;
}

/* B) Select path */
#header-component .dropdown-localization .language-selector {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  width: auto !important;
  gap: 2px !important;
}

#header-component .dropdown-localization .localization-form__select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 18px 0 0 !important;
  font-family: var(--moc-font-nav) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  color: var(--moc-color-text-muted) !important;
  cursor: pointer;
  max-width: 110px !important;
  transition: color 0.22s ease !important;
}

#header-component .dropdown-localization .localization-form__select:hover {
  color: var(--moc-color-text) !important;
}

#header-component .dropdown-localization .language-selector .svg-wrapper.icon-caret {
  width: 9px !important;
  height: 9px !important;
  right: 0 !important;
  opacity: 0.4 !important;
}

/* ─────────────────────────────────────────────
   13. LOGO — centered on mobile (drawer mode)
   Mirrors the desktop absolute-centering trick
   for the drawer menu style used on touch devices.
───────────────────────────────────────────── */
@media screen and (max-width: 749px) {
  #header-component[data-menu-style='drawer'] .header__columns {
    position: relative;
  }

  #header-component[data-menu-style='drawer'] .header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-inline: 0 !important;
    /* Use content-height so translate(-50%,-50%) centres the logo visually */
    height: auto !important;
    align-items: center !important;
  }

  /*
   * Mobile logo image sizing guard
   * When settings.logo.aspect_ratio is nil (SVG logos or improperly-sized
   * images), Liquid evaluates logo_width_mobile as 0, which sets
   * --header-logo-image-width-mobile: 0px — making the image zero-width
   * and invisible on mobile. Override to auto + cap with max-width/max-height
   * so any logo renders correctly regardless of aspect_ratio availability.
   */
  .header-logo__image {
    width: auto !important;
    max-width: clamp(100px, 28vw, 140px) !important;
    height: auto !important;
    max-height: var(--header-logo-image-height-mobile, 40px) !important;
    object-fit: contain;
  }
}

/* ─────────────────────────────────────────────
   14. MOBILE HEADER LANGUAGE SELECTOR
   Decathlon-style: language code visible directly
   in the mobile top bar, before cart/action icons.
   Layout: [☰] [🔍] [···Logo···] [VI▾] [🔍] [🛒]
───────────────────────────────────────────── */

/* Hidden on desktop by default */
.moc-mobile-lang {
  display: none;
}

/* ── Grid: add a 'lang' column between center and rightA ── */
@media screen and (max-width: 749px) {
  #header-component .header__columns:has(.moc-mobile-lang) {
    grid-template-columns: 44px 44px 1fr auto 44px 44px;
    grid-template-areas: 'leftA leftB center lang rightA rightB';
  }

  .moc-mobile-lang {
    grid-area: lang;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: var(--layer-raised, 300);
    padding-inline: 2px;
  }
}

/* Drawer mode: same grid override (applied via data-attr, not media query) */
#header-component[data-menu-style='drawer'] .header__columns:has(.moc-mobile-lang) {
  grid-template-columns: 44px 44px 1fr auto 44px 44px;
  grid-template-areas: 'leftA leftB center lang rightA rightB';
}

#header-component[data-menu-style='drawer'] .moc-mobile-lang {
  grid-area: lang;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: var(--layer-raised, 300);
  padding-inline: 2px;
}

/* ── Trigger button (country + language path) ── */
.moc-mobile-lang__btn {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 2px !important;
  font-family: var(--moc-font-nav) !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.09em !important;
  color: var(--moc-color-text-muted) !important;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.22s ease !important;
  line-height: 1;
}

.moc-mobile-lang__btn:hover,
.moc-mobile-lang__btn:focus-visible {
  color: var(--moc-color-text) !important;
  background: transparent !important;
  outline: none;
}

.moc-mobile-lang__btn:focus-visible {
  outline: 2px solid var(--moc-color-accent) !important;
  outline-offset: 2px;
}

.moc-mobile-lang__btn .svg-wrapper.icon-caret {
  width: 8px !important;
  height: 8px !important;
  flex-shrink: 0;
  opacity: 0.45 !important;
  transition: transform 0.2s ease;
}

.moc-mobile-lang__btn[aria-expanded='true'] .svg-wrapper.icon-caret {
  transform: rotate(180deg);
}

/* Flag circle icon */
.moc-mobile-lang .icon-flag {
  width: 15px;
  height: 15px;
  clip-path: circle(50%); /* stylelint-disable-line */
  background-position: center;
  background-size: cover;
  flex-shrink: 0;
}

/* ── Dropdown panel positioning ── */
.moc-mobile-lang .localization-wrapper {
  top: calc(100% + 8px);
  right: 0;
  left: unset;
  min-width: 200px;
}

/* ── Language-only <select> path inside mobile lang ── */
.moc-mobile-lang .language-selector,
.moc-mobile-lang .language-selector--collapse-space {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  width: auto !important;
  gap: 2px !important;
  justify-content: flex-start !important;
  min-height: unset !important;
}

.moc-mobile-lang .localization-form__select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 16px 0 0 !important;
  font-family: var(--moc-font-nav) !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.09em !important;
  color: var(--moc-color-text-muted) !important;
  cursor: pointer;
  max-width: 80px !important;
  transition: color 0.22s ease !important;
  line-height: 1;
}

.moc-mobile-lang .localization-form__select:hover {
  color: var(--moc-color-text) !important;
  background: transparent !important;
}

.moc-mobile-lang .localization-form__select option {
  background-color: var(--moc-color-bg-solid, #D9E2D3);
  color: var(--moc-color-text, #1E2B1C);
}

.moc-mobile-lang .language-selector .svg-wrapper.icon-caret {
  width: 8px !important;
  height: 8px !important;
  right: 0 !important;
  opacity: 0.45 !important;
}

/* Localization form component wrapper in mobile lang */
.moc-mobile-lang localization-form-component {
  display: flex;
  align-items: center;
}

/* ─────────────────────────────────────────────
   15. STICKY HEADER OFFSET — scroll-padding guard
   Uses --header-group-height (header + announcement bar)
   so in-page anchor jumps never land under the
   sticky header on any device or configuration.
───────────────────────────────────────────── */
html {
  /* --header-group-height is set dynamically by theme JS in theme.liquid.
     Fallback 70px covers the sticky header alone.
     Extra 36px accounts for the breadcrumb strip height. */
  scroll-padding-top: calc(var(--header-group-height, 70px) + 36px);
}

/* Key content anchors — product form, gallery, info blocks */
.product-form,
.product__media-wrapper,
[id^="ProductInfo-"],
[id^="ProductSubmitButton-"],
[id^="MainContent"] {
  scroll-margin-top: calc(var(--header-group-height, 70px) + 36px);
}

/* ─────────────────────────────────────────────
   16. MOC BREADCRUMB STRIP
   Editorial navigation row that creates a polished
   transition between sticky header and page content.
   Sage Greige #D9E2D3 background, minimal sage palette,
   Mộc By Dylan craft aesthetic.
───────────────────────────────────────────── */
.moc-breadcrumb {
  background-color: var(--moc-color-bg-solid, #D9E2D3);
  border-bottom: 1px solid rgba(30, 43, 28, 0.06);
  width: 100%;
  position: relative;
  z-index: 1;
  /* Subtle fade-in entrance */
  animation: moc-bc-fadein 0.3s ease both;
}

@keyframes moc-bc-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.moc-breadcrumb__inner {
  max-width: var(--page-width, 1440px);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
  padding-block: 9px 8px;
}

.moc-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.moc-breadcrumb__item {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}

/* Last item is allowed to shrink and truncate */
.moc-breadcrumb__item:last-child {
  flex-shrink: 1;
  overflow: hidden;
}

.moc-breadcrumb__sep {
  font-family: var(--moc-font-nav, 'DM Sans', system-ui, sans-serif);
  font-size: 9px;
  color: rgba(30, 43, 28, 0.28);
  margin-inline: 8px;
  user-select: none;
  flex-shrink: 0;
}

.moc-breadcrumb__link {
  font-family: var(--moc-font-nav, 'DM Sans', system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--moc-color-text-muted, #5C7057);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.moc-breadcrumb__link:hover {
  color: var(--moc-color-accent, #7A9070);
  text-decoration: none;
}

/* Underline indicator on hover — slides from left */
.moc-breadcrumb__link {
  position: relative;
  padding-bottom: 1px;
}

.moc-breadcrumb__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--moc-color-accent, #7A9070);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.moc-breadcrumb__link:hover::after {
  width: 100%;
}

.moc-breadcrumb__current {
  font-family: var(--moc-font-nav, 'DM Sans', system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--moc-color-text, #1E2B1C);
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

@media screen and (max-width: 749px) {
  .moc-breadcrumb__inner {
    padding-inline: 16px;
    padding-block: 7px 6px;
  }

  .moc-breadcrumb__link,
  .moc-breadcrumb__current {
    font-size: 9.5px;
  }

  .moc-breadcrumb__current {
    max-width: 140px;
  }

  .moc-breadcrumb__sep {
    margin-inline: 5px;
  }
}

/* Hide the drawer footer language selector on mobile — it is now in the header bar */
@media screen and (max-width: 749px) {
  .moc-drawer-footer .menu-drawer__localization {
    display: none;
  }
}

/* ─────────────────────────────────────────────
   18. ATMOSPHERIC SIGNATURE DETAILS
   Warm grain texture, softer backdrop, editorial
   micro-interactions that feel tactile and human
───────────────────────────────────────────── */

/* Warm grain overlay — barely perceptible, adds tactile depth */
#header-component::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.050;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  background-repeat: repeat;
}

/* Warmer parchment-sage frosted glass */
#header-component {
  background: rgba(222, 220, 208, 0.91) !important;
  backdrop-filter: blur(20px) saturate(1.15) brightness(1.01) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.15) brightness(1.01) !important;
}

#header-component[data-sticky-state='active'],
.header-section:has(> #header-component[sticky='always']) #header-component {
  background: rgba(222, 220, 208, 0.97) !important;
}

/* Localization selector — aligned to nav contrast tier (0.72) */
.dropdown-localization__button.dropdown-localization__button {
  color: rgba(30, 43, 28, 0.72) !important;
  transition: color 0.38s cubic-bezier(0.25, 0, 0.1, 1) !important;
}

.dropdown-localization__button.dropdown-localization__button:hover {
  color: rgba(30, 43, 28, 0.95) !important;
}

#header-component .dropdown-localization .localization-form__select {
  color: rgba(30, 43, 28, 0.72) !important;
  transition: color 0.38s cubic-bezier(0.25, 0, 0.1, 1) !important;
}

#header-component .dropdown-localization .localization-form__select:hover {
  color: rgba(30, 43, 28, 0.95) !important;
}

/* Cart bubble — warmer walnut dot */
.cart-count-bubble {
  background-color: rgba(139, 98, 69, 0.75) !important;
}

/* ─────────────────────────────────────────────
   17. PREMIUM RHYTHM SYSTEM
   3-zone balance: column gaps, icon spacing,
   logo zone protection, nav center alignment
───────────────────────────────────────────── */

/* Column gap between the 3 zones on desktop */
#header-component[data-menu-style='menu'] .header__columns {
  column-gap: clamp(16px, 2vw, 32px) !important;
}

/* Right-side action icons — consistent, breathable gap */
header-actions {
  gap: clamp(16px, 1.5vw, 22px) !important;
}

/* Logo zone — always at least its natural content width */
.header__column--left {
  min-width: max-content;
}

/* Nav center column — spacing lives on list items, not the column */
.header__column--center {
  gap: 0 !important;
}

/* All header action icons — unified sizing */
#header-component .header-actions__action .svg-wrapper svg,
#header-component .search-action svg {
  width: 17px !important;
  height: 17px !important;
}

/* Mobile — slightly taller header for premium touch feel */
@media screen and (max-width: 749px) {
  body {
    --header-height: 62px !important;
  }

  /* Touch targets — 44px minimum per WCAG */
  #header-component .header-actions__action,
  #header-component .search-action button {
    min-height: 44px;
    min-width: 44px;
  }
}