/* Taj Alarab — native storefront.
 *
 * The palette is the live theme's. The type is not: the theme sets body copy at
 * weight 300 in a grey that measures 3.25:1 on cream, and that reads as almost
 * nothing on a phone in daylight. Here body copy is weight 400 in ink, and every
 * label colour clears 4.5:1. Square corners, one filled surface per screen, structure
 * from whitespace -- those stay.
 *
 * 1rem = 10px. Inputs are never under 1.6rem: iOS zooms the page on focus below 16px,
 * and inside the Instagram browser it does not zoom back.
 */
:root{
  --paper:#F4F1EA;--ink:#1E1C19;--prose:#3F3B36;--muted:#66615A;--hair:#DCD6CB;
  --palm:#16382E;--palm-deep:#12291F;--sage:#9DB5A8;--copper:#C27760;--copper-ink:#9C5640;
  --night:#141210;
  --sans:'Outfit','Helvetica Neue',Helvetica,Arial,sans-serif;
  --arabic:'IBM Plex Sans Arabic','Outfit',sans-serif;
  --gutter:clamp(2rem,4vw,5.6rem);--measure:144rem;--header-h:7.6rem;
}
/* Self-hosted: the theme serves it from a path tied to the published theme's id (t/5),
   which changes when the theme does. The file is WOFF2 despite its .ttf name there. */
@font-face{font-family:'AThuluth';src:url(/static/fonts/taj-thuluth.woff2) format('woff2');font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%;-webkit-text-size-adjust:100%;scroll-padding-top:var(--header-h)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.6rem;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea,.btn{border-radius:0;font-family:inherit;-webkit-tap-highlight-color:transparent}
button,a,label,select{touch-action:manipulation}
:focus-visible{outline:.2rem solid var(--palm);outline-offset:.2rem}
.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:76rem}
[hidden]{display:none !important}

/* ---- type ------------------------------------------------------------------- */
h1,h2,h3{font-weight:300;letter-spacing:-.015em;line-height:1.05;margin:0 0 1.6rem}
h1{font-size:clamp(4rem,6.4vw,8rem);font-weight:200}
h2{font-size:clamp(3rem,4.2vw,5.2rem);font-weight:200}
h3{font-size:clamp(2rem,2.2vw,2.6rem);font-weight:400;letter-spacing:0}
p{margin:0 0 1.6rem;color:var(--prose);font-size:1.6rem;line-height:1.7}
.lede{font-size:clamp(1.7rem,1.6vw,2rem);line-height:1.65;color:var(--ink);font-weight:400}
.eyebrow{
  display:block;font-size:1.15rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1.4rem;
}
.price{font-weight:400;letter-spacing:.02em;font-size:2rem;color:var(--ink)}
.muted{color:var(--muted)}
.thuluth{font-family:'AThuluth',var(--arabic);font-size:clamp(2.6rem,3.4vw,4.2rem);line-height:1.5;color:var(--ink);direction:rtl;letter-spacing:0}

