/* ==========================================================================
   CLOZSY — GLOBAL HEADER  (Phase 3)
   --------------------------------------------------------------------------
   Scope: the Elementor header location and .clz-* header classes only.
   Nothing here targets bare element selectors, so no style leaks into
   WooCommerce templates or future pages.

   Colour, radius, motion and spacing all read --clz-* tokens from
   assets/css/variables.css + inc/design-tokens.php. There are no literal
   colour values in this file.

   !important appears only on the handful of layout properties that Elementor's
   per-post container CSS would otherwise win by specificity. It is confined to
   the header shell and its four slots.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADER-LOCAL MEASUREMENTS
   Phase 2 already owns --clz-header-h / -stuck / -mobile, --clz-header-max,
   --clz-header-x, --clz-icon, --clz-tap, --clz-drawer-w, --clz-cart-drawer-w
   and the whole colour/motion scale. Those are consumed unchanged.

   Declared below: values the header needs that Phase 2 has no equivalent for,
   plus two deliberate header-scope overrides (documented inline).
   -------------------------------------------------------------------------- */
body {
  /* No tablet header height exists in Phase 2. */
  --clz-header-h-tablet: 74px;

  /* The logo is a stacked lockup whose PNG canvas carries ~20% transparent
     padding on top and ~12% below. Sizing by canvas HEIGHT (the Phase 2
     --clz-logo-h approach) renders the wordmark far too small, so the header
     sizes the mark by WIDTH instead. 150px canvas width => ~44px of visible
     ink, of which the wordmark band is ~28px. */
  --clz-logo-w:        150px;
  --clz-logo-w-stuck:  132px;
  --clz-logo-w-tablet: 142px;
  --clz-logo-w-mobile: 128px;

  /* Phase 2's --clz-nav-gap is 3rem, wider than this header wants. Overridden
     to 32px, inside the 28-36px target. Declared in px rather than rem on
     purpose: Astra reduces the root font-size at its own breakpoints, which
     would silently drag a rem-based gap below the intended range. */
  --clz-nav-gap: 32px;

  /* Phase 2's --clz-tap is 40px. Mobile needs the 44px accessibility floor. */
  --clz-tap-mobile: 44px;

  --clz-header-slot-gap: var(--clz-space-5);
}

/* --------------------------------------------------------------------------
   2. UTILITY
   -------------------------------------------------------------------------- */
.clz-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sticky positioning fails if any ancestor uses overflow-x: hidden.
   `clip` prevents horizontal scroll identically but keeps sticky working. */
html,
body {
  overflow-x: clip;
}

/* Scroll-state sentinel: a zero-cost marker placed before the header that
   IntersectionObserver watches, so no scroll listener is needed. */
.clz-header-sentinel {
  width: 100%;
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. HEADER SHELL + STICKY
   The Elementor header location is a direct child of #page, which makes it the
   correct document-level element for position: sticky. Sticky is NOT placed on
   an inner container, whose parent would only be as tall as the header itself.
   -------------------------------------------------------------------------- */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: var(--clz-z-header);
  background-color: var(--clz-bg);
  border-bottom: 1px solid var(--clz-border);
  transition:
    background-color var(--clz-transition),
    border-color var(--clz-transition),
    box-shadow var(--clz-transition);
}

/* Scrolled state: a slightly elevated surface and a stronger hairline.
   No blur, no scale, no transform — restrained by design. */
html.clz-stuck .elementor-location-header {
  background-color: var(--clz-surface);
  border-bottom-color: var(--clz-border-strong);
  box-shadow: var(--clz-shadow-sm);
}

/* --------------------------------------------------------------------------
   4. HEADER GRID
   Four slots. A 1fr / auto / 1fr track pair keeps the navigation optically
   centred no matter how wide the logo or the action cluster becomes, which is
   what stops the wordmark from pushing the nav off centre.
   -------------------------------------------------------------------------- */
.clz-header__inner {
  --display: grid;                    /* Elementor 4 reads display from this. */
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: var(--clz-header-slot-gap) !important;
  width: 100% !important;
  max-width: var(--clz-header-max) !important;
  margin-inline: auto !important;
  padding: 0 var(--clz-header-x) !important;
  min-height: var(--clz-header-h);
  transition: min-height var(--clz-transition);
}

