/* ============================================================
   CHAOUEN MARKET — design system
   Palette and structure come from the shop itself: blue shelving,
   white walls, the blue-and-turquoise zellige screen, and the
   lime-washed walls of Chefchaouen the shop is named after.
   The signature is the DADO — the painted line where a Chaouen
   wall gets repainted each spring — and the SHELF the goods
   sit on, because this is a market, not a catalogue.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Karla:wght@300..800&family=Tajawal:wght@300;400;500;700;800&display=swap');

:root{
  --lime:#F6F9FE;
  --wash-pale:#E2ECFB;
  --wash-mid:#A2C0F4;
  --chaouen:#468FEA;
  --chaouen-text:#3B80D8;
  --deep:#0F4588;
  --deeper:#0A2E5C;
  --ink:#0C2440;
  --muted:#46688F;
  --faint:#4F6C90;
  --brass:#C98A2E;
  --on-brass:#0C2440;
  --brass-hi:#E8B25A;
  --brass-lo:#8F5D14;
  --green:#2A7148;
  --line:rgba(15,69,136,.13);
  --line-2:rgba(15,69,136,.24);

  --shell:min(1280px,92vw);
  --arch:46% 46% 10px 10px / 34% 34% 10px 10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh-1:0 2px 8px -2px rgba(12,36,64,.10);
  --sh-2:0 12px 28px -12px rgba(12,36,64,.30);
  --sh-3:0 30px 60px -28px rgba(12,36,64,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--lime);color:var(--ink);
  font-family:Karla,system-ui,sans-serif;font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[dir="rtl"]{font-family:Tajawal,Karla,system-ui,sans-serif}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;padding:0}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px}
::selection{background:var(--brass);color:var(--on-brass)}

h1,h2,h3,h4,.display{
  font-family:Fraunces,Georgia,serif;font-weight:600;
  font-variation-settings:"SOFT" 22,"WONK" 1;
  line-height:1.05;letter-spacing:-.022em;margin:0;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-family:Tajawal,serif;font-weight:800;letter-spacing:0;line-height:1.3}
p{margin:0}
.shell{width:var(--shell);margin-inline:auto}

/* chalky lime-plaster grain over washed surfaces */
.plaster{position:relative;isolation:isolate}
.plaster::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--brass-lo);display:flex;align-items:center;gap:10px;margin:0;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brass);flex:none}
.on-deep .eyebrow{color:var(--brass-hi)}

/* ══ THE DADO ═══════════════════════════════════════════ */
.dado{height:7px;background:var(--brass);position:relative;z-index:2}
.dado::after{content:"";position:absolute;inset:auto 0 -3px;height:3px;background:rgba(12,36,64,.22)}

.arch{border-radius:var(--arch);overflow:hidden;position:relative}
.arch img{width:100%;height:100%;object-fit:cover}

/* ── buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;
  border-radius:100px;font-weight:700;font-size:15.5px;transition:.26s var(--ease);cursor:pointer}
.btn-brass{background:var(--brass);color:var(--on-brass);box-shadow:0 8px 22px -8px rgba(156,103,22,.75)}
.btn-brass:hover{background:var(--brass-lo);color:#fff;transform:translateY(-2px)}
.btn-ghost{border:1.6px solid var(--line-2);color:var(--deep)}
.btn-ghost:hover{background:var(--deep);color:#fff;border-color:var(--deep);transform:translateY(-2px)}
.btn-deep{background:var(--deep);color:#fff}
.btn-deep:hover{background:var(--deeper);transform:translateY(-2px)}
.btn-sm{padding:11px 20px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ── announcement ───────────────────────────────────────── */
.announce{background:var(--deep);color:#D0E0FA;font-size:13px;letter-spacing:.03em}
.announce .shell{display:flex;gap:26px;align-items:center;justify-content:center;
  min-height:40px;flex-wrap:wrap;text-align:center;padding-block:8px}
.announce b{color:var(--brass-hi);font-weight:700}
.announce span{display:flex;align-items:center;gap:8px}

/* ── header ─────────────────────────────────────────────── */
.head{position:sticky;top:0;z-index:60;background:rgba(247,251,252,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.head .shell{display:flex;align-items:center;gap:28px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;margin-inline-end:auto}
.brand svg{flex:none}
.brand-name{display:block;white-space:nowrap;font-family:Fraunces,serif;font-weight:700;font-size:20px;
  letter-spacing:-.02em;font-variation-settings:"SOFT" 30,"WONK" 1;line-height:1}
.brand-sub{display:block;white-space:nowrap;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);margin-top:4px}
.nav{display:flex;gap:4px;font-size:15px;font-weight:600}
.nav > li{list-style:none;position:relative}
.nav-link{display:flex;align-items:center;gap:5px;white-space:nowrap;padding:26px 14px;position:relative}
.nav-link::after{content:"";position:absolute;inset-inline:14px;bottom:22px;height:2px;background:var(--brass);
  transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease)}
.nav li:hover .nav-link::after,.nav-link:focus-visible::after,.nav-link.is-on::after{transform:scaleX(1)}
.nav-link svg{transition:transform .3s var(--ease)}
.nav li:hover .nav-link svg{transform:rotate(180deg)}
.head-tools{display:flex;align-items:center;gap:4px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;transition:background .2s}
.icon-btn:hover{background:var(--wash-pale)}
.lang{font-size:13px;font-weight:700;letter-spacing:.05em;padding:7px 13px;border-radius:100px;
  border:1.5px solid var(--line-2);transition:.2s;white-space:nowrap}
.lang:hover{border-color:var(--chaouen);color:var(--chaouen)}
.cart-btn{position:relative}
.cart-count{position:absolute;top:1px;inset-inline-end:1px;min-width:19px;height:19px;padding:0 5px;
  border-radius:100px;background:var(--brass);color:var(--on-brass);font-size:11px;font-weight:800;
  display:grid;place-items:center;line-height:1}
.cart-count[hidden]{display:none}
.burger{display:none}

/* ── mega menu ──────────────────────────────────────────── */
.mega{
  position:absolute;top:100%;inset-inline-start:50%;translate:-50% 0;width:min(920px,90vw);
  background:var(--lime);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-3);
  padding:24px;opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:.28s var(--ease);z-index:70;
}
.nav li:hover .mega,.mega:focus-within{opacity:1;visibility:visible;transform:none}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mega-card{display:block;border-radius:12px;overflow:hidden;background:var(--wash-pale);
  position:relative;transition:transform .3s var(--ease)}
.mega-card img{transition:transform .6s var(--ease)}
.mega-card:hover{transform:translateY(-4px)}
.mega-card:hover img{transform:scale(1.07)}
.mega-card span{display:block;padding:11px 13px 13px;font-weight:700;font-size:14.5px}
.mega-card small{display:block;color:var(--muted);font-weight:400;font-size:12.5px;margin-top:2px}
.mega-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.mega-foot b{color:var(--deep)}

/* ── search overlay ─────────────────────────────────────── */
.search-wrap{position:fixed;inset:0;z-index:100;display:none}
.search-wrap.on{display:block}
.search-panel{position:absolute;inset-inline:0;top:0;background:var(--lime);padding:26px 0 30px;
  box-shadow:var(--sh-3);animation:drop .32s var(--ease)}
@keyframes drop{from{transform:translateY(-100%)}to{transform:none}}
.search-bar{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--deep);padding-bottom:12px}
.search-bar input{flex:1;border:0;background:none;font-size:24px;font-family:Fraunces,serif;
  font-variation-settings:"SOFT" 22,"WONK" 1;outline:none;min-width:0}
.search-bar input::placeholder{color:var(--faint)}
.search-hint{margin-top:14px;font-size:13.5px;color:var(--muted)}
.search-res{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:22px;max-height:52vh;overflow-y:auto}
.sr{display:block}
.sr img{aspect-ratio:1;object-fit:cover;border-radius:9px}
.sr b{display:block;font-size:13.5px;font-weight:600;margin-top:8px;line-height:1.3}
.sr span{font-size:13px;color:var(--brass-lo);font-weight:700}

/* ── mobile nav drawer ──────────────────────────────────── */
.mnav{position:fixed;inset-block:0;inset-inline-start:0;width:min(340px,86vw);background:var(--lime);
  z-index:95;transform:translateX(-100%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;box-shadow:var(--sh-3)}
[dir="rtl"] .mnav{transform:translateX(100%)}
.mnav.on,[dir="rtl"] .mnav.on{transform:none}
.mnav-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between}
.mnav ul{list-style:none;margin:0;padding:12px 22px;display:grid;gap:2px;overflow-y:auto}
/* Only the department links. Written as `.mnav a` this also caught the
   "Message the shop" button and the saved-items link, overriding their flex
   centring — which left the button's icon and text off-centre and turned the
   saved count from a small pill into a full-width gold bar. */
.mnav ul a{display:block;padding:14px 0;font-size:17px;font-weight:600;border-bottom:1px solid var(--line)}
.mnav-foot{margin-top:auto;padding:20px 22px;border-top:1px solid var(--line);display:grid;gap:10px}

/* ══ THE SHELF — product card ═══════════════════════════════
   Goods sit on a shelf; the price card is clipped to the edge. */