/* ---- buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:1rem;
  min-height:5.6rem;padding:1.6rem 3.2rem;
  font-size:1.2rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:0;line-height:1;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn--primary{background:var(--palm);color:var(--paper)}
.btn--primary:hover{background:var(--palm-deep)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:#000}
.btn--paper{background:var(--paper);color:var(--ink)}
.btn--paper:hover{background:#fff}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 .1rem var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.link{
  font-size:1.2rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:.1rem solid var(--copper);
  padding-bottom:.4rem;
}
.link:hover{color:var(--copper-ink)}

/* ---- announcement + header --------------------------------------------------- */
.bar{background:var(--palm);color:var(--paper);position:relative;z-index:21}
.bar__msg{
  margin:0;padding:1.1rem var(--gutter);text-align:center;color:var(--paper);
  font-size:1.2rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.header{
  position:sticky;top:0;z-index:20;height:var(--header-h);
  background:var(--paper);border-bottom:.1rem solid var(--hair);
  transition:background .3s ease,border-color .3s ease;
}
.header__in{display:flex;align-items:center;gap:3.2rem;height:100%}
.header__brand{display:flex;align-items:center;gap:1.4rem;text-decoration:none;min-width:0}
.header__mark{height:4.4rem;width:auto}
.header__mark--paper{display:none}
.header__word{font-size:1.35rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap}
.header__nav{display:flex;gap:2.8rem;margin-inline-start:auto;align-items:center}
.header__nav a{font-size:1.2rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;text-decoration:none;white-space:nowrap}
.header__nav a:hover,.header__nav a[aria-current]{color:var(--copper-ink)}
.lang{font-size:1.2rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
/* Over a film the header is glass until the page scrolls, then paper. The logo has a
   paper-coloured twin for that state rather than a CSS invert, which would also
   invert the anti-aliasing. */
.has-hero .header{margin-bottom:calc(-1 * var(--header-h))}
.has-hero .header:not(.is-solid){background:transparent;border-color:transparent;color:var(--paper)}
.has-hero .header:not(.is-solid) .header__mark--ink{display:none}
.has-hero .header:not(.is-solid) .header__mark--paper{display:block}
.has-hero .header:not(.is-solid) .header__nav a:hover{color:#fff}
@media (max-width:749px){
  .header{height:6.4rem}
  .header__in{gap:1.6rem}
  .header__mark{height:3.6rem}
  .header__word{display:none}
  .header__nav{gap:1.8rem}
  .header__nav a[data-product]{display:none}
  .bar__msg{font-size:1.1rem;letter-spacing:.12em;padding-block:.95rem}
}

/* ---- film hero ---------------------------------------------------------------- */
.hero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;background:var(--night);
  min-height:82vh;min-height:82svh;max-height:100rem;
}
.hero--product{min-height:78vh;min-height:78svh}
.hero__media{position:absolute;inset:0}
/* Poster and films are all stacked on the same box. Left in normal flow they stack
   vertically instead: the poster takes the full height and the film sits below it,
   clipped and never in view, so the observer never starts it. */
.hero__media video,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__media video{opacity:0;transition:opacity .8s ease}
.hero__media video.is-playing{opacity:1}
.hero__video--mobile{display:none}
@media (max-width:749px){.hero__video--desktop{display:none}.hero__video--mobile{display:block}}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,16,.42) 0%,rgba(20,18,16,.08) 34%,
                                    rgba(20,18,16,.22) 56%,rgba(20,18,16,.88) 100%);
}
.hero__content{position:relative;width:100%;padding-block:clamp(4rem,7vw,8rem) clamp(4rem,6vw,7rem);color:var(--paper)}
.hero__content .eyebrow{color:rgba(244,241,234,.78)}
.hero__content h1{color:var(--paper);max-width:14ch;margin-bottom:1.2rem}
.hero__content .lede{color:rgba(244,241,234,.92);max-width:52ch}
.hero__content h1,.hero__content .lede,.hero__content .eyebrow{text-shadow:0 .1rem .2rem rgba(20,18,16,.5),0 .2rem 2.4rem rgba(20,18,16,.45)}
.hero__cta{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:3rem;align-items:center}
.hero__cta .link{color:var(--paper);border-color:rgba(244,241,234,.6)}
.hero__cta .link:hover{color:#fff;border-color:#fff}
.hero__price{font-size:1.6rem;color:rgba(244,241,234,.85);margin:1.2rem 0 0;letter-spacing:.04em}
.hero__mark{height:clamp(6rem,8vw,9.6rem);width:auto;margin-bottom:2.4rem;opacity:.95}
@media (max-width:749px){.hero__mark{display:none}}
@media (max-width:749px){
  .hero{min-height:88vh;min-height:88svh;align-items:flex-end}
  .hero__scrim{background:linear-gradient(180deg,rgba(20,18,16,.55) 0%,rgba(20,18,16,.1) 30%,rgba(20,18,16,.12) 55%,rgba(20,18,16,.9) 100%)}
  .hero__content h1{font-size:clamp(4.4rem,13vw,6rem)}
  .hero__cta .btn{flex:1 1 100%}
}

/* ---- sections ------------------------------------------------------------------ */
.section{padding-block:clamp(6rem,9vw,12rem)}
.section--tight{padding-block:clamp(4rem,6vw,7rem)}
.section+.section{border-top:.1rem solid var(--hair)}

/* featured: cutout on cream, the buy path one tap away */
.featured{display:grid;grid-template-columns:1fr;gap:4rem;align-items:center}
@media (min-width:900px){.featured{grid-template-columns:1.05fr 1fr;gap:clamp(4rem,7vw,10rem)}}
.featured__media img{width:100%;aspect-ratio:1;object-fit:contain}
.featured__text h2{margin-bottom:1.4rem}
.featured__text .price{margin:1.6rem 0 2.6rem}
@media (max-width:899px){.featured__media{order:-1}.featured__media img{aspect-ratio:4/3}}

/* facts row */
.facts{list-style:none;margin:0;padding:2.4rem 0 0;display:grid;gap:2rem 4rem;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.facts li{display:flex;flex-direction:column;gap:.5rem}
.facts__label{font-size:1.05rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.facts__value{font-size:1.5rem;color:var(--ink)}

/* cinematic feature: full-bleed image, text on the quiet side */
.feature{position:relative;min-height:70vh;min-height:70svh;display:flex;align-items:center;background:var(--night);overflow:hidden}
.feature__media{position:absolute;inset:0}
.feature__media img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50%) 50%}
.feature__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,16,.82) 0%,rgba(20,18,16,.55) 40%,rgba(20,18,16,.05) 75%)}
.feature__text{position:relative;padding-block:clamp(6rem,10vw,12rem);max-width:56rem;color:var(--paper)}
.feature__text .eyebrow{color:rgba(244,241,234,.75)}
.feature__text h2,.feature__text p{color:var(--paper)}
.feature__text .thuluth{color:var(--paper);margin-top:3.2rem;opacity:.95}
@media (max-width:749px){
  .feature{min-height:0}
  .feature__scrim{background:linear-gradient(180deg,rgba(20,18,16,.15) 0%,rgba(20,18,16,.85) 60%)}
  .feature__text{padding-top:52vh;padding-top:52svh}
}

/* film grid */
.film{display:grid;gap:1.2rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.film{grid-template-columns:repeat(4,1fr)}}
.film img{aspect-ratio:4/5;object-fit:cover;width:100%}
.film__head{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;margin-bottom:2.4rem;flex-wrap:wrap}
.film__head h2{margin:0}

/* ---- product buy section ------------------------------------------------------- */
.buy{display:grid;grid-template-columns:1fr;gap:4rem;padding-block:clamp(5rem,8vw,10rem)}
@media (min-width:990px){.buy{grid-template-columns:1.1fr .9fr;gap:clamp(4rem,7vw,10rem);align-items:start}}
.buy__panel>*+*{margin-top:1.6rem}
.buy__panel h2{font-size:clamp(3.6rem,5vw,6rem);margin:0}
.buy__price{font-size:2.4rem;font-weight:300;letter-spacing:.02em;margin:0}
.buy__actions{display:flex;flex-direction:column;gap:1.2rem;margin-top:2.8rem}

.trust{list-style:none;margin:2.4rem 0 0;padding:2rem 0 0;border-top:.1rem solid var(--hair);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2.4rem}
.trust li{font-size:1.4rem;color:var(--prose);line-height:1.5;display:flex;gap:1rem;align-items:flex-start}
.trust li svg{flex:none;width:1.8rem;height:1.8rem;stroke:var(--palm);fill:none;stroke-width:1.6;margin-top:.15rem}
@media (max-width:749px){.trust{grid-template-columns:1fr;gap:.8rem}}

.specs{display:grid;grid-template-columns:1fr;gap:0 4rem;margin-top:3.2rem}
@media (min-width:750px){.specs{grid-template-columns:1fr 1fr}}
.specs div{display:grid;grid-template-columns:14rem 1fr;gap:2rem;padding:1.6rem 0;border-bottom:.1rem solid var(--hair);font-size:1.5rem}
.specs dt{color:var(--muted);font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:1.1rem;padding-top:.3rem}
.specs dd{margin:0;color:var(--ink)}

