/*
 * Navbar — classic-left layout  v1.6.2
 *
 * Desktop (≥1024): [Logo · Wordmark]  [Shop Occasions Plants Gifts Journal]  [🔍 👤 🛒]
 * Tablet (640–1023): [Logo · Wordmark]                                [🔍 🛒 ☰]
 * Mobile (<640):   [Logo · Wordmark]                                          [☰]
 *
 * Drawer: custom .wpdl-drawer — zero WP __responsive-* class dependency.
 * Colors reference var(--wp--custom--semantic--*) generated from tokens.json.
 */

/* ── Component tokens + bar styles (merged to avoid duplicate-selector lint) ── */

.wpdl-site-header {
  /* Layout tokens — component-level px (intentionally excluded from global token system). */
  /* stylelint-disable unit-disallowed-list */
  --nav-h:               64px;
  --nav-h-sticky:        52px;
  --nav-h-tablet:        60px;
  --nav-h-mobile:        52px;
  --nav-max-w:         1280px;
  --nav-px:              40px;
  --nav-px-tablet:       32px;
  --nav-px-mobile:       20px;
  --nav-gap-links:       34px;
  --nav-gap-logomark:    11px;
  --nav-gap-actions:     16px;
  --nav-radius-dropdown:  8px;
  --nav-underline-w:    1.5px;
  --nav-underline-w-h:    2px;
  --nav-underline-off:    6px;
  --nav-search-w:       220px;
  --nav-search-h:        34px;
  --nav-search-icon-w: 2.25rem;
  --nav-drawer-w:       340px;
  --nav-logo-h:          36px;
  --nav-logo-h-sticky:   28px;
  --nav-blur:            12px;
  --nav-border-w:         1px;
  --nav-dropdown-w:     180px;
  --nav-dropdown-offset:  6px;
  --nav-drawer-header-h: 56px;
  --nav-focus-w:          2px;
  --nav-focus-off:        2px;
  --nav-focus-r:          2px;
  --nav-radius-search: 9999px;
  --nav-radius-badge:   999px;

  /* Composite: shadows + overlays as component vars (raw values defined once here) */
  --nav-shadow-sticky:   0 1px 24px 0 rgb(43 38 34 / 6%);
  --nav-shadow-dropdown: 0 12px 40px 0 rgb(43 38 34 / 10%);
  --nav-frosted-bg:      rgb(250 247 240 / 92%);
  --nav-scrim-open:      rgb(43 38 34 / 45%);
  --nav-scrim-closed:    rgb(43 38 34 / 0%);
  --nav-submenu-bg:      rgb(43 38 34 / 2.5%);
  --nav-submenu-hover:   rgb(43 38 34 / 3%);
  /* stylelint-enable unit-disallowed-list */

  /* Color tokens — reference semantic layer generated from tokens.json */
  --nav-bg:       var(--wp--custom--semantic--color--background--canvas);
  --nav-surface:  var(--wp--custom--semantic--color--surface--primary);
  --nav-text:     var(--wp--custom--semantic--color--text--primary);
  --nav-muted:    var(--wp--custom--semantic--color--text--muted);
  --nav-border:   var(--wp--custom--semantic--color--border--base);
  --nav-accent:   var(--wp--custom--semantic--color--brand--primary);
  --nav-accent-h: var(--wp--custom--semantic--color--brand--strong);
  --nav-font:     var(--wp--custom--font--family--body);
  --nav-white:    var(--wp--custom--semantic--color--surface--primary);
  --nav-icon:     1.375rem;

  /* Type scale — consume the token typography scale (fluid clamp, niche-safe).
     Sizes/weights come from tokens; navbar-specific tracking + uppercase stay here. */
  --nav-fs-wordmark: var(--wp--custom--font--size--xl);
  --nav-fs-link:     var(--wp--custom--font--size--xs);
  --nav-fs-input:    var(--wp--custom--font--size--base);
  --nav-fw-regular:  var(--wp--custom--font--weight--regular);
  --nav-fw-medium:   var(--wp--custom--font--weight--medium);
  --nav-fw-semibold: var(--wp--custom--font--weight--semibold);

  /* Motion */
  --nav-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-t-fast: 160ms;
  --nav-t-base: 240ms;
  --nav-t-slow: 300ms;

  /* Bar styles */
  position: sticky;
  inset-block-start: 0;
  z-index: var(--wp--custom--z--sticky);
  background-color: var(--nav-bg);
  /* stylelint-disable-next-line unit-disallowed-list */
  box-shadow: inset 0 2px 0 0 var(--wp--custom--semantic--color--accent--primary);
  transition:
    box-shadow var(--nav-t-base) var(--nav-easing),
    background-color var(--nav-t-base) var(--nav-easing);
}

