/* Shared styles for every page of the premium prototype: tokens (light and dark), base, buttons,
   header, theme switch, reveals, product card, chips, footer, toast. Keep in sync with BRAND.md.
   Performance rules (owner, 2026-10-26: 60 fps): animate only transform and opacity, no filter or
   backdrop-filter on large areas, no smooth-scroll library, no scroll-pinned sections. */

/* =========================================================================
   Tokens. Light is the default; [data-theme="dark"] on <html> switches every colour at once.
   Dark is a warm neutral charcoal, never blue (owner, 2026-10-26).
   ========================================================================= */
:root{
  --chalk:#F8F8F6; --chalk-2:#F0F0ED; --ink:#141414; --stone:#686864; --hair:#E2E2DE; --photo:#F4F4F1;
  --coal:#121211; --coal-2:#1B1B1A; --coal-ink:#ECEAE5; --coal-stone:#A3A19B; --coal-hair:#2D2C2A; --coal-photo:#262625;
  --bg:var(--chalk); --bg-2:var(--chalk-2); --fg:var(--ink); --fg-2:var(--stone); --line:var(--hair); --photo-bg:var(--photo);

  --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-ar:"IBM Plex Sans Arabic","Geist",system-ui,sans-serif;
  --font-ar-display:"Noto Naskh Arabic","IBM Plex Sans Arabic",serif;

  --t-hero:clamp(2.6rem,6.4vw,7rem);
  --t-d2:clamp(2.1rem,4.4vw,4.2rem);
  --t-d3:clamp(1.5rem,2.4vw,2.25rem);
  --t-lead:clamp(1.02rem,1.2vw,1.18rem);
  --t-body:1rem; --t-small:.8125rem;

  --max:1600px; --gutter:20px; --header:68px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px; --s-9:112px; --s-10:160px;

  --ease:cubic-bezier(.16,1,.3,1);
  --d-fast:180ms; --d-mid:450ms; --d-slow:1100ms; --d-reveal:900ms;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:var(--coal); --bg-2:var(--coal-2); --fg:var(--coal-ink); --fg-2:var(--coal-stone); --line:var(--coal-hair); --photo-bg:var(--coal-photo);
  color-scheme:dark;
}
@media (min-width:640px){ :root{ --gutter:32px; } }
@media (min-width:1024px){ :root{ --gutter:48px; } }
@media (min-width:1440px){ :root{ --gutter:64px; } }

/* =========================================================================
   Base
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none!important; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scrollbar-width:none; }
html::-webkit-scrollbar,body::-webkit-scrollbar{ display:none; width:0; height:0; }
body{ margin:0; background:var(--bg); color:var(--fg); font:400 var(--t-body)/1.6 var(--font); -webkit-font-smoothing:antialiased; overflow-x:clip; }
/* The theme switch fades colours for half a second, only while switching (site.js adds the class). */
html.theme-anim, html.theme-anim *{ transition:background-color 800ms cubic-bezier(.4,0,.2,1), color 800ms cubic-bezier(.4,0,.2,1), border-color 800ms cubic-bezier(.4,0,.2,1) !important; }
[dir="rtl"] body{ font-family:var(--font-ar); }
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
.wrap{ width:min(100% - 2*var(--gutter), var(--max)); margin-inline:auto; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:300; letter-spacing:-.02em; line-height:1.02; text-wrap:balance; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{ font-family:var(--font-ar-display); font-weight:400; letter-spacing:0; line-height:1.2; }
p{ margin:0; }
.lead{ font-size:var(--t-lead); line-height:1.55; color:var(--fg-2); max-width:40ch; }
.small{ font-size:var(--t-small); color:var(--fg-2); }
.display{ font-family:var(--font-display); font-weight:300; letter-spacing:-.02em; }
[dir="rtl"] .display{ font-family:var(--font-ar-display); font-weight:400; letter-spacing:0; }

/* =========================================================================
   Buttons. Pill, three sizes, two variants.
   ========================================================================= */
.btn{ --h:48px; --px:26px; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); height:var(--h); padding-inline:var(--px); border-radius:999px; border:1px solid transparent; font-size:.9375rem; font-weight:500; letter-spacing:.005em; cursor:pointer; transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease); white-space:nowrap; }
.btn--s{ --h:38px; --px:18px; font-size:.8125rem; }
.btn--l{ --h:56px; --px:32px; font-size:1rem; }
.btn--primary{ background:var(--fg); color:var(--bg); }
.btn--primary:hover{ transform:translateY(-1px); }
.btn--ghost{ border-color:var(--line); background:transparent; }
.btn--ghost:hover{ border-color:var(--fg); }
.btn:active{ transform:translateY(0) scale(.98); }
.link{ position:relative; font-weight:500; }
.link::after{ content:""; position:absolute; inset-inline:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:var(--origin,left); transition:transform var(--d-mid) var(--ease); }
[dir="rtl"] .link::after{ --origin:right; }
.link:hover::after,.link[aria-current="page"]::after{ transform:scaleX(1); }

