/* ═══════════════════════════════════════════════
   ROOT VARIABLES & RESET
═══════════════════════════════════════════════ */
:root {
  --bg: #f2f1ef;
  --bg2: #eceae7;
  --white: #fafaf8;
  --dark: #0c0c0c;
  --dark2: #1a1a1a;
  --mid: #6b6b6b;
  --light: #b0afad;
  --red: #e8321e;
  --red2: #ff4d35;
  --gold: #c9a96e;
  --accent: #7fffd4;
  --card: rgba(255,255,255,0.72);
  --glass: rgba(255,255,255,0.08);
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.06);
  --shadow: 0 20px 60px rgba(0,0,0,0.10);
  --shadow-lg: 0 40px 100px rgba(0,0,0,0.18);
  --r: 20px;
  --r2: 30px;
  --transition: cubic-bezier(0.77, 0, 0.175, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-pad: clamp(20px, 4vw, 56px);
  --content-max: 1400px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--dark);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; cursor: none; }
button { cursor: none; border: none; background: none; font: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* ═══════════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════════ */
#cursor {
  position: fixed; top: 0; left: 0; z-index: 2147483646;
  pointer-events: none; mix-blend-mode: normal;
}
.c-dot {
  position: absolute;
  width: 7px; height: 7px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: transform .08s;
}
.c-ring {
  position: absolute;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(12,12,12,0.45);
  box-shadow: 0 0 0 1px rgba(255,255,255,.24);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .4s var(--ease), height .4s var(--ease), background .3s, border-color .3s, transform .12s;
}
.cursor-hover .c-ring {
  width: 56px; height: 56px;
  background: rgba(232,50,30,0.08);
  border-color: var(--red);
}
.cursor-dark .c-ring { border-color: rgba(255,255,255,0.4); }
.cursor-dark .c-dot { background: var(--white); }

@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  a, button, input, select, textarea, label { cursor: auto; }
  #cursor { display: none !important; }
}

/* ═══════════════════════════════════════════════
   NOISE OVERLAY
═══════════════════════════════════════════════ */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)' opacity='1'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--page-pad);
  height: 72px;
  background: rgba(242,241,239,0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow .4s, background .4s;
}
#nav.scrolled {
  box-shadow: 0 8px 40px rgba(0,0,0,0.07);
  background: rgba(242,241,239,0.95);
}

.nav-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 26px; letter-spacing: 3px;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.nav-logo-icon {
  width: 32px; height: 32px;
  background: var(--dark);
  clip-path: polygon(15% 80%, 50% 12%, 85% 80%, 68% 80%, 50% 46%, 32% 80%);
}
.nav-center { display: flex; align-items: center; gap: 40px; }
.nav-center a {
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--mid);
  position: relative; padding-bottom: 4px;
  transition: color .3s;
}
.nav-center a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1.5px; background: var(--red);
  transition: width .35s var(--ease);
}
.nav-center a:hover { color: var(--dark); }
.nav-center a:hover::after { width: 100%; }
.nav-center a.active { color: var(--dark); }
.nav-center a.active::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 20px; }
.user-nav-wrap { position: relative; }
.user-nav-btn {
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.72);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--dark);
  transition: all .25s;
}
.user-nav-btn:hover {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
  transform: translateY(-1px);
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: rgba(250,250,248,.98);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
  padding: 8px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 600;
}
.user-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.user-dd-head {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mid);
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 4px;
}
.user-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: #2a2a2a;
  transition: background .2s ease, color .2s ease;
}
.user-dropdown a:hover {
  background: rgba(0,0,0,.06);
  color: var(--dark);
}
.nav-menu-btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  display: none;
  align-items: center; justify-content: center;
  color: var(--dark);
  transition: all .25s;
}
.nav-menu-btn:hover { background: var(--dark); color: var(--white); border-color: var(--dark); }
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 495;
  background: rgba(13, 13, 15, 0);
  backdrop-filter: blur(0px);
  pointer-events: none;
  transition: background .32s cubic-bezier(.22,1,.36,1), backdrop-filter .32s cubic-bezier(.22,1,.36,1), opacity .32s ease;
  opacity: 0;
}
.mobile-menu-backdrop.open {
  opacity: 1;
  background: rgba(13, 13, 15, .38);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
.mobile-menu {
  position: fixed;
  top: 72px; right: 0; bottom: 0;
  width: min(320px, 100vw);
  z-index: 500;
  background: rgba(248,245,240,.96);
  backdrop-filter: blur(16px);
  border-left: 1px solid rgba(0,0,0,.08);
  box-shadow: -18px 0 48px rgba(0,0,0,.18);
  transform: translate3d(32px, 0, 0);
  opacity: 0;
  pointer-events: none;
  transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .32s ease;
  padding: 14px 16px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mobile-menu__top-title {
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #222;
}
.mobile-menu__close {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #232323;
  transition: background .2s ease, transform .2s ease;
}
.mobile-menu__close:active {
  transform: scale(.97);
}
.mobile-menu__account-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(145deg, rgba(255,255,255,.9) 0%, rgba(245,240,233,.86) 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
.mobile-menu__avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #131313;
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mobile-menu__avatar--guest {
  background: rgba(24,24,24,.08);
  color: #1f1f1f;
  border: 1px solid rgba(0,0,0,.1);
}
.mobile-menu__account-copy {
  min-width: 0;
}
.mobile-menu__account-title {
  margin: 0 0 3px;
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  color: #1a1a1a;
}
.mobile-menu__account-sub {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #67615c;
}
.mobile-menu__section + .mobile-menu__section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.mobile-menu__label {
  margin: 0 0 10px;
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #78716a;
}
.mobile-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.07);
  background: rgba(255,255,255,.72);
  color: #181818;
  transition: background .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mobile-menu__item + .mobile-menu__item {
  margin-top: 8px;
}
.mobile-menu__item:hover {
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.12);
  transform: translateX(2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.mobile-menu__item:active {
  transform: translateX(1px) scale(.995);
  background: rgba(244,242,239,.96);
}
.mobile-menu__item-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2e2e2e;
  flex-shrink: 0;
}
.mobile-menu__item-label {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.45px;
  text-transform: uppercase;
  line-height: 1.2;
}
.mobile-menu__action-btn {
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 13px;
  background: rgba(16,16,16,.94);
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.mobile-menu__action-btn:hover {
  background: #000;
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
  transform: translateX(2px);
}
.mobile-menu__action-btn:active {
  transform: translateX(1px) scale(.995);
}
.mobile-menu__section,
.mobile-menu__account-hero,
.mobile-menu__top {
  opacity: 0;
  transform: translateY(8px);
}
.mobile-menu.open .mobile-menu__top,
.mobile-menu.open .mobile-menu__account-hero,
.mobile-menu.open .mobile-menu__section {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .32s cubic-bezier(.22,1,.36,1);
}
.mobile-menu.open .mobile-menu__top { transition-delay: .04s; }
.mobile-menu.open .mobile-menu__account-hero { transition-delay: .08s; }
.mobile-menu.open .mobile-menu__section:nth-of-type(1) { transition-delay: .12s; }
.mobile-menu.open .mobile-menu__section:nth-of-type(2) { transition-delay: .16s; }
.mobile-menu.open .mobile-menu__section:nth-of-type(3) { transition-delay: .2s; }
.mobile-menu.open .mobile-menu__section:nth-of-type(4) { transition-delay: .24s; }
.mobile-search-rail-wrapper {
  display: none;
}
.nav-search {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 100px; padding: 8px 18px;
  font-size: 13px; color: var(--mid);
  transition: all .3s;
}
.nav-search input {
  border: none; background: none; outline: none;
  font: inherit; color: var(--dark); width: 210px;
}
.nav-search:focus-within {
  background: var(--white); border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04), 0 12px 26px rgba(0,0,0,.08);
}
.nav-search.search-open {
  border-color: var(--dark);
  background: var(--white);
}
/* —— Global cinematic search portal —— */
body.search-mega-open {
  overflow: hidden;
}
body.mobile-menu-open {
  overflow: hidden;
}
body.search-mega-open #nav {
  z-index: 950;
}
.global-search-portal {
  position: fixed;
  inset: 0;
  z-index: 940;
  pointer-events: none;
  visibility: hidden;
}
.global-search-portal.is-open {
  pointer-events: auto;
  visibility: visible;
}
.global-search-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(12,10,9,.62), rgba(6,5,5,.74));
  opacity: 0;
  transition: opacity .2s ease;
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
}
.global-search-portal.is-open .global-search-backdrop {
  opacity: 1;
  transition-duration: .3s;
}
.global-search-mega-shell {
  position: absolute;
  left: 50%;
  top: calc(72px + 14px);
  width: min(var(--content-max), calc(100% - 40px));
  transform: translateX(-50%) translateY(-18px) scale(0.98);
  opacity: 0;
  filter: blur(0);
  transition:
    opacity .2s ease,
    transform .2s ease;
  max-height: min(78vh, 720px);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.global-search-portal.is-open .global-search-mega-shell {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  transition-duration: .3s;
}
.global-search-mega {
  width: 100%;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(165deg, rgba(255,255,255,.97) 0%, rgba(248,245,240,.96) 48%, rgba(240,236,230,.94) 100%);
  box-shadow:
    0 4px 3px rgba(0,0,0,.02),
    0 18px 34px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.04) inset;
  overflow: hidden;
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
}
.global-search-stable-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 14px 0;
}
.search-mega-input-wrap--panel {
  display: none;
}
.global-search-mega-inner {
  max-height: min(78vh, 720px);
  overflow: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}
.global-search-mega-inner::-webkit-scrollbar { width: 9px; }
.global-search-mega-inner::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}
.search-mega-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 22px 24px 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
}
.search-mega-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-mega-input-wrap {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.11);
  background: rgba(255,255,255,.9);
  color: #7a746f;
}
.search-mega-input-wrap input {
  width: 100%;
  min-height: 30px;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #1b1b1b;
}
.search-mega-input-wrap input::placeholder {
  color: #837d77;
}
.search-mega-head-text { flex: 1; min-width: 0; }
.search-mega-kicker {
  margin: 0 0 6px;
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #9a9690;
}
.search-mega-helper {
  margin: 0;
  font-size: 13px;
  color: #5c5954;
  line-height: 1.45;
  max-width: 42ch;
}
.search-mega-close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  color: #1a1a1a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .22s var(--ease), transform .22s var(--ease), border-color .22s;
}
.search-mega-close:hover {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
  transform: translateY(-1px);
}
.search-mega-close svg { display: block; }
.search-recent-block {
  padding: 14px 24px 0;
}
.search-recent-label {
  font-family: 'Syne', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a8a49e;
  margin-bottom: 10px;
}
.search-recent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-recent-chip {
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #2a2826;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.search-recent-chip:hover {
  background: #fff;
  border-color: var(--dark);
  transform: translateY(-1px);
}
.search-mega-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  gap: 20px 28px;
  padding: 20px 24px 24px;
  align-items: start;
}
.search-mega-main { min-width: 0; }
.search-mega-aside {
  border-left: 1px solid rgba(0,0,0,.07);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.search-mega-section-title {
  margin: 0 0 14px;
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8f8b85;
}
.search-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
}
.search-prod-grid.search-prod-grid--single-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.search-prod-grid.search-prod-grid--single-row .search-prod-card {
  flex: 0 0 min(200px, 72vw);
  scroll-snap-align: start;
}
.search-prod-card.prod-card {
  flex: initial;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}