/* sticky buy bar */
.buybar{
  position:fixed;inset-inline:0;bottom:0;z-index:15;
  background:var(--paper);border-top:.1rem solid var(--hair);
  transform:translate3d(0,110%,0);transition:transform .4s cubic-bezier(.2,.65,.2,1);
  padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
}
.buybar.is-on{transform:none}
.buybar__in{max-width:var(--measure);margin:0 auto;display:flex;align-items:center;gap:1.6rem}
.buybar__meta{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.buybar__name{font-size:1.4rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar__price{font-size:1.4rem;color:var(--prose);white-space:nowrap}
.buybar .btn{min-height:4.8rem;padding:1.4rem 2.4rem;flex:0 0 auto}

/* ---- checkout ------------------------------------------------------------------ */
.co{display:grid;grid-template-columns:1fr;gap:3.2rem;max-width:118rem;margin:0 auto;padding-block:clamp(2.4rem,4vw,5rem) 12rem}
@media (min-width:990px){
  .co{grid-template-columns:minmax(0,1fr) 40rem;gap:clamp(4rem,6vw,8rem);align-items:start;padding-bottom:6rem}
  .co__side{position:sticky;top:calc(var(--header-h) + 2.4rem)}
}
.co h1{font-size:clamp(2.8rem,3.6vw,4.4rem);margin-bottom:.6rem}
.co__step{margin-top:3.6rem}
.co__step:first-of-type{margin-top:2.4rem}
.co__step>legend,.co__label{
  display:block;font-size:1.15rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.6rem;padding:0;
}
.field{display:block;margin-bottom:1.4rem}
.field>span{display:block;font-size:1.25rem;font-weight:500;color:var(--ink);margin-bottom:.6rem}
.field small{display:block;font-size:1.2rem;color:var(--muted);margin-top:.5rem}
.field input,.field select{
  width:100%;min-height:5.6rem;padding:1.4rem 1.6rem;font-size:1.6rem;font-weight:400;
  background:#fff;border:.1rem solid var(--hair);color:var(--ink);appearance:none;-webkit-appearance:none;
}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1C19' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.4rem center;background-size:1.8rem;padding-inline-end:4.4rem}
[dir=rtl] .field select{background-position:left 1.4rem center;padding-inline-start:4.4rem;padding-inline-end:1.6rem}
.field input:focus,.field select:focus{outline:0;border-color:var(--palm);box-shadow:inset 0 0 0 .1rem var(--palm)}
.field--err input,.field--err select{border-color:var(--copper-ink);box-shadow:inset 0 0 0 .1rem var(--copper-ink)}
.field__err{display:block;color:var(--copper-ink);font-size:1.3rem;margin-top:.6rem}
.row{display:grid;gap:1.4rem;grid-template-columns:1fr 1fr}
/* A phone number is a left-to-right run even on an Arabic page: the code sits to
   the left of the number in both languages, or "+966" reads after the digits. */
.row--phone{grid-template-columns:14.4rem minmax(0,1fr);direction:ltr}
.row--phone select{font-variant-numeric:tabular-nums}
@media (max-width:420px){.row{grid-template-columns:1fr}.row--phone{grid-template-columns:12.8rem minmax(0,1fr)}}

/* payment tiles: real methods, big targets, one selected */
.pay{display:grid;gap:1rem}
.pay__tile{
  display:flex;align-items:center;gap:1.6rem;width:100%;min-height:6.8rem;
  padding:1.6rem 2rem;background:#fff;border:.1rem solid var(--hair);
  cursor:pointer;text-align:start;transition:border-color .15s ease,box-shadow .15s ease;
}
.pay__tile:hover{border-color:var(--ink)}
.pay__tile[aria-checked=true]{border-color:var(--palm);box-shadow:inset 0 0 0 .15rem var(--palm)}
.pay__radio{flex:none;width:2rem;height:2rem;border:.15rem solid var(--hair);border-radius:50%;position:relative}
.pay__tile[aria-checked=true] .pay__radio{border-color:var(--palm)}
.pay__tile[aria-checked=true] .pay__radio::after{content:'';position:absolute;inset:.35rem;background:var(--palm);border-radius:50%}
.pay__logo{flex:none;height:2.8rem;width:auto}
.pay__body{flex:1;min-width:0}
.pay__name{display:block;font-size:1.5rem;font-weight:500;color:var(--ink)}
.pay__note{display:block;font-size:1.25rem;color:var(--muted);margin-top:.2rem}
.pay__brands{display:flex;gap:.6rem;flex:none}
.pay__brands svg,.pay__brands img{height:2.2rem;width:auto}
/* The payment chips (store/marks.py): one size wherever the ways to pay are shown -- under
   Buy, in the home page's facts, in the footer -- big enough to read at a glance. Only a
   checkout tile's are smaller: the tile's own words already name the way to pay. */
.marks{display:flex;flex-wrap:wrap;gap:.6rem}
.mark{display:block;width:6rem;height:3.8rem;flex:none}
.pay__brands .mark{width:4.8rem;height:3.04rem}
.marks--buy{justify-content:center;margin:1.4rem 0 0}
.marks--facts{margin-top:.4rem}
.footer__pay{gap:.8rem;margin:3.2rem 0 0}
/* on the green footer the black Apple Pay chip would sink into it: a faint ring keeps
   every chip's edge (the chips' corners are 5 of 60 by 38) */
.footer__pay .mark{border-radius:8.33%/13.16%;box-shadow:0 0 0 .1rem rgba(255,255,255,.3)}

.co__paybtn{margin-top:2.8rem;min-height:6.4rem;font-size:1.3rem;letter-spacing:.2em}
.co__paybtn b{font-weight:500;letter-spacing:.04em;text-transform:none;font-size:1.7rem;margin-inline-start:.6rem}
.co__secure{display:flex;gap:1rem;align-items:flex-start;font-size:1.3rem;color:var(--muted);margin-top:1.6rem;line-height:1.5}
.co__secure svg{flex:none;width:1.8rem;height:1.8rem;stroke:var(--palm);fill:none;stroke-width:1.6;margin-top:.1rem}

/* summary: a details on phones, a panel on desktop */
.sum{border:.1rem solid var(--hair);background:#fff}
.sum summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.6rem 2rem;font-size:1.4rem;font-weight:500}
.sum summary::-webkit-details-marker{display:none}
.sum summary svg{width:1.8rem;height:1.8rem;stroke:var(--ink);fill:none;stroke-width:1.6;transition:transform .2s}
.sum[open] summary svg{transform:rotate(180deg)}
.sum__body{padding:0 2rem 2rem}
.sum__line{display:flex;gap:1.6rem;align-items:center;padding:1.4rem 0;border-top:.1rem solid var(--hair)}
.sum__line img{width:6.4rem;height:6.4rem;object-fit:contain;flex:none;background:var(--paper)}
.sum__line b{display:block;font-weight:500;font-size:1.45rem}
.sum__line small{color:var(--muted);font-size:1.25rem}
.sum__line .num{margin-inline-start:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.sum__row{display:flex;justify-content:space-between;gap:2rem;padding:.7rem 0;font-size:1.45rem;color:var(--prose)}
.sum__row--total{border-top:.1rem solid var(--hair);margin-top:.8rem;padding-top:1.4rem;font-size:1.8rem;font-weight:500;color:var(--ink)}
@media (min-width:990px){
  .co__summary--mobile{display:none}
  .sum summary{pointer-events:none}
  .sum summary svg{display:none}
}
@media (max-width:989px){.co__side{display:none}}

.notice{padding:1.6rem 2rem;border:.1rem solid var(--hair);font-size:1.45rem;color:var(--prose);background:#fff}
.notice--bad{border-color:var(--copper-ink);color:var(--copper-ink)}

/* ---- footer -------------------------------------------------------------------- */
.footer{background:var(--palm);color:var(--paper);margin-top:clamp(6rem,10vw,12rem);padding-block:6rem 3rem}
.footer a{color:var(--paper);text-decoration:none}
.footer a:hover{text-decoration:underline;text-underline-offset:.4rem}
.footer__top{display:flex;align-items:center;gap:1.6rem;margin-bottom:4rem}
.footer__top img{height:5.6rem;width:auto}
.footer__top span{font-size:1.1rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sage)}
.footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:3.2rem}
.footer__line{margin:0 0 1.6rem;font-size:1.45rem;color:var(--paper)}
.footer__btns{display:flex;flex-wrap:wrap;gap:1rem}
.footer .footer__btn{min-height:4.4rem;padding:1rem 2rem;border:.1rem solid rgba(244,241,234,.55);color:var(--paper);text-decoration:none}
.footer .footer__btn:hover{border-color:var(--paper);text-decoration:none}
.footer .footer__btn--solid{background:var(--paper);border-color:var(--paper);color:var(--palm)}
.footer .footer__btn--solid:hover{background:#fff}
.footer__head{font-size:1.1rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--sage);margin:0 0 1.6rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:1rem;font-size:1.45rem}
.footer__foot{margin-top:4.8rem;padding-top:2.4rem;border-top:.1rem solid rgba(244,241,234,.18);font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:1.6rem 2.8rem}

/* ---- consent --------------------------------------------------------------------- */
.consent{
  position:fixed;inset-inline:0;bottom:0;z-index:30;background:var(--paper);
  border-top:.1rem solid var(--hair);box-shadow:0 -.4rem 2.4rem rgba(20,18,16,.08);
  padding:1.2rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom));
  display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;
}
.consent__text{margin:0;flex:1 1 32rem;font-size:1.3rem;line-height:1.5;color:var(--ink)}
.consent__text a{color:var(--copper-ink)}
.consent__actions{display:flex;gap:.8rem;flex:0 0 auto}
.consent .btn{min-height:4.2rem;padding:1rem 1.6rem;font-size:1.05rem;letter-spacing:.16em}
@media (max-width:749px){
  .consent{gap:1rem;padding-block:1rem}
  .consent__text{font-size:1.2rem;flex-basis:100%}
  .consent__actions{flex:1 1 100%}
  .consent .btn{flex:1}
}

