/* ==========================================================================
   ANAQA — أناقة
   --------------------------------------------------------------------------
   Every number below was measured in a real browser on ar.bloomingdales.ae at
   a 1600px viewport, not estimated:

     body          Almarai 400 / 16px / 24px line / #111 on #FFF
     H2            32px / 500            H1  20px / 600
     container     1200px               filter rail 252px
     product tile  212 x 318  (2:3)      grid 4 up, 24px gutter
     accent        #CB0195  (their promo bar)   page ground  #FFF

   Almarai is the same Google font they serve, so this is their typeface
   rather than a lookalike. The catalogue photographs are cut out and re-seated
   on --tile by build/cutouts.py; that constant and this one must match.

   Direction is RTL throughout and every offset is a logical property, so
   nothing is hand-mirrored.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Jost:wght@300;400;500&display=swap');

:root{
  --white:#FFFFFF;
  --ink:#111111;
  --ink-2:#3B3B3B;
  --muted:#6E6E6E;
  --faint:#9A9A9A;
  --line:#E5E5E5;
  --line-2:#CFCFCF;
  --wash:#F9F9F9;
  --tile:#F8F7F5;          /* == BG in build/cutouts.py */
  --gold:#8A6A34;
  --pop:#CB0195;           /* the one loud colour: promo bar + primary CTA */
  --pop-d:#A5017A;
  --ok:#1F7A4D;            /* WhatsApp actions */
  --ok-d:#186039;

  --ar:'Almarai',system-ui,-apple-system,sans-serif;
  --lat:'Jost','Almarai',system-ui,sans-serif;

  --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:48px; --s6:72px;
  --wrap:1200px;
  --edge:clamp(16px,3vw,24px);
  --hdr:150px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--ar); font-size:16px; font-weight:400; line-height:1.5;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0; list-style:none}
:focus-visible{outline:2px solid var(--pop); outline-offset:2px}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--edge)}
/* Latin/­numeric runs inside Arabic must be isolated or the bidi algorithm
   reorders them: "24 x 18 cm" would render as "cm 18 x 24". */
.num,[dir="ltr"]{font-family:var(--lat); font-variant-numeric:tabular-nums;
  display:inline-block; unicode-bidi:isolate}
body.is-locked{overflow:hidden}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ==========================================================================
   HEADER — three stacked rows, exactly as the reference: utilities + logo,
   then categories, then the coloured promotion. The promotion is the only
   saturated surface on the page, which is what makes the masthead catch the
   eye without the rest of the site turning into a sale flyer.
   ========================================================================== */
.hdr{position:sticky; inset-block-start:0; z-index:60; background:var(--white)}
.hdr__bar{border-bottom:1px solid transparent}
.hdr__in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--s3); min-height:74px; transition:min-height .28s ease}
.hdr.is-stuck .hdr__in{min-height:60px}

/* The wordmark is the logo: light, widely tracked Latin caps with a single
   struck diamond as the separator. It is set in type rather than shipped as
   an image so it stays sharp at any size, recolours for the dark footer, and
   never needs a retina variant. */
.brand{grid-column:2; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; min-height:48px; min-width:44px; white-space:nowrap}
.brand__w{display:inline-flex; align-items:center; direction:ltr; font-family:var(--lat);
  font-size:23px; font-weight:300; line-height:1; letter-spacing:.30em;
  text-transform:uppercase; text-indent:.30em; color:var(--ink);
  transition:font-size .28s ease}
.brand__w i{display:inline-block; width:5px; height:5px; flex:none;
  margin-inline:.5em .8em; background:var(--pop); transform:rotate(45deg)}
.brand__s{font-size:9.5px; letter-spacing:.14em; color:var(--muted); line-height:1;
  transition:opacity .2s, height .28s}
.hdr.is-stuck .brand__w{font-size:18px}
.hdr.is-stuck .brand__s{opacity:0; height:0; overflow:hidden}

/* search — first in the DOM, so RTL puts it on the right like the reference */
.srch{display:flex; align-items:center; gap:2px; max-width:290px;
  border-bottom:1px solid var(--line-2); transition:border-color .2s}
.srch:focus-within{border-color:var(--ink)}
.srch__i{flex:1; min-width:0; min-height:44px; border:0; background:none;
  font-size:13.5px; padding-inline:4px}
.srch__i::placeholder{color:var(--faint)}
.srch__i:focus{outline:none}
.srch__i::-webkit-search-cancel-button{display:none}
.srch__go,.srch__x{display:grid; place-items:center; min-width:36px; min-height:44px; color:var(--muted)}
.srch__go:hover,.srch__x:hover{color:var(--ink)}
.srch__go svg,.srch__x svg{width:18px; height:18px}

.hdr__acts{display:flex; align-items:center; justify-content:flex-end; gap:2px}
.iconbtn{position:relative; display:grid; place-items:center; min-width:44px;
  min-height:44px; color:var(--ink); transition:color .2s}
.iconbtn:hover{color:var(--pop)}
.iconbtn svg{width:21px; height:21px}
.iconbtn--wish.has svg{fill:var(--pop); stroke:var(--pop)}
.pill{position:absolute; inset-block-start:4px; inset-inline-start:4px;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--pop); color:#fff; font-size:10px; line-height:17px;
  text-align:center; font-weight:700}
#navBtn{display:none}

/* nav */
.nav{display:flex; justify-content:center; align-items:center; gap:34px;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--edge);
  min-height:44px; border-block-start:1px solid var(--line)}
.nav__i{position:relative}
.nav__i > a,.nav__i > button{display:inline-flex; align-items:center; min-height:44px;
  font-size:13px; font-weight:400; color:var(--ink); white-space:nowrap;
  border-block-end:2px solid transparent; transition:border-color .2s, color .2s}
.nav__i:hover > a,.nav__i:hover > button,.nav__i.on > a,.nav__i.on > button{
  border-block-end-color:var(--ink)}
.nav__i--pop > a,.nav__i--pop > button{color:var(--pop); font-weight:700}
.nav__i--pop:hover > a,.nav__i--pop:hover > button{border-block-end-color:var(--pop)}

/* promotion */
.promo{display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; min-height:44px; padding:9px var(--edge);
  background:var(--pop); color:#fff; font-size:13px; text-align:center;
  overflow:hidden; transition:min-height .28s ease, padding .28s ease, opacity .2s}
.promo b{font-weight:800}
.promo span{opacity:.94}
.promo u{text-underline-offset:3px}
.promo:hover u{text-decoration-thickness:2px}
.hdr.is-stuck .promo{min-height:0; height:0; padding-block:0; opacity:0}

