* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: clamp(22px, 3vw, 30px);
  --text-xl: clamp(30px, 4.4vw, 44px);
  --tracking-tight: -0.02em;
  --tracking-normal: -0.01em;
  --text-primary: #0f172a;
  --text-secondary: #5f6b7a;
  --surface-bg: #f7f5f2;

  /* ── Motion tokens ──────────────────────────────────────────────
     Four Apple-family easing curves + three durations. Use these
     everywhere instead of ad-hoc cubic-bezier()/ease/seconds so the
     whole storefront shares one motion language.
       --ease-snap      signature iOS entrance (hard decelerate)
       --ease-smooth    standard UI state changes (Material standard)
       --ease-entrance  fade / slide-in reveals
       --ease-spring    subtle overshoot (press, toggles, active)
     Durations: only --dur-fast / --dur-base / --dur-slow. Slower
     reveals (e.g. scroll-reveal) may pass an explicit ms value.   */
  --ease-snap: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.4s;
}

html[lang="ar"],
html[lang="ar-AE"] {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Lock down scroll feel:
     - overscroll-behavior:none stops the whole-page rubber-band / scroll
       chaining on macOS trackpads + iOS Safari (the #1 "uncontrolled" feel).
     - scroll-padding-top clears the 84px sticky header so anchor jumps and
       #fragment links land below it instead of hiding underneath. */
  overscroll-behavior: none;
  scroll-padding-top: 84px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.52;
  letter-spacing: var(--tracking-normal);
  font-weight: 400;
  background-color: var(--surface-bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Contain bounce at the vertical page edges without blocking nested
     scroll containers (mega-menu, thumbnail strips). */
  overscroll-behavior-y: contain;
}

h1, h2, h3, h4 {
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  font-weight: 600;
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: 15px; }

p, li, label {
  color: var(--text-secondary);
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}

button {
  font-weight: 600;
  border-radius: 12px !important;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-smooth),
              background-color var(--dur-fast) var(--ease-smooth),
              color var(--dur-fast) var(--ease-smooth),
              opacity var(--dur-fast) var(--ease-smooth);
}

button:not(:disabled):active {
  transform: translateY(1px) scale(0.99);
}

/* Premium-feel keyboard focus ring (additive, doesn't change visual style) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Skip-link for screen readers / keyboard users (a11y + SEO landmark hint) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: #0f172a;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 8px;
  outline: 2px solid #d70000;
  outline-offset: 2px;
}

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

/* Selection color matches brand red accent */
::selection {
  background: #0f172a;
  color: #ffffff;
}

/* ── Scroll-performance utility ───────────────────────────────────
   Apply .cv-auto to off-screen page sections that do NOT measure their
   own geometry (no getBoundingClientRect/ResizeObserver). The browser
   skips layout/paint/hit-testing of the subtree while it's off-screen,
   which is typically a 3-8x scroll improvement on long pages.

   contain-intrinsic-size "auto <n>" reserves a placeholder height
   (auto grows to the real size after first render) so the scrollbar
   doesn't jump. Do NOT use on sections that animate from their measured
   bounds (e.g. StatsBanner, ClosingBanner) — see component notes. */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

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

@keyframes blur-img-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.blur-img-wrap {
  background: #f5f5f7;
}

.blur-img-shimmer {
  background: linear-gradient(
    90deg,
    #f5f5f7 0%,
    #ebebed 40%,
    #f5f5f7 80%
  );
  background-size: 200% 100%;
  animation: blur-img-shimmer 1.6s ease-in-out infinite;
  transition: opacity var(--dur-slow) var(--ease-snap);
  opacity: 1;
}

.blur-img-loaded .blur-img-shimmer {
  opacity: 0;
  pointer-events: none;
}

/* Above-the-fold images must be paintable from the server response. Waiting
   for hydration to remove the blur makes an already-downloaded image miss LCP. */
.blur-img-priority .blur-img-shimmer {
  opacity: 0 !important;
}

.blur-img-el {
  opacity: 0;
  filter: blur(8px) saturate(1.2);
  transform: scale(1.02);
  border-radius: 10px;
  transition:
    opacity var(--dur-slow) var(--ease-snap),
    filter var(--dur-slow) var(--ease-snap),
    transform var(--dur-slow) var(--ease-snap);
  will-change: opacity, filter, transform;
}

.blur-img-priority .blur-img-el {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Reserve the first search viewport in critical CSS. Search card styles are
   streamed with the client boundary; this keeps the footer from entering and
   leaving the viewport while those styles hydrate. */
.search-page {
  min-height: 110vh;
}

/* The filter component's full visual CSS is streamed with its client
   boundary. Mirror only its structural mobile rules in the document head so
   desktop filter chips never occupy several rows before that CSS arrives. */
.ppm-filter-bar-inner {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .ppm-filter-bar-inner {
    min-height: 54px;
  }
  .ppm-fb-chips-desktop,
  .ppm-fb-sort-desktop,
  .ppm-fb-intro,
  .ppm-fb-spacer {
    display: none !important;
  }
  .ppm-fb-mobile-trigger,
  .ppm-fb-sort-trigger,
  .ppm-fb-sort {
    display: inline-flex;
  }
  .ppm-fb-mobile-trigger,
  .ppm-fb-sort {
    flex: 1 1 0;
  }
}

.blur-img-loaded .blur-img-el {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: scale(1);
}

/* Shared header styles live in this cacheable stylesheet instead of being
   repeated inside every storefront HTML document. */
/* ── Base header ── */
.mobile-header-shell {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  /* Outer "floating" padding when at the top of the page. The bar sits
     in a rounded pill with a small gap to the viewport edges, then on
     scroll those margins animate to 0 and it locks flush. */
  padding: 14px 18px 0;
  /* Subtle warm wash so the floating pill doesn't sit on raw white */
  background: linear-gradient(180deg, #f7f5f2 0%, #f3f1ed 100%);
  transition: padding .7s var(--ease-entrance), background .7s var(--ease-smooth);
  will-change: padding;
}
.mobile-header-shell.is-scrolled {
  padding: 0;
  background: transparent;
}
.site-header {
  position: relative;
  box-sizing: border-box;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  /* Liquid-glass material handles refraction/frosting; keep a faint
     warm-white tint so the header stays readable while it bends the
     page behind it. */
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(252,250,247,0.72) 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  transition:
    border-radius .7s var(--ease-entrance),
    background .7s var(--ease-smooth);
}
.mobile-header-shell.is-scrolled .site-header {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.72);
  border-color: transparent;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.header-inner {
  width: 100%;
  min-width: 0;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 48px);
  height: 68px;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 40px);
  box-sizing: border-box;
}
.header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
  max-width: 48%;
}
.header-logo-svg {
  height: 32px;
  width: auto;
  max-width: 220px;
  display: block;
}

