:root{
  --ink:#080706;--char:#111010;--line:rgba(233,225,212,.15);--ivory:#EDE6DA;--ash:#C6BDB2;--mute:#9C9389;
  --brass:#B08D52;--focus:#E8C98B;--paper:#EFEAE1;--paper-ink:#14120F;--bad:#D69182;--good:#9CC087;
  --fd:"Cormorant Garamond","Hoefler Text",Georgia,serif;--fb:"Jost","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(18px,5vw,64px);--ease:cubic-bezier(.22,.61,.36,1);--hdr:72px;
  --text2:#D8CFC2;--glass:rgba(8,7,6,.9);--field:rgba(255,255,255,.025);--field-hover:rgba(255,255,255,.05);--btn-line:rgba(237,230,218,.5);
  --radio-line:rgba(216,207,194,.45);--bad-line:#B0685C;--bad-text:#EDBBAF;--ph:#131211;--pop:#141210;--pop-shadow:0 24px 60px rgba(0,0,0,.55);
  --sel-bg:rgba(176,141,82,.14);
}
html{color-scheme:dark}
html[lang="ar"]{--fd:"Amiri","Cormorant Garamond",Georgia,serif;--fb:"Noto Sans Arabic","Jost",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--fb);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--fd);font-weight:500;margin:0;line-height:1.15;text-wrap:balance}
p,dl,dd,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Spam trap: invisible, but still in the form for bots to fill. Clipped in place rather than pushed off to the
   left, because in Arabic (right to left) the space on the left is scrollable and made the page 10,000px wide. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.skip{position:fixed;top:8px;inset-inline-start:8px;z-index:100;background:var(--paper);color:var(--paper-ink);padding:12px 18px;font-weight:500;transform:translateY(-200%)}
.skip:focus{transform:none}
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--gut)}
.wrap.narrow{max-width:760px}
.lab{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.h2{font-size:clamp(28px,5vw,52px)}
.lede{color:var(--text2);max-width:62ch}
.pad{padding-block:clamp(56px,9vw,128px)}
.pad.top0{padding-top:0}
.center{text-align:center;justify-self:center}
html[lang="ar"] .lab,html[lang="ar"] .btn,html[lang="ar"] .nav a,html[lang="ar"] .tlink,html[lang="ar"] .mark:not(.keep){letter-spacing:0}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.45}
html[lang="ar"] body{line-height:1.95}
html[lang="ar"] .mark{font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:.38em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:14px 34px;border:1px solid var(--btn-line);
  background:transparent;font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;
  transition:color .45s var(--ease),border-color .45s,opacity .3s}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--ivory);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover{color:var(--paper-ink);border-color:var(--ivory)}.btn:hover::before{transform:none}
.btn.solid{background:var(--ivory);color:var(--paper-ink);border-color:var(--ivory)}
.btn.solid::before{background:var(--brass)}
.btn.wide{width:100%}.btn.sm{min-height:42px;padding:10px 20px}.btn.grow{flex:1}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.pending{opacity:.65;pointer-events:none}
.tlink{background:none;border:0;border-bottom:1px solid var(--line);padding:4px 0;cursor:pointer;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.tlink:hover{color:var(--ivory);border-color:var(--brass)}

/* header */
header.site{position:fixed;inset:0 0 auto;z-index:50;transition:background .5s var(--ease)}
header.site.solid,body:not(.has-hero) header.site{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:18px;height:var(--hdr);max-width:1320px;margin:0 auto;padding-inline:var(--gut);position:relative}
.nav{display:none;gap:30px;flex:1}
.nav a{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding-block:8px;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--brass)}
.mark{font-family:var(--fd);font-size:18px;letter-spacing:.42em;text-indent:.42em;white-space:nowrap}
.tools{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.lang{display:inline-grid;place-items:center;min-width:44px;min-height:44px;font-size:13px;font-weight:500;color:var(--ash)}
.lang:hover{color:var(--brass)}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;margin:0;background:none;border:0;border-radius:0;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.icon-btn:hover{color:var(--brass)}
.icon-btn svg,.tabbar svg{stroke:currentColor;fill:none;stroke-width:1.3}
.count{position:absolute;top:4px;inset-inline-end:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--brass);color:#15100A;font-size:10px;font-weight:600;display:grid;place-items:center;line-height:1}
.burger{display:grid;gap:5px;width:44px;height:44px;place-content:center;background:none;border:0;cursor:pointer}
.burger i{display:block;width:22px;height:1px;background:var(--ivory)}
/* Full menu only when there is room for it beside the centred logo; narrower screens use the ☰ menu. */
@media(min-width:1100px){.nav{display:flex}.burger{display:none}.mark{position:absolute;left:50%;transform:translateX(-50%)}}
@media(max-width:899px){.mark{font-size:16px;letter-spacing:.32em;text-indent:.32em}.cart-btn{display:none}}

/* menu sheet */
.menu{position:fixed;inset:0;z-index:70;background:var(--glass);display:flex;flex-direction:column;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
.menu[hidden]{display:none}
.mhead{display:flex;align-items:center;justify-content:center;position:relative;min-height:var(--hdr);border-bottom:1px solid var(--line)}
.mhead .close{position:absolute;inset-inline-end:calc(var(--gut) - 10px);top:50%;transform:translateY(-50%);width:44px;height:44px;background:none;border:0;font-size:28px;cursor:pointer}
.mlinks{display:grid;padding:18px var(--gut)}
.mlinks a{font-family:var(--fd);font-size:30px;padding:12px 0}
.mfoot{margin-top:auto;padding:24px var(--gut) 40px;border-top:1px solid var(--line);display:grid;gap:14px;justify-items:start}

/* flash */
.flashes{position:fixed;top:calc(var(--hdr) + 12px);left:50%;transform:translateX(-50%);z-index:60;width:min(520px,calc(100% - 32px));display:grid;gap:8px}
.flash{background:var(--paper);color:var(--paper-ink);padding:14px 18px;font-size:14px;border-inline-start:3px solid var(--brass);box-shadow:0 12px 40px rgba(0,0,0,.4);animation:fl 5s forwards}
.flash{cursor:pointer}.flash.err{border-color:var(--bad-line);animation-duration:14s}.flash.gone{display:none}
@keyframes fl{0%,85%{opacity:1}100%{opacity:0;visibility:hidden}}

/* hero */
.hero{position:relative;min-height:min(88vh,820px);display:grid;place-items:center;text-align:center;padding:calc(var(--hdr) + 48px) var(--gut) 90px;overflow:hidden}
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* The words sit on the picture, so it is darkened towards the bottom where they are. */
.hero.has-photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(8,7,6,.45),rgba(8,7,6,.2) 42%,rgba(8,7,6,.78))}
.hero.photo-phone-only .hero-photo{display:none}
.hero.photo-wide-only .scene{display:none}
/* A picture usually carries the name already, so the written one steps aside where the picture shows.
   It stays in the page for search engines and screen readers, and returns on screens still showing the drawn scene. */