/* Round icon button (carousel arrows): 52px, hairline ring, a thin chevron drawn in CSS. */
.arrow{ width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:transparent; display:inline-grid; place-items:center; cursor:pointer; transition:border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.arrow:hover{ border-color:var(--fg); }
.arrow:active{ transform:scale(.96); }
.arrow::before{ content:""; width:10px; height:10px; border-top:1.5px solid currentColor; border-inline-end:1.5px solid currentColor; transform:translateX(-2px) rotate(45deg); }
.arrow--prev::before{ transform:translateX(2px) rotate(-135deg); }
[dir="rtl"] .arrow::before{ transform:translateX(2px) rotate(-135deg); }
[dir="rtl"] .arrow--prev::before{ transform:translateX(-2px) rotate(45deg); }

/* =========================================================================
   Header. Transparent over a hero (.header--over), solid once the page scrolls.
   Solid is a near-opaque fill: no backdrop blur (it repaints every frame while scrolling).
   ========================================================================= */
.header{ position:fixed; inset:0 0 auto; z-index:50; padding-top:env(safe-area-inset-top,0px); border-bottom:1px solid transparent; transition:background-color var(--d-mid) linear, border-color var(--d-mid) linear; }
.header.is-solid{ background:color-mix(in srgb,var(--bg) 96%,transparent); border-color:var(--line); }
.header__in{ height:var(--header); display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); }
.wordmark{ font-family:var(--font-display); font-weight:300; font-size:1.5rem; letter-spacing:-.01em; }
[dir="rtl"] .wordmark{ font-family:var(--font); }
.nav{ display:none; gap:var(--s-6); font-size:var(--t-small); font-weight:500; }
@media (min-width:960px){ .nav{ display:flex; } }
.header__end{ display:flex; align-items:center; gap:var(--s-5); font-size:var(--t-small); font-weight:500; }
.hbtn{ background:none; border:0; padding:6px 0; cursor:pointer; color:var(--fg-2); transition:color var(--d-fast) var(--ease); }
.hbtn:hover{ color:var(--fg); }
.bag{ color:var(--fg); }
.menu-btn{ color:var(--fg); }
@media (min-width:960px){ .menu-btn{ display:none; } }
@media (max-width:639px){ .header__end .lang{ display:none; } }
/* Theme switch: a small two-state pill, a dot that slides between light and dark. */
.theme{ position:relative; width:44px; height:24px; border-radius:999px; border:1px solid color-mix(in srgb,var(--fg) 35%,transparent); background:transparent; cursor:pointer; padding:0; }
.theme::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--fg); transition:transform var(--d-mid) var(--ease); }
:root[data-theme="dark"] .theme::after{ transform:translateX(20px); }
[dir="rtl"] .theme::after{ left:auto; right:3px; }
[dir="rtl"]:root[data-theme="dark"] .theme::after{ transform:translateX(-20px); }
.sheet{ position:fixed; inset:0; z-index:60; background:var(--bg); padding:calc(104px + env(safe-area-inset-top,0px)) var(--gutter) var(--s-7); display:flex; flex-direction:column; gap:var(--s-5); }
.sheet[hidden]{ display:none; }
.sheet a{ font-family:var(--font-display); font-size:clamp(2.2rem,10vw,3rem); font-weight:300; letter-spacing:-.03em; line-height:1.1; }
.sheet__row{ display:flex; gap:var(--s-6); margin-top:auto; font-size:var(--t-small); font-weight:500; }
.sheet__close{ position:absolute; top:calc(20px + env(safe-area-inset-top,0px)); inset-inline-end:var(--gutter); background:none; border:0; font-size:var(--t-small); font-weight:500; padding:8px 0; cursor:pointer; }

/* =========================================================================
   Reveals. Elements with data-reveal rise and fade in once, when they enter the screen
   (site.js, IntersectionObserver). --d staggers siblings. Transform and opacity only.
   ========================================================================= */