.search-prod-card.prod-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 48px rgba(0,0,0,.2);
  border-color: rgba(0,0,0,.09);
}
.search-prod-card .prod-img-area {
  aspect-ratio: 1.05;
}
.search-prod-card .prod-img-area img {
  padding: 12px 14px 22px;
}
.search-prod-card .prod-body {
  padding: 12px 14px 16px;
}
.search-prod-card .prod-name {
  font-size: 13px;
  min-height: 34px;
  margin-bottom: 6px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-prod-card .prod-price {
  font-size: 15px;
}
.search-prod-card .prod-footer {
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.search-prod-meta {
  font-size: 10px;
  color: #8a8782;
  letter-spacing: .02em;
}
@keyframes searchCardReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .search-prod-grid--stagger .search-prod-card,
  .search-featured-hero {
    animation: none !important;
  }
}
.search-side-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.search-side-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #1e1e1e;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all .15s ease;
}
.search-side-link:hover,
.search-side-link.is-active {
  background: rgba(255,255,255,.9);
  border-color: rgba(0,0,0,.08);
  transform: translateX(2px);
}
.search-side-link.search-side-link--button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
}
.search-side-link span.count {
  font-size: 10px;
  font-family: 'Syne', sans-serif;
  color: #9a9690;
}
.search-results-animated {
  animation: searchResultsSwap .2s ease both;
}
@keyframes searchResultsSwap {
  from { opacity: .55; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.search-mega-footer {
  padding: 16px 24px 22px;
  border-top: 1px solid rgba(0,0,0,.07);
  background: linear-gradient(0deg, rgba(250,248,245,.95), rgba(255,255,255,.4));
}
.search-see-all {
  margin: 0;
  display: flex;
  justify-content: center;
}
.search-see-all a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  text-align: center;
  border-radius: 14px;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: var(--dark);
  color: #fff;
  transition: background .24s var(--ease), transform .24s var(--ease);
}
.search-see-all a:hover {
  background: var(--red);
  transform: translateY(-2px);
}
.search-state {
  border-radius: 16px;
  padding: 28px 22px;
  font-size: 14px;
  color: #6f6c68;
  text-align: center;
  line-height: 1.5;
}
.search-state.search-state-loading {
  font-family: 'Syne', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  color: #9a9690;
}
.search-empty-hero {
  text-align: center;
  padding: 32px 20px 12px;
}
.search-empty-hero h4 {
  margin: 0 0 8px;
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1a1918;
}
.search-empty-hero p {
  margin: 0;
  font-size: 13px;
  color: #7a7670;
  max-width: 36ch;
  margin-inline: auto;
}
.search-no-result-wrap {
  padding: 8px 24px 24px;
}
.search-hit {
  background: linear-gradient(120deg, rgba(232,50,30,.14), rgba(245,185,66,.12));
  color: inherit;
  font-weight: 600;
  border-radius: 4px;
  padding: 0 3px;
}
.highlight {
  color: var(--red);
  font-weight: 700;
}
.search-mega-block + .search-mega-block {
  margin-top: 22px;
}
.search-mega-main--discovery {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-mega-split {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(260px, 1fr);
  gap: 22px 28px;
  align-items: start;
  width: 100%;
  grid-column: 1 / -1;
}
.search-mega-split--single {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-inline: auto;
}
.search-mega-split__rest .search-mega-section-title {
  margin-bottom: 12px;
}
.search-featured-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff 0%, #f6f3ee 100%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 40px rgba(0,0,0,.1);
  position: relative;
  overflow: hidden;
  animation: searchHeroIn 0.55s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes searchHeroIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.search-featured-hero__media {
  position: relative;
  border-radius: 18px;
  background: radial-gradient(ellipse at 42% 36%, #f9f7f3 0%, #ece8e2 62%, #e4dfd8 100%);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-featured-hero__media img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  padding: 16px;
  transition: transform .55s var(--ease), filter .45s var(--ease);
}
.search-featured-hero:hover .search-featured-hero__media img {
  transform: scale(1.04) translateY(-4px);
  filter: contrast(1.04) saturate(1.05);
}
.search-featured-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
}
.search-featured-hero__media-actions {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: center;
  z-index: 4;
}
.search-featured-hero__accent {
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: var(--dark);
  color: #fff;
  transition: transform .22s var(--ease), background .22s;
}
.search-featured-hero__accent:hover {
  background: var(--red);
  transform: translateY(-2px);
}
.search-featured-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.search-featured-hero__eyebrow {
  font-family: 'Syne', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a39e97;
}
.search-featured-hero__brand {
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #8a8a8a;
}
.search-featured-hero__title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  color: #141312;
}
.search-featured-hero__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #5c5954;
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-featured-hero__price {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0f0f0f;
}
.search-featured-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.search-featured-hero__primary.btn-primary {
  padding: 12px 20px;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-decoration: none;
  border-radius: 12px;
}
.search-featured-hero__secondary.btn-ghost {
  padding: 12px 18px;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-decoration: none;
  border-radius: 12px;
}
.search-prod-card--interactive {
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: all .15s ease;
}
.search-prod-card--interactive.is-tap-active {
  transform: scale(.97);
}
.search-prod-card__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 20px;
}
.search-prod-card--interactive .prod-img-area {
  position: relative;
  z-index: 3;
  pointer-events: none;
}
.search-prod-card--interactive .prod-body {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
.search-prod-quick-add {
  z-index: 8;
  pointer-events: auto;
}
.search-prod-quick-add.is-added {
  background: #1f7a44;
}
.search-prod-quick-add.is-busy {
  opacity: .85;
  pointer-events: none;
}
.search-prod-card--interactive .prod-img-area img.is-variant-swap {
  animation: searchVariantSwap .28s ease;
}
@keyframes searchVariantSwap {
  0% { opacity: .45; transform: scale(1.015); }
  100% { opacity: 1; transform: scale(1); }
}
.search-variant-row {
  margin-top: 2px;
  margin-bottom: 10px;
}
.search-variant-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}
.search-variant-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.15);
  background: var(--swatch);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.search-variant-dot:hover {
  transform: scale(1.12);
  border-color: rgba(0,0,0,.35);
}
.search-variant-dot.is-active {
  box-shadow: 0 0 0 2px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.3);
}
.search-prod-card--interactive .search-side-link.is-active,
.search-side-link.is-active {
  outline: 2px solid rgba(232,50,30,.35);
}
.search-prod-grid--stagger .search-prod-card {
  animation: searchCardReveal 0.2s ease backwards;
}
.search-prod-grid--stagger .search-prod-card:nth-child(1) { animation-delay: .01s; }
.search-prod-grid--stagger .search-prod-card:nth-child(2) { animation-delay: .02s; }
.search-prod-grid--stagger .search-prod-card:nth-child(3) { animation-delay: .03s; }
.search-prod-grid--stagger .search-prod-card:nth-child(4) { animation-delay: .04s; }
.search-prod-grid--stagger .search-prod-card:nth-child(5) { animation-delay: .05s; }
.search-prod-grid--stagger .search-prod-card:nth-child(6) { animation-delay: .06s; }
.search-prod-grid--stagger .search-prod-card:nth-child(7) { animation-delay: .07s; }
.search-prod-grid--stagger .search-prod-card:nth-child(8) { animation-delay: .08s; }
@media (hover: none), (pointer: coarse) {
  .search-prod-quick-add {
    transform: translateY(0);
    opacity: 1;
  }
  .search-prod-card--interactive:active {
    transform: scale(.97);
  }
  .search-prod-quick-add:active {
    transform: scale(.97);
  }
}
.search-mega-skeleton {
  padding: 20px 24px 28px;
}
.search-skel {
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.09) 50%, rgba(0,0,0,.06) 100%);
  background-size: 200% 100%;
  animation: searchSkelShine 1.1s ease-in-out infinite;
}
.search-skel--hero {
  height: 200px;
  margin-bottom: 16px;
}
.search-skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.search-skel--card {
  height: 168px;
}
@keyframes searchSkelShine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .search-skel { animation: none; opacity: .7; }
}
.global-search-portal.search-portal--mobile-full .global-search-mega-shell {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  max-height: 100vh !important;
  height: 100vh !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch;
}
.global-search-portal.search-portal--mobile-full.is-open .global-search-mega-shell {
  transform: none !important;
}
.global-search-portal.search-portal--mobile-full .global-search-mega {
  border-radius: 0;
  min-height: 100vh;
  box-shadow: none;
}
.global-search-portal.search-portal--mobile-full .global-search-mega-inner {
  max-height: none;
  min-height: 100vh;
  width: 100%;
  margin: 0;
}
.nav-search-btn { display: none; }

#nav.search-mobile-open ~ .global-search-portal .global-search-mega-shell {
  top: 128px;
  width: calc(100% - 24px);
  max-height: calc(100vh - 140px);
}
#nav.search-mobile-open ~ .global-search-portal .global-search-mega-inner {
  max-height: calc(100vh - 140px);
}
#nav.search-mobile-open ~ .global-search-portal.search-portal--mobile-full .global-search-mega-shell {
  top: 0;
  width: 100%;
  max-height: 100vh;
}
#nav.search-mobile-open ~ .global-search-portal.search-portal--mobile-full .global-search-mega-inner {
  max-height: none;
}

@media (max-width: 900px) {
  .search-mega-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 18px 18px 20px;
  }
  .search-mega-aside {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(0,0,0,.07);
    padding-top: 20px;
  }
  .search-mega-split {
    grid-template-columns: 1fr;
  }
  .search-featured-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .global-search-mega-shell {
    top: calc(72px + 8px);
    width: calc(100% - 16px);
    max-height: calc(100vh - 80px);
  }
  .global-search-stable-head {
    justify-content: stretch;
    padding: 10px 12px 6px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: linear-gradient(180deg, rgba(255,255,255,.56), transparent);
  }
  .search-mega-input-wrap--panel {
    display: flex;
    flex: 1;
  }
  .global-search-mega-inner {
    max-height: calc(100vh - 80px);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .global-search-mega {
    border-radius: 18px;
  }
  .search-mega-head {
    padding: 12px 12px 8px;
    gap: 10px;
  }
  .search-mega-input-wrap {
    min-height: 42px;
    padding: 0 12px;
  }
  .search-mega-head-text {
    padding-inline: 2px;
  }
  .search-mega-helper {
    font-size: 12px;
    line-height: 1.35;
  }
  .search-mega-layout {
    padding: 14px 14px 16px;
    gap: 16px;
  }
  .search-mega-aside {
    order: -1;
    padding: 0;
    border: none;
    gap: 10px;
  }
  .search-mega-aside .search-mega-section-title {
    margin-bottom: 8px;
  }
  .search-side-list {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .search-side-list::-webkit-scrollbar {
    display: none;
  }
  .search-side-link.search-side-link--button {
    flex: 0 0 auto;
    min-height: 34px;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    scroll-snap-align: start;
  }
  .search-side-link.search-side-link--button .count {
    display: none;
  }
  .search-prod-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
  .search-prod-card.prod-card {
    border-radius: 16px;
    box-shadow: 0 5px 14px rgba(0,0,0,.08);
  }
  .search-prod-card .prod-img-area {
    aspect-ratio: 1.02;
  }
  .search-prod-card .prod-img-area img {
    padding: 8px 10px 16px;
  }
  .search-prod-card .prod-body {
    padding: 10px 10px 12px;
  }
  .search-prod-card .prod-name {
    font-size: 12px;
    min-height: 32px;
    margin-bottom: 4px;
  }
  .search-prod-card .prod-brand {
    font-size: 8px;
    letter-spacing: 1.8px;
  }
  .search-prod-card .prod-price {
    font-size: 14px;
  }
  .search-variant-row {
    margin-bottom: 8px;
  }
  .search-variant-dot {
    width: 11px;
    height: 11px;
  }
  .search-prod-quick-add {
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 9px;
    letter-spacing: 1.2px;
  }
  .search-prod-quick-add svg {
    width: 12px;
    height: 12px;
  }
  .search-recent-block {
    padding: 10px 14px 0;
  }
  .search-see-all a {
    min-height: 42px;
    width: 100%;
    font-size: 10px;
  }
  .search-featured-hero {
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
  }
  .search-featured-hero__media {
    min-height: 170px;
  }
  .search-featured-hero__desc {
    font-size: 12px;
    line-height: 1.4;
  }
  #nav.search-mobile-open .nav-search,
  .nav-search.mobile-open {
    left: 10px;
    right: 10px;
    padding: 11px 12px;
    border-radius: 14px;
  }
  #nav.search-mobile-open .nav-search input,
  .nav-search.mobile-open input {
    min-height: 28px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-search-mega-shell {
    transition: opacity .2s ease;
    transform: translateX(-50%) !important;
  }
  .global-search-portal.is-open .global-search-mega-shell {
    transform: translateX(-50%) !important;
  }
  .global-search-portal.search-portal--mobile-full .global-search-mega-shell,
  .global-search-portal.search-portal--mobile-full.is-open .global-search-mega-shell {
    left: 0;
    right: 0;
    transform: translateY(0) !important;
  }
}

#cartBtn {
  position: relative;
  width: 44px; height: 44px;
  background: var(--dark); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s, background .25s;
}
#cartBtn:hover { transform: scale(1.08); background: var(--red); }
#cartBadge {
  position: absolute; top: -5px; right: -5px;
  width: 18px; height: 18px;
  background: var(--red); border-radius: 50%;
  font-size: 9px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease);
}
#cartBadge.pulse,
#mobileCartFabBadge.pulse { animation: badgePulse .5s var(--ease); }
#cartBtn.cart-impact,
#mobileCartFab.cart-impact { animation: cartImpact .42s cubic-bezier(.22,1,.36,1); }
.wishlist-nav-btn { position: relative; }
#wishlistBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0 4px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
#wishlistBadge.is-hidden {
  opacity: 0;
  transform: scale(.7);
}
@keyframes badgePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  padding-top: 72px;
  isolation: isolate;
}

/* BG layers */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 84% 74% at 64% 48%, rgba(232,50,30,0.07) 0%, transparent 62%),
              radial-gradient(ellipse 56% 54% at 14% 86%, rgba(201,169,110,0.09) 0%, transparent 55%),
              linear-gradient(150deg, #fcfbfa 0%, #f2efeb 54%, #ece8e2 100%);
  will-change: transform;
  transition: transform .34s cubic-bezier(.22,1,.36,1);
}
.hero-blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(44px);
  pointer-events: none;
  opacity: .55;
}
.hero-blob.b1 {
  width: 260px; height: 220px;
  left: 11%; top: 22%;
  background: radial-gradient(circle, rgba(232,50,30,.18) 0%, rgba(232,50,30,0) 72%);
}
.hero-blob.b2 {
  width: 320px; height: 260px;
  right: 9%; bottom: 14%;
  background: radial-gradient(circle, rgba(201,169,110,.22) 0%, rgba(201,169,110,0) 74%);
}
.hero-grain {
  position: absolute; inset: -140px;
  z-index: 0; pointer-events: none;
  opacity: .055;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.65) 1px, transparent 0);
  background-size: 4px 4px;
}
.hero-glow1 {
  position: absolute; z-index: 0;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,50,30,0.08) 0%, transparent 70%);
  top: 10%; left: 35%;
  animation: floatGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-glow2 {
  position: absolute; z-index: 0;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,110,0.12) 0%, transparent 70%);
  bottom: 5%; left: 5%;
  animation: floatGlow 11s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
@keyframes floatGlow {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(30px,20px) scale(1.1); }
}

/* Big background text */
.hero-bg-word {
  position: absolute; z-index: 0;
  left: 50%; top: 51%; transform: translate(-50%, -50%);
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: clamp(170px, 27vw, 440px);
  letter-spacing: -10px; text-transform: uppercase;
  color: rgba(0,0,0,0.021);
  pointer-events: none; user-select: none;
  white-space: nowrap;
  animation: bgWordIn 1.8s var(--ease) both;
}
@keyframes bgWordIn {
  from { opacity: 0; transform: translateY(-50%) translateX(60px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* Energy arc SVG lines */
.hero-arcs {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  will-change: transform;
  transition: transform .34s cubic-bezier(.22,1,.36,1);
}
.hero-arcs svg { width: 100%; height: 100%; opacity: .2; }

/* floating particles */
.particles {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .65;
}
.particle {
  position: absolute; border-radius: 50%;
  background: rgba(232,50,30,0.5);
  animation: particleFly linear infinite;
}
@keyframes particleFly {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 0.6; }
  100% { transform: translateY(-120px) translateX(40px) scale(0.3); opacity: 0; }
}

/* HERO LAYOUT */
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; padding: 0 var(--page-pad);
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.16fr .98fr .76fr;
  align-items: center;
  gap: 22px;
  min-height: calc(100vh - 72px);
}

/* LEFT */
.hero-left { padding-right: 20px; min-width: 0; }
.hero-left,
.hero-right {
  will-change: transform;
  transition: transform .34s cubic-bezier(.22,1,.36,1);
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Syne', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--red);
  margin-bottom: 20px;
  opacity: 0; animation: fadeUp .8s .9s var(--ease) both;
}
.hero-eyebrow::before {
  content: ''; display: block;
  width: 32px; height: 2px; background: var(--red);
}
.hero-headline {
  font-family: 'Syne', sans-serif;
  font-weight: 800; line-height: .86;
  font-size: clamp(53px, 5.35vw, 84px);
  text-transform: uppercase; letter-spacing: -1.8px;
  margin-bottom: 16px;
  max-width: 640px;
  text-wrap: balance;
  overflow: visible;
}
.hero-headline .line {
  display: block; overflow: visible;
  margin: 0;
  padding-right: .42em;
  padding-bottom: 2px;
}
.hero-headline .word {
  display: inline-block;
  opacity: 0; transform: translateY(100%);
  animation: wordReveal .9s var(--ease) both;
  font-weight: 800;
  padding-right: .02em;
}
.hero-headline .word:nth-child(1) { animation-delay: 1.0s; }
.hero-headline .word:nth-child(2) { animation-delay: 1.15s; }
.hero-headline .word:nth-child(3) { animation-delay: 1.3s; }
.hero-headline .accent-red {
  color: #dc3522;
  text-shadow: 0 0 18px rgba(220,53,34,.12);
}
.hero-headline .line.forever .word { font-weight: 700; color: rgba(14,14,14,.84); }
.hero-headline .line.wins .word { font-weight: 760; color: rgba(14,14,14,.95); }

@keyframes wordReveal {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-sub {
  font-size: 14px; font-weight: 400; line-height: 1.55;
  color: #595959; max-width: 332px; margin-bottom: 24px;
  opacity: 0; animation: fadeUp .8s 1.45s var(--ease) both;
}
.hero-ctas {
  display: flex; align-items: center; gap: 18px;
  opacity: 0; animation: fadeUp .8s 1.6s var(--ease) both;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 30px;
  background: #121212; color: var(--white);
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase;
  border-radius: 999px;
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease), gap .3s, box-shadow .3s;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--red);
  transform: translateX(-101%);
  transition: transform .45s var(--transition);
  border-radius: inherit;
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.015);
  gap: 16px;
  box-shadow: 0 18px 40px rgba(18,18,18,.28);
}
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary span, .btn-primary svg { position: relative; z-index: 1; }

