.site-header {
  position: relative;
  max-width: 1360px;
  margin-inline: auto;
  padding-block: 1rem;
  color: var(--ink);
  background: var(--paper);
}
.site-header .site-search {
  color: var(--ink);
  background: var(--theme-surface);
  border-color: var(--line);
  box-shadow: none;
  backdrop-filter: none;
}
.site-header .site-search input { color: var(--ink); }
.site-header .site-search input::placeholder, .site-header .site-search svg { color: var(--muted); }
.site-header .site-search:focus-within { border-color: var(--amber); background: var(--theme-surface); box-shadow: 0 0 0 3px #e9a51b20; }
.site-header :is(.language-trigger, .theme-toggle, .header-order) {
  color: var(--ink);
  background: var(--theme-surface);
  border-color: var(--line);
  box-shadow: none;
  backdrop-filter: none;
}
.site-header :is(.language-trigger, .theme-toggle, .header-order):hover { background: var(--theme-raised); }
.site-header .brand { color: #168fb7; }
.site-header .brand-wordmark { text-shadow: none; }
.site-header .brand-symbol { filter: none; }
html[data-theme="dark"] .site-header .brand { color: #43c4e9; }

.hero {
  --hero-blue: #168fb7;
  --hero-tint: #168fb71c;
  max-width: 1360px;
  margin-inline: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: 1rem clamp(2rem, 5vw, 5rem);
  padding: clamp(1rem, 2vw, 2rem) clamp(1.25rem, 4vw, 4.5rem) 1rem;
  background: radial-gradient(ellipse at 85% 35%, var(--hero-tint), transparent 58%), var(--paper);
}
html[dir="rtl"] .hero { background: radial-gradient(ellipse at 15% 35%, var(--hero-tint), transparent 58%), var(--paper); }
html[data-theme="dark"] .hero { --hero-blue: #43c4e9; --hero-tint: #43c4e91a; }
.hero .hero-content, html[dir="rtl"] .hero .hero-content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: auto;
  padding: 1rem 0;
  color: var(--ink);
}
.hero .welcome { color: #168fb7; font-size: .8rem; margin-bottom: 1rem; }
html[data-theme="dark"] .hero .welcome { color: #43c4e9; }
.hero h1 { max-width: 10.5ch; font-size: clamp(3.2rem, 5.5vw, 5.8rem); line-height: 1.06; }
html[dir="rtl"] .hero h1 { max-width: 12ch; line-height: 1.25; letter-spacing: 0; }
.hero .hero-copy { max-width: 31rem; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.12rem); margin: 1.35rem 0 1.75rem; }
.hero-visual {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 1rem;
  min-width: 0;
  position: relative;
  isolation: isolate;
  padding: .6rem;
}
.hero-lookbook { position: relative; min-width: 0; aspect-ratio: 1.35; margin-bottom: .5rem; }
.hero-lookbook::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% 1% 4% 3%;
  border-radius: 42% 55% 40% 50%;
  background: var(--hero-tint);
  transform: rotate(-5deg);
  pointer-events: none;
}
.hero-look {
  position: absolute;
  margin: 0;
  padding: .3rem .3rem 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--theme-surface);
  transform: rotate(var(--look-angle));
  box-shadow: 0 12px 28px #293b461c;
}
.hero-look img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; border-radius: .7rem; }
.hero-look figcaption { min-height: 2.65rem; display: flex; align-items: center; justify-content: center; padding: .5rem .2rem; text-align: center; font-size: .9rem; line-height: 1.3; font-weight: 600; color: var(--hero-blue); }
.hero-look--men { --look-angle: -6deg; --look-delay: 0s; width: 35%; left: 0; top: 9%; z-index: 1; }
.hero-look--women { --look-angle: 3deg; --look-delay: .09s; width: 41%; left: 30%; top: 0; z-index: 2; }
.hero-look--everyday { --look-angle: -3deg; --look-delay: .18s; width: 31%; left: 68%; top: 27%; z-index: 3; }
.hero .status-card {
  position: static;
  justify-self: start;
  max-width: 100%;
  padding: .6rem .3rem;
  background: transparent;
  color: var(--ink);
  border: 0;
  backdrop-filter: none;
}
.hero .status-card strong { font-size: .9rem; }
.hero .status-card small { font-size: .82rem; color: var(--muted); }
.hero + .collection-section { padding-top: clamp(3.5rem, 6vw, 6rem); }
html[data-theme="dark"] .hero-look { box-shadow: 0 12px 28px #0004; }

@media (prefers-reduced-motion: no-preference) {
  .hero-content { animation: hero-content-enter .65s ease-out; }
  .hero-look { animation: hero-look-enter .85s cubic-bezier(.2,.75,.25,1) var(--look-delay) backwards; }
}
@keyframes hero-content-enter { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes hero-look-enter { from { opacity: 0; transform: translateY(16px) rotate(calc(var(--look-angle) + 2deg)); } to { opacity: 1; transform: rotate(var(--look-angle)); } }
@media (prefers-reduced-motion: reduce) {
  .hero-look, .hero-lookbook::before { transform: none; }
}

@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-top: .5rem; }
  .hero .hero-content, html[dir="rtl"] .hero .hero-content { grid-column: 1; grid-row: 1; padding: .75rem 0 0; }
  .hero h1 { max-width: 13ch; font-size: clamp(3.1rem, 9vw, 4.5rem); }
  html[dir="rtl"] .hero h1 { max-width: 14ch; }
  .hero .hero-copy { max-width: 35rem; }
  .hero-visual { grid-column: 1; grid-row: 2; }
}
@media (max-width: 480px) {
  .hero { padding-inline: 1rem; }
  .hero h1 { font-size: clamp(2.7rem, 11.5vw, 3.3rem); }
  .hero .welcome { margin-bottom: .75rem; }
  .hero .hero-copy { margin: 1rem 0 1.25rem; }
  .hero .hero-actions { gap: .6rem; }
  .hero-look { border-radius: .85rem; padding: .2rem .2rem 0; }
  .hero-look img { border-radius: .65rem; }
  .hero .status-card { width: 100%; }
  .hero + .collection-section { padding-top: 3rem; }
}
@media (forced-colors: active) {
  .site-header .brand, html[data-theme="dark"] .site-header .brand { color: LinkText; }
  .site-header :is(.site-search, .language-trigger, .theme-toggle, .header-order) { background: Canvas; color: ButtonText; border-color: ButtonText; }
  .hero, html[dir="rtl"] .hero { background: Canvas; }
  .hero-lookbook::before { display: none; }
  .hero-look { box-shadow: none; border-color: ButtonText; }
  .hero-look figcaption { color: LinkText; }
  .hero .welcome, html[data-theme="dark"] .hero .welcome { color: LinkText; }
}