/* WATCH PLUG: storefront styles
   Palette: strictly black, white and neutral greys. Type: Bodoni Moda (display), Hanken Grotesk (UI/body). */

:root {
  --black: #000;
  --white: #fff;
  --mist: #f3f3f3;      /* product tiles, quiet surfaces */
  --fog: #e9e9e9;
  --line: #e2e2e2;      /* hairlines */
  --stone: #bdbdbd;
  --slate: #5c5c5c;     /* secondary text on white (6.6:1) */
  --ash: #a8a8a8;       /* secondary text on black (8.6:1) */
  --ink: #262626;       /* long-form body text */

  --serif: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --header-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0; background: var(--white); color: var(--black);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
.watch-svg { direction: ltr; unicode-bidi: isolate; } /* dial markings always read left-to-right */
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3, .h1, .h2 { text-wrap: balance; }

:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible, .hero :focus-visible { outline-color: var(--white); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px;
}
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--black); color: var(--white); padding: 12px 18px; font-size: 14px; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
.display, .h1, .h2, .h3 { font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; letter-spacing: -0.01em; }
.h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; }
.h2 { font-size: clamp(32px, 3.5vw, 52px); line-height: 1.06; }
.h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1.15; }
.lede { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--slate); max-width: 52ch; }
.muted { color: var(--slate); }
.small { font-size: 14px; }

.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: background-size .45s var(--ease); }
.text-link:hover { background-size: 0 1px; background-position: right bottom; }
.u { text-decoration: underline; text-underline-offset: 3px; }

/* Placeholder token: marks business details the client must supply */
.ph { background: var(--fog); padding: 0 .3em; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.on-dark .ph { background: #2a2a2a; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 34px; border: 1px solid var(--black);
  background: var(--black); color: var(--white);
  font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { background: var(--white); color: var(--black); }
.btn--outline { background: transparent; color: var(--black); }
.btn--outline:hover { background: var(--black); color: var(--white); }
.btn--light { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--light:hover { background: transparent; color: var(--white); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
.btn--ghost-light:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 12px; letter-spacing: .14em; }
.btn--block { width: 100%; }
.btn:disabled { background: var(--fog); border-color: var(--fog); color: #6d6d6d; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }

.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--fill { fill: currentColor; stroke: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.97); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 56px; height: var(--header-h); }
.brand img { height: 48px; width: auto; }
.main-nav ul { display: flex; gap: 40px; }
.main-nav a { position: relative; display: block; padding: 10px 0; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.main-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; transition: background-color .25s; }
.icon-btn:hover { background: var(--mist); }
.cart-count {
  position: absolute; top: 3px; inset-inline-end: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--black); color: var(--white); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.cart-count.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }
.menu-toggle { display: none; }

.search-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); }
.search-panel form { display: flex; align-items: center; gap: 16px; padding-block: 28px 18px; border-bottom: 1px solid var(--black); }
.search-panel input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 clamp(24px, 3vw, 36px)/1.2 var(--serif); padding: 6px 0; }
.search-panel input::placeholder { color: #9a9a9a; }
.search-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-block: 18px 28px; font-size: 14px; }
.search-suggest span { color: var(--slate); margin-inline-end: 6px; }
.search-suggest a { border: 1px solid var(--line); padding: 6px 14px; transition: border-color .2s; }
.search-suggest a:hover { border-color: var(--black); }

