:root{
  --paper:#FFFFFF; --paper-2:#F2EFE9; --white:#FFFFFF; --ink:#141210; --ink-2:#3A3531; --slate:#6E675F;
  --line:rgba(20,18,16,.16); --lemon:#E9C94A; --olive:#7E8A6E; --brown:#AA9980; --gold:#C2A263;
  --pill:var(--ink); --pill-t:#fff; --radius:999px; --card-bg:#F7F4EE;
  --b:"Instrument Sans",system-ui,sans-serif; --w:"Times New Roman",Times,serif; --i:"Instrument Serif",Georgia,"Times New Roman",serif; /* one voice with the home page: serif for what speaks, sans for what explains */
  --e:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--b);font-weight:400;
  font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
.w{width:min(1360px,100% - 2*clamp(16px,3vw,40px));margin-inline:auto}
h1,h2,h3{font-family:var(--i);font-weight:400;letter-spacing:-.01em;margin:0;text-transform:lowercase}
.k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;font-weight:500;
  border-radius:var(--radius);font-size:13px;font-weight:400;background:var(--pill);color:var(--pill-t);
  transition:.22s var(--e);white-space:nowrap}
.pill:hover{opacity:.82}
.pill--ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.pill--ghost:hover{opacity:1;background:var(--ink);color:#fff;border-color:var(--ink)}
.pill--line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.pill--line:hover{background:var(--ink);color:#fff}
.scribble{position:relative;display:inline-block}
.scribble svg{position:absolute;left:-2%;right:-2%;bottom:-.12em;width:104%;height:.36em;color:var(--lemon)}

/* ---------- announcement + header ---------- */
.ann{background:var(--paper);border-bottom:1px solid var(--line);font-size:11.5px;text-align:center;
  padding:8px 40px;position:relative}
.ann i{font-style:normal;position:absolute;top:50%;translate:0 -50%;opacity:.5}
.ann i:first-child{left:14px}.ann i:last-child{right:14px}
header{position:sticky;top:var(--preline-h,0px);z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
header .w{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:66px;gap:28px}
header .util{justify-self:end}
.logo{font-family:var(--w);font-size:28px;letter-spacing:.16em;text-indent:.16px;min-height:44px;display:inline-flex;align-items:center;justify-self:center;color:var(--brown)}
nav{display:flex;gap:22px}
nav a{font-family:var(--i);font-size:18px;min-height:44px;display:inline-flex;align-items:center}
nav a:hover{opacity:.6}
.util{display:flex;gap:16px;align-items:center;font-size:13px}
.util button,.util a{min-height:44px;display:inline-flex;align-items:center;gap:6px}
.util svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4}
@media(max-width:700px){nav a:nth-child(n+3){display:none}}

/* ---------- hero: two panels ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;height:min(88svh,820px);min-height:520px;position:relative}
@media(max-width:820px){.hero{grid-template-columns:minmax(0,1fr);height:auto}.hero .h2{aspect-ratio:4/3}}
.hp{position:relative;overflow:hidden}
.hp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:breathe 28s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.06)}}
.h1 img{object-position:center 58%}
.h2 img{object-position:center 42%;filter:grayscale(1) contrast(1.05)}
.h1::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,16,.42),rgba(20,18,16,.06) 60%)}
.hero__in{position:absolute;z-index:2;left:clamp(18px,4vw,56px);right:clamp(18px,4vw,56px);top:28%;color:#fff;max-width:36ch}
.hero__in h1{font-size:clamp(2.3rem,5vw,4.4rem);line-height:1;letter-spacing:-.01em}
.hero__in h1 .scribble svg{color:#fff}
.hero__in p{font-size:13px;margin:16px 0 0;max-width:34ch;color:rgba(255,255,255,.9)}
.hero__in .pill{margin-top:18px;background:#fff;color:var(--ink)}
.dots{position:absolute;z-index:3;right:18px;bottom:16px;display:flex;gap:6px;align-items:center;color:#fff;font-size:11px}
.dots i{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.5}
.dots i.on{opacity:1}

/* right panel: the call to action, with the name in Arabic */
.h2::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(20,18,16,0) 40%,rgba(20,18,16,.62) 100%)}
.hero__cta{position:absolute;z-index:2;right:clamp(18px,4vw,56px);left:auto;max-width:min(60%,420px);bottom:clamp(26px,5vh,60px);color:#fff;text-align:right}
.hero__cta .row{justify-content:flex-end}
.hero__cta p{margin-left:auto}
.hero__cta .ar{font-family:"Amiri",serif;font-size:clamp(4rem,9vw,8.5rem);line-height:1;margin:0;
  text-shadow:0 2px 30px rgba(20,18,16,.45)}
.hero__cta p{font-size:13px;margin:6px 0 0;color:rgba(255,255,255,.9);max-width:32ch}
.hero__cta .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero__cta .pill--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.hero__cta .pill--ghost:hover{background:#fff;color:var(--ink)}

/* find mine: two taps, then the grid answers */
.find{border:1px solid var(--line);background:var(--card-bg);padding:clamp(18px,2.6vw,34px)}
.find__q{display:grid;gap:8px;margin-bottom:16px}
.find__q .k{color:var(--slate)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;transition:.2s var(--e)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.find__ans{margin-top:20px;display:none}
.find__ans.on{display:block}
.find__ans .grid{grid-template-columns:repeat(2,1fr);max-width:720px}

/* refill reminder in the bag */
.remind{display:flex;align-items:center;gap:10px;min-height:44px;font-size:12.5px;color:var(--slate);margin:6px 0 0}
.remind svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4;flex:none}
.remind:hover{color:var(--ink)}

/* ---------- shop grid ---------- */
.shop{padding:clamp(26px,3.6vw,48px) 0 clamp(30px,4vw,56px)}
.tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 clamp(14px,2vw,24px)}
.tab{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;
  border:1px solid transparent;transition:.2s var(--e)}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-color:var(--ink)}