.grid{display:grid;gap:38px 22px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

.prod{position:relative;display:flex;flex-direction:column}
.prod-stage{position:relative;border-radius:11px 11px 0 0;aspect-ratio:1;overflow:hidden;
  background:linear-gradient(170deg,#EEF6F9,#DCEBF1)}
.prod-stage img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.prod:hover .prod-stage img{transform:scale(1.06)}
.prod-tag{position:absolute;top:11px;inset-inline-start:11px;background:var(--deep);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:5px 9px;border-radius:4px}
.prod-tag.sale{background:var(--brass);color:var(--on-brass)}
.prod-tag.out{background:#6B8395}
/* quick add slides up on hover — pointer devices only */
.quick{position:absolute;inset-inline:10px;bottom:10px;background:rgba(12,36,64,.93);color:#fff;
  backdrop-filter:blur(6px);border-radius:8px;padding:12px;font-size:14px;font-weight:700;
  text-align:center;transform:translateY(calc(100% + 12px));opacity:0;transition:.3s var(--ease)}

.quick:hover{background:var(--brass);color:var(--on-brass)}
/* the shelf bar was reading as a stray label under the photo — retired */
.prod-shelf{display:none}
.prod-info{padding:15px 2px 0;display:flex;flex-direction:column;flex:1}
.prod-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.prod-cat{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.stars{font-size:12px;color:var(--brass);white-space:nowrap;font-weight:700}
.stars span{color:var(--faint);font-weight:400}
.prod-name{font-family:Fraunces,serif;font-weight:600;font-size:17px;line-height:1.25;margin:7px 0 4px;
  font-variation-settings:"SOFT" 22,"WONK" 1}
[dir="rtl"] .prod-name{font-family:Tajawal,serif;font-weight:700}
.prod-meta{font-size:13px;color:var(--muted)}
/* a sale price wraps onto two lines on a narrow card, which left the buy
   buttons at different heights across a row. Reserve the taller case. */
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:12px;min-height:62px}
.prod-foot .price{display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.price{font-family:Fraunces,serif;font-weight:700;font-size:19px;color:var(--brass-lo);
  font-variation-settings:"SOFT" 0,"WONK" 0}
[dir="rtl"] .price{font-family:Tajawal,sans-serif}
.price s{color:#9BB2BF;font-weight:400;font-size:14.5px;margin-inline-end:7px}
.add{width:40px;height:40px;border-radius:50%;background:var(--deep);color:#fff;display:grid;
  place-items:center;transition:.25s var(--ease);flex:none}
.add:hover{background:var(--brass);color:var(--on-brass);transform:rotate(90deg) scale(1.08)}
.add.done{background:var(--green);transform:none}
.prod.is-out .prod-stage img{filter:grayscale(.6) opacity(.7)}

/* ── section frame ──────────────────────────────────────── */
.sec{padding:88px 0}
.sec-tight{padding:60px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:44px}
.sec-head h2{font-size:clamp(2rem,3.7vw,2.95rem);max-width:16ch}
.sec-head p{color:var(--muted);max-width:46ch;margin-top:12px;font-size:16px}
.link-more{font-weight:700;font-size:14.5px;color:var(--deep);display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;border-bottom:2px solid var(--brass);padding-bottom:4px;transition:gap .25s var(--ease)}
.link-more:hover{gap:14px}

/* ── breadcrumb ─────────────────────────────────────────── */
.crumb{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted);padding:20px 0}
.crumb a:hover{color:var(--deep)}
.crumb span{color:var(--faint)}

/* ── shop page: filters ─────────────────────────────────── */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start;padding-bottom:90px}
.filters{position:sticky;top:100px;display:grid;gap:26px}
.fgroup h4{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);font-family:Karla,sans-serif;margin-bottom:13px}
.fgroup ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.fbtn{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
  padding:8px 11px;border-radius:7px;font-size:14.5px;text-align:start;transition:.2s}
.fbtn:hover{background:var(--wash-pale)}
.fbtn.on{background:var(--deep);color:#fff;font-weight:700}
.fbtn i{font-style:normal;font-size:12px;color:var(--faint)}
.fbtn.on i{color:#B3CCF0}
.chk{display:flex;align-items:center;gap:10px;padding:7px 11px;font-size:14.5px;cursor:pointer;border-radius:7px}
.chk:hover{background:var(--wash-pale)}
.chk input{width:17px;height:17px;accent-color:var(--deep);cursor:pointer}
.range-row{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.range-row input{width:100%;accent-color:var(--brass)}

.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:30px;flex-wrap:wrap}
.count{font-size:14.5px;color:var(--muted)}
.count b{color:var(--ink)}
.sort{display:flex;align-items:center;gap:9px;font-size:14.5px}
.sort select{border:1.5px solid var(--line-2);border-radius:100px;padding:9px 15px;background:none;
  font-weight:600;font-size:14px;cursor:pointer}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--wash-pale);border-radius:100px;
  padding:6px 8px 6px 14px;font-size:13px;font-weight:600}
.chip button{width:19px;height:19px;border-radius:50%;background:var(--deep);color:#fff;
  display:grid;place-items:center;font-size:11px;line-height:1}
.empty-state{text-align:center;padding:80px 20px;color:var(--muted)}
.empty-state h3{font-size:22px;color:var(--ink);margin-bottom:10px}
.filter-toggle{display:none}

/* ── product page ───────────────────────────────────────── */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start;padding-bottom:80px}
.gallery{position:sticky;top:100px;min-width:0}
.thumbs{display:grid;gap:10px;align-content:start}
.thumb{border-radius:9px;overflow:hidden;border:2px solid transparent;transition:.2s;aspect-ratio:1}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.on{border-color:var(--deep)}
.thumb:hover{border-color:var(--wash-mid)}
.gmain{border-radius:14px;overflow:hidden;aspect-ratio:1;background:var(--wash-pale);box-shadow:var(--sh-2)}
.gmain img{width:100%;height:100%;object-fit:cover}
.pdp-title{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:12px 0 14px}
.pdp-price{display:flex;align-items:baseline;gap:12px;margin:20px 0}
.pdp-price .price{font-size:30px}
.save{background:#FBEFD9;color:var(--brass-lo);font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:5px}
.pdp-desc{color:var(--muted);line-height:1.7;margin-top:6px}
.opt{margin-top:26px}
.opt h4{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);font-family:Karla,sans-serif;margin-bottom:11px}
.opt-row{display:flex;gap:9px;flex-wrap:wrap}
.opt-btn{border:1.5px solid var(--line-2);border-radius:9px;padding:11px 17px;font-size:14.5px;
  font-weight:600;transition:.2s}
.opt-btn:hover{border-color:var(--chaouen)}
.opt-btn.on{border-color:var(--deep);background:var(--deep);color:#fff}
.buy-row{display:flex;gap:12px;margin-top:28px;align-items:stretch}
.qty{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:100px;overflow:hidden}
.qty button{width:44px;height:100%;display:grid;place-items:center;font-size:19px;transition:.2s}
.qty button:hover{background:var(--wash-pale)}
.qty b{min-width:34px;text-align:center;font-size:16px}
.buy-row .btn{flex:1}
.pdp-trust{display:grid;gap:12px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.pdp-trust div{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.pdp-trust svg{flex:none;margin-top:3px;color:var(--chaouen)}
.pdp-trust b{color:var(--ink)}
.acc{margin-top:30px;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px 0;font-weight:700;font-size:15.5px;text-align:start}
.acc-btn svg{flex:none;transition:transform .3s var(--ease)}
.acc-item.on .acc-btn svg{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.acc-item.on .acc-body{max-height:460px}
.acc-body div{padding-bottom:20px;color:var(--muted);line-height:1.7;font-size:15px}
.acc-body ul{margin:8px 0 0;padding-inline-start:20px}
.acc-body li{margin-bottom:6px}
/* sticky buy bar on phones */
.buy-bar{position:fixed;inset-inline:0;bottom:0;z-index:80;background:var(--lime);
  border-top:1px solid var(--line);padding:12px 16px;display:none;gap:12px;align-items:center;
  box-shadow:0 -8px 24px -12px rgba(12,36,64,.4)}
.buy-bar .price{font-size:19px}
.buy-bar .btn{flex:1}

/* ── hero ───────────────────────────────────────────────── */
.hero{background:linear-gradient(178deg,var(--wash-pale) 0%,#DAE8FC 58%,#BFD5F7 100%);
  padding:74px 0 84px;position:relative;overflow:hidden}
.hero .shell{display:grid;grid-template-columns:1.03fr .97fr;gap:64px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(2.7rem,5.9vw,4.9rem);max-width:12ch}
.hero h1 em{font-style:normal;color:var(--chaouen-text);font-variation-settings:"SOFT" 60,"WONK" 1}
.hero .lede{margin-top:24px;font-size:18px;line-height:1.62;color:#24487A;max-width:50ch}
.hero .eyebrow{margin-bottom:22px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-art{position:relative}
.hero-art .arch{aspect-ratio:3/3.55;box-shadow:var(--sh-3)}
.hero-art::before{content:"";position:absolute;inset:-15px -15px 14px;border:2px solid rgba(15,69,136,.3);
  border-radius:calc(46% + 8px) calc(46% + 8px) 16px 16px / calc(34% + 8px) calc(34% + 8px) 16px 16px}
.hero-badge{position:absolute;bottom:22px;inset-inline-start:-26px;background:var(--lime);border-radius:12px;
  padding:15px 20px;box-shadow:var(--sh-2);display:flex;align-items:center;gap:13px;max-width:270px}
.hero-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 4px rgba(46,125,79,.2)}
.hero-badge b{display:block;font-size:14px}
.hero-badge small{font-size:12.5px;color:var(--muted)}

/* ── trust strip ────────────────────────────────────────── */
.trust{background:var(--deep);color:#D7E5FA}
.trust .shell{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{padding:28px 24px;display:flex;gap:14px;align-items:flex-start;
  border-inline-end:1px solid rgba(255,255,255,.12)}
.trust-item:last-child{border-inline-end:0}
.trust-item svg{flex:none;margin-top:2px;color:var(--brass-hi)}
.trust-item b{display:block;font-size:14.5px;color:#fff;margin-bottom:3px}
.trust-item span{font-size:13.5px;line-height:1.5;color:#B3CCF0}

/* ── aisles ─────────────────────────────────────────────── */
/* Aisle cards: the goods sit in a lit alcove, the label reads on the page
   below it. No dark veil over the photograph — it muddied the product and
   made the type fight the image. */
.aisles{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 22px}
.aisle{position:relative;display:block;color:inherit}
.aisle .arch{aspect-ratio:1/1.04;background:linear-gradient(178deg,#F2EDE6,#E7E0D6);
  border-radius:54% 54% 16px 16px / 30% 30% 16px 16px;overflow:hidden;
  box-shadow:0 16px 38px -26px rgba(12,36,64,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.aisle img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.aisle:hover .arch{transform:translateY(-6px);box-shadow:0 26px 48px -26px rgba(12,36,64,.6)}
.aisle:hover img{transform:scale(1.045)}
.aisle .veil{display:none}
.aisle-txt{position:static;padding-top:17px}
.aisle-txt h3{font-size:20px;line-height:1.16;color:var(--ink);display:inline-block;
  border-bottom:2px solid transparent;padding-bottom:4px;transition:border-color .3s var(--ease)}
.aisle:hover .aisle-txt h3{border-bottom-color:var(--brass)}
.aisle-txt span{display:block;margin-top:7px;font-size:12.5px;color:var(--muted);letter-spacing:.02em}

/* ── ritual band ────────────────────────────────────────── */
.ritual{background:var(--deep);color:#DCE9FB;position:relative;overflow:hidden}
.ritual .shell{position:relative;z-index:1}
.ritual h2{color:#fff}
.ritual .sec-head p{color:#B3CCF0}
/* A photograph of the hammam shelf sits under the navy, so the band has depth
   instead of reading as a flat block of colour. */
.ritual::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(img/aisles/aisle-beauty.jpg) center/cover no-repeat;opacity:.30}
.ritual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,69,136,.90) 0%,rgba(10,46,92,.85) 45%,rgba(10,46,92,.94) 100%)}
.ritual .shell{z-index:2}
.zellige{position:absolute;z-index:1;inset-block:auto -70px;inset-inline-end:-120px;
  width:340px;opacity:.06;color:#fff;pointer-events:none}

/* The ritual as four things you can buy, not four paragraphs. */
.rit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.rit-card{position:relative;display:flex;flex-direction:column;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:18px;overflow:hidden;backdrop-filter:blur(2px);
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.rit-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.085);
  border-color:rgba(224,165,68,.45);box-shadow:var(--sh-3)}
.rit-shot{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--wash-pale)}
.rit-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.rit-card:hover .rit-shot img{transform:scale(1.06)}
.rit-num{position:absolute;top:12px;inset-inline-start:12px;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--brass);color:var(--on-brass);font-family:Fraunces,Georgia,serif;
  font-weight:700;font-size:15px;line-height:1;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.75)}
.rit-body{display:flex;flex-direction:column;flex:1;padding:17px 18px 19px}
.rit-label{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass-hi)}
.rit-title{display:block;font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:21px;line-height:1.15;color:#fff;margin:8px 0 9px}
[dir="rtl"] .rit-title{font-family:Tajawal,serif;font-weight:800}
.rit-text{display:block;flex:1;font-size:14px;line-height:1.55;color:#B3CCF0}
.rit-buy{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  margin-top:15px;font-size:13.5px;font-weight:700;color:var(--brass-hi);
  border-bottom:1px solid rgba(224,165,68,.4);padding-bottom:3px;
  transition:gap .25s var(--ease),border-color .25s var(--ease)}
.rit-buy svg{transition:transform .25s var(--ease)}
.rit-card:hover .rit-buy{border-color:var(--brass-hi)}
.rit-card:hover .rit-buy svg{transform:translateX(4px)}
[dir="rtl"] .rit-card:hover .rit-buy svg{transform:translateX(-4px)}

/* ── the shop / editorial split ─────────────────────────── */
.split{background:linear-gradient(178deg,#EDF5F8,var(--wash-pale))}
.split .shell{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.split-photo{border-radius:14px;overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:4/3.1}
.split-photo img{width:100%;height:100%;object-fit:cover}
.split h2{font-size:clamp(2rem,3.6vw,2.85rem)}
.facts{margin-top:28px;display:grid;border-top:1px solid var(--line)}
.fact{display:grid;grid-template-columns:132px 1fr;gap:18px;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:15.5px;align-items:baseline}
.fact dt{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fact dd{margin:0}
.open{color:var(--green,#2E7D4F);font-weight:700}
.open::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#37A15C;margin-inline-end:7px;vertical-align:middle;
  box-shadow:0 0 0 3px rgba(55,161,92,.18)}

/* ── weighed-by-hand band (the bulk bins) ───────────────── */
.weigh{position:relative;overflow:hidden;background:var(--deeper);color:#DCE9FB}
.weigh .shell{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;position:relative;z-index:1}
.weigh h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem)}
.weigh p{color:#B3CCF0;margin-top:16px;line-height:1.7}
.bins{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
.bin{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:10px;
  padding:15px 17px;transition:.25s var(--ease)}
.bin:hover{background:rgba(255,255,255,.13);transform:translateY(-3px)}
.bin b{display:block;font-size:15px;color:#fff}
.bin small{display:block;font-size:12.5px;color:#8FB0C2;margin-top:2px}
.bin i{font-style:normal;display:block;margin-top:9px;font-family:Fraunces,serif;font-weight:700;
  color:var(--brass-hi);font-size:16px}

/* ── footer ─────────────────────────────────────────────── */
.foot{background:var(--ink);color:#94B4C6;font-size:14.5px;padding:66px 0 0}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:50px}
.foot h4{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  margin:0 0 17px;font-family:Karla,sans-serif}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot a:hover{color:var(--brass-hi)}
.foot-brand p{margin-top:15px;max-width:34ch;line-height:1.65}
.pay{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:18px}
.pay-mark{display:block;line-height:0;border-radius:5px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 2px 6px -2px rgba(0,0,0,.45)}
/* Brand marks are always drawn left-to-right, even on the Arabic side —
   without this the Apple Pay wordmark flips back over its own glyph. */
.pay-mark svg{display:block;height:30px;width:46px;direction:ltr}
.pay-mark svg text{direction:ltr;unicode-bidi:isolate}
.pay-note{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;
  border:1px solid rgba(255,255,255,.2);border-radius:5px;font-size:11px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#BCD1F0}
.pay-note svg{flex:none;color:#A2C0F4}
.foot-bot{border-top:1px solid rgba(255,255,255,.13);padding:22px 0;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}
.nl{display:flex;gap:8px;margin-top:15px}
.nl input{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-radius:100px;padding:11px 16px;color:#fff;font-size:14px}
.nl input::placeholder{color:#7E9CAE}

/* ── cart drawer ────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(12,36,64,.55);backdrop-filter:blur(3px);z-index:90;
  opacity:0;visibility:hidden;transition:.3s}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(430px,100vw);background:var(--lime);
  z-index:95;display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .38s var(--ease);box-shadow:var(--sh-3)}
[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.on,[dir="rtl"] .drawer.on{transform:none}
.drawer-head{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between}
.drawer-head h3{font-size:20px}
.drawer-body{flex:1;overflow-y:auto;padding:20px 24px;display:grid;gap:18px;align-content:start}
.ci{display:grid;grid-template-columns:66px 1fr auto;gap:13px;align-items:center}
.ci img{width:66px;height:66px;object-fit:cover;border-radius:8px}
.ci b{font-size:14.5px;font-weight:600;display:block;line-height:1.3}
.ci small{color:var(--muted);font-size:12.5px}
.ci-qty{display:flex;align-items:center;gap:9px;margin-top:7px}
.ci-qty button{width:24px;height:24px;border-radius:50%;border:1.4px solid var(--line-2);
  display:grid;place-items:center;font-size:14px;line-height:1;transition:.2s}
.ci-qty button:hover{background:var(--deep);color:#fff;border-color:var(--deep)}
.ci-qty b{font-size:13.5px;min-width:16px;text-align:center}
.empty{color:var(--muted);text-align:center;padding:46px 0;font-size:15px}
.meter{height:6px;border-radius:100px;background:var(--wash-pale);overflow:hidden;margin-bottom:9px}
.meter i{display:block;height:100%;background:var(--brass);border-radius:100px;transition:width .4s var(--ease)}
.drawer-foot{padding:20px 24px;border-top:1px solid var(--line);display:grid;gap:13px}
.tot{display:flex;justify-content:space-between;font-weight:700;font-size:17px}
.ship-note{font-size:13px;color:var(--muted);text-align:center}

/* ── about / contact ────────────────────────────────────── */
.page-head{background:linear-gradient(178deg,var(--wash-pale),#DAE8FC);padding:56px 0 64px;text-align:center}
/* A header carrying nothing but a title does not need a full hero's worth of
   air — the cart was giving 279px of empty blue to the word "Cart". */
.page-head.is-slim{padding:34px 0 36px}
.page-head.is-slim h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.page-head h1{font-size:clamp(2.3rem,4.6vw,3.6rem);max-width:16ch;margin-inline:auto}
.page-head p{color:#24487A;max-width:56ch;margin:18px auto 0;font-size:17.5px;line-height:1.65}
.prose{max-width:66ch;margin-inline:auto}
.prose p{margin-bottom:20px;line-height:1.78;color:#2C4E64}
.prose h3{font-size:24px;margin:36px 0 14px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.field{display:grid;gap:7px;margin-bottom:18px}
.field label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{border:1.5px solid var(--line-2);border-radius:10px;
  padding:13px 15px;background:#fff;font-size:15.5px;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--chaouen)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ── responsive ─────────────────────────────────────────── */
@media(max-width:1120px){
  .nav{display:none}.burger{display:grid}
  .aisles{grid-template-columns:repeat(3,1fr)}
  .search-res{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1000px){
  .hero .shell{grid-template-columns:1fr;gap:44px}
  .hero-art{max-width:420px}
  .trust .shell{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(2){border-inline-end:0}
  .trust-item:nth-child(1),.trust-item:nth-child(2){border-bottom:1px solid rgba(255,255,255,.12)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .rit-grid{grid-template-columns:1fr 1fr}
  .split .shell,.weigh .shell,.two-col{grid-template-columns:1fr;gap:36px}
  .foot-top{grid-template-columns:1fr 1fr}
  .pdp{grid-template-columns:1fr;gap:36px}
  .gallery{position:static}
  .shop-layout{grid-template-columns:1fr;gap:22px}
  .filters{position:fixed;top:0;bottom:0;left:0;right:auto;width:min(320px,86vw);background:var(--lime);
    z-index:95;padding:22px;overflow-y:auto;transform:translateX(-100%);transition:transform .35s var(--ease);
    box-shadow:var(--sh-3);align-content:start}
  /* physical sides on purpose: the logical pair resolved against the wrong
     direction and left the Arabic drawer hanging off the screen. */
  [dir="rtl"] .filters{left:auto;right:0;transform:translateX(100%)}
  .filters.on,[dir="rtl"] .filters.on{transform:none}
  .filter-toggle{display:inline-flex}
}
@media(max-width:720px){
  body{font-size:16px}
  .sec{padding:58px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:30px}
  .head .shell{gap:8px;min-height:64px}
  .brand-name{font-size:17px}.brand-sub{display:none}.brand{gap:9px}
  .brand svg{width:32px;height:35px}
  /* 44px is the smallest a thumb hits reliably — these are the most
     tapped controls on the site, so they get the full target. */
  .icon-btn{width:44px;height:44px}
  .lang{padding:4px 9px;font-size:10.5px;min-height:28px;letter-spacing:0}
  .search-btn{display:none}
  .announce .shell{gap:0;min-height:34px;padding-block:7px}
  .announce span{display:none}
  .announce span.live{display:flex;animation:fade .5s var(--ease)}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .hero{padding:48px 0 60px}
  .hero-badge{inset-inline-start:auto;inset-inline-end:10px;bottom:10px}
  .hero-art::before{display:none}
  .trust .shell{grid-template-columns:1fr}
  .trust-item{border-inline-end:0!important;border-bottom:1px solid rgba(255,255,255,.12)}
  .aisles{grid-template-columns:repeat(2,1fr);gap:14px}
  .grid{gap:26px 14px}
  .rit-grid{gap:14px;margin-top:26px}
  .bins{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:30px}
  .fact{grid-template-columns:1fr;gap:3px}
  .search-res{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr}
  .thumbs{grid-template-columns:repeat(5,1fr);order:2}
  .buy-bar{display:flex}
  body.has-buybar{padding-bottom:76px}
}

/* ============================================================
   WooCommerce
   The theme keeps Woo's own markup wherever behaviour depends
   on it (variations, quantity, notices) and dresses it here.
   ============================================================ */

/* screen-reader + skip link */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:-9999px;z-index:200}
.skip-link:focus{inset-inline-start:12px;top:12px;width:auto;height:auto;clip:auto;
  background:var(--brass);color:var(--on-brass);padding:10px 18px;border-radius:100px}
body.locked{overflow:hidden}

/* ── the loop card's add button (Woo renders an <a>) ────── */
.prod-foot .add,.prod-foot a.button{
  width:40px;height:40px;padding:0;border-radius:50%;background:var(--deep);color:#fff;
  display:grid;place-items:center;flex:none;font-size:0;line-height:0;text-decoration:none;
  transition:.25s var(--ease);position:relative}
.prod-foot .add::before,.prod-foot a.button::before{
  content:"";width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
.prod-foot .add:hover,.prod-foot a.button:hover{background:var(--brass);color:var(--on-brass);transform:rotate(90deg) scale(1.08)}
.prod-foot a.button.loading{opacity:.6;pointer-events:none}
.prod-foot a.button.added{background:#2E7D4F}
.prod-foot a.button.added::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")}
.prod-foot a.added_to_cart{display:none}

/* ── sorting + result count ─────────────────────────────── */
.woocommerce-ordering select,.sort select{
  font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);background:var(--lime);
  border:1.5px solid var(--line);border-radius:100px;padding:9px 16px;cursor:pointer}
.woocommerce-result-count{margin:0;font-size:14.5px;color:var(--muted)}
.woocommerce-result-count b{color:var(--ink)}

/* ── pagination ─────────────────────────────────────────── */
.woocommerce-pagination ul,.page-links{display:flex;gap:8px;list-style:none;margin:44px 0 0;padding:0;
  justify-content:center;flex-wrap:wrap}
.woocommerce-pagination li{margin:0}
.woocommerce-pagination a,.woocommerce-pagination span,.page-links a,.page-links>span{
  display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border-radius:100px;
  border:1.5px solid var(--line);font-weight:700;font-size:15px;text-decoration:none;transition:.2s}
.woocommerce-pagination a:hover,.page-links a:hover{border-color:var(--chaouen);color:var(--chaouen)}
.woocommerce-pagination .current,.page-links>span{background:var(--deep);border-color:var(--deep);color:#fff}

/* ── product gallery ────────────────────────────────────── */
.woocommerce-product-gallery{position:relative;display:flex;flex-direction:row-reverse;gap:16px;
  align-items:flex-start}
.woocommerce-product-gallery__wrapper{flex:1;min-width:0;border-radius:14px;overflow:hidden;
  box-shadow:0 28px 52px -30px rgba(12,36,64,.5)}
.woocommerce-product-gallery__wrapper img{width:100%;height:auto;display:block}
.woocommerce-product-gallery .flex-control-thumbs{
  display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0;width:78px;flex:none}
.woocommerce-product-gallery .flex-control-thumbs li{margin:0;width:100%}
.woocommerce-product-gallery .flex-control-thumbs img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;cursor:pointer;opacity:.55;
  border:2px solid transparent;transition:.22s}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover{opacity:1;border-color:var(--chaouen)}
.woocommerce-product-gallery__trigger{position:absolute;top:12px;inset-inline-end:12px;z-index:5;
  width:38px;height:38px;border-radius:50%;background:var(--lime);display:grid;place-items:center;
  box-shadow:0 6px 16px -6px rgba(12,36,64,.5);text-decoration:none;font-size:17px}

/* ── add-to-cart form ───────────────────────────────────── */
form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:26px 0 0}
form.cart .quantity{display:flex;align-items:center;border:1.6px solid var(--line);border-radius:100px;
  overflow:hidden;background:var(--lime)}
form.cart .quantity input[type=number]{
  width:56px;border:0;background:none;text-align:center;font:inherit;font-weight:700;font-size:16px;
  padding:13px 0;-moz-appearance:textfield;color:var(--ink)}
form.cart .quantity input::-webkit-outer-spin-button,
form.cart .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
form.cart .single_add_to_cart_button{
  flex:1;min-width:200px;justify-content:center;display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:100px;font-weight:700;font-size:15.5px;cursor:pointer;border:0;
  background:var(--brass);color:var(--on-brass);box-shadow:0 8px 22px -8px rgba(156,103,22,.75);
  transition:.26s var(--ease)}
form.cart .single_add_to_cart_button:hover{background:var(--brass-lo);transform:translateY(-2px)}
form.cart .single_add_to_cart_button.disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* variations */
.variations{width:100%;border-collapse:collapse;margin:0 0 6px}
.variations th,.variations td{padding:8px 0;text-align:start;vertical-align:middle}
.variations th label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0}
.variations select{font:inherit;font-size:15px;font-weight:600;padding:11px 16px;border-radius:100px;
  border:1.6px solid var(--line);background:var(--lime);color:var(--ink);width:100%;max-width:280px}
.reset_variations{font-size:13px;font-weight:700;color:var(--brass-lo)}
.woocommerce-variation-price{margin:8px 0 4px}
.woocommerce-variation-price .price{font-family:Fraunces,serif;font-weight:700;font-size:22px;color:var(--brass-lo)}
.woocommerce-variation-availability p{font-size:14px;color:var(--muted);margin:0}

/* grouped + external */
.woocommerce-grouped-product-list{width:100%;border-collapse:collapse}
.woocommerce-grouped-product-list td{padding:12px 8px;border-bottom:1px solid var(--line)}

/* ── the basket drawer's Woo items ──────────────────────── */
.ci{display:grid;grid-template-columns:62px 1fr auto;gap:13px;align-items:center;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.ci:last-of-type{border-bottom:0}
.ci img{width:62px;height:62px;object-fit:cover;border-radius:8px}
.ci-body b{font-size:14.5px;font-weight:600;display:block;line-height:1.3}
.ci-body small,.ci-body .quantity{color:var(--muted);font-size:13px;display:block}
.ci-qty{display:flex;align-items:center;gap:10px;margin-top:5px}
.ci-edit{font-size:12.5px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line)}
.ci-remove{color:#B4442F;font-size:17px;line-height:1;text-decoration:none}
.ci-remove:hover{color:#8A2E1E}
.woocommerce-mini-cart__total{display:none}
.drawer-body .woocommerce-mini-cart__buttons{display:none}

/* ── notices ────────────────────────────────────────────── */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notices-wrapper .woocommerce-message{
  list-style:none;margin:0 0 22px;padding:15px 20px;border-radius:12px;font-size:15px;
  background:#E8F2E9;border-inline-start:4px solid #2E7D4F;color:#1E5334}
.woocommerce-info{background:var(--wash-pale);border-inline-start-color:var(--chaouen);color:var(--deep)}
.woocommerce-error{background:#FBEAE6;border-inline-start-color:#B4442F;color:#7A2A1B}
.woocommerce-message .button,.woocommerce-info .button{
  float:none;margin-inline-start:12px;font-weight:700;text-decoration:underline}

/* ── cart, checkout, account ────────────────────────────── */
/* This used to read `.woocommerce-cart .shell{padding-block:60px}`, which hit
   every shell on the page — the announcement bar, the header row, the nav row
   and the footer each grew 120px, so the header alone ran 335px deep before
   the shopper saw a single line of the basket. The content section carries
   its own padding; nothing else here needs any. */
.woocommerce-cart .sec > .shell,
.woocommerce-checkout .sec > .shell,
.woocommerce-account .sec > .shell{padding-block:0}
.page-head .shell{padding-block:0}
.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.woocommerce table.shop_table th{background:var(--wash-pale);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--deep);padding:14px 16px;text-align:start}
.woocommerce table.shop_table td{padding:16px;border-top:1px solid var(--line);vertical-align:middle}
.woocommerce .cart_item img{width:66px;height:66px;object-fit:cover;border-radius:9px}
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button,.woocommerce #respond input#submit{
  display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:100px;border:0;
  background:var(--deep);color:#fff;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;
  transition:.24s var(--ease)}
.woocommerce .button:hover{background:var(--ink);transform:translateY(-2px)}
.woocommerce .button.alt,.woocommerce .checkout-button,
.woocommerce #place_order,.woocommerce button.button.alt{background:var(--brass);color:var(--on-brass)}
.woocommerce .button.alt:hover,.woocommerce .checkout-button:hover,.woocommerce #place_order:hover{background:var(--brass-lo)}
.woocommerce form .form-row{display:flex;flex-direction:column;gap:7px;margin:0 0 16px}
.woocommerce form .form-row label{font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container .select2-selection--single{
  font:inherit;font-size:15.5px;padding:13px 16px;border:1.6px solid var(--line);border-radius:11px;
  background:var(--lime);color:var(--ink);width:100%}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{
  outline:0;border-color:var(--chaouen)}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-checkout-review-order{
  background:var(--wash-pale);border-radius:14px;padding:24px}
.woocommerce-checkout #payment{background:var(--wash-pale);border-radius:14px;padding:22px;margin-top:20px}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.woocommerce-MyAccount-navigation a{display:block;padding:11px 16px;border-radius:9px;font-weight:600}
.woocommerce-MyAccount-navigation .is-active a{background:var(--deep);color:#fff}

/* ── blog cards ─────────────────────────────────────────── */
.post-card .post-thumb img{width:100%;aspect-ratio:1/.72;object-fit:cover;border-radius:10px 10px 0 0}
.post-card .prod-info{padding-top:14px}

/* ── right-to-left ──────────────────────────────────────── */
[dir="rtl"] .woocommerce-product-gallery{flex-direction:row}
[dir="rtl"] .prod-foot a.button:hover,[dir="rtl"] .prod-foot .add:hover{transform:rotate(-90deg) scale(1.08)}
[dir="rtl"] .rit-label,[dir="rtl"] .eyebrow{letter-spacing:0}

@media(max-width:900px){
  .woocommerce-product-gallery{flex-direction:column-reverse}
  .woocommerce-product-gallery .flex-control-thumbs{flex-direction:row;width:100%;overflow-x:auto}
  .woocommerce-product-gallery .flex-control-thumbs li{width:76px;flex:none}
  [dir="rtl"] .woocommerce-product-gallery{flex-direction:column-reverse}
}
@media(max-width:720px){
  form.cart .single_add_to_cart_button{min-width:0}
  .woocommerce table.shop_table thead{display:none}
  .woocommerce table.shop_table tr{display:block;border-top:1px solid var(--line)}
  .woocommerce table.shop_table td{display:flex;justify-content:space-between;gap:16px;border-top:0;padding:10px 14px}
  .woocommerce table.shop_table td::before{content:attr(data-title);font-weight:700;color:var(--muted);font-size:13px}
}

/* ── WooCommerce's product list is the shelf grid ───────── */
ul.products{display:grid;gap:34px 22px;list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(3,minmax(0,1fr))}
ul.products::before,ul.products::after{content:none}
ul.products.columns-1{grid-template-columns:minmax(0,1fr)}
ul.products.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
ul.products.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
ul.products.columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}
ul.products.columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}
ul.products.columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}
ul.products li.product{margin:0;width:auto;float:none;clear:none;list-style:none;
  display:flex;flex-direction:column}
ul.products li.product::before{content:none}
.related ul.products,.upsells ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}

@media(max-width:1000px){
  ul.products,ul.products.columns-3,ul.products.columns-4,ul.products.columns-5,
  .related ul.products,.upsells ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  ul.products{gap:26px 14px}
}

/* the card's image area is an <a>, so it has to be told to behave as a block */
.prod-stage{display:block}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{
  width:auto;float:none;clear:none;margin:0}

/* Woo's clearfix pseudo-elements would each take a grid cell — the first
   product would be pushed out of column one. Higher specificity than
   woocommerce-general's `.woocommerce ul.products::before`. */
.woocommerce ul.products::before,.woocommerce ul.products::after,
.woocommerce-page ul.products::before,.woocommerce-page ul.products::after{
  content:none;display:none}
.woocommerce ul.products li.product a img{margin:0}

/* ── single product gallery ─────────────────────────────── */
.woocommerce-product-gallery{width:100%;min-width:0}
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .flex-viewport{flex:1;min-width:0;width:auto}
.woocommerce-product-gallery__image{width:100%}
.woocommerce-product-gallery__image img,
.woocommerce div.product div.images img{width:100%;height:auto;display:block;margin:0}
.woocommerce-product-gallery .flex-viewport{border-radius:14px;overflow:hidden;
  box-shadow:0 28px 52px -30px rgba(12,36,64,.5)}
.woocommerce-product-gallery--columns-1 .flex-control-thumbs{display:none}

/* ── related / upsells sit in the page shell ────────────── */
.related.products,.upsells.products{width:var(--shell);margin-inline:auto;padding:70px 0 90px}
.related.products>h2,.upsells.products>h2{
  font-family:Fraunces,Georgia,serif;font-weight:600;font-variation-settings:"SOFT" 22,"WONK" 1;
  font-size:clamp(1.7rem,2.8vw,2.3rem);letter-spacing:-.02em;margin:0 0 34px}
[dir="rtl"] .related.products>h2,[dir="rtl"] .upsells.products>h2{font-family:Tajawal,serif}

/* ============================================================
   Hero slider — full-bleed banner, copy over the clear left side
   ============================================================ */
.hero-slider{position:relative;isolation:isolate;background:var(--wash-pale);overflow:hidden}
.hs-track{position:relative;height:clamp(430px,44vw,600px)}
.hs-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .85s var(--ease),visibility .85s}
.hs-slide.is-on{opacity:1;visibility:visible}
.hs-media{position:absolute;inset:0;display:block}
.hs-media img{width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block}

/* the wash that keeps the headline legible over the photograph */
.hs-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(247,251,252,.97) 0%,
    rgba(247,251,252,.90) 24%,
    rgba(247,251,252,.52) 42%,
    rgba(247,251,252,.06) 60%,
    rgba(247,251,252,0) 72%)}
[dir="rtl"] .hs-slide::after{transform:scaleX(-1)}

.hs-inner{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.hs-copy{max-width:34rem}
.hs-copy .eyebrow{margin-bottom:20px}
.hs-title{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-variation-settings:"SOFT" 22,"WONK" 1;line-height:1.04;letter-spacing:-.022em;
  font-size:clamp(2.3rem,4.6vw,4rem);margin:0;color:var(--ink);max-width:14ch}
[dir="rtl"] .hs-title{font-family:Tajawal,serif;font-weight:800;letter-spacing:0}
.hs-title em{font-style:normal;color:var(--chaouen-text);font-variation-settings:"SOFT" 60,"WONK" 1}
.hs-copy .lede{margin-top:20px;font-size:17.5px;line-height:1.6;color:#24487A;max-width:44ch}
.hs-copy .cta-row{margin-top:30px}

/* the copy lifts in as each slide takes over */
.hs-slide .hs-copy>*{opacity:0;transform:translateY(14px)}
.hs-slide.is-on .hs-copy>*{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hs-slide.is-on .hs-copy>*:nth-child(1){transition-delay:.12s}
.hs-slide.is-on .hs-copy>*:nth-child(2){transition-delay:.20s}
.hs-slide.is-on .hs-copy>*:nth-child(3){transition-delay:.28s}
.hs-slide.is-on .hs-copy>*:nth-child(4){transition-delay:.36s}

/* arrows */
.hs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(247,251,252,.86);color:var(--deep);backdrop-filter:blur(6px);
  box-shadow:0 8px 22px -10px rgba(12,36,64,.6);transition:.22s var(--ease)}
.hs-arrow:hover{background:var(--deep);color:#fff}
.hs-prev{inset-inline-start:18px}
.hs-next{inset-inline-end:18px}
[dir="rtl"] .hs-prev svg,[dir="rtl"] .hs-next svg{transform:scaleX(-1)}

/* dots */
.hs-dots{position:absolute;inset-inline:0;bottom:22px;z-index:4;
  display:flex;gap:9px;justify-content:center}
.hs-dot{width:9px;height:9px;border-radius:100px;background:rgba(15,69,136,.3);
  transition:.28s var(--ease)}
.hs-dot:hover{background:rgba(15,69,136,.55)}
.hs-dot.is-on{width:30px;background:var(--brass)}

@media(max-width:900px){
  .hs-slide::after{background:linear-gradient(90deg,
    rgba(247,251,252,.98) 0%,rgba(247,251,252,.92) 40%,rgba(247,251,252,.55) 64%,rgba(247,251,252,.15) 86%)}
}
@media(max-width:720px){
  .hs-track{height:auto}
  .hs-slide{position:absolute;inset:0}
  .hs-slide.is-on{position:relative}
  /* The picture is the first thing a phone shopper sees — give it room. */
  .hero-slider{--hs-h:clamp(300px,88vw,430px)}
  .hs-media{position:relative;height:var(--hs-h)}
  .hs-media img{object-position:center 58%}
  .hs-slide::after{inset:auto 0 0 0;height:0;background:none}
  .hs-inner{display:block;padding-block:30px 40px;background:var(--wash-pale)}
  .hs-copy{max-width:none}
  .hs-title{max-width:none;font-size:clamp(2rem,8.5vw,2.6rem)}
  .hs-arrow{width:38px;height:38px;top:calc(var(--hs-h) / 2)}
  .hs-dots{position:relative;bottom:auto;padding-bottom:22px;background:var(--wash-pale)}
}
@media (prefers-reduced-motion:reduce){
  .hs-slide,.hs-slide .hs-copy>*{transition:none}
  .hs-slide .hs-copy>*{opacity:1;transform:none}
}

/* ============================================================
   Fixes for markup that carries width/height attributes, and for
   WooCommerce rules that outrank the theme's own.
   ============================================================ */

/* `aspect-ratio` is ignored while the height attribute supplies a used
   value — the mega-menu cards were rendering 900px tall. */
.mega-card img{height:100%}

/* Woo draws the pager as a bordered table strip. This is the whole
   override: no box, no dividers, no floats. */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination{text-align:center;margin-top:50px}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul{
  display:inline-flex;gap:8px;border:0;margin:0;padding:0;white-space:normal}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li{
  border:0;border-right:0;float:none;display:block;margin:0;padding:0;overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-page nav.woocommerce-pagination ul li a,
.woocommerce-page nav.woocommerce-pagination ul li span{
  display:grid;place-items:center;min-width:44px;height:44px;padding:0 13px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--lime);
  font-size:15px;font-weight:700;line-height:1;color:var(--ink);
  text-decoration:none;transition:.2s var(--ease)}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus{
  background:var(--wash-pale);border-color:var(--chaouen);color:var(--deep)}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce-page nav.woocommerce-pagination ul li span.current{
  background:var(--deep);border-color:var(--deep);color:#fff}
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev{
  background:var(--wash-pale);border-color:transparent;color:var(--deep);font-size:18px}

/* ── archive hero: a banner over the shop and each aisle ── */
.arch-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--wash-pale)}
.arch-hero-media{position:absolute;inset:0;display:block}
.arch-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block}
.arch-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(247,251,252,.97) 0%,rgba(247,251,252,.90) 26%,
    rgba(247,251,252,.50) 46%,rgba(247,251,252,.04) 66%,rgba(247,251,252,0) 78%)}
[dir="rtl"] .arch-hero::after{transform:scaleX(-1)}
.arch-hero-inner{position:relative;z-index:2;min-height:clamp(230px,24vw,320px);
  display:flex;align-items:center;padding-block:34px}
.arch-hero .eyebrow{margin-bottom:14px}
.arch-hero-title{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-variation-settings:"SOFT" 22,"WONK" 1;letter-spacing:-.022em;line-height:1.05;
  font-size:clamp(2rem,3.9vw,3.1rem);margin:0;color:var(--ink);max-width:16ch}
[dir="rtl"] .arch-hero-title{font-family:Tajawal,serif;font-weight:800;letter-spacing:0}
.arch-hero-desc{margin-top:14px;max-width:46ch;font-size:16.5px;line-height:1.6;color:#24487A}
.arch-hero-count{margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-lo)}

@media(max-width:720px){
  .arch-hero::after{background:linear-gradient(90deg,
    rgba(247,251,252,.98) 0%,rgba(247,251,252,.93) 46%,rgba(247,251,252,.6) 76%,rgba(247,251,252,.2) 100%)}
  .arch-hero-inner{min-height:190px;padding-block:26px}
  .arch-hero-desc{display:none}
}

/* ── the three marks: a quiet band between the shelf and the ritual ── */
.marks{background:linear-gradient(178deg,#F4EFE7,#EFE8DD);
  border-block:1px solid rgba(201,138,46,.22)}
.marks .shell{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding-block:clamp(34px,3.4vw,46px)}
.mark{display:grid;justify-items:center;text-align:center;padding-inline:18px;position:relative}
.mark + .mark::before{content:"";position:absolute;inset-block:6px;inset-inline-start:0;
  width:1px;background:rgba(201,138,46,.28)}
.mark-art{display:block;width:clamp(84px,7.2vw,108px);color:var(--brass);margin-bottom:14px}
.mark-art svg{width:100%;height:auto;display:block}
.mark h3{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-variation-settings:"SOFT" 22,"WONK" 1;font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1.2;letter-spacing:-.015em;color:var(--ink);margin:0}
[dir="rtl"] .mark h3{font-family:Tajawal,serif;font-weight:800;letter-spacing:0}
.mark p{margin-top:8px;font-size:14.5px;line-height:1.55;color:#5A6B6E;max-width:32ch}

@media(max-width:820px){
  /* Stays three across — stacking turned a quiet band into three screens. */
  .marks .shell{gap:0;padding-block:34px}
  .mark{padding-inline:12px}
  .mark-art{width:66px;margin-bottom:11px}
  .mark p{margin-top:6px;font-size:13.5px}
}

/* ── the shop in four pictures ──────────────────────────── */
.story{padding-top:0}
.story-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px}
.story-card{display:block;color:inherit}
.story-img{display:block;border-radius:14px;overflow:hidden;background:var(--wash-pale);
  box-shadow:0 16px 36px -26px rgba(12,36,64,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.story-img img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.story-card:hover .story-img{transform:translateY(-6px);box-shadow:0 26px 46px -26px rgba(12,36,64,.6)}
.story-card:hover .story-img img{transform:scale(1.05)}
.story-card h3{margin:16px 0 0;font-family:Fraunces,Georgia,serif;font-weight:600;
  font-variation-settings:"SOFT" 22,"WONK" 1;font-size:19px;line-height:1.2;
  letter-spacing:-.015em;color:var(--ink);display:inline-block;
  border-bottom:2px solid transparent;padding-bottom:3px;transition:border-color .3s var(--ease)}
[dir="rtl"] .story-card h3{font-family:Tajawal,serif;font-weight:800;letter-spacing:0}
.story-card:hover h3{border-bottom-color:var(--brass)}
.story-sub{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--muted)}

@media(max-width:1000px){ .story-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .story-grid{gap:22px 14px} }

/* keep aisle captions to two tidy lines */
.aisle-txt span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.5}

/* four aisles across, stepping down cleanly */
@media(max-width:1180px){ .aisles{grid-template-columns:repeat(3,1fr)} }
@media(max-width:860px){  .aisles{grid-template-columns:repeat(2,1fr);gap:32px 18px} }
@media(max-width:520px){  .aisles{grid-template-columns:repeat(2,1fr);gap:26px 14px} }
@media(max-width:520px){
  .aisle-txt h3{font-size:16px}
  .aisle-txt span{font-size:11.5px}
}

/* ============================================================
   Product page — give the gallery room, and stop the summary
   column from leaving a void beside a short sticky image.
   ============================================================ */
.pdp{grid-template-columns:1.12fr .88fr;gap:clamp(38px,4.5vw,72px);
  padding-block:34px 78px;align-items:start}
.pdp .gallery{top:104px}
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .flex-viewport{border-radius:16px}

/* the buy column */
.pdp-title{margin:10px 0 16px}
.pdp .summary{padding-top:4px}
.pdp-price{margin:0 0 18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.pdp-desc{color:var(--muted);font-size:16.5px;line-height:1.65;margin-bottom:4px}
.pdp .stock-line{color:var(--brass-lo);font-weight:700;font-size:13.5px;letter-spacing:.01em}
.pdp .eyebrow a{color:inherit;border-bottom:1px solid transparent;transition:border-color .25s}
.pdp .eyebrow a:hover{border-bottom-color:currentColor}

/* trust rows read as a panel rather than loose lines */
.pdp-trust{margin-top:28px;padding:20px 22px;border-radius:14px;
  background:var(--wash-pale);display:grid;gap:15px}
.pdp-trust>div{display:grid;grid-template-columns:22px 1fr;gap:13px;align-items:start}
.pdp-trust svg{color:var(--chaouen);margin-top:2px}
.pdp-trust b{font-size:14.5px;color:var(--ink)}
.pdp-trust span{font-size:13.5px;line-height:1.55;color:var(--muted)}

/* accordion */
.acc{margin-top:30px;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 2px;font-weight:700;font-size:15.5px;text-align:start;color:var(--ink)}
.acc-btn svg{flex:none;color:var(--muted);transition:transform .3s var(--ease)}
.acc-item.on .acc-btn svg{transform:rotate(45deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.acc-item.on .acc-body{grid-template-rows:1fr}
.acc-body>div{overflow:hidden;font-size:15px;line-height:1.7;color:var(--muted)}
.acc-item.on .acc-body>div{padding-bottom:18px}
.acc-body h3{font-size:15.5px;color:var(--ink);margin:14px 0 6px}
.acc-body ul{margin:0;padding-inline-start:18px}
.acc-body li{margin-bottom:5px}
.acc-body table{width:100%;border-collapse:collapse}
.acc-body th,.acc-body td{padding:8px 0;border-bottom:1px solid var(--line);text-align:start;
  font-size:14.5px;vertical-align:top}
.acc-body th{width:38%;color:var(--ink);font-weight:700}

/* related / upsells get the same section furniture as the homepage */
.related.products,.upsells.products{padding:74px 0 86px;border-top:1px solid var(--line)}
.related.products>h2,.upsells.products>h2{margin-bottom:8px}
.related.products>h2::before,.upsells.products>h2::before{
  content:"";display:block;width:26px;height:2px;background:var(--brass);margin-bottom:18px}

@media(max-width:980px){
  .pdp{grid-template-columns:1fr;gap:34px;padding-block:24px 56px}
  .pdp .gallery{position:static}
  .related.products,.upsells.products{padding:52px 0 64px}
}

/* ============================================================
   Story and Visit pages
   ============================================================ */
.page-hero .arch-hero-inner{min-height:clamp(260px,26vw,360px)}
.page-hero .arch-hero-title{max-width:18ch}

/* opening statement */
.lede-band .shell{max-width:min(880px,90vw)}
.big-lede{font-family:Fraunces,Georgia,serif;font-weight:400;
  font-variation-settings:"SOFT" 22,"WONK" 1;
  font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.42;letter-spacing:-.015em;
  color:var(--deep);text-align:center;margin:0}
[dir="rtl"] .big-lede{font-family:Tajawal,serif;letter-spacing:0}

.prose-tight{margin-top:16px;display:grid;gap:14px;max-width:48ch}
.prose-tight p{color:var(--muted);font-size:16.5px;line-height:1.68}
.split-flip .shell{direction:rtl}
.split-flip .shell>*{direction:ltr}
[dir="rtl"] .split-flip .shell{direction:ltr}
[dir="rtl"] .split-flip .shell>*{direction:rtl}

/* the numbers band */
.counts{position:relative;isolation:isolate;overflow:hidden;
  background:var(--deep);color:#DCE9FB}
.counts-head{max-width:56ch;margin-bottom:44px}
.counts-head h2{color:#fff}
.counts-head p{color:#B3CCF0;margin-top:14px;font-size:16.5px;line-height:1.65}
.counts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;
  border-top:1px solid rgba(255,255,255,.2)}
.count{padding:30px 26px 0 0;border-inline-end:1px solid rgba(255,255,255,.16)}
.count:last-child{border-inline-end:0}
.count:not(:first-child){padding-inline-start:26px}
.count dt{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;color:var(--brass-hi);letter-spacing:-.02em}
.count dd{margin:12px 0 0;font-size:14px;line-height:1.5;color:#B3CCF0;max-width:22ch}

/* contact cards */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ccard{background:var(--wash-pale);border-radius:16px;padding:26px 26px 28px;
  border:1px solid rgba(15,69,136,.08)}
.ccard svg{color:var(--brass);margin-bottom:14px}
.ccard h3{font-size:19px;margin:0 0 10px;color:var(--ink)}
.ccard p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0 0 6px}
.ccard a{color:var(--deep)}
.ccard .cmuted{font-size:13.5px;margin-top:8px}
.clink{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-weight:700;font-size:14px;color:var(--deep);
  border-bottom:2px solid var(--brass);padding-bottom:3px;transition:gap .25s var(--ease)}
.clink:hover{gap:12px}
.cmuted{color:var(--muted)}

/* contact form */
.contact-main{align-items:start;gap:clamp(36px,4.5vw,70px)}
.cform{display:grid;gap:16px;max-width:32rem}
.cform .field{display:grid;gap:7px}
.cform label{font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.cform input,.cform select,.cform textarea{
  font:inherit;font-size:15.5px;padding:13px 16px;border:1.6px solid var(--line);
  border-radius:11px;background:var(--lime);color:var(--ink);width:100%}
.cform textarea{resize:vertical;min-height:118px}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:0;border-color:var(--chaouen)}
.cform button{justify-content:center;margin-top:4px}

@media(max-width:900px){
  .counts-grid{grid-template-columns:1fr 1fr}
  .count{border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:26px}
  .count:nth-child(2){border-inline-end:0}
  .contact-cards{grid-template-columns:1fr}
  .contact-main{grid-template-columns:1fr}
}
@media(max-width:640px){
  .counts-grid{grid-template-columns:1fr}
  .count{border-inline-end:0;padding-inline-start:0!important;padding-right:0}
}

/* ============================================================
   The journal
   ============================================================ */
.lead-post{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,3.4vw,54px);
  align-items:center;color:inherit}
.lead-photo{border-radius:16px;overflow:hidden;aspect-ratio:16/10;
  box-shadow:0 26px 52px -30px rgba(12,36,64,.5)}
.lead-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.lead-post:hover .lead-photo img{transform:scale(1.04)}
.lead-body h2{font-size:clamp(1.7rem,3vw,2.5rem);margin:14px 0 0;line-height:1.1}
.lead-ex{margin-top:16px;font-size:16.5px;line-height:1.65;color:var(--muted);max-width:46ch}
.lead-body .link-more{margin-top:22px;display:inline-flex}
.post-meta{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.post-meta span{color:var(--brass);margin:0 6px}

.journal-grid{gap:36px 24px}
.post-card{display:flex;flex-direction:column}
.post-card .post-thumb{display:block;border-radius:12px;overflow:hidden;aspect-ratio:1/.72;
  background:var(--wash-pale)}
.post-card .post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post-card:hover .post-thumb img{transform:scale(1.05)}
.post-card .prod-info{padding:15px 2px 0}
.post-card .prod-name{font-size:18px}
.post-card .prod-name a{color:var(--ink)}
.post-card:hover .prod-name a{color:var(--chaouen)}

/* single entry */
.journal-head{background:linear-gradient(178deg,var(--wash-pale),#D9E9F0);padding:34px 0 44px}
.journal-head .shell{max-width:min(760px,90vw)}
.journal-title{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.06;margin:16px 0 0;max-width:20ch}
.journal-photo{margin-top:40px;border-radius:16px;overflow:hidden;
  box-shadow:0 28px 56px -32px rgba(12,36,64,.5)}
.journal-photo img{width:100%;height:auto;display:block}
.journal-body{max-width:min(720px,90vw);padding-block:44px 8px}
.prose p{font-size:17.5px;line-height:1.78;color:#33505F;margin:0 0 20px}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:38px 0 14px;color:var(--ink)}
.prose h3{font-size:1.22rem;margin:30px 0 10px;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 22px;padding-inline-start:22px;color:#33505F;font-size:17px;line-height:1.7}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink)}
.prose blockquote{margin:30px 0;padding:2px 0 2px 22px;border-inline-start:3px solid var(--brass);
  font-family:Fraunces,Georgia,serif;font-size:1.2rem;line-height:1.5;color:var(--deep)}
/* WooCommerce renders some block buttons as links, and a bare `.prose a`
   outranks the button rule — which put deep blue text on a brass fill. */
.prose a:not(.btn):not([class*="wc-block"]):not(.wp-element-button){color:var(--deep);border-bottom:1px solid var(--brass)}

/* the shelf this article points at */
.journal-cta{display:flex;align-items:center;gap:20px;max-width:min(720px,90vw);
  margin:36px auto 0;padding:16px 22px 16px 16px;border-radius:16px;
  background:var(--wash-pale);border:1px solid rgba(15,69,136,.1);color:inherit;
  transition:.28s var(--ease)}
.journal-cta:hover{background:#DCEAF1;transform:translateY(-2px)}
.journal-cta img{width:74px;height:74px;object-fit:cover;border-radius:11px;flex:none}
.journal-cta span{flex:1;display:grid;gap:3px}
.journal-cta em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-lo)}
.journal-cta b{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:19px;color:var(--ink)}
.journal-cta svg{color:var(--deep);flex:none}

@media(max-width:900px){
  .lead-post{grid-template-columns:1fr;gap:22px}
  .journal-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .journal-grid{grid-template-columns:1fr}
  .journal-cta{flex-wrap:wrap}
}

/* ============================================================
   Search results
   ============================================================ */
.search-hero .arch-hero-title{font-style:normal}
.search-again{display:flex;align-items:center;gap:10px;margin-top:24px;
  max-width:32rem;background:var(--lime);border:1.6px solid var(--line);
  border-radius:100px;padding:6px 6px 6px 18px}
.search-again svg{color:var(--muted);flex:none}
.search-again input{flex:1;min-width:0;border:0;background:none;font:inherit;
  font-size:16px;padding:10px 0;color:var(--ink)}
.search-again input:focus{outline:0}
.search-again .btn{flex:none}

.search-empty{max-width:52ch;margin-inline:auto;text-align:center}
.search-empty h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:12px}
.search-empty p{color:var(--muted);font-size:16.5px;line-height:1.65}
.chips-center{justify-content:center;flex-wrap:wrap}
.chips-center .chip{background:var(--wash-pale);border:1px solid rgba(15,69,136,.12);
  color:var(--deep);font-weight:600;padding:9px 16px;transition:.22s var(--ease)}
.chips-center .chip:hover{background:var(--deep);color:#fff;border-color:var(--deep)}

/* the header overlay is a form now */
form.search-bar{display:flex;align-items:center;gap:12px}

/* ── the brand mark ─────────────────────────────────────── */
.brand-mark{width:auto;height:42px;flex:none;display:block}
.brand .custom-logo{width:auto;height:44px;flex:none}
.brand-lockup{width:auto;height:96px;margin-bottom:6px;display:block}
.mnav-head .brand-mark{height:34px}
@media(max-width:720px){
  .brand-mark,.brand .custom-logo{height:34px}
  .brand-lockup{height:82px}
}

/* ============================================================
   Phones — the desktop rhythm made the homepage 11.8 screens
   long. Same content, far less scrolling.
   ============================================================ */
@media(max-width:720px){

  /* sections breathe less */
  .sec{padding:46px 0}
  .sec-head{margin-bottom:24px;gap:12px}
  .sec-head h2{font-size:clamp(1.6rem,6.4vw,2rem)}
  .sec-head p{font-size:15px;margin-top:9px}

  /* hero: tighter copy block */
  .hs-inner{padding-block:24px 30px}
  .hs-copy .lede{margin-top:14px;font-size:15.5px;line-height:1.55}
  .hs-copy .cta-row{margin-top:22px;gap:10px}
  .hs-copy .eyebrow{margin-bottom:14px}
  .hs-dots{padding-bottom:16px}
  .btn{padding:13px 22px;font-size:14.5px}

  /* trust: all four across one line — icon above a short label, the way the
     promise strips on the big Gulf stores read. The sentence under each one
     is desktop-only; on a phone it is what forces the block two rows deep. */
  .trust .shell{grid-template-columns:repeat(4,1fr)}
  .trust-item{padding:16px 6px;gap:8px;flex-direction:column;
    align-items:center;text-align:center;
    border-inline-end:1px solid rgba(255,255,255,.12)!important;
    border-bottom:0}
  .trust-item:last-child{border-inline-end:0!important}
  .trust-item svg{margin-top:0;width:22px;height:22px}
  .trust-item>span{display:block}
  .trust-item b{font-size:11.5px;line-height:1.32;margin-bottom:0;
    letter-spacing:.01em;text-wrap:balance}
  .trust-item span span{display:none}

  /* aisles: shallower arches, tighter captions */
  .aisles{gap:22px 12px}
  .aisle .arch{aspect-ratio:1/0.88}
  .aisle-txt{padding-top:11px}
  .aisle-txt h3{font-size:15.5px;padding-bottom:2px}
  .aisle-txt span{margin-top:4px;font-size:11px}

  /* product cards: less dead space under each one */
  ul.products,.grid.grid-4,.grid.grid-3{gap:22px 12px}
  .prod-stage{aspect-ratio:1/0.94}
  .prod-info{padding-top:11px}
  .prod-name{font-size:15px;margin:5px 0 3px}
  .prod-meta{font-size:12px}
  /* keep margin-top:auto — this is what holds the buy buttons level
     across a row when one card has an extra line. */
  .prod-foot{padding-top:9px}
  .price{font-size:16px}
  .prod-foot .add,.prod-foot a.button{width:44px;height:44px}
  .stars{font-size:11px}

  /* the ritual and the marks */
  /* One swipe through the ritual rather than four screens of it. */
  .rit-grid{grid-auto-flow:column;grid-auto-columns:64vw;grid-template-columns:none;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;
    scroll-snap-type:x mandatory;padding-block-end:4px;scrollbar-width:none}
  .rit-grid::-webkit-scrollbar{display:none}
  .rit-card{scroll-snap-align:start;border-radius:15px}
  .rit-num{width:30px;height:30px;font-size:13.5px;top:10px}
  .rit-body{padding:14px 15px 16px}
  .rit-title{font-size:18px;margin:6px 0 7px}
  .rit-text{font-size:13.5px;line-height:1.5}
  .rit-buy{margin-top:12px;font-size:13px}
  .ritual::before{opacity:.16}
  /* On a phone: the mark and its name only. The sentence under each one is
     what made this band three screens tall. */
  .marks .shell{gap:0;padding-block:26px}
  .mark{padding-inline:7px}
  .mark-art{width:46px;margin-bottom:9px}
  .mark h3{font-size:12.5px;line-height:1.3;letter-spacing:0;text-wrap:balance}
  .mark p{display:none}
  .mark + .mark::before{inset-block:2px}

  /* the visit split */
  .split .shell{gap:24px}
  .facts{margin-top:20px}
  .fact{padding:11px 0}

  /* footer: two columns instead of four stacked */
  .foot{padding-top:46px}
  .foot-top{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot-brand{grid-column:1/-1}
  .foot-brand p{max-width:none}
  .foot h4{margin-bottom:12px}
  .foot ul{gap:8px}
  .foot,.foot a{font-size:13.5px}
  .brand-lockup{height:64px}
  .pay{gap:7px}
  .pay-mark svg{height:26px;width:40px}
  .pay-note{height:26px;font-size:10px;padding:0 9px;gap:6px}
  .foot-bot{padding:16px 0;font-size:12px}
}

@media(max-width:420px){
  .aisles,ul.products,.grid.grid-4,.grid.grid-3{gap:18px 10px}
  .sec{padding:38px 0}
}

/* On a phone the two homepage product rows scroll sideways instead of
   stacking — sixteen cards was 2,400px of vertical scroll on its own.
   The shop archive keeps its grid, because there you want to browse. */
@media(max-width:720px){
  ul.products.row-scroll{
    display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 7px);
    grid-template-columns:none;gap:12px;
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;touch-action:pan-x pan-y;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    /* bleed to the screen edge, then put the shell gutter back so the
       first card still lines up under the heading. shell is 91vw here. */
    /* No negative-margin bleed: 100vw counts the scrollbar while the
       container does not, which left a 2px sideways scroll on phones.
       The row simply lives inside the shell instead. */
    scrollbar-width:none}
  ul.products.row-scroll::-webkit-scrollbar{display:none}
  ul.products.row-scroll li.product{scroll-snap-align:start}
  ul.products.row-scroll .prod-stage{aspect-ratio:1/1}
}
@media(max-width:420px){
  ul.products.row-scroll{grid-auto-columns:calc(50% - 5px)}
}

/* the sticky buy bar stays out of the way until you have scrolled past
   the real add-to-cart button */
.buy-bar{transform:translateY(110%);transition:transform .32s var(--ease);
  will-change:transform}
.buy-bar.is-up{transform:none}

/* ── a hard stop on sideways scrolling ──────────────────────
   `clip` rather than `hidden`: hidden turns the element into a scroll
   container and kills every position:sticky inside it (the product
   gallery, the shop filters). clip cannot scroll, so sticky survives. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
@supports not (overflow: clip){
  body{overflow-x:hidden}
}
/* off-canvas panels must not extend the page while they are shut */
.drawer,.mnav{visibility:hidden;transition:transform .38s var(--ease),visibility .38s}
.drawer.on,.mnav.on{visibility:visible}
/* WooCommerce's zoom layer can be wider than the viewport on a phone */
@media(max-width:900px){
  img.zoomImg{display:none!important}
  .woocommerce-product-gallery{overflow:hidden}
}

/* ── homepage banners ─────────────────────────────────────────────
   One large card and two stacked beside it. The photograph carries no
   text of its own, so the words below translate and stay crisp. */
.promo-grid{
  display:grid;gap:18px;
  grid-template-columns:1.32fr 1fr;
  grid-template-rows:1fr 1fr;
}
.promo{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  border-radius:20px;color:#fff;text-decoration:none;
  box-shadow:var(--sh-2);background:var(--deep);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.promo-lg{grid-row:span 2;min-height:440px}
.promo-sm{min-height:211px}
.promo:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.promo-shot{position:absolute;inset:0;display:block}
.promo-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.promo:hover .promo-shot img{transform:scale(1.05)}
/* Scrim: dark at the foot where the words sit, clear at the top. */
.promo-shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,32,60,.94) 0%,rgba(8,32,60,.78) 26%,rgba(8,32,60,.34) 58%,rgba(8,32,60,.10) 78%,rgba(8,32,60,.30) 100%);
}
.promo-copy{
  position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;padding:22px 24px;gap:16px;
  text-shadow:0 1px 14px rgba(6,24,44,.55);
}
.promo-badge{
  display:inline-block;background:var(--brass);color:var(--on-brass);
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 13px;border-radius:100px;box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}
.promo-badge b{color:#fff}
.promo-body{display:block}
.promo-eyebrow{
  display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#F0C070;margin-bottom:7px;
}
.promo-title{
  display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(23px,2.5vw,34px);line-height:1.1;letter-spacing:-.01em;
  text-wrap:balance;
}
.promo-sm .promo-title{font-size:clamp(20px,1.9vw,25px)}
.promo-text{
  display:block;margin-top:9px;max-width:32ch;
  font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.84);
}
.promo-sm .promo-text{display:none}
.promo-lg .promo-text{max-width:38ch}
.promo-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:15px;
  font-weight:700;font-size:14.5px;color:#fff;
  border-bottom:1.6px solid rgba(255,255,255,.42);padding-bottom:3px;
  transition:border-color .26s var(--ease),gap .26s var(--ease);
}
.promo-cta svg{transition:transform .26s var(--ease)}
.promo:hover .promo-cta{border-color:var(--brass-hi)}
.promo:hover .promo-cta svg{transform:translateX(4px)}
[dir="rtl"] .promo:hover .promo-cta svg{transform:translateX(-4px)}

@media(max-width:900px){
  .promo-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .promo-lg{grid-row:auto;min-height:0;aspect-ratio:16/10}
  .promo-sm{min-height:0;aspect-ratio:16/10}
  .promo-sm .promo-text{display:block}
}
@media(max-width:720px){
  /* A snap rail rather than three stacked blocks — the page is long enough. */
  .promo-grid{
    display:grid;grid-auto-flow:column;grid-auto-columns:78vw;
    grid-template-columns:none;grid-template-rows:none;
    gap:14px;overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;touch-action:pan-x pan-y;
    scroll-snap-type:x mandatory;scroll-padding-inline:0;
    padding-block-end:4px;
    scrollbar-width:none;
  }
  .promo-grid::-webkit-scrollbar{display:none}
  .promo{scroll-snap-align:start;border-radius:16px}
  .promo-lg,.promo-sm{aspect-ratio:4/3.15}
  .promo-copy{padding:16px 18px;gap:10px}
  .promo-title{font-size:22px}
  .promo-sm .promo-title{font-size:22px}
  .promo-text{font-size:13.5px;margin-top:6px}
  .promo-cta{margin-top:11px;font-size:13.5px}
}
@media(max-width:420px){
  .promo-grid{grid-auto-columns:85vw}
  .promo-text{display:none}
  .promo-sm .promo-text{display:none}
}

/* ── saved items, quick view, stock ───────────────────────────────
   The heart and the quick-view sit on the product image; both stay
   visible on touch, where there is no hover to reveal them. */
.prod{position:relative}
.wish{
  position:absolute;top:10px;inset-inline-end:10px;z-index:3;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--muted);border:1px solid var(--line);
  cursor:pointer;padding:0;backdrop-filter:blur(4px);
  transition:color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.wish:hover{color:#C2384B;transform:scale(1.08)}
.wish.on{color:#fff;background:#C2384B;border-color:#C2384B}
.wish.on svg{fill:currentColor}
.wish-lg{position:static;width:46px;height:46px;flex:none;background:transparent;
  border:1.6px solid var(--line-2);backdrop-filter:none}
.wish-lg:hover{background:rgba(194,56,75,.06)}

/* A full-width bar on the bottom edge of the photograph that slides up out
   of it on hover. Hidden it is translated clear of the picture, so it must
   not take clicks — .prod-media clips it and pointer-events keeps the title
   underneath reachable. */
.quick{
  position:absolute;z-index:3;inset-inline:0;bottom:0;width:100%;
  padding:15px 12px;border:0;border-radius:0;cursor:pointer;
  background:rgba(12,36,64,.93);color:#fff;font:inherit;font-size:12.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(6px);
  opacity:0;transform:translateY(100%);pointer-events:none;
  transition:transform .28s var(--ease),opacity .28s var(--ease),background .28s var(--ease);
}
[dir="rtl"] .quick{letter-spacing:0}
.prod-media{overflow:hidden;border-radius:11px 11px 0 0}
.prod:hover .quick,.prod:focus-within .quick{opacity:1;transform:none;pointer-events:auto}
.quick:hover{background:var(--deep)}

.stock-low{
  display:inline-block;margin-top:7px;font-size:12px;font-weight:700;
  letter-spacing:.04em;color:#B4472A;
}
.single-product .stock-low{margin:0 0 14px;font-size:13px}

/* the saved page and the recently-viewed row */
.wish-empty{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  color:var(--muted);font-size:16px;padding:26px 0}
.wish-page ul.products{margin-top:6px}

/* ── quick view ───────────────────────────────────────── */
.qv-wrap{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:22px;background:rgba(12,36,64,.62);backdrop-filter:blur(4px)}
.qv-wrap[hidden]{display:none}
body.qv-open{overflow:hidden}
.qv-panel{position:relative;width:min(880px,100%);max-height:88vh;overflow:auto;
  background:var(--lime);border-radius:20px;box-shadow:var(--sh-3)}
.qv-close{position:absolute;top:12px;inset-inline-end:12px;z-index:2;
  background:rgba(255,255,255,.9);border:1px solid var(--line)}
.qv-body{display:grid;grid-template-columns:1fr 1fr;min-height:320px}
.qv-load{grid-column:1/-1;min-height:320px}
.qv-shot{background:var(--wash-pale)}
.qv-shot img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px}
.qv-copy{padding:34px 34px 30px;display:flex;flex-direction:column;align-items:flex-start}
.qv-copy h2{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:29px;
  line-height:1.12;margin:10px 0 0;color:var(--ink)}
[dir="rtl"] .qv-copy h2{font-family:Tajawal,serif;font-weight:800}
.qv-price{font-size:22px;font-weight:700;color:var(--deep);margin:12px 0 0}
.qv-desc{margin-top:12px;font-size:15px;line-height:1.6;color:var(--muted)}
.qv-desc p{margin:0 0 8px}
.qv-actions{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:22px}
.qv-full{margin-top:14px;font-size:14px;font-weight:700;color:var(--deep);
  border-bottom:1px solid var(--line-2);padding-bottom:2px}
.qv-full:hover{color:var(--brass-lo);border-color:var(--brass)}

@media(max-width:760px){
  .qv-wrap{padding:0;align-items:end}
  .qv-panel{width:100%;max-height:92vh;border-radius:20px 20px 0 0}
  .qv-body{grid-template-columns:1fr}
  .qv-shot img{min-height:0;aspect-ratio:16/10}
  .qv-copy{padding:22px 20px 26px}
  .qv-copy h2{font-size:23px}
  .quick{padding:12px 8px;font-size:10.5px;letter-spacing:.08em;min-height:44px}
  @media(hover:none){.quick{display:none}}
  .wish{width:32px;height:32px;top:9px;inset-inline-end:9px}
}

/* ── WooCommerce block cart & checkout ────────────────────────────
   The cart and checkout blocks ship their own button, which took our
   text colour and its own charcoal background — navy on charcoal, all
   but unreadable. Everything below puts them on the shop's own system. */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-button__link,
.wp-element-button{
  background:var(--brass);color:var(--on-brass);border:0;border-radius:100px;
  font-family:inherit;font-weight:700;font-size:15.5px;line-height:1.2;
  padding:15px 28px;min-height:0;text-decoration:none;
  box-shadow:0 8px 22px -8px rgba(156,103,22,.75);
  transition:background .26s var(--ease),transform .26s var(--ease);
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover{
  background:var(--brass-lo);color:#fff;transform:translateY(-2px)
}
.wc-block-components-button:not(.is-link):focus{outline:3px solid var(--brass);outline-offset:3px}
/* the label sits in its own span, which carries the inherited colour */
.wc-block-components-button__text,
.wc-block-components-button:not(.is-link) span{color:inherit}

/* text-only buttons — "remove", "edit", "return to cart" */
.wc-block-components-button.is-link{
  background:none;box-shadow:none;padding:0;color:var(--muted);
  font-weight:600;font-size:14px;text-decoration:underline
}
.wc-block-components-button.is-link:hover{color:var(--brass-lo);transform:none}

/* headings and rules inside the blocks, so the pages read as ours */
.wp-block-woocommerce-cart h2,.wp-block-woocommerce-checkout h2,
.wc-block-components-title,.wc-block-components-checkout-step__title{
  font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.01em;color:var(--ink)
}
[dir="rtl"] .wp-block-woocommerce-cart h2,[dir="rtl"] .wp-block-woocommerce-checkout h2,
[dir="rtl"] .wc-block-components-title,[dir="rtl"] .wc-block-components-checkout-step__title{
  font-family:Tajawal,serif;font-weight:800;letter-spacing:0
}
.wc-block-components-product-name{color:var(--ink);font-weight:700;text-decoration:none}
.wc-block-components-product-name:hover{color:var(--brass-lo)}
.wc-block-components-totals-item__label{color:var(--muted)}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{color:var(--ink)}
.wc-block-components-panel,.wc-block-cart-items,
.wc-block-components-totals-wrapper{border-color:var(--line)}
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-address-form input{
  border-radius:10px;border-color:var(--line-2);font-family:inherit
}
.wc-block-components-radio-control__option{font-family:inherit}
.wc-block-components-notice-banner{border-radius:12px;font-family:inherit}


/* ── header room on a phone ───────────────────────────────────────
   Brand + language + three 44px controls will not fit a 375px row, and
   the burger was being clipped off the edge. Saved-for-later moves into
   the menu, where it keeps its counter. */
@media(max-width:720px){
  .wish-link{display:none}
  .page-head{padding:30px 0 32px}
  .page-head.is-slim{padding:22px 0 24px}
  .page-head h1{font-size:clamp(1.75rem,7vw,2.2rem);max-width:20ch}
  .page-head.is-slim h1{font-size:clamp(1.6rem,6.4vw,2rem)}
  .page-head p{font-size:15px;margin-top:12px;line-height:1.6}
}
.mnav-saved{
  display:flex;align-items:center;gap:10px;margin:6px 0 2px;padding:13px 22px;
  border-top:1px solid var(--line);font-weight:700;font-size:16px;color:var(--deep)
}
.mnav-saved svg{flex:none;color:var(--brass)}
.mnav-saved:hover{color:var(--brass-lo)}
.mnav-count{
  min-width:22px;height:22px;padding:0 6px;border-radius:100px;
  background:var(--brass);color:var(--on-brass);font-size:12px;font-weight:800;
  display:grid;place-items:center;margin-inline-start:auto;flex:none
}
/* display would otherwise beat the hidden attribute, the way it did on the
   saved-items page */
.mnav-count[hidden]{display:none}

@media(max-width:359px){
  /* The shop's name stays beside the mark on a phone — there is room for it
     now the language chip has moved to the side of the screen. Only the
     smallest handsets cannot fit the name and three 44px controls on one
     row, and there the arch mark carries the brand on its own. */
  .brand-name{display:none}
  .brand{gap:0}
}

/* two shops: each gets its own line in the footer and its own card */
.foot-branch{margin-top:14px;line-height:1.6}
.foot-branch b{display:block;color:#fff;font-size:13.5px;letter-spacing:.02em;margin-bottom:2px}
.cbadge{
  display:inline-block;margin:0 0 8px;padding:4px 11px;border-radius:100px;
  background:rgba(201,138,46,.14);color:var(--brass-lo);
  font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase
}

/* ── the shops ────────────────────────────────────────────────────
   Two branches is a fact about the business, so it gets a card each
   rather than two more rows in a list of details. */
.branches{background:var(--lime)}
.branch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px}
.branch{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:28px 28px 26px;box-shadow:var(--sh-1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.branch:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:rgba(201,138,46,.45)}
.branch-mark{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(201,138,46,.12);color:var(--brass-lo);margin-bottom:16px
}
.branch-badge{
  display:inline-block;margin-bottom:9px;padding:5px 12px;border-radius:100px;
  background:var(--brass);color:var(--on-brass);font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase
}
.branch h3{
  font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(21px,1.9vw,25px);
  line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0
}
[dir="rtl"] .branch h3{font-family:Tajawal,serif;font-weight:800;letter-spacing:0}
.branch-addr{margin:9px 0 0;color:var(--muted);font-size:15.5px;line-height:1.6}
.branch-facts{
  margin:18px 0 0;padding-top:15px;border-top:1px solid var(--line);
  display:grid;gap:11px
}
.branch-facts>div{display:flex;gap:14px;align-items:baseline}
.branch-facts dt{
  flex:none;width:74px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)
}
[dir="rtl"] .branch-facts dt{letter-spacing:0}
.branch-facts dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.branch-go{margin-top:20px;display:inline-flex;align-items:center;gap:8px}

@media(max-width:820px){
  /* both shops stay side by side — one card each, never stacked. */
  .branch-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .branch{padding:16px 14px 14px;border-radius:16px}
  .branch-mark{width:40px;height:40px;margin-bottom:12px}
  .branch-addr{font-size:14.5px}
  .branch-facts dt{width:66px}
}

/* on a phone the pair is narrow, so the card copy shrinks with it and the
   hours/phone labels sit above their values instead of beside them. */
@media(max-width:720px){
  .branch-grid{gap:10px}
  .branch{padding:0 12px 14px;border-radius:14px}
  .branch-badge{font-size:10px;padding:4px 9px;margin-bottom:2px}
  .branch h3{font-size:16px;line-height:1.25}
  .branch-addr{margin-top:6px;font-size:12px;line-height:1.5}
  .branch-stars{gap:5px;margin-top:8px;font-size:12px}
  .branch-stars .stars{font-size:11px;letter-spacing:0}
  .branch-stars .cmuted{font-size:11.5px}
  .branch-facts{margin-top:12px;padding-top:12px;gap:9px}
  .branch-facts>div{display:block}
  .branch-facts dt{width:auto;margin-bottom:2px;font-size:10px}
  .branch-facts dd{font-size:12px;line-height:1.45}
  /* the two cards are never the same height, so the button is pinned to the
     bottom of each one and the pair still lines up. */
  .branch{display:flex;flex-direction:column;align-items:stretch}
  .branch-go{margin-top:auto;padding-top:0;width:100%;justify-content:center;
    padding:9px 10px;font-size:12.5px;gap:6px}
  .branch-facts{margin-bottom:14px}
}

/* a photograph of each shop, so the cards are the shops rather than a list */
.branch{padding-top:0;overflow:hidden}
.branch-shot{
  display:block;margin:-1px -29px 20px;aspect-ratio:16/10;overflow:hidden;
  background:var(--wash-pale);border-bottom:1px solid var(--line)
}
.branch-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.branch:hover .branch-shot img{transform:scale(1.04)}
.branch-shot.is-blank{
  display:grid;place-items:center;color:var(--brass);
  background:repeating-linear-gradient(135deg,rgba(201,138,46,.07) 0 12px,rgba(201,138,46,.02) 12px 24px)
}
.branch-stars{
  display:flex;align-items:center;gap:8px;margin:11px 0 0;font-size:14px;flex-wrap:wrap
}
.branch-stars .stars{color:var(--brass-lo);letter-spacing:1px;font-size:13px}
.branch-stars b{color:var(--ink);font-weight:800}
.branch-stars .cmuted{color:var(--faint);font-size:13.5px}

@media(max-width:820px){
  .branch-shot{margin:-1px -15px 14px;aspect-ratio:16/9}
}
@media(max-width:720px){
  .branch-shot{margin:-1px -13px 12px;aspect-ratio:4/3}
}


/* WooCommerce sets its own price colour on a selector heavier than `.price`,
   which turned every price on the site olive. Match its weight. */
.woocommerce .price,
.woocommerce span.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .price .woocommerce-Price-amount,
.woocommerce .price .woocommerce-Price-currencySymbol{
  color:var(--brass-lo)
}
/* the struck-through original was too pale to read */
.price s,.price del,.woocommerce .price del{color:var(--muted);opacity:1}

/* each shop keeps its own hours and number beside its address */
.foot-branch p{margin:0}
.foot-branch-meta{margin-top:6px!important;color:#8FB0D6;font-size:13.5px}
.foot-branch-meta span{display:block;line-height:1.5}

/* WooCommerce's stock line carries the same olive as its price colour. */
.woocommerce div.product .stock,
.woocommerce .stock,
p.stock{color:var(--green)}
.woocommerce .out-of-stock,p.stock.out-of-stock{color:#B4472A}

/* the footer branches, with the pin the shop asked for */
.foot-branches-title{display:flex;align-items:center;gap:8px;margin:22px 0 4px}
.foot-branches-title svg{color:var(--brass-hi);flex:none}

/* confirmation for actions that otherwise only swap an icon */
.toast{
  position:fixed;z-index:200;inset-inline:0;bottom:26px;margin-inline:auto;
  width:max-content;max-width:86vw;padding:13px 22px;border-radius:100px;
  background:var(--deeper);color:#fff;font-size:14.5px;font-weight:700;
  box-shadow:var(--sh-3);opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.toast.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}

/* ── homepage rebuilt to the shop's reference design ──────────────── */

/* a centred title with a rule either side */
.sec-title{
  display:flex;align-items:center;justify-content:center;gap:16px;
  font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(22px,2.6vw,31px);color:var(--deep);margin:0 0 30px;text-align:center
}
[dir="rtl"] .sec-title{font-family:Tajawal,serif;font-weight:800}
.sec-title::before,.sec-title::after{
  content:"";height:2px;width:clamp(28px,5vw,64px);flex:none;
  background:linear-gradient(90deg,transparent,var(--brass))
}
.sec-title::after{background:linear-gradient(90deg,var(--brass),transparent)}

/* the four promises, on one white card */
.trust{background:transparent;color:inherit;margin-top:-34px;position:relative;z-index:3}
.trust .shell{display:block}
.trust-card{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh-2);overflow:hidden
}
.trust-item{
  display:grid;grid-template-columns:100%;grid-template-rows:auto auto;
  justify-items:center;align-content:start;text-align:center;
  gap:10px;padding:22px 16px;
  border-inline-end:1px solid var(--line);border-bottom:0
}
.trust-item:last-child{border-inline-end:0}
.trust-ico{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:none;color:var(--brass)
}
.trust-item b{display:block;width:100%;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.trust-item span span,.trust-item>span>span{font-size:12.5px;line-height:1.45;color:var(--muted)}

/* twelve category tiles, six across */
.aisles{grid-template-columns:repeat(4,1fr);gap:18px}
.aisle{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 10px 12px;text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)
}
.aisle:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:rgba(70,143,234,.45)}
/* white, so a product shot on a white background blends into the tile */
.aisle-shot{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:10px;background:#F1F4F8}
.aisle-shot img{width:100%;height:100%;object-fit:contain;padding:6px}
.aisle h3{
  font-family:inherit;font-size:13px;font-weight:700;line-height:1.35;
  color:var(--ink);margin:10px 0 0;letter-spacing:0
}
.aisles-more{display:flex;justify-content:center;margin-top:26px}

/* product card: badge, then price, then a full-width buy button */
.prod-off{
  position:absolute;top:10px;inset-inline-start:10px;z-index:3;
  background:#C0392B;color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;
  padding:5px 10px;border-radius:6px;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)
}
.prod-buy{margin-top:10px}
.prod-buy .add,.prod-buy a.button{
  display:flex;align-items:center;justify-content:center;width:100%;height:auto;
  padding:11px 14px;border-radius:10px;font-size:14px;font-weight:700;
  background:#fff;color:var(--deep);border:1.5px solid var(--line-2);
  font-family:inherit;line-height:1.2;transition:.26s var(--ease);transform:none
}
.prod-buy .add::before,.prod-buy a.button::before{content:none}
.prod-buy .add:hover,.prod-buy a.button:hover{
  background:var(--deep);color:#fff;border-color:var(--deep);transform:none
}
.prod-buy a.button.added{background:var(--green);border-color:var(--green);color:#fff}
.prod-foot{min-height:0;padding-top:10px}

@media(max-width:1000px){
  .trust-card{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(2n){border-inline-end:0}
  .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .aisles{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:720px){
  .trust{margin-top:-22px}
  /* all four promises on one line, icon centred over a short label — the
     sentence under each one is what forced the card two rows deep. */
  .trust-card{border-radius:14px;grid-template-columns:repeat(4,1fr)}
  /* grid, not flex: a label wider than its cell used to stretch the text
     block past the flex line, so the icon centred on one width and the
     words on another — which is what made the icons look off. */
  /* align-content defaults to stretch, so the tile whose label wraps to two
     lines made the grid row taller and the other three had their spare
     space shared out — their icons dropped 11px below its own. Start-align
     the rows and all four icons sit on one line whatever the labels do. */
  .trust-item{display:grid;grid-template-columns:100%;grid-template-rows:auto auto;
    justify-items:center;align-content:start;
    padding:14px 4px;gap:6px;text-align:center;
    border-inline-end:1px solid var(--line);border-bottom:0}
  .trust-item:nth-child(2n){border-inline-end:1px solid var(--line)}
  .trust-item:nth-child(-n+2){border-bottom:0}
  .trust-item:last-child{border-inline-end:0}
  /* the box used to be 34px around an 18px mark, which put 16px of dead
     space between the icon and its label before the gap even started */
  .trust-ico{width:22px;height:22px}
  .trust-ico svg{width:22px;height:22px}
  /* the icon is a <span> as well, so this has to spare it or the tile
     stretches to the full column width */
  .trust-item>span:not(.trust-ico){display:block;width:100%;min-width:0}
  /* "Authentic products" needs 104px on one line and the tile gives it 102,
     so that one label alone wrapped to two lines while the other three sat
     on one — which is what made the row look crooked however well the icons
     lined up. Every label now gets the same two-line box and is centred in
     it, so a wrap changes nothing about the shape of the row. */
  .trust-item b{display:flex;align-items:flex-start;justify-content:center;
    width:100%;min-height:2.6em;font-size:11px;line-height:1.3;
    margin-bottom:0;letter-spacing:0;text-wrap:balance;overflow-wrap:anywhere}
  .trust-item span span,.trust-item>span>span{display:none}
  .aisles{grid-template-columns:repeat(3,1fr);gap:11px}
  .aisle{padding:10px 7px 9px;border-radius:11px}
  .aisle h3{font-size:11.5px;margin-top:8px}
  .sec-title{margin-bottom:22px;gap:11px}
  .prod-buy .add,.prod-buy a.button{padding:10px 12px;font-size:13px}
}

/* ── header, two rows as in the reference ─────────────────────────── */
.head-main .shell{display:flex;align-items:center;gap:26px;min-height:82px}
.head-search{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  background:var(--lime);border:1.5px solid var(--line);border-radius:10px;
  padding:0 14px;height:44px;transition:border-color .25s var(--ease)
}
.head-search:focus-within{border-color:var(--chaouen)}
.head-search svg{color:var(--faint);flex:none}
.head-search input{
  flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14.5px;
  color:var(--ink);outline:none;padding:0
}
.head-search input::placeholder{color:var(--faint)}
.head-account{
  display:inline-flex;align-items:center;gap:8px;color:var(--deep);
  font-size:14px;font-weight:600;white-space:nowrap
}
.head-account:hover{color:var(--chaouen-text)}

.head-nav{border-top:1px solid var(--line);background:#fff}
.head-nav .shell{display:flex;justify-content:center}
.head-nav .nav{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.head-nav .nav-link{padding:13px 15px;font-size:14.5px}
/* the active underline was placed for the old tall header and now
   crossed the middle of the word — sit it under the text. */
.head-nav .nav-link::after{bottom:7px;inset-inline:15px}

@media(max-width:1100px){
  .head-main .shell{gap:16px}
  .head-account span{display:none}
  .head-search{height:42px}
}
@media(max-width:900px){
  .head-search,.head-nav{display:none}
  .head-main .shell{min-height:64px;gap:8px}
}


/* six tiles to a line, as the client's design shows */
.aisles{grid-template-columns:repeat(6,1fr);gap:16px}
@media(max-width:1100px){.aisles{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.aisles{grid-template-columns:repeat(3,1fr);gap:11px}}


/* six across is the client's layout; step it down rather than squeeze.
   A row that scrolls sideways must keep its own column sizing — forcing a
   template on it collapsed the first two cards to zero width. */
@media(max-width:1200px){ul.products.columns-6{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){ul.products.columns-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){ul.products.columns-6:not(.row-scroll){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the sideways rails come after those column rules in the cascade, so the
   phone rail has to re-assert that it sizes its own columns. */
@media(max-width:720px){ul.products.row-scroll{grid-template-columns:none}}

/* ── mega menu holding twenty-five departments ────────────────────── */
.mega-grid{grid-template-columns:repeat(4,1fr);gap:12px}
.mega-card{
  display:flex;align-items:center;gap:14px;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  padding:10px 16px 10px 10px;min-height:88px;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)
}
.mega-card:hover{transform:translateY(-2px);border-color:rgba(70,143,234,.5);box-shadow:var(--sh-2)}
/* display must be set explicitly — a bare span ignored width and height */
.mega-shot{
  display:block;width:68px;height:68px;flex:0 0 68px;
  border-radius:10px;overflow:hidden;background:var(--lime)
}
/* fixed pixels, not percentages — the percentage never resolved against
   the flex-basis parent and the thumbnails came out at 42px. */
.mega-shot img{display:block;width:68px;height:68px;min-width:68px;object-fit:cover}
.mega-card:hover .mega-shot img{transform:scale(1.06)}
.mega-name{
  display:block;padding:0;font-weight:700;font-size:14px;line-height:1.3;
  color:var(--ink);text-wrap:balance
}
@media(max-width:1250px){.mega-grid{grid-template-columns:repeat(3,1fr)}}

/* ── category rail: two rows that scroll sideways ──────────────────
   The page used to shift up and down while the rail was being swiped.
   Three causes, all here: proximity snapping re-settled the rail after
   a drag; a vertical swipe that started on the rail was handled by it;
   and reaching either end chained the scroll on to the page. */
.aisles-wrap{position:relative}
.aisles{
  grid-template-columns:none;grid-auto-flow:column;
  grid-template-rows:repeat(2,auto);grid-auto-columns:132px;
  gap:26px 18px;overflow-x:auto;overflow-y:hidden;
  /* both axes, so neither end of the rail passes the scroll to the page */
  /* only the sideways axis is contained — containing the vertical one
     stopped a wheel over the rail from scrolling the page at all */
  overscroll-behavior-x:contain;
  /* both directions are allowed and the browser picks by gesture: drag
     sideways and the rail slides, drag up or down and the page scrolls */
  touch-action:pan-x pan-y;
  padding-block:4px;scrollbar-width:none
}
.aisles::-webkit-scrollbar{display:none}
/* no card any more — the tile is the picture, the name sits under it */
.aisle{
  background:none;border:0;border-radius:0;padding:0;text-align:center;
  box-shadow:none
}
.aisle:hover{transform:none;box-shadow:none;border:0}
.aisle-shot{
  width:100%;aspect-ratio:1/1;border-radius:18px;background:#F1F4F8;
  transition:background .25s var(--ease)
}
.aisle:hover .aisle-shot{background:#E6ECF5}
.aisle-shot img{object-fit:contain;padding:12px}
.aisle h3{font-size:13.5px;font-weight:600;color:var(--ink);margin-top:11px;line-height:1.3}
.aisle:hover h3{color:var(--chaouen-text)}

.aisles-arrow{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--deep);cursor:pointer;
  box-shadow:var(--sh-2);transition:background .2s var(--ease)
}
.aisles-arrow:hover{background:var(--lime)}
.aisles-arrow.prev{inset-inline-start:-21px}
.aisles-arrow.next{inset-inline-end:-21px}
.aisles-arrow.prev svg{transform:rotate(90deg)}
.aisles-arrow.next svg{transform:rotate(-90deg)}
[dir="rtl"] .aisles-arrow.prev svg{transform:rotate(-90deg)}
[dir="rtl"] .aisles-arrow.next svg{transform:rotate(90deg)}
.aisles-arrow[hidden]{display:none}

@media(max-width:1100px){
  .aisles{grid-auto-columns:120px}
  .aisles-arrow{display:none}
}
@media(max-width:720px){
  .aisles{grid-auto-columns:96px;gap:20px 12px}
  .aisle-shot{border-radius:14px}
  .aisle-shot img{padding:8px}
  .aisle h3{font-size:11.5px;margin-top:8px}
}



/* ── two-panel menu: departments down the side, pictures alongside ── */
.mega-two{display:grid;grid-template-columns:236px minmax(0,1fr);gap:0}
.mega-side{
  display:flex;flex-direction:column;gap:2px;
  border-inline-end:1px solid var(--line);padding-inline-end:20px
}
.mega-tab{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 12px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--muted);
  text-align:start;border-radius:9px;transition:.2s var(--ease)
}
.mega-tab svg{flex:none;opacity:.5;transform:rotate(-90deg)}
[dir="rtl"] .mega-tab svg{transform:rotate(90deg)}
.mega-tab:hover{background:var(--lime);color:var(--ink)}
.mega-tab.is-on{color:var(--chaouen-text);background:rgba(70,143,234,.09)}
.mega-tab.is-on svg{opacity:1}

.mega-main{padding-inline-start:26px;min-height:330px}
.mega-panel{display:none}
.mega-panel.is-on{display:block}

.mega-lead{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--lime);border-radius:12px;padding:15px 20px;margin-bottom:20px
}
.mega-lead b{font-size:15px;color:var(--ink)}
.mega-lead span{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:13.5px;font-weight:700;color:var(--chaouen-text)
}

.mega-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px}
.mega-item{display:block;text-align:center}
.mega-item-shot{
  display:block;aspect-ratio:1/1;border-radius:14px;background:#F1F4F8;
  overflow:hidden;transition:background .25s var(--ease)
}
.mega-item:hover .mega-item-shot{background:#E6ECF5}
.mega-item-shot img{width:100%;height:100%;object-fit:contain;padding:10px;display:block}
.mega-item-name{
  display:block;margin-top:10px;font-size:13.5px;font-weight:700;
  line-height:1.3;color:var(--ink)
}
.mega-item:hover .mega-item-name{color:var(--chaouen-text)}
.mega-item-count{display:block;margin-top:2px;font-size:12px;color:var(--faint)}

@media(max-width:1250px){
  .mega-two{grid-template-columns:200px minmax(0,1fr)}
  .mega-items{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* group headings inside the phone menu */
.mnav .mnav-group{
  margin-top:18px;padding:0 0 6px;font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);list-style:none
}
.mnav .mnav-group:first-child{margin-top:4px}
[dir="rtl"] .mnav .mnav-group{letter-spacing:0}

/* ── the brands we carry, running across the top of the footer ─────
   Two identical tracks sit side by side and the pair slides the width of
   one of them, so the loop closes on itself with no visible seam. The
   competitor shows four fixed logos; this shows the whole shelf. */
.brands{
  padding:26px 0 22px;border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:30px
}
.brands-title{
  display:flex;align-items:center;gap:8px;margin:0 0 16px;
  font-family:inherit;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#8FB0D6
}
[dir="rtl"] .brands-title{letter-spacing:0}
.brands-title svg{color:var(--brass-hi);flex:none}
.brand-rail{
  display:flex;gap:14px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)
}
/* .foot ul is a grid, and it outranks a lone class here, so the track
   names the footer too rather than losing its row. */
.foot .brand-track,.brand-track{
  display:flex;flex-direction:row;flex-wrap:nowrap;
  gap:14px;list-style:none;margin:0;padding:0;flex:none;
  animation:brand-marquee 46s linear infinite
}
.brand-rail:hover .brand-track,.brand-rail:focus-within .brand-track{animation-play-state:paused}
@keyframes brand-marquee{to{transform:translateX(calc(-100% - 14px))}}
/* right-to-left reading runs the shelf the other way */
[dir="rtl"] .brand-track{animation-name:brand-marquee-rtl}
@keyframes brand-marquee-rtl{to{transform:translateX(calc(100% + 14px))}}
.brand-card{
  flex:none;width:158px;height:107px;border-radius:14px;overflow:hidden;
  background:#fff;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 20px -14px rgba(0,0,0,.7);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.brand-card img{width:100%;height:100%;object-fit:cover;display:block}
.brand-card:hover{transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(0,0,0,.8)}
@media(max-width:820px){
  .brands{padding:20px 0 18px;margin-bottom:24px}
  .brand-card{width:126px;height:86px;border-radius:12px}
  .brand-rail,.brand-track{gap:10px}
  @keyframes brand-marquee{to{transform:translateX(calc(-100% - 10px))}}
  @keyframes brand-marquee-rtl{to{transform:translateX(calc(100% + 10px))}}
}
/* anyone who asked for less motion gets a rail they scroll themselves */
@media(prefers-reduced-motion:reduce){
  .brand-track{animation:none}
  .brand-rail{overflow-x:auto;scrollbar-width:none}
  .brand-rail::-webkit-scrollbar{display:none}
  .brand-track + .brand-track{display:none}
}

/* ── footer columns, balanced ──────────────────────────────────────
   The brand column used to carry both shops, so it ran twice as tall as
   the three beside it and the right half of the footer sat empty. The
   shops now have a column of their own and the contact lines moved up
   into the brand column, so all four fill to roughly the same depth. */
.foot-top{grid-template-columns:1.35fr 1fr 1fr 1.25fr;align-items:start}
.foot-contact{margin-top:18px}
.foot-contact li{margin:0}
.foot-contact a{display:inline-flex;align-items:center;gap:9px}
.foot-contact svg{color:var(--brass-hi);flex:none}
.foot-shops .foot-branch:first-of-type{margin-top:4px}


@media(max-width:1000px){
  .foot-top{grid-template-columns:1fr 1fr;gap:30px 26px}
  .foot-brand{grid-column:auto}
}
@media(max-width:720px){
  .foot-top{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot-brand{grid-column:1/-1}
  .foot-shops{grid-column:1/-1}
}

/* ── mobile tap targets ────────────────────────────────────────────
   Audit at 375px found the main buy button 41px tall against a 55px
   quantity box beside it, and three controls under the 44px minimum. */

/* The generic .woocommerce .button rule (added to beat WooCommerce's own
   padding) was also beating this one, so the single most important button
   on the site came out shorter than the box next to it. Name the same
   weight and give both a shared height. */
.woocommerce form.cart button.single_add_to_cart_button,
form.cart .single_add_to_cart_button{
  min-height:54px;padding:15px 30px;font-size:15.5px
}
form.cart .quantity{min-height:54px}

/* the account link was a bare 21px icon between two 44px buttons */
.head-account{min-width:44px;min-height:44px;justify-content:center}
.head-icons .lang,.head-top .lang,a.lang{
  min-height:34px;display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;font-size:12.5px;position:relative
}
.lang::after{content:'';position:absolute;inset:-9px -7px}

/* Smaller pill on a phone. Written with the same weight as the rule above,
   or the earlier mobile version loses to it. The padded hit area keeps the
   target comfortable while the drawn chip stays small. */
@media(max-width:720px){
  .head-icons .lang,.head-top .lang,a.lang{
    min-height:26px;padding:3px 9px;font-size:10.5px;letter-spacing:0
  }
  .lang::after{inset:-11px -8px}
}

/* The wishlist heart and the gallery zoom stay their drawn size — a 44px
   disc over a product photo is heavy-handed — but each gets an invisible
   hit area around it that meets the minimum. */
/* Neither of these needs position:relative — both are already absolutely
   positioned, which is containing block enough for their own pseudo. Forcing
   relative dropped the heart out of the photograph and into the flow, where
   it sat under the picture beside the category label. */
.wish::after{content:'';position:absolute;inset:-6px;border-radius:inherit}
/* The trigger is a grid with centred items, so a pseudo-element hit area
   gets sized to the cell. Give the button itself the minimum instead and
   keep the drawn disc where it is with a transparent border. */
/* WooCommerce sizes this with a four-class selector, so match its weight
   or the button stays 36px. The transparent border keeps the drawn disc
   the same size while the tappable box reaches 44. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__trigger{
  width:44px;height:44px;box-sizing:border-box;
  background-clip:content-box;border:4px solid transparent
}
@media(max-width:720px){
  .wish::after{inset:-7px}
}

/* Card controls on a phone: the buy button was 39px and the quick-view
   pill 32px, both under the 44px minimum. The pill keeps its drawn size
   — a 44px slab over a 168px photo would swallow the product — and gets
   the difference as an invisible hit area instead. */
@media(max-width:720px){
  .prod-buy .add,.prod-buy a.button{min-height:44px}
}

/* Remaining touch targets found in the 375px sweep: the filter drawer's
   category buttons, and the hero's arrows and dots. */
@media(max-width:720px){
  .fbtn{min-height:44px;align-items:center}
  .hs-arrow{width:44px;height:44px}
  .hs-dot{position:relative}
  .hs-dot::after{content:'';position:absolute;inset:-18px -7px}
}

/* The wish and quick buttons are siblings of the image link (they cannot be
   nested inside an <a>), so they used to anchor to the whole card. As the
   card grew taller the quick-view pill drifted below the photograph and
   landed on the category label. This wrapper anchors them to the photo. */
.prod-media{position:relative;display:block}

/* ── product gallery thumbnails ────────────────────────────────────
   WooCommerce sets `.woocommerce div.product div.images .flex-control-thumbs
   li{width:25%;float:left}` — four across a strip. Our strip is a 78px
   column, so 25% came out at 20px: the thumbnails were postage stamps
   beside a 533px photograph. Match its weight, and give the column a
   size worth looking at. */
.woocommerce div.product div.images .flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs{width:96px}
.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce-product-gallery .flex-control-thumbs li{
  width:100%;float:none;margin:0
}
/* contain, not cover: these are product shots, and cropping the first one
   to a band of gold rims told the shopper nothing about what it was. */
.woocommerce div.product div.images .flex-control-thumbs img,
.woocommerce-product-gallery .flex-control-thumbs img{
  width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;padding:5px
}
/* the phone lays the strip out sideways instead */
@media(max-width:1000px){
  .woocommerce div.product div.images .flex-control-thumbs,
  .woocommerce-product-gallery .flex-control-thumbs{width:100%}
  .woocommerce div.product div.images .flex-control-thumbs li,
  .woocommerce-product-gallery .flex-control-thumbs li{width:86px;flex:none}
}

/* ── cart & checkout ───────────────────────────────────────────────
   These are WooCommerce blocks and want the full shell. In the prose
   column they sat at 646px, below the width the block checks before it
   goes two-column, so the order summary stacked above the form and left
   a screenful of nothing under the page heading. */
.sec-checkout{padding-top:34px}
.sec-checkout .wp-block-woocommerce-checkout,
.sec-checkout .wp-block-woocommerce-cart{max-width:none;width:100%}

/* ── the furniture around cart and checkout ────────────────────────── */
.co-steps{
  display:flex;align-items:center;gap:10px;list-style:none;margin:0 0 26px;padding:0;
  flex-wrap:wrap
}
.co-step{
  display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)
}
[dir="rtl"] .co-step{letter-spacing:0}
.co-step + .co-step::before{
  content:'';width:26px;height:1.5px;background:var(--line-2);margin-inline-end:1px
}
.co-step-n{
  width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--lime);color:var(--faint);font-size:12px;border:1.5px solid var(--line-2)
}
.co-step.is-on{color:var(--ink)}
.co-step.is-on .co-step-n{background:var(--deep);color:#fff;border-color:var(--deep)}
.co-step.is-done{color:var(--green)}
.co-step.is-done .co-step-n{background:var(--green);color:#fff;border-color:var(--green)}

.ship-bar{
  background:var(--lime);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin:0 0 26px
}
.ship-bar.is-free{border-color:rgba(42,113,72,.4);background:rgba(42,113,72,.07)}
.ship-bar-say{margin:0 0 10px;font-size:14px;color:var(--ink)}
.ship-bar-say b{color:var(--deep)}
.ship-bar.is-free .ship-bar-say{color:var(--green);font-weight:700}
.ship-bar-rail{height:7px;border-radius:100px;background:var(--line-2);overflow:hidden}
.ship-bar-rail span{
  display:block;height:100%;border-radius:100px;background:var(--brass);
  transition:width .45s var(--ease)
}
.ship-bar.is-free .ship-bar-rail span{background:var(--green)}

.cart-also,.cart-trust{padding-top:0}
.cart-trust-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  border-top:1px solid var(--line);padding-top:30px
}
.cart-trust-item{display:flex;gap:13px;align-items:flex-start}
.cart-trust-ico{
  width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:rgba(70,143,234,.10);color:var(--chaouen-text)
}
.cart-trust-item b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.cart-trust-item p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}

@media(max-width:1000px){
  .cart-trust-grid{grid-template-columns:1fr 1fr;gap:20px 16px}
}
@media(max-width:720px){
  .co-steps{gap:7px;margin-bottom:20px}
  .co-step{font-size:10.5px;gap:6px}
  .co-step-n{width:22px;height:22px;font-size:11px}
  .co-step + .co-step::before{width:12px}
  /* the middle label is the long one and it is the step they are on */
  .co-step:not(.is-on) .co-step-t{display:none}
  .cart-trust-grid{grid-template-columns:1fr;gap:16px;padding-top:24px}
  .ship-bar{padding:12px 13px;margin-bottom:20px}
  .ship-bar-say{font-size:13px}
}

/* ── the cart block, dressed ───────────────────────────────────────
   Out of the box the rows are thin: a 64px thumbnail, a 28px quantity
   stepper and a totals column with no card around it. */

/* the product photograph, at a size worth looking at */
.wc-block-cart-item__image{width:104px}
.wc-block-cart-item__image img{
  width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:6px
}

/* rows breathe, and the header reads as a header */
.wc-block-cart-items__header th{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line)
}
[dir="rtl"] .wc-block-cart-items__header th{letter-spacing:0}
.wc-block-cart-items__row td{padding-block:20px;border-bottom:1px solid var(--line)}
.wc-block-components-product-name{
  font-family:var(--serif,inherit);font-size:16px;font-weight:700;color:var(--ink);
  line-height:1.3;text-decoration:none
}
.wc-block-components-product-name:hover{color:var(--chaouen-text)}
.wc-block-cart-item__total .wc-block-formatted-money-amount{
  font-size:19px;font-weight:800;color:var(--brass-lo)
}

/* a quantity stepper you can actually hit */
.wc-block-components-quantity-selector{
  border:1.5px solid var(--line-2);border-radius:100px;overflow:hidden;
  min-height:44px;max-width:132px;background:#fff
}
.wc-block-components-quantity-selector__input{font-weight:700;font-size:15px;color:var(--ink)}
.wc-block-components-quantity-selector__button{
  min-width:38px;color:var(--deep);font-size:17px;opacity:1
}
.wc-block-components-quantity-selector__button:hover{background:var(--lime)}
.wc-block-cart-item__remove-link{
  font-size:12.5px;color:var(--faint);text-decoration:underline;margin-top:10px
}
.wc-block-cart-item__remove-link:hover{color:#B4442F}

/* the totals become a card, and follow you down a long basket */
/* the sidebar carries both classes on the one element — no descendant */
.wc-block-cart__sidebar,.wc-block-checkout__sidebar,
.wc-block-components-sidebar{
  background:var(--lime);border:1px solid var(--line);border-radius:16px;
  padding:22px 20px;box-shadow:var(--sh-1,0 10px 30px -22px rgba(12,36,64,.5))
}
.wc-block-components-totals-item__label{color:var(--muted);font-size:14px}
.wc-block-components-totals-item__value{color:var(--ink);font-weight:700}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:18px;font-weight:800;color:var(--ink)
}

/* back to the shelves, the way the shopper expects it */
.cart-back{margin:22px 0 0}
.cart-back a{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--deep)}
.cart-back a:hover{color:var(--chaouen-text)}
.cart-back svg{transform:scaleX(-1)}
[dir="rtl"] .cart-back svg{transform:none}

@media(min-width:1000px){
  .wc-block-cart__sidebar{position:sticky;top:96px;align-self:start}
}
@media(max-width:720px){
  .wc-block-cart-item__image{width:78px}
  .wc-block-cart-items__row td{padding-block:16px}
  .wc-block-components-product-name{font-size:14.5px}
}

/* the nav row carried a whole line of padding above and below the links */
.head-nav .nav-link{padding:11px 15px}
.head-nav .shell{min-height:0}

/* ── a photograph behind the cart and checkout heading ─────────────
   The plain wash read as an empty band above an empty-looking page. */
.woocommerce-cart .page-head,
.woocommerce-checkout .page-head,
.woocommerce-account .page-head{
  position:relative;overflow:hidden;background:var(--deeper);
  padding:52px 0 56px
}
.woocommerce-cart .page-head::before,
.woocommerce-checkout .page-head::before,
.woocommerce-account .page-head::before{
  content:'';position:absolute;inset:0;
  background:var(--co-shot) center/cover no-repeat;
  opacity:.62
}
.woocommerce-cart .page-head::after,
.woocommerce-checkout .page-head::after,
.woocommerce-account .page-head::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,46,92,.55),rgba(10,46,92,.78))
}
.woocommerce-cart .page-head .shell,
.woocommerce-checkout .page-head .shell,
.woocommerce-account .page-head .shell{position:relative;z-index:2}
.woocommerce-cart .page-head h1,
.woocommerce-checkout .page-head h1,
.woocommerce-account .page-head h1{color:#fff}
.woocommerce-cart .page-head p,
.woocommerce-checkout .page-head p,
.woocommerce-account .page-head p{color:#C9DBF3}
@media(max-width:720px){
  .woocommerce-cart .page-head,
  .woocommerce-checkout .page-head,
  .woocommerce-account .page-head{padding:34px 0 36px}
}

/* ── the checkout, stripped back ───────────────────────────────────
   A payment page with the whole shop's navigation across the top gives
   the shopper somewhere else to go. Here the header is a badge, a lock
   and a way back, and each part of the form is its own card. */
.head-co{border-bottom:1px solid var(--line);background:#fff}
.head-co .shell{
  display:flex;align-items:center;gap:20px;min-height:70px;flex-wrap:wrap
}
.head-co .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.head-co .brand-mark{height:38px;width:auto}
.head-co .brand-name{
  font-family:var(--serif,inherit);font-size:19px;font-weight:700;color:var(--ink)
}
.head-co-title{
  display:inline-flex;align-items:center;gap:8px;color:var(--green);
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase
}
[dir="rtl"] .head-co-title{letter-spacing:0}
.head-co-links{margin-inline-start:auto;display:flex;gap:20px;flex-wrap:wrap}
.head-co-links a{font-size:14px;font-weight:600;color:var(--deep)}
.head-co-links a:hover{color:var(--chaouen-text)}

/* each step of the form becomes a card, the way a long checkout reads best */
.wc-block-checkout__main .wc-block-components-checkout-step{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin-bottom:16px
}
.wc-block-components-checkout-step__title{
  font-family:var(--serif,inherit);font-size:18px;font-weight:700;color:var(--ink)
}
.wc-block-components-checkout-step__heading{margin-top:0}

/* the summary follows you down the form */
@media(min-width:1000px){
  .wc-block-checkout__sidebar{position:sticky;top:24px;align-self:start}
}

/* the reassurance panel, under the summary */
.co-trust{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin-top:16px
}
.co-trust h3{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)
}
[dir="rtl"] .co-trust h3{letter-spacing:0}
.co-trust h3 svg{color:var(--chaouen-text);flex:none}
.co-trust ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.co-trust li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--muted)}
.co-trust li svg{color:var(--green);flex:none;margin-top:2px}

@media(max-width:720px){
  .head-co .shell{min-height:60px;gap:12px}
  .head-co .brand-name{font-size:16px}
  .head-co-title{font-size:11px;gap:6px}
  .head-co-links{width:100%;margin-inline-start:0;gap:16px;order:3}
  .head-co-links a{font-size:13px}
  .wc-block-checkout__main .wc-block-components-checkout-step{padding:18px 16px}
}

/* ── checkout density, to the reference ────────────────────────────
   Measured against the layout the owner sent: our fields were 50px to
   its 40, the section titles 20px serif to its compact sans, and the
   cards carried a third more padding. A checkout is a form to get
   through, not a page to admire. */
.wc-block-checkout__main .wc-block-components-checkout-step{
  padding:18px 20px;margin-bottom:12px;border-radius:12px
}
.wc-block-components-checkout-step__title{
  font-family:inherit;font-size:16.5px;font-weight:800;letter-spacing:-.01em
}
.wc-block-components-checkout-step__description{font-size:13px;margin-top:2px}

/* fields */
.wc-block-components-text-input,
.wc-block-components-country-input,
.wc-block-components-state-input{margin-top:10px}
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-text-input select,
.wc-block-components-country-input select,
.wc-block-components-state-input select{
  min-height:42px;height:42px;padding:14px 12px 4px;font-size:14.5px;border-radius:8px
}
.wc-block-components-text-input label,
.wc-block-components-combobox label{font-size:14.5px}
.wc-block-components-text-input.is-active label,
.wc-block-components-combobox.is-active label{font-size:11.5px}
.wc-block-components-textarea{font-size:14.5px;border-radius:8px}

/* the delivery choice */
.wc-block-components-radio-control__option{
  padding-block:12px;font-size:14.5px;min-height:44px
}

/* the coupon field sits open, rather than behind a disclosure the
   shopper has to find */
.wc-block-components-totals-coupon .wc-block-components-panel__button{
  font-size:13.5px;font-weight:700;color:var(--deep)
}
.wc-block-components-totals-coupon__form{margin-top:10px}
.wc-block-components-totals-coupon__input input{min-height:42px;height:42px;font-size:14.5px}

/* the order button rides at the top of the summary, where the reference
   puts it, so the total and the way to pay are one glance apart */
.wc-block-checkout__sidebar .wc-block-checkout__actions{
  order:-1;margin:0 0 14px;padding:0;border:0
}
.wc-block-checkout__sidebar .wc-block-checkout__actions-row{
  display:block;padding:0;margin:0
}
.wc-block-checkout__sidebar .wc-block-components-checkout-place-order-button{
  width:100%;min-height:52px;font-size:16px;font-weight:800
}
.wc-block-checkout__sidebar .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button{display:none}
.wc-block-checkout__sidebar{display:flex;flex-direction:column}

@media(max-width:720px){
  .wc-block-checkout__main .wc-block-components-checkout-step{padding:16px 14px}
  .wc-block-components-checkout-step__title{font-size:15.5px}
}

/* WooCommerce's block styles outrank a plain class here, so the checkout's
   own selectors have to be named for the density to take. */
.wc-block-checkout .wc-block-components-checkout-step__title,
.wc-block-components-checkout-step .wc-block-components-checkout-step__title{
  font-family:Karla,system-ui,sans-serif;font-size:16.5px;font-weight:800;letter-spacing:-.01em
}
.wc-block-checkout .wc-block-components-text-input input[type=text],
.wc-block-checkout .wc-block-components-text-input input[type=email],
.wc-block-checkout .wc-block-components-text-input input[type=tel],
.wc-block-checkout .wc-block-components-combobox input,
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input{
  min-height:42px;height:42px;padding:15px 12px 3px;font-size:14.5px;border-radius:8px
}
.wc-block-checkout .wc-block-components-text-input label{font-size:14.5px}
.wc-block-checkout .wc-block-components-text-input.is-active label{font-size:11px;top:5px}

/* the saved page is a shop grid, so it follows the shop's column counts */
.wish-page ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}
.wish-empty{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  text-align:center;color:var(--muted);padding:40px 0
}
/* Setting display on an element that relies on the hidden attribute defeats
   it — the "nothing saved yet" line stayed on screen underneath the saved
   items, telling the shopper the opposite of what they could see. */
.wish-empty[hidden]{display:none}
@media(max-width:1000px){.wish-page ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
  .wish-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wish-empty{padding:28px 0;font-size:14.5px}
}

/* The summary card's padding lost to a WooCommerce rule on small screens, so
   the totals ran edge to edge inside their own card while every other card on
   the page was inset. Name the block as well to match its weight. */
.wc-block-checkout .wc-block-checkout__sidebar,
.wc-block-cart .wc-block-cart__sidebar,
.wc-block-checkout .wc-block-components-sidebar,
.wc-block-cart .wc-block-components-sidebar{
  padding:20px 18px
}

@media(max-width:1000px){
  /* Stacked, the sidebar sits above the form — so putting the order button
     first asked the shopper to commit before seeing what they were buying.
     Summary, then the button, then the reassurance. */
  .wc-block-checkout__sidebar .wc-block-checkout__actions{order:2;margin-top:16px}
  .wc-block-checkout__sidebar .co-trust{order:3}
  .wc-block-checkout .wc-block-checkout__sidebar,
  .wc-block-cart .wc-block-cart__sidebar,
  .wc-block-checkout .wc-block-components-sidebar,
  .wc-block-cart .wc-block-components-sidebar{padding:16px 14px}
}

/* WooCommerce prints the summary heading twice on a narrow screen: once on
   the collapsible bar that carries the total, and again inside it. Keep the
   bar — it is the one that toggles — and drop the repeat. */
@media(max-width:1000px){
  .wc-block-checkout__sidebar .wc-block-components-checkout-step__heading{display:none}
}

/* ── form field borders ───────────────────────────────────────────
   WooCommerce draws these near-black (80% of #2b2d2f), which on a page of
   soft blue-greys read as heavy boxes. Use the theme's own rule colour. */
.wc-block-checkout input[type=text],
.wc-block-checkout input[type=email],
.wc-block-checkout input[type=tel],
.wc-block-checkout input[type=number],
.wc-block-checkout select,
.wc-block-checkout textarea,
.wc-block-cart input[type=text],
.wc-block-cart select,
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-textarea,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-totals-coupon__input input{
  border:1px solid var(--line-2);
  box-shadow:none
}
.wc-block-checkout input:focus,
.wc-block-checkout select:focus,
.wc-block-checkout textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus{
  border-color:var(--chaouen);
  box-shadow:0 0 0 1px var(--chaouen)
}
/* WooCommerce's own rule is `.wc-block-components-form .wc-block-components-text-input
   input[type=...]` — one class heavier than the version above, and its colour is
   mixed from currentcolor, which is the ink used for the text. Mirror the shape
   so the fields take the theme's rule colour instead. */
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-combobox input,
.wc-block-components-form .wc-block-components-country-input select,
.wc-block-components-form .wc-block-components-state-input select,
.wc-block-components-form .wc-block-components-textarea,
.wc-block-components-address-form .wc-block-components-text-input input{
  border:1px solid var(--line-2)
}
.wc-block-components-form .wc-block-components-text-input input:focus,
.wc-block-components-form .wc-block-components-combobox input:focus,
.wc-block-components-form .wc-block-components-textarea:focus{
  border-color:var(--chaouen);box-shadow:0 0 0 1px var(--chaouen)
}

/* the checkbox and the delivery radios come from the same palette */
.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input{border-color:var(--line-2)}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option{border-color:var(--line)}

/* ── checkout header and heading, tightened ────────────────────────
   The header was a flex row that wrapped as soon as the three pieces
   didn't quite fit, dropping the links onto a second line under the
   logo. A three-column grid keeps logo | lock | links on one row and
   lets the middle column absorb the slack. */
@media(min-width:721px){
  .head-co .shell{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;
    gap:20px;min-height:64px
  }
  .head-co-title{justify-self:center}
  .head-co-links{margin-inline-start:0;justify-self:end;white-space:nowrap}
}

/* one word does not need a 215px band above the form */
.woocommerce-checkout .page-head,
.woocommerce-cart .page-head,
.woocommerce-account .page-head{padding:30px 0 32px}
.woocommerce-checkout .page-head h1,
.woocommerce-cart .page-head h1,
.woocommerce-account .page-head h1{font-size:clamp(1.7rem,3vw,2.3rem)}
@media(max-width:720px){
  .woocommerce-checkout .page-head,
  .woocommerce-cart .page-head,
  .woocommerce-account .page-head{padding:22px 0 24px}
}

/* the progress row and the delivery meter sit closer to the form */
.sec-checkout{padding-top:24px}
.co-steps{margin-bottom:18px}
.ship-bar{margin-bottom:20px;padding:12px 15px}
.ship-bar-say{margin-bottom:9px;font-size:13.5px}

/* The logo is the way back to the shop from anywhere, and on a phone its
   link was a 30x34 target between two 44px buttons. */
/* ── the brand block on a phone ────────────────────────────────────
   Mark and name side by side, as on a wide screen — the name is just
   set smaller so it fits the row alongside the language chip and the
   three 44px controls. */
@media(max-width:720px){
  .head-main .brand{
    min-height:44px;display:inline-flex;flex-direction:row;
    align-items:center;gap:8px
  }
  .head-main .brand-mark{height:30px;width:auto}
  .head-main .brand-name{font-size:13px;line-height:1.15;letter-spacing:-.01em;white-space:nowrap}
  /* the tagline under the name is desktop-only; there is no room here */
  .head-main .brand small,.head-main .brand-sub{display:none}
  .head-main .shell{gap:9px}
}

/* ── share the product ─────────────────────────────────────────────── */
.pdp-share{display:flex;align-items:center;gap:9px;margin-top:22px}
.pdp-share-lbl{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
[dir="rtl"] .pdp-share-lbl{letter-spacing:0}
.pdp-share-btn{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line-2);
  background:#fff;color:var(--deep);display:grid;place-items:center;cursor:pointer;
  transition:.22s var(--ease);position:relative
}
.pdp-share-btn::after{content:'';position:absolute;inset:-4px;border-radius:50%}
.pdp-share-btn:hover{background:var(--deep);color:#fff;border-color:var(--deep)}

/* ── the two floating controls ─────────────────────────────────────── */
.floats{
  position:fixed;inset-inline-end:16px;bottom:16px;z-index:70;
  display:flex;flex-direction:column;gap:10px;align-items:center
}
.float-wa,.float-top{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  border:0;cursor:pointer;box-shadow:0 12px 28px -10px rgba(12,36,64,.55);
  transition:transform .25s var(--ease),background .25s var(--ease)
}
.float-wa{background:#25D366;color:#fff;text-decoration:none}
.float-wa:hover{transform:translateY(-3px);color:#fff}
.float-top{background:#fff;color:var(--deep);border:1.5px solid var(--line)}
.float-top:hover{background:var(--deep);color:#fff;border-color:var(--deep)}
.float-top[hidden]{display:none}

/* the sticky buy bar on a product page sits at the same edge */
.single-product .floats{bottom:82px}

@media(max-width:720px){
  .floats{inset-inline-end:12px;bottom:12px;gap:9px}
  .float-wa,.float-top{width:48px;height:48px}
  .single-product .floats{bottom:76px}
}

/* ── reviews ───────────────────────────────────────────────────────── */
.woocommerce-Reviews .comment-reply-title{
  font-family:var(--serif,inherit);font-size:19px;font-weight:700;color:var(--ink);display:block;margin-bottom:6px
}
.woocommerce-Reviews .commentlist{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:16px}
.woocommerce-Reviews .comment_container{
  display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px
}
.woocommerce-Reviews .avatar{border-radius:50%;width:48px;height:48px}
.woocommerce-Reviews .meta{font-size:13px;color:var(--muted);margin-bottom:6px}
.woocommerce-Reviews .meta strong{color:var(--ink);font-size:14.5px}
.woocommerce-Reviews .description p{margin:0;color:var(--ink);line-height:1.6}
.woocommerce .star-rating{color:var(--brass)}
#review_form_wrapper{background:var(--lime);border:1px solid var(--line);border-radius:14px;padding:20px}
.comment-form-rating label{display:block;margin-bottom:6px;font-weight:700;color:var(--ink)}

.pdp-reviews{padding-top:0}
.pdp-reviews-in{max-width:760px}
.pdp-reviews .woocommerce-noreviews{
  color:var(--muted);background:var(--lime);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;margin:0 0 20px
}

/* ============================================================
   CLASSIC CHECKOUT
   The checkout moved off the block editor so the shop could have
   one full-name field, an optional email and the city asked for
   before the street — none of which the block checkout allows.
   Rendering it in PHP also means every word of it goes through
   the Arabic translation, which the block version did not.
   ============================================================ */
.co-grid{display:grid;gap:20px;align-items:start}
@media(min-width:1000px){
  .co-grid{grid-template-columns:minmax(0,1fr) 380px;gap:28px}
  .co-side{position:sticky;top:24px}
}

.co-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:20px;margin-bottom:14px
}
.co-card-t{
  display:flex;align-items:center;gap:10px;margin:0 0 16px;
  font-family:inherit;font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)
}
.co-card-n{
  display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--deep);color:#fff;font-size:12.5px;font-weight:700;line-height:1
}

/* ── fields ───────────────────────────────────────────────────
   Two to a row where they read as a pair, one where they need the
   width. 44px tall so a thumb can hit them. */
.co-form .woocommerce-billing-fields__field-wrapper,
.co-form .woocommerce-shipping-fields__field-wrapper{display:grid;gap:12px}
@media(min-width:560px){
  .co-form .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr 1fr}
  .co-form .form-row-wide{grid-column:1 / -1}
}
.co-form .woocommerce-billing-fields h3,
.co-form .woocommerce-shipping-fields h3{
  font-family:inherit;font-size:14px;font-weight:800;color:var(--ink);margin:0 0 10px
}
.co-form .form-row{margin:0;padding:0;display:block}
.co-form .form-row label{
  display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px
}
.co-form .form-row .required{color:var(--brass-lo);text-decoration:none}
.co-form .form-row .optional{color:var(--faint);font-weight:400}
.co-form .form-row input[type=text],
.co-form .form-row input[type=email],
.co-form .form-row input[type=tel],
.co-form .form-row textarea,
.co-form .form-row .select2-selection,
.co-form .form-row select{
  width:100%;min-height:44px;padding:10px 13px;
  border:1px solid var(--line-2);border-radius:9px;background:#fff;
  font:inherit;font-size:15px;color:var(--ink);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)
}
.co-form .form-row textarea{min-height:78px;resize:vertical}
.co-form .form-row input:focus,
.co-form .form-row select:focus,
.co-form .form-row textarea:focus{
  outline:none;border-color:var(--chaouen);box-shadow:0 0 0 3px rgba(70,143,234,.18)
}
.co-form .form-row .description{font-size:12.5px;color:var(--faint);margin:5px 0 0}
.co-form .woocommerce-invalid input,
.co-form .woocommerce-invalid select{border-color:#B3261E}
.co-form .woocommerce-invalid label{color:#B3261E}

/* select2, which WooCommerce uses for country and emirate */
.co-form .select2-container--default .select2-selection--single{
  height:auto;min-height:44px;display:flex;align-items:center;
  border:1px solid var(--line-2);border-radius:9px
}
.co-form .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.4;padding:0;color:var(--ink)
}
.co-form .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;inset-inline-end:8px}

/* ── the summary ─────────────────────────────────────────────── */
.co-lines{display:grid;gap:12px;margin-bottom:16px}
.co-line{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:11px;align-items:center}
.co-line-pic{display:block;width:44px;height:44px;border-radius:8px;overflow:hidden;background:var(--lime)}
.co-line-pic img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.co-line-name{font-size:13.5px;line-height:1.35;color:var(--ink);min-width:0}
.co-line-qty{display:block;font-style:normal;font-size:12px;color:var(--faint);margin-top:2px}
.co-line-sum{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap}

.co-totals{width:100%;border-collapse:collapse;margin:0}
.co-totals th,.co-totals td{
  padding:9px 0;border:0;border-top:1px solid var(--line);
  font-size:14px;text-align:start;vertical-align:top
}
.co-totals th{font-weight:600;color:var(--muted)}
.co-totals td{text-align:end;font-weight:700;color:var(--ink)}
.co-totals .order-total th,.co-totals .order-total td{
  font-size:17px;font-weight:800;color:var(--ink);border-top:1px solid var(--line-2);padding-top:12px
}
.co-totals ul#shipping_method{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.co-totals ul#shipping_method li{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.co-totals ul#shipping_method label{font-weight:600;color:var(--ink);font-size:13.5px}
.co-totals .woocommerce-shipping-destination{font-size:12px;color:var(--faint);font-weight:400;margin:6px 0 0}

/* ── payment and the button that ends the job ─────────────────── */
.co-summary #payment{background:transparent;border-radius:0;margin-top:18px}
.co-summary #payment ul.payment_methods{
  list-style:none;margin:0 0 14px;padding:14px 0 0;border-top:1px solid var(--line)
}
.co-summary #payment ul.payment_methods li{margin:0}
.co-summary #payment ul.payment_methods label{
  display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--ink);margin:0
}
.co-summary #payment .payment_box{
  background:var(--lime);border-radius:9px;padding:11px 13px;margin:9px 0 0;
  font-size:13px;color:var(--muted)
}
.co-summary #payment .payment_box p:last-child{margin-bottom:0}
.co-summary #payment .payment_box::before{display:none}
.co-summary #payment .woocommerce-privacy-policy-text,
.co-summary #payment .woocommerce-terms-and-conditions-wrapper{font-size:12.5px;color:var(--faint)}
.co-summary #payment .form-row.validate-required label{display:flex;gap:8px;align-items:flex-start;font-size:12.5px}
.co-summary #payment .place-order{padding:0;margin:0}
.co-summary #place_order{
  width:100%;min-height:52px;border:0;border-radius:11px;cursor:pointer;
  background:var(--brass);color:var(--on-brass);
  font:inherit;font-size:16px;font-weight:800;letter-spacing:.01em;
  box-shadow:var(--sh-1);transition:filter .16s var(--ease),transform .16s var(--ease)
}
.co-summary #place_order:hover{filter:brightness(1.06)}
.co-summary #place_order:active{transform:translateY(1px)}

.co-side .co-trust{margin-top:0}

@media(max-width:999px){
  .co-side{margin-top:4px}
}
@media(max-width:720px){
  .co-card{padding:16px 14px;border-radius:12px}
  .co-card-t{font-size:15.5px;margin-bottom:13px}
}

/* The card already carries its own heading, so WooCommerce's "Billing &
   Shipping" line above the first field was a second title for one form. */
.co-form .woocommerce-billing-fields > h3,
.co-form .woocommerce-additional-fields > h3{display:none}
.co-form .woocommerce-additional-fields{margin-top:14px}

/* WooCommerce's notices draw their icon from its own icon font, which this
   theme does not load — so every notice opened with an empty glyph box. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-notice::before{display:none !important}
.woocommerce-info,.woocommerce-message,.woocommerce-error{
  padding:13px 16px;border-radius:11px;border:1px solid var(--line);
  background:var(--lime);font-size:14px;color:var(--ink);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap
}
.woocommerce-message{border-color:rgba(42,113,72,.28);background:rgba(42,113,72,.07)}
.woocommerce-error{border-color:rgba(179,38,30,.3);background:rgba(179,38,30,.06);color:#8A1F19}
.woocommerce-error li{list-style:none}
.woocommerce-info a,.woocommerce-message a{color:var(--deep);font-weight:700}
.woocommerce-message .button,.woocommerce-info .button{margin-inline-start:auto}

/* The wordmark is set in Fraunces, which has no Arabic. Same treatment as
   every other heading on the RTL side. */
[dir="rtl"] .brand-name{font-family:Tajawal,sans-serif;font-weight:800;letter-spacing:0}

/* The drawer's brand lockup — logo and wordmark together, as in the header. */
.mnav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.mnav-brand .brand-name{font-size:18px}
.mnav-head .brand-mark,
.mnav-head .custom-logo{height:32px;width:auto;flex:none}
@media(max-width:400px){
  .mnav-brand .brand-name{font-size:16px}
  .mnav-head{padding:16px 18px}
}