html.clz-stuck .clz-header__inner {
  min-height: var(--clz-header-h-stuck);
}

/* Each slot is an Elementor container. Its widget wrappers are collapsed with
   display: contents so the authored markup becomes the real layout child and
   no builder chrome sits between the grid and the content. */
.clz-header__slot {
  /* Every slot is pinned to row 1. The menu trigger comes first in the DOM (so
     the mobile tab order matches the painted order) but sits in the LAST column
     on tablet. Without an explicit row, grid auto-placement moves the cursor
     past that column and pushes the remaining slots onto a second row, which
     silently doubles the header height. */
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* Elementor 4 renders shortcode widgets as
   .elementor-widget-shortcode > .elementor-shortcode  (there is no
   .elementor-widget-container in this version). Both wrappers are dissolved so
   the authored markup becomes the real flex child of the slot. The Menu Cart
   widget is deliberately excluded — it is restyled as a flex item in §8. */
.clz-header__slot > .elementor-widget-shortcode,
.clz-header__slot > .elementor-widget-shortcode > .elementor-shortcode {
  display: contents;
}

.clz-header__brand   { grid-column: 1; justify-content: flex-start !important; }
.clz-header__nav     { grid-column: 2; justify-content: center !important; }
.clz-header__actions {
  grid-column: 3;
  justify-content: flex-end !important;
  gap: var(--clz-space-1) !important;
}
.clz-header__burger  { display: none !important; }

/* --------------------------------------------------------------------------
   5. BRAND
   -------------------------------------------------------------------------- */
.clz-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  border-radius: var(--clz-radius-sm);
  transition: opacity var(--clz-transition);
}

.clz-brand:hover { opacity: 0.85; }

.clz-brand:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
}

.clz-brand img {
  display: block;
  width: var(--clz-logo-w);
  height: auto;
  max-width: 100%;
  /* The PNG canvas carries 20.2% transparent padding above the artwork and
     12.4% below, so the visible ink sits 3.8% of the canvas height below the
     box centre. A percentage translate resolves against the element's own
     height, so this one value optically centres the mark at every size. */
  transform: translateY(-3.8%);
  transition: width var(--clz-transition);
}

html.clz-stuck .clz-brand img { width: var(--clz-logo-w-stuck); }

/* --------------------------------------------------------------------------
   6. PRIMARY NAVIGATION
   -------------------------------------------------------------------------- */
.clz-nav {
  display: flex;
  align-items: center;
  gap: var(--clz-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.clz-nav li { margin: 0; }

.clz-nav a {
  position: relative;
  display: block;
  padding: var(--clz-space-2) 0;
  font-family: var(--clz-font-body);
  font-size: 0.9375rem;                 /* 15px */
  font-weight: var(--clz-fw-medium);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--clz-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--clz-transition);
}

/* A short 14px hairline rather than a full-width underline. Hidden by default,
   half strength on hover, full strength on the current page. */
.clz-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14px;
  height: 1px;
  background-color: var(--clz-accent);
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  transition:
    transform var(--clz-transition),
    opacity var(--clz-transition);
}

.clz-nav a:hover,
.clz-nav a:focus-visible { color: var(--clz-text); }

.clz-nav a:hover::after,
.clz-nav a:focus-visible::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 0.55;
}

.clz-nav a:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
  border-radius: var(--clz-radius-xs);
}

.clz-nav .current-menu-item > a,
.clz-nav .current_page_item > a,
.clz-nav .current-menu-ancestor > a,
.clz-nav .current_page_parent > a { color: var(--clz-text); }

.clz-nav .current-menu-item > a::after,
.clz-nav .current_page_item > a::after,
.clz-nav .current-menu-ancestor > a::after,
.clz-nav .current_page_parent > a::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   7. ICON BUTTONS
   One family: 24-box stroke icons, 1.5 stroke, round caps. Colour-only hover —
   no filled squares, no permanent backgrounds.
   -------------------------------------------------------------------------- */
/* The class is doubled deliberately. The Elementor kit emits a global
   `.elementor-kit-11 button { padding: 16px 32px; ... }` reset whose
   specificity (0,1,1) outranks a single class, which collapses an icon button
   to its padding and squeezes the glyph to zero width. Doubling the class
   reaches (0,2,0) and reclaims the box without !important. It also covers the
   close buttons in the search overlay and drawer, which live outside the
   header. */