/* Sized from the viewport: the header's backdrop-filter would otherwise clip a fixed, inset panel to the header itself. */
.mobile-menu {
  position: absolute; top: 100%; inset-inline: 0; z-index: 55; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
  display: flex; flex-direction: column; background: var(--white); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom)); animation: menu-in .28s var(--ease);
}
.mobile-menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
.mobile-menu .primary a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; border-bottom: 1px solid var(--line); font: 400 28px/1.2 var(--serif); }
.mobile-menu .primary a[aria-current="page"] span::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-inline-start: 12px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.mobile-menu .primary .icon { width: 18px; height: 18px; color: var(--slate); }
[dir="rtl"] .mobile-menu .primary .icon { transform: scaleX(-1); }
.menu-label { margin: 28px 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
html[lang="ar"] .menu-label { font-size: 13px; letter-spacing: 0; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.menu-grid a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; text-align: center; transition: background-color .2s, border-color .2s; }
.menu-grid a:hover, .menu-grid a:active { background: var(--mist); border-color: var(--black); }
.menu-foot { display: grid; margin-top: auto; padding-top: 24px; }
.menu-foot .menu-row { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; min-height: 48px; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; font-size: 15px; }
.menu-foot .menu-row .icon { width: 20px; height: 20px; }
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mobile-menu { animation: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--black); color: var(--white);
  min-height: clamp(620px, calc(100svh - var(--header-h)), 920px);
  display: flex; align-items: flex-end;
}
.hero::before { /* key light */
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 42% 58% at 70% 46%, rgba(255,255,255,.17), rgba(255,255,255,.04) 55%, transparent 75%),
    radial-gradient(ellipse 80% 60% at 50% 120%, rgba(255,255,255,.06), transparent 70%);
}
.hero::after { /* film grain */
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: var(--grain); opacity: .07;
}
.hero-watch {
  position: absolute; z-index: -1; top: 50%; right: max(-6vw, -120px);
  width: min(56vw, 900px); aspect-ratio: 400 / 640;
  transform: translateY(-50%) rotate(-15deg);
}
.hero-watch .watch-svg { width: 100%; height: 100%; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 38%, transparent 62%); }
.hero-inner { padding-block: 120px clamp(64px, 9vh, 104px); }
.hero-title { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(54px, 8.6vw, 140px); line-height: .9; letter-spacing: -.005em; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .line > span { display: block; }
.hero-sub { margin: 32px 0 40px; max-width: 34ch; font-size: clamp(17px, 1.4vw, 20px); color: #cfcfcf; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* the one orchestrated entrance */
.hero-title .line > span { animation: rise 1.15s var(--ease) both; }
.hero-title .line:nth-child(2) > span { animation-delay: .12s; }
.hero-sub, .hero-cta { animation: fade 1s var(--ease) .55s both; }
.hero-watch { animation: watch-in 1.8s var(--ease) both; }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } }
@keyframes watch-in { from { opacity: 0; transform: translateY(-48%) rotate(-11deg) scale(1.04); } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 9vw, 136px); }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }
.section--flush { padding-top: 0; }
.related { border-top: 1px solid var(--line); }
.page-crumb { padding-block: 28px; }
.site-header:empty { height: var(--header-h); }
.filters-apply { display: none; }
.section--mist { background: var(--mist); }
.section--dark { background: var(--black); color: var(--white); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head .lede { margin-top: 14px; font-size: 16px; }

/* Shop by category: asymmetric mosaic */
.cat-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: clamp(260px, 25vw, 380px); gap: 12px; }
.cat-card { position: relative; overflow: hidden; display: block; background: var(--tone, var(--mist)); color: var(--black); }
.cat-card--men { grid-row: span 2; --tone: #000; color: var(--white); }
.cat-card--women { --tone: #ececec; }
.cat-card--new { --tone: #c9c9c9; }
.cat-card--best { grid-column: span 2; --tone: #f7f7f7; }
.cat-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 60% 42%, rgba(255,255,255,.55), transparent 70%); pointer-events: none; }
.cat-card--men::before { background: radial-gradient(ellipse 60% 50% at 55% 42%, rgba(255,255,255,.16), transparent 70%); }
.cat-art { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; transition: transform 1.1s var(--ease); }
.cat-art .watch-svg { height: 100%; width: auto; }
.cat-card--men .cat-art .watch-svg { height: 92%; margin-top: -8%; }
.cat-card--best .cat-art { justify-content: flex-end; gap: 0; padding-inline-end: 4%; }
.cat-card--best .cat-art .watch-svg { height: 118%; margin-inline-start: -9%; }
.cat-card:hover .cat-art { transform: scale(1.045); }
.cat-card--women .cat-art, .cat-card--new .cat-art { justify-content: flex-end; }
.cat-card--women .cat-art .watch-svg, .cat-card--new .cat-art .watch-svg { height: 112%; margin-inline-end: -14%; margin-top: -10%; }
.cat-card::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(to top, var(--tone) 22%, transparent); pointer-events: none; }
.cat-label { z-index: 2; position: absolute; left: clamp(20px, 2.4vw, 32px); right: clamp(20px, 2.4vw, 32px); bottom: clamp(18px, 2.2vw, 28px); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cat-label h3 { font: 400 clamp(26px, 2.4vw, 36px)/1.05 var(--serif); }
.cat-label p { font-size: 14px; margin-top: 8px; opacity: .78; max-width: 26ch; }
.cat-go { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid currentColor; transition: background-color .35s, color .35s; }
.cat-card:hover .cat-go { background: var(--black); color: var(--white); border-color: var(--black); }
.cat-card--men:hover .cat-go { background: var(--white); color: var(--black); border-color: var(--white); }

/* Product cards */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 20px; }
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-card { display: flex; flex-direction: column; }
.p-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mist); }
.p-media > span:not(.p-tag) { position: absolute; inset: 0; transition: opacity .6s var(--ease), transform 1s var(--ease); }
.p-media .watch-svg, .p-media img { width: 100%; height: 100%; object-fit: cover; }
.p-media .alt { opacity: 0; transform: scale(1.03); }
.p-card:hover .p-media .alt { opacity: 1; transform: none; }
.p-card:hover .p-media .main { opacity: 0; }
.p-card:hover .p-media:has(.alt img:not([src])) .main { opacity: 1; }
.p-tag { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1; background: var(--white); padding: 5px 10px; font-size: 12px; font-weight: 600; }
.p-tag--out { background: var(--black); color: var(--white); }
.p-body { flex: 1; padding-top: 18px; }
.p-name { font-size: 16px; font-weight: 600; line-height: 1.35; }
.p-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-variant { font-size: 14px; color: var(--slate); margin-top: 2px; }
.p-price { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; font-size: 16px; font-weight: 500; }
.sample { font-size: 11px; font-weight: 600; color: var(--slate); border: 1px solid var(--line); padding: 1px 6px; letter-spacing: .02em; }
.p-add { margin-top: 16px; }
.sample-note { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--slate); }
.sample-note .icon { width: 18px; height: 18px; }