/* ── Desktop nav ── */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-shrink: 1;
}
.header-desktop-search {
  flex: 1;
  min-width: 320px;
  max-width: 640px;
}
.nav-item-wrap {
  /* No position:relative — mega-menu uses site-header as containing block for full width */
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: #1f2937;
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
  white-space: nowrap;
}
.nav-link:hover {
  background: #f5f5f5;
  color: #000;
}
.nav-chevron {
  font-size: 12px;
  opacity: 0.4;
  display: inline-block;
}
/* ── Mega Menu ── */
.mega-menu {
  --mega-x: 50%;
  --mega-y: 20%;
  position: absolute;
  top: calc(100% + 10px);
  left: clamp(12px, 2vw, 28px);
  right: clamp(12px, 2vw, 28px);
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(720px 300px at var(--mega-x) var(--mega-y), rgba(215, 0, 0, 0.055), transparent 65%),
    linear-gradient(145deg, rgba(255,255,255,0.985), rgba(248,246,243,0.97));
  backdrop-filter: saturate(150%) blur(26px);
  -webkit-backdrop-filter: saturate(150%) blur(26px);
  border: 1px solid rgba(15, 23, 42, 0.075);
  border-radius: 26px;
  box-shadow: 0 36px 90px -34px rgba(20, 14, 12, 0.42), 0 14px 34px -22px rgba(20, 14, 12, 0.28), inset 0 1px 0 rgba(255,255,255,0.92);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 16% 100% 16% round 26px);
  transform: perspective(1200px) translateY(-12px) rotateX(-2deg) scale(.985);
  transform-origin: 50% 0;
  transition:
    opacity 320ms var(--ease-smooth),
    visibility 320ms var(--ease-smooth),
    clip-path 520ms var(--ease-entrance),
    transform 520ms var(--ease-entrance);
  will-change: transform, opacity, clip-path;
}
.mega-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 round 26px);
  transform: none;
}
.mega-menu-orbit {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(215, 0, 0, 0.08);
  border-radius: 999px;
}
.mega-menu-orbit-one { width: 420px; height: 420px; right: -170px; top: -300px; }
.mega-menu-orbit-two { width: 260px; height: 260px; left: 20%; bottom: -220px; }
.mega-menu-topline {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  min-height: 54px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(255,255,255,0.48);
}
.mega-menu-kicker,
.mega-menu-records {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}
.mega-menu-kicker { color: #8a0000; }
.mega-menu-kicker .ppm-eyebrow-mark { width: 15px; height: 14px; flex: 0 0 auto; }
.mega-menu-records { color: #8b9099; }
.mega-menu-viewall {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #8a0000;
  background: rgba(215, 0, 0, 0.055);
  border: 1px solid rgba(215, 0, 0, 0.12);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}
.mega-menu-inner {
  max-width: 1420px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 290px) 1fr;
  height: clamp(360px, calc(100dvh - 210px), 610px);
  min-height: 0;
  overflow: hidden;
}
.mega-menu-left {
  min-height: 0;
  border-right: 1px solid rgba(15, 23, 42, 0.07);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 14px 12px 18px;
  background: linear-gradient(180deg, rgba(247,244,240,0.9), rgba(242,238,233,0.7));
  scrollbar-width: thin;
  scrollbar-color: rgba(215, 0, 0, .3) transparent;
  scrollbar-gutter: stable;
}
.mega-menu-left::-webkit-scrollbar,
.mega-menu-right::-webkit-scrollbar {
  width: 6px;
}
.mega-menu-left::-webkit-scrollbar-track,
.mega-menu-right::-webkit-scrollbar-track {
  background: transparent;
}
.mega-menu-left::-webkit-scrollbar-thumb,
.mega-menu-right::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(215, 0, 0, .24);
}
.mega-left-label {
  position: sticky;
  top: -14px;
  z-index: 3;
  padding: 4px 12px 10px;
  padding-top: 18px;
  color: #8b817a;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f7f4f0 72%, rgba(247,244,240,0));
}
.mega-cat-link {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: #374151;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 12px;
  margin: 2px 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: background 220ms var(--ease-smooth), color 220ms var(--ease-smooth), border-color 220ms var(--ease-smooth), transform 220ms var(--ease-smooth);
}
.mega-menu.open .mega-cat-link {
  animation: megaItemIn 420ms var(--ease-entrance) both;
  animation-delay: calc(70ms + var(--mega-item-index) * 28ms);
}
.mega-cat-number {
  color: #b2a8a1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}
.mega-cat-link:hover {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}
.mega-cat-link.active {
  background: #ffffff;
  color: #8a0000;
  border-color: rgba(215, 0, 0, 0.12);
  box-shadow: 0 9px 20px -16px rgba(82, 0, 0, .55), inset 3px 0 0 #d70000;
  font-weight: 650;
}
.mega-cat-arrow {
  font-size: 12px;
  opacity: 0.3;
  transition: opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.mega-cat-link.active .mega-cat-arrow,
.mega-cat-link:hover .mega-cat-arrow {
  opacity: 0.5;
  transform: translateX(2px);
}
.mega-menu-right {
  min-width: 0;
  min-height: 0;
  padding: 28px clamp(26px, 3vw, 44px) 34px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(215, 0, 0, .22) transparent;
  scrollbar-gutter: stable;
  animation: megaPanelIn 440ms var(--ease-entrance) both;
}
.mega-right-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
.mega-right-kicker {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a0000;
}
.mega-right-title {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 520;
  letter-spacing: -.045em;
  line-height: 1.05;
  color: #0f172a;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-smooth);
}
.mega-right-title:hover {
  color: #8a0000;
}
.mega-right-count {
  padding: 7px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  color: #777f8c;
  background: rgba(255,255,255,.66);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.mega-right-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #9ca3af;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.mega-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mega-flat-wrap {
  width: 100%;
  padding: 24px 32px;
  overflow-y: auto;
}
.mega-flat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 14px;
}
.mega-sub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 520;
  letter-spacing: -0.01em;
  color: #374151;
  text-decoration: none;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(15, 23, 42, 0.065);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(10px);
  animation: megaSubIn 380ms var(--ease-entrance) both;
  animation-delay: calc(35ms + var(--mega-sub-index) * 24ms);
  transition: background 220ms var(--ease-smooth), color 220ms var(--ease-smooth), border-color 220ms var(--ease-smooth), translate 220ms var(--ease-smooth), box-shadow 220ms var(--ease-smooth);
}
.mega-sub-link:hover {
  background: #fff;
  border-color: rgba(215, 0, 0, 0.2);
  color: #8a0000;
  translate: 0 -2px;
  box-shadow: 0 12px 22px -18px rgba(96, 0, 0, .55);
}
.mega-sub-arrow {
  color: #c3b8b1;
  transition: color 220ms ease, transform 220ms ease;
}
.mega-sub-link:hover .mega-sub-arrow { color: #d70000; transform: translate(2px, -2px); }
.mega-menu-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  border-top: 1px solid rgba(15,23,42,.07);
  background: rgba(255,255,255,.44);
  color: #767e89;
  font-size: 11px;
}
.mega-menu-foot a { color: #8a0000; font-weight: 700; text-decoration: none; }
@keyframes megaItemIn { to { opacity: 1; transform: translateX(0); } }
@keyframes megaPanelIn {
  from { opacity: .25; transform: translate3d(20px, 8px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes megaSubIn { to { opacity: 1; transform: translateY(0); } }
.nav-chevron { transition: transform 260ms var(--ease-spring), opacity 220ms ease; }
.nav-chevron.is-open { transform: rotate(180deg); opacity: .75; }
@media (max-width: 900px) {
  .mega-sub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mega-flat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Right side ── */
.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 0;
}
.header-link {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: #374151;
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.header-link:hover {
  background: #f5f5f5;
  color: #000;
}
.header-wishlist-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 10px;
  padding-right: 10px;
}
.header-wishlist-link.has-items {
  color: #d70000;
}
.wishlist-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cart-link {
  position: relative;
}
.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #d70000;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* ── Hamburger — hidden on desktop ── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.hamburger-btn:hover { background: #f5f5f5; }
.ham-bar {
  display: block;
  height: 2px;
  background: #111;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-smooth), opacity var(--dur-base) var(--ease-smooth), width var(--dur-base) var(--ease-smooth);
}
.ham-bar:nth-child(1) { width: 22px; }
.ham-bar:nth-child(2) { width: 16px; }
.ham-bar:nth-child(3) { width: 10px; }
.hamburger-btn.opened .ham-bar:nth-child(1) {
  width: 22px;
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.opened .ham-bar:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.opened .ham-bar:nth-child(3) {
  width: 22px;
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile drawer ── */
.mobile-drawer {
  position: fixed;
  top: 8px;
  left: 8px;
  bottom: 8px;
  width: min(92vw, 420px);
  isolation: isolate;
  background:
    radial-gradient(520px 260px at 5% -5%, rgba(215,0,0,.09), transparent 68%),
    linear-gradient(155deg, rgba(255,255,255,.985), rgba(247,244,240,.96));
  backdrop-filter: saturate(175%) blur(28px);
  -webkit-backdrop-filter: saturate(175%) blur(28px);
  border: 1px solid rgba(15, 23, 42, 0.075);
  border-radius: 28px;
  z-index: 200;
  opacity: .55;
  visibility: hidden;
  pointer-events: none;
  transform: perspective(1000px) translate3d(calc(-100% - 22px), 0, 0) rotateY(-4deg) scale(.985);
  transform-origin: 0 50%;
  transition: transform 560ms var(--ease-entrance), opacity 360ms var(--ease-smooth), box-shadow 560ms var(--ease-smooth), visibility 0s linear 560ms;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 30px 80px -24px rgba(15, 23, 42, 0.4),
    0 10px 28px -18px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.drawer-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 18px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,0));
}
.drawer-brand-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #d70000;
  background: #fff;
  border: 1px solid rgba(215,0,0,.12);
  border-radius: 14px;
  box-shadow: 0 10px 24px -18px rgba(138,0,0,.7);
}
.drawer-brand-mark .ppm-eyebrow-mark { width: 22px; height: 21px; }
}
/* Brand accent strip under the header */
.drawer-header::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(215, 0, 0, 0) 0%,
    rgba(215, 0, 0, 0.35) 12%,
    rgba(15, 23, 42, 0.10) 50%,
    rgba(15, 23, 42, 0) 100%);
}
.drawer-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.drawer-title {
  font-size: 19px;
  font-weight: 650;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.drawer-subtitle {
  font-size: 9.5px;
  font-weight: 500;
  color: #6b7280;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.drawer-close {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.08);
  cursor: pointer;
  font-size: 15px;
  color: #4b5563;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-spring);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.drawer-close:hover {
  background: #fff;
  color: #d70000;
  border-color: rgba(215, 0, 0, 0.25);
}
.drawer-close:active { transform: scale(0.94); }
.drawer-nav {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 20px;
  scrollbar-width: thin;
}

.drawer-item {
  margin-bottom: 6px;
  opacity: 0;
  transform: translate3d(-16px, 8px, 0);
}
.mobile-drawer.open .drawer-item {
  animation: drawerItemIn 460ms var(--ease-entrance) both;
  animation-delay: calc(100ms + var(--drawer-item-index, 0) * 34ms);
}
.drawer-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 15px;
  padding: 3px;
  background: rgba(255,255,255,.56);
  transition: background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.drawer-item-row:hover {
  background: #fff;
  border-color: rgba(215,0,0,.12);
  box-shadow: 0 12px 24px -20px rgba(80,0,0,.5);
}
.drawer-link {
  flex: 1;
  display: block;
  text-decoration: none;
  color: #0f172a;
  border-radius: 10px;
  line-height: 1.3;
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.drawer-link.level-1 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  padding: 13px 12px;
}
.drawer-link.level-2,
.drawer-link.level-3,
.drawer-link.level-4 {
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  padding: 10px 12px;
}
.drawer-link:hover {
  color: #d70000;
  background: rgba(215, 0, 0, 0.04);
}
.drawer-link:active {
  background: rgba(215, 0, 0, 0.08);
}
.drawer-expand {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.85);
  color: #6b7280;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
  flex-shrink: 0;
}
.drawer-expand:hover {
  color: #d70000;
  border-color: rgba(215, 0, 0, 0.25);
}
.drawer-expand.expanded {
  transform: rotate(180deg);
  background: #fff;
  color: #d70000;
  border-color: rgba(215, 0, 0, 0.3);
}
.drawer-children {
  margin: 7px 0 9px 12px;
  padding: 8px 0 2px 10px;
  border-left: 1px solid rgba(215, 0, 0, 0.16);
  animation: drawerChildrenIn 380ms var(--ease-entrance) both;
  transform-origin: 0 0;
}
.drawer-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(15,23,42,.07);
  background: rgba(255,255,255,.64);
}
.drawer-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 13px;
  border-radius: 13px;
  color: #0f172a;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.drawer-footer a:last-child { color: #8a0000; border-color: rgba(215,0,0,.15); }