.tab.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-right:0;background:var(--card-bg)}
@media(max-width:1020px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:minmax(0,1fr)}}
.pc{position:relative;display:flex;flex-direction:column;border-right:1px solid var(--line);
  padding:14px 14px 18px;min-height:380px;background:var(--card-bg)}
.pc .k{color:var(--ink-2);line-height:1.5;max-width:14ch}
.pc__ph{flex:1;display:grid;place-items:center;padding:20px 10px 14px}
.bar{position:relative;width:min(58%,190px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  filter:drop-shadow(10px 16px 12px rgba(70,52,36,.32));transition:transform .5s var(--e)}
.pc:hover .bar{transform:translateY(-5px) rotate(-3deg)}
.bar img{position:absolute;inset:0;width:108%;height:108%;left:-4%;top:-3%;object-fit:cover}
.bar i{position:absolute;inset:0;border-radius:50%;background:var(--c);mix-blend-mode:multiply;opacity:.85}

/* A soap is cut from a loaf, so it is a slab with a soft cut edge — not the
   pressed puck the shampoo bars are. Same photographed surface, framed on a
   plain part of the bar face rather than on the stamp, so nothing is claimed
   about the soap that is not true of it. */
.bar--soap{aspect-ratio:1.4;border-radius:13px;
  background:url(/assets/img/bar-face.jpg?v=2) 50% 82%/300% auto no-repeat;
  filter:drop-shadow(9px 13px 11px rgba(70,52,36,.3))}
.bar--soap img{display:none}
.bar--soap i{border-radius:inherit}
/* the cut edge: light along the top, the slab's own shadow at the foot */
.bar--soap::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 2px 0 0 rgba(255,255,255,.16),
             inset -2px -3px 8px rgba(70,52,36,.2)}
.pc__n{font-size:12.5px;text-align:center;margin:0}
.pc__p{font-size:12px;color:var(--slate);text-align:center;margin:3px 0 12px}
.pc__p s{margin-left:.4em;opacity:.7}
.pc__add{align-self:center}
.pc__add.is-out{border-style:dashed;opacity:.7}
.pc__link{position:absolute;inset:0;z-index:1}
.pc__add,.pc .k{position:relative;z-index:2}
.set{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:820px){.set{grid-template-columns:minmax(0,1fr)}}
.set__ph{position:relative;min-height:340px;overflow:hidden}
.set__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.set__in{padding:clamp(22px,3vw,44px);display:flex;flex-direction:column;justify-content:center;gap:12px}
.set__in h3{font-size:clamp(1.5rem,2.8vw,2.3rem)}
.set__in p{color:var(--slate);margin:0;max-width:44ch}
.set__price{font-size:1.1rem}.set__price s{color:var(--slate);margin-left:.4em}
.disc-row{display:flex;gap:8px;flex-wrap:wrap}
.disc-row span{width:34px;height:34px;border-radius:50%;background:var(--c);
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.15),inset 0 3px 8px rgba(255,255,255,.4)}
.hid{display:none!important}
.gdots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.gdots i{width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.25}
.gdots i.on{opacity:1}