.clz-iconbtn.clz-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--clz-tap);
  height: var(--clz-tap);
  min-width: var(--clz-tap);
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: var(--clz-radius-sm);
  color: var(--clz-text-secondary);
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--clz-transition);
}

.clz-iconbtn svg {
  flex: 0 0 auto;                 /* never let the glyph shrink to nothing */
  width: var(--clz-icon);
  height: var(--clz-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clz-iconbtn:hover,
.clz-iconbtn:focus-visible { color: var(--clz-accent); }

.clz-iconbtn:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
}

/* --------------------------------------------------------------------------
   8. ELEMENTOR PRO MENU CART
   The widget supplies the side-cart behaviour and the live item count. Its
   eicon is masked out and replaced with the same bag glyph the hand-built
   buttons use, so the three header icons are one family.
   -------------------------------------------------------------------------- */
.clz-header__actions .elementor-widget-woocommerce-menu-cart,
.clz-header__actions .elementor-widget-woocommerce-menu-cart > .elementor-widget-container {
  display: flex;
  align-items: center;
}

.clz-header__actions .elementor-menu-cart__wrapper,
.clz-header__actions .elementor-menu-cart__toggle_wrapper {
  display: flex;
  align-items: center;
}

.clz-header__actions .elementor-menu-cart__toggle,
.clz-header__actions .elementor-menu-cart__toggle .elementor-button-wrapper {
  margin: 0;
  padding: 0;
}

/* Subtotal text is suppressed: an icon-only trigger keeps the cluster calm. */
.clz-header__actions .elementor-menu-cart__toggle .elementor-button-text {
  display: none !important;
}

.clz-header__actions .elementor-menu-cart__toggle .elementor-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--clz-tap);
  height: var(--clz-tap);
  min-width: 0;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: var(--clz-radius-sm) !important;
  color: var(--clz-text-secondary) !important;
  fill: var(--clz-text-secondary);
  box-shadow: none !important;
  transition: color var(--clz-transition);
}

.clz-header__actions .elementor-menu-cart__toggle .elementor-button:hover,
.clz-header__actions .elementor-menu-cart__toggle .elementor-button:focus-visible {
  color: var(--clz-accent) !important;
}

.clz-header__actions .elementor-menu-cart__toggle .elementor-button:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring) !important;
}

/* Swap Elementor's icon font glyph for the project bag icon via mask. */
.clz-header__actions .elementor-menu-cart__toggle .elementor-button-icon i,
.clz-header__actions .elementor-menu-cart__toggle .elementor-button-icon svg {
  display: none !important;
}

.clz-header__actions .elementor-menu-cart__toggle .elementor-button-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--clz-icon);
  height: var(--clz-icon);
  font-size: 0;
}

.clz-header__actions .elementor-menu-cart__toggle .elementor-button-icon::before {
  content: "";
  width: var(--clz-icon);
  height: var(--clz-icon);
  background-color: currentColor;
  -webkit-mask: var(--clz-icon-bag) center / contain no-repeat;
  mask: var(--clz-icon-bag) center / contain no-repeat;
}

/* Item-count badge: small, gold, quiet. Not a red alert dot.
   Elementor puts the live count on .elementor-button-icon-qty, which is a
   sibling of the glyph inside .elementor-button-icon. */