@keyframes drawerItemIn { to { opacity: 1; transform: none; } }
@keyframes drawerChildrenIn {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-8px) scaleY(.96); }
  to { opacity: 1; clip-path: inset(0); transform: none; }
}
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 12, 0.38);
  backdrop-filter: blur(7px) saturate(90%);
  -webkit-backdrop-filter: blur(7px) saturate(90%);
  z-index: 199;
  animation: drawerFade 360ms var(--ease-smooth);
}

@media (max-width: 1200px) {
  .header-inner {
    padding: 0 0px;
    gap: 16px;
  }
  .header-logo-svg {
    height: 28px;
  }
  .desktop-nav {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .desktop-nav::-webkit-scrollbar {
    display: none;
  }
  .nav-link {
    padding: 8px 10px;
    font-size: 13px;
  }
  .header-link {
    padding: 8px 10px;
    font-size: 13px;
  }
  .header-desktop-search {
    min-width: 280px;
    max-width: 420px;
  }
}

@media (max-width: 1024px) {
  .hamburger-btn { display: flex; }
  .desktop-nav { display: none; }
  .header-inner {
    gap: 10px;
    height: 56px;
  }
  .header-desktop-search {
    display: none;
  }
  .header-logo {
    flex: 1 1 auto;
    max-width: 180px;
  }
  .header-logo-svg {
    width: 100%;
    max-width: 100%;
  }
  .wishlist-label {
    display: none;
  }
  .header-link {
    padding: 8px;
  }
  .header-wishlist-link {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@keyframes drawerFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu,
  .mobile-drawer,
  .mega-cat-link,
  .mega-menu-right,
  .mega-sub-link,
  .drawer-item,
  .drawer-children,
  .drawer-overlay,
  .nav-chevron {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .mega-menu.open .mega-cat-link,
  .mega-sub-link,
  .mobile-drawer.open .drawer-item {
    opacity: 1;
    transform: none;
  }
}

/* ── Mobile breakpoint ── */
@media (max-width: 767px) {
  .mobile-header-shell {
    background: linear-gradient(180deg, #f7f5f2 0%, #f3f1ed 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: none;
    box-shadow: none;
    border-radius: 0;
    /* Tighter floating padding on mobile */
    padding: 10px 10px 0;
  }
  .mobile-header-shell.is-scrolled {
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
  .site-header {
    /* More translucent on mobile so the liquid-glass refraction reads */
    background: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(252,250,247,0.28) 100%);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
  }
  .mobile-header-shell.is-scrolled .site-header {
    border-radius: 0;
    background: rgba(255, 255, 255, 0.32);
    border-color: transparent;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  }
  .hamburger-btn { display: flex; }
  .desktop-nav { display: none; }
  .header-inner { gap: 12px; height: 52px; }
  .header-logo-svg { height: 26px; }
  .wishlist-label { display: none; }
  .header-link {
    padding: 8px 9px;
  }
  .header-wishlist-link {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ── Mobile search strip ── */
.mobile-search-strip {
  display: none;
}
@media (max-width: 1024px) {
  .mobile-search-strip {
    display: block;
    position: static;
    top: auto;
    z-index: auto;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 6px 12px 8px;
    border-top: none;
    box-shadow: none;
    border-radius: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .mobile-search-strip {
    padding: 8px 12px 10px;
  }
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}