.btn-ghost {
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--mid);
  display: flex; align-items: center; gap: 8px;
  transition: color .3s, gap .3s;
}
.btn-ghost:hover { color: var(--dark); gap: 12px; }

/* CENTER — shoe */
.hero-center {
  display: flex; align-items: center; justify-content: center;
  position: relative; height: 100%;
  min-height: 600px;
  min-width: 0;
}
.shoe-stage {
  position: relative;
  width: 100%; max-width: 530px;
  display: flex; align-items: center; justify-content: center;
  left: 8px;
  will-change: transform;
}
.shoe-shadow {
  position: absolute;
  bottom: -14px; left: 50%; transform: translateX(-50%);
  width: 360px; height: 50px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.2) 0%, rgba(0,0,0,.07) 40%, transparent 72%);
  animation: shadowPulse 7.2s ease-in-out infinite;
  filter: blur(9px);
}
.shoe-stage::before {
  content: '';
  position: absolute;
  width: 440px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.74) 0%, rgba(232,50,30,.1) 28%, rgba(232,50,30,0) 73%);
  filter: blur(18px);
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@keyframes shadowPulse {
  0%, 100% { transform: translateX(-50%) translateY(0) scaleX(1); opacity: .7; filter: blur(10px); }
  50% { transform: translateX(-50%) translateY(2px) scaleX(.9); opacity: .5; filter: blur(11px); }
}
#heroShoe {
  width: 100%;
  max-width: 495px;
  filter: drop-shadow(0 34px 60px rgba(0,0,0,0.22)) drop-shadow(0 8px 24px rgba(232,50,30,0.16));
  opacity: 0;
  transform: scale(.82) translateY(30px) rotate(-5deg);
  transition: transform 1.4s var(--ease), opacity 1s var(--ease);
  pointer-events: none;
}
#heroShoe.visible {
  opacity: 1; transform: scale(1) translateY(0) rotate(0deg);
  animation: shoeFloat 7.2s ease-in-out infinite 1.1s;
}
#heroShoe.swap-out {
  animation: none;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
#heroShoe.swap-in {
  animation: none;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
#heroShoe.swap-out-left,
#heroShoe.swap-out-right,
#heroShoe.swap-in-left,
#heroShoe.swap-in-right {
  animation: none;
}
#heroShoe.swap-out-left {
  opacity: 0;
  transform: translate3d(-34px, 8px, 0) scale(.95) rotate(-1.2deg);
  transition: opacity .34s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.22,1,.36,1);
}
#heroShoe.swap-out-right {
  opacity: 0;
  transform: translate3d(34px, 8px, 0) scale(.95) rotate(1.2deg);
  transition: opacity .34s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.22,1,.36,1);
}
#heroShoe.swap-in-left {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  animation: heroSwapInLeft .78s cubic-bezier(.22,1,.36,1) both;
}
#heroShoe.swap-in-right {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  animation: heroSwapInRight .78s cubic-bezier(.22,1,.36,1) both;
}
@keyframes shoeFloat {
  0%, 100% { transform: translateY(0) rotate(.5deg); }
  50% { transform: translateY(-8px) rotate(-.75deg); }
}
@keyframes heroSwapInLeft {
  from { opacity: 0; transform: translate3d(-34px, 8px, 0) scale(.95) rotate(-1.2deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}
@keyframes heroSwapInRight {
  from { opacity: 0; transform: translate3d(34px, 8px, 0) scale(.95) rotate(1.2deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

/* Floating spec tags */
.spec-tag {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 100px; padding: 8px 14px;
  font-family: 'Syne', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dark);
  box-shadow: 0 8px 24px rgba(0,0,0,0.07);
  opacity: 0; animation: tagIn .7s var(--ease) both;
  transition: opacity .24s ease, transform .34s var(--ease);
}
.spec-tag::before {
  content: ''; width: 6px; height: 6px;
  background: var(--red); border-radius: 50%;
  flex-shrink: 0;
}
.spec-tag.t1 { top: 20%; left: -4%; animation-delay: 1.8s; }
.spec-tag.t2 { top: 51%; right: -6%; animation-delay: 2.0s; }
.spec-tag.t3 { bottom: 15%; left: 6%; animation-delay: 2.2s; }
@keyframes tagIn {
  from { opacity: 0; transform: translateY(12px) scale(.9); }
  to { opacity: 1; transform: none; }
}

/* RIGHT */
.hero-right {
  padding-left: 20px;
  opacity: 0; animation: fadeLeft .9s 1.7s var(--ease) both;
  max-width: 286px;
  border-left: 1px solid rgba(0,0,0,.06);
  min-width: 0;
}
.hero-right > * {
  transform: translateX(8px);
  opacity: 0;
  animation: rightItemIn .7s var(--ease) forwards;
  transition: opacity .24s ease, transform .34s var(--ease), filter .3s ease;
}
.hero-right > *:nth-child(1) { animation-delay: 1.86s; }
.hero-right > *:nth-child(2) { animation-delay: 1.95s; }
.hero-right > *:nth-child(3) { animation-delay: 2.04s; }
.hero-right > *:nth-child(4) { animation-delay: 2.12s; }
.hero-right > *:nth-child(5) { animation-delay: 2.2s; }
.hero-right > *:nth-child(6) { animation-delay: 2.28s; }
.hero-right > *:nth-child(7) { animation-delay: 2.36s; }
@keyframes rightItemIn {
  to { transform: translateX(0); opacity: 1; }
}
.hero-product-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: clamp(22px, 1.9vw, 28px);
  letter-spacing: -.45px; margin-bottom: 5px;
}
.hero-product-sub {
  font-size: 12px; font-weight: 500; color: #666;
  margin-bottom: 14px; letter-spacing: .95px;
  text-transform: uppercase;
}
.hero-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: 33px;
  letter-spacing: .25px;
  font-variant-numeric: tabular-nums;
  color: var(--dark); margin-bottom: 18px;
}
.hero-price small {
  font-size: 14px; font-weight: 500; color: var(--mid);
  margin-left: 4px;
}
.hero-detail-label {
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #737373;
  margin-bottom: 10px;
}
.hero-colors { display: flex; gap: 9px; margin-bottom: 18px; }
.color-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  transition: border-color .25s, transform .25s;
}
.color-dot:hover, .color-dot.active {
  border-color: var(--dark);
  transform: scale(1.11);
  box-shadow: 0 0 0 1px rgba(0,0,0,.24);
}

.hero-sizes { margin-bottom: 18px; }
.hero-sizes label {
  font-family: 'Syne', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: #737373;
  display: block; margin-bottom: 10px;
}
.sizes-row { display: flex; gap: 8px; flex-wrap: wrap; }
.size-pill {
  padding: 7px 12px;
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  transition: all .25s;
}
.size-pill:hover, .size-pill.active {
  background: var(--dark); color: var(--white);
  border-color: var(--dark); transform: translateY(-1px);
}
.size-pill.is-disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.hero-add-btn {
  width: 100%; padding: 15px;
  background: #141414; color: var(--white);
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s;
  position: relative; overflow: hidden;
}
.hero-add-btn:hover {
  transform: translateY(-2px) scale(1.012);
  box-shadow: 0 18px 38px rgba(20,20,20,0.3);
  background: var(--red);
}
.hero-add-btn:disabled {
  opacity: .45;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

#hero.is-slide-transition .hero-right > * {
  opacity: .42;
  transform: translateY(10px);
  filter: blur(.25px);
}

#hero.is-slide-transition .spec-tag {
  opacity: 0;
  transform: translateY(8px) scale(.985);
}

/* Hero slide selector */
.hero-slides-nav {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 10;
  display: flex; gap: 10px; align-items: center;
}
.h-dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(17,17,17,.26);
  cursor: pointer;
  transition: width .35s var(--ease), background .25s ease, opacity .25s ease;
}
.h-dot:hover { opacity: .9; }
.h-dot.active { width: 30px; border-radius: 999px; background: var(--red); }
.hero-slides-nav.is-hidden { display: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════
   MARQUEE
═══════════════════════════════════════════════ */
.marquee-band {
  overflow: hidden;
  background: var(--dark);
  padding: 16px 0;
  position: relative; z-index: 2;
}
.marquee-inner {
  display: flex; width: max-content;
  animation: marqueeScroll 28s linear infinite;
}
.marquee-inner span {
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 3.5px;
  text-transform: uppercase; color: rgba(255,255,255,.38);
  padding: 0 36px; white-space: nowrap;
}
.marquee-inner span.red { color: var(--red); }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════
   CATEGORIES
═══════════════════════════════════════════════ */
.categories-section {
  padding: 110px var(--page-pad);
  position: relative; z-index: 2;
  overflow: hidden;
}
.categories-section::before,
.categories-section::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.categories-section::before {
  left: -120px;
  top: 10%;
  background: radial-gradient(circle, rgba(232,50,30,.12) 0%, rgba(232,50,30,0) 70%);
}
.categories-section::after {
  right: -140px;
  bottom: 4%;
  background: radial-gradient(circle, rgba(201,169,110,.16) 0%, rgba(201,169,110,0) 70%);
  animation: catBgFloat 10s ease-in-out infinite alternate;
}
@keyframes catBgFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-18px); }
}
.section-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 56px;
  position: relative; z-index: 1;
}
.section-header,
.cat-grid,
.prod-slider-outer,
.story-inner,
.limited-inner,
.style-content,
.features-grid,
.stats-row,
.testimonials-track,
.footer-top {
  max-width: var(--content-max);
  margin-inline: auto;
}
.section-label {
  font-family: 'Syne', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--red);
  margin-bottom: 12px;
}
.section-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: clamp(30px,3.5vw,52px);
  text-transform: uppercase; letter-spacing: -1.2px; line-height: .96;
  margin-bottom: 10px;
}
.section-subtitle {
  font-size: 14px;
  color: #6a6a6a;
  line-height: 1.55;
  max-width: 420px;
}
.section-link {
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mid);
  display: flex; align-items: center; gap: 8px;
  transition: gap .3s, color .3s;
}
.section-link:hover { color: var(--dark); gap: 14px; }

.cat-grid {
  display: grid;
  grid-template-columns: 1.38fr 1fr 1fr;
  grid-template-rows: 210px 170px 170px;
  gap: 16px;
  position: relative; z-index: 1;
}
.cat-card {
  position: relative; border-radius: 30px;
  overflow: hidden; display: flex;
  align-items: flex-end; padding: 28px 26px;
  isolation: isolate;
  background: linear-gradient(145deg, #282828 0%, #1a1a1a 52%, #111 100%);
  box-shadow: 0 12px 34px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.1);
  --lift: 0px;
  --rx: 0deg;
  --ry: 0deg;
  --mx: 0;
  --my: 0;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition: transform .52s var(--ease), box-shadow .52s var(--ease);
  transform: perspective(1100px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
}
.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.09) -20%, rgba(255,255,255,0) 30%);
  opacity: .6;
  z-index: 1;
  pointer-events: none;
}
.cat-card::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 180px;
  right: -16px;
  top: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 72%);
  opacity: .5;
  z-index: 1;
  pointer-events: none;
}
.cat-card:hover {
  --lift: -10px;
  box-shadow: 0 24px 56px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.14);
}
.cat-card.featured {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}
.cat-card.medium-a {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}
.cat-card.medium-b {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.cat-card.small-a {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
.cat-card.small-b {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.cat-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.03);
  transition: transform .6s var(--ease), filter .6s var(--ease);
  z-index: 0;
}
.cat-card:hover .cat-card-bg {
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -8px), 0) scale(1.08);
  filter: saturate(1.08) contrast(1.05);
}
.cat-light {
  position: absolute;
  inset: -20% -35%;
  z-index: 2;
  background: linear-gradient(108deg, transparent 38%, rgba(255,255,255,.12) 49%, rgba(255,255,255,.02) 56%, transparent 66%);
  transform: translateX(-75%) rotate(6deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.cat-card:hover .cat-light {
  opacity: .8;
  animation: lightSweep 1.25s var(--ease) 1;
}
@keyframes lightSweep {
  from { transform: translateX(-75%) rotate(6deg); }
  to { transform: translateX(70%) rotate(6deg); }
}
.cat-card-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.18) 52%, rgba(0,0,0,.08) 100%),
    linear-gradient(140deg, rgba(232,50,30,.1) 0%, rgba(232,50,30,0) 55%);
  transition: opacity .5s, background .5s;
}
.cat-card:hover .cat-card-overlay {
  opacity: .96;
  background:
    linear-gradient(to top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.24) 54%, rgba(0,0,0,.1) 100%),
    linear-gradient(140deg, rgba(232,50,30,.14) 0%, rgba(232,50,30,0) 58%);
}
.cat-card-content {
  position: relative;
  z-index: 3;
  max-width: 240px;
  transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 6px), 64px);
  transition: transform .52s var(--ease);
}
.cat-card-sub {
  font-size: 10px; font-weight: 600; letter-spacing: 2.2px;
  text-transform: uppercase; color: rgba(255,255,255,.66);
  margin-bottom: 8px;
}
.cat-card-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: clamp(22px, 2.1vw, 34px); color: var(--white);
  letter-spacing: -.8px; margin-bottom: 12px; line-height: .96;
  transition: transform .45s var(--ease), color .45s;
}
.cat-card:hover .cat-card-name {
  transform: translateY(-3px) scale(1.02);
  color: #fff;
}
.cat-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  padding: 9px 18px; border-radius: 100px;
  font-family: 'Syne', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--white);
  transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 4px), 74px) translateY(12px);
  opacity: 0;
  transition: background .35s, gap .35s, opacity .45s, transform .45s;
}
.cat-card:hover .cat-cta {
  opacity: 1;
  transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 4px), 74px) translateY(0);
}
.cat-cta:hover { background: rgba(255,255,255,.25); gap: 12px; }

/* ═══════════════════════════════════════════════
   PRODUCTS / TRENDING
═══════════════════════════════════════════════ */
.products-section {
  padding: 18px var(--page-pad) 120px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.products-section::before,
.products-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  pointer-events: none;
  z-index: 0;
}
.products-section::before {
  width: 360px; height: 360px;
  left: -80px; top: 40px;
  background: radial-gradient(circle, rgba(232,50,30,.11) 0%, rgba(232,50,30,0) 72%);
}
.products-section::after {
  width: 300px; height: 300px;
  right: -90px; bottom: 24px;
  background: radial-gradient(circle, rgba(201,169,110,.15) 0%, rgba(201,169,110,0) 72%);
}
.products-section .section-header,
.products-section .prod-slider-outer,
.products-section .slider-controls { position: relative; z-index: 1; }
.drop-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #3b3b3b;
  margin-bottom: 12px;
}
.drop-kicker::after {
  content: '';
  width: 54px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--red), rgba(232,50,30,0));
  animation: dropLine 2.8s ease-in-out infinite;
}
@keyframes dropLine {
  0%, 100% { transform: scaleX(.75); opacity: .6; transform-origin: left; }
  50% { transform: scaleX(1); opacity: 1; transform-origin: left; }
}