/* ---------- three category panels ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);height:min(78vh,720px);min-height:420px}
@media(max-width:820px){.cats{grid-template-columns:minmax(0,1fr);height:auto}.cat{aspect-ratio:4/3}}
.cat{position:relative;overflow:hidden;display:block}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e)}
.cat:hover img{transform:scale(1.04)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.18),transparent 40%,rgba(20,18,16,.22))}
.cat__t{position:absolute;z-index:2;left:22px;top:22px;color:#fff;font-size:clamp(1.8rem,3.4vw,2.8rem);
  font-weight:400;letter-spacing:-.01em;writing-mode:vertical-rl;transform:rotate(180deg);text-transform:lowercase}
.cat .pill{position:absolute;z-index:2;left:22px;bottom:22px;background:#fff;color:var(--ink)}

/* ---------- ingredients collage ---------- */
.ing{position:relative;padding:clamp(48px,7vw,110px) 0;overflow:hidden;isolation:isolate}
.ing__g{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(24px,5vw,80px);align-items:center}
@media(max-width:860px){.ing__g{grid-template-columns:minmax(0,1fr)}}
.ing h2{font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.02;max-width:12ch}
.ing p{color:var(--ink-2);max-width:46ch;margin:18px 0 0;font-size:14px}
.ing .pill{margin-top:22px}
.ing__left{position:relative}
.ing__left .leaf{position:relative;width:clamp(120px,14vw,190px);aspect-ratio:1;object-fit:cover;margin-top:clamp(18px,3vw,40px);
  box-shadow:0 26px 40px -30px rgba(20,18,16,.5)}
.coll{position:relative;min-height:clamp(440px,48vw,680px)}
.coll img{position:absolute;object-fit:cover;box-shadow:0 30px 50px -34px rgba(20,18,16,.45)}
.coll .f1{left:22%;top:0;width:36%;aspect-ratio:3/4;z-index:2}
.coll .f2{right:0;bottom:8%;width:34%;aspect-ratio:4/5;z-index:1}
.coll .f3{left:0;bottom:0;width:30%;aspect-ratio:3/4;z-index:1}
.coll .c3{left:0;bottom:-22px}
.coll figcaption{position:absolute;font-size:11px;color:var(--slate)}
.coll .c1{left:22%;top:calc(48% + 8px)}
.coll .c2{right:0;bottom:calc(8% - 22px)}

/* ---------- reviews + service + footer ---------- */
.rev{padding:clamp(34px,5vw,72px) 0;border-top:1px solid var(--line)}
.rev__g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
@media(max-width:820px){.rev__g{grid-template-columns:minmax(0,1fr)}}
.rv{border:1px solid var(--line);padding:22px;background:var(--card-bg);font-size:14px}
.rv b{display:block;font-weight:500;font-size:12px;margin-top:12px;letter-spacing:.06em}
.rv .stars{color:var(--gold);letter-spacing:.14em;font-size:12px}
.svc{border-top:1px solid var(--line);padding:clamp(16px,2.2vw,28px) 0}
.svc__g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:820px){.svc__g{grid-template-columns:1fr 1fr}}
.sv{font-size:12.5px;color:var(--slate);display:flex;gap:10px;align-items:center}
.sv svg{width:20px;height:20px;stroke:var(--ink-2);fill:none;stroke-width:1.3;flex:none}
footer{border-top:1px solid var(--line);padding:clamp(26px,3.4vw,48px) 0 24px;font-size:13px;color:var(--slate)}
footer .w{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(18px,3vw,44px);align-items:start}
@media(max-width:820px){footer .w{grid-template-columns:1fr 1fr}}
footer h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:500;margin:0 0 8px}
.fcol a{display:flex;align-items:center;min-height:44px}
.fcol a:hover{color:var(--ink)}
.f__base{grid-column:1/-1;border-top:1px solid var(--line);margin-top:22px;padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px}