.hero.has-photo h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero.photo-phone-only h1{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
@media(max-width:700px){
  .hero.photo-phone-only .hero-photo{display:block}
  .hero.photo-phone-only .scene{display:none}
  .hero.photo-wide-only .hero-photo{display:none}
  .hero.photo-wide-only .scene{display:block}
  .hero.has-photo{min-height:min(74vh,620px);align-content:end}
  .hero.photo-phone-only h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hero.photo-wide-only h1{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
}
.hero .in{position:relative;z-index:2;display:grid;gap:24px;justify-items:center;max-width:100%}
.hero h1{font-size:clamp(30px,8.6vw,112px);letter-spacing:.18em;text-indent:.18em;line-height:1.05;text-shadow:0 12px 60px rgba(0,0,0,.55)}
.hero .sub{font-family:var(--fd);font-style:italic;font-size:clamp(18px,3.8vw,30px);color:#E7DCCB}
.hero .foot{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:26px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
html[lang="ar"] .hero h1{letter-spacing:.1em}
.scene{position:absolute;inset:0;overflow:hidden;background:#0B0A09}
.scene::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 85% at 50% 45%,transparent 30%,rgba(6,5,5,.72) 100%)}
.scene .sky{position:absolute;inset:0;background:radial-gradient(70% 55% at 72% 26%,rgba(238,181,116,.55),transparent 62%),radial-gradient(90% 70% at 78% 40%,rgba(160,104,62,.42),transparent 70%),linear-gradient(180deg,#2A1D14 0%,#17110D 42%,#0A0807 100%)}
.scene .water{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,rgba(214,152,96,.3),rgba(10,9,8,.05) 60%),repeating-linear-gradient(180deg,rgba(255,224,185,.05) 0 1px,transparent 1px 7px)}
.scene .ridge{position:absolute;left:0;right:0;bottom:38%;height:26%;background:linear-gradient(180deg,rgba(58,40,28,.9),rgba(18,13,10,.95));clip-path:polygon(0 62%,9% 44%,19% 55%,31% 33%,44% 48%,57% 30%,71% 46%,84% 36%,100% 52%,100% 100%,0 100%)}
.scene .col{position:absolute;top:-6%;bottom:-6%;background:linear-gradient(90deg,rgba(10,8,7,.97),rgba(74,60,45,.55) 45%,rgba(8,7,6,.98));box-shadow:0 0 70px 30px rgba(6,5,5,.6)}
.scene .col.a{left:-2%;width:26%}.scene .col.b{right:-2%;width:22%}
.scene .glow{position:absolute;inset:0;mix-blend-mode:screen;opacity:.5;background:radial-gradient(40% 32% at 66% 30%,rgba(255,206,150,.45),transparent 70%);animation:breathe 13s ease-in-out infinite}
@keyframes breathe{50%{opacity:.62;transform:scale(1.06)}}
.grain{position:absolute;inset:0;opacity:.05;pointer-events:none;background-size:180px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(max-width:700px){.hero{min-height:auto;padding:calc(var(--hdr) + 56px) var(--gut) 64px}.hero h1{letter-spacing:.12em;text-indent:.12em}
  .hero .foot{position:static;justify-content:center;gap:14px;margin-top:40px;font-size:9px}.hero .btn{width:100%;max-width:320px}}

/* sections */
.page-head{padding:calc(var(--hdr) + clamp(36px,6vw,72px)) 0 clamp(28px,4vw,48px)}
.page-head .wrap{display:grid;gap:14px}
.head-row{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:clamp(24px,4vw,40px);padding-bottom:14px;border-bottom:1px solid var(--line)}
.head-lab{margin-bottom:24px}
.story{background:var(--char);text-align:center}
.story .wrap{display:grid;gap:22px;justify-items:center}
.empty{border:1px solid var(--line);padding:clamp(40px,7vw,80px) 24px;text-align:center;display:grid;gap:16px;justify-items:center}
.empty h2{font-size:clamp(22px,3.4vw,32px)}
.empty p{color:var(--ash);max-width:48ch}
.prose{display:grid;gap:18px;color:var(--text2);max-width:68ch}

/* product grid */
.pgrid{display:grid;gap:clamp(16px,2.6vw,36px);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.pgrid{gap:12px}}
.pgrid.single{grid-template-columns:minmax(0,440px)}
.card-link{display:grid;gap:14px}
.media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--char)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card-link:hover .media img{transform:scale(1.04)}
.ph{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;border:1px solid var(--line);background:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 10px,transparent 10px 20px),var(--ph)}
.ph span{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.badge{position:absolute;top:10px;inset-inline-start:10px;background:var(--glass);padding:5px 10px;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.meta h3{font-size:clamp(17px,2vw,21px);letter-spacing:.1em}
.meta .sub{font-family:var(--fd);font-style:italic;color:var(--ash);font-size:14px}
.meta .price{font-size:13px;color:var(--brass);font-variant-numeric:tabular-nums;white-space:nowrap}
html[lang="ar"] .meta h3{letter-spacing:0}

/* product page */
.pdp{padding-top:calc(var(--hdr) + clamp(20px,4vw,48px))}
.pdp-grid{display:grid;gap:clamp(24px,5vw,72px);padding-bottom:clamp(48px,8vw,100px)}
@media(min-width:900px){.pdp-grid{grid-template-columns:1.05fr .95fr;align-items:start}.pinfo{position:sticky;top:calc(var(--hdr) + 24px)}}
.gallery{display:grid;gap:12px}
.main-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--char)}
.main-img img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;flex-wrap:wrap;gap:10px}
.thumb{flex:0 0 72px;aspect-ratio:4/5;padding:0;border:1px solid transparent;background:var(--char);opacity:.55;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb[aria-current]{opacity:1;border-color:var(--brass)}
.pinfo{display:grid;gap:18px;align-content:start}
.pinfo h1{font-size:clamp(32px,5vw,50px);letter-spacing:.1em}
html[lang="ar"] .pinfo h1{letter-spacing:0}
.pinfo .sub{font-family:var(--fd);font-style:italic;font-size:20px;color:var(--ash)}
.pinfo .price{font-family:var(--fd);font-size:30px;color:var(--brass);font-variant-numeric:tabular-nums}
.stock{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ash)}
.stock i{width:7px;height:7px;border-radius:50%;background:var(--good)}
.stock.low i{background:var(--brass)}.stock.out i{background:var(--bad-line)}
.buy{display:grid;gap:18px}
.sizes{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.sizes legend{width:100%;margin-bottom:10px}
.sizes label{position:relative;display:grid;gap:2px;min-width:100px;padding:12px 16px;border:1px solid var(--line);cursor:pointer}
.sizes label:has(input:checked){border-color:var(--brass);background:rgba(176,141,82,.08)}
.sizes label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.sizes label:has(input:disabled){opacity:.4;cursor:not-allowed;text-decoration:line-through}
.sizes input{position:absolute;opacity:0;inset:0;margin:0;cursor:inherit}
.sizes b{font-weight:500}.sizes span{font-size:12.5px;color:var(--ash)}
.buy-row{display:flex;gap:12px;flex-wrap:wrap}
.qty{display:flex;border:1px solid var(--line)}
.qty button{width:46px;background:none;border:0;cursor:pointer;font-size:18px;color:var(--ash)}
.qty input{width:48px;text-align:center;background:none;border:0;font-size:16px;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.trust{display:grid;gap:6px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ash)}
.trust li::before{content:"— ";color:var(--brass)}
.notes{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
@media(min-width:700px){.notes{grid-template-columns:repeat(3,1fr)}}
.notes div{background:var(--ink);padding:24px;display:grid;gap:8px}
.notes dd{font-family:var(--fd);font-size:19px}
.notes-one{font-family:var(--fd);font-size:19px;margin-top:20px;max-width:60ch;overflow-wrap:anywhere}
.buybar{position:fixed;inset:auto 0 0;z-index:45;display:flex;align-items:center;gap:14px;padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));background:var(--glass);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.buybar[hidden]{display:none}
.buybar div{display:grid;min-width:0}.buybar b{font-family:var(--fd);font-weight:500;font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.buybar span{font-size:12px;color:var(--brass)}.buybar .btn{margin-inline-start:auto;min-height:46px;padding-inline:22px}
@media(min-width:900px){.buybar{display:none!important}}

/* cart & summary */
.cart-grid,.checkout-grid{display:grid;gap:clamp(24px,4vw,56px)}
@media(min-width:900px){.cart-grid,.checkout-grid{grid-template-columns:1.4fr 1fr;align-items:start}.summary{position:sticky;top:calc(var(--hdr) + 24px)}}
@media(max-width:899px){.checkout-grid .summary{order:-1}}
.lines{display:grid;gap:0;align-content:start;justify-items:start}
.cline{width:100%;display:grid;grid-template-columns:84px 1fr auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.cimg{aspect-ratio:4/5;background:var(--char);position:relative;overflow:hidden}.cimg img{width:100%;height:100%;object-fit:cover}
.cinfo{display:grid;gap:4px;align-content:start;min-width:0}.cinfo h2{font-size:19px;letter-spacing:.06em}.cinfo .sub{font-size:13px;color:var(--ash)}
.crow{display:flex;align-items:center;gap:16px;margin-top:8px}
.cqty{width:64px;min-height:44px;text-align:center;background:transparent;border:1px solid var(--line);font-size:16px}
.cline-total{font-variant-numeric:tabular-nums;color:var(--brass);white-space:nowrap}
.lines>.btn{margin-top:18px}
.summary{border:1px solid var(--line);padding:clamp(18px,3vw,30px);display:grid;gap:16px;align-content:start}
.summary.flat{border:0;padding:0}
.srows{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.srow{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--ash)}
.srow b{font-weight:400;color:var(--ivory);font-variant-numeric:tabular-nums;white-space:nowrap}
.srow.save b{color:var(--good)}
.srow.total{font-family:var(--fd);font-size:22px;color:var(--ivory);padding-top:12px;border-top:1px solid var(--line)}
.nudge{font-size:13px;color:var(--ash);border:1px solid rgba(176,141,82,.35);background:rgba(176,141,82,.07);padding:10px 14px}
.coupon{display:grid;gap:8px}
.coupon-row{display:flex;gap:8px}
.coupon-row input{flex:1;min-width:0;min-height:42px;background:transparent;border:1px solid var(--line);padding:8px 12px;font-size:16px;text-transform:uppercase}

/* forms */
fieldset{border:0;padding:0;margin:0 0 30px;display:grid;gap:0}
fieldset>legend{margin-bottom:18px}
.field{display:grid;gap:7px;margin-bottom:18px}
.field label{font-size:12.5px;font-weight:500;color:var(--ash)}
.field small{font-weight:400;color:var(--mute)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;background:var(--field);border:1px solid var(--line);border-radius:0;font-size:16px;transition:border-color .3s}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),linear-gradient(135deg,var(--ash) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat}
html[dir="rtl"] .field select{background-position:20px 22px,15px 22px}
.field .help{font-size:12.5px;color:var(--mute)}
.field .err,.err{font-size:12.5px;color:var(--bad)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--bad-line)}
.grid2{display:grid;gap:0 14px}
@media(min-width:560px){.grid2{grid-template-columns:1fr 1fr}}
.paym{display:grid;gap:10px}
.paym label{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--line);cursor:pointer}
.paym label:has(input:checked){border-color:var(--brass);background:rgba(176,141,82,.06)}
.paym input{accent-color:var(--brass);margin-top:5px;width:18px;height:18px}
.paym span{display:grid;gap:2px}.paym small{color:var(--ash);font-size:13px}
.paym.bad label{border-color:var(--bad-line)}
.contact-grid{display:grid;gap:clamp(24px,5vw,64px)}
@media(min-width:900px){.contact-grid{grid-template-columns:1.3fr 1fr;align-items:start}}

/* order */
.order-hero{padding:calc(var(--hdr) + clamp(40px,8vw,90px)) 0 clamp(32px,5vw,56px);text-align:center}
.order-hero .wrap{display:grid;gap:18px;justify-items:center}
.tick{width:64px;height:64px;border:1px solid var(--brass);border-radius:50%;display:grid;place-items:center}
.tick svg{stroke:var(--brass);fill:none;stroke-width:1.3}
.status-pill{display:inline-block;padding:6px 14px;border:1px solid var(--line);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.s-paid,.s-processing,.s-shipped,.s-delivered{color:var(--good);border-color:rgba(156,192,135,.4)}
.s-pending{color:var(--brass);border-color:rgba(176,141,82,.45)}.s-failed{color:var(--bad);border-color:rgba(214,145,130,.45)}
.order-body{display:grid;gap:32px}
.kv{display:grid;gap:16px}.kv div{display:grid;gap:4px}.kv dd{color:var(--text2)}
.kv.boxed{border:1px solid var(--line);padding:clamp(20px,3vw,32px)}
.help{font-size:13px;color:var(--mute)}

/* footer */
footer.site{border-top:1px solid var(--line)}
.assur{display:grid;gap:24px}
@media(min-width:560px){.assur{grid-template-columns:repeat(3,1fr)}}
.assur h2{font-family:var(--fb);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.assur p{font-size:13px;color:var(--ash)}
.join{font-family:var(--fd);font-style:italic;color:var(--ash)}
.news{display:flex;border-bottom:1px solid var(--line)}
.news input[type=email]{flex:1;min-width:0;min-height:48px;background:none;border:0;font-size:16px}
.news input:focus{outline:none}
.news button{width:48px;background:none;border:0;color:var(--brass);font-size:18px;cursor:pointer}
.social,.flinks{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
/* footer layout: brand and sign-up, two link columns, then the service promises */
.fmain{display:grid;gap:36px 48px;padding-block:clamp(48px,7vw,80px) clamp(32px,5vw,48px)}
@media(min-width:640px){.fmain{grid-template-columns:repeat(2,minmax(0,1fr))}.fbrand{grid-column:1 / -1}}
@media(min-width:960px){.fmain{grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,.7fr);gap:64px}.fbrand{grid-column:auto}}
.fbrand{display:grid;gap:14px;align-content:start;max-width:440px}
footer.site .fmark{position:static;transform:none;justify-self:start;text-align:start;max-width:none;font-size:20px}
footer.site .fmark img{height:calc(var(--logo-h,36px) * 1.1);max-width:260px}
.fcol{display:grid;gap:2px;align-content:start}
.fhead{margin-bottom:10px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.fcol a{justify-self:start;padding-block:6px;font-size:14px;color:var(--ash);transition:color .2s}
.fcol a:hover,.fcol a:focus-visible{color:var(--ivory)}
.fassur{border-top:1px solid var(--line);padding-block:clamp(28px,4vw,40px)}
html[lang="ar"] .fhead{letter-spacing:0}
.social a,.flinks a{padding-block:8px}
.social a:hover,.flinks a:hover{color:var(--ivory)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:22px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* mobile tab bar */
.wa-float{position:fixed;inset-inline-end:16px;bottom:calc(var(--bottombar,0px) + 16px);z-index:44;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);color:var(--brass);transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.wa-float svg{fill:currentColor;stroke:none}
.wa-line{margin-top:26px}
.wa-link{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border:1px solid var(--line);color:var(--ash);font-size:13px;letter-spacing:.04em;transition:color .3s var(--ease),border-color .3s var(--ease)}
.wa-link svg{fill:currentColor;stroke:none;flex:none}
.wa-link:hover{color:var(--ivory);border-color:var(--brass)}
.wa-float:hover{color:var(--ivory);border-color:var(--brass);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}
@media print{.wa-float{display:none}}
.tabbar{position:fixed;inset:auto 0 0;z-index:40;display:flex;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a,.tabbar button{flex:1;display:grid;justify-items:center;gap:4px;min-height:58px;padding:10px 0 8px;background:none;border:0;color:var(--ash);font-size:10px;font-weight:500;letter-spacing:.06em;cursor:pointer}
.tabbar [aria-current]{color:var(--brass)}
.pay-due-card{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px;padding:20px 22px;border:1px solid var(--brass);background:color-mix(in srgb,var(--brass) 8%,transparent)}
.pay-due-card>div{flex:1;min-width:240px}
.pay-due-card .lab{color:var(--brass);margin-bottom:6px}
.acct-btn{position:relative}
.count.pay{background:var(--brass);color:#14120F}
.acct-item.pay-due{color:var(--brass)}
.tb-ico{position:relative;display:grid}.tabbar .count{top:-6px;inset-inline-end:-10px}
@media(min-width:900px){.tabbar{display:none}}
@media(max-width:899px){body{padding-bottom:calc(58px + env(safe-area-inset-bottom));--bottombar:calc(58px + env(safe-area-inset-bottom))}
  body.is-checkout,body.has-buybar{--bottombar:calc(70px + env(safe-area-inset-bottom))}
  body.is-checkout .tabbar,body.has-buybar .tabbar{display:none}
  body.is-checkout{padding-bottom:0}}

/* motion */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

/* uploaded logo */
.mark:has(img){letter-spacing:0;text-indent:0;display:inline-flex;align-items:center;line-height:0}
.mark img{height:var(--logo-h,36px);width:auto;max-width:min(240px,46vw);object-fit:contain}
@media(max-width:899px){.mark img{height:calc(var(--logo-h,36px) * .85)}}
.mhead .mark img{max-width:60vw}

/* ---------- nothing gets cut off ---------- */
.hero h1,.pinfo h1,.meta h3,.cinfo h2,.notes dd,.kv dd,.empty h2,.prose,.lede{overflow-wrap:anywhere}
.srow span{min-width:0;overflow-wrap:anywhere}
.meta>div{min-width:0}
.sizes label{min-width:min(100px,100%);overflow-wrap:anywhere}
.paym span{min-width:0;overflow-wrap:anywhere}
/* A long store name shown as text wraps instead of running under the icons. */
.mark{max-width:34vw;white-space:normal;text-align:center;line-height:1.15;overflow-wrap:anywhere}
@media(max-width:1099px){.bar .mark{flex:1;min-width:0;max-width:none}}
.mhead .mark{max-width:calc(100% - 120px)}

/* ================= customer accounts ================= */
/* header (desktop and tablet); phones use the Profile tab instead */
.hdr-login{display:inline-grid;place-items:center;min-height:44px;padding-inline:10px;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.hdr-login:hover{color:var(--brass)}
.btn.hdr-signup{min-height:38px;padding:8px 16px;font-size:11px;margin-inline:2px 4px;white-space:nowrap}
html[lang="ar"] .hdr-login{letter-spacing:0}
@media(max-width:899px){.hdr-login,.hdr-signup,.acct-btn{display:none}}

/* account menu: dropdown on desktop, bottom sheet on phones */
.acct-pop{position:fixed;z-index:80}
.acct-pop[hidden]{display:none}
.acct-pop-inner{background:var(--char);border:1px solid var(--line);display:grid;padding:8px}
.acct-who{display:grid;gap:3px;padding:10px 10px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.acct-who b{font-family:var(--fd);font-weight:500;font-size:19px;overflow-wrap:anywhere}
.acct-who span{font-size:13px;color:var(--ash);overflow-wrap:anywhere}
.acct-item{display:flex;align-items:center;width:100%;min-height:48px;padding:0 10px;background:none;border:0;color:var(--ivory);font-size:15px;text-align:start;cursor:pointer}
.acct-item:hover,.acct-item:focus-visible{color:var(--brass)}
.acct-pop form{margin:0}
.acct-pop .btn{margin:4px 0}
@media(min-width:900px){
  .acct-pop{top:calc(var(--hdr) - 4px);inset-inline-end:max(var(--gut),calc((100vw - 1320px) / 2 + var(--gut)))}
  .acct-pop-inner{width:290px;box-shadow:0 22px 60px rgba(0,0,0,.55)}
}
@media(max-width:899px){
  .acct-pop{inset:0;background:rgba(4,3,3,.62);display:flex;align-items:flex-end}
  .acct-pop-inner{width:100%;padding:12px var(--gut) calc(18px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:16px 16px 0 0}
  body.acct-open{overflow:hidden}
}

/* auth pages */
.auth-wrap{padding:calc(var(--hdr) + clamp(28px,6vw,64px)) 0 clamp(56px,9vw,110px)}
.auth-card{max-width:440px;margin:0 auto;display:grid;gap:18px}
.auth-card>h1{font-size:clamp(30px,6vw,44px);text-align:center}
.auth-card>.lede{text-align:center;margin-inline:auto;max-width:40ch}
.auth-form{display:grid}
.form-error{border:1px solid rgba(176,104,92,.55);background:rgba(176,104,92,.12);padding:12px 14px;font-size:14px;color:var(--bad-text)}
.auth-row{display:flex;justify-content:space-between;align-items:center;gap:4px 16px;flex-wrap:wrap;margin:-6px 0 14px}
.auth-alt{text-align:center;color:var(--ash);font-size:14px}
.auth-alt a,.err a,.fine a{color:var(--ivory);border-bottom:1px solid var(--brass)}
.fine{margin-top:14px;text-align:center;font-size:12.5px;color:var(--mute)}
.check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--ash);cursor:pointer}
.check input{accent-color:var(--brass);width:18px;height:18px;margin:0}

.seg{border:1px solid var(--line);padding:4px;margin:0 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.seg label{position:relative;display:grid;place-items:center;min-height:44px;cursor:pointer;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);transition:background .25s,color .25s}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg label:has(input:checked){background:var(--ivory);color:var(--paper-ink)}
.seg label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
html[lang="ar"] .seg label{letter-spacing:0}

/* GCC phone field: country selector + number, always left-to-right */
.phone-field{display:flex;direction:ltr;border:1px solid var(--line);background:var(--field);transition:border-color .3s}
.phone-field:focus-within{border-color:var(--brass)}
.field.bad .phone-field{border-color:var(--bad-line)}
.cc{position:relative;flex:none;display:flex;align-items:center;gap:6px;min-height:50px;padding:0 12px;border-inline-end:1px solid var(--line);cursor:pointer}
.cc .flag{font-size:20px;line-height:1}
.cc .dial{font-size:15px;font-variant-numeric:tabular-nums}
.cc .chev{stroke:var(--ash);fill:none;stroke-width:1.4}
.cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.cc:focus-within{outline:2px solid var(--focus);outline-offset:-2px}
.field .phone-field input{flex:1;min-width:0;border:0;background:transparent}
.field .phone-field input:focus{outline:none}

.pw{position:relative}
.field .pw input{padding-inline-end:76px}
.pw-toggle{position:absolute;inset-block:0;inset-inline-end:0;min-width:64px;padding:0 14px;background:none;border:0;color:var(--ash);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.pw-toggle:hover{color:var(--ivory)}
html[lang="ar"] .pw-toggle{letter-spacing:0}

/* account area */
.acct-wrap{padding:calc(var(--hdr) + clamp(28px,5vw,56px)) 0 clamp(56px,9vw,110px)}
.acct-head{display:grid;gap:6px;margin-bottom:22px}
.acct-tabs{display:flex;flex-wrap:wrap;align-items:stretch;gap:2px 4px;border-bottom:1px solid var(--line);margin-bottom:26px}
.acct-tabs a,.acct-tabs button{display:inline-flex;align-items:center;min-height:46px;padding:0 14px;background:none;border:0;border-bottom:2px solid transparent;color:var(--ash);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.acct-tabs [aria-current]{color:var(--ivory);border-bottom-color:var(--brass)}
.acct-tabs a:hover,.acct-tabs button:hover{color:var(--ivory)}
.acct-tabs form{margin:0 0 0 auto;display:flex}
html[dir="rtl"] .acct-tabs form{margin:0 auto 0 0}
html[lang="ar"] .acct-tabs a,html[lang="ar"] .acct-tabs button{letter-spacing:0}
.acct-grid{display:grid;gap:20px}
@media(min-width:900px){.acct-grid{grid-template-columns:1fr 1.35fr;align-items:start}}
.panel{border:1px solid var(--line);padding:clamp(18px,3vw,28px);display:grid;gap:16px;align-content:start}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px 16px;flex-wrap:wrap}
.panel .btn{justify-self:start}
.order-list{display:grid}
.order-row{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.order-list li:last-child .order-row{border-bottom:0}
.order-row:hover .num{color:var(--brass)}
.order-row .num{font-weight:500}
.order-row .amt{color:var(--brass);font-variant-numeric:tabular-nums;text-align:end}
.order-row .when{font-size:13px;color:var(--ash)}
.order-row .status-pill{justify-self:end}
.empty-mini{display:grid;gap:14px;justify-items:start;color:var(--ash)}

/* checkout: guest / log in / create account */
.checkout-auth{grid-column:1/-1;display:grid;gap:10px}
@media(min-width:620px){.checkout-auth{grid-template-columns:repeat(3,1fr)}}
@media(max-width:899px){.checkout-auth{order:-2}}
.ca-opt{display:grid;gap:2px;align-content:center;min-height:66px;padding:12px 16px;border:1px solid var(--line);transition:border-color .3s,background .3s}
.ca-opt:hover{border-color:rgba(176,141,82,.6)}
.ca-opt[aria-current]{border-color:var(--brass);background:rgba(176,141,82,.08)}
.ca-opt b{font-weight:500}
.ca-opt small{font-size:12.5px;color:var(--ash)}
.ca-signed{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:12px 16px;border:1px solid var(--line);font-size:14px;color:var(--ash)}
.ca-signed b{color:var(--ivory);font-weight:500}
.ca-signed form{margin:0}

/* ================= addresses ================= */
.saved-addr{display:grid;gap:8px;margin-bottom:18px}
.addr-opt{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);cursor:pointer;transition:border-color .3s,background .3s}
.addr-opt:hover{border-color:rgba(176,141,82,.55)}
.addr-opt:has(input:checked){border-color:var(--brass);background:rgba(176,141,82,.07)}
.addr-opt input{accent-color:var(--brass);width:18px;height:18px;margin:3px 0 0;flex:none}
.addr-opt span{display:grid;gap:2px;min-width:0}
.addr-opt b{font-weight:500;overflow-wrap:anywhere}
.addr-opt small{font-size:13px;color:var(--ash);overflow-wrap:anywhere}
.addr-opt.new b{color:var(--ivory)}
.new-addr[hidden]{display:none}
.field select:disabled{opacity:.55}
.addr-lead{margin:-10px 0 20px}
.addr-list{display:grid;gap:12px;margin-top:12px}
.addr-card{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 20px;flex-wrap:wrap}
.addr-text{display:grid;gap:4px;min-width:0}
.addr-text b{font-weight:500;overflow-wrap:anywhere}
.addr-text p{margin:0;color:var(--text2);font-size:14px;overflow-wrap:anywhere}
.addr-actions{display:flex;gap:16px;align-items:center}
.addr-actions form{margin:0}
.addr-edit{max-width:720px}
/* brand radios for saved addresses and payment (unselected ones were plain white browser circles) */
.addr-opt input,.paym input{-webkit-appearance:none;appearance:none;flex:none;border:1px solid var(--radio-line);border-radius:50%;background:transparent;cursor:pointer;transition:border-color .2s}
.addr-opt input:checked,.paym input:checked{border-color:var(--brass);background:radial-gradient(circle,var(--brass) 0 36%,transparent 41%)}
.addr-opt input:focus-visible,.paym input:focus-visible{outline:1px solid var(--brass);outline-offset:3px}
@media (max-width:600px){.addr-card{flex-direction:column;align-items:stretch}.addr-actions{padding-top:4px}}
/* small section titles (Addresses, Your details, Change password…) use the label face, not the display serif */
h2.lab,h3.lab{font-family:var(--fb);line-height:1.5}


/* ================= light theme ================= */
/* A warm paper palette, not an inversion: ink text on cream, bronze accents darkened for contrast (AA on every surface). */
html[data-theme="light"]{
  color-scheme:light;
  --ink:#F6F2EB;--char:#EDE7DC;--line:rgba(40,32,24,.16);--ivory:#1C1814;--ash:#5C5249;--mute:#766B60;
  --brass:#8A6A34;--focus:#8A6A34;--paper:#1C1814;--paper-ink:#F6F2EB;--bad:#A4473A;--good:#4E7A39;
  --text2:#3A332C;--glass:rgba(246,242,235,.93);--field:#FFFDF9;--field-hover:#FFFFFF;--btn-line:rgba(28,24,20,.4);
  --radio-line:rgba(40,32,24,.38);--bad-line:#B0685C;--bad-text:#8E3B2E;--ph:#E6DFD3;--pop:#FFFDF9;--pop-shadow:0 22px 50px rgba(60,44,28,.16);
  --sel-bg:rgba(138,106,52,.12);
}
html[data-theme="light"] .count{color:#FFF}
html[data-theme="light"] .flash{box-shadow:0 12px 40px rgba(60,44,28,.2)}
html[data-theme="light"] .acct-pop-inner{box-shadow:var(--pop-shadow)}
/* The hero is a dark scene in both themes, and so is the header while it floats over it. */
html[data-theme="light"] .hero,
html[data-theme="light"] body.has-hero header.site:not(.solid){
  --ink:#080706;--ivory:#EDE6DA;--ash:#C6BDB2;--mute:#9C9389;--line:rgba(233,225,212,.15);--brass:#B08D52;--focus:#E8C98B;
  --btn-line:rgba(237,230,218,.5);--text2:#D8CFC2;color:var(--ivory)
}
/* Logos: light artwork on dark grounds, dark artwork (or the name) on light ones. */
.bm-light{display:none}
html[data-theme="light"] .bm-dark{display:none}
html[data-theme="light"] .bm-light{display:inline}
html[data-theme="light"] body.has-hero header.site:not(.solid) .bm-dark{display:inline}
html[data-theme="light"] body.has-hero header.site:not(.solid) .bm-light{display:none}

/* theme switch */
.theme-btn svg{fill:none;stroke:currentColor;stroke-width:1.4}
.theme-btn .sun{display:none}
html[data-theme="light"] .theme-btn .sun{display:block}
html[data-theme="light"] .theme-btn .moon{display:none}
/* phones: the same icon sits next to the language link; the menu button side gets the same width so the logo stays centred */
@media(max-width:899px){header.site .tools{gap:2px}header.site .burger{margin-inline-end:46px}}

/* ================= fields: consistent in both themes ================= */
.field input:hover,.field select:hover,.field textarea:hover,.phone-field:hover{border-color:rgba(176,141,82,.45)}
.field input::placeholder,.field textarea::placeholder{color:var(--mute);opacity:1}
.field select{color:var(--ivory);background-color:var(--field)}
.field select option,.field select optgroup{background:var(--pop);color:var(--ivory)}
.field select:disabled,.field input:disabled{opacity:.5;cursor:not-allowed}

/* ================= custom dropdown ================= */
.csel{position:relative}
.csel-native{position:absolute!important;inset:0;width:100%!important;height:100%!important;opacity:0;pointer-events:none}
.csel-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:50px;padding:12px 14px;
  background:var(--field);border:1px solid var(--line);border-radius:0;color:var(--ivory);font:inherit;font-size:16px;text-align:start;cursor:pointer;
  transition:border-color .25s,background-color .25s}
.csel-btn:hover{border-color:rgba(176,141,82,.45);background:var(--field-hover)}
.csel-btn:focus-visible,.csel.open .csel-btn{outline:none;border-color:var(--brass)}
.csel-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;border-color:var(--line);background:var(--field)}
.csel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-val.csel-placeholder{color:var(--mute)}
.csel-chev{flex:none;width:10px;height:10px;fill:none;stroke:var(--ash);stroke-width:1.5;transition:transform .25s var(--ease)}
.csel.open .csel-chev{transform:rotate(180deg)}
.csel-pop{position:absolute;z-index:60;inset-inline:0;top:calc(100% + 6px);background:var(--pop);border:1px solid var(--line);box-shadow:var(--pop-shadow);
  display:grid;grid-template-rows:auto 1fr;max-height:320px;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s var(--ease)}
.csel-pop.up{top:auto;bottom:calc(100% + 6px);transform:translateY(4px)}
.csel.open .csel-pop{opacity:1;transform:none}
.csel-search{margin:8px;min-height:40px;padding:8px 12px;background:var(--field);border:1px solid var(--line);color:var(--ivory);font:inherit;font-size:15px}
.csel-search:focus{outline:none;border-color:var(--brass)}
.csel-list{overflow-y:auto;overscroll-behavior:contain;padding:6px 0;margin:0;list-style:none}
.csel-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;font-size:15px;line-height:1.4;cursor:pointer;color:var(--ivory)}
.csel-opt[aria-selected="true"]{color:var(--brass);font-weight:500}
.csel-opt[aria-selected="true"]::after{content:"";flex:none;width:12px;height:7px;border-inline-start:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.csel-opt.active{background:var(--sel-bg)}
.csel-opt[aria-disabled="true"]{opacity:.45;cursor:default}
.csel-group{padding:12px 16px 4px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
html[lang="ar"] .csel-group{letter-spacing:0}
.csel-empty{padding:12px 16px;color:var(--mute);font-size:14px}
.field.bad .csel-btn{border-color:var(--bad-line)}

/* ================= address and shipping ================= */
.addr-form [hidden]{display:none!important}
.ship-list{display:grid;gap:10px}
.ship-list label{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:16px;border:1px solid var(--line);cursor:pointer;transition:border-color .2s,background-color .2s}
.ship-list label:hover{border-color:rgba(176,141,82,.45)}
.ship-list label:has(input:checked){border-color:var(--brass);background:rgba(176,141,82,.06)}
.ship-list input{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:4px;border:1px solid var(--radio-line);border-radius:50%;background:transparent;cursor:pointer}
.ship-list input:checked{border-color:var(--brass);background:radial-gradient(circle,var(--brass) 0 36%,transparent 41%)}
.ship-list span{display:grid;gap:2px;min-width:0}.ship-list small{color:var(--ash);font-size:13px}
.ship-list em{font-style:normal;font-weight:500;white-space:nowrap}
.paym.ship.bad .ship-list label{border-color:var(--bad-line)}
.paym label[hidden]{display:none}
/* the real select stays invisible even when disabled; a closed list takes no space and catches no clicks */
.csel .csel-native{opacity:0!important;pointer-events:none}
.csel-pop[hidden]{display:none}

/* email verification: one wide, spaced box for the four digits */
.code-input{font-family:var(--fd);font-size:34px;letter-spacing:.5em;text-align:center;padding-left:.5em;max-width:240px;margin:0 auto;display:block}
.verify-resend{margin:22px 0 6px;text-align:center}
.verify-resend .help{margin:0 0 6px}
.verify-resend button[disabled]{opacity:.45;cursor:default}
.code-field label,.code-field .err,.verify-help{text-align:center}