.prod-slider-outer { overflow: hidden; position: relative; }
.prod-slider-track {
  display: flex; gap: 18px;
  transition: transform .75s var(--transition);
  padding-bottom: 12px;
}
.prod-card {
  flex: 0 0 calc(25% - 14px);
  background: linear-gradient(160deg, #ffffff 0%, #f8f6f3 100%);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  position: relative;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.prod-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 48px rgba(0,0,0,.2);
  border-color: rgba(0,0,0,.09);
}
.prod-card.featured .prod-img-area {
  aspect-ratio: 1.08;
}
.prod-img-area {
  position: relative; overflow: hidden;
  aspect-ratio: 1;
  background: radial-gradient(ellipse at 42% 36%, #f9f7f3 0%, #ece8e2 62%, #e4dfd8 100%);
}
.prod-img-area::before {
  content: '';
  position: absolute;
  width: 72%;
  height: 60%;
  left: 14%;
  top: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,50,30,.16) 0%, rgba(232,50,30,0) 72%);
  filter: blur(14px);
  pointer-events: none;
}
.prod-img-area::after {
  content: '';
  position: absolute;
  width: 58%;
  height: 18px;
  left: 21%;
  bottom: 12%;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(0,0,0,.28) 0%, rgba(0,0,0,.08) 55%, transparent 75%);
  filter: blur(7px);
  pointer-events: none;
  transition: transform .55s var(--ease), opacity .55s var(--ease);
}
.prod-img-area img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 12px 14px 22px;
  transform: translateY(-2px);
  transition: transform .55s var(--ease), filter .55s var(--ease);
  will-change: transform;
}
.prod-card:hover .prod-img-area img {
  transform: scale(1.08) rotate(-2.4deg) translateY(-3px);
}
.prod-card:hover .prod-img-area::after {
  transform: scale(1.08);
  opacity: .9;
}
.prod-card:hover .prod-img-area {
  background: radial-gradient(ellipse at 42% 36%, #f3f0eb 0%, #e7e2db 62%, #ddd8d0 100%);
}
.prod-badge {
  position: absolute; top: 14px; left: 14px;
  font-family: 'Syne', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(15,15,15,.88); color: var(--white);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  animation: badgeIn .6s var(--ease) both;
  z-index: 4;
}
@keyframes badgeIn {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.prod-badge.red { background: var(--red); }
.prod-badge.gold { background: var(--gold); color: var(--dark); }
.prod-wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.62);
  background: rgba(16,16,16,.5);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  backdrop-filter: blur(8px);
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.prod-wishlist-btn svg {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.9;
  transition: transform .22s var(--ease), fill .22s var(--ease);
}
.prod-wishlist-btn:hover {
  transform: translateY(-1px) scale(1.04);
  background: rgba(16,16,16,.75);
}
.prod-wishlist-btn.is-active {
  background: rgba(232,50,30,.95);
  border-color: rgba(232,50,30,.95);
}
.prod-wishlist-btn.is-active svg {
  fill: currentColor;
  transform: scale(1.05);
}
.prod-wishlist-btn.is-busy {
  pointer-events: none;
  opacity: .75;
}
.prod-quick-add {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--dark); color: var(--white);
  font-family: 'Syne', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  padding: 13px; text-align: center;
  transform: translateY(108%);
  opacity: 0;
  transition: transform .45s var(--ease), opacity .45s var(--ease), background .3s var(--ease);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  z-index: 5;
  pointer-events: auto;
}
.prod-card:hover .prod-quick-add {
  transform: translateY(0);
  opacity: 1;
}
.prod-quick-add svg {
  transition: transform .35s var(--ease);
}
.prod-card:hover .prod-quick-add svg {
  transform: rotate(12deg) scale(1.08);
}
.prod-quick-add:active {
  transform: translateY(0) scale(.98);
}
.prod-quick-add.clicked {
  animation: quickTap .28s var(--ease);
}
@keyframes quickTap {
  50% { transform: translateY(0) scale(.96); }
}
.prod-quick-add:hover { background: var(--red); }

.prod-body { padding: 16px 18px 18px; }
.prod-brand {
  font-family: 'Syne', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: #8a8a8a; margin-bottom: 4px;
}
.prod-name {
  font-size: 14px; font-weight: 600; color: #151515;
  line-height: 1.33; margin-bottom: 9px;
  min-height: 38px;
}
.prod-colors-row { display: flex; gap: 7px; margin-bottom: 12px; }
.prod-clr {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.1);
  transition: transform .25s, border-color .25s;
}
.prod-clr:hover {
  transform: scale(1.15);
  border-color: rgba(0,0,0,.35);
}
.prod-footer { display: flex; justify-content: space-between; align-items: center; }
.prod-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: 18px;
  letter-spacing: .18px;
  font-variant-numeric: tabular-nums;
  transition: transform .32s var(--ease), color .32s var(--ease);
}
.prod-card:hover .prod-price {
  transform: translateY(-1px);
  color: #0f0f0f;
}
.prod-stars { display: flex; gap: 2px; }
.star { font-size: 11px; color: #f5b942; transition: transform .24s, color .24s; }
.prod-card:hover .prod-stars .star { transform: translateY(-1px); }
.star.off { color: #e0dedd; }

.slider-controls {
  display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px;
}
.sl-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.sl-btn:hover { background: var(--dark); border-color: var(--dark); }
.sl-btn:hover svg path { stroke: var(--white); }

/* ═══════════════════════════════════════════════
   STORYTELLING "MOVE THE WORLD"
═══════════════════════════════════════════════ */
.story-section {
  background: var(--dark2);
  padding: 94px var(--page-pad);
  position: relative; overflow: hidden; z-index: 2;
}
.story-bg-word {
  position: absolute;
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: clamp(120px,16vw,260px);
  letter-spacing: -6px; text-transform: uppercase;
  color: rgba(255,255,255,0.025);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.story-glow {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,50,30,0.14) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
}
.story-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4.2vw, 62px); align-items: center;
}
.story-left { position: relative; }
.story-shoe-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.story-shoe-wrap img {
  width: 84%; max-width: 440px;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(232,50,30,.2));
  animation: shoeFloat 6s ease-in-out infinite;
}
.story-hotspot {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  transition: all .3s;
}
.story-hotspot::after {
  content: ''; position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  animation: hotspotPulse 2s ease-in-out infinite;
}
@keyframes hotspotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: .4; }
}
.story-hotspot:hover { background: rgba(232,50,30,.2); border-color: var(--red); }
.story-hotspot .hs-label {
  position: absolute; left: 120%; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 12px; border-radius: 8px; white-space: nowrap;
  font-size: 10px; font-weight: 500; color: rgba(255,255,255,.78);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.story-hotspot:hover .hs-label { opacity: 1; }
.hs1 { top: 20%; left: 12%; }
.hs2 { top: 55%; right: 8%; }
.hs3 { bottom: 22%; left: 28%; }

.story-right { color: var(--white); }
.story-eyebrow {
  font-family: 'Syne', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--red);
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.story-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--red); }
.story-heading {
  font-family: 'Syne', sans-serif;
  font-weight: 760; font-size: clamp(32px, 3.6vw, 54px);
  text-transform: uppercase; line-height: .9; letter-spacing: -1px;
  margin-bottom: 24px;
  word-break: break-word;
}
.story-heading em { color: var(--red); font-style: normal; }

.story-features {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 32px;
}
.story-feat {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  transition: background .3s, border-color .3s;
}
.story-feat:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(232,50,30,.3);
}
.story-feat-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(232,50,30,.15);
  display: flex; align-items: center; justify-content: center;
}
.story-feat-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 13px; margin-bottom: 3px;
}
.story-feat-desc { font-size: 12px; color: rgba(255,255,255,.56); line-height: 1.5; max-width: 44ch; }

/* ═══════════════════════════════════════════════
   LIMITED DROP
═══════════════════════════════════════════════ */
.limited-section {
  background: #0a0a0a;
  padding: 96px var(--page-pad);
  position: relative; overflow: hidden; z-index: 2;
}
.limited-glow {
  position: absolute; width: 700px; height: 500px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(232,50,30,0.18) 0%, transparent 65%);
  top: 50%; right: -100px; transform: translateY(-50%);
  pointer-events: none;
}
.limited-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 4.4vw, 64px); align-items: center;
}
.limited-shoe img {
  width: 88%;
  filter: drop-shadow(0 50px 100px rgba(232,50,30,0.4)) drop-shadow(0 20px 40px rgba(0,0,0,.8));
  animation: shoeFloat 5s ease-in-out infinite;
}
.limited-content { color: var(--white); max-width: 44ch; }
.limited-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(232,50,30,.15); border: 1px solid rgba(232,50,30,.3);
  padding: 8px 20px; border-radius: 100px;
  font-family: 'Syne', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--red);
  margin-bottom: 28px;
}
.limited-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  animation: hotspotPulse 1.5s infinite;
}
.limited-title {
  font-family: 'Syne', sans-serif;
  font-weight: 760; font-size: clamp(34px,4.1vw,58px);
  text-transform: uppercase; line-height: .9; letter-spacing: -1px;
  margin-bottom: 16px;
  word-break: break-word;
}
.limited-desc {
  font-size: 14px; color: rgba(255,255,255,.58);
  line-height: 1.6; max-width: 40ch; margin-bottom: 26px;
}
.countdown-row {
  display: flex; gap: 12px; margin-bottom: 28px;
}
.countdown-unit { text-align: center; }
.countdown-num {
  font-family: 'Syne', sans-serif;
  font-weight: 760; font-size: clamp(30px, 3vw, 40px); line-height: 1;
  color: var(--white);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 14px;
  display: block; min-width: 58px; text-align: center;
}
.countdown-label {
  font-size: 8px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  margin-top: 6px; display: block;
}
.stock-bar {
  margin-bottom: 24px;
}
.stock-label {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,.48); margin-bottom: 6px;
}
.stock-track {
  height: 3px; background: rgba(255,255,255,.08);
  border-radius: 2px; overflow: hidden;
}
.stock-fill {
  height: 100%; width: 72%; background: var(--red);
  border-radius: 2px; position: relative;
  animation: stockFill 2s var(--ease) both;
}
.limited-section .stock-fill.is-dynamic {
  animation: none;
}
.limited-no-countdown .countdown-row {
  display: none !important;
}
.limited-stock-count {
  color: var(--red);
  font-weight: 700;
}
.limited-drop-ended-msg {
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: -8px 0 14px;
}
.limited-drop-ended .countdown-row {
  opacity: 0.55;
}
.limited-cta-disabled {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
@keyframes stockFill {
  from { width: 0; }
  to { width: 72%; }
}

/* ═══════════════════════════════════════════════
   STYLE MATCHER
═══════════════════════════════════════════════ */
.style-section {
  padding: 88px var(--page-pad);
  position: relative;
  z-index: 2;
}
.style-shell {
  border-radius: 34px;
  border: 1px solid rgba(0,0,0,.07);
  background: linear-gradient(155deg, rgba(255,255,255,.94), rgba(246,243,239,.9));
  box-shadow: 0 22px 62px rgba(0,0,0,.1);
  padding: clamp(22px, 4vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
.style-intro-col {
  position: sticky;
  top: 92px;
}
.style-section .section-title {
  max-width: 12ch;
}
.style-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 18px;
}
.style-tags span {
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.8);
  color: #5a5a5a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 10px;
}
.style-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.style-tab {
  padding: 8px 15px;
  border-radius: 100px;
  border: 1px solid rgba(0,0,0,.1);
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mid);
  transition: all .26s;
}
.style-tab:hover, .style-tab.active {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
  transform: translateY(-2px);
}
.style-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 240px);
  gap: 14px;
  align-items: stretch;
}
.style-matcher-content {
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}
.style-matcher-content.style-matcher-is-switching {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.style-section-desc {
  margin-top: 10px;
  max-width: 42ch;
  font-size: 14px;
  color: #5a5a5a;
  line-height: 1.58;
}
.style-desc {
  font-size: 14px;
  color: #707070;
  line-height: 1.62;
  max-width: 44ch;
}
.style-cta {
  margin-top: 16px;
  display: inline-flex;
}
.style-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(180px, auto);
  gap: 12px;
}
.style-products .style-products-empty {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #888;
  padding: 12px 0;
}
.style-prod-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .35s var(--ease), box-shadow .35s;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}
.style-prod-card--hero {
  grid-column: 1 / -1;
  min-height: 240px;
}
@keyframes styleProdIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.style-prod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.style-prod-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 14px;
  background: #f0eeeb;
  transition: transform .5s var(--ease);
}
.style-prod-card--hero img {
  aspect-ratio: 1.45;
  padding: 18px 20px 8px;
}
.style-prod-card:hover img { transform: scale(1.08); }
.style-prod-info { padding: 14px 16px; }
.style-prod-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 3px;
}
.style-prod-name { font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.style-content h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 760;
  font-size: clamp(22px,2.1vw,32px);
  margin-bottom: 12px;
  letter-spacing: -.6px;
  line-height: 1.03;
}
.style-prod-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: 15px;
  letter-spacing: .14px;
  font-variant-numeric: tabular-nums;
}
.style-support-card {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(155deg, #181818 0%, #101010 100%);
  color: rgba(255,255,255,.86);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.style-support-kicker {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}
.style-support-card h4 {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  line-height: 1.05;
  margin-bottom: 2px;
}
.style-support-card p {
  color: rgba(255,255,255,.66);
  font-size: 13px;
  line-height: 1.5;
}
.style-support-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.style-support-metrics div {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding: 10px;
}
.style-support-metrics strong {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  margin-bottom: 2px;
}
.style-support-metrics span {
  font-size: 11px;
  color: rgba(255,255,255,.58);
}
@media (max-width: 1200px) {
  .style-shell {
    grid-template-columns: 1fr;
  }
  .style-intro-col {
    position: relative;
    top: 0;
  }
}
@media (max-width: 768px) {
  .style-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .style-shell {
    border-radius: 24px;
    padding: 18px 14px;
    gap: 16px;
  }
  .style-content {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .style-products {
    grid-template-columns: 1fr;
  }
  .style-prod-card--hero {
    min-height: 0;
  }
  .style-prod-card--hero img {
    aspect-ratio: 1.05;
  }
  .style-support-card {
    order: -1;
  }
}

/* ═══════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════ */
.testimonials-section {
  background: var(--dark); padding: 90px var(--page-pad);
  position: relative; overflow: hidden; z-index: 2;
}
.testimonials-section .section-label,
.testimonials-section .section-title { color: var(--white); }
.testimonials-section .section-label { color: var(--red); }

.stats-row {
  display: flex; gap: 36px; margin-bottom: 42px; flex-wrap: wrap;
}
.stat-item { text-align: left; }
.stat-num {
  font-family: 'Syne', sans-serif;
  font-weight: 760; font-size: clamp(34px,3.5vw,44px); line-height: 1;
  color: var(--white); letter-spacing: -1px;
}
.stat-label {
  font-size: 12px; color: rgba(255,255,255,.45);
  margin-top: 5px; letter-spacing: .4px;
}

.testimonials-track {
  display: flex; gap: 18px; overflow: hidden;
}
.testi-card {
  flex: 0 0 calc(33.33% - 12px);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px; padding: 24px;
  transition: background .3s, border-color .3s;
}
.testi-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(232,50,30,.25);
}
.testi-stars { display: flex; gap: 3px; margin-bottom: 18px; }
.testi-text {
  font-size: 14px; color: rgba(255,255,255,.72);
  line-height: 1.58; margin-bottom: 18px;
  font-style: italic;
  max-width: 34ch;
}
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #8b1a0c);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 16px; color: var(--white);
  flex-shrink: 0;
}
.testi-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 13px; color: var(--white);
}
.testi-role { font-size: 11px; color: rgba(255,255,255,.42); }