/* mega menu — translucent, so the page reads through it */
.mega{position:absolute; inset-inline:0; inset-block-start:100%; z-index:55;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-block-end:1px solid var(--line); box-shadow:0 26px 46px -34px rgba(0,0,0,.3);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s}
.mega.on{opacity:1; visibility:visible; transform:none}
.mega__in{max-width:var(--wrap); margin-inline:auto; padding:var(--s5) var(--edge);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 300px; gap:var(--s5)}
.mega h4{font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--muted);
  margin-block-end:14px; min-height:16px}
.mega ul{display:grid; gap:1px}
.mega li a{display:inline-flex; align-items:center; min-height:36px; font-size:14px;
  color:var(--ink-2); transition:color .2s}
.mega li a:hover{color:var(--pop)}
.mega__c{color:var(--faint); font-size:12px; margin-inline-start:5px}
.mega__promo{position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--tile)}
.mega__promo img{width:100%; height:100%; object-fit:contain}
.mega__promo span{position:absolute; inset-block-end:0; inset-inline:0; padding:14px;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);
  color:#fff; font-size:13px; font-weight:700}

/* ==========================================================================
   BUTTONS — square, like the reference. The primary action is the only
   saturated control on the page, and it is the same magenta as the promotion
   so the eye learns one colour and follows it to checkout.
   ========================================================================== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 26px; border-radius:0;
  font-family:var(--ar); font-size:14px; font-weight:700;
  border:1px solid var(--ink); color:var(--ink); background:var(--white);
  transition:background .2s, color .2s, border-color .2s; text-align:center}
.btn svg{width:18px; height:18px; flex:none}
.btn:hover{background:var(--ink); color:#fff}
.btn--buy{background:var(--pop); border-color:var(--pop); color:#fff}
.btn--buy:hover{background:var(--pop-d); border-color:var(--pop-d); color:#fff}
.btn--dark{background:var(--ink); border-color:var(--ink); color:#fff}
.btn--dark:hover{background:#000; border-color:#000}
.btn--wa{background:var(--ok); border-color:var(--ok); color:#fff}
.btn--wa:hover{background:var(--ok-d); border-color:var(--ok-d); color:#fff}
.btn--ghost{border-color:rgba(255,255,255,.65); color:#fff; background:transparent}
.btn--ghost:hover{background:#fff; color:var(--ink); border-color:#fff}
/* ghost is white-on-dark, for the catalogue teaser and the editorial break.
   The hero sits on ivory, so its secondary action uses the outlined variant. */
.btn--line{border-color:var(--line-2)}
.btn--lg{min-height:54px; padding:0 34px; font-size:15px}
.btn--full{width:100%}