/* Gradient hairline divider — fades at edges (editorial); disappears when
   sticky shadow takes over on scroll. */
.wpdl-site-header::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  /* stylelint-disable-next-line unit-disallowed-list */
  block-size: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--nav-border) 8%,
    var(--nav-border) 92%,
    transparent 100%
  );
  opacity: 0.65;
  pointer-events: none;
  transition: opacity var(--nav-t-base) var(--nav-easing);
}

.wpdl-site-header.is-scrolled::after {
  opacity: 0;
}

/*
 * backdrop-filter on ::before, NOT on the element itself.
 * Applying it directly creates a new containing block for position:fixed
 * descendants (the drawer), trapping it inside the header.
 */
.wpdl-site-header.is-scrolled {
  background-color: transparent;
  /* stylelint-disable unit-disallowed-list */
  box-shadow:
    var(--nav-shadow-sticky),
    inset 0 2px 0 0 var(--wp--custom--semantic--color--accent--primary);
  /* stylelint-enable unit-disallowed-list */
}

.wpdl-site-header.is-scrolled::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--nav-frosted-bg);
  backdrop-filter: blur(var(--nav-blur));
  z-index: -1;
  pointer-events: none;
}

/* ── Inner container ──────────────────────────────────────────────────── */

.wpdl-nav-inner {
  max-inline-size: var(--nav-max-w);
  margin-inline: auto;
  padding-inline: var(--nav-px);
  block-size: var(--nav-h);
  transition: block-size var(--nav-t-base) var(--nav-easing);
}

.wpdl-site-header.is-scrolled .wpdl-nav-inner {
  block-size: var(--nav-h-sticky);
}

/* ── Left: logo ───────────────────────────────────────────────────────── */

.wpdl-logo-group {
  flex-shrink: 0;
  gap: var(--nav-gap-logomark) !important;
}

.wpdl-site-header .wpdl-site-logo img {
  block-size: auto;
  max-block-size: var(--nav-logo-h);
  inline-size: auto;
  transition: max-block-size var(--nav-t-base) var(--nav-easing);
}

.wpdl-site-header.is-scrolled .wpdl-site-logo img {
  max-block-size: var(--nav-logo-h-sticky);
}

.wpdl-site-header .wpdl-site-title a,
.wpdl-site-header .wp-block-site-title a {
  font-family: var(--wp--custom--font--family--display, "Cormorant Garamond", serif);
  font-size: var(--nav-fs-wordmark);
  font-weight: var(--nav-fw-semibold);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--nav-text);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--nav-t-fast) var(--nav-easing);
}

.wpdl-site-header .wpdl-site-title a:hover,
.wpdl-site-header .wp-block-site-title a:hover { opacity: 0.7; }

/* ── Center: desktop navigation (overlayMenu:never — clean <ul> only) ── */

nav.wpdl-nav-center {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Thin vertical separator — defines left zone boundary between logo and nav links */
nav.wpdl-nav-center::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  /* stylelint-disable-next-line unit-disallowed-list */
  inline-size: 1px;
  block-size: 1.25rem;
  background-color: var(--nav-border);
  opacity: 0.6;
  pointer-events: none;
}

nav.wpdl-nav-center .wp-block-navigation__container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nav-gap-links);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav link styles — Public API classes, safe to target */
nav.wp-block-navigation.is-style-wpdl-nav .wp-block-navigation-item__content {
  position: relative;
  font-family: var(--nav-font);
  font-size: var(--nav-fs-link);
  font-weight: var(--nav-fw-regular);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-text);
  text-decoration: none;
  padding-block: 0.5rem;
  transition: color var(--nav-t-fast) var(--nav-easing);
}

/* Grow-from-centre underline — top-level links only (submenu links sit deeper) */
nav.wpdl-nav-center > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--nav-underline-off);
  block-size: var(--nav-underline-w-h);
  background-color: var(--nav-accent-h);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--nav-t-base) var(--nav-easing);
}

nav.wp-block-navigation.is-style-wpdl-nav .wp-block-navigation-item__content:hover {
  color: var(--nav-accent-h);
}

nav.wpdl-nav-center > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
nav.wpdl-nav-center > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

/* Submenu caret — clearer "SHOP ▼" dropdown affordance */
nav.wpdl-nav-center .wp-block-navigation__submenu-icon {
  padding-inline: 0.25rem 0;
  color: var(--nav-muted);
  transition:
    color var(--nav-t-fast) var(--nav-easing),
    transform var(--nav-t-fast) var(--nav-easing);
}

.wp-block-navigation__submenu-icon svg {
  fill: currentcolor;
}