/* ---------- bag drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(20,18,16,.42);opacity:0;pointer-events:none;transition:opacity .35s var(--e);z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--paper);border-left:1px solid var(--line);
  display:flex;flex-direction:column;z-index:70;transform:translateX(102%);transition:transform .45s var(--e)}
.cart.on{transform:none}
.cart__top{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
.cart__top h3{font-size:1.3rem}
#cartClose{font-size:26px;line-height:1;min-width:44px;min-height:44px}
.cart__body{flex:1;overflow:auto;padding:6px 22px}
.cart__empty{color:var(--slate);font-size:14px;text-align:center;padding:60px 0;line-height:1.7}
.ci{display:grid;grid-template-columns:46px 1fr auto;gap:13px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.ci__ph{width:46px;height:58px;overflow:hidden;background:var(--paper-2)}
.ci__ph img{width:100%;height:100%;object-fit:cover;display:block}
.ci__sw{width:46px;height:46px;border-radius:50%;background:var(--c,var(--paper-2));box-shadow:inset 0 -5px 12px rgba(0,0,0,.14),inset 0 5px 12px rgba(255,255,255,.5)}
.ci__n{margin:0;font-size:14px;font-weight:500}
.ci__m{margin:3px 0 8px;font-size:11.5px;color:var(--slate)}
.ci__qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px}
.ci__qty button{min-width:44px;min-height:44px;font-size:15px}
.ci__qty span{min-width:22px;text-align:center;font-size:13px}
.ci__r{text-align:right}.ci__p{font-size:14px}
/* what it was, above what it is: the old price sits quiet and struck through so the offer is plain in the bag too */
.ci__p s,.cart__row strong s{display:block;font-weight:400;opacity:.45;text-decoration-thickness:1px}
.ci__p s{font-size:.8em;margin-bottom:1px}
.cart__row strong{text-align:right}
.cart__row strong s{font-size:.58em;margin-bottom:1px}
.ci__x{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);min-height:44px}
.cart__foot{border-top:1px solid var(--line);padding:16px 22px 22px}
.cart__row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.cart__row strong{font-weight:500;font-size:1.2rem}
.cart__note{font-size:11.5px;color:var(--slate);margin:8px 0 14px}
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 12px;z-index:90;background:var(--ink);color:#fff;font-size:13px;
  padding:12px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:.35s var(--e);max-width:88vw;text-align:center}
.toast.on{opacity:1;translate:-50% 0}

/* ---------- variations switcher ---------- */
.sw{position:fixed;right:14px;bottom:14px;z-index:50;display:flex;gap:4px;background:rgba(255,255,255,.94);
  border:1px solid var(--line);border-radius:999px;padding:4px}
.sw a{min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:500}
.sw a.on{background:var(--ink);color:#fff}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}

/* ---------- the eight as a strip you scroll ---------- */
.strip-wrap{position:relative}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,calc((100% - 3px)/4));
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border:1px solid var(--line);border-right:0;background:var(--card-bg)}
.strip::-webkit-scrollbar{display:none}
.strip .pc{scroll-snap-align:start}
@media(max-width:1020px){.strip{grid-auto-columns:minmax(240px,50%)}}
@media(max-width:520px){.strip{grid-auto-columns:82%}}
.tabs__r{margin-left:auto;display:flex;align-items:center;gap:6px}
.tabs__r .shopall{font-size:13px;min-height:44px;display:inline-flex;align-items:center;gap:6px;margin-right:10px;border-bottom:1px solid var(--ink)}
.arr{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:#fff;transition:.2s var(--e)}
.arr:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.arr svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
/* ---------- shop page ---------- */
.ph{padding:clamp(26px,3.6vw,48px) 0 clamp(14px,2vw,24px)}
.ph h1{font-size:clamp(2rem,4vw,3.2rem)}
.ph p{color:var(--slate);margin:8px 0 0;max-width:52ch}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 clamp(14px,2vw,24px)}
.grid--all{border-right:0}
.grid--all .pc{border-bottom:1px solid var(--line)}