/* Why choose */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--black); }
.why-item { padding-block: 36px 0; padding-inline: 0 32px; }
.why-item + .why-item { padding-inline-start: 32px; border-inline-start: 1px solid var(--line); }
.why-item .icon { width: 34px; height: 34px; stroke-width: 1.2; }
.why-item h3 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.why-item p { color: var(--slate); font-size: 15px; max-width: 34ch; }

/* Brand story split */
.story { display: grid; grid-template-columns: 1fr 1fr; background: var(--black); color: var(--white); }
.story-media { position: relative; min-height: clamp(420px, 46vw, 680px); overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 45%, #2a2a2a, #000 70%); }
.story-media::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .07; }
.story-media .watch-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(48px, 7vw, 120px); }
.story-copy p { color: #c4c4c4; margin: 28px 0 40px; max-width: 46ch; font-size: 17px; line-height: 1.75; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--white); padding-top: clamp(64px, 7vw, 96px); }
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)) 1.2fr; gap: 40px; padding-bottom: 64px; }
.footer-brand img { height: 74px; width: auto; }
.footer-brand p { margin-top: 24px; color: var(--ash); font-size: 14.5px; max-width: 32ch; }
.footer-col h2 { font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: var(--ash); font-size: 14.5px; transition: color .2s; }
.footer-col a:hover { color: var(--white); }
.social { display: flex; gap: 8px; margin-bottom: 22px; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #3a3a3a; border-radius: 50%; transition: border-color .25s, background-color .25s, color .25s; }
.social a:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.social .icon { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid #262626; padding-block: 24px 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #8f8f8f; }
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.footer-meta a { color: #bdbdbd; text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.footer-meta a:hover { color: var(--white); }
.footer-meta .btn { color: var(--white); text-decoration: none; }
.footer-meta .btn:hover { color: var(--black); }

/* ---------- Inner page heads ---------- */
.page-head { padding-block: clamp(36px, 4vw, 56px) clamp(32px, 4vw, 48px); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--slate); }
.breadcrumb li + li::before { content: '/'; margin-inline-end: 8px; color: var(--stone); }
.breadcrumb a:hover { color: var(--black); }
.page-head .h1 { margin-top: 20px; }
.page-head .lede { margin-top: 18px; }

/* ---------- Shop ---------- */
.shop-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; padding-bottom: 120px; }
.filters {
  position: sticky; top: calc(var(--header-h) + 24px);
  /* Taller than the screen otherwise: give the sidebar its own scroll so the price slider is always reachable */
  max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; overscroll-behavior: contain;
  padding-inline-end: 12px; margin-inline-end: -12px; scrollbar-width: thin; scrollbar-color: var(--stone) transparent;
}
.filters::-webkit-scrollbar { width: 6px; }
.filters::-webkit-scrollbar-thumb { background: var(--stone); border-radius: 3px; }
.filters-head { display: none; }
.filter-group { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 20px 0 22px; min-width: 0; }
.filter-group:first-of-type { border-top-color: var(--black); }
.filter-group legend { float: left; width: 100%; font-size: 14px; font-weight: 600; margin-bottom: 14px; padding: 0; }
.filter-group legend + * { clear: both; }
.check { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 14.5px; cursor: pointer; }
.check input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid #8a8a8a; display: grid; place-items: center; transition: background-color .15s, border-color .15s; cursor: pointer; }
.check input::after { content: ''; width: 9px; height: 5px; border: 2px solid var(--white); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input:checked { background: var(--black); border-color: var(--black); }
.check input:checked::after { opacity: 1; }
.check:hover input { border-color: var(--black); }
.check .n { margin-inline-start: auto; color: var(--slate); font-size: 13px; }
.price-values { direction: ltr; display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 14px; }
.range { position: relative; height: 24px; direction: ltr; } /* sliders stay low-to-high left-to-right in both languages */
.range::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--line); }
.range .fill { position: absolute; top: 11px; height: 2px; background: var(--black); }
.range input { position: absolute; inset: 0; width: 100%; margin: 0; appearance: none; background: none; pointer-events: none; }
.range input::-webkit-slider-thumb { appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--black); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--black); cursor: grab; }
.range input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--black); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--black); cursor: grab; }
.range input:focus-visible { outline: none; }
.range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--black), 0 0 0 5px rgba(0,0,0,.18); }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.search-field { position: relative; flex: 1; max-width: 340px; }
.search-field .icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--slate); }
.search-field input { width: 100%; height: 46px; padding-block: 0; padding-inline: 42px 14px; border: 1px solid #cfcfcf; background: var(--white); outline: 0; font-size: 14.5px; transition: border-color .2s; }
.search-field input:focus { border-color: var(--black); }
.toolbar-right { display: flex; align-items: center; gap: 12px; }
.result-count { font-size: 14px; color: var(--slate); white-space: nowrap; }
.select { position: relative; }
.select select { appearance: none; height: 46px; padding-block: 0; padding-inline: 14px 40px; border: 1px solid #cfcfcf; background: var(--white); font-size: 14.5px; cursor: pointer; outline: 0; }
.select select:focus-visible { border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }
.select::after { content: ''; position: absolute; inset-inline-end: 16px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.filter-toggle { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 12px; border: 1px solid var(--line); font-size: 13px; transition: border-color .2s; }
.chip:hover { border-color: var(--black); }
.chip .icon { width: 14px; height: 14px; }
.chip--clear { border: 0; text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; }
.shop-results { padding-top: 32px; min-height: 100vh; } /* keeps the page from shrinking under the sticky filters while filtering */
.empty-state { padding: 80px 0; max-width: 46ch; }
.empty-state h2 { font: 400 32px/1.15 var(--serif); }
.empty-state p { color: var(--slate); margin: 12px 0 28px; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.4); }

/* ---------- Product detail ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(32px, 5.5vw, 96px); align-items: start; padding-bottom: clamp(72px, 8vw, 120px); }
.gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
.thumbs { display: grid; gap: 12px; align-content: start; }
.thumbs button { aspect-ratio: 4 / 5; background: var(--mist); outline-offset: 2px; border: 1px solid transparent; overflow: hidden; transition: border-color .2s; }
.thumbs button[aria-pressed="true"] { border-color: var(--black); }
.thumbs .watch-svg { width: 100%; height: 100%; }
.gallery-main { position: relative; aspect-ratio: 4 / 5; background: var(--mist); overflow: hidden; }
.gallery-main .watch-svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: fade .5s var(--ease); }
.gallery--single { grid-template-columns: minmax(0, 1fr); }
.gallery-main img { position: absolute; inset: 0; }
img[data-photo] { width: 100%; height: 100%; object-fit: contain; }
.gallery-main::after { content: attr(data-caption); position: absolute; inset-inline-start: 16px; bottom: 14px; font-size: 12px; color: var(--slate); }
.pdp-info { position: sticky; top: calc(var(--header-h) + 32px); }
.pdp-kicker { font-size: 14px; color: var(--slate); }
.pdp-info .h1 { font-size: clamp(36px, 3.6vw, 54px); margin-top: 10px; }
.pdp-variant { font-size: 17px; color: var(--slate); margin-top: 8px; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; margin-top: 26px; font-size: 26px; font-weight: 500; }
.stock { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14.5px; }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--black); }
.stock--low::before { background: transparent; box-shadow: inset 0 0 0 2px var(--black); }
.stock--out { color: var(--slate); }
.stock--out::before { background: var(--stone); }
.pdp-desc { margin-top: 26px; color: var(--ink); font-size: 16.5px; line-height: 1.7; max-width: 50ch; }
.buy-box { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.buy-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--black); height: 54px; }
.qty button { width: 46px; height: 100%; display: grid; place-items: center; transition: background-color .2s; }
.qty button:hover { background: var(--mist); }
.qty button .icon { width: 16px; height: 16px; }
.qty input { width: 40px; text-align: center; border: 0; outline: 0; font-weight: 600; appearance: textfield; -moz-appearance: textfield; background: none; }
.qty input::-webkit-inner-spin-button { appearance: none; }
.qty--sm { height: 40px; }
.qty--sm button { width: 36px; }
.qty--sm input { width: 32px; font-size: 14px; }
.assure { display: grid; gap: 16px; margin-top: 32px; }
.assure li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.assure .icon { width: 22px; height: 22px; stroke-width: 1.3; }
.assure a { text-decoration: underline; text-underline-offset: 3px; }
.accordion { margin-top: 40px; border-bottom: 1px solid var(--line); }
.acc { border-top: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 15.5px; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .pm { position: relative; flex: none; width: 14px; height: 14px; }
.acc summary .pm::before, .acc summary .pm::after { content: ''; position: absolute; left: 0; right: 0; top: 6.25px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.acc summary .pm::after { transform: rotate(90deg); }
.acc[open] summary .pm::after { transform: rotate(0); }
.acc-body { padding: 0 0 26px; color: var(--ink); font-size: 15.5px; line-height: 1.7; max-width: 64ch; }
.acc-body p + p { margin-top: 12px; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .acc::details-content { height: 0; overflow: hidden; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
  .acc[open]::details-content { height: auto; }
}
.spec { display: grid; grid-template-columns: minmax(140px, 40%) 1fr; }
.spec dt, .spec dd { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.spec dt { color: var(--slate); }
.spec dt:last-of-type, .spec dd:last-of-type { border-bottom: 0; }
.buy-bar { display: none; }

/* ---------- Policies, terms, FAQ ---------- */
.doc-head { padding-block: clamp(40px, 5vw, 72px) clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.doc-head .h1 { margin-top: 20px; }
.doc-head .lede { margin-top: 18px; }
.doc-meta { margin-top: 24px; font-size: 14px; color: var(--slate); }
.notice { display: flex; gap: 14px; align-items: flex-start; margin-top: 32px; max-width: 76ch; padding: 18px 22px; background: var(--mist); border-inline-start: 2px solid var(--black); font-size: 14.5px; line-height: 1.6; }
.notice .icon { margin-top: 1px; width: 20px; height: 20px; }
.doc-layout { display: grid; grid-template-columns: 232px minmax(0, 760px); gap: clamp(40px, 7vw, 112px); padding-block: clamp(48px, 5vw, 72px) clamp(80px, 9vw, 136px); }
.toc { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.toc h2 { font-size: 13px; font-weight: 600; color: var(--slate); margin-bottom: 14px; }
.toc ol { display: grid; border-inline-start: 1px solid var(--line); }
.toc a { display: block; padding-block: 7px; padding-inline: 18px 0; margin-inline-start: -1px; border-inline-start: 1px solid transparent; font-size: 14.5px; color: var(--slate); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--black); }
.toc a.is-active { color: var(--black); border-inline-start-color: var(--black); font-weight: 600; }
.toc-mobile { display: none; }
.prose { color: var(--ink); font-size: 16.5px; line-height: 1.75; }
.prose > section + section { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); }
.prose h2 { font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--serif); color: var(--black); margin-bottom: 20px; }
.prose h3 { font-size: 17px; font-weight: 600; color: var(--black); margin: 28px 0 8px; }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + ol, .prose ol + p { margin-top: 16px; }
.prose ul > li { position: relative; padding-inline-start: 24px; }
.prose ul > li + li, .prose ol > li + li { margin-top: 10px; }
.prose ul > li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .72em; width: 6px; height: 6px; background: var(--black); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.steps { counter-reset: step; display: grid; gap: 0; margin-top: 20px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 20px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); font: 400 30px/1 var(--serif); }
.steps strong { display: block; color: var(--black); margin-bottom: 4px; }
.table-wrap { overflow-x: auto; margin-top: 20px; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: start; padding-block: 14px; padding-inline: 0 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 13px; font-weight: 600; color: var(--slate); border-bottom-color: var(--black); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.two-col > div { border: 1px solid var(--line); padding: 22px 24px; }
.two-col h3 { margin-top: 0; }

.faq-group + .faq-group { margin-top: 64px; }
.faq-group h2 { font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--serif); margin-bottom: 12px; }
.faq-group .accordion { margin-top: 0; }
.help-band { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: clamp(32px, 4vw, 48px); background: var(--black); color: var(--white); margin-top: 72px; }
.help-band h2 { font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--serif); }
.help-band p { color: var(--ash); margin-top: 8px; }
.help-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- About ---------- */
.about-intro { padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px); }
.about-statement { font: 400 clamp(36px, 5vw, 76px)/1.06 var(--serif); letter-spacing: -.012em; max-width: 19ch; margin-top: 28px; }
.about-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 72px); }
.about-cols p { grid-column: span 4; color: var(--ink); font-size: 17px; line-height: 1.75; }
.about-cols p:first-child { grid-column: 5 / span 4; }
.about-band { position: relative; overflow: hidden; height: clamp(360px, 42vw, 640px); background: radial-gradient(ellipse 60% 70% at 62% 50%, #2b2b2b, #000 70%); color: var(--white); }
.about-band::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .07; }
.about-band .watch-svg { position: absolute; top: 50%; left: 62%; width: 52%; height: auto; transform: translate(-50%, -50%) rotate(-62deg); }
.about-band figcaption { position: absolute; inset-inline-start: var(--gutter); bottom: 28px; z-index: 1; font-size: 13px; color: var(--ash); max-width: 40ch; }
.mv { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--black); }
.mv > div { padding-block: 40px 0; padding-inline: 0 48px; }
.mv > div + div { padding-inline-start: 48px; border-inline-start: 1px solid var(--line); }
.mv h2 { font: 400 clamp(30px, 3vw, 44px)/1.1 var(--serif); }
.mv p { margin-top: 20px; color: var(--ink); font-size: 17px; line-height: 1.75; max-width: 46ch; }
.values { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.values-media { position: relative; aspect-ratio: 4 / 5; background: var(--mist); overflow: hidden; }
.values-media .watch-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.values dl { margin-top: 32px; border-top: 1px solid var(--black); }
.values dl > div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.values dt { font-weight: 600; }
.values dd { color: var(--slate); }
.cta-band { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.cta-band .h2 { max-width: 16ch; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field .label { font-size: 13.5px; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--slate); }
.input, .field select, .field textarea {
  width: 100%; height: 52px; padding: 0 16px; border: 1px solid #c9c9c9; border-radius: 0; background: var(--white);
  font-size: 15.5px; outline: 0; transition: border-color .2s, box-shadow .2s;
}
.field textarea { height: auto; min-height: 160px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; padding-inline-end: 40px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center; }
.input:focus, .field select:focus, .field textarea:focus { border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }
.input::placeholder, .field textarea::placeholder { color: #8e8e8e; }
.hint { font-size: 13px; color: var(--slate); }
.form-note { font-size: 13.5px; color: var(--slate); margin-top: 16px; }
.success { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border: 1px solid var(--black); margin-top: 24px; }
.success strong { display: block; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); padding-bottom: clamp(80px, 9vw, 136px); align-items: start; }
.contact-form { border-top: 1px solid var(--black); padding-top: 32px; }
.contact-form h2, .contact-aside h2 { font: 400 30px/1.15 var(--serif); margin-bottom: 24px; }
.contact-aside { display: grid; gap: 0; border-top: 1px solid var(--black); padding-top: 32px; }
.wa-card { background: var(--black); color: var(--white); padding: 32px; }
.wa-card p { color: var(--ash); margin: 10px 0 24px; font-size: 15px; }
.wa-card h3 { font: 400 26px/1.2 var(--serif); }
.contact-list { margin-top: 8px; }
.contact-list > div { display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-list dt { font-size: 13.5px; color: var(--slate); }
.contact-list dd { font-size: 17px; font-weight: 500; margin-top: 2px; }
.contact-social { padding-top: 24px; }
.contact-social .social a { border-color: var(--line); }
.contact-social .social a:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* ---------- Cart & checkout ---------- */
.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(32px, 5vw, 80px); align-items: start; padding-bottom: clamp(80px, 9vw, 136px); }
.cart-lines { border-top: 1px solid var(--black); }
.cart-line { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.cart-thumb { aspect-ratio: 4 / 5; background: var(--mist); overflow: hidden; }
.cart-thumb .watch-svg { width: 100%; height: 100%; }
.cart-line h3 { font-size: 16px; font-weight: 600; }
.cart-line .meta { font-size: 14px; color: var(--slate); margin-top: 2px; }
.cart-line .controls { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
.remove { font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; color: var(--slate); }
.remove:hover { color: var(--black); }
.line-total { font-weight: 600; text-align: end; white-space: nowrap; }
.line-total .unit { display: block; font-weight: 400; font-size: 13px; color: var(--slate); margin-top: 2px; }
.summary { position: sticky; top: calc(var(--header-h) + 24px); background: var(--mist); padding: 32px; }
.summary h2 { font: 400 28px/1.15 var(--serif); margin-bottom: 24px; }
.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 15px; }
.sum-row span:last-child { text-align: end; }
.sum-total { border-top: 1px solid var(--black); margin-top: 12px; padding-top: 18px; font-size: 18px; font-weight: 600; }
.summary .btn { margin-top: 24px; }
.summary-notes { display: grid; gap: 12px; margin-top: 24px; font-size: 13.5px; color: var(--slate); }
.summary-notes li { display: flex; gap: 10px; align-items: flex-start; }
.summary-notes .icon { width: 18px; height: 18px; color: var(--black); }
.sum-items { display: grid; gap: 16px; padding-bottom: 20px; margin-bottom: 12px; border-bottom: 1px solid #d6d6d6; }
.sum-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; font-size: 14px; }
.sum-item .cart-thumb { position: relative; background: var(--white); overflow: visible; }
.sum-item .badge { position: absolute; top: -8px; inset-inline-end: -8px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--black); color: var(--white); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.sum-item strong { display: block; font-weight: 600; }
.sum-item span { color: var(--slate); }
.continue { display: inline-block; margin-top: 28px; }

.checkout-steps { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; color: var(--slate); margin-top: 24px; counter-reset: cs; }
.checkout-steps li { counter-increment: cs; display: flex; align-items: center; gap: 10px; }
.checkout-steps li::before { content: counter(cs); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--stone); font-size: 12px; font-weight: 600; }
.checkout-steps li.done::before, .checkout-steps li[aria-current="step"]::before { background: var(--black); border-color: var(--black); color: var(--white); }
.checkout-steps li[aria-current="step"] { color: var(--black); font-weight: 600; }
.co-section { border: 0; margin: 0; padding: 32px 0 40px; border-top: 1px solid var(--black); min-width: 0; }
.co-section + .co-section { border-top-color: var(--line); }
.co-section legend { float: left; width: 100%; padding: 0; font: 400 28px/1.15 var(--serif); margin-bottom: 24px; }
.co-section legend + * { clear: both; }
.options { display: grid; gap: 10px; }
.option { display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: start; padding: 18px 20px; border: 1px solid #cfcfcf; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.option:hover { border-color: var(--black); }
.option:has(input:checked) { border-color: var(--black); box-shadow: inset 0 0 0 1px var(--black); }
.option input { appearance: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid #8a8a8a; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.option input:checked { border-color: var(--black); }
.option input:checked::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--black); }
.option strong { display: block; font-weight: 600; font-size: 15px; }
.option small { display: block; color: var(--slate); font-size: 13.5px; margin-top: 2px; }
.option .price { font-weight: 600; font-size: 14.5px; }
.option .pay-details { color: var(--black); margin-top: 6px; }
.option .pay-details bdi { font-variant-numeric: tabular-nums; }
.confirm { max-width: 640px; padding-block: 24px 120px; }
.confirm .h1 { margin-top: 24px; }
.confirm .check-badge { width: 64px; height: 64px; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center; }
.confirm .check-badge .icon { width: 30px; height: 30px; stroke-width: 2; }

/* ---------- Account ---------- */
.account-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); padding-bottom: 120px; }
.account-layout > section { border-top: 1px solid var(--black); padding-top: 32px; }
.account-layout h2 { font: 400 30px/1.15 var(--serif); margin-bottom: 24px; }
.account-layout form { display: grid; gap: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; z-index: 90; inset-inline-end: 24px; bottom: 24px; display: flex; align-items: center; gap: 18px;
  background: var(--black); color: var(--white); padding: 16px 20px; font-size: 14.5px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.35); transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.toast.is-on { transform: none; opacity: 1; pointer-events: auto; }