.clz-header__actions .elementor-menu-cart__toggle .elementor-button-icon-qty {
  position: absolute;
  top: -6px;
  inset-inline-end: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-family: var(--clz-font-body);
  font-size: 10px;
  font-weight: var(--clz-fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  color: var(--clz-on-accent);
  background-color: var(--clz-accent);
  border-radius: var(--clz-radius-full);
}

/* An empty cart shows no badge at all. */
.clz-header__actions .elementor-menu-cart__toggle .elementor-button-icon-qty[data-counter="0"],
.clz-header__actions .elementor-menu-cart__toggle .elementor-button-icon-qty:empty {
  display: none;
}

/* ---- Side-cart drawer ---- */
.elementor-menu-cart__container {
  background-color: var(--clz-overlay) !important;
  z-index: var(--clz-z-modal);
}

.elementor-menu-cart__main {
  width: var(--clz-cart-drawer-w) !important;
  max-width: 100%;
  padding: var(--clz-space-5) !important;
  background-color: var(--clz-elevated) !important;
  border-inline-start: 1px solid var(--clz-border) !important;
  box-shadow: var(--clz-shadow-lg);
  color: var(--clz-text);
}

.elementor-menu-cart__main,
.elementor-menu-cart__main * { font-family: var(--clz-font-body); }

.elementor-menu-cart__close-button {
  color: var(--clz-text-secondary) !important;
  transition: color var(--clz-transition);
}

.elementor-menu-cart__close-button:hover { color: var(--clz-accent) !important; }

.elementor-menu-cart__products .elementor-menu-cart__product {
  padding: var(--clz-space-4) 0 !important;
  border-bottom: 1px solid var(--clz-border) !important;
}

.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a {
  font-weight: var(--clz-fw-medium);
  color: var(--clz-text) !important;
  text-decoration: none;
}

.elementor-menu-cart__product-price,
.elementor-menu-cart__product .quantity,
.elementor-menu-cart__product .variation {
  color: var(--clz-text-secondary) !important;
}

.elementor-menu-cart__product-price .amount { color: var(--clz-text) !important; }

.elementor-menu-cart__product-remove,
.elementor-menu-cart__product-remove::before {
  color: var(--clz-text-muted) !important;
  border-color: var(--clz-border-strong) !important;
  transition: color var(--clz-transition);
}

.elementor-menu-cart__product-remove:hover,
.elementor-menu-cart__product-remove:hover::before {
  color: var(--clz-error) !important;
}

.elementor-menu-cart__product-image img {
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-sm);
}

.elementor-menu-cart__subtotal {
  padding: var(--clz-space-4) 0 !important;
  font-family: var(--clz-font-heading);
  font-weight: var(--clz-fw-semibold);
  color: var(--clz-text) !important;
  border-top: 1px solid var(--clz-border) !important;
}

.elementor-menu-cart__footer-buttons {
  display: grid;
  gap: var(--clz-space-3);
}

.elementor-menu-cart__footer-buttons .elementor-button {
  width: 100%;
  justify-content: center;
  font-family: var(--clz-font-body);
  font-size: var(--clz-text-sm);
  font-weight: var(--clz-fw-semibold);
  letter-spacing: var(--clz-ls-wide);
  text-transform: uppercase;
  border-radius: var(--clz-radius-sm) !important;
  transition:
    background-color var(--clz-transition),
    color var(--clz-transition),
    border-color var(--clz-transition);
}

/* Secondary: View Cart. */
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
  color: var(--clz-text) !important;
  background-color: transparent !important;
  border: 1px solid var(--clz-border-strong) !important;
}

.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
  border-color: var(--clz-accent) !important;
  color: var(--clz-accent) !important;
}

/* Primary: Checkout. */
.elementor-menu-cart__footer-buttons .elementor-button--checkout {
  color: var(--clz-on-accent) !important;
  background-color: var(--clz-accent) !important;
  border: 1px solid var(--clz-accent) !important;
}

.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
  background-color: var(--clz-accent-hover) !important;
  border-color: var(--clz-accent-hover) !important;
}

/* WooCommerce renders .woocommerce-mini-cart__empty-message; Elementor's own
   class only appears in some states. Both are covered. */
.elementor-menu-cart__empty-message,
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
  color: var(--clz-text-muted) !important;
  font-size: var(--clz-text-sm);
  text-align: center;
  padding: var(--clz-space-6) 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. SHARED BACKDROP
   One backdrop serves the search overlay and the mobile drawer.
   -------------------------------------------------------------------------- */
.clz-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--clz-z-overlay);
  background-color: var(--clz-overlay);
  opacity: 0;
  visibility: hidden;
  /* Visibility flips instantly on open and is deferred to the end of the fade
     on close, so the backdrop is never hit-testable while invisible and is
     never invisible while it should be catching clicks. */
  transition:
    opacity var(--clz-transition),
    visibility 0s linear var(--clz-duration);
}