/* ---------- the land: dark olive panel, then the name written huge ---------- */
.land{--olive-d:#34412F;--sage-t:#B9C4AC;--paper-l:#E9E6DE;--mark:#C3CCB8}
.land__a{display:grid;grid-template-columns:1fr 1fr;min-height:min(78vh,700px)}
@media(max-width:820px){.land__a{grid-template-columns:minmax(0,1fr)}}
.land__panel{position:relative;background:var(--olive-d);color:#EDEBE3;padding:clamp(22px,3vw,40px);
  display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.land__lead{font-family:var(--i);font-size:clamp(1.25rem,2.2vw,1.9rem);line-height:1.18;margin:0;max-width:24ch;text-transform:none}
.land__lead .sage{font-style:normal;color:var(--sage-t)}
.land__ind{display:block;padding-left:44%;margin-top:.35em}
.land__ind2{display:block;padding-left:52%;color:var(--sage-t);white-space:nowrap}
.land__ind2 i{font-style:italic}
.land__fig{margin:0;display:flex;align-items:flex-end;gap:14px}
.land__fig img{width:clamp(96px,10vw,140px);aspect-ratio:4/3;object-fit:cover}
.land__fig figcaption{font-size:11px;line-height:1.5;color:rgba(237,235,227,.8)}
.land__photo{position:relative;overflow:hidden;min-height:360px}
.land__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.land__b{position:relative;background:var(--paper-l);overflow:hidden;padding:clamp(28px,4vw,56px) 0 0}
.land__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;position:relative;z-index:2}
@media(max-width:820px){.land__grid{grid-template-columns:minmax(0,1fr)}}
.land__pics{display:flex;gap:clamp(10px,1.4vw,18px);align-items:flex-end}
.land__pics figure{margin:0;flex:1}
.land__pics figure.sm{flex:.62}
.land__pics img{width:100%;aspect-ratio:4/5;object-fit:cover}
.land__pics figure.sm img{aspect-ratio:4/5}
.land__pics figcaption{font-size:11px;color:var(--slate);margin-top:6px}
.land__pics figcaption b{font-weight:500;color:var(--ink)}
.land__copy{font-family:var(--i);font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.22;margin:0;max-width:30ch;text-transform:none;
  text-align:right;justify-self:end;color:var(--ink)}
.land__copy .faded{color:rgba(20,18,16,.42)}
.land__mark{position:relative;font-family:var(--w);font-size:clamp(4.5rem,14vw,12.5rem);line-height:1;letter-spacing:-.01em;
  color:var(--mark);text-align:right;margin:clamp(20px,4vw,60px) 0 0;padding:0 clamp(16px,3vw,40px) 0 0;line-height:.86;user-select:none;overflow:visible}
.land__of{position:absolute;left:clamp(16px,3vw,40px);bottom:.55em;font-family:var(--b);font-size:11px;letter-spacing:.02em;color:var(--slate)}

/* ---------- the shop in three lines ---------- */
.rows{display:grid;gap:clamp(22px,3vw,40px)}
.row__h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 10px}
.row__h h3{font-size:1.15rem;letter-spacing:0;text-transform:lowercase;font-weight:400}
.row__h .mini{font-size:12px;color:var(--slate)}
.row__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,calc((100% - 3*16px)/4));gap:16px;
  overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;outline-offset:6px;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.row--still .row__track{-webkit-mask-image:none;mask-image:none}
.row__track::-webkit-scrollbar{display:none}
.row__track .pc{scroll-snap-align:start;border:1px solid var(--line);background:var(--card-bg);height:384px;min-height:0}
.row__track .pc img,.row__track a{-webkit-user-drag:none;user-select:none}
.row__track{touch-action:pan-x pan-y}
@media(max-width:1020px){.row__track{grid-auto-columns:minmax(220px,calc((100% - 16px)/2))}}
@media(max-width:520px){.row__track{grid-auto-columns:78%}}
.row__bar{position:relative;height:14px;margin-top:6px;cursor:pointer}
.row__bar::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line)}
.row__bar i{position:absolute;top:5px;height:3px;border-radius:2px;background:var(--ink);transition:left .08s linear}
.row--still .row__bar{display:none}
.pc--coming{border-style:dashed!important;background:#fff!important;color:var(--slate)}
.pc--coming .k{color:var(--brown)}
.pc--coming .ghost{width:min(58%,190px);aspect-ratio:1;border-radius:50%;border:1px dashed var(--line);background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(20,18,16,.03) 6px 12px)}
.pc--coming .pc__n{color:var(--ink)}

/* ---------- the note panel that fills the rest of a shop line ---------- */
.rnote{min-width:0;overflow:hidden;background:#E9E3DB;border:1px solid var(--line);
  padding:20px;display:flex;flex-direction:column}
.rnote .k{color:var(--brown)}
.rnote h4{font-family:var(--i);font-weight:400;letter-spacing:-.01em;text-transform:lowercase;
  font-size:1.12rem;line-height:1.16;margin:9px 0 7px}