nav.wpdl-nav-center .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
nav.wpdl-nav-center .wp-block-navigation__submenu-icon[aria-expanded="true"] {
  color: var(--nav-accent);
  transform: rotate(180deg);
}

/* Current page indicator — permanent thin underline (muted), distinct from hover accent */
nav.wpdl-nav-center > .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item
  > .wp-block-navigation-item__content {
  font-weight: var(--nav-fw-medium);
}

nav.wpdl-nav-center > .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item
  > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
  block-size: var(--nav-underline-w); /* 1.5px — thinner "you are here" vs 2px hover */
  background-color: var(--nav-muted);
  transition: none; /* no load-time animation for the active indicator */
}

/* Desktop dropdown panel */
/* stylelint-disable no-descending-specificity */
nav.wpdl-nav-center .wp-block-navigation__submenu-container {
  position: absolute;
  background-color: var(--nav-surface);
  border: var(--nav-border-w) solid var(--nav-border);
  border-radius: var(--nav-radius-dropdown);
  box-shadow: var(--nav-shadow-dropdown);
  padding-block: 0.75rem;
  min-inline-size: var(--nav-dropdown-w);
  z-index: var(--wp--custom--z--dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--nav-dropdown-offset));
  transition:
    opacity var(--nav-t-base) var(--nav-easing),
    transform var(--nav-t-base) var(--nav-easing),
    visibility 0s var(--nav-t-base);
}

nav.wpdl-nav-center .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
nav.wpdl-nav-center .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--nav-t-base) var(--nav-easing),
    transform var(--nav-t-base) var(--nav-easing),
    visibility 0s 0s;
}

nav.wpdl-nav-center .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: var(--nav-fs-link);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--nav-text);
  white-space: nowrap;
  text-decoration: none;
}

nav.wpdl-nav-center .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--nav-accent);
  background-color: var(--nav-submenu-hover);
}
/* stylelint-enable no-descending-specificity */

/* ── Right: utility icons ─────────────────────────────────────────────── */

.wpdl-nav-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--nav-gap-actions) !important; /* !important beats WP :root :where(.is-layout-flex) gap (equal specificity, WP prints later) */
}

/* Search — icon only; expands to a field on click (.is-open added by JS) */
.wpdl-search.wp-block-search {
  display: flex;
  align-items: center;
}

.wpdl-search .wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
  inline-size: var(--nav-search-icon-w);
  block-size: var(--nav-search-h);
  border: var(--nav-border-w) solid transparent;
  border-radius: var(--nav-radius-search);
  background-color: transparent;
  overflow: hidden;
  transition:
    inline-size var(--nav-t-base) var(--nav-easing),
    border-color var(--nav-t-fast) var(--nav-easing),
    background-color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-search.is-open .wp-block-search__inside-wrapper {
  inline-size: var(--nav-search-w);
  border-color: var(--nav-border);
  background-color: var(--nav-bg);
}

.wpdl-search.is-open .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--nav-accent);
}

.wpdl-search .wp-block-search__input {
  inline-size: 0;
  min-inline-size: 0 !important;
  padding-block: 0;
  padding-inline: 0;
  border: none;
  background: transparent;
  font-family: var(--nav-font);
  font-size: var(--nav-fs-link);
  letter-spacing: 0.03em;
  color: var(--nav-text);
  outline: none;
  opacity: 0;
  pointer-events: none;
  transition:
    inline-size var(--nav-t-base) var(--nav-easing),
    opacity var(--nav-t-fast) var(--nav-easing);
}

.wpdl-search.is-open .wp-block-search__input {
  inline-size: 100%;
  padding-inline: 0.75rem 0.25rem;
  opacity: 1;
  pointer-events: auto;
}

.wpdl-search .wp-block-search__input::placeholder { color: var(--nav-muted); }

/* Reset WP's .wp-element-button defaults so the search icon renders cleanly */
.wpdl-search .wp-block-search__button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem !important;
  min-block-size: 2.75rem !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  padding: 0.5rem !important;
  margin-inline-start: 0 !important;
  color: var(--nav-text) !important;
  cursor: pointer;
  flex-shrink: 0;
  order: 2;
  transition:
    color var(--nav-t-fast) var(--nav-easing),
    background-color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-search .wp-block-search__button:hover {
  color: var(--nav-accent) !important;
  background-color: var(--nav-submenu-bg) !important;
}

/* Replace WP's fill-based magnifying glass with the Lucide stroke icon (matches account/drawer) */
.wpdl-search .wp-block-search__button svg { display: none; }

.wpdl-search .wp-block-search__button::before {
  content: '';
  display: block;
  inline-size: var(--nav-icon);
  block-size: var(--nav-icon);
  background-color: currentcolor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='17' y1='17' x2='22' y2='22'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  transition: transform var(--nav-t-fast) var(--nav-easing);
}