body.clz-panel-open .clz-backdrop {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--clz-transition),
    visibility 0s;
}

/* Scroll lock. Applied with a compensating pad so removing the scrollbar does
   not shift the page horizontally. */
body.clz-panel-open {
  overflow: hidden;
  padding-inline-end: var(--clz-scrollbar, 0px);
}

/* --------------------------------------------------------------------------
   10. SEARCH OVERLAY
   -------------------------------------------------------------------------- */
.clz-search {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--clz-z-modal);
  padding: var(--clz-space-6) var(--clz-container-x) var(--clz-space-7);
  background-color: var(--clz-surface);
  border-bottom: 1px solid var(--clz-border);
  box-shadow: var(--clz-shadow-lg);
  transform: translateY(-100%);
  visibility: hidden;
  /* Visible immediately on open so the input is focusable in the same tick;
     hidden only after the slide-out finishes. */
  transition:
    transform var(--clz-duration) var(--clz-ease),
    visibility 0s linear var(--clz-duration);
}

.clz-search.is-open {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform var(--clz-duration) var(--clz-ease),
    visibility 0s;
}

.clz-search__inner {
  width: 100%;
  max-width: var(--clz-header-max);
  margin-inline: auto;
}

.clz-search__row {
  display: flex;
  align-items: center;
  gap: var(--clz-space-4);
}

.clz-search__form {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: var(--clz-space-3);
  padding-bottom: var(--clz-space-3);
  border-bottom: 1px solid var(--clz-border-strong);
  transition: border-color var(--clz-transition);
}

.clz-search__form:focus-within { border-bottom-color: var(--clz-accent); }

.clz-search__form > svg {
  flex: 0 0 auto;
  width: var(--clz-icon);
  height: var(--clz-icon);
  fill: none;
  stroke: var(--clz-text-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clz-search__input {
  flex: 1 1 auto;
  width: 100%;
  padding: 0;
  font-family: var(--clz-font-heading);
  font-size: var(--clz-text-h4);
  font-weight: var(--clz-fw-medium);
  letter-spacing: var(--clz-ls-tight);
  color: var(--clz-text);
  background: none;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.clz-search__input::placeholder { color: var(--clz-text-muted); }
.clz-search__input:focus { outline: none; box-shadow: none; }
.clz-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.clz-search__hint {
  margin: var(--clz-space-3) 0 0;
  font-family: var(--clz-font-body);
  font-size: var(--clz-text-xs);
  letter-spacing: var(--clz-ls-wide);
  color: var(--clz-text-muted);
}

/* --------------------------------------------------------------------------
   11. MOBILE DRAWER
   Rendered at wp_footer, outside the header DOM, so opening it can never push
   document flow down or be clipped by the header's stacking context.
   -------------------------------------------------------------------------- */
.clz-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--clz-z-modal);
  display: flex;
  flex-direction: column;
  width: var(--clz-drawer-w);
  max-width: 100%;
  background-color: var(--clz-elevated);
  border-inline-end: 1px solid var(--clz-border);
  box-shadow: var(--clz-shadow-lg);
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform var(--clz-duration) var(--clz-ease),
    visibility 0s linear var(--clz-duration);
}

.clz-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--clz-duration) var(--clz-ease),
    visibility 0s;
}

.clz-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clz-space-4);
  padding: var(--clz-space-4) var(--clz-space-5);
  border-bottom: 1px solid var(--clz-border);
}

.clz-drawer__brand { display: inline-flex; line-height: 0; }

.clz-drawer__brand img {
  display: block;
  width: var(--clz-logo-w-mobile);
  height: auto;
}