/* ═══════════════════════════════════════════════
   WHY CHOOSE US
═══════════════════════════════════════════════ */
.features-section { padding: 88px var(--page-pad); position: relative; z-index: 2; }
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 36px;
}
.feat-card {
  background: var(--white); border-radius: var(--r2);
  padding: 30px 24px;
  border: 1px solid rgba(0,0,0,.05);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
  position: relative; overflow: hidden;
}
.feat-card::before {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.feat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.feat-card:hover::before { transform: scaleX(1); }
.feat-icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(232,50,30,.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; transition: background .3s;
}
.feat-card:hover .feat-icon { background: rgba(232,50,30,.15); }
.feat-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 15px; margin-bottom: 7px;
}
.feat-desc { font-size: 12.5px; color: #707070; line-height: 1.58; max-width: 34ch; }

/* ═══════════════════════════════════════════════
   NEWSLETTER
═══════════════════════════════════════════════ */
.newsletter-section {
  margin: 0 56px 110px;
  background: var(--dark2);
  border-radius: 36px; padding: 80px 72px;
  position: relative; overflow: hidden; z-index: 2;
}
.nl-glow {
  position: absolute; width: 600px; height: 400px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(232,50,30,.12) 0%, transparent 70%);
  top: 50%; right: -80px; transform: translateY(-50%);
  pointer-events: none;
}
.nl-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.nl-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: clamp(34px, 3.5vw, 54px);
  text-transform: uppercase; line-height: .95; letter-spacing: -1.5px;
  color: var(--white); margin-bottom: 20px;
}
.nl-title em { color: var(--red); font-style: normal; }
.nl-desc { font-size: 14px; color: rgba(255,255,255,.4); line-height: 1.7; }
.nl-form { display: flex; gap: 10px; }
.nl-input {
  flex: 1; padding: 16px 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; outline: none;
  font: inherit; font-size: 14px; color: var(--white);
  transition: border-color .3s;
}
.nl-input::placeholder { color: rgba(255,255,255,.25); }
.nl-input:focus { border-color: rgba(232,50,30,.5); }
.nl-btn {
  padding: 16px 32px;
  background: var(--red); color: var(--white);
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  border-radius: 14px;
  transition: transform .3s var(--ease), box-shadow .3s;
  white-space: nowrap;
}
.nl-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(232,50,30,.4);
}
.nl-perks { display: flex; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.nl-perk {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.3);
}
.nl-perk::before {
  content: '✓'; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(127,255,212,.15); color: var(--accent);
  font-size: 10px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   BRAND STORY
═══════════════════════════════════════════════ */
.brand-section {
  padding: 88px var(--page-pad);
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 54px); align-items: center;
}
.brand-img-wrap {
  position: relative; border-radius: var(--r2); overflow: hidden;
  aspect-ratio: 4/3;
}
.brand-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.brand-img-wrap:hover img { transform: scale(1.05); }
.brand-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top right, rgba(232,50,30,.15), transparent);
}
.brand-quote {
  font-family: 'Syne', sans-serif;
  font-weight: 760; font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.06; letter-spacing: -.7px;
  margin-bottom: 16px;
}
.brand-quote em { color: var(--red); font-style: normal; }
.brand-para { font-size: 14px; color: #6f6f6f; line-height: 1.62; margin-bottom: 24px; max-width: 44ch; }

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
footer {
  background: #080808; color: rgba(255,255,255,.5);
  padding: 80px var(--page-pad) 40px;
  position: relative; z-index: 2;
}
footer::before {
  content: '';
  display: block; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,50,30,.4), transparent);
  margin-bottom: 80px;
}
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px;
  margin-bottom: 72px;
}
.footer-brand .nav-logo { color: var(--white); margin-bottom: 20px; }
.footer-brand .nav-logo-icon { background: var(--red); }
.footer-brand p {
  font-size: 13px; color: rgba(255,255,255,.3);
  line-height: 1.75; max-width: 260px; margin-bottom: 28px;
}
.footer-socials { display: flex; gap: 10px; }
.soc-btn {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4);
  transition: all .3s;
}
.soc-btn:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.footer-col h4 {
  font-family: 'Syne', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--white); margin-bottom: 22px;
}
.footer-col a {
  display: block; font-size: 13px; color: rgba(255,255,255,.35);
  margin-bottom: 12px; transition: color .3s, transform .3s;
}
.footer-col a:hover { color: var(--white); transform: translateX(4px); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px; border-top: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
}
.payment-icons { display: flex; gap: 8px; }
.pay-icon {
  background: rgba(255,255,255,.06); border-radius: 6px;
  padding: 5px 10px; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.4);
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════
   CART PANEL
═══════════════════════════════════════════════ */
#cartOverlay {
  position: fixed; inset: 0; z-index: 980;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background .2s ease;
}
#cartOverlay.open {
  background: rgba(0,0,0,0.45);
  pointer-events: all;
  backdrop-filter: blur(5px);
}
#cartPanel {
  position: fixed; top: 16px; right: 16px; bottom: 16px;
  width: 440px; z-index: 990;
  background: var(--white);
  border-radius: 28px;
  box-shadow: -20px 0 80px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  transform: translateX(calc(100% + 24px));
  transition: transform .3s ease;
  overflow: hidden;
}
#cartPanel.open { transform: translateX(0); }

.cart-header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.cart-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 20px; letter-spacing: -.5px;
}
.cart-count-chip {
  background: var(--red); color: var(--white);
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 100px;
}
.cart-close {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.cart-close:hover { background: var(--dark); border-color: var(--dark); }
.cart-close:hover svg path { stroke: var(--white); }

/* Cart featured shoe */
.cart-hero-product {
  margin: 20px 24px 16px;
  background: linear-gradient(135deg, #f2f1ef, #e8e5e1);
  border-radius: 20px; padding: 20px;
  display: flex; align-items: center; gap: 16px;
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.cart-hero-product::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(232,50,30,.05), transparent);
}
.cart-featured-img { width: 90px; height: 72px; object-fit: contain; }
.cart-hero-meta { flex: 1; }
.cart-hero-story {
  font-size: 11px; font-style: italic; color: var(--mid);
  line-height: 1.5;
}
.cart-hero-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 14px; margin-bottom: 4px;
}

/* Delivery progress */
.cart-progress {
  margin: 0 24px 16px;
  background: #f0eeeb; border-radius: 14px; padding: 14px 18px;
  flex-shrink: 0;
}
.cart-progress-text {
  font-size: 12px; color: var(--mid); margin-bottom: 10px;
}
.cart-progress-text strong { color: var(--dark); }
.cart-progress-bar {
  height: 4px; background: rgba(0,0,0,.08); border-radius: 2px; overflow: hidden;
}
.cart-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--red), #ff7043);
  border-radius: 2px; transition: width .6s var(--ease);
}

/* Cart items */
.cart-items {
  flex: 1; overflow-y: auto; padding: 0 24px;
}
.cart-items::-webkit-scrollbar { width: 3px; }
.cart-items::-webkit-scrollbar-track { background: transparent; }
.cart-items::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 2px; }

.cart-item {
  display: flex; gap: 16px; padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  animation: itemSlideIn .4s var(--ease) both;
  transition: opacity .3s, transform .3s, max-height .4s;
}
.cart-item.removing {
  opacity: 0; transform: translateX(16px); max-height: 0; padding: 0; margin: 0;
  overflow: hidden; border: none; pointer-events: none;
}
@keyframes itemSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

.cart-empty {
  text-align: center;
  padding: 52px 20px 40px;
  color: var(--light);
}
.cart-empty-icon {
  font-size: 36px;
  margin-bottom: 14px;
  color: rgba(0,0,0,.12);
  font-weight: 300;
}
.cart-empty-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 8px;
  color: var(--dark);
}
.cart-empty-sub { font-size: 13px; line-height: 1.5; }

/* Premium variant-aware cart lines */
.cart-line {
  position: relative;
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 18px;
  padding: 20px 18px;
  margin-bottom: 14px;
  background: linear-gradient(145deg, #fdfcfa 0%, #f5f3ef 100%);
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  animation: itemSlideIn .45s var(--ease) both;
  transition: opacity .35s, transform .35s, max-height .4s, margin .35s, box-shadow .3s;
}
.cart-line.is-loading {
  opacity: .68;
}
.cart-line.is-loading::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.12);
  border-top-color: var(--red);
  animation: cartSpin .6s linear infinite;
}
.cart-line.is-loading .js-cart-color-bulk,
.cart-line.is-loading .js-cart-size-bulk,
.cart-line.is-loading .js-cart-color-unit,
.cart-line.is-loading .js-cart-size-unit,
.cart-line.is-loading .js-cart-qty {
  pointer-events: none;
}
.cart-line:hover {
  box-shadow: 0 18px 48px rgba(0,0,0,.09);
}
.cart-line-media {
  align-self: start;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.9), #ebe8e4);
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.cart-line-img {
  width: 100%;
  max-height: 96px;
  object-fit: contain;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.cart-line-img.is-swap-out {
  opacity: 0;
  transform: translateY(10px) scale(.94);
}
.cart-line-img.is-swap-in {
  animation: cartImgSwap .42s var(--ease) forwards;
}
@keyframes cartImgSwap {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cartSpin {
  to { transform: rotate(360deg); }
}
.cart-line-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cart-line-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cart-line-brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light);
}
.cart-line-remove {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.32);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  transition: color .2s, border-color .2s, background .2s;
  flex-shrink: 0;
}
.cart-line-remove:hover { color: var(--red); border-color: rgba(232,50,30,.25); background: rgba(232,50,30,.04); }
.cart-line-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.2px;
  line-height: 1.25;
  color: var(--dark);
}
.cart-line-variant {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-line-variant.is-static { margin-top: 2px; }
.cart-line-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--mid);
  background: rgba(0,0,0,.04);
  padding: 8px 12px;
  border-radius: 10px;
}
.cart-line-field { display: flex; flex-direction: column; gap: 6px; }
.cart-line-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(0,0,0,.35);
}
.cart-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cart-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.12);
  background: var(--swatch, #ccc);
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s;
  padding: 0;
}
.cart-color-swatch:hover { transform: scale(1.08); }
.cart-color-swatch.is-active {
  box-shadow: 0 0 0 2px var(--dark), 0 6px 16px rgba(0,0,0,.18);
  transform: scale(1.06);
}
.cart-color-swatch.is-low {
  opacity: .42;
  cursor: not-allowed;
}
.cart-variant-select {
  width: 100%;
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.1);
  background: var(--white);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.cart-variant-select:focus {
  outline: none;
  border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.cart-line-stock-msg {
  font-size: 11px;
  line-height: 1.45;
  color: #b45309;
  background: rgba(245, 158, 11,.12);
  padding: 10px 12px;
  border-radius: 12px;
}
.cart-line-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.cart-line-price-block { display: flex; flex-direction: column; gap: 2px; }
.cart-line-line-total {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.cart-line-unit {
  font-size: 11px;
  color: var(--light);
  font-variant-numeric: tabular-nums;
}
.cart-qty-ctrl { flex-shrink: 0; }

.cart-line.is-units-expanded .cart-line-media {
  opacity: .88;
}
.cart-customize-row {
  margin: 4px 0 10px;
}
.cart-customize-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.75);
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dark);
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .2s var(--ease);
}
.cart-customize-toggle:hover {
  background: var(--white);
  border-color: rgba(0,0,0,.16);
  transform: translateY(-1px);
}
.cart-customize-hint {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mid);
}
.cart-customize-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mid);
  max-width: 42ch;
}
.cart-line-units {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 6px;
  padding-top: 4px;
  border-top: 1px dashed rgba(0,0,0,.08);
}
.cart-unit-card {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 18px;
  padding: 14px 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.cart-unit-card-head {
  margin-bottom: 12px;
}
.cart-unit-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.4);
}
.cart-unit-card-inner {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: start;
}
.cart-unit-media {
  border-radius: 14px;
  background: linear-gradient(160deg, #f3f1ee, #e5e1dc);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}
.cart-unit-img {
  width: 100%;
  max-height: 64px;
  object-fit: contain;
  transition: opacity .35s var(--ease), transform .4s var(--ease);
}
.cart-unit-fields {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-unit-stock-msg {
  font-size: 11px;
  color: #b45309;
}
.cart-line-unit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 2px 0 8px;
}
.cart-inline-btn {
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.86);
  color: var(--dark);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .2s var(--ease), background .2s, border-color .2s, opacity .2s;
}
.cart-inline-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.22);
}
.cart-inline-btn.primary {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}
.cart-inline-btn.primary:hover {
  background: var(--red);
  border-color: var(--red);
}
.cart-inline-btn:disabled {
  opacity: .45;
  pointer-events: none;
}

.cart-item-img {
  width: 80px; height: 64px; object-fit: contain;
  background: #f0eeeb; border-radius: 12px; padding: 8px;
  flex-shrink: 0;
}
.cart-item-info { flex: 1; }
.cart-item-brand {
  font-size: 10px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--light); margin-bottom: 3px;
}
.cart-item-name { font-size: 14px; font-weight: 500; margin-bottom: 5px; }
.cart-item-meta { font-size: 11px; color: var(--light); }
.cart-item-right {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
}
.cart-item-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: 16px;
  letter-spacing: .14px;
  font-variant-numeric: tabular-nums;
}
.qty-ctrl {
  display: flex; align-items: center; gap: 8px;
  background: #f0eeeb; border-radius: 10px; padding: 4px;
}
.qty-btn {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 400; color: var(--dark);
  transition: background .2s, color .2s;
}
.qty-btn:hover { background: var(--dark); color: var(--white); }
.qty-num { font-size: 13px; font-weight: 600; min-width: 20px; text-align: center; }
.cart-remove {
  font-size: 10px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(0,0,0,.25);
  transition: color .3s;
}
.cart-remove:hover { color: var(--red); }

/* Cart footer */
.cart-footer {
  padding: 20px 24px 28px;
  border-top: 1px solid rgba(0,0,0,.06);
  flex-shrink: 0;
}
.cart-totals { margin-bottom: 20px; }
.cart-total-row {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--mid); margin-bottom: 8px;
}
.cart-total-row.main {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 20px; color: var(--dark);
  padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 12px;
}
.cart-checkout-btn {
  width: 100%; padding: 17px;
  background: var(--dark); color: var(--white);
  font-family: 'Syne', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  border-radius: 16px; margin-bottom: 10px;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s;
}
.cart-checkout-btn:hover {
  transform: translateY(-3px); background: var(--red);
  box-shadow: 0 14px 36px rgba(232,50,30,.3);
}
a.cart-checkout-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
a.cart-checkout-btn.is-disabled {
  pointer-events: none;
  opacity: .45;
  transform: none;
  box-shadow: none;
}
.cart-trust {
  display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
}
.cart-trust-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--light);
}