.wpdl-search .wp-block-search__button:hover::before {
  transform: scale(1.12);
}

/* Account — WooCommerce Customer Account block (icon_only + line icon).
   We only re-skin it to match the nav icon set; the block owns the markup + link. */
.wpdl-account {
  display: flex;
  align-items: center;
}

.wpdl-account .wc-block-customer-account__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0.5rem;
  border-radius: 50%;
  color: var(--nav-text);
  text-decoration: none;
  transition:
    color var(--nav-t-fast) var(--nav-easing),
    background-color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-account .wc-block-customer-account__link:hover {
  color: var(--nav-accent);
  background-color: var(--nav-submenu-bg);
}

.wpdl-account .wc-block-customer-account__link .icon {
  display: block;
  inline-size: var(--nav-icon);
  block-size: var(--nav-icon);
  transition: transform var(--nav-t-fast) var(--nav-easing);
}

.wpdl-account .wc-block-customer-account__link:hover .icon {
  transform: scale(1.12);
}

/* Cart — plain link fallback (no WooCommerce) */
a.wpdl-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0.5rem;
  border-radius: 50%;
  color: var(--nav-text);
  text-decoration: none;
  transition:
    color var(--nav-t-fast) var(--nav-easing),
    background-color var(--nav-t-fast) var(--nav-easing);
}

a.wpdl-cart-btn:hover {
  color: var(--nav-accent);
  background-color: var(--nav-submenu-bg);
}

/* Count badge — sits on the top-right of the cart glyph (Header 1c) */
@keyframes wpdl-badge-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.wpdl-cart-count {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1rem;
  block-size: 1rem;
  padding-inline: 0.25rem;
  border-radius: 999px;
  background-color: var(--nav-accent);
  color: var(--nav-bg);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  animation: wpdl-badge-pop var(--nav-t-base) var(--nav-easing) both;
}

a.wpdl-cart-btn::before {
  content: '';
  display: block;
  inline-size: var(--nav-icon);
  block-size: var(--nav-icon);
  background-color: currentcolor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  transition: transform var(--nav-t-fast) var(--nav-easing);
}

a.wpdl-cart-btn:hover::before {
  transform: scale(1.12);
}

/* WooCommerce Mini-Cart — style to match nav icon */
.wpdl-nav-right .wp-block-woocommerce-mini-cart {
  display: flex;
  align-items: center;
}

.wpdl-nav-right .wc-block-mini-cart__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 50%;
  background: none !important;
  border: none !important;
  color: var(--nav-text);
  cursor: pointer;
  transition:
    color var(--nav-t-fast) var(--nav-easing),
    background-color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-nav-right .wc-block-mini-cart__button:hover {
  color: var(--nav-accent);
  background-color: var(--nav-submenu-bg);
}

.wpdl-nav-right .wc-block-mini-cart__icon,
.wpdl-nav-right .wc-block-mini-cart__button > svg {
  inline-size: var(--nav-icon);
  block-size: var(--nav-icon);
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.5;
  transition: transform var(--nav-t-fast) var(--nav-easing);
}

.wpdl-nav-right .wc-block-mini-cart__button:hover .wc-block-mini-cart__icon,
.wpdl-nav-right .wc-block-mini-cart__button:hover > svg {
  transform: scale(1.12);
}

.wpdl-nav-right .wc-block-mini-cart__quantity-badge {
  position: absolute;
  inset-block-start: 0.125rem;
  inset-inline-end: 0.125rem;
}

.wpdl-nav-right .wc-block-mini-cart__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1rem;
  min-block-size: 1rem;
  padding-inline: 0.25rem;
  border-radius: var(--nav-radius-badge);
  font-family: var(--nav-font);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  background-color: var(--nav-accent);
  color: var(--nav-white);
}

/* Hamburger — hidden on desktop, shown on tablet/mobile */
.wpdl-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  border-radius: 50%;
  background: none;
  border: none;
  padding: 0.5rem;
  color: var(--nav-text);
  cursor: pointer;
  transition:
    color var(--nav-t-fast) var(--nav-easing),
    background-color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-hamburger:hover {
  color: var(--nav-accent);
  background-color: var(--nav-submenu-bg);
}

/* ── Tablet (640–1023px) ──────────────────────────────────────────────── */

@media (width < 64em) {
  .wpdl-nav-inner {
    padding-inline: var(--nav-px-tablet);
    block-size: var(--nav-h-tablet);
  }

  .wpdl-site-header.is-scrolled .wpdl-nav-inner { block-size: var(--nav-h-sticky); }

  /* Hide desktop nav, show hamburger. !important: beats base nav display + WP nav layout rules. */
  nav.wpdl-nav-center { display: none !important; }
  .wpdl-hamburger { display: flex; }
  .wpdl-account { display: none; }
}