.toast a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.toast .icon { width: 18px; height: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .header-inner { gap: 32px; }
  .main-nav ul { gap: 28px; }
}

@media (max-width: 920px) {
  :root { --header-h: 64px; }
  .header-inner { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .menu-toggle { display: grid; margin-inline-start: -10px; }
  .main-nav { display: none; }
  .brand { justify-self: center; }
  .brand img { height: 40px; }
  .header-actions { justify-self: end; margin-inline-end: -8px; gap: 0; }
  .header-actions .account-link { display: none; }

  .hero { align-items: stretch; min-height: auto; flex-direction: column; }
  .hero-watch { position: relative; top: auto; right: auto; width: 116%; margin: -44% -8% -48%; transform: rotate(-15deg); z-index: 0; aspect-ratio: 400 / 640; }
  @keyframes watch-in { from { opacity: 0; transform: rotate(-11deg) scale(1.04); } }
  .hero-shade { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 62%); z-index: 1; }
  .hero-inner { position: relative; z-index: 2; padding-block: 0 56px; }
  .hero::before { background: radial-gradient(ellipse 80% 40% at 50% 26%, rgba(255,255,255,.17), transparent 75%); }

  .cat-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(220px, 52vw, 380px); }
  .cat-card--men { grid-row: span 1; grid-column: span 2; }
  .cat-card--best { grid-column: span 2; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-item:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .why-item { padding-bottom: 28px; }
  .story { grid-template-columns: 1fr; }

  .shop-layout { grid-template-columns: 1fr; }
  .filter-toggle { display: inline-flex; }
  .filters {
    position: fixed; z-index: 80; top: 0; bottom: 0; inset-inline-start: 0; width: min(380px, 88vw);
    background: var(--white); overflow-y: auto; padding: 0 24px 24px; max-height: none; margin-inline-end: 0;
    transform: translateX(-102%); transition: transform .45s var(--ease); visibility: hidden;
  }
  .filters.is-open { transform: none; visibility: visible; }
  .filters-head { display: flex; justify-content: space-between; align-items: center; height: 64px; position: sticky; top: 0; background: var(--white); z-index: 1; font-weight: 600; }
  .filters-apply { display: block; position: sticky; bottom: 0; padding-top: 16px; background: var(--white); }
  .filter-group:first-of-type { border-top-color: var(--line); }

  .pdp { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .thumbs { order: 2; grid-template-columns: repeat(4, 1fr); }
  .pdp-info { position: static; }
  .buy-bar {
    display: flex; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; gap: 12px; align-items: center; justify-content: space-between;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line);
    transform: translateY(100%); transition: transform .35s var(--ease);
  }
  .buy-bar.is-on { transform: none; }
  .buy-bar strong { display: block; font-size: 14px; }
  .buy-bar span { font-size: 13px; color: var(--slate); }

  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .toc-mobile { display: block; border: 1px solid var(--line); }
  .toc-mobile summary { padding: 16px 18px; font-weight: 600; font-size: 15px; cursor: pointer; }
  .toc-mobile ol { padding: 0 18px 16px; display: grid; gap: 10px; font-size: 15px; }

  .about-cols p, .about-cols p:first-child { grid-column: span 12; }
  .mv, .values { grid-template-columns: 1fr; }
  .mv > div + div { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--line); margin-top: 40px; }
  .mv > div { padding-inline-end: 0; }
  .about-band .watch-svg { width: 90%; left: 55%; }

  .contact-layout, .cart-layout, .checkout-layout, .account-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .checkout-layout .summary { order: -1; }
}

