/* ===== HOME PLUS — store styles ===== */
:root{
  --ink:#101109;
  --ink-2:#1B1D14;
  --lime:#C1D128;
  --lime-deep:#7E8B10;
  --paper:#FBFBF7;
  --card:#FFFFFF;
  --slate:#5C5F52;
  --line:#E3E4DA;
  --line-dk:rgba(255,255,255,.10);
  --gold:#C9A84C;
  --gold-deep:#8A6E22;
  --gold-soft:#FBF6E8;
  --ok:#2E7D32;
  --warn:#B26A00;
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:60px;
  --disp:'Outfit',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono','SFMono-Regular',ui-monospace,monospace;
}
html[lang="ar"]{ --disp:'Tajawal','Outfit',system-ui,sans-serif; }

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);font-family:var(--disp);
  font-size:16px;line-height:1.55;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* ---------- brand bar ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--ink);color:#fff}
.nav-in{display:flex;align-items:center;gap:.85rem;height:var(--nav-h)}
.nav-logo{display:flex;align-items:center;gap:.6rem;margin-inline-end:auto;min-width:0}
.nav-logo img{width:38px;height:38px;flex-shrink:0}
.nav-logo b{font-weight:600;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
.nav-links{display:none;gap:1.4rem;margin-inline-end:1.2rem}
.nav-links a{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.72);transition:color .25s}
.nav-links a:hover,.nav-links a.on{color:var(--lime)}
.icon-btn{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;color:#fff;position:relative;transition:background .25s}
.icon-btn:hover{background:rgba(255,255,255,.09)}
.lang-btn{width:auto;padding-inline:.8rem;font-size:.82rem;font-weight:600;
  border:1px solid var(--line-dk);border-radius:999px;height:36px;letter-spacing:.02em}
.cart-count{position:absolute;top:3px;inset-inline-end:3px;min-width:19px;height:19px;padding:0 5px;
  background:var(--lime);color:var(--ink);border-radius:999px;font-family:var(--mono);
  font-size:.68rem;font-weight:500;display:none;align-items:center;justify-content:center;line-height:1}
.cart-count.show{display:flex}

/* ---------- SIGNATURE: retail / wholesale ---------- */
html[dir="rtl"] .mode-track[data-mode="wholesale"] .mode-thumb{transform:translateX(calc(-100% - .2rem))}
/* house-bracket, echoing the logo mark */

/* ---------- delivery strip ---------- */
.strip{background:var(--lime);color:var(--ink);text-align:center;
  font-size:.8rem;font-weight:600;padding-block:.5rem;letter-spacing:.01em}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#fff;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1fr;gap:1.6rem;padding-block:2.6rem 0}
.hero h1{font-size:clamp(2.1rem,7.5vw,3.4rem);font-weight:600;line-height:1.05;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero p{color:rgba(255,255,255,.68);margin-block:.9rem 1.5rem;max-width:44ch;font-size:1.02rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem}
.hero-shot{position:relative;margin-inline:-1rem;margin-block-start:.5rem}
.hero-shot img{width:100%;height:300px;object-fit:cover}
.hero-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,17,9,.85),transparent 55%)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:50px;padding:0 1.4rem;border-radius:11px;font-size:.92rem;font-weight:600;
  transition:transform .2s var(--ease),background .25s,border-color .25s}