/* Fly-to-cart animation */
.fly-clone {
  position: fixed;
  z-index: 1400;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  opacity: 1;
  will-change: transform, opacity;
  contain: layout style paint;
}
.fly-clone__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.24));
}
.fly-clone__trail {
  position: absolute;
  inset: 16% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,42,.26) 0%, rgba(255,140,42,0) 70%);
  filter: blur(8px);
  transform: scale(1.03);
  opacity: .3;
  pointer-events: none;
}
@keyframes cartImpact {
  0% { transform: scale(1); }
  46% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(50px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-left.visible { opacity: 1; transform: none; }
.reveal-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-right.visible { opacity: 1; transform: none; }

/* stagger children */
.stagger > * {
  opacity: 0; transform: translateY(30px) scale(.97);
  transition: opacity .72s var(--ease), transform .72s var(--ease);
}
.stagger.visible > *:nth-child(1) { opacity:1;transform:none;transition-delay:0s }
.stagger.visible > *:nth-child(2) { opacity:1;transform:none;transition-delay:.1s }
.stagger.visible > *:nth-child(3) { opacity:1;transform:none;transition-delay:.2s }
.stagger.visible > *:nth-child(4) { opacity:1;transform:none;transition-delay:.3s }
.stagger.visible > *:nth-child(5) { opacity:1;transform:none;transition-delay:.4s }
.stagger.visible > *:nth-child(6) { opacity:1;transform:none;transition-delay:.5s }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:1199px){
  .hero-inner {
    grid-template-columns: 1.18fr .82fr;
    gap: 18px;
  }
  .hero-left { padding-right: 18px; }
  .hero-headline {
    font-size: clamp(45px, 6.3vw, 72px);
    line-height: .88;
    max-width: none;
  }
  .hero-sub { max-width: 42ch; }
  .hero-right { display:none; }
  .shoe-stage { left: 0; }
  .shoe-stage { max-width: 480px; }
  #heroShoe { max-width: 462px; }
  .cat-grid {
    grid-template-columns:1fr 1fr;
    grid-template-rows:260px 220px 220px;
  }
  .cat-card.featured { grid-column:1 / 3; grid-row:1 / 2; }
  .cat-card.medium-a { grid-column:1 / 2; grid-row:2 / 3; }
  .cat-card.medium-b { grid-column:2 / 3; grid-row:2 / 3; }
  .cat-card.small-a { grid-column:1 / 2; grid-row:3 / 4; }
  .cat-card.small-b { grid-column:2 / 3; grid-row:3 / 4; }
  .prod-card { flex:0 0 calc(50% - 9px); }
  .story-inner,.limited-inner,.nl-inner,.brand-section { grid-template-columns:1fr; gap:38px; }
  .style-section,.testimonials-section,.features-section,.brand-section { padding-top: 74px; padding-bottom: 74px; }
  .style-content { gap: 28px; }
  .stats-row { gap: 26px; margin-bottom: 30px; }
  .testi-card { flex: 0 0 calc(50% - 10px); }
  .features-grid { grid-template-columns:1fr 1fr; gap:14px; margin-top: 28px; }
  .brand-quote { font-size: clamp(24px, 3.8vw, 32px); }
  .brand-para { max-width: 100%; }
  .story-shoe-wrap img,.limited-shoe img { max-width: 410px; margin-inline: auto; }
  .story-heading { font-size: clamp(30px, 4.1vw, 46px); }
  .limited-title { font-size: clamp(32px, 4.3vw, 50px); }
  .story-features { margin-bottom: 24px; }
  .limited-desc { margin-bottom: 22px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
  .features-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px){
  #nav { padding:0 var(--page-pad); }
  .nav-center { display:none; }
  .nav-search {
    display: none;
  }
  #nav.search-mobile-open .nav-search,
  .nav-search.mobile-open {
    display: flex;
    position: fixed;
    top: 68px;
    left: 12px;
    right: 12px;
    z-index: 900;
    width: auto;
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(255,255,255,.96);
    border-color: rgba(0,0,0,.1);
  }
  #nav.search-mobile-open .nav-search input,
  .nav-search.mobile-open input {
    width: 100%;
  }
  .nav-menu-btn { display:flex; }
  .nav-search-btn { display:flex; }
  #cartBtn,.nav-menu-btn,.hero-add-btn,.btn-primary,.btn-ghost,.size-pill,.style-tab,.sl-btn { min-height:44px; }
  .hero-inner { grid-template-columns:1fr; padding:0 var(--page-pad); }
  .hero-center { min-height:340px; }
  .hero-slides-nav {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    justify-content: center;
    margin: 12px auto 2px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  }
  .hero-bg-word { left: 54%; top: 48%; font-size: clamp(126px, 35vw, 180px); }
  .spec-tag { display: none; }
  .hero-sub { max-width: 100%; }
  .hero-headline {
    max-width: 100%;
    font-size: clamp(42px, 10.2vw, 64px);
    line-height: .9;
  }
  .cat-grid {
    grid-template-columns:1fr;
    grid-template-rows:none;
  }
  .cat-card.featured,
  .cat-card.medium-a,
  .cat-card.medium-b,
  .cat-card.small-a,
  .cat-card.small-b {
    grid-column:auto;
    grid-row:auto;
    min-height:220px;
  }
  .cat-card.featured { min-height:300px; }
  .cat-card-content { max-width:80%; }
  .style-section,.testimonials-section,.features-section,.brand-section { padding-top: 62px; padding-bottom: 62px; }
  .style-tabs { margin-bottom: 22px; gap: 6px; }
  .style-tab { padding: 8px 14px; font-size: 10px; letter-spacing: 1.4px; }
  .style-content h3 { font-size: clamp(20px, 6.6vw, 28px); margin-bottom: 10px; }
  .style-desc,.brand-para,.feat-desc,.testi-text { font-size: 13px; line-height: 1.5; }
  .stats-row { gap: 18px; margin-bottom: 24px; }
  .stat-num { font-size: 30px; }
  .testimonials-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .testi-card { flex: 0 0 86%; scroll-snap-align: start; padding: 18px; }
  .features-grid { grid-template-columns:1fr; gap:12px; margin-top: 20px; }
  .feat-card {
    width: min(100%, 460px);
    margin-inline: auto;
    padding: 22px 18px;
    border-radius: 22px;
  }
  .feat-icon { width: 40px; height: 40px; margin-bottom: 12px; }
  .feat-title { font-size: 14px; margin-bottom: 6px; }
  .brand-quote { font-size: clamp(22px, 7vw, 30px); margin-bottom: 10px; }
  .story-section { padding-top: 72px; padding-bottom: 72px; }
  .limited-section { padding-top: 74px; padding-bottom: 74px; }
  .story-heading { font-size: clamp(28px, 8vw, 38px); line-height: .92; margin-bottom: 16px; }
  .limited-title { font-size: clamp(28px, 8.6vw, 40px); line-height: .92; margin-bottom: 12px; }
  .story-eyebrow,.limited-badge { margin-bottom: 12px; }
  .story-features { gap: 10px; margin-bottom: 20px; }
  .story-feat { padding: 12px; }
  .story-feat-desc { font-size: 11.5px; max-width: 100%; }
  .limited-desc { font-size: 13px; line-height: 1.52; margin-bottom: 16px; }
  .countdown-row { gap: 8px; margin-bottom: 18px; }
  .countdown-num { font-size: 26px; min-width: 50px; padding: 9px 10px; }
  .countdown-label { font-size: 7px; letter-spacing: 1.6px; }
  .stock-bar { margin-bottom: 16px; }
  .story-hotspot { display:none; }
  .story-shoe-wrap img,.limited-shoe img { width: 82%; max-width: 320px; }
  .categories-section,.products-section,.story-section,.limited-section,
  .style-section,.testimonials-section,.features-section,.newsletter-section,
  .brand-section { padding-left:24px; padding-right:24px; }
  .newsletter-section { margin:0 24px 80px; padding:48px 32px; }
  .prod-card { flex:0 0 calc(100% - 0px); }
  .footer-top { grid-template-columns:1fr; }
  footer { padding:60px 24px 28px; }
  #cartPanel { right:0; top:0; bottom:0; border-radius:28px 0 0 28px; width:100%; max-width:440px; }
  .cart-line { grid-template-columns: 88px 1fr; gap: 14px; padding: 16px 14px; }
  .cart-line-bottom { flex-wrap: wrap; gap: 10px; }
  .features-grid { grid-template-columns:1fr; }
  .style-content { grid-template-columns:1fr; }
  .hero-arcs,.particles,.spec-tag,.cat-light { display:none !important; }
  .hero-bg-word { opacity:.6; }
}
@media (hover:none), (max-width:900px), (prefers-reduced-motion: reduce) {
  .cat-card {
    transform: none !important;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .cat-card:hover {
    --lift: -6px;
  }
  .cat-card-content,
  .cat-cta,
  .cat-card:hover .cat-card-bg {
    transform: none;
    animation: none;
  }
  .cat-light { display: none; }
  #cursor { display:none; }
  body, a, button { cursor:auto; }
  .prod-card:hover,.cat-card:hover,.btn-primary:hover,.hero-add-btn:hover { transform:none; }
  .prod-quick-add {
    transform: translateY(0);
    opacity: 1;
  }
}

/* AUTH PAGES */
.auth-page {
  min-height: 100vh;
  background: linear-gradient(145deg, #f8f7f4 0%, #f2efeb 55%, #ece8e2 100%);
  padding-top: 110px;
}
.auth-wrap {
  width: min(980px, calc(100% - 40px));
  margin: 0 auto 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.auth-side {
  border-radius: 28px;
  background: var(--dark);
  color: var(--white);
  padding: 42px 34px;
  position: relative;
  overflow: hidden;
}
.auth-side::before {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  right: -70px; bottom: -90px;
  background: radial-gradient(circle, rgba(232,50,30,.45) 0%, rgba(232,50,30,0) 70%);
}
.auth-side h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: .95;
  letter-spacing: -1px;
  margin-bottom: 14px;
}
.auth-side p {
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  max-width: 34ch;
}
.auth-card {
  background: rgba(255,255,255,.9);
  border-radius: 28px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 22px 70px rgba(0,0,0,.09);
  padding: 30px 28px;
}
.auth-label {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mid);
  margin: 0 0 8px;
}
.auth-input {
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  color: var(--dark);
  padding: 13px 14px;
  margin-bottom: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.auth-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232,50,30,.12);
}
.auth-submit {
  width: 100%;
  background: var(--dark);
  color: var(--white);
  border-radius: 14px;
  padding: 14px 18px;
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background .2s, transform .2s;
}
.auth-submit:hover { background: var(--red); transform: translateY(-1px); }
.auth-error {
  border: 1px solid rgba(232,50,30,.35);
  background: rgba(232,50,30,.08);
  color: #9f2b1e;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
.auth-hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--mid);
}
.auth-hint a { color: var(--dark); text-decoration: underline; }
@media (max-width: 900px) {
  .auth-wrap {
    grid-template-columns: 1fr;
  }
}

/* Catalog page */
.catalog-page {
  padding-top: 88px;
  min-height: 100vh;
}
.catalog-hero {
  position: relative;
  margin: 0 var(--page-pad);
  border-radius: 28px;
  background: linear-gradient(130deg, #131313 0%, #232323 55%, #2f2a26 100%);
  padding: clamp(28px, 4.2vw, 48px);
  color: var(--white);
  overflow: hidden;
}
.catalog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 200px at 20% 10%, rgba(232,50,30,.26), transparent 70%);
  pointer-events: none;
}
.catalog-hero-bg-word {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(84px, 12vw, 220px);
  letter-spacing: -4px;
  color: rgba(255,255,255,.04);
  user-select: none;
  pointer-events: none;
}
.catalog-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.catalog-breadcrumb {
  font-size: 12px;
  color: rgba(255,255,255,.66);
  margin-bottom: 14px;
  letter-spacing: .3px;
}
.catalog-breadcrumb a { color: rgba(255,255,255,.78); }
.catalog-hero h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(32px, 4.3vw, 56px);
  line-height: 1.02;
  margin-bottom: 12px;
  letter-spacing: -1.5px;
}
.catalog-hero p { color: rgba(255,255,255,.76); max-width: 620px; }
.catalog-shell {
  max-width: var(--content-max);
  margin: 30px auto 70px;
  padding: 0 var(--page-pad);
}
.catalog-filters {
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}
.search-page-filters {
  margin-bottom: 32px;
}
.search-page-filters .catalog-filter-row.top {
  align-items: center;
  gap: 14px;
}
.search-filter-label {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mid);
  margin-right: auto;
}
.search-sort-select {
  min-width: 200px;
}
.catalog-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.catalog-filter-row.top { margin-bottom: 12px; }
.catalog-pill {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  font-size: 12px;
  font-family: 'Syne', sans-serif;
  letter-spacing: .8px;
  transition: all .25s var(--ease);
  background: #fff;
}
.catalog-pill:hover { border-color: var(--red); color: var(--red); transform: translateY(-1px); }
.catalog-pill.active { background: var(--dark); color: var(--white); border-color: var(--dark); }
.catalog-results {
  margin-left: auto;
  font-size: 12px;
  color: var(--mid);
  font-weight: 500;
}
.catalog-filter-row select {
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  font: inherit;
  color: #222;
  background: #fff;
}
.catalog-check {
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.catalog-apply {
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--dark);
  color: var(--white);
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.catalog-apply:hover { transform: translateY(-2px); background: var(--red); }
.catalog-featured-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--red);
  background: linear-gradient(90deg, rgba(232,50,30,.08), rgba(232,50,30,0));
  border-radius: 10px;
  color: #3f3f3f;
  font-size: 14px;
}
.catalog-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.catalog-grid .prod-card { flex: initial; }
.catalog-old-price {
  margin-top: 2px;
  color: #8f8f8f;
  font-size: 12px;
  text-decoration: line-through;
}
.catalog-pagination {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.catalog-pagination a {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  transition: all .25s var(--ease);
}
.catalog-pagination a:hover { border-color: var(--red); color: var(--red); }
.catalog-pagination span { font-size: 12px; color: var(--mid); }
.catalog-empty {
  margin-top: 26px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 20px;
  text-align: center;
  padding: 48px 20px;
}
.catalog-empty h3 {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  margin-bottom: 8px;
}
.catalog-empty p { color: var(--mid); margin-bottom: 18px; }
.search-shell .search-tag {
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.1);
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #787571;
}
.search-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.search-chip {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(160deg, #fff 0%, #f6f3ef 100%);
  padding: 14px 16px;
  display: grid;
  gap: 4px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.search-chip strong {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
}
.search-chip span {
  font-size: 12px;
  color: #73706c;
}
.search-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(232,50,30,.35);
  box-shadow: 0 14px 26px rgba(0,0,0,.09);
}

.wishlist-page {
  padding: 92px 0 72px;
}
.wishlist-hero {
  position: relative;
  margin: 0 auto 24px;
  width: min(var(--content-max), calc(100% - 40px));
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(152deg, #171412 0%, #241f1a 48%, #151311 100%);
  color: #fff;
  box-shadow: 0 28px 60px rgba(0,0,0,.32);
}
.wishlist-hero-word {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(60px, 9vw, 132px);
  letter-spacing: -3px;
  color: rgba(255,255,255,.06);
  pointer-events: none;
}
.wishlist-hero-inner {
  position: relative;
  z-index: 1;
  padding: clamp(30px, 4vw, 46px);
  max-width: 760px;
}
.wishlist-hero .catalog-breadcrumb { color: rgba(255,255,255,.74); }
.wishlist-hero h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .92;
  margin-bottom: 10px;
}
.wishlist-hero p {
  color: rgba(255,255,255,.78);
  font-size: clamp(14px, 2vw, 18px);
}
.wishlist-meta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-size: 12px;
  letter-spacing: .4px;
}
.wishlist-shell {
  width: min(var(--content-max), calc(100% - 40px));
  margin: 0 auto;
}
.wishlist-grid .wishlist-card {
  animation: wishlistCardIn .45s var(--ease) both;
}
.wishlist-grid {
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.wishlist-grid.is-emptying {
  opacity: 0;
  transform: translateY(8px);
}
@keyframes wishlistCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.wishlist-card.is-removing {
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.wishlist-remove-btn {
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Syne', sans-serif;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.wishlist-remove-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(232,50,30,.06);
}
.wishlist-empty {
  margin-top: 10px;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(160deg, #fff 0%, #f6f3ef 100%);
  padding: clamp(28px, 4vw, 56px);
  text-align: center;
}
.wishlist-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 14px;
  border: 1px solid rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--red);
  background: rgba(255,255,255,.9);
}
.wishlist-empty h3 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 8px;
}
.wishlist-empty p {
  color: #5f5b57;
  margin: 0 auto 18px;
  max-width: 58ch;
}
.wishlist-empty.wishlist-empty-enter {
  opacity: 0;
  transform: translateY(10px) scale(.985);
}
.wishlist-empty.wishlist-empty-enter.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}