/* ── Mobile (<640px) ──────────────────────────────────────────────────── */

@media (width < 40em) {
  .wpdl-nav-inner {
    padding-inline: var(--nav-px-mobile);
    block-size: var(--nav-h-mobile);
  }

  .wpdl-site-header.is-scrolled .wpdl-nav-inner { block-size: var(--nav-h-mobile); }

  /* Mobile header = ☰ · LOGO · 🛒.
     Dissolve nav-right (display:contents) so its children become direct flex
     items of nav-inner, then reorder: hamburger left, cart right, logo centred
     by space-between. !important beats WP's generated .wp-container flex display. */
  .wpdl-nav-right { display: contents !important; }
  .wpdl-hamburger { order: -1; }

  a.wpdl-cart-btn {
    order: 1;
    min-inline-size: 2.75rem;
  }

  /* Search lives in the drawer on mobile (opens the fullscreen overlay); account hidden.
     !important: base .wpdl-search.wp-block-search (0,2,0) outranks a plain class. */
  .wpdl-search,
  .wpdl-account,
  .wpdl-nav-right .wp-block-woocommerce-mini-cart { display: none !important; }
}

/* ── Custom Drawer — all wpdl-* classes, no WP internals ─────────────── */

.wpdl-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--wp--custom--z--drawer);
  visibility: hidden;
  pointer-events: none;
}

.wpdl-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Scrim — full-screen dimmed background */
.wpdl-drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--nav-scrim-closed);
  transition: background var(--nav-t-slow) var(--nav-easing);
  cursor: pointer;
}

.wpdl-drawer.is-open .wpdl-drawer__scrim {
  background: var(--nav-scrim-open);
}

/* Panel — right-side white sheet */
.wpdl-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 85%;
  max-inline-size: var(--nav-drawer-w);
  background: var(--nav-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform var(--nav-t-slow) var(--nav-easing);
}

.wpdl-drawer.is-open .wpdl-drawer__panel {
  transform: translateX(0);
}

/* Panel header — utility icons + close button */
.wpdl-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--nav-px-mobile);
  block-size: var(--nav-drawer-header-h);
  flex-shrink: 0;
  border-block-end: var(--nav-border-w) solid var(--nav-border);
}

.wpdl-drawer__utils {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.wpdl-drawer__search-btn,
.wpdl-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  background: none;
  border: none;
  padding: 0.625rem;
  color: var(--nav-text);
  cursor: pointer;
  transition: color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-drawer__search-btn:hover,
.wpdl-drawer__close:hover { color: var(--nav-accent); }

.wpdl-drawer__cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  color: var(--nav-text);
  text-decoration: none;
  transition: color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-drawer__cart-btn:hover { color: var(--nav-accent); }

/* Nav list */
/* stylelint-disable no-descending-specificity */
.wpdl-drawer__nav {
  flex: 1;
  overflow-y: auto;
}

.wpdl-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wpdl-drawer__item {
  border-block-end: var(--nav-border-w) solid var(--nav-border);
}

.wpdl-drawer__item > a,
.wpdl-drawer__submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  padding: 1rem var(--nav-px-mobile);
  font-family: var(--nav-font);
  font-size: var(--nav-fs-link);
  font-weight: var(--nav-fw-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nav-text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  transition: color var(--nav-t-fast) var(--nav-easing);
  box-sizing: border-box;
}

.wpdl-drawer__item > a:hover,
.wpdl-drawer__submenu-toggle:hover { color: var(--nav-accent); }

/* Chevron rotates when submenu is open */
.wpdl-drawer__chevron {
  flex-shrink: 0;
  transition: transform var(--nav-t-fast) var(--nav-easing);
}

.wpdl-drawer__submenu-toggle[aria-expanded="true"] .wpdl-drawer__chevron {
  transform: rotate(180deg);
}

/* Submenu — accordion, hidden by default */
.wpdl-drawer__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--nav-submenu-bg);
}

.wpdl-drawer__submenu li { border-block-end: var(--nav-border-w) solid var(--nav-border); }
.wpdl-drawer__submenu li:last-child { border-block-end: none; }

.wpdl-drawer__submenu a {
  display: block;
  padding: 0.75rem var(--nav-px-mobile) 0.75rem calc(var(--nav-px-mobile) + 1rem);
  font-family: var(--nav-font);
  font-size: 0.75rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--nav-muted);
  text-decoration: none;
  transition: color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-drawer__submenu a:hover { color: var(--nav-accent); }