.rnote__p{font-size:12.5px;line-height:1.6;color:var(--ink-2);margin:0}
.rnote__l{list-style:none;margin:11px 0 0;padding:0;font-size:11.5px;color:var(--slate)}
.rnote__l li{padding:5px 0;border-top:1px solid var(--line)}
.rnote__in{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.rnote__cta{align-self:start;margin-top:14px;min-height:40px}
.rnote__ph{margin:0;height:100%;overflow:hidden;background:var(--card-bg)}
.rnote__ph img{width:100%;height:100%;object-fit:cover}
/* wide version: photo on the left, the writing on the right */
.rnote--wide{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);padding:0}
.rnote--wide .rnote__in{padding:22px 24px;justify-content:center}
.rnote--wide h4{font-size:1.28rem}
/* inside a line it matches the cards; the narrow one keeps its list along the bottom */
.row__track .rnote{height:384px;scroll-snap-align:start}
.row__track .rnote:not(.rnote--wide) .rnote__l{margin-top:auto}
/* a line that ends in a note fills its width exactly, so it never needs arrows */
@media(min-width:1021px){.row--fit .row__track{grid-auto-columns:minmax(200px,calc((100% - 3*16px)/4))}}
/* narrow: the note drops out of the line and becomes a block underneath it */
.row--stacked>.rnote{margin-top:16px}
.row--stacked>.rnote--wide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.row--stacked>.rnote--wide .rnote__ph{min-height:230px}
@media(max-width:620px){
  .row--stacked>.rnote--wide{display:block;padding:0}
  .row--stacked>.rnote--wide .rnote__ph{height:190px;min-height:0}
  .row--stacked>.rnote--wide .rnote__in{padding:20px;justify-content:flex-start}
  .rnote--wide h4{font-size:1.12rem}
}