.js [data-reveal]{ opacity:0; transform:translate3d(0,28px,0); transition:opacity var(--d-reveal) var(--ease) var(--d,0ms), transform calc(var(--d-reveal) + 300ms) var(--ease) var(--d,0ms); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
/* Photos settle from a slight zoom inside their frame as they appear. */
.js [data-reveal="photo"]{ transform:none; }
.js [data-reveal="photo"] img{ transform:scale(1.06); transition:transform 1600ms var(--ease) var(--d,0ms); }
.js [data-reveal="photo"].is-in img{ transform:none; }

/* =========================================================================
   Product card: the colourway's top-down XL photo (3:2, shown whole), turning to the in-use photo
   on hover. Dark colourways show their dark set. Used on the home page, shop.html and "pairs well".
   ========================================================================= */
.pcard{ display:block; }
.pcard__img{ position:relative; aspect-ratio:3/2; border-radius:8px; overflow:hidden; background:var(--photo); }
.pcard__img.is-dark{ background:var(--coal-photo); }
.pcard__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity var(--d-mid) var(--ease),transform var(--d-slow) var(--ease); }
.pcard__img .pcard__alt{ opacity:0; }
@media (hover:hover){ .pcard:hover .pcard__alt{ opacity:1; } .pcard:hover .pcard__img img{ transform:scale(1.015); } }
.pcard__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4); margin-top:var(--s-4); }
.pcard__name{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.35rem,1.8vw,1.8rem); letter-spacing:-.02em; line-height:1.1; }
[dir="rtl"] .pcard__name{ font-family:var(--font); font-weight:500; letter-spacing:0; }
.pcard__line{ color:var(--fg-2); font-size:var(--t-small); margin-top:var(--s-1); }
.pcard__price{ font-size:var(--t-small); font-weight:500; white-space:nowrap; }
.pcard__ways{ display:flex; gap:6px; margin-top:var(--s-2); }
.pcard__ways i{ width:10px; height:10px; border-radius:50%; border:1px solid var(--line); background-size:cover; background-position:70% 50%; }
.pcard:focus-visible{ outline-offset:6px; border-radius:8px; }

/* Filter chips: pill toggles, one pressed at a time (shop.html). */
.chips{ display:flex; gap:var(--s-2); flex-wrap:wrap; }
.chip{ height:38px; padding-inline:18px; border-radius:999px; border:1px solid var(--line); background:transparent; font-size:var(--t-small); font-weight:500; cursor:pointer; transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease); }
.chip:hover{ border-color:var(--fg); }
.chip[aria-pressed="true"]{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.chip span{ opacity:.6; margin-inline-start:6px; font-weight:400; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer{ border-top:1px solid var(--line); padding-block:var(--s-8) var(--s-7); }
.footer__grid{ display:grid; gap:var(--s-7); }
@media (min-width:900px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer h3{ font-size:var(--t-d3); margin-bottom:var(--s-5); }
.signup{ display:flex; gap:var(--s-2); max-width:440px; }
.signup input{ flex:1; min-width:0; height:48px; padding-inline:18px; border-radius:999px; border:1px solid var(--line); background:transparent; font:inherit; color:inherit; }
.signup input::placeholder{ color:var(--fg-2); }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2); font-size:.9375rem; }
.footer__legal{ margin-top:var(--s-8); display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; font-size:var(--t-small); color:var(--fg-2); }
.footer__licence{ margin-top:var(--s-3); font-size:.75rem; color:var(--fg-2); max-width:80ch; }

.toast{ position:fixed; z-index:70; inset-inline:0; bottom:calc(24px + env(safe-area-inset-bottom,0px)); margin-inline:auto; width:max-content; max-width:calc(100% - 32px); background:var(--fg); color:var(--bg); padding:12px 20px; border-radius:999px; font-size:var(--t-small); font-weight:500; opacity:0; translate:0 10px; transition:opacity var(--d-mid) var(--ease),translate var(--d-mid) var(--ease); pointer-events:none; }
.toast.is-on{ opacity:1; translate:0 0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:1ms!important; animation-duration:1ms!important; }
  .js [data-reveal]{ opacity:1; transform:none; }
}

/* =========================================================================
   Bundle builder (site.js): a pop-up over a dimmed page. Items and their prices on the left; the
   active item's size and colour and every design on the right. On phones it rises from the bottom
   as a tall sheet and the item list becomes a row.
   ========================================================================= */