.wishlist-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  z-index: 1200;
  background: rgba(16,16,16,.94);
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: .2px;
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.wishlist-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1200px) {
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-results { width: 100%; margin-left: 0; margin-top: 4px; }
}
@media (max-width: 640px) {
  .catalog-hero { margin: 0 14px; border-radius: 20px; padding: 24px 18px; }
  .catalog-shell { padding: 0 14px; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-filter-row select, .catalog-check, .catalog-apply { width: 100%; }
  .wishlist-page { padding-top: 84px; }
  .wishlist-hero,
  .wishlist-shell { width: calc(100% - 28px); }
  .wishlist-hero { border-radius: 22px; margin-bottom: 16px; }
  .wishlist-hero-word { font-size: clamp(56px, 20vw, 88px); right: -6px; }
  .wishlist-hero-inner { padding: 24px 18px; }
  .wishlist-empty { border-radius: 20px; padding: 30px 18px; }
  .wishlist-remove-btn { min-height: 38px; }
}

/* ——— Checkout (premium) ——— */
.checkout-page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 88px 0 clamp(48px, 6vw, 100px);
}
.checkout-ambient {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(232, 50, 30, 0.09), transparent 55%),
    radial-gradient(700px 360px at 92% 18%, rgba(201, 169, 110, 0.07), transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  opacity: 0.95;
}
.checkout-inner {
  position: relative;
  z-index: 1;
  max-width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.checkout-breadcrumb {
  font-size: 12px;
  color: var(--mid);
  margin-bottom: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.checkout-breadcrumb a {
  color: var(--mid);
  transition: color 0.25s;
}
.checkout-breadcrumb a:hover { color: var(--red); }
.checkout-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4.5vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 12px;
}
.checkout-lead {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--mid);
  max-width: 52ch;
  line-height: 1.55;
}
.checkout-head { margin-bottom: clamp(28px, 4vw, 40px); }

.checkout-errors {
  background: rgba(232, 50, 30, 0.09);
  border: 1px solid rgba(232, 50, 30, 0.28);
  color: #6a1c12;
  padding: 16px 20px;
  border-radius: 18px;
  margin-bottom: 28px;
  font-size: 14px;
}
.checkout-errors ul { margin: 0; padding-left: 1.15rem; }

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.checkout-form-panel {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(252, 251, 249, 0.98) 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 28px;
  padding: clamp(26px, 3.5vw, 38px);
  box-shadow: var(--shadow-sm), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.checkout-section-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark2);
  margin-bottom: 8px;
}
.checkout-section-sub {
  font-size: 14px;
  color: var(--mid);
  margin-bottom: 26px;
  line-height: 1.5;
}
.checkout-section-title.co-spaced { margin-top: 32px; }

.co-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.co-field { display: flex; flex-direction: column; gap: 8px; }
.co-field-full { grid-column: 1 / -1; }
.co-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
}
.co-optional {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--light);
}
.co-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--white);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  color: var(--dark);
  transition: border-color 0.25s, box-shadow 0.3s var(--ease), transform 0.2s;
}
.co-input::placeholder { color: var(--light); }
.co-input:hover { border-color: rgba(0, 0, 0, 0.15); }
.co-input:focus {
  outline: none;
  border-color: var(--dark);
  box-shadow: 0 0 0 4px rgba(12, 12, 12, 0.06);
}
.co-textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.45;
}
.co-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.co-trust-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 8px;
}
.co-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 10px 14px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.co-trust-icon {
  font-size: 10px;
  opacity: 0.45;
  color: var(--red);
}

.co-submit {
  margin-top: 28px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 24px;
  border-radius: 18px;
  background: var(--dark);
  color: var(--white);
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s;
  box-shadow: 0 16px 42px rgba(12, 12, 12, 0.18);
}
.co-submit:hover {
  background: var(--red);
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(232, 50, 30, 0.32);
}
.co-submit:active {
  transform: translateY(-1px);
}
.co-submit svg {
  transition: transform 0.35s var(--ease);
}
.co-submit:hover svg {
  transform: translateX(4px);
}