/* ---------- why a bar: three compact photo panels ---------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:0;height:min(58vh,520px);min-height:420px}
@media(max-width:820px){.why{grid-template-columns:minmax(0,1fr);height:auto}.why__p{aspect-ratio:4/3;min-height:360px}}
.why__p{position:relative;overflow:hidden;display:block;color:#fff}
.why__p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e)}
.why__p:hover img{transform:scale(1.04)}
.why__p::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.1) 0%,rgba(20,18,16,.08) 35%,rgba(20,18,16,.78) 100%)}
.why__t{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(18px,2.4vw,30px);display:grid;gap:8px}
.why__t .k{color:rgba(255,255,255,.75)}
.why__t b{font-family:var(--i);font-weight:400;font-size:clamp(1.4rem,2.1vw,1.8rem);line-height:1.15;letter-spacing:-.02em;text-transform:lowercase;max-width:20ch}
.why__t > span:not(.k){font-size:13px;line-height:1.5;color:rgba(255,255,255,.88);max-width:36ch}
.why__t .pill{font-style:normal;background:#fff;color:var(--ink);justify-self:start;margin-top:4px;min-height:40px;padding:0 18px;font-size:12.5px}

/* ---------- find mine, as its own section ---------- */
.find-sec{padding:clamp(30px,4.4vw,64px) 0 clamp(10px,2vw,24px)}
.find-sec .find{background:#fff}

.set__in .f select{background:#fff}

.row__nav{margin-left:auto;display:flex;gap:6px}
.row__nav .arr:disabled{opacity:.3;cursor:default}
.row__nav .arr:disabled:hover{background:#fff;color:inherit;border-color:var(--line)}

/* ---------- find mine: the big question, then the two taps ---------- */
.quiz{padding:clamp(44px,6.5vw,100px) 0}
.quiz__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:center}
@media(max-width:820px){.quiz__g{grid-template-columns:minmax(0,1fr)}}
.quiz h2{font-size:clamp(2.2rem,4.6vw,4rem);line-height:1;letter-spacing:-.03em;margin:10px 0 0;max-width:12ch}
.quiz .muted{margin:16px 0 0;max-width:46ch}
.quiz .find__ans .grid{grid-template-columns:1fr 1fr}

/* ---------- sets, half and half ---------- */
.sets2{padding:clamp(40px,6vw,90px) 0}
.sets2__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
@media(max-width:820px){.sets2__g{grid-template-columns:minmax(0,1fr)}}
.half{border:1px solid var(--line);background:var(--card-bg);display:flex;flex-direction:column}
.half>img{width:100%;aspect-ratio:16/9;object-fit:cover}
.half__in{padding:clamp(18px,2.4vw,30px);display:flex;flex-direction:column;gap:10px;flex:1}
.half__in h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:2px 0 0}
.half__in>p{color:var(--slate);font-size:14px;margin:0;max-width:46ch}
.half__row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.half__price{font-family:var(--i);font-size:1.5rem}
.half__price s{font-size:.75em;color:var(--slate);margin-left:.3em}
.half .pill{align-self:flex-start}
.pick{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.co{display:grid;gap:8px;margin:4px 0 0}
.co .pick{display:grid;grid-template-columns:108px minmax(0,1fr);gap:12px;align-items:center;max-width:400px}
.co .pick select{width:100%}
.co .pick select:disabled{opacity:.5}
.co__g{font-size:11.5px;color:var(--slate);margin:6px 0 0}
.pick select{font:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);padding:9px 34px 9px 14px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141210' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px;-webkit-appearance:none;appearance:none}
.mini-picks{display:flex;gap:8px;flex-wrap:wrap}
.mp{display:grid;justify-items:center;gap:4px;padding:6px;border-radius:8px;border:1px solid transparent;min-width:56px;min-height:64px;font-size:11px;color:var(--slate)}
.mp i{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:inset 0 -4px 8px rgba(0,0,0,.15),inset 0 4px 8px rgba(255,255,255,.4)}
.mp.on{border-color:var(--ink);color:var(--ink);background:#fff}
.mp:disabled{opacity:.35;cursor:default}
.set__in .f select{background:#fff}

/* ---------- row arrows: big, round, floating on the edges, always there ---------- */
.rows>.row{min-width:0}
.row__wrap{position:relative;min-width:0}
.row__arr{position:absolute;top:calc(50% - 26px);z-index:3;width:52px;height:52px;border-radius:50%;
  background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px -8px rgba(20,18,16,.45);
  display:grid;place-items:center;color:var(--ink);transition:.2s var(--e)}
.row__arr svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.row__arr--l{left:-14px}.row__arr--r{right:-14px}
.row__arr:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.row__arr:disabled{opacity:0;pointer-events:none}
.row--still .row__arr{display:none}
.row__more{margin-left:auto;letter-spacing:.08em}
.row--still .row__more{display:none}
@media(max-width:700px){.row__arr{width:44px;height:44px;top:calc(50% - 22px)}.row__arr--l{left:-6px}.row__arr--r{right:-6px}}

/* ---------- the finder, inside the shop: text | chips | photo ---------- */
.quiz--inline{padding:clamp(26px,3.6vw,48px) 0;margin:clamp(10px,1.6vw,20px) 0;border-block:1px solid var(--line)}
.quiz__g--3{grid-template-columns:.8fr 1.3fr .7fr;align-items:center}
.quiz--inline h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.quiz__ph{margin:0;aspect-ratio:3/4;overflow:hidden;max-height:380px}
.quiz__ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:1020px){.quiz__g--3{grid-template-columns:1fr 1fr}.quiz__ph{display:none}}
@media(max-width:820px){.quiz__g--3{grid-template-columns:minmax(0,1fr)}}

/* ---------- the finder's answer: two small rows, not two big cards ---------- */
.quiz--inline .find{padding:clamp(14px,1.8vw,22px)}
.quiz--inline .find__q{margin-bottom:10px}
.quiz--inline .chip{min-height:40px;padding:0 13px;font-size:12.5px}
.find__ans{margin-top:12px}
.find__why{margin:0 0 4px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.ansrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.ansrow i{width:34px;height:34px;border-radius:50%;flex:none;background:var(--c);box-shadow:inset 0 -4px 8px rgba(0,0,0,.15),inset 0 4px 8px rgba(255,255,255,.4)}
.ansrow__n{flex:1;font-size:14px;line-height:1.25;min-height:44px;display:flex;flex-direction:column;justify-content:center}
.ansrow__n small{display:block;color:var(--slate);font-size:12px}
.ansrow__p{font-family:var(--i);font-size:16px;white-space:nowrap}
.pill--sm{min-height:40px;padding:0 14px;font-size:12.5px}
/* the pre-order line under the header */
/* the launch offer: the one thing a visitor must not miss, so it is the darkest
   band on the page rather than a grey whisper under the header */
.preline{position:sticky;top:0;z-index:40;display:block;text-decoration:none;text-align:center;font-size:15px;line-height:1.45;letter-spacing:.01em;padding:12px 16px;background:#121212;color:rgba(255,255,255,.82);border-bottom:0;transition:background .2s ease}
.preline:hover{background:#000}
.preline span{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:500;color:#fff}
.preline b{color:#fff;font-weight:500;font-size:16px}
/* on a phone the band ran to two lines and ate the top of the screen */
@media(max-width:560px){
  .preline{font-size:12.5px;line-height:1.35;padding:8px 12px}
  .preline span{font-size:10px;letter-spacing:.1em}
  .preline b{font-size:13px}
}
@media(max-width:600px){.preline{font-size:13.5px;padding:10px 14px}.preline b{font-size:14.5px}}
/* back-in-stock notify */
.ndlg{border:0;border-radius:20px;padding:0;max-width:min(92vw,420px);box-shadow:0 30px 60px -30px rgba(18,18,18,.35)}
.ndlg::backdrop{background:rgba(18,18,18,.35);backdrop-filter:blur(4px)}
.ndlg__f{padding:26px 26px 20px;display:grid;gap:12px;font-size:14.5px;color:#55554F}
.ndlg__f h3{margin:0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.7rem;color:#121212;text-transform:lowercase;letter-spacing:-.01em}
.ndlg__f p{margin:0}.ndlg__f b{color:#121212;font-weight:500}
.ndlg__f input{font:inherit;font-size:15px;min-height:46px;padding:0 14px;border:1px solid rgba(18,18,18,.15);border-radius:999px;background:#fff;width:100%}
.ndlg__f input:focus{outline:2px solid #121212;outline-offset:1px}
.ndlg__row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ndlg__tiny{font-size:12px;color:#8A8078}.ndlg__tiny a{text-decoration:underline;color:#121212}
[data-notify].is-done{opacity:.7;cursor:default}
/* the launch-offer card */
.welcome{position:fixed;right:16px;bottom:16px;z-index:60;max-width:min(92vw,340px);background:#fff;border-radius:20px;padding:20px 20px 18px;box-shadow:0 30px 60px -28px rgba(18,18,18,.4),0 4px 16px -8px rgba(18,18,18,.15);border:1px solid rgba(18,18,18,.06);opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.welcome.on{opacity:1;transform:none}
.welcome__x{position:absolute;right:10px;top:8px;width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;color:#55554F;background:none;border:0;cursor:pointer}.welcome__x:hover{background:#F5F5F3}
.welcome__k{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#55554F;font-weight:500}
.welcome h3{margin:8px 24px 6px 0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.45rem;line-height:1.1;color:#121212;text-transform:lowercase;letter-spacing:-.01em}
.welcome p{margin:0 0 14px;font-size:13px;line-height:1.5;color:#55554F}
/* sold out, at a glance: the bar fades to grey and the only live thing is the quiet notify control */
.pc--out .bar{opacity:.5;outline:1.5px dashed rgba(18,18,18,.45);outline-offset:5px}.pc--out .k{color:#8A8078}
.pc--out .pc__add.is-out{background:transparent;color:#121212;border:1px solid #121212;opacity:1;border-style:solid}
.is-out .gal__main img,.is-out .gal__disc{opacity:.7}
.p__stock.out{color:#8A8078}

/* On a phone the footer was two columns, so Shop sat beside the brand block and
   its heading lined up with the wordmark instead of with Learn and Elsewhere.
   The brand takes the full width and the three columns line up under it. */
@media(max-width:820px){
  footer .w>div:first-child,.e footer .w>div:first-child{grid-column:1/-1}
  footer h4 a,.e footer h4 a{color:inherit;text-decoration:none}
  footer h4 a:hover,.e footer h4 a:hover{text-decoration:underline}
}

/* The wordmark and the bag are pinned to their columns. Without this, on any page
   whose menu is hidden the wordmark falls into the first column and the bag into
   the middle — which is what happened on the account, checkout and order pages. */
header .w>.logo,.e header .w>.logo{grid-column:2;justify-self:center}
header .w>.util,header .w>.bag,.e header .w>.util,.e header .w>.bag{grid-column:3;justify-self:end}
header .w>nav,header .w>.menuBtn,.e header .w>nav,.e header .w>.menuBtn{grid-column:1;justify-self:start}

/* the bag bar: it slides up when there is something to buy, and stays out of the way */
.bagbar{position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);z-index:55;
  display:flex;align-items:center;gap:18px;width:min(520px,calc(100% - 2*var(--gut)));
  justify-content:space-between;padding:13px 16px 13px 20px;border-radius:999px;
  background:var(--ink,#121212);color:#fff;text-decoration:none;font-size:14px;
  box-shadow:0 24px 44px -22px rgba(18,18,18,.7);transition:transform .38s var(--e,ease),opacity .3s var(--e,ease);opacity:0;pointer-events:none}
.bagbar.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.bagbar__n{font-variant-numeric:tabular-nums;opacity:.85}
.bagbar__go{display:inline-flex;align-items:center;gap:8px;font-weight:500;white-space:nowrap}
.bagbar__go i{font-style:normal;transition:transform .3s var(--e,ease)}.bagbar{border:0;font-family:inherit;cursor:pointer;text-align:left}
.bagbar:hover .bagbar__go i{transform:translateX(4px)}
.cart.on~.bagbar,.scrim.on~.bagbar{opacity:0;pointer-events:none}   /* the drawer is open: nothing behind it */
@media(prefers-reduced-motion:reduce){.bagbar{transition:opacity .2s}}
@media print{.bagbar{display:none}}

/* the toast rises above the bag bar rather than landing on top of it */
body:has(.bagbar.on) .toast{bottom:86px}