/* ---- motion: opacity only, short, and off when asked ---------------------------- */
html.motion .reveal{opacity:0;transform:translate3d(0,1.6rem,0);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.65,.2,1);transition-delay:calc(var(--i,0)*60ms)}
html.motion .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.motion .reveal{opacity:1;transform:none;transition:none}
  .buybar,.hero__media video{transition:none}
}

/* ---- Arabic -------------------------------------------------------------------- */
html[lang^="ar"] body,html[lang^="ar"] .btn,html[lang^="ar"] .link,
html[lang^="ar"] h1,html[lang^="ar"] h2,html[lang^="ar"] h3,
html[lang^="ar"] .eyebrow,html[lang^="ar"] .facts__label,html[lang^="ar"] .co__step>legend,
html[lang^="ar"] .field>span,html[lang^="ar"] .footer__head,html[lang^="ar"] .header__nav a,
html[lang^="ar"] .bar__msg,html[lang^="ar"] .specs dt{
  font-family:var(--arabic);text-transform:none;
}
html[lang^="ar"] *{letter-spacing:0 !important}
html[lang^="ar"] .lang[lang="en"]{letter-spacing:.18em !important}
html[lang^="ar"] .lang[lang="en"] *{letter-spacing:inherit !important}
html[lang^="ar"] h1{line-height:1.25;font-weight:300}
html[lang^="ar"] h2,html[lang^="ar"] h3{line-height:1.35;font-weight:300}
html[lang^="ar"] p,html[lang^="ar"] .lede{line-height:1.85}
html[lang^="ar"] .eyebrow,html[lang^="ar"] .facts__label,html[lang^="ar"] .co__step>legend,
html[lang^="ar"] .field>span,html[lang^="ar"] .footer__head,html[lang^="ar"] .specs dt{font-size:1.4rem}
html[lang^="ar"] .btn,html[lang^="ar"] .link{font-size:1.5rem}
html[lang^="ar"] .header__nav a,html[lang^="ar"] .bar__msg{font-size:1.4rem}
[lang="ar"]:not(.thuluth){letter-spacing:0 !important;font-family:var(--arabic)}
/* The calligraphy line is also lang="ar"; the rule above used to win on source order
   and set it in the plain Arabic sans, so the Thuluth never showed. */
.thuluth{letter-spacing:0 !important;font-family:'AThuluth',var(--arabic)}