/* stylelint-enable no-descending-specificity */

/* ── Fullscreen search overlay (opened from the drawer search button) ──── */
/* stylelint-disable no-descending-specificity */

.wpdl-search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--wp--custom--z--overlay);
  visibility: hidden;
  pointer-events: none;
}

.wpdl-search-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
}

.wpdl-search-overlay__scrim {
  position: absolute;
  inset: 0;
  background: var(--nav-scrim-closed);
  transition: background var(--nav-t-slow) var(--nav-easing);
  cursor: pointer;
}

.wpdl-search-overlay.is-open .wpdl-search-overlay__scrim { background: var(--nav-scrim-open); }

/* Panel — top sheet that slides down */
.wpdl-search-overlay__panel {
  position: relative;
  background: var(--nav-surface);
  padding: var(--nav-px-mobile);
  transform: translateY(-100%);
  transition: transform var(--nav-t-slow) var(--nav-easing);
}

.wpdl-search-overlay.is-open .wpdl-search-overlay__panel { transform: translateY(0); }

.wpdl-search-overlay__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-inline-size: var(--nav-max-w);
  margin-inline: auto;
  padding-block-end: 0.75rem;
  border-block-end: var(--nav-border-w) solid var(--nav-border);
}

.wpdl-search-overlay__icon {
  display: flex;
  align-items: center;
  color: var(--nav-muted);
}

.wpdl-search-overlay__input {
  flex: 1;
  min-inline-size: 0;
  padding: 0.375rem 0.25rem;
  border: none;
  background: none;
  font-family: var(--nav-font);
  font-size: var(--nav-fs-input);
  color: var(--nav-text);
}

.wpdl-search-overlay__input::placeholder { color: var(--nav-muted); }
.wpdl-search-overlay__input:focus { outline: none; }

.wpdl-search-overlay__close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--nav-text);
  cursor: pointer;
  transition: color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-search-overlay__close:hover { color: var(--nav-accent); }

.wpdl-search-overlay__popular {
  max-inline-size: var(--nav-max-w);
  margin-block-start: 1.25rem;
  margin-inline: auto;
}

.wpdl-search-overlay__heading {
  margin: 0 0 0.25rem;
  font-family: var(--nav-font);
  font-size: var(--nav-fs-link);
  font-weight: var(--nav-fw-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--nav-muted);
}

.wpdl-search-overlay__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Popular searches as chips — a horizontal row that wraps on narrow screens
   (was a stacked block list that looked cramped when the overlay opened on
   desktop for the concept-1d header search). */