.clz-drawer__body {
  flex: 1 1 auto;
  padding: var(--clz-space-5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.clz-drawer__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.clz-drawer__menu li + li { border-top: 1px solid var(--clz-border); }

.clz-drawer__menu a {
  display: block;
  padding: var(--clz-space-4) 0;
  font-family: var(--clz-font-heading);
  font-size: var(--clz-text-h5);
  font-weight: var(--clz-fw-medium);
  letter-spacing: var(--clz-ls-tight);
  color: var(--clz-text-secondary);
  text-decoration: none;
  transition: color var(--clz-transition);
}

.clz-drawer__menu a:hover,
.clz-drawer__menu a:focus-visible { color: var(--clz-accent); }

.clz-drawer__menu a:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
  border-radius: var(--clz-radius-xs);
}

.clz-drawer__menu .current-menu-item > a,
.clz-drawer__menu .current_page_item > a { color: var(--clz-text); }

.clz-drawer__foot {
  padding: var(--clz-space-5);
  border-top: 1px solid var(--clz-border);
}

.clz-drawer__account {
  display: inline-flex;
  align-items: center;
  gap: var(--clz-space-3);
  font-family: var(--clz-font-body);
  font-size: var(--clz-text-sm);
  font-weight: var(--clz-fw-semibold);
  letter-spacing: var(--clz-ls-wide);
  text-transform: uppercase;
  color: var(--clz-text-secondary);
  text-decoration: none;
  transition: color var(--clz-transition);
}

.clz-drawer__account svg {
  width: var(--clz-icon);
  height: var(--clz-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clz-drawer__account:hover,
.clz-drawer__account:focus-visible { color: var(--clz-accent); }

.clz-drawer__account:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
  border-radius: var(--clz-radius-xs);
}

/* --------------------------------------------------------------------------
   12. TABLET  (768px - 1024px)
   Logo left, nav centred, actions right, menu trigger last. Account moves into
   the drawer so the right cluster stays at three controls.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .clz-header__inner {
    grid-template-columns: 1fr auto 1fr auto !important;
    min-height: var(--clz-header-h-tablet);
    --clz-header-x: var(--clz-space-5);
  }

  html.clz-stuck .clz-header__inner { min-height: var(--clz-header-h-stuck); }

  .clz-brand img,
  html.clz-stuck .clz-brand img { width: var(--clz-logo-w-tablet); }

  .clz-header__burger {
    display: flex !important;
    grid-column: 4;
    justify-content: flex-end !important;
  }

  /* Account lives in the drawer from here down. */
  .clz-header__actions .clz-account { display: none; }

  .clz-nav { --clz-nav-gap: 28px; }
}

/* --------------------------------------------------------------------------
   13. MOBILE  (below 768px)
   Hamburger left, logo optically centred, search + cart right. The 1fr/auto/1fr
   tracks centre the logo regardless of how wide the two clusters are.

   The bound is 767.98px, not 767px. A fractional viewport (a non-integer
   devicePixelRatio puts the CSS width at e.g. 767.4998) satisfies neither
   `max-width: 767px` nor `min-width: 768px`, so an integer bound leaves a
   sliver where the mobile layout never engages.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body { --clz-tap: var(--clz-tap-mobile); }

  .clz-header__inner {
    grid-template-columns: 1fr auto 1fr !important;
    min-height: var(--clz-header-h-mobile);
    --clz-header-x: var(--clz-space-4);
    gap: var(--clz-space-2) !important;
  }

  html.clz-stuck .clz-header__inner { min-height: var(--clz-header-h-mobile); }

  .clz-header__burger {
    display: flex !important;
    grid-column: 1;
    justify-content: flex-start !important;
  }

  .clz-header__brand {
    grid-column: 2;
    justify-content: center !important;
  }

  .clz-header__nav { display: none !important; }

  .clz-header__actions {
    grid-column: 3;
    gap: 0 !important;
  }

  .clz-brand img,
  html.clz-stuck .clz-brand img { width: var(--clz-logo-w-mobile); }

  .clz-search {
    padding: var(--clz-space-5) var(--clz-container-x) var(--clz-space-6);
  }

  .clz-search__input { font-size: var(--clz-text-lg); }

  .clz-search__row { gap: var(--clz-space-3); }
}

/* Very narrow phones: protect the logo before anything can collide. */
@media (max-width: 380.98px) {
  body { --clz-logo-w-mobile: 112px; }
  .clz-header__inner { --clz-header-x: var(--clz-space-3); }
}

/* --------------------------------------------------------------------------
   14. MOTION PREFERENCES
   Phase 2 already collapses the duration tokens. These are the transforms that
   do not read a duration token.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .clz-search,
  .clz-drawer,
  .clz-backdrop,
  .clz-brand img,
  .clz-header__inner,
  .elementor-location-header {
    transition-duration: 1ms !important;
  }
}