@media (max-width: 600px) {
  .product-grid, .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 12px; }
  .p-media .p-tag { top: 10px; inset-inline-start: 10px; font-size: 11px; padding: 4px 8px; }
  .p-name { font-size: 14.5px; }
  .p-variant { font-size: 13px; }
  .p-price { font-size: 14.5px; flex-wrap: wrap; gap: 6px; }
  .p-add { height: 40px; padding: 0 10px; font-size: 11px; letter-spacing: .1em; }
  .btn { padding: 0 24px; }
  .hero-cta .btn { width: 100%; }
  .cat-grid { gap: 8px; grid-auto-rows: 240px; }
  .cat-card--women, .cat-card--new { grid-column: span 1; }
  .cat-label { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cat-card--women .cat-go, .cat-card--new .cat-go { display: none; }
  .cat-label p { display: none; }
  .cat-card--men .cat-art, .cat-card--best .cat-art { justify-content: flex-end; padding-inline-end: 0; }
  .cat-card--men .cat-art .watch-svg, .cat-card--best .cat-art .watch-svg { height: 116%; margin: -10% 0 0; margin-inline-end: -4%; }
  .cat-card--best .cat-art .watch-svg:first-child { display: none; }
  .why-grid { grid-template-columns: 1fr; }
  .why-item, .why-item + .why-item { padding: 28px 0; border-inline-start: 0; }
  .why-item + .why-item { border-top: 1px solid var(--line); }
  .why-item h3 { margin-top: 18px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-col--social { grid-column: 1 / -1; }
  .shop-toolbar { flex-wrap: wrap; }
  .search-field { max-width: none; flex-basis: 100%; }
  .toolbar-right { width: 100%; justify-content: space-between; }
  .result-count { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .line-total { grid-column: 2; text-align: start; }
  .summary { padding: 24px; margin-inline: calc(var(--gutter) * -1); }
  .values dl > div { grid-template-columns: 1fr; gap: 6px; }
  .two-col { grid-template-columns: 1fr; }
  .toast { left: 16px; right: 16px; bottom: 16px; justify-content: space-between; }
  .steps li { grid-template-columns: 40px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}
.is-still *, .is-still *::before, .is-still *::after { animation: none !important; transition: none !important; }
.is-still .buy-bar { display: none; } /* full-page captures would pin it mid-page */

/* ---------- Language switch ---------- */
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 22px; font-size: 14px; font-weight: 600; transition: background-color .25s; }
.lang-btn:hover { background: var(--mist); }
.lang-btn .icon { width: 18px; height: 18px; }
.lang-btn[lang="ar"] { font-family: 'IBM Plex Sans Arabic', var(--sans); font-size: 15px; }
.lang-btn[lang="en"] { font-family: 'Hanken Grotesk', sans-serif; }
.lang-btn--menu { height: auto; padding: 4px 0; justify-self: start; font-weight: 500; font-size: 15px; }
.lang-btn--menu:hover { background: none; text-decoration: underline; }
.lang-btn .short { display: none; }
@media (max-width: 920px) { .header-actions .lang-btn { padding: 0 8px; } .header-actions .lang-btn .icon { display: none; } }
@media (max-width: 600px) { .header-actions .lang-btn .long { display: none; } .header-actions .lang-btn .short { display: inline; } }

/* ---------- Arabic (right-to-left) ---------- */
/* Long prose is written twice; only the active language shows. */
html[lang="ar"] [data-lang="en"], html[lang="en"] [data-lang="ar"] { display: none !important; }

/* Latin stays in the brand faces; Arabic glyphs fall through to Amiri (display) and IBM Plex Sans Arabic (text). */
html[lang="ar"] {
  --serif: 'Bodoni Moda', 'Amiri', 'Bodoni 72', Georgia, serif;
  --sans: 'Hanken Grotesk', 'IBM Plex Sans Arabic', 'Helvetica Neue', Arial, sans-serif;
}
html[lang="ar"] body { line-height: 1.8; }
/* Letter-spacing breaks the joins between Arabic letters (watch-dial SVG text keeps its own). */
html[lang="ar"] body *:not(svg):not(svg *) { letter-spacing: 0 !important; }
html[lang="ar"] .btn { text-transform: none; font-size: 15px; }
html[lang="ar"] .btn--sm, html[lang="ar"] .p-add { font-size: 14px; }
html[lang="ar"] .hero-title { font-weight: 700; line-height: 1.25; font-size: clamp(50px, 7.6vw, 120px); }
html[lang="ar"] :is(.h1, .h2, .h3, .cat-label h3, .empty-state h2, .prose h2, .faq-group h2, .help-band h2, .about-statement, .mv h2,
  .contact-form h2, .contact-aside h2, .wa-card h3, .summary h2, .co-section legend, .account-layout h2, .mobile-menu .primary a, .search-panel input) { line-height: 1.4; }
html[lang="ar"] .about-statement { max-width: 22ch; }

/* Phone numbers and email addresses read left-to-right inside Arabic forms. */
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }

[dir="rtl"] .text-link { background-position: right bottom; }
[dir="rtl"] .text-link:hover { background-position: left bottom; }
[dir="rtl"] .main-nav a::after { transform-origin: left; }
[dir="rtl"] .main-nav a:hover::after, [dir="rtl"] .main-nav a[aria-current="page"]::after { transform-origin: right; }
[dir="rtl"] .cat-go svg { transform: scaleX(-1); }
[dir="rtl"] .field select { background-position: left 16px center; }
[dir="rtl"] .about-band .watch-svg { left: 38%; transform: translate(-50%, -50%) rotate(62deg); }
@media (min-width: 921px) {
  [dir="rtl"] .hero-watch { right: auto; left: max(-6vw, -120px); transform: translateY(-50%) rotate(15deg); animation-name: watch-in-rtl; }
  [dir="rtl"] .hero-shade { background: linear-gradient(270deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 38%, transparent 62%); }
}
@keyframes watch-in-rtl { from { opacity: 0; transform: translateY(-48%) rotate(11deg) scale(1.04); } }
@media (max-width: 920px) {
  [dir="rtl"] .filters { transform: translateX(102%); }
  [dir="rtl"] .filters.is-open { transform: none; }
  [dir="rtl"] .about-band .watch-svg { left: 45%; }
}