.wpdl-search-overlay__list a {
  display: inline-block;
  padding-block: 0.375rem;
  padding-inline: 0.875rem;
  border: var(--nav-border-w) solid var(--nav-border);
  border-radius: var(--nav-radius-search);
  font-family: var(--nav-font);
  font-size: var(--nav-fs-link);
  color: var(--nav-text);
  text-decoration: none;
  transition:
    color var(--nav-t-fast) var(--nav-easing),
    border-color var(--nav-t-fast) var(--nav-easing),
    background-color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-search-overlay__list a:hover {
  color: var(--nav-white);
  background-color: var(--nav-accent);
  border-color: var(--nav-accent);
}

/* Desktop: give the top sheet more presence (breathing room + bigger field). */
@media (width >= 64em) {
  .wpdl-search-overlay__panel {
    padding-block: 2.25rem;
    padding-inline: var(--nav-px);
  }

  .wpdl-search-overlay__input {
    padding-block: 0.625rem;
    font-size: var(--wp--custom--font--size--lg);
  }
}

/* stylelint-enable no-descending-specificity */

/* ── Focus states ─────────────────────────────────────────────────────── */
/* stylelint-disable no-descending-specificity */

nav.wp-block-navigation.is-style-wpdl-nav .wp-block-navigation-item__content:focus-visible,
.wpdl-search .wp-block-search__button:focus-visible,
.wpdl-nav-right .wc-block-mini-cart__button:focus-visible,
.wpdl-account .wc-block-customer-account__link:focus-visible,
a.wpdl-cart-btn:focus-visible,
.wpdl-hamburger:focus-visible,
.wpdl-drawer__search-btn:focus-visible,
.wpdl-drawer__cart-btn:focus-visible,
.wpdl-drawer__close:focus-visible,
.wpdl-drawer__submenu-toggle:focus-visible,
.wpdl-drawer__item > a:focus-visible,
.wpdl-drawer__submenu a:focus-visible,
.wpdl-search-overlay__close:focus-visible,
.wpdl-search-overlay__list a:focus-visible {
  outline: var(--nav-focus-w) solid var(--nav-accent);
  outline-offset: var(--nav-focus-off);
  border-radius: var(--nav-focus-r);
}

/* stylelint-enable no-descending-specificity */

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wpdl-site-header,
  .wpdl-site-header::before,
  .wpdl-nav-inner,
  .wpdl-site-logo img,
  .wpdl-search .wp-block-search__inside-wrapper,
  .wpdl-search .wp-block-search__input,
  nav.wpdl-nav-center .wp-block-navigation__submenu-container,
  nav.wpdl-nav-center .wp-block-navigation__submenu-icon,
  nav.wp-block-navigation.is-style-wpdl-nav .wp-block-navigation-item__content,
  .wpdl-drawer__scrim,
  .wpdl-drawer__panel,
  .wpdl-drawer__chevron,
  .wpdl-search-overlay__scrim,
  .wpdl-search-overlay__panel { transition: none; }

  .wpdl-header-b__grid,
  .wpdl-header-b__logo,
  .wpdl-header-b__link,
  .wpdl-header-b__link::after,
  .wpdl-header-b__chevron,
  .wpdl-header-b__submenu { transition: none; }

  .wpdl-cart-count { animation: none; }

  .wpdl-search .wp-block-search__button::before,
  a.wpdl-cart-btn::before,
  .wpdl-account .wc-block-customer-account__link .icon,
  .wpdl-nav-right .wc-block-mini-cart__icon,
  .wpdl-nav-right .wc-block-mini-cart__button > svg { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER CONCEPT 1D — SPLIT NAVIGATION  (.wpdl-header-b)
   Centred logo · left N items · right remainder · utilities. Shares the
   .wpdl-site-header token block + sticky/backdrop base with concept 1c; only
   the split grid layout and the 1d heights differ. Mobile chrome (hamburger +
   drawer + search overlay) comes from the paired wpdl/mobile-drawer block (T3).
   ═══════════════════════════════════════════════════════════════════════════ */
/* stylelint-disable no-descending-specificity */

.wpdl-site-header.wpdl-header-b {
  /* 1d-specific layout px — component-level, excluded from the global token system. */
  /* stylelint-disable unit-disallowed-list */
  --nav-h:            108px; /* concept 1d desktop */
  --nav-h-sticky:      72px;
  --nav-b-gap-item:    32px; /* between nav items */
  --nav-b-gap-logo:    44px; /* nav group ↔ logo */
  --nav-b-gap-utils:   18px; /* between utility icons */
  /* stylelint-enable unit-disallowed-list */
}

/* ── Grid: [left nav] [logo] [right nav + utils] — 1fr·auto·1fr keeps the
      logo dead-centre no matter how many items sit on either side ─────────── */
.wpdl-header-b__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--nav-b-gap-logo);
  max-inline-size: var(--nav-max-w);
  margin-inline: auto;
  padding-inline: var(--nav-px);
  block-size: var(--nav-h);
  transition: block-size var(--nav-t-base) var(--nav-easing);
}

.wpdl-site-header.wpdl-header-b.is-scrolled .wpdl-header-b__grid {
  block-size: var(--nav-h-sticky);
}

/* ── Nav groups ─────────────────────────────────────────────────────────── */
.wpdl-header-b__nav {
  min-inline-size: 0;
}

.wpdl-header-b__nav--left {
  justify-self: end; /* hug the logo */
}

.wpdl-header-b__end {
  justify-self: end; /* col 3: right nav, then utils pushed to the far edge */
  display: flex;
  align-items: center;
  gap: var(--nav-b-gap-logo);
  min-inline-size: 0;
}

.wpdl-header-b__list {
  display: flex;
  align-items: center;
  gap: var(--nav-b-gap-item);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wpdl-header-b__item {
  position: relative;
}

/* ── Nav links — same editorial treatment as concept 1c (uppercase, tracked,
      grow-from-centre underline) but scoped to the custom-block classes ────── */
.wpdl-header-b__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--nav-font);
  font-size: var(--nav-fs-link);
  font-weight: var(--nav-fw-regular);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-text);
  text-decoration: none;
  padding-block: 0.5rem;
  white-space: nowrap;
  transition: color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-header-b__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--nav-underline-off);
  block-size: var(--nav-underline-w-h);
  background-color: var(--nav-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--nav-t-base) var(--nav-easing);
}

.wpdl-header-b__item:hover > .wpdl-header-b__link,
.wpdl-header-b__link:focus-visible {
  color: var(--nav-accent-h);
}

.wpdl-header-b__item:hover > .wpdl-header-b__link::after,
.wpdl-header-b__link:focus-visible::after {
  transform: scaleX(1);
}