@media print{.header,.footer,.buybar,.bar,.consent{display:none !important}body{background:#fff}}

/* discount code */
.row--code{grid-template-columns:minmax(0,1fr) 12rem;direction:ltr}
.row--code input{min-height:5.2rem;padding:1.2rem 1.4rem;font-size:1.6rem;background:#fff;border:.1rem solid var(--hair);text-transform:uppercase;letter-spacing:.08em}
.row--code input:focus{outline:0;border-color:var(--palm)}
.row--code .btn{min-height:5.2rem;padding:1rem 1.6rem}
.co__code summary::-webkit-details-marker{display:none}

/* reviews */
.reviews{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(28rem,1fr));margin-top:3.2rem}
.review{margin:0;padding:2.4rem;border:.1rem solid var(--hair);background:#fff;display:flex;flex-direction:column;gap:1.2rem}
.review p{margin:0;font-size:1.55rem;line-height:1.7;color:var(--ink)}
.review footer{display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;font-size:1.25rem;color:var(--muted);margin-top:auto}
.review__stars{color:var(--copper);letter-spacing:.1em;font-size:1.4rem}
.review__off{color:var(--hair)}
.review__verified{display:inline-flex;align-items:center;gap:.5rem;color:var(--palm)}
.review__verified svg{width:1.4rem;height:1.4rem;stroke:currentColor;fill:none;stroke-width:2}
html[lang^="ar"] .review__stars{letter-spacing:0 !important}


/* =======================================================================================
   Round 3: the bag drawer, quantity controls, gallery, chapter sequence, cross-sell,
   cards with actions, and the motion layer. Transforms and opacity only; everything
   degrades to a static, complete page without JavaScript or with reduced motion.
   ======================================================================================= */

:root{--ease:cubic-bezier(.2,.65,.2,1);--paper-2:#EBE6DB}

/* ---- header bag ---- */
.header__bag{position:relative;display:inline-flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;margin-inline-end:-1rem;text-decoration:none}
.header__bag svg{width:2.2rem;height:2.2rem;fill:none;stroke:currentColor;stroke-width:1.5}
.header__count{position:absolute;top:.5rem;inset-inline-end:.3rem;min-width:1.8rem;height:1.8rem;padding:0 .5rem;border-radius:.9rem;background:var(--palm);color:var(--paper);font-size:1.05rem;font-weight:600;line-height:1.8rem;text-align:center;letter-spacing:0}
.has-hero .header:not(.is-solid) .header__count{background:var(--paper);color:var(--ink)}
.header__count.is-bump{animation:bump .5s var(--ease)}
@keyframes bump{30%{transform:scale(1.35)}}
.header.is-solid{box-shadow:0 .1rem 0 var(--hair)}

/* ---- the drawer ---- */
.drawer{position:fixed;inset:0;z-index:40;visibility:hidden;pointer-events:none;transition:visibility 0s linear .5s}
.drawer.is-open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.drawer__scrim{position:absolute;inset:0;background:rgba(20,18,16,.42);opacity:0;transition:opacity .45s ease;cursor:default}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(46rem,92vw);background:var(--paper);display:flex;flex-direction:column;
  transform:translate3d(100%,0,0);transition:transform .5s var(--ease);box-shadow:-2rem 0 6rem rgba(20,18,16,.18);outline:0}
[dir=rtl] .drawer__panel{transform:translate3d(-100%,0,0);box-shadow:2rem 0 6rem rgba(20,18,16,.18)}
.drawer.is-open .drawer__panel{transform:none}
.drawer__body{display:flex;flex-direction:column;height:100%;overflow:hidden}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:2rem 2.4rem;border-bottom:.1rem solid var(--hair);flex:none}
.drawer__title{font-size:2rem;font-weight:400;margin:0;letter-spacing:0}
.drawer__count{display:inline-block;min-width:2.2rem;height:2.2rem;padding:0 .6rem;margin-inline-start:.6rem;border-radius:1.1rem;background:var(--palm);color:var(--paper);font-size:1.2rem;line-height:2.2rem;text-align:center;vertical-align:.3rem}
.drawer__close{width:4.4rem;height:4.4rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-end:-1rem}
.drawer__close svg{width:2rem;height:2rem;stroke:var(--ink);stroke-width:1.6;fill:none}
.drawer__status{margin:0;padding:0 2.4rem;font-size:1.3rem;color:var(--palm);min-height:0}
.drawer__status:not(:empty){padding-block:1.2rem 0}
.drawer__lines{list-style:none;margin:0;padding:.8rem 2.4rem;overflow-y:auto;flex:1 1 auto;overscroll-behavior:contain}
.line{display:grid;grid-template-columns:8.8rem minmax(0,1fr) auto;gap:1.6rem;align-items:start;padding:1.8rem 0;border-bottom:.1rem solid var(--hair)}
.line:last-child{border-bottom:0}
.line__media{display:block;background:#fff;aspect-ratio:1}
.line__media img{width:100%;height:100%;object-fit:contain}
.line__body{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.line__title{font-size:1.55rem;font-weight:500;text-decoration:none;color:var(--ink)}
.line__unit{font-size:1.3rem;color:var(--muted)}
.line__controls{display:flex;align-items:center;gap:1.6rem;margin-top:.8rem}
.line__remove{background:none;border:0;padding:.6rem 0;font-size:1.25rem;color:var(--muted);text-decoration:underline;text-underline-offset:.3rem;cursor:pointer}
.line__remove:hover{color:var(--copper-ink)}
.line__total{font-size:1.45rem;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}

.stepper{display:inline-flex;align-items:center;border:.1rem solid var(--hair);background:#fff;height:3.8rem;direction:ltr}
.stepper form{display:contents}
.stepper__btn{width:3.8rem;height:100%;background:none;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.stepper__btn svg{width:1.4rem;height:1.4rem;stroke:currentColor;stroke-width:1.8;fill:none}
.stepper__btn:hover{background:var(--paper)}
.stepper__btn[disabled]{opacity:.3;cursor:not-allowed}
.stepper__n{min-width:3rem;text-align:center;font-size:1.45rem;font-variant-numeric:tabular-nums}
.is-busy .stepper,.is-busy .line__remove{opacity:.5;pointer-events:none}

.drawer__pair{padding:1.6rem 2.4rem;border-top:.1rem solid var(--hair);background:var(--paper-2);flex:none}
.drawer__pair .eyebrow{margin-bottom:1rem}
.pair{display:grid;grid-template-columns:6.4rem minmax(0,1fr) auto;gap:1.4rem;align-items:center;padding:.6rem 0}
.pair__media{display:block;background:#fff;aspect-ratio:1}
.pair__media img{width:100%;height:100%;object-fit:contain}
.pair__body{display:flex;flex-direction:column;font-size:1.4rem;min-width:0}
.pair__body a{text-decoration:none;font-weight:500}
.pair__body span{color:var(--muted);font-size:1.3rem}
.btn--sm{min-height:4rem;padding:1rem 1.6rem;font-size:1.05rem;letter-spacing:.16em}

.drawer__foot{flex:none;padding:1.8rem 2.4rem calc(1.8rem + env(safe-area-inset-bottom));border-top:.1rem solid var(--hair);background:var(--paper);display:flex;flex-direction:column;gap:1rem}
.drawer__row{display:flex;justify-content:space-between;align-items:baseline;font-size:1.6rem}
.drawer__sum{font-size:1.9rem;font-weight:500;font-variant-numeric:tabular-nums}
.drawer__note{display:flex;gap:.8rem;align-items:center;margin:0;font-size:1.3rem;color:var(--prose)}
.drawer__note svg{width:1.6rem;height:1.6rem;stroke:var(--palm);fill:none;stroke-width:1.8}
.drawer__continue{align-self:center;font-size:1.3rem;color:var(--prose);padding:.8rem;text-underline-offset:.3rem}
.drawer__empty{padding:3.2rem 2.4rem;display:flex;flex-direction:column;gap:1.2rem;overflow-y:auto}
.drawer__emptytitle{font-size:2.2rem;font-weight:300;margin:0;color:var(--ink)}
html.drawer-lock,html.drawer-lock body{overflow:hidden}

/* ---- actions row ---- */
.actions{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:0}
.actions form{display:contents}

/* ---- cards: one product per tile, with its two actions ---- */
.section__head{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;margin-bottom:2.4rem}
.cards{display:grid;gap:clamp(2.4rem,4vw,5.6rem);grid-template-columns:repeat(auto-fit,minmax(30rem,1fr));max-width:120rem;margin:0 auto}
.card{display:flex;flex-direction:column;gap:1.6rem}
.card__media{display:block;overflow:hidden;background:var(--paper-2);aspect-ratio:4/5}
.card__media img{width:100%;height:100%;object-fit:contain;transition:transform 1.4s var(--ease),opacity .7s ease}
@media (hover:hover){.card:hover .card__media img{transform:scale(1.035)}}
.card__info{display:flex;justify-content:space-between;align-items:flex-end;gap:1.6rem}
.card__title{margin:0 0 .4rem;font-size:2.4rem;font-weight:300}
.card__title a{text-decoration:none}
.card__price{margin:0;font-size:1.6rem;color:var(--prose)}
@media (max-width:749px){.card__title{font-size:2.1rem}}

/* ---- story ---- */
/* A story: on a phone the photograph, then the words, inside the page's margins. From
   900px the photograph covers its half of the screen to the edge and the words sit in the
   other half, a hairline between one story and the next -- the live theme's story-split. */
.story{display:grid;grid-template-columns:1fr;gap:3.2rem;align-items:center;padding:clamp(6rem,9vw,12rem) var(--gutter)}
.story__media{background:var(--paper-2);aspect-ratio:4/5;overflow:hidden}
.story__media img{width:100%;height:100%;object-fit:cover}
.story__text{max-width:52rem}
.story__text .link{display:inline-block;margin-top:1.6rem}
@media (min-width:900px){
  .story{grid-template-columns:1fr 1fr;gap:0;padding:0;align-items:stretch;border-top:.1rem solid var(--hair)}
  .story--right .story__media{order:2}
  .story__media{aspect-ratio:auto;height:clamp(48rem,46vw,72rem)}
  .story__media img{object-position:center 45%}
  .story__text{align-self:center;max-width:none;padding:clamp(5.6rem,8vw,8.8rem) clamp(4rem,6vw,9.6rem)}
  .story__text .lede{max-width:44ch}
}
/* the live theme's green band under the homepage film */
.band{height:2rem;background:var(--palm)}
.section__title{margin:0;font-size:clamp(2.4rem,3vw,3.4rem);font-weight:300;letter-spacing:-.01em;line-height:1.15}
.film__tile{background:var(--paper-2);aspect-ratio:4/5;overflow:hidden}
.film__tile img{width:100%;height:100%;object-fit:cover}

/* ---- the gallery ---- */
.gallery{position:relative;min-width:0}
.gallery__track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;background:#fff;outline:0}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__slide{margin:0;scroll-snap-align:start;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery__slide img{width:100%;height:100%;object-fit:contain}
.gallery__dots{display:flex;justify-content:center;gap:.8rem;margin-top:1.4rem}
.gallery__dots span{width:.7rem;height:.7rem;border-radius:50%;background:var(--hair);transition:background .3s ease,transform .3s ease}
.gallery__dots span.is-on{background:var(--ink);transform:scale(1.15)}
.gallery__thumbs{display:none;gap:.8rem;margin-top:1.2rem}
.gallery__thumbs button{flex:0 0 7.6rem;aspect-ratio:1;padding:.4rem;background:#fff;border:0;cursor:pointer;box-shadow:inset 0 0 0 .1rem transparent;transition:box-shadow .2s ease}
.gallery__thumbs button[aria-current=true]{box-shadow:inset 0 0 0 .15rem var(--palm)}
.gallery__thumbs img{width:100%;height:100%;object-fit:contain}
@media (min-width:990px){
  .gallery{position:sticky;top:calc(var(--header-h) + 2rem)}
  .gallery__dots{display:none}
  .gallery__thumbs{display:flex;flex-wrap:wrap}
}

/* ---- the chapter sequence ---- */
.seq{padding-block:clamp(6rem,9vw,12rem)}
.seq__stage{display:none}
.seq__step{margin-bottom:clamp(6rem,14vw,9rem)}
.seq__step:last-child{margin-bottom:0}
.seq__media{margin:0 calc(-1 * var(--gutter)) 2.8rem;background:var(--paper-2);overflow:hidden}
.seq__media img{width:100%;height:100%;object-fit:cover}
.seq__text{max-width:52rem}
.seq__num{display:inline-block;margin-inline-end:1.2rem;color:var(--copper-ink);font-variant-numeric:tabular-nums}
.seq__text .thuluth{margin-top:2.4rem}
@media (min-width:900px){
  /* Live only when JavaScript has taken charge; otherwise the stacked layout stands. */
  .seq.is-live{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(4rem,6vw,9rem);align-items:start}
  .seq.is-live .seq__stage{display:block;position:sticky;top:calc(var(--header-h) + 3.2rem);height:calc(100vh - var(--header-h) - 6.4rem)}
  .seq.is-live .seq__frames{position:relative;height:calc(100% - 4.4rem);overflow:hidden;background:var(--paper-2)}
  .seq.is-live .seq__frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.045);
    transition:opacity 1s ease,transform 1.8s var(--ease)}
  .seq.is-live .seq__frame.is-on{opacity:1;transform:none}
  .seq.is-live .seq__meta{display:flex;align-items:center;gap:1.2rem;height:4.4rem;font-size:1.3rem;color:var(--muted);font-variant-numeric:tabular-nums}
  .seq.is-live .seq__n{color:var(--ink);font-weight:500}
  .seq.is-live .seq__bar{flex:1;height:.1rem;background:var(--hair);overflow:hidden}
  .seq.is-live .seq__bar i{display:block;height:100%;background:var(--ink);transform-origin:left center;transition:transform .8s var(--ease)}
  [dir=rtl] .seq.is-live .seq__bar i{transform-origin:right center}
  .seq.is-live .seq__media{display:none}
  .seq.is-live .seq__step{min-height:calc(100vh - var(--header-h) - 6.4rem);display:flex;align-items:center;margin:0}
  .seq.is-live .seq__text{opacity:.22;transform:translate3d(0,1.6rem,0);transition:opacity .7s ease,transform .9s var(--ease)}
  .seq.is-live .seq__step.is-on .seq__text{opacity:1;transform:none}
}

/* ---- cross-sell: a slim row, not a second hero ---- */
.xsells{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(34rem,1fr));max-width:96rem}
.xsell{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:2rem;align-items:center;padding:1.6rem;background:#fff;border:.1rem solid var(--hair)}
.xsell__media{display:block;aspect-ratio:4/5;background:var(--paper-2);overflow:hidden}
.xsell__media img{width:100%;height:100%;object-fit:contain}
.xsell__title{margin:0 0 .3rem;font-size:2rem;font-weight:400}
.xsell__title a{text-decoration:none}
.xsell__price{margin:0 0 1.4rem;font-size:1.5rem;color:var(--prose)}
.xsell__lede{margin:0 0 .8rem;font-size:1.35rem;line-height:1.55;color:var(--prose);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xsell__actions{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center}
.xsell__actions form{display:contents}
@media (max-width:420px){.xsell{grid-template-columns:9.6rem minmax(0,1fr);gap:1.4rem}.xsells{grid-template-columns:1fr}}
/* One other watch: a feature across the page, not a strip -- the photograph flush to the
   card's edge, beside the watch's name and its line. */
.xsells:has(>.xsell:only-child){max-width:none}
.xsell:only-child{grid-template-columns:minmax(0,40rem) minmax(0,1fr);gap:clamp(3.2rem,6vw,9.6rem);padding:0;padding-inline-end:clamp(2.4rem,6vw,9.6rem)}
.xsell:only-child .xsell__lede{display:block;font-size:1.6rem;line-height:1.65;max-width:44ch;margin-bottom:1.4rem}
.xsell:only-child .xsell__media{background:#fff}
.xsell:only-child .xsell__title{font-size:clamp(2.6rem,3.2vw,3.6rem);font-weight:300;line-height:1.15;margin-bottom:.8rem}
.xsell:only-child .xsell__price{font-size:1.8rem;margin-bottom:2.8rem}
@media (max-width:640px){.xsell:only-child{grid-template-columns:1fr;gap:2rem;padding:0 0 2.4rem}.xsell:only-child .xsell__body{padding-inline:2rem}}

/* ---- checkout: numbered steps, summary lines with controls ---- */
.co__num{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;margin-inline-end:1.2rem;border-radius:50%;background:var(--ink);color:var(--paper);font-size:1.2rem;font-weight:600;letter-spacing:0;vertical-align:.1rem}
.sum__peek{display:flex;align-items:center;gap:1.2rem}
.sum__line{display:grid;grid-template-columns:7.2rem minmax(0,1fr) auto;gap:1.4rem;align-items:start;padding:1.6rem 0;border-top:.1rem solid var(--hair)}
.sum__line img{width:7.2rem;height:7.2rem;object-fit:contain;background:var(--paper)}
.sum__info{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.sum__info b{font-weight:500;font-size:1.5rem}
.sum__unit{font-size:1.25rem;color:var(--muted)}
.sum__line .line__controls{margin-top:.8rem}
.sum__line .stepper{height:3.4rem}
.sum__line .stepper__btn{width:3.4rem}

/* ---- motion ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .42s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
.btn{transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .15s ease}
.btn:active{transform:scale(.985)}
html.motion img.fade{opacity:0;transition:opacity .7s ease}
html.motion img.fade.is-loaded{opacity:1}
html.motion .hero__content>*{animation:rise 1s var(--ease) both}
html.motion .hero__content>:nth-child(2){animation-delay:.08s}
html.motion .hero__content>:nth-child(3){animation-delay:.16s}
html.motion .hero__content>:nth-child(4){animation-delay:.24s}
html.motion .hero__content>:nth-child(5){animation-delay:.32s}
html.motion .hero__content>:nth-child(6){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translate3d(0,1.8rem,0)}}
@media (prefers-reduced-motion:reduce){
  html.motion img.fade{opacity:1;transition:none}
  html.motion .hero__content>*{animation:none}
  .drawer__panel,.drawer__scrim,.seq.is-live .seq__frame,.seq.is-live .seq__text{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ==================================================================================
   Round 4 (2026-09-22): fitted images, the Shopify description, order tracking, the
   contact form, and prose for text that comes from Shopify.
   ================================================================================== */

/* Photographs fill their frame edge to edge. Most of the catalogue is shot 4:5, and a
   square frame shrank every one of them into white side bands. A studio cutout -- a
   transparent PNG, flagged when the catalogue syncs -- is the exception: it is shown
   whole on white, because cropping it would cut off the watch. */
.gallery__slide{aspect-ratio:4/5}
.gallery__slide img{object-fit:cover}
.gallery__slide img.is-cutout{object-fit:contain;padding:4%}
/* On a desktop the frame also has to fit under the header. A max-height here would be
   carried through the 4:5 ratio into a max-WIDTH, leaving a white strip down the side of
   the column; so the height is set outright, from the column's own width (125cqi is 5/4
   of it) or the screen, whichever is smaller. Browsers without container units keep the
   plain 4:5 frame. */
@media (min-width:990px){
  .gallery{container-type:inline-size}
  @supports (height:1cqi){
    .gallery__slide{aspect-ratio:auto;height:min(125cqi,calc(100vh - var(--header-h) - 4rem))}
  }
}
.gallery__thumbs button{aspect-ratio:4/5;padding:0;overflow:hidden}
.gallery__thumbs button.is-cutout{padding:.4rem}
.gallery__thumbs img{object-fit:cover}
.gallery__thumbs img.is-cutout{object-fit:contain}
.card__media img,.featured__media img,.xsell__media img,
.line__media img,.pair__media img,.sum__line img{object-fit:cover}
.card__media img.is-cutout,.featured__media img.is-cutout,.xsell__media img.is-cutout,
.line__media img.is-cutout,.pair__media img.is-cutout,.sum__line img.is-cutout{object-fit:contain}
@media (max-width:899px){.featured__media img{aspect-ratio:4/5}}

/* Text that arrives as HTML from Shopify: policies and product descriptions. */
.prose{color:var(--prose);font-size:1.6rem;line-height:1.75}
.prose p{margin:0 0 1.4rem;font-size:inherit;line-height:inherit}
.prose h2,.prose h3,.prose h4{color:var(--ink);font-weight:500;font-size:1.9rem;line-height:1.35;margin:3.2rem 0 1rem}
.prose ul,.prose ol{margin:0 0 1.6rem;padding-inline-start:2.2rem}
.prose li{margin-bottom:.6rem}
.prose strong,.prose b{color:var(--ink);font-weight:500}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:.08em}
.prose>:first-child{margin-top:0}
.prose>:last-child{margin-bottom:0}

/* The product description, under the buy buttons. */
.desc{margin-top:3.2rem;padding-top:2.4rem;border-top:.1rem solid var(--hair)}
.desc__h{font-size:1.15rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0 0 1.4rem}
.desc__body{font-size:1.55rem}
.desc.is-clamped:not(.is-open) .desc__body{max-height:17rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.desc__more{margin-top:1.2rem;padding:.6rem 0;background:none;border:0;cursor:pointer;
  font-size:1.4rem;color:var(--ink);text-decoration:underline;text-underline-offset:.3em}
html[lang^="ar"] .desc__h{font-size:1.4rem;text-transform:none}

/* Where an order stands: confirmed, shipped, delivered. */
.track{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:3.2rem 0 0;padding:0}
.track__step{position:relative;padding-top:2.6rem;font-size:1.35rem;color:var(--muted)}
.track__step::before{content:"";position:absolute;top:.6rem;inset-inline:0;height:.2rem;background:var(--hair)}
.track__step:last-child::before{inset-inline-end:auto;width:1.4rem}
.track__step.is-done::before{background:var(--palm)}
.track__step.is-now::before{background:linear-gradient(to right,var(--palm) 1.4rem,var(--hair) 1.4rem)}
[dir=rtl] .track__step.is-now::before{background:linear-gradient(to left,var(--palm) 1.4rem,var(--hair) 1.4rem)}
.track__step:last-child.is-now::before{background:var(--palm)}
.track__dot{position:absolute;top:0;inset-inline-start:0;width:1.4rem;height:1.4rem;border-radius:50%;
  background:var(--paper);border:.2rem solid var(--hair);box-sizing:border-box}
.track__step.is-done .track__dot{background:var(--palm);border-color:var(--palm)}
.track__step.is-now{color:var(--ink);font-weight:500}
.track__parcel{margin-top:2.8rem;padding:2rem 2.2rem;border:.1rem solid var(--hair);background:#fff}
.track__parcel p{margin:0 0 .8rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline}
.track__parcel p:last-child{margin:1.4rem 0 0}
.summary--void{opacity:.55}
.order__help{margin-top:2.8rem;font-size:1.45rem}
.order__help a{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}

/* Shopify's contact form. */
.contact__h{font-size:clamp(1.9rem,1.8vw,2.2rem);font-weight:400;margin:3.6rem 0 1.8rem}
.contact__form{max-width:66rem}
.contact__pair{display:grid;grid-template-columns:1fr;column-gap:1.6rem}
@media (min-width:750px){.contact__pair{grid-template-columns:1fr 1fr}}
.field textarea{width:100%;min-height:16rem;padding:1.4rem 1.6rem;font-size:1.6rem;line-height:1.6;resize:vertical;
  background:#fff;border:.1rem solid var(--hair);color:var(--ink);appearance:none;-webkit-appearance:none;display:block}
.field textarea:focus{outline:0;border-color:var(--palm);box-shadow:inset 0 0 0 .1rem var(--palm)}
.contact__form .btn{margin-top:.8rem;min-width:18rem}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.notice--good{border-color:var(--palm);color:var(--palm);margin-top:2.4rem}
/* The order page's summary. Its rules went missing when the checkout summary moved to
   .sum, which left item and price run together on one line. */
.summary{border-top:.1rem solid var(--hair)}
.summary__row{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding:1.4rem 0;
  border-bottom:.1rem solid var(--hair);font-size:1.5rem;color:var(--prose)}
.summary__num{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.summary__row--total{font-size:1.7rem;color:var(--ink);font-weight:500;border-bottom:0}

/* boxes drawn over one real field (static/slots.js): the one-time code -- at sign-in and in
   checkout's "fill in my details" -- and the Royal Club number */
.slots__area{position:relative;display:block}
.slots__boxes{display:none}
.slots--on .slots__boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem;direction:ltr}
.slots--on .slots__boxes--4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:32rem;margin-inline:auto;gap:1rem}
.slots__boxes i{display:flex;align-items:center;justify-content:center;height:6.4rem;background:#fff;border:.1rem solid var(--hair);
  font-style:normal;font-size:2.6rem;font-weight:300;color:var(--ink);font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
.slots__boxes--4 i{height:7.2rem;font-size:3rem}
.slots__boxes i.is-ph{color:#CFC8BB}
.slots__boxes i.is-full{border-color:#B9B2A5}
.slots__boxes i.is-at{border-color:var(--palm);box-shadow:inset 0 0 0 .1rem var(--palm)}
.slots--on .slots__input{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;caret-color:transparent;
  font-size:1.6rem !important;letter-spacing:0;border:0;padding:0;background:transparent;color:transparent}
.slots--on + small,.slots--on small{text-align:center}

/* Welcome back at checkout (static/recall.js): the offer under the mobile, and the greeting
   above the form once the mobile is proved. */
.wb{margin:1.2rem 0 0;padding:1.6rem;border:.1rem solid var(--hair);background:#fff}
.wb__h{margin:0 0 1.2rem;font-size:1.45rem;line-height:1.5;color:var(--ink)}
.wb__row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.wb__sub{display:block;margin-top:.8rem;font-size:1.25rem;color:var(--muted)}
.wb__code{margin-top:.4rem}
.wb__code .field{margin-bottom:1.2rem}
.wb__code .field>span:first-child{font-size:1.3rem;color:var(--prose)}
.wb__code .slots__boxes i{height:5.6rem;font-size:2.4rem}
.wb__err{margin:1rem 0 0;font-size:1.35rem;color:var(--copper-ink)}
.wb__quiet{background:none;border:0;padding:.8rem 0;min-height:4.4rem;font:inherit;font-size:1.35rem;color:var(--prose);
  text-decoration:underline;text-underline-offset:.35rem;text-decoration-color:var(--hair);cursor:pointer}
.wb__quiet:hover{color:var(--ink);text-decoration-color:currentColor}
.wb-hello{display:flex;align-items:center;justify-content:space-between;gap:1.2rem 2rem;flex-wrap:wrap;
  margin:0 0 2.4rem;padding:1.2rem 1.6rem;background:#fff;border:.1rem solid var(--hair);border-inline-start:.3rem solid var(--palm)}
.wb-hello[hidden]{display:none}
.wb-hello p{margin:0;font-size:1.6rem;color:var(--ink)}
.wb-hello small{display:block;margin-top:.2rem;font-size:1.3rem;color:var(--prose)}
.wb-hello form{margin:0}
.wb-hello .wb__quiet{min-height:3.6rem;padding:.4rem 0}