.btn:active{transform:scale(.98)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:#CEDD45}
.btn-line{border:1.5px solid rgba(255,255,255,.28);color:#fff}
.btn-line:hover{border-color:var(--lime);color:var(--lime)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#23261A}
.btn-wa{background:#25D366;color:#0A2E17}
.btn-wa:hover{background:#31E273}
.btn-block{width:100%}
.btn[disabled]{opacity:.42;pointer-events:none}

/* ---------- filter bar ---------- */
.tools{position:sticky;top:calc(var(--nav-h) + 56px);z-index:30;background:var(--paper);
  padding-block:.85rem;border-block-end:1px solid var(--line)}
.tools-in{display:grid;grid-template-columns:1fr;gap:.6rem}
.search{position:relative}
.search svg{position:absolute;inset-inline-start:.9rem;top:50%;transform:translateY(-50%);color:var(--slate)}
.search input{width:100%;height:48px;padding-inline:2.6rem .9rem;border:1.5px solid var(--line);
  border-radius:11px;background:var(--card);font-size:.95rem}
.search input:focus{border-color:var(--lime-deep);outline:none}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.sel{position:relative}
.sel select{width:100%;height:48px;padding-inline:.9rem 2.2rem;border:1.5px solid var(--line);
  border-radius:11px;background:var(--card);appearance:none;font-size:.9rem;font-weight:500}
.sel::after{content:"";position:absolute;inset-inline-end:1rem;top:50%;width:8px;height:8px;
  border-inline-end:2px solid var(--slate);border-block-end:2px solid var(--slate);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* ---------- sections ---------- */
.sec{padding-block:2.2rem}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-block-end:1.1rem}
.sec-head h2{font-size:1.32rem;font-weight:600;letter-spacing:-.02em}
.sec-head .count{font-family:var(--mono);font-size:.78rem;color:var(--slate)}

/* ---------- category chips ---------- */
.cats{display:flex;gap:.55rem;overflow-x:auto;padding-block-end:.3rem;
  scrollbar-width:none;-ms-overflow-style:none}
.cats::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:.6rem 1.05rem;border:1.5px solid var(--line);border-radius:999px;
  background:var(--card);font-size:.86rem;font-weight:500;white-space:nowrap;transition:.25s var(--ease)}
.chip:hover{border-color:var(--slate)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.card:hover{border-color:var(--slate);transform:translateY(-3px)}
.card-img{position:relative;aspect-ratio:1;background:#F3F3EE;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card-img img{transform:scale(1.04)}
.badges{position:absolute;top:.55rem;inset-inline-start:.55rem;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
.badge{font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:.25rem .5rem;border-radius:5px;background:var(--lime);color:var(--ink)}
.badge.b-new{background:var(--ink);color:var(--lime)}
.badge.b-offer{background:#D64545;color:#fff}
.badge.b-soon{background:#fff;color:var(--warn);border:1px solid var(--warn)}
.badge.b-out{background:#fff;color:var(--slate);border:1px solid var(--line)}
.card-body{padding:.85rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.card-code{font-family:var(--mono);font-size:.68rem;color:var(--slate);letter-spacing:.03em}
.card-name{font-size:.95rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.card-desc{font-size:.8rem;color:var(--slate);line-height:1.5;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{margin-block-start:auto;display:flex;flex-direction:column;gap:.55rem}

/* price — bracketed, the signature carries through */
.price-row{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.price{font-family:var(--mono);font-size:1.15rem;font-weight:500;letter-spacing:-.02em}
.price-was{font-family:var(--mono);font-size:.82rem;color:var(--slate);text-decoration:line-through}
.price-note{font-family:var(--mono);font-size:.68rem;color:var(--lime-deep);font-weight:500}
.price-none{font-size:.82rem;color:var(--slate);font-weight:500}

/* qty + add */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:9px;overflow:hidden}
.qty button{width:36px;height:38px;font-size:1.15rem;font-weight:500;color:var(--slate);transition:background .2s}
.qty button:hover{background:#F1F1EA}
.qty input{width:38px;height:38px;text-align:center;border:none;font-family:var(--mono);
  font-size:.88rem;background:none;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.add-row{display:flex;gap:.45rem}
.add{flex:1;min-height:38px;border-radius:9px;background:var(--ink);color:#fff;
  font-size:.82rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:.35rem;
  transition:background .25s}
.add:hover{background:var(--lime);color:var(--ink)}
.add[disabled]{background:#EDEDE6;color:var(--slate);pointer-events:none}

.empty{text-align:center;padding:3rem 1rem;color:var(--slate)}
.empty b{display:block;font-size:1.05rem;color:var(--ink);margin-block-end:.4rem}

/* ---------- wholesale panel ---------- */
.wholesale{background:var(--ink);color:#fff;border-radius:16px;padding:1.8rem 1.3rem;margin-block:1rem}
.wholesale h2{font-size:1.45rem;font-weight:600;letter-spacing:-.02em;margin-block-end:.6rem}
.wholesale h2 em{font-style:normal;color:var(--lime)}
.wholesale p{color:rgba(255,255,255,.68);font-size:.92rem;margin-block-end:1.2rem;max-width:52ch}
.wl-list{display:grid;gap:.6rem;margin-block-end:1.4rem}
.wl-list li{list-style:none;display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;
  color:rgba(255,255,255,.86)}
.wl-list svg{flex-shrink:0;color:var(--lime);margin-block-start:3px}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:.7rem}
.c-card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:1.1rem;
  display:flex;align-items:center;gap:.9rem;transition:border-color .3s}
.c-card:hover{border-color:var(--lime-deep)}
.c-ic{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:#F1F3E2;
  display:flex;align-items:center;justify-content:center;color:var(--lime-deep)}
.c-lb{font-size:.72rem;color:var(--slate);font-weight:500}
.c-vl{font-weight:600;font-size:.95rem;margin-block-start:.1rem}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.62);margin-block-start:2rem;padding-block:2.4rem 2rem}
.foot-top{display:grid;gap:1.6rem;padding-block-end:1.6rem;border-block-end:1px solid var(--line-dk)}
.foot-logo{display:flex;align-items:center;gap:.7rem;color:#fff}
.foot-logo img{width:44px;height:44px}
.foot-logo b{font-size:1.05rem;font-weight:600}
.foot-part{font-family:var(--mono);font-size:.72rem;color:var(--lime-deep);letter-spacing:.06em;
  margin-block-start:.9rem;text-transform:uppercase}
.foot-tag{font-size:.95rem;color:#fff;font-weight:500;margin-block-start:.5rem;max-width:30ch}
.foot-line{font-size:.85rem;margin-block-start:.4rem;max-width:32ch;line-height:1.6}
.foot h4{color:#fff;font-size:.82rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;margin-block-end:.8rem}
.foot a{display:block;font-size:.88rem;padding-block:.3rem;transition:color .25s}
.foot a:hover{color:var(--lime)}
.foot-bot{padding-block-start:1.4rem;font-size:.78rem;display:flex;flex-wrap:wrap;
  gap:.5rem 1.2rem;justify-content:space-between}
.foot-bot a{display:inline}

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(16,17,9,.55);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s,visibility 0s linear .3s}
.scrim.open{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:51;width:min(460px,100%);
  background:var(--paper);display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  transform:translateX(100%);visibility:hidden;
  transition:transform .38s var(--ease),visibility 0s linear .38s}
/* :not(.open) keeps the RTL start position from outranking the open state.
   `html[dir="rtl"] .drawer` is (0,2,1) and beat `.drawer.open` (0,2,0), so in
   Arabic the drawer became visible but stayed parked off-screen. */
html[dir="rtl"] .drawer:not(.open){transform:translateX(-100%)}
.drawer.open,
html[dir="rtl"] .drawer.open{transform:none;visibility:visible;transition-delay:0s}
.dr-head{display:flex;align-items:center;gap:.8rem;padding:1rem;background:var(--ink);color:#fff;flex-shrink:0}
.dr-head h2{font-size:1.05rem;font-weight:600;margin-inline-end:auto}
/* The item list used to live in its own scroll box, which collapsed to a
   sliver once the fees, payment chooser and button claimed their space —
   customers effectively saw one product at a time. The drawer now scrolls
   as a whole; only the header and the action bar are pinned. */
.dr-body{flex:1 0 auto;padding:1rem;overflow:visible}
.dr-foot{flex-shrink:0;padding:1rem;background:var(--card);border-block-start:1px solid var(--line)}

.ci{display:flex;gap:.75rem;padding-block:.85rem;border-block-end:1px solid var(--line)}
.ci:last-child{border-block-end:none}
.ci img{width:66px;height:66px;object-fit:cover;border-radius:9px;flex-shrink:0;background:#F3F3EE}
.ci-tx{flex:1;min-width:0}
.ci-name{font-size:.88rem;font-weight:600;line-height:1.3}
.ci-code{font-family:var(--mono);font-size:.68rem;color:var(--slate);margin-block-start:.1rem}
.ci-ctrl{display:flex;align-items:center;gap:.5rem;margin-block-start:.5rem}
.ci-price{font-family:var(--mono);font-size:.92rem;font-weight:500;margin-inline-start:auto;white-space:nowrap}
.ci-rm{color:var(--slate);font-size:.75rem;text-decoration:underline;padding:.2rem}
.ci-rm:hover{color:#D64545}

.totals{display:grid;gap:.4rem;margin-block-end:.9rem}
.tot-row{display:flex;justify-content:space-between;font-size:.88rem;color:var(--slate)}
.tot-row.grand{font-size:1.12rem;font-weight:700;color:var(--ink);padding-block-start:.5rem;
  border-block-start:1px solid var(--line)}
.tot-row.grand span:last-child{font-family:var(--mono)}
.tot-free{color:var(--lime-deep);font-weight:600}

/* checkout form */
.co{display:grid;gap:.7rem;margin-block-end:1rem}
.co-2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.fld label{display:block;font-size:.75rem;font-weight:600;color:var(--slate);margin-block-end:.3rem}
.fld input,.fld select,.fld textarea{width:100%;min-height:46px;padding:.6rem .8rem;
  border:1.5px solid var(--line);border-radius:10px;background:var(--card);font-size:.92rem}
.fld textarea{min-height:74px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--lime-deep);outline:none}
.fld.bad input,.fld.bad select{border-color:#D64545}
.pay{display:flex;align-items:center;gap:.7rem;background:#F1F3E2;border-radius:11px;
  padding:.8rem .9rem;margin-block-end:.9rem}
.pay b{font-size:.88rem;display:block}
.pay small{font-size:.76rem;color:var(--slate)}

/* ---------- product detail ---------- */
.pd{position:fixed;inset:0;z-index:52;background:var(--paper);overflow-y:auto;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .28s,visibility 0s linear .28s}
.pd.open{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.pd-close{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:.6rem;
  background:var(--ink);color:#fff;padding:.75rem 1rem;font-weight:600;font-size:.9rem;width:100%}
.pd-gal{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem;
  scrollbar-width:none}
.pd-gal::-webkit-scrollbar{display:none}
.pd-gal img{width:88%;flex-shrink:0;aspect-ratio:1;object-fit:cover;border-radius:14px;
  scroll-snap-align:center;background:#F3F3EE}
.pd-body{padding:0 1rem 2.5rem}
.pd-body h1{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-block:.4rem}
.pd-desc{color:var(--slate);font-size:.95rem;margin-block:.8rem 1.2rem}
.pd-meta{display:grid;gap:.55rem;padding:1rem;background:var(--card);border:1px solid var(--line);
  border-radius:13px;margin-block-end:1.2rem}
.pd-meta div{display:flex;justify-content:space-between;font-size:.86rem;gap:1rem}
.pd-meta dt{color:var(--slate)}
.pd-meta dd{font-weight:600;text-align:end}
.pd-buy{display:flex;gap:.6rem;align-items:center}

/* The hidden toast used to sit inside the viewport with no pointer-events rule,
   so an invisible bar captured taps across the bottom of every page. */
.toast{position:fixed;inset-block-end:5.4rem;inset-inline:1rem;z-index:60;background:var(--ink);
  color:#fff;padding:.9rem 1.1rem;border-radius:12px;font-size:.9rem;font-weight:500;
  display:flex;align-items:center;gap:.6rem;
  pointer-events:none;visibility:hidden;opacity:0;
  transform:translateY(24px);
  transition:transform .32s var(--ease),opacity .28s var(--ease),visibility 0s linear .3s}
.toast.show{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.toast svg{color:var(--lime);flex-shrink:0}
.toast-x{margin-inline-start:auto;pointer-events:auto;width:30px;height:30px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:rgba(255,255,255,.65);font-size:1.1rem;line-height:1}
.toast.show .toast-x{pointer-events:auto}
.toast-x:hover{color:#fff;background:rgba(255,255,255,.12)}


/* ---------- hero selling points ---------- */
.hero-pts{list-style:none;display:grid;gap:.5rem;margin-block:1.3rem 1.7rem}
.hero-pts li{display:flex;align-items:center;gap:.6rem;font-size:.93rem;color:rgba(255,255,255,.88)}
.hero-pts svg{flex-shrink:0;color:var(--lime)}
.hero p{color:rgba(255,255,255,.68);margin-block:.9rem 0;max-width:46ch;font-size:1.02rem}

/* ---------- gold: premium signalling only ---------- */
.badge.b-best{background:var(--lime-deep);color:#241C05}
.badge.b-offer{background:var(--lime-deep);color:#241C05}
.badge.b-limited{background:#fff;color:var(--lime-deep);border:1px solid var(--lime-deep)}
.badge.b-value{background:var(--ink);color:var(--lime-deep)}
.card.is-premium{border-color:#EADCB8}
.card.is-premium:hover{border-color:var(--lime-deep)}

/* ---------- rating ---------- */
.stars{display:flex;align-items:center;gap:.28rem}
.stars .s{display:inline-flex;gap:1px;color:var(--lime-deep)}
.stars small{font-family:var(--mono);font-size:.7rem;color:var(--slate)}

/* ---------- ships-free line on card ---------- */
.card-ship{display:flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;color:var(--lime-deep)}
.card-ship svg{flex-shrink:0}

/* ---------- category tiles with icons ---------- */
.cattiles{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.cattile{display:flex;align-items:center;gap:.8rem;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:.95rem;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.cattile:hover{border-color:var(--lime-deep);transform:translateY(-2px)}
.cattile .ci-ic{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:#F2F4E4;
  display:flex;align-items:center;justify-content:center;color:var(--lime-deep)}
.cattile b{font-size:.9rem;font-weight:600;line-height:1.25}
.cattile span{display:block;font-family:var(--mono);font-size:.68rem;color:var(--slate);margin-block-start:.1rem}
.chip .chip-ic{margin-inline-end:.35rem;vertical-align:-3px}

/* ---------- trust strip ---------- */
.trust{background:var(--ink);color:#fff;border-radius:18px;padding:2rem 1.3rem;position:relative;overflow:hidden}
.trust::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:70px;height:70px;
  border-block-start:3px solid var(--lime-deep);border-inline-start:3px solid var(--lime-deep);
  border-start-start-radius:18px;opacity:.55}
.trust h2{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;margin-block-end:.5rem;position:relative}
.trust h2 em{font-style:normal;color:var(--lime-deep)}
.trust > p{color:rgba(255,255,255,.66);font-size:.93rem;max-width:52ch;margin-block-end:1.6rem;position:relative}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;position:relative}
.trust-item{display:flex;gap:.7rem;align-items:flex-start}
.trust-item svg{flex-shrink:0;color:var(--lime-deep);margin-block-start:2px}
.trust-item b{display:block;font-size:.92rem;font-weight:600;line-height:1.3}
.trust-item span{display:block;font-size:.8rem;color:rgba(255,255,255,.6);margin-block-start:.15rem;line-height:1.45}

/* ---------- wholesale: price on request ---------- */
.price-ask{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:600;
  color:var(--lime-deep);letter-spacing:-.01em}
.price-ask::before{content:"";width:6px;height:6px;background:var(--lime-deep);border-radius:1px;
  transform:rotate(45deg);flex-shrink:0}
.add-ask{background:#25D366;color:#0A2E17}
.add-ask:hover{background:#31E273;color:#0A2E17}
.ws-intro{display:grid;gap:1rem;background:var(--ink);color:#fff;border-radius:16px;
  padding:1.4rem 1.3rem;border:1px solid rgba(201,168,76,.3);margin-block-end:.5rem}
.ws-intro .lock{width:42px;height:42px;border-radius:11px;flex-shrink:0;
  border:1px solid rgba(201,168,76,.45);display:flex;align-items:center;
  justify-content:center;color:var(--lime-deep)}
.ws-intro-tx b{display:block;font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.ws-intro-tx span{display:block;font-size:.88rem;color:rgba(255,255,255,.66);
  margin-block-start:.3rem;max-width:56ch;line-height:1.55}
body.is-wholesale .card-ship{color:var(--lime-deep)}

/* ---------- premium polish: motion & depth ---------- */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(14px);
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .rv.in{opacity:1;transform:none}
  .grid .card{opacity:0;transform:translateY(12px);
    transition:opacity .55s var(--ease),transform .55s var(--ease),
               border-color .3s var(--ease),box-shadow .4s var(--ease)}
  .grid .card.in{opacity:1;transform:none}
  .card-img img{opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .card-img img.ld{opacity:1}
}
.card:hover{border-color:var(--slate);transform:translateY(-4px);
  box-shadow:0 18px 34px -22px rgba(16,17,9,.32)}
.card.is-premium:hover{box-shadow:0 18px 34px -22px rgba(201,168,76,.4)}
.btn,.add,.chip,.cattile{will-change:transform}

/* ---------- premium polish: spacing rhythm ---------- */
.sec{padding-block:2.8rem}
.sec-head{margin-block-end:1.3rem}
.sec-head h2{font-size:1.42rem;letter-spacing:-.025em}
.card-body{padding:.95rem .9rem 1rem;gap:.45rem}
.card-name{font-size:.97rem;line-height:1.32}
.grid{gap:.9rem}
.hero-in{padding-block:2.8rem 0}
.strip{padding-block:.62rem;letter-spacing:.005em}

/* ---------- related products ---------- */
.related{margin-block-start:2rem}
.related h2{font-size:1.1rem;font-weight:600;margin-block-end:.9rem}
.rel-scroll{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}

/* ---------- floating WhatsApp ---------- */
.fab{position:fixed;inset-block-end:1.1rem;inset-inline-end:1.1rem;z-index:45;
  display:flex;align-items:center;gap:.55rem;height:56px;padding:0 1.1rem 0 .95rem;
  background:#25D366;color:#0A2E17;border-radius:999px;font-weight:700;font-size:.88rem;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.45);
  transition:transform .3s var(--ease),opacity .3s}
.fab:hover{transform:translateY(-2px)}
.fab:active{transform:scale(.97)}
.fab svg{flex-shrink:0}
.fab.hide{opacity:0;pointer-events:none;transform:translateY(20px)}
@media(max-width:420px){.fab .fab-tx{display:none}.fab{padding:0;width:56px;justify-content:center}}

/* ---------- product page meta ---------- */
.pd-ship{display:flex;align-items:center;gap:.5rem;background:#F2F4E4;border-radius:11px;
  padding:.75rem .9rem;font-size:.85rem;font-weight:600;color:var(--lime-deep);margin-block-end:1rem}
.pd-ship svg{flex-shrink:0}
.stock-bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin-block-start:.4rem}
.stock-bar i{display:block;height:100%;border-radius:99px}
.stock-in i{width:100%;background:var(--ok)}
.stock-soon i{width:45%;background:var(--warn)}
.stock-out i{width:8%;background:#D64545}
.stock-limited i{width:22%;background:var(--lime-deep)}

/* ---------- established badge ---------- */
.est-badge{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--lime-deep);
  border:1px solid rgba(201,168,76,.35);border-radius:999px;padding:.36rem .8rem;
  margin-block-end:1.1rem}
.est-badge::before{content:"";width:5px;height:5px;background:var(--lime-deep);border-radius:50%}

/* ---------- trust numbers ---------- */
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;position:relative;
  padding-block:1.4rem;margin-block-end:1.6rem;
  border-block:1px solid rgba(255,255,255,.1)}
.num-i{text-align:center}
.num-i b{display:block;font-size:clamp(1.7rem,6vw,2.3rem);font-weight:600;color:var(--lime-deep);
  line-height:1;letter-spacing:-.03em}
.num-i span{display:block;font-size:.74rem;color:rgba(255,255,255,.6);margin-block-start:.4rem;
  letter-spacing:.03em}
.trust-cta{margin-block-start:1.8rem;position:relative}

/* ---------- product page assurance strip ---------- */
.assure{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-block:1rem 1.3rem}
.assure span{display:flex;align-items:center;gap:.5rem;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:.65rem .7rem;
  font-size:.79rem;font-weight:600;line-height:1.25}
.assure span svg{flex-shrink:0;color:var(--lime-deep)}
.assure span:nth-child(2) svg{color:var(--lime-deep)}
.assure span:nth-child(3) svg{color:var(--lime-deep)}

/* ---------- inline WhatsApp prompt ---------- */
.ask-link{display:flex;align-items:center;gap:.45rem;margin-block-start:.9rem;
  font-size:.84rem;font-weight:600;color:#128C4A;transition:color .25s}
.ask-link:hover{color:#0E6E3A}
.ask-link svg{flex-shrink:0}

/* ---------- final CTA ---------- */
.final{background:var(--ink);color:#fff;border-radius:18px;padding:2.4rem 1.4rem;text-align:center;
  position:relative;overflow:hidden}
.final::after{content:"";position:absolute;inset-block-end:-60px;inset-inline-end:-60px;
  width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,211,102,.16),transparent 70%)}
.final > *{position:relative}
.final-ic{width:60px;height:60px;margin:0 auto 1.2rem;border-radius:50%;background:rgba(37,211,102,.14);
  border:1px solid rgba(37,211,102,.35);display:flex;align-items:center;justify-content:center;color:#25D366}
.final h2{font-size:clamp(1.4rem,4.5vw,1.9rem);font-weight:600;letter-spacing:-.025em;line-height:1.2}
.final p{color:rgba(255,255,255,.68);font-size:.95rem;margin-block:.8rem 1.6rem;
  max-width:48ch;margin-inline:auto;line-height:1.65}
.final-note{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lime-deep);margin-block-start:1.4rem}

/* ---------- responsive ---------- */
@media(min-width:600px){
  .grid{grid-template-columns:repeat(3,1fr);gap:1rem}
  .tools-in{grid-template-columns:1fr auto;align-items:center}
  .filters{grid-template-columns:auto auto}
  .sel select{min-width:170px}
  .hero-shot img{height:380px}
  .contact-grid{grid-template-columns:1fr 1fr}
  .cattiles{grid-template-columns:repeat(3,1fr)}
  .assure{grid-template-columns:repeat(4,1fr)}
  .rel-scroll{grid-template-columns:repeat(3,1fr)}
  .co-2{gap:.8rem}
  .toast{inset-block-end:1.3rem;inset-inline:auto;inset-inline-start:1.5rem;max-width:380px}
}
@media(min-width:900px){
  .nav-links{display:flex}
  .grid{grid-template-columns:repeat(4,1fr)}
  .hero-in{grid-template-columns:minmax(0,.68fr) minmax(0,1fr);align-items:center;gap:3rem;padding-block:3.4rem}
  .hero-shot{margin:0;border-radius:18px;overflow:hidden}
  .hero-shot img{height:470px}
  .hero-shot::after{background:linear-gradient(to top,rgba(16,17,9,.35),transparent 50%)}
  .wholesale{padding:2.6rem 2.4rem}
  .cattiles{grid-template-columns:repeat(5,1fr)}
  .sec{padding-block:3.6rem}
  .grid{gap:1.15rem}
  .ws-intro{grid-template-columns:auto 1fr auto;align-items:center;gap:1.3rem;padding:1.6rem 1.8rem}
  .rel-scroll{grid-template-columns:repeat(4,1fr)}
  .trust{padding:2.8rem 2.6rem}
  .numbers{max-width:620px}
  .final{padding:3.2rem 2.6rem}
  .trust-grid{grid-template-columns:repeat(4,1fr);gap:1.6rem}
  .ws-gate{padding:3.2rem 2.6rem}
  .foot-top{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .pd-gal img{width:46%}
  .pd-body{max-width:760px;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- quantity stepper on cards ---------- */
.qty-card{display:flex;align-items:center;gap:.4rem;flex:1;
  border:1.5px solid var(--ink);border-radius:9px;overflow:hidden;min-height:38px;background:var(--ink)}
.qty-card button{width:38px;min-height:38px;flex-shrink:0;color:#fff;font-size:1.15rem;
  font-weight:500;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .2s}
.qty-card button:hover{background:rgba(255,255,255,.14)}
.qty-card button:disabled{opacity:.35;pointer-events:none}
.qty-card .n{flex:1;text-align:center;font-family:var(--mono);font-size:.92rem;font-weight:500;
  color:#fff;min-width:2ch;-moz-appearance:textfield;background:none;border:none;
  padding:0;height:38px}
.qty-card .n::-webkit-outer-spin-button,.qty-card .n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body.is-wholesale .qty-card{border-color:var(--lime-deep);background:var(--lime-deep)}
.moq-note{font-size:.68rem;color:var(--slate);margin-block-start:.3rem;text-align:center}

/* ---------- inline WhatsApp ask on each card ---------- */
.ask-inline{width:38px;min-height:38px;flex-shrink:0;border:1.5px solid var(--line);
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:#128C4A;transition:border-color .25s,background .25s}
.ask-inline:hover{border-color:#25D366;background:#F1FBF5}
.add-row{display:flex;gap:.45rem;align-items:stretch}

/* ---------- payment chooser ---------- */
.pay-block{margin-block:1rem .9rem}
.pay-h{font-size:.78rem;font-weight:600;color:var(--slate);margin-block-end:.55rem}
.pay-opt{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem .95rem;margin-block-end:.5rem;
  border:1.5px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;
  transition:border-color .2s,background .2s}
.pay-opt:hover{border-color:var(--slate)}
.pay-opt.on{border-color:var(--ink);background:#FBFBF6}
.pay-opt input{width:18px;height:18px;margin-block-start:.15rem;flex-shrink:0;accent-color:var(--ink)}
.pay-opt input:disabled{opacity:.4}
.pay-opt span{display:block;min-width:0}
.pay-opt b{display:block;font-size:.92rem;font-weight:600}
.pay-opt i{display:block;font-style:normal;font-size:.78rem;color:var(--slate);margin-block-start:.15rem;
  line-height:1.45}
.pay-opt:has(input:disabled){opacity:.62}
.pay-opt:has(input:disabled) b{color:var(--slate)}
.pay-opt.ok i{color:#2E7D32}

/* ============================================================
   NAVIGATION + MEMBERSHIP PANEL
   ============================================================ */
.acct-btn{gap:.4rem;padding-inline:.7rem;width:auto}
.acct-btn span{font-size:.8rem;font-weight:600;display:none}
@media(min-width:900px){.acct-btn span{display:inline}}
.burger{flex-direction:column;gap:4px;display:flex}
.burger i{display:block;width:17px;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .3s var(--ease),opacity .25s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
@media(min-width:900px){.burger{display:none}}

.mobnav{display:none;border-block-start:1px solid var(--line);background:#fff}
.mobnav.open{display:block}
.mobnav a{display:block;padding:.85rem 1.15rem;font-size:.92rem;font-weight:500;
  border-block-end:1px solid var(--line)}
.mobnav a:last-child{border-block-end:none}
.mobnav a:active{background:var(--paper)}
@media(min-width:900px){.mobnav{display:none!important}}

/* ---------- membership panel ---------- */
.memb{background:linear-gradient(160deg,#16180F 0%,#0C0D08 100%);color:#fff;
  padding-block:2.6rem;position:relative;overflow:hidden}
.memb::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(58deg,rgba(201,168,76,.05) 0 1px,transparent 1px 8px)}
.memb-in{position:relative;z-index:1;display:grid;gap:1.8rem;align-items:center}
.memb-kick{display:inline-block;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-block-end:.7rem}
.memb h2{font-size:clamp(1.5rem,5vw,2.1rem);font-weight:800;line-height:1.25;letter-spacing:-.01em}
.memb p{color:rgba(255,255,255,.62);font-size:.95rem;margin-block:.7rem 1.1rem;max-width:46ch}
.memb-list{list-style:none;display:grid;gap:.55rem;margin-block-end:1.4rem}
.memb-list li{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;line-height:1.55}
.memb-list svg{color:var(--lime);flex-shrink:0;margin-block-start:.18rem}
.memb .btn-gold{background:var(--gold);color:#241C05;display:inline-flex;width:auto;
  min-height:50px;padding-inline:1.5rem;border-radius:11px;font-weight:700}
.memb .btn-gold:hover{background:#D9BC6A}

.memb-card{background:linear-gradient(145deg,#232619,#0A0B06);border-radius:16px;
  padding:1.3rem 1.35rem;aspect-ratio:1.586;max-width:330px;width:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 22px 44px -24px rgba(0,0,0,.7);border:1px solid rgba(201,168,76,.22)}
.memb-card .mc-brand{font-size:1rem;font-weight:800;line-height:1.15}
.memb-card .mc-brand span{display:block;font-size:.55rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-block-start:.2rem}
.memb-card .mc-num{font-family:var(--mono);font-size:1.9rem;letter-spacing:.28em;color:var(--gold-lt);
  direction:ltr}
.memb-card .mc-foot{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
@media(min-width:820px){
  .memb-in{grid-template-columns:1.25fr .75fr;gap:3rem}
  .memb{padding-block:3.6rem}
}

/* scroll anchors that clear the sticky header */
.anchor{display:block;position:relative;top:-84px;visibility:hidden;height:0}

/* ---------- fee breakdown ---------- */
.fee-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-block:.4rem;font-size:.9rem}
.fee-row span{color:var(--slate)}
.fee-row b{font-weight:600}
.fee-row b.free{color:#2E7D32}
.fee-row.total{border-block-start:1px solid var(--line);margin-block-start:.35rem;
  padding-block-start:.7rem;font-size:1.02rem}
.fee-row.total span{color:var(--ink);font-weight:600}
.fee-row.total b{font-size:1.15rem}
.fee-note{font-size:.79rem;color:var(--slate);margin-block-start:.5rem;line-height:1.5}
.fee-note.good{color:#2E7D32;font-weight:600}
.fee-join{display:inline-block;margin-block-start:.5rem;font-size:.8rem;font-weight:600;
  color:var(--lime-deep);text-decoration:underline}

.memb-free{font-size:.82rem;font-weight:600;color:var(--gold-lt);
  background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.28);
  border-radius:9px;padding:.6rem .85rem;margin-block-end:1.3rem;line-height:1.55}

/* ---------- wallet at checkout ---------- */
.wal-pay{border-block-start:1px solid var(--line);margin-block-start:.5rem;padding-block-start:.7rem}
.wal-toggle{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.wal-toggle input{width:18px;height:18px;margin-block-start:.15rem;flex-shrink:0;accent-color:var(--ink)}
.wal-toggle b{display:block;font-size:.88rem;font-weight:600}
.wal-toggle i{display:block;font-style:normal;font-size:.78rem;color:var(--slate);margin-block-start:.1rem}
.wal-amt{display:flex;gap:.45rem;align-items:center;margin-block-start:.6rem}
.wal-amt label{font-size:.78rem;color:var(--slate);flex-shrink:0}
.wal-amt input{flex:1;min-width:0;min-height:40px;padding:.4rem .6rem;border:1.5px solid var(--line);
  border-radius:9px;font-family:var(--mono);font-size:.9rem}
.wal-amt button{flex-shrink:0;min-height:40px;padding:0 .7rem;border:1.5px solid var(--line);
  border-radius:9px;font-size:.76rem;font-weight:600;background:#fff}
.wal-amt button:hover{border-color:var(--slate)}

.mbadge{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--ink);color:var(--lime);
  border-radius:5px;padding:.16rem .4rem;margin-inline-start:.35rem;vertical-align:middle}

/* ---------- checkout: full list, readable rows, pinned action ---------- */
.dr-head{position:sticky;top:0;z-index:3;background:var(--paper);
  box-shadow:0 1px 0 var(--line)}
.dr-foot{position:sticky;bottom:0;z-index:3;background:var(--paper);
  border-block-start:1px solid var(--line);padding:1rem;
  box-shadow:0 -8px 20px -14px rgba(16,17,9,.22)}

.ci{display:grid;grid-template-columns:64px 1fr;gap:.8rem;align-items:start;
  padding-block:.9rem;border-block-end:1px solid var(--line)}
.ci img{width:64px;height:64px;object-fit:contain;border-radius:10px;
  background:#F3F3EE;padding:.3rem}
.ci-tx{min-width:0;display:grid;gap:.35rem}
.ci-name{font-size:.9rem;font-weight:600;line-height:1.35}
.ci-code{font-family:var(--mono);font-size:.7rem;color:var(--slate)}
.ci-line{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ci-unit{font-size:.78rem;color:var(--slate)}
.ci-sub{margin-inline-start:auto;font-weight:700;font-size:.95rem;white-space:nowrap}
.ci-rm{font-size:.74rem;color:var(--slate);text-decoration:underline;padding-block:.2rem}
.ci-rm:hover{color:var(--red)}
.qty-mini{display:inline-flex;align-items:center;border:1.5px solid var(--line);
  border-radius:9px;overflow:hidden;background:#fff}
.qty-mini button{width:32px;height:32px;font-size:1.05rem;line-height:1;
  display:flex;align-items:center;justify-content:center}
.qty-mini button:hover{background:#F3F3EE}
.qty-mini .n{width:34px;text-align:center;font-family:var(--mono);font-size:.85rem;
  border:none;background:none;height:32px;-moz-appearance:textfield}
.qty-mini .n::-webkit-outer-spin-button,.qty-mini .n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

@media(min-width:520px){
  .ci{grid-template-columns:76px 1fr}
  .ci img{width:76px;height:76px}
}

/* ---------- wholesale bar (replaces the big toggle) ---------- */

/* ---------- currency toggle (header, one for the whole site) ---------- */
.cur-toggle{display:inline-flex;background:#F1F1EA;border-radius:999px;padding:2px;flex-shrink:0}
.cur-toggle button{min-height:32px;padding:0 .6rem;border-radius:999px;font-size:.74rem;
  font-weight:700;color:var(--slate);transition:background .2s,color .2s;white-space:nowrap}
.cur-toggle button.on{background:var(--ink);color:#fff}
.cur-toggle[hidden]{display:none}
.strip-rate{opacity:.72;font-size:.78em;margin-inline-start:.6rem}
@media(max-width:400px){
  .cur-toggle button{padding:0 .45rem;font-size:.7rem}
  .strip-rate{display:block;margin-inline-start:0;margin-block-start:.15rem}
}

/* ============================================================
   VISUAL REFRESH — appearance only.
   No markup, no class names, no logic touched. Every rule below
   overrides an earlier one by cascade order alone, so reverting
   means deleting this block.
   ============================================================ */
:root{
  /* Warmer paper and a deeper ink. The old near-black on near-white
     read as a spreadsheet; this reads as a shop. */
  --paper:#F6F3EC;
  --card:#FFFFFF;
  --ink:#14150E;
  --ink-2:#22241A;
  --slate:#6A6C5E;
  --line:#E6E1D6;
  --lime:#C6D42E;
  --lime-deep:#6F7C0C;
  --gold:#C29A3F;
  --gold-deep:#7E6316;
  --gold-soft:#FAF4E6;
  --clay:#B4552E;          /* offers, urgency */
  --sage:#4A6B4E;          /* in stock, positive */
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(20,21,14,.05);
  --shadow-md:0 10px 24px -16px rgba(20,21,14,.28);
  --shadow-lg:0 26px 50px -28px rgba(20,21,14,.42);
}

body{background:var(--paper);letter-spacing:.002em}

/* ---------- header: quieter, with a hairline instead of a slab ---------- */
.nav{background:rgba(246,243,236,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-block-end:1px solid rgba(20,21,14,.07);box-shadow:none}
.nav-in{gap:.55rem}
.nav-links a{font-weight:500;letter-spacing:.01em;position:relative}
.nav-links a::after{content:"";position:absolute;inset-block-end:-3px;inset-inline-start:0;
  width:0;height:2px;background:var(--lime-deep);border-radius:2px;transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.icon-btn{border-radius:11px;transition:background .2s,transform .2s var(--ease)}
.icon-btn:hover{background:rgba(20,21,14,.05)}
.icon-btn:active{transform:scale(.94)}

/* ---------- the delivery strip: a whisper, not a shout ---------- */
.strip{background:var(--ink);color:rgba(255,255,255,.82);font-size:.78rem;
  letter-spacing:.02em;padding-block:.55rem}

/* ---------- hero ---------- */
.hero{background:
    radial-gradient(90% 70% at 82% 8%, rgba(198,212,46,.14), transparent 62%),
    radial-gradient(70% 60% at 6% 92%, rgba(194,154,63,.12), transparent 58%),
    linear-gradient(168deg,#FBF9F3 0%,#F2EEE3 100%)}
.hero h1{letter-spacing:-.028em;line-height:1.06}
html[lang="ar"] .hero h1{letter-spacing:0;line-height:1.24}
.hero .sub{color:var(--slate);line-height:1.72}

/* ---------- product cards: the main visual change ---------- */
.card{background:var(--card);border:1px solid transparent;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(20,21,14,.07)}
.card-media{background:linear-gradient(170deg,#FCFAF5,#F1ECE1);aspect-ratio:1/1;
  padding:1.1rem;position:relative}
.card-media::after{content:"";position:absolute;inset-inline:24%;inset-block-end:8%;
  height:14px;border-radius:50%;filter:blur(8px);pointer-events:none;
  background:radial-gradient(ellipse,rgba(20,21,14,.16),transparent 72%)}
.card-media img{position:relative;z-index:1;mix-blend-mode:multiply;
  transition:transform .55s var(--ease)}
.card:hover .card-media img{transform:scale(1.05)}
.card-body{padding:.95rem 1rem 1.05rem;gap:.42rem}
.card-name{font-size:.94rem;font-weight:600;line-height:1.4;letter-spacing:-.005em}
.card-code{font-family:var(--mono);font-size:.66rem;color:var(--slate);opacity:.8}

/* price hierarchy: the number people actually pay is the loudest thing */
.price{font-size:1.22rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.was{font-size:.82rem;color:var(--slate);text-decoration:line-through;opacity:.62;
  margin-inline-start:.35rem}

/* badges ---------------------------------------------------- */
.badge{border-radius:999px;font-size:.6rem;font-weight:700;letter-spacing:.08em;
  padding:.24rem .6rem;text-transform:uppercase;box-shadow:var(--shadow-sm)}
.badge-new{background:var(--ink);color:var(--lime)}
.badge-offer{background:var(--clay);color:#fff}
.badge-best{background:var(--lime-deep);color:#2A2003}
.badge-value{background:var(--sage);color:#fff}

/* buttons ---------------------------------------------------- */
.add{border-radius:11px;font-weight:600;letter-spacing:.01em;
  transition:transform .2s var(--ease),background .25s,box-shadow .25s}
.add:hover{box-shadow:0 8px 18px -10px rgba(20,21,14,.5)}
.add:active{transform:scale(.97)}
.ask-inline{border-radius:11px}

/* ---------- section headings ---------- */
.sec-head h2{font-size:clamp(1.3rem,4.4vw,1.85rem);font-weight:700;letter-spacing:-.022em}
html[lang="ar"] .sec-head h2{letter-spacing:0}
.sec-head{margin-block-end:1.15rem}
.count{font-size:.76rem;color:var(--slate);font-weight:500}

/* ---------- filters ---------- */
.tools{background:rgba(246,243,236,.94);-webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);border-block-end:1px solid rgba(20,21,14,.07)}
.search input,.sel select{border-radius:11px;border-color:var(--line);background:#fff}
.search input:focus,.sel select:focus{border-color:var(--lime-deep);
  box-shadow:0 0 0 3px rgba(111,124,12,.12)}
.chip{border-radius:999px;border-color:var(--line);background:#fff;font-weight:500}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- membership panel ---------- */
.memb{background:
    radial-gradient(100% 80% at 84% 6%, rgba(194,154,63,.24), transparent 58%),
    linear-gradient(158deg,#22241A 0%,#14150E 52%,#0A0B06 100%)}
.memb h2{letter-spacing:-.022em}
html[lang="ar"] .memb h2{letter-spacing:0}

/* ---------- cart ---------- */
.drawer{border-start-start-radius:var(--radius-lg);border-end-start-radius:var(--radius-lg)}
@media(max-width:520px){.drawer{border-radius:0}}
.dr-head{padding-block:1rem}
.ci img{background:linear-gradient(170deg,#FCFAF5,#F1ECE1);mix-blend-mode:multiply}
.fee-row.total b{letter-spacing:-.02em}

/* ---------- currency toggle ---------- */
.cur-toggle{background:rgba(20,21,14,.06)}
.cur-toggle button.on{background:var(--ink);box-shadow:var(--shadow-sm)}

/* ---------- footer ---------- */
.foot{background:var(--ink)}

/* ---------- rhythm ---------- */
.sec{padding-block:2.4rem}
.grid{gap:.85rem}
@media(min-width:640px){.grid{gap:1.1rem}}
@media(min-width:1000px){
  .sec{padding-block:3.4rem}
  .grid{gap:1.35rem}
}
@media(max-width:400px){
  .card-body{padding:.8rem .85rem .9rem}
  .price{font-size:1.12rem}
}

/* motion, honoured ------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .card,.card-media img,.add,.icon-btn{transition:none!important}
  .card:hover{transform:none}
}

/* ============================================================
   MEMBERSHIP CARD PREVIEW — matches the real card in /account/
   ============================================================ */
.memb-card{position:relative;overflow:hidden;aspect-ratio:1.586;max-width:340px;width:100%;
  border-radius:18px;padding:1.05rem 1.2rem;color:#2A2003;
  display:flex;flex-direction:column;border:none;
  background:
    linear-gradient(118deg,
      #C9A552 0%, #E8D293 14%, #F6EBC4 26%, #D8B96A 40%,
      #C39C42 54%, #E3CB8B 68%, #F2E4B6 80%, #CBA855 100%);
  box-shadow:
    0 26px 48px -24px rgba(74,56,10,.6),
    0 1px 0 rgba(255,255,255,.55) inset,
    0 0 0 1px rgba(120,92,20,.28) inset}
.memb-card .mcg{position:absolute;inset:0;pointer-events:none;opacity:.28;
  background:
    repeating-linear-gradient(63deg, rgba(120,92,20,.5) 0 .5px, transparent .5px 5px),
    repeating-linear-gradient(-63deg, rgba(120,92,20,.38) 0 .5px, transparent .5px 7px)}
.memb-card .mcs{position:absolute;inset-block-start:-60%;inset-inline-start:-25%;
  width:48%;height:230%;pointer-events:none;transform:rotate(17deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.memb-card .mcw{position:absolute;inset-inline:-10%;inset-block-end:-42%;height:88%;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.34), transparent 62%)}
.memb-card > div{position:relative;z-index:2}
.memb-card .mcb{font-size:1rem;font-weight:800;line-height:1.05;text-align:end;
  color:#2A2003;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.memb-card .mcb span{display:block;font-size:.48rem;font-weight:700;letter-spacing:.34em;
  color:#6B5312;margin-block-start:.24rem}
.memb-card .mcm{margin-block-start:auto;text-align:end}
.memb-card .mcn{font-size:.86rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#22190A;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.memb-card .mcnum{font-family:var(--mono);font-size:1.08rem;letter-spacing:.15em;direction:ltr;
  margin-block-start:.26rem;color:#1C1505;
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(90,68,12,.28)}
.memb-card .mcp{font-family:var(--mono);font-size:.66rem;color:#5C4710;margin-block-start:.2rem}
.memb-card .mcf{display:flex;align-items:flex-end;margin-block-start:.8rem}
.memb-card .mcchip{width:36px;height:27px;border-radius:5px;flex-shrink:0;
  background:linear-gradient(140deg,#FBF0CE,#B9963F 44%,#FFF8DF 68%,#9A7A2C);
  box-shadow:0 1px 2px rgba(90,68,12,.45) inset, 0 1px 0 rgba(255,255,255,.5)}
.memb-card .mcchip i{display:block;height:100%;
  background:linear-gradient(90deg,transparent 32%,rgba(90,68,12,.3) 32% 34%,transparent 34%),
             linear-gradient(0deg,transparent 44%,rgba(90,68,12,.3) 44% 46%,transparent 46%)}
.memb-card .mct{margin-inline-start:auto;font-size:.54rem;font-weight:800;letter-spacing:.2em;
  color:#5C4710;text-shadow:0 1px 0 rgba(255,255,255,.5);white-space:nowrap}
@media(max-width:360px){
  .memb-card .mcnum{font-size:.94rem;letter-spacing:.1em}
}

/* member pricing badges on cards */
.mbadges{display:flex;flex-wrap:wrap;gap:.28rem;margin-block-start:.3rem}
.mbadge{font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:5px;padding:.16rem .42rem;background:var(--lime-soft,#F3F8D8);
  color:#5A6608;border:1px solid rgba(175,197,15,.5)}
.mbadge.only{background:#FAF3E2;color:#7E6316;border-color:rgba(209,173,76,.55)}

/* ============================================================
   DESIGN SYSTEM — white retail surface, dark header, lime accent.
   Gold is reserved for membership. Overrides the earlier beige pass.
   ============================================================ */
:root{
  --paper:#F7F8F3;
  --card:#FFFFFF;
  --ink:#10130C;
  --ink-2:#1B1F14;
  --text:#171A14;
  --slate:#6E7368;
  --line:#E5E8DE;
  --lime:#C8DF18;
  --lime-deep:#AFC50F;
  --lime-soft:#F3F8D8;
  --gold:#D1AD4C;
  --gold-deep:#7E6316;
  --ok:#4D7C3F;
  --red:#B83A32;
  --radius:12px;
  --radius-lg:18px;
  --shadow-md:0 8px 28px rgba(16,19,12,.07);
  --shadow-lg:0 16px 40px rgba(16,19,12,.10);
}
.strip-rate{display:none}

body{background:#fff;color:var(--text)}

/* header: dark, high contrast, sticky */
.nav{background:var(--ink);color:#fff;border-block-end:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav-in{min-height:72px}
.nav-links a{color:rgba(255,255,255,.86);font-weight:500}
.nav-links a:hover{color:#fff}
.nav-links a::after{background:var(--lime)}
.nav .icon-btn{color:#fff}
.nav .icon-btn:hover{background:rgba(255,255,255,.10)}
.acct-btn span{color:rgba(255,255,255,.9)}
.cart-count{background:var(--lime);color:var(--ink);font-weight:700}
.cur-toggle{background:rgba(255,255,255,.12)}
.cur-toggle button{color:rgba(255,255,255,.72)}
.cur-toggle button.on{background:var(--lime);color:var(--ink)}
.burger i{background:#fff}
.mobnav{background:var(--ink-2);border-block-start:1px solid rgba(255,255,255,.08)}
.mobnav a{color:rgba(255,255,255,.9);border-block-end-color:rgba(255,255,255,.08)}
.mobnav a:active{background:rgba(255,255,255,.06)}

/* the thin strip under the header */
.strip{background:var(--lime-soft);color:#4A5410;font-weight:500}

/* surfaces */
.sec{background:#fff}
.sec:nth-of-type(even){background:var(--paper)}
.tools{background:rgba(255,255,255,.96);border-block-end:1px solid var(--line)}
.hero{background:linear-gradient(168deg,#FFFFFF 0%,var(--paper) 100%)}

/* cards: white, 18px, hairline, lift on hover */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:none}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--line);transform:translateY(-3px)}
.card-media{background:#FCFDFA;border-start-start-radius:var(--radius-lg);
  border-start-end-radius:var(--radius-lg)}
.card-media::after{background:radial-gradient(ellipse,rgba(16,19,12,.12),transparent 72%)}

/* buttons */
.add{background:var(--ink);color:#fff;border-radius:var(--radius);min-height:44px}
.add:hover{background:var(--ink-2)}
body.is-wholesale .add{background:var(--lime-deep)}
.btn-lime,.hero .btn-primary{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--lime-deep)}
.ask-inline{border-radius:var(--radius);border-color:var(--line)}

/* filters */
.chip.on{background:var(--ink);border-color:var(--ink)}
.search input:focus,.sel select:focus{border-color:var(--lime-deep);
  box-shadow:0 0 0 3px rgba(175,197,15,.16)}

/* gold stays with membership */
.memb{background:radial-gradient(100% 80% at 84% 6%, rgba(209,173,76,.22), transparent 58%),
  linear-gradient(158deg,#1B1F14 0%,#14160F 52%,#0A0C06 100%)}
.memb-kick{color:var(--gold)}

/* footer */
.foot{background:var(--ink)}

/* the badge is only meaningful once something is in the cart */
.cart-count{opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s var(--ease)}
.cart-count.has{opacity:1;transform:none}

/* ============================================================
   HOMEPAGE — final structure
   ============================================================ */

/* ---------- hero: full-bleed photograph, overlaid copy ---------- */
.hero{position:relative;isolation:isolate;min-height:clamp(430px,62vh,600px);
  display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:0;display:block}
.hero-bg img{width:100%;height:100%;object-fit:cover;
  /* keep faces and carts in frame as the viewport narrows */
  object-position:50% 42%}
/* Legible text over any photograph: a directional wash on the copy side plus a
   floor, so the headline never sits on a bright patch of the image. */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to left, rgba(16,19,12,.90) 0%, rgba(16,19,12,.72) 34%,
                    rgba(16,19,12,.30) 62%, rgba(16,19,12,.06) 100%),
    linear-gradient(to top, rgba(16,19,12,.55), transparent 42%)}
html[dir="ltr"] .hero-scrim{
  background:
    linear-gradient(to right, rgba(16,19,12,.90) 0%, rgba(16,19,12,.72) 34%,
                    rgba(16,19,12,.30) 62%, rgba(16,19,12,.06) 100%),
    linear-gradient(to top, rgba(16,19,12,.55), transparent 42%)}
/* no image supplied yet, or it failed: fall back to a clean dark panel */
.hero.no-shot .hero-bg{display:none}
.hero.no-shot{background:
  radial-gradient(80% 70% at 80% 10%, rgba(200,223,24,.16), transparent 60%),
  linear-gradient(158deg,#1B1F14,#10130C)}
.hero-in{position:relative;z-index:2;padding-block:2.6rem}
.hero-tx{max-width:min(560px,100%);color:#fff}
.hero-kick{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.28em;
  color:var(--lime);margin-block-end:.85rem}
.hero h1{font-size:clamp(2rem,6.2vw,3.4rem);font-weight:800;line-height:1.08;
  letter-spacing:-.03em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
html[lang="ar"] .hero h1{letter-spacing:0;line-height:1.28}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero-pts{list-style:none;display:grid;gap:.34rem;margin-block:1.1rem 1.5rem}
.hero-pts li{font-size:.95rem;color:rgba(255,255,255,.88);position:relative;
  padding-inline-start:1.35rem}
.hero-pts li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.52em;
  width:7px;height:7px;border-radius:50%;background:var(--lime)}
.hero-cta{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.btn-hero{min-height:52px;padding-inline:1.9rem;border-radius:12px;font-size:.98rem;
  font-weight:700;box-shadow:0 10px 26px -12px rgba(200,223,24,.6)}
.hero-link{color:#fff;font-size:.9rem;font-weight:600;text-decoration:underline;
  text-underline-offset:4px;opacity:.9}
.hero-link:hover{opacity:1}
.hero-shot{display:none}
@media(min-width:900px){
  .hero{min-height:560px}
  .hero-in{padding-block:3.4rem}
}
@media(max-width:700px){
  .hero{min-height:0;padding-block:0}
  .hero-bg img{object-position:50% 38%}
  .hero-scrim,html[dir="ltr"] .hero-scrim{
    background:linear-gradient(to top, rgba(16,19,12,.92) 0%, rgba(16,19,12,.72) 46%,
               rgba(16,19,12,.34) 100%)}
  .hero-in{padding-block:2.2rem 2.4rem}
  .hero-tx{max-width:100%}
}

/* ---------- members special deals ---------- */
.sec-member{background:linear-gradient(180deg,#FBF8EF,#FFFFFF)}
.sec-member .sec-head h2{color:#3E3007}
.member-flag{background:var(--gold);color:#2A2003;border-radius:999px;
  padding:.2rem .65rem;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase}

/* ---------- wholesale banner (replaces the old full panel) ---------- */
.ws-band{background:var(--ink);color:#fff}
.ws-band-in{display:flex;align-items:center;gap:1.4rem;padding-block:1.5rem;flex-wrap:wrap}
.ws-kick{display:block;font-size:.62rem;font-weight:700;letter-spacing:.24em;
  color:var(--lime);margin-block-end:.35rem}
.ws-band b{display:block;font-size:1.12rem;font-weight:700;letter-spacing:-.012em}
html[lang="ar"] .ws-band b{letter-spacing:0}
.ws-sub{display:block;font-size:.86rem;color:rgba(255,255,255,.62);margin-block-start:.2rem}
.btn-ghost-l{margin-inline-start:auto;border:1.5px solid rgba(255,255,255,.42);
  color:#fff;border-radius:12px;min-height:46px;padding-inline:1.3rem;
  font-weight:600;font-size:.88rem;display:inline-flex;align-items:center}
.btn-ghost-l:hover{background:rgba(255,255,255,.12);border-color:#fff}
@media(max-width:600px){.btn-ghost-l{margin-inline-start:0;width:100%;justify-content:center}}

/* ---------- category tiles ---------- */
.cattiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:.7rem}
.cattile{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1rem .75rem;display:grid;gap:.55rem;justify-items:center;text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .25s}
.cattile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--lime-deep)}
.cattile .ci-ic{width:46px;height:46px;border-radius:14px;background:var(--lime-soft);
  color:#5A6608;display:flex;align-items:center;justify-content:center}
.cattile b{display:block;font-size:.84rem;font-weight:600;line-height:1.3}
.cattile span span{display:block;font-size:.72rem;color:var(--slate);margin-block-start:.15rem}
@media(min-width:900px){.cattiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}}


.memb-instore{font-size:.83rem;line-height:1.7;color:rgba(255,255,255,.66);
  border-block-start:1px solid rgba(209,173,76,.28);padding-block-start:.85rem;
  margin-block:.9rem 1.2rem}

/* a contact card that is information, not a link */
.c-static{cursor:default}
.c-static:hover{border-color:var(--line);transform:none;box-shadow:none}

/* mini-cart: one clear way forward */
.btn-checkout{display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;font-size:.98rem;font-weight:700}
.btn-checkout svg{flex-shrink:0}
html[dir="rtl"] .btn-checkout svg{transform:scaleX(-1)}
.mini-note{font-size:.76rem;color:var(--slate);text-align:center;
  margin-block:.55rem .35rem;line-height:1.5}


/* ============================================================
   NARROW PHONES (390–430px, honoured up to 520): the header is one
   composition — brand + menu on the first row, the four controls
   spread across their own full row with ELASTIC gaps (auto margins),
   so intrinsic sizes are respected and nothing can ever touch, clip
   or squeeze at any width in the range. Desktop/tablet (≥521px)
   is untouched.
   ============================================================ */
@media(max-width:520px){
  .nav-in{flex-wrap:wrap;height:auto;padding-block:.5rem .65rem;
          row-gap:.7rem;column-gap:.7rem}
  /* row 1: brand fills, burger pinned at the far edge */
  .nav-logo{margin-inline-end:0;min-width:calc(100% - 58px)}
  .burger{order:1;margin-inline-start:auto}
  /* row 2: account starts the row, the rest distribute the leftover
     space evenly between them — airy at 390, calm at 430 */
  .acct-btn,.cur-toggle,.lang-btn,.nav-in [data-opencart]{order:2}
  .acct-btn{margin-inline-start:0}
  .cur-toggle,.lang-btn,.nav-in [data-opencart]{margin-inline-start:auto}
  .icon-btn{width:44px;height:44px}
  .acct-btn,.lang-btn{width:auto;padding-inline:.75rem}
  .cur-toggle{height:44px;align-self:center}
  /* the hero headline keeps its breathing room */
  .hero-in{padding-block:3rem 0}
}


/* Wholesale mode: the membership section remains visible as an
   advertisement, but its actionable control is withdrawn and the
   ruled retail-only sentence takes its place. Retail mode unchanged. */
.memb-ws-note{display:none;margin-top:1rem;font-weight:600;color:var(--gold,#C9A84C)}
.is-wholesale .memb .btn{display:none}
.is-wholesale .memb-ws-note{display:block}

/* ============================================================
   WHOLESALE MODE BAND — "I instantly know I'm shopping wholesale,
   and I instantly know how to return to retail."
   A named mode chip + one large return action. On phones the band
   itself becomes the sticky element (the tall two-row header steps
   aside), so the mode and the way back stay visible while scrolling.
   On desktop it docks under the sticky header.
   ============================================================ */
.mode-bar{background:var(--ink);color:#F6F3EC;
  border-block-end:2px solid var(--lime,#C8DF18)}
.mode-bar-in{display:flex;align-items:center;gap:.9rem;
  padding-block:.6rem;flex-wrap:wrap}
.mode-name{background:var(--lime,#C8DF18);color:#141410;font-weight:800;
  padding:.28rem .7rem;border-radius:999px;font-size:.85rem;
  letter-spacing:.02em;white-space:nowrap}
.mode-sub{opacity:.85;font-size:.85rem}
.mode-exit{margin-inline-start:auto;min-height:44px;padding:.5rem 1.05rem;
  border:0;border-radius:999px;background:#F6F3EC;color:#141410;
  font-weight:700;cursor:pointer}
.mode-exit:active{transform:scale(.98)}
@media(min-width:521px){
  .mode-bar{position:sticky;top:var(--nav-h);z-index:39}
}
@media(max-width:520px){
  .is-wholesale .nav{position:static}
  .mode-bar{position:sticky;top:0;z-index:45}
  .mode-sub{display:none}
  .mode-exit{flex:1 1 auto;text-align:center}
}

/* ============================================================
   PRODUCT VIDEO (optional, ~5 s) + FOOTER SOCIAL
   ============================================================ */
.card-img{position:relative}
.vplay{position:absolute;inset-inline-end:.5rem;inset-block-end:.5rem;
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(10,11,7,.72);color:#fff;
  font-size:.7rem;padding-inline-start:2px;pointer-events:none}
.pd-video{display:block;width:100%;max-height:340px;background:#000;
  border-radius:12px;object-fit:contain}
#pdGal .pd-video{margin-block-start:.35rem}
.c-socwrap{display:flex;flex-direction:column;gap:.8rem;padding-block:.2rem}
.c-soc{display:flex;align-items:center;gap:.7rem;color:inherit;
  text-decoration:none}
.c-soc .c-vl{text-decoration:underline;text-underline-offset:3px}
.c-soc:active{opacity:.75}
.fx-note{font-size:.78rem;color:var(--slate,#6b6b60);margin:.6rem auto 0}
.fx-star{opacity:.85;margin-block-end:.6rem}

/* ============================================================
   PRODUCT TRUST SIGNALS — quiet, compact, height-reserved
   ============================================================ */
.pd-trust{margin-block:.85rem .4rem;padding:.65rem .8rem;border:1px solid var(--line,#E4E4DA);
  border-radius:12px;display:flex;flex-direction:column;gap:.45rem}
.pt-row{display:flex;align-items:center;gap:.55rem;font-size:.8rem;
  color:var(--slate,#6b6b60);min-height:20px;line-height:1.5}
.pt-ic{display:flex;align-items:center;flex:0 0 auto;opacity:.85}
.pt-view{font-weight:600;color:var(--ink,#22231C)}

/* ---- member merchandising (0034) ---- */
.chip-deal{border-color:#c9a84c;background:linear-gradient(180deg,rgba(201,168,76,.18),rgba(201,168,76,.06))}
.chip-flash{border-color:#b23a1e}
.chip-deal.on{background:#c9a84c;color:#1d1a10}
.chip-flash.on{background:#b23a1e;border-color:#b23a1e;color:#fff}
.mbadge.flash{background:#b23a1e;color:#fff}
.mbadge.flash-ends{background:#fff3ea;color:#8a2c14;border:1px solid #f0c9b8}
.mbadge.lock{background:#f3efe4;color:#6b5a2a;border:1px dashed #c9a84c}
.sec-flash .sec-head h2{color:#8a2c14}
.deals-teaser{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;
  margin:0 0 1rem;padding:.8rem 1rem;border:1px dashed #c9a84c;border-radius:14px;
  background:linear-gradient(180deg,rgba(201,168,76,.10),rgba(201,168,76,.02));font-size:.9rem;line-height:1.6}
.deals-teaser .btn-sm{padding:.45rem .9rem;border-radius:999px;background:#c9a84c;color:#1d1a10;font-weight:800;text-decoration:none;font-size:.82rem}