.wpdl-header-b__chevron {
  transition: transform var(--nav-t-base) var(--nav-easing);
}

.wpdl-header-b__item.has-submenu:hover > .wpdl-header-b__link .wpdl-header-b__chevron,
.wpdl-header-b__item.has-submenu:focus-within > .wpdl-header-b__link .wpdl-header-b__chevron {
  transform: rotate(180deg);
}

/* ── Logo (centre track) ────────────────────────────────────────────────── */
.wpdl-header-b__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: center;
  color: var(--nav-text);
  text-decoration: none;
  transition: opacity var(--nav-t-fast) var(--nav-easing);
}

.wpdl-header-b__logo:hover {
  opacity: 0.7;
}

.wpdl-header-b__mark {
  flex-shrink: 0;
  color: var(--nav-accent);
}

.wpdl-header-b__wordmark {
  font-family: var(--wp--custom--font--family--display, "Cormorant Garamond", serif);
  font-size: var(--nav-fs-wordmark);
  font-weight: var(--nav-fw-medium);
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

/* ── Utilities (search button + cart) ───────────────────────────────────── */
.wpdl-header-b__utils {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--nav-b-gap-utils);
}

.wpdl-header-b__search-btn,
.wpdl-header-b__cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  color: var(--nav-text);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-header-b__search-btn:hover,
.wpdl-header-b__cart-btn:hover {
  color: var(--nav-accent);
}

/* cart count badge: reuses the shared .wpdl-cart-count rules (concept 1c). */

/* ── Dropdown submenus (Shop, Occasions) ────────────────────────────────── */
.wpdl-header-b__submenu {
  position: absolute;
  inset-block-start: calc(100% + var(--nav-dropdown-offset));
  inset-inline-start: 0;
  min-inline-size: var(--nav-dropdown-w);
  margin: 0;
  padding-block: 0.5rem;
  padding-inline: 0;
  list-style: none;
  background-color: var(--nav-surface);
  border: var(--nav-border-w) solid var(--nav-border);
  border-radius: var(--nav-radius-dropdown);
  box-shadow: var(--nav-shadow-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--nav-dropdown-offset));
  transition:
    opacity var(--nav-t-base) var(--nav-easing),
    transform var(--nav-t-base) var(--nav-easing),
    visibility var(--nav-t-base);
  z-index: var(--wp--custom--z--dropdown);
}

.wpdl-header-b__item.has-submenu:hover > .wpdl-header-b__submenu,
.wpdl-header-b__item.has-submenu:focus-within > .wpdl-header-b__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wpdl-header-b__submenu a {
  display: block;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  font-family: var(--nav-font);
  font-size: var(--nav-fs-link);
  letter-spacing: 0.04em;
  color: var(--nav-text);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--nav-t-fast) var(--nav-easing),
    color var(--nav-t-fast) var(--nav-easing);
}

.wpdl-header-b__submenu a:hover,
.wpdl-header-b__submenu a:focus-visible {
  background-color: var(--nav-submenu-hover);
  color: var(--nav-accent-h);
}

/* ── Responsive: collapse to ☰ · LOGO · 🛒 (giống cũ — reuse mobile-drawer).
      The split desktop nav is hidden; the paired wpdl/mobile-drawer supplies the
      hamburger, slide-in drawer and fullscreen search. Search moves into the
      drawer below the desktop breakpoint (no header search icon), matching 1c. */

@media (width < 64em) {
  .wpdl-site-header.wpdl-header-b {
    --nav-h: var(--nav-h-tablet);
  }

  /* Header becomes a flex row; grid/end/utils dissolve (display:contents) so the
     logo, cart and the sibling hamburger become orderable flex children. */
  .wpdl-header-b.wp-block-group {
    display: flex;
    align-items: center;
    padding-inline: var(--nav-px-tablet);
    min-block-size: var(--nav-h);
  }

  .wpdl-header-b__grid,
  .wpdl-header-b__end,
  .wpdl-header-b__utils {
    display: contents;
  }

  .wpdl-header-b__nav,
  .wpdl-header-b__search-btn {
    display: none;
  }

  .wpdl-header-b .wpdl-hamburger {
    order: -1; /* ☰ far left */
  }

  .wpdl-header-b__logo {
    order: 0;
    margin-inline: auto; /* centre between ☰ and 🛒 */
  }

  .wpdl-header-b__cart-btn {
    order: 1; /* 🛒 far right */
  }
}

@media (width < 40em) {
  .wpdl-site-header.wpdl-header-b {
    --nav-h: var(--nav-h-mobile);
  }

  .wpdl-header-b.wp-block-group {
    padding-inline: var(--nav-px-mobile);
  }
}

/* stylelint-enable no-descending-specificity */