.builder{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; }
.builder[hidden]{ display:none; }
.builder__scrim{ position:absolute; inset:0; background:rgba(14,13,12,.42); opacity:0; transition:opacity 400ms var(--ease); }
.builder__panel{ position:relative; width:min(1180px, 100% - 2 * var(--gutter)); max-height:min(860px, 100svh - 48px); display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:var(--bg); color:var(--fg); border-radius:20px; overflow:hidden; box-shadow:0 30px 80px rgba(30,25,20,.22); opacity:0; transform:translateY(24px) scale(.985); transition:opacity 400ms var(--ease), transform 560ms var(--ease); }
.builder.is-open .builder__scrim{ opacity:1; }
.builder.is-open .builder__panel{ opacity:1; transform:none; }
.builder__top{ display:flex; align-items:center; gap:var(--s-5); padding:var(--s-5) var(--s-6); border-bottom:1px solid var(--line); }
.builder__top h2{ font-size:var(--t-d3); margin-inline-end:auto; }
.builder__count{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--t-small); color:var(--fg-2); }
.builder__count b{ font-family:var(--font-display); font-weight:300; font-size:1.8rem; color:var(--fg); min-width:1.2em; text-align:center; }
.builder__count .arrow{ width:40px; height:40px; }
.builder__body{ display:grid; grid-template-columns:340px minmax(0,1fr); min-height:0; }
.builder__list{ border-inline-end:1px solid var(--line); overflow-y:auto; padding:var(--s-4); display:grid; align-content:start; gap:var(--s-2); }
.bitem{ display:grid; grid-template-columns:72px 1fr auto; gap:var(--s-3); align-items:center; padding:var(--s-2); border:1px solid transparent; border-radius:12px; background:none; cursor:pointer; text-align:start; transition:border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease); }
.bitem:hover{ background:var(--bg-2); }
.bitem.is-active{ border-color:var(--fg); }
.bitem__img{ aspect-ratio:3/2; border-radius:6px; overflow:hidden; background:var(--photo); }
.bitem__img.is-dark{ background:var(--coal-photo); }
.bitem__img img{ width:100%; height:100%; object-fit:cover; }
.bitem__txt{ display:grid; gap:2px; font-size:var(--t-small); color:var(--fg-2); }
.bitem__txt b{ color:var(--fg); font-weight:500; font-size:.875rem; }
.bitem__price{ font-size:var(--t-small); font-weight:500; white-space:nowrap; }
.bitem__price s{ color:var(--fg-2); font-weight:400; margin-inline-end:6px; }
.builder__pick{ overflow-y:auto; padding:var(--s-5) var(--s-6); display:grid; align-content:start; gap:var(--s-5); }
.builder__label{ font-size:var(--t-small); font-weight:500; margin-bottom:var(--s-3); }
.builder__row{ display:flex; gap:var(--s-5); align-items:center; flex-wrap:wrap; }
.builder__ways{ display:flex; gap:var(--s-2); }
.builder__ways .way{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); padding:3px; background:none; cursor:pointer; }
.builder__ways .way i{ display:block; width:100%; height:100%; border-radius:50%; background-size:cover; background-position:70% 50%; }
.builder__ways .way[aria-pressed="true"]{ border-color:var(--fg); }
.builder__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:var(--s-4); }
.bdesign{ display:grid; gap:4px; padding:0; border:0; background:none; cursor:pointer; text-align:start; }
.bdesign__img{ aspect-ratio:3/2; border-radius:8px; overflow:hidden; background:var(--photo); outline:1.5px solid transparent; outline-offset:3px; transition:outline-color var(--d-fast) var(--ease); }
.bdesign__img.is-dark{ background:var(--coal-photo); }
.bdesign__img img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-slow) var(--ease); }
.bdesign:hover .bdesign__img img{ transform:scale(1.03); }
.bdesign[aria-pressed="true"] .bdesign__img{ outline-color:var(--fg); }
.bdesign__name{ font-family:var(--font-display); font-weight:300; font-size:1.15rem; margin-top:var(--s-2); }
.bdesign__meta{ font-size:.75rem; color:var(--fg-2); }
.builder__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); padding:var(--s-4) var(--s-6); border-top:1px solid var(--line); }
.builder__foot p{ display:grid; }
.builder__foot b{ font-family:var(--font-display); font-weight:300; font-size:var(--t-d3); line-height:1.1; }
.builder__foot span{ font-size:var(--t-small); color:var(--fg-2); }
@media (max-width:767px){
  .builder{ place-items:end stretch; }
  .builder__panel{ width:100%; max-height:calc(100svh - 24px); border-radius:20px 20px 0 0; transform:translateY(40px); }
  .builder__top{ padding:var(--s-4) var(--gutter); flex-wrap:wrap; }
  .builder__top h2{ font-size:1.4rem; }
  .builder__body{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .builder__list{ display:flex; overflow-x:auto; border-inline-end:0; border-bottom:1px solid var(--line); padding:var(--s-3) var(--gutter); scrollbar-width:none; }
  .builder__list::-webkit-scrollbar{ display:none; }
  .bitem{ flex:none; width:230px; grid-template-columns:56px 1fr; }
  .bitem__price{ grid-column:2; }
  .builder__pick{ padding:var(--s-4) var(--gutter); }
  .builder__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3); }
  .builder__foot{ padding:var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom,0px)); }
}
.builder__close{ height:40px; padding-inline:16px; border:1px solid var(--line); border-radius:999px; color:var(--fg); }
.builder__close:hover{ border-color:var(--fg); }
.builder__close:focus:not(:focus-visible){ outline:none; }
@media (max-width:767px){
  .builder__top{ display:grid; grid-template-columns:1fr auto; gap:var(--s-3); }
  .builder__count{ grid-column:1; grid-row:2; }
  .builder__close{ grid-column:2; grid-row:1 / span 2; align-self:center; }
}