/* ---------- sections ---------- */
.sec{padding-block:var(--s6)}
.sec--tight{padding-block:var(--s5)}
.sec--ink{background:var(--ink); color:#fff}
.sec--wash{background:var(--wash)}
.sec__head{text-align:center; max-width:760px; margin-inline:auto; margin-block-end:var(--s5)}
.sec__eyebrow{font-size:11px; font-weight:800; letter-spacing:.2em; color:var(--pop);
  margin-block-end:10px}
.sec--ink .sec__eyebrow{color:#F09BD6}
.sec__head h2{font-size:clamp(24px,2.4vw,32px); font-weight:500; line-height:1.25}
.sec__head p{color:var(--muted); font-size:15px; margin-block-start:14px; max-width:64ch;
  margin-inline:auto; line-height:1.75}
.sec--ink .sec__head p{color:#B4B4B4}
.h-sm{font-size:22px; font-weight:500}

/* ==========================================================================
   HERO
   ========================================================================== */
/* One full-bleed photograph. The banner in build/hero.py was extended so its
   right half is empty CHANEL wall; the Arabic is set on that wall in ink, so
   nothing here has to darken the picture to stay legible. Text is first in the
   DOM and aligned to the inline start, which is the right under RTL. */
/* Full screen. The header is sticky and --hdr tall, so subtracting it lands
   the photograph exactly on the fold: nothing else is visible until you
   scroll. The floor keeps it sane on a short laptop in landscape. */
.hero{position:relative; display:flex; align-items:center; overflow:hidden;
  min-height:max(560px, calc(100vh - var(--hdr))); background:var(--tile);
  isolation:isolate}
.hero__bg{position:absolute; inset:0; z-index:-1}
/* 0% pins the left edge, so as the window narrows the crop eats the empty
   marble on the right rather than walking the figure and the car out of shot. */
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:0% 50%}

.hero__in{position:relative; display:flex; flex-direction:column;
  align-items:flex-start; gap:17px; padding-block:var(--s5); max-width:560px;
  margin-inline-start:0; margin-inline-end:auto}

.hero__eyebrow{font-size:11px; font-weight:800; letter-spacing:.26em;
  color:var(--muted)}
.hero h1{display:flex; flex-direction:column; font-size:clamp(34px,4.6vw,62px);
  font-weight:800; line-height:1.14; letter-spacing:-.012em; color:var(--ink)}
.hero__l--2{color:var(--gold)}
.hero__lead{color:var(--ink-2); font-size:clamp(15px,1.2vw,18px); line-height:1.8}

.hero__cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-block-start:8px}
/* The second action is a link, not a second button -- two buttons of equal
   weight in a hero is what made this read as a landing page. */
.hero__wa{display:inline-flex; align-items:center; gap:8px; font-size:13.5px;
  font-weight:700; color:var(--ink); border-block-end:1px solid var(--line-2);
  padding-block-end:3px}
.hero__wa:hover{border-color:var(--ink)}
.hero__wa svg{width:17px; height:17px}

@media (max-width:980px){
  /* Phones get the untouched portrait frame as a block above the type; the
     banner crop has nothing to give at 390px wide. */
  .hero{display:block; min-height:0; padding-block-end:var(--s5)}
  .hero__bg{position:relative; inset:auto; display:block; aspect-ratio:4/5}
  .hero__in{max-width:none; padding-block:var(--s4) 0; gap:14px}
  .hero h1{font-size:clamp(30px,8.4vw,40px)}
}

/* ---------- trust strip ---------- */
.trust{display:grid; grid-template-columns:repeat(4,1fr); border-block-end:1px solid var(--line)}
.trust__i{display:flex; align-items:center; justify-content:center; gap:12px;
  padding:18px var(--s3); text-align:start; border-inline-start:1px solid var(--line)}
.trust__i:first-child{border-inline-start:0}
.trust__i svg{width:24px; height:24px; stroke:var(--ink); flex:none}
.trust__i b{display:block; font-size:13.5px; font-weight:700}
.trust__i span{display:block; font-size:12px; color:var(--muted); margin-block-start:2px}

/* ---------- CRO badge row ---------- */
.badges{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
  padding-block:var(--s4)}
.badge-c{display:flex; align-items:flex-start; gap:12px; padding:16px 18px;
  border:1px solid var(--line); background:var(--white)}
.badge-c svg{width:22px; height:22px; stroke:var(--pop); flex:none; margin-block-start:2px}
.badge-c b{display:block; font-size:13.5px; font-weight:700}
.badge-c span{display:block; font-size:12.5px; color:var(--muted); margin-block-start:3px;
  line-height:1.6}

.flags{display:flex; justify-content:center; align-items:center; gap:var(--s4);
  flex-wrap:wrap; padding:var(--s3) var(--s2)}
.flag{display:flex; align-items:center; gap:8px}
.flag__img{width:26px; height:17px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.flag span{font-size:12px; color:var(--muted)}
.flags--dark span{color:#AFAFAF}

/* ==========================================================================
   CATALOGUE — filter rail plus a four-up grid, the reference layout exactly.
   ========================================================================== */
.cat__head{text-align:center; margin-block-end:var(--s4)}
.cat__head .sec__eyebrow{color:var(--muted)}
.cat__head h2{font-size:20px; font-weight:700; margin-block-end:12px}
.cat__head p{color:var(--muted); font-size:14px; max-width:72ch; margin-inline:auto;
  line-height:1.75}
/* THE FILTER — one row of houses.
   This replaced a 252px sidebar carrying three accordions (shape, house,
   colour) plus a row of shape shortcuts above it. Fifty pieces do not need
   three axes, and three axes give a shopper three ways to land on an empty
   grid. The grid also gets the sidebar's width back. */
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin-block:var(--s4) var(--s3)}
.chip{display:inline-flex; align-items:center; gap:7px; min-height:40px;
  padding:0 16px; border:1px solid var(--line-2); background:var(--white);
  font-family:var(--ar); font-size:13px; font-weight:700; color:var(--ink-2);
  transition:background .18s, color .18s, border-color .18s}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.chip em{font-style:normal; font-size:11.5px; color:var(--faint)}
.chip.on em{color:rgba(255,255,255,.66)}

.cat__bar{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding-block:var(--s3); border-block:1px solid var(--line);
  margin-block-end:var(--s3)}

.cat__count{font-size:13px; color:var(--muted)}
.sortbox{position:relative}
.sortbox select{min-width:220px; min-height:44px; padding-inline:14px 34px;
  border:1px solid var(--line-2); background:var(--white); appearance:none;
  font-family:var(--ar); font-size:13px; color:var(--ink); cursor:pointer}
.sortbox select:hover{border-color:var(--ink)}
.sortbox::after{content:''; position:absolute; inset-inline-start:14px; inset-block-start:19px;
  width:7px; height:7px; border-inline-start:1px solid var(--ink);
  border-block-end:1px solid var(--ink); transform:rotate(-45deg); pointer-events:none}

.active-f{display:flex; gap:8px; flex-wrap:wrap; margin-block-end:var(--s3)}
.active-f button{display:inline-flex; align-items:center; gap:8px; min-height:34px;
  padding:0 12px; border:1px solid var(--line-2); font-size:12.5px}
.active-f button::after{content:'✕'; font-size:11px; color:var(--muted)}
.active-f button:hover{border-color:var(--ink)}

/* ---------- product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4) var(--s3)}
.grid--wide{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{position:relative; display:flex; flex-direction:column}
.card__link{display:flex; flex-direction:column; flex:1}
/* The photographs behind these are all different -- marble, wood, a box, grey
   seamless -- so what makes the grid read as one shop is this frame: same 3:4
   window, same hairline, same spacing, on all fifty. 3:4 is the shape most of
   the supplier frames were shot in, so cover crops almost nothing. */
.card__media{position:relative; aspect-ratio:3/4; background:var(--tile);
  overflow:hidden; border:1px solid var(--line)}
.card__media img{width:100%; height:100%; object-fit:cover; transition:opacity .45s, transform .6s}
.card__media img.alt{position:absolute; inset:0; opacity:0}
.card:hover .card__media img.main{opacity:0}
.card:hover .card__media img.alt{opacity:1; transform:scale(1.02)}
.card__body{padding-block-start:12px; display:flex; flex-direction:column; gap:4px; flex:1}
.card__brand{font-family:var(--lat); font-size:12px; font-weight:500; letter-spacing:.05em;
  color:var(--muted); text-transform:uppercase}
.card__name{font-size:14px; font-weight:400; line-height:1.5; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* PRICE — selling price, the price it is marked down from, and the badge.
   The percentage on the badge is computed from the two numbers in
   build/pricing.py, so it can never contradict them. */
.price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-family:var(--lat)}
.price b{font-size:15px; font-weight:600; color:var(--ink)}
.price s{font-size:12.5px; color:var(--faint); text-decoration-thickness:1px}
.price .off{font-style:normal; font-family:var(--ar); font-size:11px;
  font-weight:800; line-height:1; padding:4px 6px; color:#fff;
  background:#C81E1E; letter-spacing:.02em; unicode-bidi:isolate}
.price--lg b{font-size:26px}
.price--lg s{font-size:15px}
.price--lg .off{font-size:12.5px; padding:5px 8px}
.card__price{margin-block-start:2px}
.card__meta{font-size:12px; color:var(--faint); margin-block-start:auto; padding-block-start:6px}
.dots{display:flex; gap:5px; margin-block-start:8px}
.dot{width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.card__acts{display:flex; align-items:center; gap:8px; padding-block-start:10px}
.card__buy{flex:1; min-height:44px; background:var(--pop); color:#fff; font-size:12.5px;
  font-weight:700; display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s}
.card__buy:hover{background:var(--pop-d)}
.card__wa{display:grid; place-items:center; min-width:44px; min-height:44px;
  border:1px solid var(--line-2); color:var(--ok); transition:all .2s}
.card__wa:hover{background:var(--ok); color:#fff; border-color:var(--ok)}
.card__wa svg{width:17px; height:17px}
.tag{position:absolute; inset-block-start:8px; inset-inline-end:8px; z-index:2;
  font-size:10.5px; font-weight:700; color:#fff; background:var(--ink); padding:4px 8px}
.tag--pop{background:var(--pop)}
.heart{position:absolute; inset-block-start:4px; inset-inline-start:4px; z-index:3;
  display:grid; place-items:center; width:44px; height:44px; color:var(--ink)}
.heart svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5;
  transition:transform .2s}
.heart:hover svg{transform:scale(1.12)}
.heart.on svg{fill:var(--pop); stroke:var(--pop)}

/* ---------- supplier watermarks ----------
   A slice of the catalogue photography carries a small Chinese caption or a
   shop stamp in one corner. Every surface that shows an unmodified supplier
   frame is therefore zoomed a few per cent inside its own box, which trims the
   outer band where those marks sit. The cut is small -- 4% on the product
   gallery, where losing edge detail matters, and 6% on the rest. The cut-out
   tiles and the generated community frames are clean and are left alone. */
.rev__ph img,.tpic img{transform:scale(1.13)}
/* The product gallery no longer crops the main image: its frames were each
   checked by eye for a burnt-in supplier caption, and .pd__main contains
   rather than covers. Thumbnails stay square crops. */

/* ==========================================================================
   MARQUEE
   The track is forced to LTR so the flex row starts at the left edge and its
   width is predictable; the animation then walks it from -50% to 0, which
   reads as movement to the right. The list is repeated until it is at least
   twice the widest viewport, so the row is never seen to end -- an empty tail
   is what gives a marquee away.
   ========================================================================== */
.mq{position:relative; overflow:hidden; direction:ltr;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.mq__track{display:flex; align-items:stretch; gap:var(--s3); width:max-content;
  animation:mq var(--dur,60s) linear infinite; will-change:transform}
.mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(-50%)} to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .mq__track{animation:none; transform:none}
  .mq{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
}
.mq__item{direction:rtl}

.mq--stories .story{flex:0 0 170px; width:170px}
.story{position:relative; aspect-ratio:9/16; overflow:hidden; background:#191919; cursor:pointer}
.story img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.story:hover img{transform:scale(1.05)}
.story__play{position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%)}
.story__play svg{width:30px; height:30px; fill:#fff; stroke:none}
.story__tag{position:absolute; inset-block-end:10px; inset-inline:8px; color:#fff;
  font-size:10.5px; text-align:center; opacity:.94}

/* ---------- reviews ----------
   Photo first. A review card that leads with a wall of text is skipped; one
   that leads with the customer's own photograph of the bag gets read, and the
   piece she bought is named at the foot so the claim is attached to something
   the shopper can click. */
.rev{flex:0 0 306px; width:306px; display:flex; flex-direction:column;
  border:1px solid var(--line); background:var(--white); overflow:hidden}
.rev__ph{position:relative; flex:none; aspect-ratio:1/1; background:var(--tile)}
.rev__ph img{width:100%; height:100%; object-fit:cover}
.rev__badge{position:absolute; inset-block-start:10px; inset-inline-start:10px;
  display:inline-flex; align-items:center; gap:5px; padding:5px 9px;
  background:rgba(255,255,255,.94); font-size:10.5px; font-weight:700; color:var(--ok)}
.rev__badge svg{width:12px; height:12px; stroke:var(--ok); stroke-width:2.6}
.rev__in{display:flex; flex-direction:column; gap:10px; padding:16px; flex:1}
.stars{display:flex; gap:2px; color:#E8A33D}
.stars svg{width:15px; height:15px; fill:currentColor; stroke:none}
.rev p{font-size:13.5px; color:var(--ink-2); line-height:1.75}
.rev__who{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted)}
.rev__who b{color:var(--ink); font-weight:700}
.rev__who .flag__img{width:18px; height:12px}
.rev__prod{display:flex; align-items:center; gap:10px; margin-block-start:auto;
  padding-block-start:12px; border-block-start:1px solid var(--line)}
.rev__prod img{width:42px; height:63px; object-fit:cover; flex:none; background:var(--tile)}
.rev__prod span{font-size:11px; color:var(--faint); display:block}
.rev__prod b{font-size:12.5px; font-weight:700; color:var(--ink); display:block;
  line-height:1.4; margin-block-start:2px}
.rev__note{text-align:center; color:var(--muted); font-size:13px;
  border:1px dashed var(--line-2); padding:var(--s4)}
.rev__note b{display:block; color:var(--ink); font-size:15px; margin-block-end:6px}
.rev__note code{font-family:var(--lat); background:var(--wash); padding:2px 6px}

/* ==========================================================================
   COMMUNITY GALLERY — what customers post after the bag lands.

   These used to be drawn in CSS: a photograph with an Instagram header, a
   Snapchat caption band or WhatsApp bubbles laid over it. It read as a web
   component doing an impression of a screenshot. Each tile is now one whole
   generated screenshot -- status bar, app chrome, bubbles, ticks and the
   customer's photograph in a single frame -- so all this stylesheet owes it
   is a phone to sit in. See build/social_gen.py.
   ========================================================================== */
.cg{flex:0 0 238px; width:238px; display:flex; flex-direction:column; gap:9px}
.cg__ph{padding:5px; background:#101010; border-radius:26px;
  box-shadow:0 14px 34px rgba(0,0,0,.17)}
.cg__ph img{display:block; width:100%; aspect-ratio:2/3; object-fit:cover;
  border-radius:21px}
.cg__cap{display:flex; align-items:baseline; gap:7px; padding-inline:4px;
  font-size:12.5px; font-weight:700; color:var(--ink)}
.cg__cap span{font-size:11px; font-weight:400; color:var(--muted);
  letter-spacing:.02em}

/* ==========================================================================
   EDITORIAL BREAK — a full-bleed photograph with the copy sitting on it.
   ========================================================================== */
.editorial{position:relative; min-height:clamp(340px,46vh,460px); display:flex;
  align-items:center; background:var(--ink); overflow:hidden; isolation:isolate}
.editorial > img{position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover}
.editorial::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to left,rgba(0,0,0,.72) 0%,rgba(0,0,0,.46) 38%,
             rgba(0,0,0,.08) 70%,rgba(0,0,0,0) 88%)}
.editorial__in{position:relative; max-width:var(--wrap); margin-inline:auto; width:100%;
  padding:var(--s5) var(--edge); display:flex; flex-direction:column;
  align-items:flex-start; gap:14px}
.editorial__in > span{font-size:11px; font-weight:800; letter-spacing:.24em; color:#F3C8E5}
.editorial__in h2{font-size:clamp(23px,2.9vw,38px); font-weight:800; line-height:1.32;
  color:#fff; max-width:16ch}
.editorial__in p{color:#E4E4E4; font-size:15px; max-width:48ch; line-height:1.75}

/* ==========================================================================
   CATALOGUE TEASER — the 95,000. A dark full-bleed band with one moving row
   of real pieces underneath, rather than a boxed collage.
   ========================================================================== */
.teaser{background:var(--ink); color:#fff; padding-block:var(--s6) 0; overflow:hidden}
.teaser__in{text-align:center; max-width:720px; margin-inline:auto;
  padding-inline:var(--edge)}
.teaser__big{font-family:var(--lat); font-size:clamp(52px,8vw,104px); font-weight:300;
  line-height:.95; letter-spacing:-.02em}
.teaser__k{font-size:11px; font-weight:800; letter-spacing:.24em; color:#F09BD6;
  margin-block:14px 18px}
.teaser h2{font-size:clamp(22px,2.4vw,30px); font-weight:500; margin-block-end:14px}
.teaser p{color:#B4B4B4; font-size:15px; line-height:1.8}
.teaser__cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-block-start:var(--s4)}
.teaser__rail{margin-block-start:var(--s5)}
.teaser__rail .mq{-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.tpic{flex:0 0 150px; width:150px; aspect-ratio:2/3; background:var(--tile)}
.tpic img{width:100%; height:100%; object-fit:cover}

/* ---------- figures ---------- */
.figs{display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line);
  margin-block-end:var(--s5)}
.fig{padding:var(--s4) var(--s2); text-align:center; border-inline-start:1px solid var(--line)}
.fig:first-child{border-inline-start:0}
.fig b{display:block; font-size:clamp(26px,2.8vw,36px); font-weight:800; line-height:1}
.fig span{display:block; font-size:12px; color:var(--muted); margin-block-start:10px}

/* ---------- steps / deposit ---------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s3);
  margin-block-end:var(--s5)}
.step{padding-block-start:var(--s3); border-block-start:2px solid var(--ink)}
.step__n{display:block; font-family:var(--lat); font-size:13px; font-weight:500;
  letter-spacing:.2em; color:var(--pop); margin-block-end:10px}
.step h3{font-size:16.5px; font-weight:700; margin-block-end:8px}
.step p{color:var(--muted); font-size:13.5px; line-height:1.7}

.deposit{display:grid; grid-template-columns:1.15fr 1fr; gap:var(--s5);
  padding:var(--s5) var(--s4); border:1px solid var(--line); background:var(--wash)}
.deposit h3{display:flex; align-items:center; gap:12px; font-size:20px; font-weight:700;
  margin-block-end:14px}
.deposit h3 svg{width:22px; height:22px; stroke:var(--pop); flex:none}
.deposit p{font-size:14.5px; color:var(--ink-2); line-height:1.85}
.deposit__pts{display:grid; align-content:center}
.deposit__pts li{display:flex; gap:11px; align-items:flex-start; font-size:14px;
  padding-block:12px; border-block-start:1px solid var(--line)}
.deposit__pts li:first-child{border-block-start:0}
.deposit__pts svg{width:15px; height:15px; stroke:var(--ok); flex:none; margin-block-start:5px;
  stroke-width:2.4}

/* ---------- why / objections ---------- */
.why{display:grid; grid-template-columns:repeat(3,1fr)}
.why__i{padding:var(--s4) var(--s3); border-block-start:1px solid var(--line);
  border-inline-start:1px solid var(--line)}
.why__i:nth-child(3n+1){border-inline-start:0}
.why__i:nth-child(-n+3){border-block-start:0}
.why__i svg{width:24px; height:24px; stroke:var(--ink); margin-block-end:14px}
.why__i h3{font-size:16px; font-weight:700; margin-block-end:8px}
.why__i p{color:var(--muted); font-size:13.5px; line-height:1.7}
.objs{display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--s5)}
.obj{padding-block:var(--s4); border-block-start:1px solid var(--line)}
.obj__i{margin-block-end:14px}
.obj__i svg{width:22px; height:22px; stroke:var(--pop)}
.obj h3{font-size:16.5px; font-weight:700; margin-block-end:10px}
.obj p{color:var(--muted); font-size:13.5px; line-height:1.75}

/* ---------- FAQ ---------- */
.faq{max-width:880px; margin-inline:auto}
.qa{border-block-end:1px solid var(--line)}
.qa__q{width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding-block:var(--s3); min-height:56px; text-align:start;
  font-size:15px; font-weight:700}
.qa__q:hover{color:var(--pop)}
.qa__q svg{width:16px; height:16px; flex:none; transition:transform .3s}
.qa.on .qa__q svg{transform:rotate(135deg)}
.qa__a{max-height:0; overflow:hidden; transition:max-height .4s ease}
.qa.on .qa__a{max-height:520px}
.qa__a p{margin-block-end:var(--s3); color:var(--muted); font-size:14px; max-width:74ch;
  line-height:1.8}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s5); align-items:center}
.contact h2{font-size:clamp(22px,2.4vw,32px); font-weight:500; margin-block-end:12px}
.contact p{color:#B4B4B4; margin-block-end:var(--s4); line-height:1.75}
.contact__list{display:grid; margin-block-end:var(--s4)}
.contact__row{display:flex; align-items:center; gap:14px; font-size:14px;
  padding-block:14px; border-block-start:1px solid rgba(255,255,255,.16)}
.contact__row:last-child{border-block-end:1px solid rgba(255,255,255,.16)}
.contact__row svg{width:18px; height:18px; stroke:#F09BD6; flex:none}

/* ==========================================================================
   PRODUCT PAGE — gallery on the right with a thumbnail rail beside it, copy
   on the left, accordions beneath. The reference layout, at its measurements.
   ========================================================================== */
.crumb{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px;
  color:var(--muted); padding-block:var(--s3)}
.crumb a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.pd{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:var(--s5);
  align-items:start; padding-block-end:var(--s5)}
/* The thumbnail rail is positioned rather than laid out in the grid, so its
   height is the image's height exactly and a piece with 24 photographs does
   not push the column past the bottom of the picture. */
.pd__gal{position:sticky; inset-block-start:calc(var(--hdr) + 12px)}
.pd__main{position:relative; aspect-ratio:2/3; background:var(--tile); overflow:hidden;
  margin-inline-start:80px}
/* contain, not cover: the twenty-four supplier frames are every shape from
   1:1 to wide, and cropping them to 2:3 was slicing handles off the bags that
   happened to be photographed in landscape. The whole chosen frame is shown
   inside one constant window instead, which is also what makes fifty different
   photographs sit consistently on fifty product pages. */
.pd__main img{width:100%; height:100%; object-fit:contain; padding:14px}
.pd__arrow{position:absolute; inset-block-start:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; background:rgba(255,255,255,.9); display:grid; place-items:center}
.pd__arrow:hover{background:#fff}
.pd__arrow--p{inset-inline-end:0} .pd__arrow--n{inset-inline-start:0}
.pd__arrow svg{width:17px; height:17px}
.pd__i{position:absolute; inset-block-end:12px; inset-inline-start:12px; z-index:2;
  background:rgba(0,0,0,.68); color:#fff; font-size:11.5px; padding:5px 10px}
.pd__thumbs{position:absolute; inset-block:0; inset-inline-start:0; width:68px;
  display:grid; gap:8px; align-content:start; overflow-y:auto; scrollbar-width:none}
.pd__thumbs::-webkit-scrollbar{display:none}
.pd__t{aspect-ratio:2/3; overflow:hidden; background:var(--tile);
  border:1px solid transparent}
.pd__t.on{border-color:var(--ink)}
.pd__t img{width:100%; height:100%; object-fit:cover}

.pd__brand{font-family:var(--lat); font-size:13px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin-block-end:8px}
.pd h1{font-size:clamp(20px,2vw,24px); font-weight:700; line-height:1.4; margin-block-end:12px}
.pd__price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-block-end:8px}
.pd__price b{font-family:var(--lat); font-size:30px; font-weight:400; letter-spacing:.01em}
.pd__price span{font-size:12px; color:var(--muted)}
.pd__flags{display:flex; gap:8px; flex-wrap:wrap; margin-block-end:var(--s3)}
.tagline{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  padding:6px 11px}
.tagline--pop{color:var(--pop); background:#FCEBF6}
.tagline--ok{color:var(--ok); background:#EEF6F1}
.tagline--ink{color:var(--ink); background:var(--wash)}
.tagline svg{width:14px; height:14px; stroke-width:2}
.pd__lede{color:var(--ink-2); font-size:15px; line-height:1.85; margin-block-end:var(--s3)}

/* colour picker */
.pd__opt{margin-block-end:var(--s3)}
.pd__opt__h{font-size:13px; color:var(--muted); margin-block-end:10px}
.pd__opt__h b{color:var(--ink); font-weight:700}
.swatches{display:flex; gap:10px; flex-wrap:wrap}
.sw{display:grid; place-items:center; width:44px; height:44px; border:1px solid transparent}
.sw i{width:26px; height:26px; border-radius:50%; display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.sw.on{border-color:var(--ink)}

.pd__urgency{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700;
  color:var(--pop); margin-block-end:12px}
.pd__urgency svg{width:16px; height:16px; stroke:var(--pop); stroke-width:2}
.pd__cta{display:grid; gap:10px}
.pd__note{display:flex; align-items:flex-start; justify-content:center; gap:8px;
  font-size:12.5px; color:var(--muted); margin-block-start:12px; text-align:center;
  line-height:1.6}
.pd__note svg{width:15px; height:15px; stroke:var(--ok); flex:none; margin-block-start:3px}
.pd__share{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted);
  margin-block-start:var(--s3)}
.pd__share button,.pd__share a{display:grid; place-items:center; width:44px; height:44px;
  color:var(--ink-2)}
.pd__share button:hover,.pd__share a:hover{color:var(--pop)}
.pd__share svg{width:17px; height:17px}

.pd__steps{padding-block-start:var(--s3); margin-block-start:var(--s3);
  border-block-start:1px solid var(--line); display:grid;
  grid-template-columns:repeat(5,1fr); gap:10px}
.pd__steps li{display:flex; flex-direction:column; align-items:center; gap:7px;
  text-align:center; font-size:11.5px; color:var(--muted); line-height:1.45}
.pd__steps span{display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--ink); color:#fff; font-family:var(--lat); font-size:12px}
.pd__badges{display:grid; grid-template-columns:repeat(2,1fr);
  border-block-start:1px solid var(--line); margin-block-start:var(--s3)}
.pd__b{display:flex; align-items:center; gap:11px; font-size:12.5px; color:var(--ink-2);
  padding-block:13px}
.pd__b svg{width:19px; height:19px; stroke:var(--ink); flex:none}

/* accordions, the reference's الوصف / القياسات / الشحن */
.acc{margin-block-start:var(--s4)}
.acc__i{border-block-start:1px solid var(--line)}
.acc__i:last-child{border-block-end:1px solid var(--line)}
.acc__b{width:100%; display:flex; align-items:center; justify-content:space-between;
  min-height:56px; font-size:14.5px; font-weight:700; text-align:start}
.acc__b i{position:relative; width:13px; height:13px; flex:none}
.acc__b i::before,.acc__b i::after{content:''; position:absolute; background:var(--ink);
  inset-block-start:6px; inset-inline-start:0; width:13px; height:1.5px; transition:transform .25s}
.acc__b i::after{transform:rotate(90deg)}
.acc__i.on .acc__b i::after{transform:rotate(0)}
.acc__p{max-height:0; overflow:hidden; transition:max-height .35s ease}
.acc__i.on .acc__p{max-height:900px}
.acc__p > div{padding-block-end:var(--s3); font-size:14px; color:var(--ink-2); line-height:1.85}
.pd__spec{display:grid}
.pd__row{display:grid; grid-template-columns:118px 1fr; gap:var(--s2); font-size:13.5px;
  padding-block:11px; border-block-end:1px solid var(--line)}
.pd__row:last-child{border-block-end:0}
.pd__row dt{color:var(--muted)}
.pd__row dd{font-weight:700}
.pd__feats{display:grid}
.pd__feats li{display:flex; gap:11px; align-items:flex-start; font-size:13.5px;
  padding-block:10px}
.pd__feats svg{width:14px; height:14px; stroke:var(--ok); flex:none; margin-block-start:5px;
  stroke-width:2.4}

/* ---------- sticky buy ---------- */
.stickybuy{position:fixed; inset-inline:0; inset-block-end:0; z-index:58;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:10px var(--edge); background:#fff; border-block-start:1px solid var(--line);
  box-shadow:0 -6px 20px -14px rgba(0,0,0,.4);
  transform:translateY(110%); transition:transform .32s ease}
.stickybuy.on{transform:none}
.stickybuy__in{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); max-width:var(--wrap); margin-inline:auto; width:100%}
.stickybuy__t{min-width:0}
.stickybuy__t b{display:block; font-size:13.5px; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.stickybuy__t span{font-size:11.5px; color:var(--muted)}
.stickybuy .btn{min-height:46px; padding:0 24px; flex:none}
body.has-stickybuy .fab{opacity:0; pointer-events:none}

/* ---------- order sheet ---------- */
.sheet{position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.5);
  display:grid; place-items:center; padding:var(--s2); overflow-y:auto}
.sheet[hidden]{display:none}
.sheet__box{background:#fff; width:min(620px,100%); max-height:92vh; overflow-y:auto}
.sheet__head{position:sticky; inset-block-start:0; z-index:2; background:#fff; display:flex;
  align-items:center; justify-content:space-between; padding:var(--s3);
  border-block-end:1px solid var(--line)}
.sheet__head h2{font-size:19px; font-weight:700}
.sheet__x{display:grid; place-items:center; width:44px; height:44px; color:var(--muted)}
.sheet__x:hover{color:var(--ink)}
.sheet__x svg{width:18px; height:18px}
.sheet__body{padding:var(--s3)}
.sheet__prod{display:flex; gap:14px; align-items:center; padding-block-end:var(--s3);
  margin-block-end:var(--s3); border-block-end:1px solid var(--line)}
.sheet__prod img{width:60px; height:90px; object-fit:cover; flex:none; background:var(--tile)}
.sheet__prod b{display:block; font-size:15px; font-weight:700}
.sheet__prod span{font-size:12.5px; color:var(--muted)}
.sheet__sub{color:var(--muted); font-size:14px; margin-block-end:var(--s3); line-height:1.7}
.sheet__grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) var(--s2)}
.fld{display:flex; flex-direction:column; gap:7px}
.fld:last-of-type{grid-column:1/-1}
.fld__l{font-size:12.5px; font-weight:700; color:var(--ink-2)}
.fld__l b{color:var(--pop)}
.fld__i{min-height:48px; padding:0 12px; border:1px solid var(--line-2); background:#fff;
  font-family:var(--ar); font-size:15px; border-radius:0; transition:border-color .2s}
.fld__i:focus{outline:none; border-color:var(--ink)}
.fld__i.is-bad{border-color:var(--pop)}
.fld__e{font-size:12px; color:var(--pop)}
select.fld__i{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:left 16px top 21px,left 11px top 21px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.sheet__re{display:flex; gap:11px; align-items:flex-start; margin-block:var(--s3);
  padding:13px 14px; background:#EEF6F1; font-size:13px; color:var(--ink-2); line-height:1.6}
.sheet__re svg{width:17px; height:17px; stroke:var(--ok); flex:none; margin-block-start:2px}
.sheet__acts{display:grid; gap:10px}

/* ---------- float ---------- */
.fab{position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:59;
  width:54px; height:54px; background:var(--ok); color:#fff; display:grid; place-items:center;
  border-radius:50%; box-shadow:0 6px 20px rgba(31,122,77,.35);
  transition:transform .2s, opacity .25s}
.fab:hover{transform:scale(1.06)}
.fab svg{width:27px; height:27px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ft{background:var(--ink); color:#B4B4B4; margin-block-start:var(--s6)}
.ft__mast{border-block-end:1px solid #2A2A2A}
.ft__mast__in{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding-block:var(--s4); flex-wrap:wrap}
.ft__brand .brand__w{font-size:22px; color:#fff}
.ft__brand .brand__w i{background:var(--pop)}
.ft__social{display:flex; gap:10px}
.ft__social a{display:grid; place-items:center; width:44px; height:44px;
  border:1px solid #3A3A3A; color:#fff; transition:background .2s, border-color .2s, color .2s}
.ft__social a:hover{background:#fff; color:var(--ink); border-color:#fff}
.ft__social svg{width:19px; height:19px}
.ft__cols{display:grid; grid-template-columns:repeat(4,1fr) 1.15fr; gap:var(--s5);
  padding-block:var(--s5)}
.ft h4{color:#fff; font-size:12.5px; font-weight:800; letter-spacing:.08em;
  margin-block-end:var(--s3)}
.ft__h4-2{margin-block-start:var(--s4)}
.ft ul{display:grid; font-size:13.5px}
.ft ul a{display:inline-flex; align-items:center; min-height:44px; transition:color .2s}
.ft a:hover{color:#fff; text-decoration:underline; text-underline-offset:4px}
.ft__ship{display:flex; gap:12px; flex-wrap:wrap}
.ft__ship .flag__img{width:26px; height:17px}
.ft__pay{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ft__pay span{font-size:11.5px; border:1px solid #3A3A3A; padding:7px 10px; color:#CACACA}
.ft__bottom{border-block-start:1px solid #2A2A2A; padding-block:var(--s3); display:flex;
  justify-content:space-between; gap:var(--s3); flex-wrap:wrap; font-size:12.5px; color:#868686}
.ft__bottom nav{display:flex; gap:var(--s3); flex-wrap:wrap}
.ft__bottom nav a{display:inline-flex; align-items:center; min-height:34px}

/* ---------- states + motion ---------- */
.boot{display:grid; place-items:center; min-height:60vh; gap:var(--s2); color:var(--muted)}
.spin{width:26px; height:26px; border:2px solid var(--line); border-top-color:var(--ink);
  border-radius:50%; animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center; padding-block:var(--s5); color:var(--muted)}
.empty b{display:block; color:var(--ink); font-size:16px; margin-block-end:8px}
.reveal{opacity:0; transform:translateY(14px);
  transition:opacity .55s ease var(--d,0ms), transform .55s ease var(--d,0ms)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
::selection{background:var(--ink); color:#fff}
.sec,[id]{scroll-margin-block-start:calc(var(--hdr) + 12px)}

/* toast — confirms a favourite without moving the page */
.toast{position:fixed; inset-block-end:24px; inset-inline-start:50%;
  transform:translate(50%,20px); z-index:115; background:var(--ink); color:#fff;
  font-size:13.5px; padding:12px 20px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s}
.toast.on{opacity:1; transform:translate(50%,0)}

/* lightbox */
.lb{position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.95); display:grid;
  place-items:center; padding:var(--s2)}
.lb[hidden]{display:none}
.lb__box{position:relative; width:min(400px,92vw); aspect-ratio:9/16; background:#000}
.lb__box video{width:100%; height:100%; object-fit:contain; background:#000}
.lb__x,.lb__nav{position:absolute; z-index:2; display:grid; place-items:center;
  width:44px; height:44px; color:#fff; background:rgba(0,0,0,.45)}
.lb__x{inset-block-start:10px; inset-inline-end:10px}
.lb__nav{inset-block-start:50%; transform:translateY(-50%)}
.lb__nav--p{inset-inline-end:8px} .lb__nav--n{inset-inline-start:8px}
.lb__x svg,.lb__nav svg{width:19px; height:19px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  /* the chip row already wraps; it needs to scroll, not stack */
  .chips{justify-content:flex-start}
  .mega__in{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4)}
  .mega__promo{display:none}
  .pd{grid-template-columns:1fr; gap:var(--s4)}
  .pd__gal{position:static}
  .deposit,.teaser__in,.contact{grid-template-columns:1fr; gap:var(--s4)}
  .ft__cols{grid-template-columns:repeat(3,1fr); gap:var(--s4)}
}
@media (max-width:900px){
  :root{--s5:36px; --s6:52px; --hdr:142px}
  .grid,.grid--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
  .why,.objs{grid-template-columns:1fr}
  .why__i{border-inline-start:0}
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust__i:nth-child(odd){border-inline-start:0}
  .trust__i:nth-child(n+3){border-block-start:1px solid var(--line)}
  .badges{grid-template-columns:repeat(2,1fr)}
  .figs{grid-template-columns:repeat(2,1fr)}
  .fig:nth-child(odd){border-inline-start:0}
  .fig:nth-child(n+3){border-block-start:1px solid var(--line)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .ft__cols{grid-template-columns:1fr 1fr}
  .nav{gap:var(--s3); justify-content:flex-start; overflow-x:auto;
       scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .mega{display:none}
  .srch{max-width:none}
}
@media (max-width:700px){
  :root{--hdr:150px}
  .hdr__in{grid-template-columns:auto auto auto; min-height:60px}
  .srch{order:3; grid-column:1/-1; max-width:none; margin-block-end:10px}
  .brand{grid-column:2}
  #navBtn{display:grid}
  .grid,.grid--wide{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3) 10px}
  .steps{grid-template-columns:1fr}
  .sheet__grid{grid-template-columns:1fr}
  .sheet{place-items:end center; padding:0}
  .pd__main{margin-inline-start:0}
  .pd__thumbs{position:static; width:auto; grid-template-columns:repeat(5,1fr);
    margin-block-start:8px; overflow:visible}
  .pd__badges,.ft__cols{grid-template-columns:1fr}
  .pd__steps{grid-template-columns:repeat(2,1fr)}
  .brand__w{font-size:17px; letter-spacing:.22em}
  .brand__s{font-size:8.5px}
  .hdr.is-stuck .brand__w{font-size:15px}
  .mq--stories .story{flex:0 0 132px; width:132px}
  .rev{flex:0 0 258px; width:258px}
  .cg{flex:0 0 196px; width:196px}
  .tpic{flex:0 0 116px; width:116px}
  .promo{font-size:12px}
  .promo span{display:none}
}


/* ==========================================================================
   OFFER BAR + QUALITY GRADES — product page
   ========================================================================== */
/* Red, and only here. The magenta promo strip runs on every page and has
   stopped being read; a second colour used in one place for one dated offer
   still gets seen. */
.offerbar{background:#C81E1E; color:#fff}
.offerbar__in{display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap; min-height:46px; padding-block:9px;
  font-size:13px; text-align:center}
.offerbar b{font-weight:800; letter-spacing:.02em}
.offerbar span{opacity:.95}
.offerbar i{font-style:normal; font-size:11px; font-weight:700;
  padding:3px 9px; border:1px solid rgba(255,255,255,.55); letter-spacing:.06em}

/* The three grades. Laid out as a stack of full-width choices rather than
   three columns: the differences are sentences, and sentences in three narrow
   columns do not get read. */
.grades{display:flex; flex-direction:column; gap:9px; margin-block:var(--s3)}
.grades__h{margin-block-end:4px}
.grades__h b{display:block; font-size:15px; font-weight:800; color:var(--ink)}
.grades__h span{display:block; margin-block-start:5px; font-size:12.5px;
  color:var(--muted); line-height:1.75}

.grade{display:block; width:100%; text-align:start; padding:14px 16px;
  border:1px solid var(--line); background:var(--white); cursor:pointer;
  transition:border-color .18s, background .18s}
.grade:hover{border-color:var(--line-2)}
.grade.on{border-color:var(--ink); background:var(--tile)}
.grade__top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.grade__top b{font-size:14.5px; font-weight:800; color:var(--ink)}
.grade__top i{font-style:normal; font-size:10.5px; font-weight:800;
  padding:3px 8px; background:var(--pop); color:#fff; letter-spacing:.04em}
.grade__p{margin-inline-start:auto; font-family:var(--lat); font-size:17px;
  font-weight:600; color:var(--ink)}
.grade__d{display:block; margin-block-start:8px; font-size:12.5px;
  color:var(--ink-2); line-height:1.8}
.grade__l{display:flex; flex-wrap:wrap; gap:6px; margin-block-start:10px}
.grade__l em{font-style:normal; font-size:11px; color:var(--muted);
  padding:4px 9px; background:var(--wash); border:1px solid var(--line)}
.grade.on .grade__l em{background:var(--white)}
.grades__n{display:flex; align-items:flex-start; gap:8px; margin-block-start:4px;
  font-size:12px; color:var(--muted); line-height:1.7}
.grades__n svg{width:15px; height:15px; flex:none; margin-block-start:2px;
  stroke:var(--ok)}

@media (max-width:700px){
  .offerbar__in{gap:8px; font-size:12px}
  .grade__p{margin-inline-start:0; width:100%}
}

/* ---------- materials panel: the exploded view beside its list ---------- */
.matp{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:var(--s5); align-items:center; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--edge)}
.matp__fig{background:var(--tile); padding:var(--s3)}
.matp__fig img{display:block; width:100%; height:auto}
.matp__fig figcaption{margin-block-start:10px; font-size:11.5px;
  color:var(--faint); text-align:center}
.matp__b h2{margin-block-end:12px}
.matp__b p{color:var(--ink-2); font-size:13.5px; line-height:1.9;
  margin-block-end:var(--s3)}
.matp__l{display:flex; flex-direction:column}
.matp__l div{display:flex; gap:14px; padding-block:11px;
  border-block-start:1px solid var(--line); font-size:13px}
.matp__l dt{flex:0 0 88px; color:var(--muted)}
.matp__l dd{color:var(--ink)}
@media (max-width:860px){
  .matp{grid-template-columns:1fr; gap:var(--s4)}
}