.checkout-summary-wrap {
  position: relative;
}
.checkout-summary {
  position: sticky;
  top: 92px;
  background: linear-gradient(155deg, #1b1b1b 0%, #121212 48%, #1a1614 100%);
  color: var(--white);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.checkout-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.checkout-summary .checkout-section-title {
  color: rgba(255, 255, 255, 0.96);
  margin-bottom: 0;
}
.checkout-summary-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.checkout-lines {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 22px;
  max-height: min(420px, 52vh);
  overflow-y: auto;
  padding-right: 4px;
}
.checkout-lines::-webkit-scrollbar {
  width: 4px;
}
.checkout-lines::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
.checkout-line {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.25s;
  border-radius: 16px;
  margin: 0 -8px;
  padding: 12px 8px 16px;
}
.checkout-line:last-child {
  border-bottom: none;
  padding-bottom: 12px;
}
.checkout-line:hover {
  background: rgba(255, 255, 255, 0.03);
}
.checkout-line-media {
  border-radius: 16px;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
}
.checkout-line-media img {
  width: 100%;
  height: auto;
  max-height: 76px;
  object-fit: contain;
}

.checkout-line-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.checkout-line-variant {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.checkout-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.checkout-line-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.checkout-line-prices {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.checkout-line-unit {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
}
.checkout-line-sub {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.checkout-totals {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.checkout-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 12px;
}
.checkout-total-row .tabular {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}
.checkout-total-main {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
}
.checkout-total-main .tabular {
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.02em;
  font-weight: 800;
}

.checkout-trust-stack {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.co-trust-line {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
}
.co-trust-line:last-child {
  margin-bottom: 0;
}
.co-trust-line strong {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.co-reveal {
  animation: coReveal 0.7s var(--ease) both;
}
@keyframes coReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.checkout-form-panel.co-reveal { animation-delay: 0.05s; }
.checkout-summary-wrap.co-reveal { animation-delay: 0.12s; }

@media (max-width: 960px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  .checkout-summary {
    position: relative;
    top: 0;
  }
}
@media (max-width: 640px) {
  .co-field-grid {
    grid-template-columns: 1fr;
  }
  .checkout-line {
    grid-template-columns: 72px 1fr;
    gap: 12px;
  }
  .checkout-page {
    padding-top: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .co-reveal {
    animation: none;
  }
  .co-submit:hover {
    transform: none;
  }
}

/* Product details page */
.prod-link-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.prod-name-link { color: inherit; text-decoration: none; }

.product-page {
  padding-top: 92px;
}
.pd-hero {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px var(--page-pad) 36px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(20px, 3vw, 42px);
  align-items: center;
}
.pd-gallery {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 28px;
  background: linear-gradient(155deg, #fcfbf9 0%, #f0ede8 100%);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.pd-main-stage {
  position: relative;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 34%, rgba(232,50,30,.08), transparent 62%);
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pd-main-glow {
  position: absolute;
  width: 70%;
  height: 44%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.2) 0%, rgba(0,0,0,.07) 50%, transparent 70%);
  bottom: 11%;
  left: 15%;
  filter: blur(9px);
}
.pd-main-image {
  position: relative;
  z-index: 1;
  width: min(92%, 640px);
  object-fit: contain;
  filter: drop-shadow(0 26px 56px rgba(0,0,0,.25)) drop-shadow(0 0 52px rgba(232,50,30,.18));
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.pd-main-image.swap-out { opacity: 0; transform: translateY(12px) scale(.96); }
.pd-main-image.swap-in { opacity: 1; transform: translateY(0) scale(1); }
.pd-thumbs {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pd-thumb {
  width: 72px;
  height: 56px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  background: #fff;
  padding: 4px;
  transition: border-color .25s, transform .25s;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumb:hover, .pd-thumb.active { border-color: var(--red); transform: translateY(-2px); }

.pd-info h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(34px, 4vw, 54px);
  line-height: .95;
  letter-spacing: -1.8px;
  margin-bottom: 8px;
}
.pd-badge {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(12,12,12,.9);
  color: #fff;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-family: 'Syne', sans-serif;
  padding: 6px 11px;
  margin-bottom: 10px;
}
.pd-tag { color: #5a5754; margin-bottom: 10px; }
.pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.pd-price {
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
}
.pd-old-price {
  color: #8b8782;
  text-decoration: line-through;
  font-size: 15px;
}
.pd-desc {
  color: #54514d;
  line-height: 1.65;
  margin-bottom: 16px;
}
.pd-control { margin-bottom: 12px; }
.pd-label {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #787572;
  margin-bottom: 8px;
}
.pd-colors, .pd-sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-stock { font-size: 13px; color: #696663; margin: 8px 0 14px; }
.pd-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.pd-actions .hero-add-btn {
  width: auto;
  min-width: 190px;
  padding-inline: 22px;
}
.pd-wishlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pd-wishlist-btn svg {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.9;
}
.pd-wishlist-btn.is-active {
  border-color: var(--red);
  color: var(--red);
  background: rgba(232,50,30,.06);
}
.pd-wishlist-btn.is-active svg {
  fill: currentColor;
}
.pd-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: #7a7773;
}

.pd-story {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px var(--page-pad);
}
.pd-story h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  margin-bottom: 8px;
}
.pd-story p { max-width: 75ch; color: #55524f; line-height: 1.8; }

.pd-wow-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 4px var(--page-pad) 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.pd-wow-card {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pd-wow-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pd-wow-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  margin-bottom: 7px;
}
.pd-wow-card p { color: #5e5b58; font-size: 14px; line-height: 1.6; }

.pd-related {
  max-width: var(--content-max);
  margin: 0 auto 60px;
  padding: 10px var(--page-pad) 0;
}

@media (max-width: 1100px) {
  .pd-hero { grid-template-columns: 1fr; }
  .pd-wow-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .pd-hero { padding-inline: 14px; }
  .pd-story, .pd-wow-grid, .pd-related { padding-inline: 14px; }
  .pd-main-stage { min-height: 300px; }
  .pd-wow-grid { grid-template-columns: 1fr; }
  .pd-actions { flex-direction: column; align-items: stretch; }
}

/* Final responsive safety for dynamic homepage content */
.hero-inner > *,
.story-inner > *,
.limited-inner > *,
.style-content > * {
  min-width: 0;
}

.story-heading,
.limited-title,
.limited-desc,
.style-section-desc,
.style-content h3,
.style-desc,
#styleSectionLabel,
#styleSectionTitle,
#styleSectionDesc,
#styleIntroTitle,
#styleDesc {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#styleCtaText {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
}

.style-tab {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.limited-content,
.style-intro-col {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 768px) {
  .style-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .style-tabs::-webkit-scrollbar {
    display: none;
  }

  .style-tab {
    flex: 0 0 auto;
    max-width: calc(100vw - 44px);
  }

  .style-intro-col .btn-primary {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  .countdown-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .countdown-unit {
    flex: 1 1 30%;
  }

  .limited-content {
    max-width: 100%;
  }
}

/* Mobile hardening: overflow, spacing, touch and layout stability */
@media (max-width: 768px) {
  :root {
    --page-pad: 12px;
  }

  /* iOS Safari: inputs < 16px trigger auto-zoom on focus */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
  }

  body {
    overflow-x: clip;
  }

  #nav {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 62px;
    padding: 0 var(--page-pad);
    border-radius: 0;
    z-index: 840;
    background: rgba(245,241,236,.96);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  .mobile-secondary-action {
    display: none !important;
  }

  .nav-search,
  .nav-search-btn,
  #nav.search-mobile-open .nav-search,
  .nav-search.mobile-open {
    display: none !important;
  }

  .nav-logo {
    font-size: 18px;
    letter-spacing: 1.6px;
    gap: 8px;
    max-width: calc(100% - 126px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .nav-logo-icon {
    width: 26px;
    height: 26px;
  }

  .nav-right {
    gap: 8px;
  }

  #cartBtn,
  .nav-menu-btn,
  .user-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  #cartBtn {
    overflow: hidden;
  }

  #cartBadge {
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    font-size: 8px;
  }
  #wishlistBadge {
    top: 1px;
    right: 1px;
    min-width: 14px;
    height: 14px;
    font-size: 8px;
    padding: 0 3px;
  }

  .mobile-search-rail-wrapper {
    display: block;
    position: sticky;
    top: 0;
    z-index: 760;
    margin-top: 0;
    padding: calc(62px + 10px) var(--page-pad) 10px;
    background: linear-gradient(180deg, rgba(245,241,236,.97) 0%, rgba(245,241,236,.9) 66%, rgba(245,241,236,0) 100%);
    backdrop-filter: saturate(115%) blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
    transition: padding .22s ease, background .22s ease, backdrop-filter .22s ease, opacity .2s ease, transform .22s ease;
  }

  .mobile-search-rail {
    width: min(90%, 560px);
    min-height: 46px;
    margin: 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.1);
    background: rgba(255,255,255,.95);
    box-shadow: 0 12px 30px rgba(0,0,0,.12), 0 2px 0 rgba(255,255,255,.5) inset;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5a5a5a;
    text-align: left;
    cursor: text;
    transition: transform .22s ease, min-height .22s ease, box-shadow .22s ease, background .22s ease;
  }

  .mobile-search-rail svg {
    color: #7a746f;
    flex: 0 0 auto;
  }

  .mobile-search-rail input {
    width: 100%;
    min-height: 30px;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #232323;
    letter-spacing: .2px;
  }

  .mobile-search-rail input::placeholder {
    color: #7b7671;
  }

  #nav.scrolled + .mobile-search-rail-wrapper {
    padding-top: calc(62px + 6px);
    padding-bottom: 8px;
    backdrop-filter: saturate(108%) blur(6px);
  }

  #nav.scrolled + .mobile-search-rail-wrapper .mobile-search-rail {
    min-height: 40px;
    transform: translateY(-1px) scale(.985);
    box-shadow: 0 8px 20px rgba(0,0,0,.11), 0 1px 0 rgba(255,255,255,.46) inset;
    background: rgba(255,255,255,.97);
  }

  body.mobile-menu-open .mobile-search-rail-wrapper {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
  }

  .mobile-menu-backdrop {
    top: 62px;
    z-index: 820;
  }

  .mobile-menu {
    top: 62px;
    width: min(90vw, 390px);
    max-width: 390px;
    z-index: 830;
    padding: 12px 12px 22px;
    border-left: none;
    border-radius: 18px 0 0 18px;
  }

  .hero-inner,
  .section-header,
  .cat-grid,
  .prod-slider-outer,
  .story-inner,
  .limited-inner,
  .style-content,
  .features-grid,
  .footer-top {
    width: 100%;
    max-width: none;
  }

  .mobile-menu__item {
    min-height: 46px;
    border-radius: 12px;
    padding: 10px 10px;
  }

  .mobile-menu__top-title {
    font-size: 11px;
    letter-spacing: 1.8px;
  }

  .mobile-menu__close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .mobile-menu__account-hero {
    border-radius: 14px;
    padding: 10px;
  }

  .mobile-menu__avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 13px;
  }

  .mobile-menu__account-title {
    font-size: 11px;
  }

  .mobile-menu__account-sub {
    font-size: 10px;
  }

  .mobile-menu__item-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  .mobile-menu__item-label {
    font-size: 10px;
    letter-spacing: 1.35px;
  }

  .mobile-menu__label {
    font-size: 10px;
    letter-spacing: 1.6px;
  }

  .mobile-menu__action-btn {
    min-height: 42px;
    border-radius: 12px;
  }

  .hero {
    overflow: clip;
    min-height: auto;
    display: block;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  }

  .hero-grain,
  .hero-glow1,
  .hero-glow2,
  .hero-blob,
  .hero-bg-word {
    display: none !important;
  }

  .hero-inner {
    min-height: auto;
    gap: 18px;
    padding: 24px var(--page-pad) 28px;
  }

  .hero-left,
  .hero-center,
  .hero-right {
    width: 100%;
    max-width: 100%;
  }

  .hero-left {
    order: 1;
    padding-right: 0;
  }

  .hero-center {
    order: 2;
    min-height: clamp(230px, 43vh, 340px);
    align-items: flex-start;
  }

  .hero-right {
    order: 3;
    display: block !important;
    max-width: 100%;
    padding: 0;
    border-left: none;
    animation: none;
    opacity: 1;
    margin-top: 2px;
  }

  .hero-slides-nav {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    z-index: 4;
    width: fit-content;
    justify-content: center;
    margin: 14px auto 12px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  }

  .hero-right > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .btn-primary,
  .btn-ghost,
  .hero-add-btn {
    width: 100%;
    justify-content: center;
  }

  .shoe-stage {
    max-width: 100%;
  }

  #heroShoe {
    max-width: min(100%, 480px);
  }

  .categories-section::before,
  .categories-section::after,
  .products-section::before,
  .products-section::after {
    display: none;
  }

  .cat-card {
    min-height: 210px;
    padding: 18px 14px;
  }

  .cat-card.featured {
    min-height: 240px;
  }

  .cat-card-content {
    max-width: 76%;
  }

  .style-products {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .categories-section,
  .products-section,
  .story-section,
  .limited-section,
  .style-section,
  .features-section,
  .brand-section,
  .newsletter-section,
  footer {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }

  .categories-section,
  .products-section,
  .story-section,
  .limited-section,
  .style-section,
  .features-section,
  .brand-section {
    overflow-x: clip;
  }

  .cart-line-unit-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .cart-line-unit-actions .cart-inline-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .pd-actions .hero-add-btn {
    min-width: 0;
    width: 100%;
  }

  #cartPanel {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    transform: translateX(100%);
  }
}

@media (max-width: 480px) {
  :root {
    --page-pad: 10px;
  }

  .section-header {
    margin-bottom: 30px;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  .products-section .section-header .slider-controls {
    width: 100%;
    justify-content: flex-start;
    margin-top: 4px;
  }

  .section-title {
    line-height: 1;
    letter-spacing: -0.6px;
  }

  .hero-headline {
    font-size: clamp(38px, 11vw, 52px);
    margin-bottom: 12px;
  }

  .hero-sub,
  .section-subtitle,
  .limited-desc,
  .style-desc,
  .brand-para,
  .testi-text {
    font-size: 13px;
    line-height: 1.5;
  }

  .categories-section,
  .products-section,
  .story-section,
  .limited-section,
  .style-section,
  .testimonials-section,
  .features-section,
  .newsletter-section,
  .brand-section {
    padding-top: 52px;
    padding-bottom: 52px;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }

  .newsletter-section {
    margin: 0 var(--page-pad) 60px;
    padding: 30px 14px;
    border-radius: 24px;
  }

  .feat-card {
    width: min(100%, 420px);
  }

  .nl-glow {
    display: none;
  }

  .nl-inner {
    gap: 20px;
  }

  .nl-form {
    flex-direction: column;
    gap: 10px;
  }

  .nl-input,
  .nl-btn {
    width: 100%;
  }

  .nl-btn {
    padding: 14px 16px;
    letter-spacing: 1.6px;
  }

  .prod-body {
    padding: 12px;
  }

  .prod-name {
    min-height: 0;
  }

  .prod-quick-add {
    transform: translateY(0);
    opacity: 1;
    font-size: 10px;
    letter-spacing: 1.2px;
    padding: 12px 10px;
  }

  .countdown-num {
    min-width: 44px;
    font-size: 22px;
    padding: 8px;
  }

  .co-field-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .checkout-form-panel,
  .checkout-summary {
    border-radius: 18px;
    padding: 18px 14px;
  }

  .auth-wrap {
    width: min(100%, calc(100% - 24px));
    gap: 16px;
  }
}

@media (max-width: 360px) {
  .newsletter-section {
    margin-bottom: 44px;
    padding: 26px 14px;
  }

  .nl-title {
    font-size: clamp(30px, 10vw, 40px);
  }

  .prod-slider-track {
    gap: 12px;
  }

  .prod-card {
    border-radius: 18px;
  }
}

/* Checkout refresh */
.checkout-steps {
  display: inline-flex;
  gap: 6px;
  padding: 7px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.76);
  margin-bottom: 16px;
}
.checkout-step {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--light);
  border-radius: 999px;
  padding: 7px 11px;
}
.checkout-step.is-done {
  color: #0f8451;
  background: rgba(15,132,81,.1);
}
.checkout-step.is-active {
  color: var(--dark);
  background: rgba(0,0,0,.06);
}
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.checkout-section-block {
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
  padding: 20px;
}
.checkout-section-block .checkout-section-sub {
  margin-bottom: 18px;
}
.checkout-confirm-block {
  background: linear-gradient(165deg, rgba(18,18,18,.98), rgba(28,26,25,.95));
  border-color: rgba(255,255,255,.08);
}
.checkout-confirm-block .checkout-section-title { color: rgba(255,255,255,.92); }
.checkout-confirm-block .checkout-section-sub { color: rgba(255,255,255,.66); }
.checkout-confirm-block .co-trust-pill {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
}
.checkout-confirm-block .co-trust-icon { color: #ff8d79; opacity: .9; }
.co-pay-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.co-pay-grid--single .co-pay-option {
  max-width: 100%;
}
.co-pay-option {
  border-radius: 16px;
  border: 1px solid rgba(232,50,30,.28);
  background: rgba(255,255,255,.95);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.co-pay-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(232,50,30,.1);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.co-pay-copy { display: flex; flex-direction: column; gap: 4px; }
.co-pay-title { font-size: 13px; font-weight: 700; color: var(--dark); }
.co-pay-desc { font-size: 12px; color: var(--mid); line-height: 1.45; }
.co-submit-loader {
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.co-submit.is-loading {
  pointer-events: none;
  opacity: .92;
}
.co-submit.is-loading .co-submit-loader {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: cartSpin .7s linear infinite;
  opacity: 1;
}
.co-submit.is-loading svg { display: none; }

/* Order success premium */
.order-success-page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 88px 0 76px;
}
.order-success-inner {
  max-width: min(1160px, 100%);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  position: relative;
  z-index: 1;
}
.order-success-hero {
  text-align: center;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 30px;
  padding: clamp(26px, 4vw, 46px) clamp(20px, 4vw, 42px);
  background: linear-gradient(165deg, rgba(255,255,255,.9), rgba(250,248,245,.9));
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.order-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f9e5a, #37c46f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(55,196,110,.35);
}
.order-success-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--red);
  margin-bottom: 8px;
  font-weight: 700;
}
.order-success-hero h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: .96;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.order-success-sub {
  color: var(--mid);
  max-width: 58ch;
  margin: 0 auto 20px;
  line-height: 1.56;
}
.order-success-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.order-success-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  margin-bottom: 18px;
}
.order-success-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(255,255,255,.93), rgba(250,248,245,.9));
  padding: clamp(18px, 2.6vw, 28px);
  box-shadow: var(--shadow-sm);
}
.order-success-meta { display: grid; gap: 10px; }
.order-success-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: var(--mid);
}
.order-success-row strong { color: var(--dark); font-weight: 700; }
.order-next-list {
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--mid);
  font-size: 14px;
  line-height: 1.5;
}
.order-next-list li {
  position: relative;
  padding-left: 16px;
}
.order-next-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--red);
}
.order-success-items-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.order-success-items-head span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--light);
  font-weight: 700;
}
.order-items-list {
  list-style: none;
  display: grid;
  gap: 10px;
}
.order-item-line {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: #fff;
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
}
.order-item-media {
  background: radial-gradient(circle at 30% 20%, rgba(0,0,0,.06), transparent 65%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}
.order-item-media img {
  max-height: 54px;
  object-fit: contain;
}
.order-item-fallback {
  font-size: 22px;
  color: rgba(0,0,0,.3);
}
.order-item-name {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.order-item-meta {
  font-size: 12px;
  color: var(--mid);
}
.order-item-price {
  font-weight: 700;
  font-size: 14px;
  color: var(--dark);
}

@media (max-width: 960px) {
  .checkout-steps { width: 100%; justify-content: space-between; }
  .checkout-step { flex: 1; text-align: center; }
  .order-success-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .order-success-page { padding-top: 78px; }
  .checkout-section-block { padding: 16px; border-radius: 18px; }
  .order-item-line { grid-template-columns: 58px 1fr; }
  .order-item-price { grid-column: 2 / 3; justify-self: end; }
}

/* Customer orders page */
.orders-page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 88px 0 76px;
}
.orders-inner {
  max-width: min(1160px, 100%);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  position: relative;
  z-index: 1;
}
.orders-head { margin-bottom: 22px; }
.orders-head h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: .95;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.orders-head p { color: var(--mid); line-height: 1.56; }
.orders-empty {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 26px;
  background: linear-gradient(155deg, rgba(255,255,255,.93), rgba(250,248,245,.9));
  padding: clamp(30px, 6vw, 60px) 20px;
  text-align: center;
}
.orders-empty-icon { font-size: 38px; color: rgba(0,0,0,.25); margin-bottom: 12px; }
.orders-empty h2 { font-family: 'Syne', sans-serif; font-size: 28px; margin-bottom: 8px; }
.orders-empty p { color: var(--mid); margin-bottom: 18px; }
.orders-list { display: grid; gap: 14px; }
.order-card {
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(248,246,243,.92));
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.order-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.order-ref { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; }
.order-meta { font-size: 12px; color: var(--mid); margin-top: 4px; }
.order-status-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid transparent;
}
.order-status-pending { background: rgba(245,158,11,.12); color: #a16207; border-color: rgba(245,158,11,.26); }
.order-status-confirmed { background: rgba(59,130,246,.12); color: #1d4ed8; border-color: rgba(59,130,246,.26); }
.order-status-processing { background: rgba(79,70,229,.11); color: #4338ca; border-color: rgba(79,70,229,.24); }
.order-status-shipped { background: rgba(6,182,212,.12); color: #0e7490; border-color: rgba(6,182,212,.24); }
.order-status-delivered { background: rgba(16,185,129,.12); color: #047857; border-color: rgba(16,185,129,.24); }
.order-status-cancelled { background: rgba(239,68,68,.12); color: #b91c1c; border-color: rgba(239,68,68,.25); }
.order-card-split { display: grid; gap: 12px; }
.order-preview-row { display: flex; gap: 8px; margin-bottom: 10px; }
.order-preview-pill {
  width: 46px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.order-preview-pill img { max-height: 30px; object-fit: contain; }
.order-preview-pill span { color: rgba(0,0,0,.28); }
.order-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.order-summary-grid div {
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 10px;
}
.order-summary-grid span { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--light); margin-bottom: 4px; }
.order-summary-grid strong { font-size: 12px; color: var(--dark); }
.order-details summary {
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--red);
  cursor: pointer;
}
.order-details summary::-webkit-details-marker { display: none; }
.order-details-body { margin-top: 10px; display: grid; gap: 8px; }
.order-line {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}
.order-line-img {
  border-radius: 10px;
  background: radial-gradient(circle at 30% 20%, rgba(0,0,0,.05), transparent 65%);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-line-img img { max-height: 42px; object-fit: contain; }
.order-line-img span { color: rgba(0,0,0,.3); }
.order-line-name { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.order-line-meta { font-size: 11px; color: var(--mid); }
.order-line-price { font-weight: 700; font-size: 13px; }
.order-details-totals {
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 6px;
}
.order-details-totals div { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--mid); }
.order-details-totals strong { color: var(--dark); }

@media (max-width: 960px) {
  .orders-page { padding-top: 80px; }
  .order-summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .order-card { padding: 14px; border-radius: 18px; }
  .order-card-top { flex-direction: column; align-items: flex-start; }
  .order-line { grid-template-columns: 52px 1fr; }
  .order-line-price { grid-column: 2 / 3; justify-self: end; }
}

/* Account center page */
.account-page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 88px 0 76px;
}
.account-inner {
  max-width: min(1160px, 100%);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  position: relative;
  z-index: 1;
}
.account-head {
  margin-bottom: 20px;
}
.account-head h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 4.3vw, 50px);
  line-height: .96;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.account-head p { color: var(--mid); line-height: 1.55; }
.account-success {
  margin-bottom: 16px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.24);
  color: #047857;
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 14px;
}
.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.account-grid--secondary {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}
.account-card {
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(248,246,243,.92));
  padding: clamp(18px, 2.6vw, 28px);
  box-shadow: var(--shadow-sm);
}
.account-form {
  display: grid;
  gap: 12px;
}
.account-submit {
  margin-top: 6px;
  min-height: 52px;
}
.account-actions {
  display: grid;
  gap: 10px;
}
.account-action {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.78);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color .22s ease, transform .22s ease, background .22s ease;
}
.account-action:hover {
  border-color: rgba(232,50,30,.3);
  transform: translateY(-1px);
  background: rgba(255,255,255,.94);
}
.account-action strong {
  color: var(--red);
  font-size: 13px;
}
.account-action.is-danger span {
  color: #b91c1c;
}
.account-summary-grid {
  display: grid;
  gap: 10px;
}
.account-summary-grid div {
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.75);
}
.account-summary-grid span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--light);
  margin-bottom: 4px;
}
.account-summary-grid strong { color: var(--dark); font-size: 14px; }
.account-security-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--mid);
}
.account-security-note strong { color: var(--dark); }

@media (max-width: 960px) {
  .account-page { padding-top: 80px; }
  .account-grid,
  .account-grid--secondary {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .account-card {
    border-radius: 18px;
    padding: 16px;
  }
}