/*
Theme Name: AGT ZAD Storefront
Theme URI: https://agtzad.com
Author: AGT ZAD
Description: Bilingual (English / Arabic) Bahrain storefront for Chamain, Vahdam and Filsinger's — 47 products priced in BHD, with a full-panel shop menu, filters, search and cart.
Version: 1.281.1044
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agtzad
*/


/* ============ tokens ============ */
:root{
  --ink:#15201A; --ink2:#55645B; --ink3:#8A968E;
  --cream:#FBF8F1; --paper:#FFFFFF; --wash:#F4F1E8; --tile:#F6F4ED;
  --line:#E7E2D6; --line2:#D8D2C2;
  --deep:#0F3D25; --green:#247846; --mid:#6DB56C; --light:#BDE3A8;
  --gold:#A8843C; --gold-soft:#C9A96B;
  --chamain:#BE7B31; --chamain-wash:#FBF1E3;
  --vahdam:#0E5643; --vahdam-wash:#EAF2EE;
  --fils:#A8402E; --fils-wash:#FBEDEA;
  --thalia:#35707B; --thalia-wash:#ECF5F6;
  --noodlna:#C8552B; --noodlna-wash:#FCEFE8;
  --radius:2px; --radius-lg:4px;
  --gut:34px; --sec:116px; --sec-sm:84px;
  --ff:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fd:'Cormorant Garamond',Georgia,serif;
  --shadow:0 1px 2px rgba(18,40,28,.04),0 8px 28px rgba(18,40,28,.07);
  --shadow-lg:0 2px 6px rgba(18,40,28,.06),0 26px 60px rgba(18,40,28,.13);
  --ease:cubic-bezier(.22,.61,.36,1);
  --hdr-h:84px; --top-h:38px;
  --pano:calc(100vw / 2.4); --pano-m:clamp(292px,76vw,352px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--ff);font-weight:400;color:var(--ink);
  background:var(--paper);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.14;letter-spacing:-.015em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
::selection{background:var(--light);color:var(--deep)}

/* arabic */
html[dir="rtl"] body{font-family:'Cairo',var(--ff);letter-spacing:0}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .btn,html[dir="rtl"] .navlink{letter-spacing:0}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{letter-spacing:0;line-height:1.35}
.ar-only{display:none}
html[dir="rtl"] .ar-only{display:block}
html[dir="rtl"] .en-only{display:none}

/* ============ primitives ============ */
.wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--gut)}
.wrap-n{max-width:1180px}
.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--gold)}
.sec{padding:var(--sec) 0}
.sec-sm{padding:var(--sec-sm) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:54px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(26px,3.4vw,40px);font-weight:400}
.sec-head p{color:var(--ink2);font-size:14.5px;max-width:52ch;margin-top:10px}
.link-more{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  border-bottom:1px solid var(--line2);padding-bottom:4px;transition:border-color .25s,color .25s}
.link-more:hover{border-color:var(--green);color:var(--green)}
.rule{height:1px;background:var(--line);border:0;margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 30px;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:500;
  border-radius:var(--radius);transition:.28s var(--ease);cursor:pointer;white-space:nowrap;border:1px solid transparent}
.btn-p{background:var(--deep);color:#fff}
.btn-p:hover{background:var(--green);transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,61,37,.24)}
.btn-o{border-color:var(--ink);color:var(--ink)}
.btn-o:hover{background:var(--ink);color:#fff}
.btn-g{border-color:rgba(255,255,255,.5);color:#fff}
.btn-g:hover{background:#fff;color:var(--deep);border-color:#fff}
.btn-sm{padding:11px 20px;font-size:10.5px}
.btn-full{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:100px;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.chip-best{background:var(--deep);color:#fff}
.chip-new{background:var(--gold);color:#fff}
.chip-org{background:var(--light);color:var(--deep)}
.chip-sale{background:var(--fils);color:#fff}
.chip-caf{background:#fff;color:var(--ink2);border:1px solid var(--line2)}

/* ============ top bar ============ */
.topbar{height:var(--top-h);background:var(--deep);color:#EDF5EF;display:flex;align-items:center;
  justify-content:center;overflow:hidden;position:relative;z-index:60}
.topbar-track{display:flex;align-items:center;height:100%}
.topbar-msg{font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  display:none;align-items:center;gap:9px}
.topbar-msg.on{display:flex;animation:fadeUp .5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.topbar-msg svg{width:13px;height:13px;stroke:var(--light);fill:none;stroke-width:1.6}

/* ============ header ============ */
.hdr{position:sticky;top:0;z-index:55;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s}
.hdr.stuck{box-shadow:0 1px 16px rgba(20,40,28,.07)}
.hdr-in{height:var(--hdr-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.hdr-l{display:flex;align-items:center;gap:6px}
.hdr-r{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.shopbtn{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:var(--radius);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--gold);
  transition:.22s}
.shopbtn:hover{color:var(--deep)}
.burger{width:20px;height:12px;position:relative;flex:0 0 20px}
.burger i{position:absolute;left:0;right:0;height:1.4px;background:currentColor;transition:.3s var(--ease)}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:5.3px}.burger i:nth-child(3){top:10.6px}
.shopbtn:hover .burger i:nth-child(2){transform:scaleX(.6);transform-origin:left}

.brandmark{display:flex;flex-direction:column;align-items:center;gap:4px;justify-self:center}
.brandmark img{height:54px;width:auto}
.brandmark .wm{font-size:19px;letter-spacing:.3em;font-weight:500;color:var(--deep);
  text-transform:uppercase;line-height:1;padding-inline-start:.3em}
.brandmark .tag{font-family:var(--fd);font-style:italic;font-size:13.5px;color:var(--gold);
  letter-spacing:.03em;line-height:1;white-space:nowrap}
html[dir="rtl"] .brandmark .tag{font-family:'Cairo';font-style:normal;font-size:12px;letter-spacing:0}
.brandlock{display:flex;align-items:center;gap:11px}

.iconbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  transition:background .22s;position:relative}
.iconbtn:hover{background:var(--wash)}
.iconbtn svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:4px;inset-inline-end:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--green);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;
  transform:scale(0);transition:transform .3s var(--ease)}
.badge.on{transform:scale(1)}
.langbtn,.curbtn{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:100px;
  font-size:11px;letter-spacing:.09em;font-weight:500;transition:background .22s;text-transform:uppercase}
.langbtn:hover,.curbtn:hover{background:var(--wash)}
.flag{width:17px;height:12px;border-radius:2px;overflow:hidden;flex:0 0 17px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* ============ mega menu ============ */
.mm{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none;overflow:hidden}
.mm.open{visibility:visible;pointer-events:auto}
.mm-scrim{position:absolute;inset:0;background:rgba(14,32,22,.34);opacity:0;transition:opacity .4s var(--ease)}
.mm.open .mm-scrim{opacity:1}
.mm-panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(1120px,94vw);background:var(--paper);
  display:flex;flex-direction:column;transform:translateX(-102%);transition:transform .48s var(--ease);
  box-shadow:24px 0 70px rgba(12,30,20,.17)}
html[dir="rtl"] .mm-panel{transform:translateX(102%)}
.mm.open .mm-panel{transform:none}
.mm-top{height:var(--hdr-h);display:flex;align-items:center;gap:13px;padding:0 30px;border-bottom:1px solid var(--line);flex:0 0 auto}
.mm-close{display:flex;align-items:center;gap:13px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--gold)}
.mm-close .x{width:20px;height:20px;position:relative;flex:0 0 20px}
.mm-close .x i{position:absolute;top:9px;left:0;right:0;height:1.4px;background:currentColor}
.mm-close .x i:first-child{transform:rotate(45deg)}
.mm-close .x i:last-child{transform:rotate(-45deg)}
.mm-body{flex:1;display:grid;grid-template-columns:330px 1fr;min-height:0}
.mm-rail{border-inline-end:1px solid var(--line);padding:38px 0 38px;overflow-y:auto}
.mm-rail li>button{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:15px 30px;font-size:15px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  color:var(--ink);transition:.22s;text-align:start;gap:12px}
html[dir="rtl"] .mm-rail li>button{font-size:14px;letter-spacing:0}
.mm-rail li>button .ar{display:none}
.mm-rail li>button:hover{color:var(--green)}
.mm-rail li.on>button{color:var(--gold)}
.mm-rail li>button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;opacity:0;transition:.22s}
html[dir="rtl"] .mm-rail li>button svg{transform:scaleX(-1)}
.mm-rail li.on>button svg{opacity:1}
.mm-rail .sep{height:1px;background:var(--line);margin:14px 30px}
.mm-sub{display:none}
.mm-stage{position:relative;overflow-y:auto}
.mm-pane{display:none;padding:44px 48px 48px;min-height:100%}
.mm-pane.on{display:block;animation:paneIn .42s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.mm-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 44px}
.mm-group h4{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;margin-bottom:15px}
.mm-group a{display:block;padding:7px 0;font-size:16px;color:var(--ink);transition:.2s;font-weight:300}
.mm-group a:hover{color:var(--green);transform:translateX(4px)}
html[dir="rtl"] .mm-group a:hover{transform:translateX(-4px)}
.mm-feature{margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:540px}
.mm-feature .lbl{grid-column:1/-1;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:-4px}
.mm-fcard{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.28s var(--ease);background:var(--paper)}
.mm-fcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.mm-fcard .im{position:relative;aspect-ratio:1;background:var(--tile);overflow:hidden}
.mm-fcard .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;box-sizing:border-box;padding:14px;mix-blend-mode:multiply}
.mm-fcard .tx{padding:12px 14px 15px}
.mm-fcard .tx b{display:block;font-size:13px;font-weight:500;line-height:1.3}
.mm-fcard .tx span{font-size:12px;color:var(--gold);font-weight:500}

/* brand panes */
.bp{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start}
.bp-lock{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.bp-dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:15px;
  font-weight:600;color:#fff;letter-spacing:.04em;flex:0 0 44px}
.bp h3{font-size:34px;font-weight:400;letter-spacing:.01em}
.bp .origin{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-top:2px}
.bp .story{font-family:var(--fd);font-size:19px;line-height:1.5;color:var(--ink2);max-width:46ch;margin:16px 0 26px;font-style:italic}
html[dir="rtl"] .bp .story{font-family:'Cairo';font-style:normal;font-size:15px}
.bp-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 30px}
.bp-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;
  font-size:15px;font-weight:300;border-bottom:1px solid var(--line);transition:.22s}
.bp-links a em{font-style:normal;font-size:11px;color:var(--ink3)}
.bp-links a:hover{padding-inline-start:7px}
.bp-side{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}
.bp-side .hd{padding:16px 18px;color:#fff}
.bp-side .hd b{display:block;font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:600}
.bp-side .hd span{font-size:12px;opacity:.82}
.bp-side .im{position:relative;aspect-ratio:1;background:var(--tile);overflow:hidden}
.bp-side .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;box-sizing:border-box;padding:20px;mix-blend-mode:multiply}
.bp-side .ft{padding:14px 18px 17px;background:#fff;color:var(--ink)}
.bp-side .ft b{display:block;font-size:14px;font-weight:500;line-height:1.3;margin-bottom:4px}
.bp-side .ft span{font-size:13px;color:var(--ink2)}
.bp-pattern{position:absolute;inset-block-start:0;inset-inline-end:0;width:280px;height:280px;opacity:.07;pointer-events:none}

/* ============ hero ============ */
.hero-tx{max-width:580px;position:relative;z-index:2}
.hero h1{font-size:clamp(34px,4.9vw,62px);font-weight:300;line-height:1.06;margin:20px 0 24px;letter-spacing:-.025em}
.hero h1 em{font-family:var(--fd);font-style:italic;font-weight:400;color:var(--green)}
html[dir="rtl"] .hero h1{font-weight:600;font-size:clamp(30px,4.4vw,52px)}
html[dir="rtl"] .hero h1 em{font-family:'Cairo';font-style:normal}
.hero p.lede{font-size:17px;line-height:1.62;color:var(--ink2);max-width:46ch}
.hero-cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.hero-trust{display:flex;gap:14px 32px;margin-top:50px;padding-top:30px;border-top:1px solid var(--line2);flex-wrap:wrap}
.hero-trust div{font-size:12px;color:var(--ink2);display:flex;align-items:center;gap:8px}
.hero-trust svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:1.5}
.hero-art{position:relative;min-width:0}
/* Product showcase — every bottle, tin and carton gets its own frame.
   Nothing is ever stacked on top of anything else: one large featured card
   and three separate tiles beneath it. Each shot is scaled and offset from
   its measured content box, so a loosely cropped packshot still reads at the
   same optical size as a tightly cropped one. */
.hero-show{position:relative;width:100%;max-width:538px;margin-inline:auto;display:grid;gap:12px}

/* ---- product showcase ----------------------------------------------------
   No card, no panel, no white: each packshot is cut out of its studio
   background in the browser and stands on the dusk sky itself, with its own
   reflection under it. Everything else is type. */
.hero-feat{position:relative;padding-inline:clamp(4px,1vw,14px)}
.hf-rule{position:absolute;inset-block-end:0;inset-inline:clamp(4px,1vw,14px);height:1px;
  background:rgba(255,255,255,.18)}
.hf-rule i{position:absolute;inset-block:-1px;inset-inline-start:0;width:0;height:2px;display:block;
  background:var(--accent,var(--light))}
.hf-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block-end:4px}
.hf-brand{display:inline-flex;align-items:center;gap:9px;min-width:0;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.hf-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[dir="rtl"] .hf-brand{letter-spacing:0}
.hf-dot{width:7px;height:7px;border-radius:50%;background:var(--accent,var(--light));flex:0 0 7px;
  box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.hf-badge{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--deep);background:var(--light);padding:5px 11px;border-radius:999px}
html[dir="rtl"] .hf-badge{letter-spacing:0}

.hf-stage{position:relative;display:grid;place-items:center;
  height:clamp(230px,26vw,330px);cursor:pointer}
/* A whisper of light where the product stands, so it is lit rather than pasted. */
.hf-stage::before{content:"";position:absolute;z-index:0;inset-inline:6%;inset-block-start:4%;height:88%;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 54%,rgba(203,224,255,.13),rgba(203,224,255,0) 70%)}
.hf-plate{position:relative;height:100%;aspect-ratio:1}
/* If a browser refuses to read the canvas we cannot cut the studio white away,
   so the product gets a plain light plate to sit on instead of a white block
   floating on the sky. */
.hf-plate.raw{background:#fff;border-radius:var(--radius-lg)}
.hf-plate.raw .hf-shot{mix-blend-mode:multiply}
.hf-plate.raw ~ .hf-base,.hf-plate.raw ~ .hf-gauge{opacity:0}
.hf-shot{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;translate:0 18px;
  transition:opacity .34s var(--ease),translate .6s var(--ease)}
.hf-shot.on{opacity:1;translate:none;transition-delay:.3s}
.hf-shot img{position:absolute;width:var(--w,88%);left:var(--l,6%);top:var(--t,6%);
  height:auto;max-width:none}
.hf-shot img:not(.mirror){filter:drop-shadow(0 22px 24px rgba(2,8,28,.5))}
/* The product's own reflection. --mb is where the product's base sits inside
   the frame, so flipping about that point lands the reflection exactly on it. */
.hf-shot .mirror:not([src]){display:none}
.hf-shot .mirror{transform-origin:50% var(--mb,90%);transform:scaleY(-1);
  opacity:.12;filter:blur(.9px);
  -webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--mb,90%) - var(--mfade,18%)),#000 var(--mb,90%));
  mask-image:linear-gradient(to bottom,transparent calc(var(--mb,90%) - var(--mfade,18%)),#000 var(--mb,90%))}
.hf-base{position:absolute;z-index:1;inset-inline:14%;inset-block-start:86%;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent,var(--light)) 26%,
    var(--accent,var(--light)) 74%,transparent);opacity:.5}
.hf-gauge{position:absolute;z-index:1;inset-inline-start:clamp(2px,1.2vw,16px);pointer-events:none;
  inset-block-start:calc(var(--ct,10%) + 1%);height:calc(85% - var(--ct,10%));
  display:flex;align-items:center;gap:7px;opacity:.55;transition:opacity .3s var(--ease)}
.hf-gauge i{position:relative;display:block;width:1px;height:100%;background:rgba(255,255,255,.4)}
.hf-gauge i::before,.hf-gauge i::after{content:"";position:absolute;inset-inline-start:-3px;
  width:7px;height:1px;background:rgba(255,255,255,.4)}
.hf-gauge i::before{inset-block-start:0}
.hf-gauge i::after{inset-block-end:0}
.hf-gauge span{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);writing-mode:vertical-rl;white-space:nowrap}
html[dir="rtl"] .hf-gauge span{letter-spacing:0}
.hf-stage:hover .hf-shot.on{translate:0 -10px}
.hf-stage:hover .hf-gauge{opacity:.9}

/* The type changes on the same beat as the product, not a half second before. */
@keyframes hfswap{0%{opacity:0;translate:0 6px}42%{opacity:0;translate:0 6px}100%{opacity:1;translate:none}}
.hero-feat.swap .hf-top,.hero-feat.swap .hf-meta{animation:hfswap .66s var(--ease)}
.hf-meta{padding-block:16px 18px}
.hf-name{font-size:clamp(17px,1.5vw,19px);font-weight:400;line-height:1.3;margin:0;color:#fff}
.hf-sub{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:6px}
.hf-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,.16)}
.hf-price{font-size:21px;font-weight:400;white-space:nowrap;unicode-bidi:isolate;color:#fff}
.hf-price s{font-size:13px;color:rgba(255,255,255,.45);margin-inline-start:8px}
.hf-go{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  padding:10px 18px;border:1px solid rgba(255,255,255,.4);border-radius:999px;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease)}
html[dir="rtl"] .hf-go{letter-spacing:0}
.hf-go svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;
  transition:transform .3s var(--ease)}
.hf-go:hover{background:#fff;color:var(--deep);border-color:#fff}
.hf-go:hover svg{transform:translateX(3px)}
html[dir="rtl"] .hf-go svg{transform:scaleX(-1)}
html[dir="rtl"] .hf-go:hover svg{transform:scaleX(-1) translateX(3px)}

/* three bare cut-outs, the one on show lit and underlined in its brand colour */
.hero-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,16px)}
.hth{position:relative;display:grid;place-items:center;height:92px;padding:6px 4px 14px;
  background:none;border:0;cursor:pointer;opacity:.5;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hth:hover{opacity:.85;transform:translateY(-3px)}
.hth.on{opacity:1}
.hth-plate{position:relative;height:100%;aspect-ratio:1}
.hth-im{position:absolute;inset:0}
.hth-im img{position:absolute;width:var(--w,88%);left:var(--l,6%);top:var(--t,6%);height:auto;max-width:none;
  filter:drop-shadow(0 8px 10px rgba(2,8,28,.5))}
.hth-bar{position:absolute;inset-block-end:0;inset-inline:18%;height:2px;opacity:0;
  background:var(--accent,var(--light));transition:opacity .3s var(--ease),inset-inline .3s var(--ease)}
.hth.on .hth-bar{opacity:1;inset-inline:4%}

.hero-note{display:flex;align-items:center;gap:11px;margin-top:6px}
.hero-note .k{width:30px;height:30px;border-radius:50%;background:var(--light);
  display:grid;place-items:center;flex:0 0 30px}
.hero-note .k svg{width:15px;height:15px;stroke:var(--deep);fill:none;stroke-width:1.6}
.hn-tx{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
.hn-tx b{font-size:13px;font-weight:500;color:var(--ink)}
.hn-tx i{font-style:normal;font-size:12.5px;color:var(--ink2)}
.leafbg{position:absolute;inset-block-start:-12%;inset-inline-start:-6%;width:520px;opacity:.055;pointer-events:none;color:var(--green)}

/* ============ Manama dusk hero ============
   The photograph's own composition becomes the layout. Its top quarter is an
   almost empty indigo sky, so the headline and the product card live there;
   the World Trade Centre and the lit waterfront sit on the horizon beneath
   them, with the still water below. The sky above the frame is continued in
   CSS from the photograph's own top row, so the panorama has no visible top
   edge — the page simply turns into the sky. */
.hero{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(90deg,#11225A 0%,#162A6D 12%,#1E327F 25%,#22388A 37%,
    #203586 50%,#1B2E7A 63%,#152768 75%,#102156 87%,#0A1A44 100%)}
html[dir="rtl"] .hero{background:linear-gradient(270deg,#11225A 0%,#162A6D 12%,#1E327F 25%,
    #22388A 37%,#203586 50%,#1B2E7A 63%,#152768 75%,#102156 87%,#0A1A44 100%)}
/* The sky deepens toward the top of the page, the way it does at dusk. */
.hero::before{content:"";position:absolute;z-index:0;inset-inline:0;inset-block-start:0;height:58%;
  pointer-events:none;background:linear-gradient(to bottom,rgba(3,7,28,.60),rgba(3,7,28,0))}

.hero-city{position:absolute;z-index:1;inset-inline:0;inset-block-end:0;aspect-ratio:2.4;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 clamp(40px,6vw,88px));
  mask-image:linear-gradient(to bottom,transparent 0,#000 clamp(40px,6vw,88px))}
.hero-city picture{display:block;position:absolute;inset:0}
/* Scaling from the top edge keeps the join with the CSS sky perfect while the
   waterfront drifts down out of frame. */
.hero-city img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 100%;transform-origin:50% 0;transform:scale(var(--pz,1));
  will-change:transform}
.hero-city-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,12,38,.34) 0%,rgba(6,12,38,.06) 26%,
    rgba(6,12,38,0) 52%,rgba(6,12,38,.18) 86%,rgba(15,61,37,.50) 100%)}
.hero-city-edge{display:none}
.hero-city-cap{position:absolute;z-index:4;inset-inline:0;inset-block-end:clamp(14px,2vw,26px);
  display:flex;align-items:center;gap:13px;color:#fff;pointer-events:none}
.hcc-rule{width:clamp(22px,3vw,46px);height:1px;background:rgba(255,255,255,.5);flex:0 0 auto}
.hcc-tx{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  text-shadow:0 1px 16px rgba(4,10,34,.75)}
html[dir="rtl"] .hcc-tx{letter-spacing:0;font-size:12.5px}

/* --- the hero's own furniture, read against a night sky --- */
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4.2vw,62px);align-items:center;
  padding-block:clamp(40px,4.8vw,70px) calc(var(--pano) * .47 + clamp(12px,1.6vw,26px))}
.hero .eyebrow{color:var(--gold-soft)}
.hero h1{color:#fff}
.hero h1 em{color:var(--light)}
.hero p.lede{color:rgba(255,255,255,.84)}
.hero-trust{border-top-color:rgba(255,255,255,.22)}
.hero-trust div{color:rgba(255,255,255,.78)}
.hero-trust svg{stroke:var(--light)}
.hero .btn-p{background:#fff;color:var(--deep)}
.hero .btn-p:hover{background:var(--light);color:var(--deep);box-shadow:0 10px 26px rgba(4,10,34,.4)}
.hero .btn-o{border-color:rgba(255,255,255,.5);color:#fff}
.hero .btn-o:hover{background:#fff;color:var(--deep);border-color:#fff}
.hero-note .k{background:rgba(255,255,255,.16)}
.hero-note .k svg{stroke:var(--light)}
.hn-tx b{color:#fff;text-shadow:0 1px 12px rgba(4,10,34,.85),0 0 3px rgba(4,10,34,.6)}
.hn-tx i{color:rgba(255,255,255,.8);text-shadow:0 1px 12px rgba(4,10,34,.85),0 0 3px rgba(4,10,34,.6)}
.hero-note .k{backdrop-filter:blur(2px)}
.leafbg{position:absolute;inset-block-start:-12%;inset-inline-start:-6%;width:520px;
  opacity:.05;pointer-events:none;color:#fff}

/* ============ marquee strip ============ */
.vstrip{background:var(--deep);color:#DCEBE0;padding:36px 0}
.vstrip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.vstrip-in>div{display:flex;align-items:center;gap:13px}
.vstrip svg{width:24px;height:24px;stroke:var(--light);fill:none;stroke-width:1.3;flex:0 0 24px}
.vstrip b{display:block;font-size:12.5px;font-weight:500;color:#fff;letter-spacing:.02em}
.vstrip span{font-size:11.5px;opacity:.72;line-height:1.4}

/* ============ product page ============ */
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:start;
  padding-block:clamp(24px,3vw,44px)}
.pd-im{position:relative;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--card);
  aspect-ratio:1;overflow:hidden}
.pd-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;box-sizing:border-box;
  padding:clamp(24px,4vw,56px);mix-blend-mode:multiply}
.pd-tx{padding-block-start:6px}
.pd-tx .pc-brand{display:inline-block;margin-bottom:10px;text-decoration:none}
.pd-tx .pc-brand:hover{color:var(--green)}
.pd-tx h1{font-size:clamp(25px,3vw,35px);font-weight:400;line-height:1.18;letter-spacing:-.01em;margin-bottom:8px}
.pd-tx .qv-specs a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.pd-tx .qv-specs a:hover{color:var(--green)}
.pd-trust{font-size:12px;color:var(--ink2);margin-top:14px;display:flex;align-items:center;gap:8px}
.pd-rel{padding-block:clamp(26px,4vw,56px)}
.pc-go{position:absolute;inset:0;z-index:2}
.pc-name a{color:inherit;text-decoration:none}
.pc-name a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.btn-eye{flex:0 0 auto;padding-inline:12px}
.btn-eye svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
@media(max-width:860px){.pd{grid-template-columns:1fr;gap:22px}}

/* ============ brand cards ============ */
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(min-width:981px) and (max-width:1240px){.brands{grid-template-columns:repeat(2,1fr);gap:26px}}
img[data-bg="color"]{mix-blend-mode:normal;background:#fff;border-radius:10px}
.pc-oos{position:absolute;z-index:3;inset-inline-start:0;inset-block-start:46%;padding:7px 14px;
  background:rgba(21,32,26,.86);color:#fff;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.pcard .btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[disabled]:hover{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.btn-p[disabled],.btn-p[disabled]:hover{background:var(--line2);border-color:var(--line2);color:#fff;box-shadow:none}
.bcard{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:452px;display:flex;
  flex-direction:column;padding:32px;transition:.36s var(--ease);border:1px solid var(--line)}
.bcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.bcard .bc-top{position:relative;z-index:2}
.bcard .bc-eye{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;opacity:.75}
.bcard h3{font-size:31px;font-weight:400;margin:9px 0 10px;letter-spacing:.01em}
.bcard p{font-size:13.5px;line-height:1.6;max-width:30ch;opacity:.85}
.bcard .bc-bot{position:relative;z-index:2;margin-top:auto;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.bcard .bc-n{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:.7}
.bcard .bc-go{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;font-weight:600;padding-bottom:5px;border-bottom:1.4px solid currentColor}
.bcard .bc-im{position:relative;align-self:flex-end;margin-top:20px;width:54%;max-width:200px;min-height:0;overflow:hidden;
  aspect-ratio:1;z-index:1;background:#fff;border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.17);transition:.5s var(--ease);transform:rotate(1.5deg)}
.bcard .bc-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;box-sizing:border-box;padding:9px}
.bcard:hover .bc-im{transform:translateY(-7px) rotate(-1.5deg)}
.bcard .bc-top{padding-inline-end:6px}
.bcard p{max-width:34ch}
.bc-chamain{background:linear-gradient(150deg,#FDF4E7,#F6E4CB);color:#5A3A15;border-color:#EBD6B6}
.bc-vahdam{background:linear-gradient(150deg,#0E5643,#07352A);color:#E7F2EC;border-color:#0E5643}
.bc-fils{background:linear-gradient(150deg,#FCEFEC,#F6DAD3);color:#66241A;border-color:#EDCBC2}
.bc-thalia{background:linear-gradient(150deg,#EAF4F5,#D3E8EB);color:#1F4A52;border-color:#C3DDE1}
.bc-noodlna{background:linear-gradient(150deg,#FDF0E8,#F8DCCB);color:#7A3418;border-color:#EFCDB7}

/* ============ category tiles ============ */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.cat{display:flex;flex-direction:column;gap:15px;padding:16px;border-radius:var(--radius-lg);
  border:1px solid var(--line);transition:.34s var(--ease)}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cat-im{position:relative;width:100%;aspect-ratio:1;min-height:0;background:#fff;border-radius:6px;
  overflow:hidden;box-shadow:0 8px 22px rgba(20,44,30,.09),0 1px 3px rgba(20,44,30,.05);
  transition:transform .4s var(--ease)}
.cat-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:7px;box-sizing:border-box}
.cat-im.na::after{content:"";position:absolute;inset:0;background:var(--tile)}
.cat:hover .cat-im{transform:translateY(-3px)}
.cat-tx b{display:block;font-size:13.5px;font-weight:500;line-height:1.25}
.cat-tx span{font-size:11.5px;color:var(--ink2)}

/* ============ product grid ============ */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 28px}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid transparent;border-radius:var(--radius-lg);transition:.3s var(--ease);padding-bottom:2px}
.pcard:hover{border-color:var(--line);box-shadow:var(--shadow);transform:translateY(-3px)}
.pc-im{position:relative;aspect-ratio:1;min-height:0;background:var(--tile);border-radius:var(--radius-lg);overflow:hidden}
.pc-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;box-sizing:border-box;padding:16px;transition:transform .55s var(--ease);mix-blend-mode:multiply}
.pcard:hover .pc-im img{transform:scale(1.07)}
.pc-ph{display:grid;place-items:center;gap:8px;color:var(--mid);text-align:center;padding:18px}
.pc-ph svg{width:52px;height:52px;stroke:currentColor;fill:none;stroke-width:1.1;opacity:.55}
.pc-ph span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.pc-tags{position:absolute;inset-block-start:11px;inset-inline-start:11px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:2}
.pc-fav{position:absolute;inset-block-start:9px;inset-inline-end:9px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;z-index:4;opacity:0;transform:translateY(-5px);
  transition:.26s var(--ease)}
.pcard:hover .pc-fav{opacity:1;transform:none}
.pc-fav svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:1.5}
.pc-fav.on svg{fill:var(--fils);stroke:var(--fils)}
.pc-add{position:absolute;inset-inline:10px;inset-block-end:10px;z-index:4;opacity:0;transform:translateY(9px);
  transition:.3s var(--ease);display:flex;gap:7px}
.pcard:hover .pc-add{opacity:1;transform:none}
.pc-add .btn{flex:1;min-width:0;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:11px}
.pc-add .btn:hover{background:var(--deep);color:#fff;border-color:var(--deep)}
.pc-tx{padding:15px 3px 4px;display:flex;flex-direction:column;flex:1}
.pc-brand{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink3)}
.pc-name{font-size:14.5px;font-weight:400;line-height:1.35;margin:7px 0 5px;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.pc-meta{font-size:12px;color:var(--ink2)}
.pc-rate{display:flex;align-items:center;gap:6px;margin:9px 0 8px}
.stars{display:flex;gap:1.5px}
.stars svg{width:12px;height:12px;fill:var(--gold);stroke:none}
.stars svg.off{fill:var(--line2)}
.pc-rate span{font-size:11px;color:var(--ink3)}
.pc-price{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:3px}
.pc-price b{font-size:16px;font-weight:500}
.pc-price s{font-size:13px;color:var(--ink3)}
.pc-price em{font-style:normal;font-size:11px;font-weight:600;color:var(--fils)}

/* ============ shop layout ============ */
.shop-hd{background:var(--cream);padding:44px 0 40px;border-bottom:1px solid var(--line)}
.crumbs{font-size:11.5px;color:var(--ink2);display:flex;gap:9px;align-items:center;margin-bottom:14px}
.crumbs a:hover{color:var(--green)}
.shop-hd h1{font-size:clamp(28px,4vw,44px);font-weight:300}
.shop-hd p{color:var(--ink2);margin-top:10px;max-width:60ch;font-size:14.5px}
.shop-body{display:grid;grid-template-columns:248px 1fr;gap:56px;padding-block:44px 110px;align-items:start}
.filters{position:sticky;top:calc(var(--hdr-h) + 18px)}
.fgroup{border-bottom:1px solid var(--line);padding:18px 0}
.fgroup:first-child{padding-top:0}
.fgroup > button{display:flex;align-items:center;justify-content:space-between;width:100%;
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;padding:2px 0}
.fgroup > button svg{width:13px;height:13px;stroke:var(--ink2);fill:none;stroke-width:1.6;transition:transform .3s}
.fgroup.closed > button svg{transform:rotate(-90deg)}
html[dir="rtl"] .fgroup.closed > button svg{transform:rotate(90deg)}
.fbody{padding-top:14px;display:grid;gap:3px}
.fgroup.closed .fbody{display:none}
.fopt{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:13.5px;color:var(--ink2);transition:color .2s}
.fopt:hover{color:var(--ink)}
.fopt input{position:absolute;opacity:0;width:0;height:0}
.fbox{width:16px;height:16px;border:1px solid var(--line2);border-radius:2px;flex:0 0 16px;
  display:grid;place-items:center;transition:.2s;background:#fff}
.fopt input:checked ~ .fbox{background:var(--deep);border-color:var(--deep)}
.fbox svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:2.4;opacity:0;transition:opacity .18s}
.fopt input:checked ~ .fbox svg{opacity:1}
.fopt .n{margin-inline-start:auto;font-size:11.5px;color:var(--ink3)}
.fopt input:checked ~ .lbl{color:var(--ink);font-weight:500}
.frange{padding-top:6px}
.frange input[type=range]{width:100%;accent-color:var(--green)}
.frange .vals{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);margin-top:8px}
.fclear{margin-top:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
  border-bottom:1px solid var(--line2);padding-bottom:3px}
.fclear:hover{color:var(--fils);border-color:var(--fils)}

.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.shop-count{font-size:13px;color:var(--ink2)}
.shop-count b{color:var(--ink);font-weight:500}
.shop-tools{display:flex;align-items:center;gap:12px}
.sortsel{appearance:none;border:1px solid var(--line2);background:#fff;border-radius:var(--radius);
  padding:10px 34px 10px 14px;font-size:12.5px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355645B' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px}
html[dir="rtl"] .sortsel{padding:10px 14px 10px 34px;background-position:left 11px center}
.achips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.achip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line2);
  border-radius:100px;font-size:12px;background:var(--wash);transition:.2s}
.achip:hover{border-color:var(--fils);color:var(--fils)}
.achip svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}
.fmob{display:none}
.empty{text-align:center;padding:70px 20px;color:var(--ink2)}
.empty svg{width:56px;height:56px;stroke:var(--line2);fill:none;stroke-width:1.2;margin:0 auto 18px}

/* ============ editorial ============ */
.edit{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;background:var(--wash);
  border-radius:var(--radius-lg);overflow:hidden}
.edit-tx{padding:68px 62px}
.edit-tx h2{font-size:clamp(25px,3.1vw,36px);font-weight:300;margin:14px 0 16px}
.edit-tx p{color:var(--ink2);font-size:15px;line-height:1.7;max-width:44ch}
.edit-art{position:relative;min-height:450px;padding:40px;background:linear-gradient(145deg,#1B6340,#0B3A25);
  display:grid;place-items:center;overflow:hidden}
.edit-art img{width:min(300px,64%);aspect-ratio:1;object-fit:contain;background:#fff;padding:26px;border-radius:6px;box-shadow:0 30px 64px rgba(0,0,0,.38);position:relative;z-index:2}
.edit-art::after{content:"";position:absolute;width:76%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(189,227,168,.28)}
.edit-stats{display:flex;gap:40px;margin-top:34px;flex-wrap:wrap}
.edit-stats b{display:block;font-size:30px;font-weight:300;color:var(--green);line-height:1}
.edit-stats span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}

/* ============ checkout ============ */
.co{padding-block:clamp(34px,4.6vw,58px) clamp(60px,8vw,110px)}
.co-head{margin-bottom:clamp(24px,3vw,38px)}
.co-head h1{font-size:clamp(26px,3.4vw,40px);font-weight:300;letter-spacing:-.02em;margin:14px 0 8px}
.co-head p{font-size:14.5px;color:var(--ink2)}
.co-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,3.4vw,52px);align-items:start}
.co-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,2.4vw,30px)}
.co-card+.co-card{margin-top:16px}
.co-card h2{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);
  margin:0 0 20px;display:flex;align-items:center;gap:10px}
html[dir="rtl"] .co-card h2{letter-spacing:0}
.co-step{width:22px;height:22px;border-radius:50%;background:var(--deep);color:#fff;flex:0 0 22px;
  display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:0}
.co-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld.wide{grid-column:1/-1}
.fld label{font-size:12px;font-weight:500;color:var(--ink2)}
.fld label i{font-style:normal;color:var(--fils)}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 13px;border:1px solid var(--line2);
  border-radius:var(--radius);background:var(--paper);font-size:14.5px;transition:border-color .2s,box-shadow .2s}
.fld textarea{resize:vertical;min-height:76px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(36,120,70,.12)}
.fld.bad input,.fld.bad select{border-color:var(--fils);box-shadow:0 0 0 3px rgba(168,64,46,.10)}
.fld .hint{font-size:11.5px;color:var(--ink3)}
.fld-phone{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.fld-phone .cc{display:grid;place-items:center;padding:0 12px;border:1px solid var(--line2);
  border-radius:var(--radius);background:var(--wash);font-size:14px;color:var(--ink2);white-space:nowrap;
  direction:ltr;unicode-bidi:isolate}
.fld-phone input{direction:ltr;text-align:start}
html[dir="rtl"] .fld-phone input{text-align:right}

.co-pay{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;background:var(--tile);
  border:1px solid var(--line);border-radius:var(--radius);margin-bottom:18px}
.co-pay svg{width:19px;height:19px;stroke:var(--green);fill:none;stroke-width:1.5;flex:0 0 19px;margin-top:1px}
.co-pay b{display:block;font-size:13.5px;font-weight:500;margin-bottom:3px}
.co-pay span{font-size:12.5px;color:var(--ink2);line-height:1.5}
.co-logos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.co-logos span{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:4px 8px}
html[dir="rtl"] .co-logos span{letter-spacing:0}

.co-side{position:sticky;top:calc(var(--hdr-h) + 18px);background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(20px,2.2vw,26px)}
.co-side h2{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin:0 0 18px}
html[dir="rtl"] .co-side h2{letter-spacing:0}
.co-line{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.co-line .im{position:relative;width:52px;height:52px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;isolation:isolate}
.co-line .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5px;
  box-sizing:border-box;mix-blend-mode:multiply}
.co-line b{display:block;font-size:13px;font-weight:500;line-height:1.3}
.co-line span{font-size:11.5px;color:var(--ink3)}
.co-line .pr{font-size:13.5px;font-weight:500;white-space:nowrap;unicode-bidi:isolate}
.co-tot{margin-top:16px;display:grid;gap:9px}
.co-tot div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink2)}
.co-tot div span:last-child{unicode-bidi:isolate}
.co-tot .big{font-size:19px;font-weight:500;color:var(--ink);padding-top:12px;border-top:1px solid var(--line2);margin-top:3px}
.co-err{display:flex;gap:11px;align-items:flex-start;background:var(--fils-wash);border:1px solid rgba(168,64,46,.28);
  border-radius:var(--radius);padding:13px 15px;margin-bottom:16px;font-size:13.5px;color:#7C2E20;line-height:1.5}
.co-err svg{width:17px;height:17px;stroke:var(--fils);fill:none;stroke-width:1.8;flex:0 0 17px;margin-top:1px}
.btn.loading{pointer-events:none;opacity:.75}
.btn .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:agtspin .7s linear infinite;display:inline-block}
@keyframes agtspin{to{transform:rotate(360deg)}}
.co-safe{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;
  font-size:11.5px;color:var(--ink3)}
.co-safe svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ============ order result ============ */
.ores{padding-block:clamp(48px,7vw,104px);display:grid;place-items:center;text-align:center}
.ores-in{width:100%;max-width:620px}
.ores-mark{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 26px}
.ores-mark svg{width:33px;height:33px;fill:none;stroke-width:1.7}
.ores-ok{background:var(--light)} .ores-ok svg{stroke:var(--deep)}
.ores-wait{background:#FBF0D8} .ores-wait svg{stroke:var(--gold)}
.ores-bad{background:var(--fils-wash)} .ores-bad svg{stroke:var(--fils)}
.ores h1{font-size:clamp(25px,3.2vw,36px);font-weight:300;letter-spacing:-.02em;margin-bottom:12px}
.ores p.lede{font-size:15.5px;color:var(--ink2);line-height:1.6;max-width:48ch;margin:0 auto}
.ores-num{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:9px 16px;background:#fff;
  border:1px solid var(--line);border-radius:999px;font-size:13px}
.ores-num b{font-weight:600;letter-spacing:.06em}
.ores-box{margin-top:32px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px;text-align:start}
.ores-box .row{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:9px 0;color:var(--ink2)}
.ores-box .row span:last-child{color:var(--ink);unicode-bidi:isolate}
.ores-box .row.big{font-size:17px;font-weight:500;color:var(--ink);border-top:1px solid var(--line);
  margin-top:8px;padding-top:15px}
.ores-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ============ newsletter ============ */
.nl{background:var(--deep);color:#E6F1E9;padding:96px 0;position:relative;overflow:hidden}
.nl-in{max-width:620px;margin:0 auto;text-align:center;position:relative;z-index:2}
.nl h2{font-size:clamp(26px,3.3vw,38px);font-weight:300;color:#fff;margin:14px 0 14px}
.nl p{opacity:.8;font-size:14.5px}
.nl-form{display:flex;gap:10px;margin-top:30px}
.nl-form input{flex:1;padding:15px 18px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);
  color:#fff;border-radius:var(--radius);font-size:14px}
.nl-form input::placeholder{color:rgba(255,255,255,.5)}
.nl-form input:focus{outline:none;border-color:var(--light);background:rgba(255,255,255,.1)}
.nl-note{font-size:11.5px;opacity:.58;margin-top:14px}
.nl-leaf{position:absolute;inset-block-start:-30%;inset-inline-end:-6%;width:460px;opacity:.07;color:#fff}

/* ============ footer ============ */
.ft{background:#0B2E1D;color:#B9CDC0;padding:84px 0 0}
.ft-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;padding-bottom:54px}
.ft-lock{display:flex;align-items:center;gap:11px}
.ft-lock img{height:56px;width:auto}
.ft-lock .wm{font-size:19px;letter-spacing:.3em;font-weight:500;color:#fff;text-transform:uppercase;line-height:1;padding-inline-start:.3em}
.ft-tag{display:block;font-family:var(--fd);font-style:italic;font-size:13px;color:var(--mid);margin:5px 0 16px}
html[dir="rtl"] .ft-tag{font-family:'Cairo';font-style:normal;font-size:12px}
.ft-brand p{font-size:13.5px;line-height:1.72;max-width:34ch;opacity:.8}
.ft-soc{display:flex;gap:9px;margin-top:22px}
.ft-soc a{width:36px;height:36px;border:1px solid rgba(255,255,255,.16);border-radius:50%;
  display:grid;place-items:center;transition:.25s}
.ft-soc a:hover{background:var(--mid);border-color:var(--mid);color:#0B2E1D}
.ft-soc svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.ft-col h4{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:600}
.ft-col a,.ft-col li{display:block;padding:6px 0;font-size:13.5px;opacity:.78;transition:.22s}
.ft-col li a.ft-inline{display:inline;padding:0;opacity:1;text-decoration:none}
.ft-col li a.ft-inline:hover{color:var(--light);transform:none}
.ft-col a:hover{opacity:1;color:var(--light);transform:translateX(3px)}
html[dir="rtl"] .ft-col a:hover{transform:translateX(-3px)}
.ft-bot{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;opacity:.68}
.ft-pay{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ft-pay span{padding:5px 10px;border:1px solid rgba(255,255,255,.16);border-radius:3px;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase}

/* ============ drawers / modals ============ */
.ov{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none;overflow:hidden}
.ov.open{visibility:visible;pointer-events:auto}
.ov-scrim{position:absolute;inset:0;background:rgba(14,32,22,.42);opacity:0;transition:opacity .38s var(--ease)}
.ov.open .ov-scrim{opacity:1}
.drawer{position:absolute;inset-block:0;inset-inline-end:0;width:min(432px,100vw);background:#fff;
  display:flex;flex-direction:column;transform:translateX(103%);transition:transform .45s var(--ease);
  box-shadow:-20px 0 60px rgba(12,30,20,.2)}
html[dir="rtl"] .drawer{transform:translateX(-103%)}
.ov.open .drawer{transform:none}
.dr-hd{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.dr-hd h3{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.dr-x{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;transition:background .2s}
.dr-x:hover{background:var(--wash)}
.dr-x svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.6}
.dr-body{flex:1;overflow-y:auto;padding:20px 24px}
.dr-ft{border-top:1px solid var(--line);padding:20px 24px 24px;background:var(--cream)}

.ship-bar{background:var(--wash);border-radius:var(--radius);padding:13px 15px;margin-bottom:20px}
.ship-bar p{font-size:12px;color:var(--ink2);margin-bottom:9px}
.ship-bar p b{color:var(--green);font-weight:600}
.ship-track{height:4px;background:var(--line2);border-radius:4px;overflow:hidden}
.ship-fill{height:100%;background:linear-gradient(90deg,var(--mid),var(--green));width:0;transition:width .5s var(--ease)}

.citem{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.citem .im{position:relative;aspect-ratio:1;background:var(--tile);border-radius:var(--radius);overflow:hidden}
.citem .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;box-sizing:border-box;padding:7px;mix-blend-mode:multiply}
.citem h4{font-size:13.5px;font-weight:400;line-height:1.35}
.citem .br{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:4px}
.citem .pk{font-size:12px;color:var(--ink2);margin-top:3px}
.citem .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:100px}
.qty button{width:28px;height:28px;display:grid;place-items:center;color:var(--ink2);transition:color .2s}
.qty button:hover{color:var(--green)}
.qty span{min-width:26px;text-align:center;font-size:13px;font-weight:500}
.citem .pr{font-size:14px;font-weight:500}
.crm{font-size:11px;color:var(--ink3);text-decoration:underline;margin-top:7px}
.crm:hover{color:var(--fils)}
.trow{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink2);padding:5px 0}
.trow.tot{font-size:17px;color:var(--ink);font-weight:500;padding-top:12px;margin-top:8px;border-top:1px solid var(--line2)}
.cart-empty{text-align:center;padding:64px 16px}
.cart-empty svg{width:54px;height:54px;stroke:var(--line2);fill:none;stroke-width:1.2;margin:0 auto 18px}
.cart-empty p{color:var(--ink2);font-size:14px;margin-bottom:22px}

/* quick view */
.qv{position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) scale(.96);
  width:min(900px,94vw);max-height:90vh;background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  opacity:0;transition:.38s var(--ease);display:grid;grid-template-columns:1fr 1fr}
html[dir="rtl"] .qv{transform:translate(50%,-50%) scale(.96)}
.ov.open .qv{opacity:1;transform:translate(-50%,-50%) scale(1)}
html[dir="rtl"] .ov.open .qv{transform:translate(50%,-50%) scale(1)}
.qv-im{background:var(--tile);position:relative;min-height:340px;overflow:hidden}
.qv-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;box-sizing:border-box;padding:40px;mix-blend-mode:multiply}
.qv-tx{padding:38px 36px;overflow-y:auto}
.qv-tx .pc-brand{margin-bottom:9px}
.qv-tx h2{font-size:26px;font-weight:400;line-height:1.24}
.qv-ar{font-family:'Cairo';font-size:15px;color:var(--ink2);margin-top:7px;direction:rtl;text-align:left}
html[dir="rtl"] .qv-ar{display:none}
.qv-price{display:flex;align-items:baseline;gap:11px;margin:18px 0 16px}
.qv-price b{font-size:25px;font-weight:400}
.qv-price s{font-size:16px;color:var(--ink3)}
.qv-note{font-size:14px;line-height:1.7;color:var(--ink2);padding:16px 0;border-block:1px solid var(--line);margin-bottom:18px}
.qv-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:11px 16px;margin-bottom:22px}
.qv-specs div{font-size:12.5px}
.qv-specs span{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:3px}
.qv-buy{display:flex;gap:10px;align-items:stretch}
.qv-buy .qty{border-radius:var(--radius);padding:0 3px}
.qv-x{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:34px;height:34px;border-radius:50%;background:#fff;
  display:grid;place-items:center;z-index:3;box-shadow:var(--shadow)}
.qv-x svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.7}

/* search */
.srch{position:absolute;inset-block-start:0;inset-inline:0;background:#fff;transform:translateY(-102%);
  transition:transform .42s var(--ease);max-height:88vh;display:flex;flex-direction:column}
.ov.open .srch{transform:none}
.srch-hd{display:flex;align-items:center;gap:14px;padding:24px 32px;border-bottom:1px solid var(--line)}
.srch-hd svg{width:21px;height:21px;stroke:var(--ink3);fill:none;stroke-width:1.5;flex:0 0 21px}
.srch-hd input{flex:1;border:0;font-size:22px;font-weight:300;padding:6px 0}
.srch-hd input:focus{outline:none}
.srch-body{overflow-y:auto;padding:24px 32px 40px}
.srch-sug{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.srch-sug button{padding:8px 15px;border:1px solid var(--line2);border-radius:100px;font-size:12.5px;transition:.2s}
.srch-sug button:hover{background:var(--deep);color:#fff;border-color:var(--deep)}
.srch-res{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:22px}

/* toast */
.toast{position:fixed;inset-block-end:26px;inset-inline-start:50%;transform:translate(-50%,calc(100% + 40px));z-index:120;
  background:var(--deep);color:#fff;padding:14px 22px;border-radius:100px;font-size:13px;
  display:flex;align-items:center;gap:11px;box-shadow:var(--shadow-lg);transition:transform .42s var(--ease)}
html[dir="rtl"] .toast{transform:translate(50%,calc(100% + 40px))}
.toast.on{transform:translate(-50%,0)}
html[dir="rtl"] .toast.on{transform:translate(50%,0)}
.toast svg{width:17px;height:17px;stroke:var(--light);fill:none;stroke-width:2}

/* keep numbers + currency in reading order under RTL */
.pc-price b,.pc-price s,.qv-price b,.qv-price s,.pc-rate span,.citem .pr,.trow span,
.mm-fcard .tx span,.bp-side .ft span,.shop-count,.frange .vals span,.bp-links a em,
.mm-group a em,.fopt .n,.ship-bar p{unicode-bidi:isolate}
/* ============ motion ============
   The hidden state is scoped to html.rv, which the script only adds when the
   viewer has not asked for reduced motion — so with JS off, or with motion
   reduced, every section is simply visible. `translate` is used instead of
   `transform` so hover transforms stay free to compose on top. */
html.rv [data-rv]{opacity:0;translate:0 26px}
html.rv [data-rv].in{opacity:1;translate:none;
  transition:opacity .7s var(--ease),translate .7s var(--ease);
  transition-delay:calc(var(--i,0) * 60ms)}
html.rv .hero-tx>*{opacity:0;translate:0 20px}
html.rv .hero-ready .hero-tx>*{opacity:1;translate:none;
  transition:opacity .85s var(--ease),translate .85s var(--ease)}
html.rv .hero-ready .hero-tx>*:nth-child(1){transition-delay:.06s}
html.rv .hero-ready .hero-tx>*:nth-child(2){transition-delay:.14s}
html.rv .hero-ready .hero-tx>*:nth-child(3){transition-delay:.22s}
html.rv .hero-ready .hero-tx>*:nth-child(4){transition-delay:.30s}
html.rv .hero-ready .hero-tx>*:nth-child(5){transition-delay:.38s}
html.rv .hero-feat{opacity:0;translate:0 30px}
html.rv .hero-ready .hero-feat{opacity:1;translate:none;
  transition:opacity .9s var(--ease),translate .9s var(--ease);transition-delay:.26s}
html.rv .hero-thumbs>*{opacity:0;translate:0 18px}
html.rv .hero-ready .hero-thumbs>*{opacity:1;translate:none;
  transition:opacity .7s var(--ease),translate .7s var(--ease),
             transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
html.rv .hero-ready .hero-thumbs>*:nth-child(1){transition-delay:.46s}
html.rv .hero-ready .hero-thumbs>*:nth-child(2){transition-delay:.54s}
html.rv .hero-ready .hero-thumbs>*:nth-child(3){transition-delay:.62s}
html.rv .hero-note{opacity:0;translate:0 12px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
html.rv .hero-ready .hero-note{opacity:1;translate:none;transition-delay:.72s}
html.rv .hero-city{opacity:0;transition:opacity 1.2s var(--ease)}
html.rv .hero-ready .hero-city{opacity:1;transition-delay:.15s}
html.rv .hero-city-cap{opacity:0;translate:0 10px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
html.rv .hero-ready .hero-city-cap{opacity:1;translate:none;transition-delay:1s}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
html[dir="rtl"] .btn:hover svg{transform:translateX(-3px)}
.link-more{display:inline-block}
.link-more:hover{transform:translateX(2px)}
html[dir="rtl"] .link-more:hover{transform:translateX(-2px)}
.view{display:none}
.view.on{display:block}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border:2px solid var(--green)}

/* ============ responsive ============ */
@media(max-width:1180px){
  :root{--sec:98px;--sec-sm:72px}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(3,1fr)}
  .ft-top{grid-template-columns:1fr 1fr 1fr}
  .srch-res{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:980px){
  :root{--gut:26px;--sec:84px;--sec-sm:62px}
  .hero-in{grid-template-columns:1fr;gap:clamp(20px,5vw,36px);
    padding-block:clamp(36px,7vw,60px) calc(var(--pano) * .44 + clamp(18px,3vw,30px))}
  .hero-art{order:2;margin-top:18px}
  .hero-tx{max-width:none}
  .hero-show{max-width:560px}
  .hf-stage{height:min(52vw,330px)}
  .hth{height:104px}
  .co-grid{grid-template-columns:1fr}
  .co-side{position:static;order:-1}
  .vstrip-in{grid-template-columns:repeat(2,1fr);gap:20px}
  .brands{grid-template-columns:1fr}
  .bcard{min-height:340px}
  .bcard{min-height:320px}
  .edit{grid-template-columns:1fr}
  .edit-tx{padding:42px 30px}
  .edit-art{min-height:320px;order:-1}
  .shop-body{grid-template-columns:1fr;gap:0}
  .filters{position:fixed;inset-block:0;inset-inline-start:0;width:min(330px,88vw);background:#fff;z-index:95;
    padding:22px;overflow-y:auto;transform:translateX(-103%);transition:transform .4s var(--ease);box-shadow:var(--shadow-lg)}
  html[dir="rtl"] .filters{transform:translateX(103%)}
  .filters.open{transform:none}
  .fmob{display:inline-flex}
  .mm-body{grid-template-columns:1fr}
  .mm-rail{border:0;padding:12px 0}
  .mm-rail li>button{font-size:14px;padding:13px 22px}
  .mm-stage{display:none}
  .mm-rail li .mm-sub{padding:2px 22px 16px}
  .mm-rail li.on .mm-sub{display:block}
  .mm-rail li.on{background:var(--cream)}
  .mm-sub a{display:block;padding:8px 0;font-size:14px;font-weight:300;color:var(--ink2)}
  .mm-panel{width:min(480px,92vw)}
  .qv{grid-template-columns:1fr;max-height:92vh;overflow-y:auto}
  .qv-im{min-height:260px}
  .qv-im img{padding:26px}
  .qv-tx{padding:26px 24px 32px}
  .srch-res{grid-template-columns:repeat(3,1fr)}
  .ft-top{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:680px){
  :root{--hdr-h:70px;--gut:20px;--sec:68px;--sec-sm:50px}
  #curBtn{display:none}
  .langbtn,.curbtn{padding:8px 8px;gap:5px}
  .iconbtn{width:36px;height:36px}
  .hdr-in{gap:4px}
  .hero-show{max-width:none}
  .hf-stage{height:min(62vw,268px)}
  .hf-meta{padding-block:14px 16px}
  .hf-name{font-size:16.5px}
  .hf-row{margin-top:13px;padding-top:13px}
  .hf-price{font-size:19px}
  .hf-go{padding:9px 15px;font-size:10.5px}
  .hero-thumbs{gap:8px}
  .hth{height:78px;padding:4px 2px 12px}
  .hf-gauge{display:none}
  .hf-base{inset-inline:18%}
  /* On a phone the photograph leads: Manama first, then "Kingdom of Bahrain"
     reads as its caption, then the headline. The panorama moves to the top of
     the hero and dissolves downward into the sky it was sampled from. */
  .hero-city{aspect-ratio:auto;height:var(--pano-m);
    inset-block-start:0;inset-block-end:auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 62%,transparent 100%)}
  .hero-city img{object-position:50% 86%}
  .hero-city-veil{background:linear-gradient(to bottom,rgba(6,12,38,.22) 0%,
    rgba(6,12,38,0) 34%,rgba(6,12,38,.10) 100%)}
  .hero-city::after{display:none}
  .hero::before{display:none}
  /* the caption would just repeat the eyebrow directly beneath it */
  .hero-city-cap{display:none}
  /* the hero now ends on flat sky, so hand it to the green strip deliberately */
  .hero::after{content:"";position:absolute;z-index:1;inset-inline:0;inset-block-end:0;
    height:150px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(15,61,37,0),rgba(15,61,37,.55))}
  .hero-in{padding-block:calc(var(--pano-m) * .94 + 14px) clamp(30px,6vw,46px)}
  .co-fields{grid-template-columns:1fr}
  .co-card{padding:18px 16px}
  .co-side{padding:18px 16px}
  .ores-cta .btn{width:100%;justify-content:center}
  .hdr-in{grid-template-columns:auto 1fr auto}
  .shopbtn .shoplbl{display:none}
  .brandmark img{height:42px}
  .brandmark .wm{font-size:15px}
  .brandmark .tag{font-size:11px}
  .curbtn span.cur-lbl{display:none}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 14px}
  .cats{gap:12px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .vstrip-in{grid-template-columns:1fr}
  .pc-add{opacity:1;transform:none}
  .pc-add .btn{padding:10px;font-size:10px}
  .pc-fav{opacity:1;transform:none}
  .srch-res{grid-template-columns:repeat(2,1fr)}
  .srch-hd input{font-size:17px}
  .ft-top{grid-template-columns:1fr;gap:28px}
  .edit-stats{gap:26px}
  .nl-form{flex-direction:column}
  .hero-trust{gap:14px;flex-direction:column;align-items:flex-start}
  .mm-top,.dr-hd{padding-inline:18px}
}

/* Very narrow phones (320–380px): the header's right-hand group plus a
   nowrap tagline is wider than the screen, so trim the chrome rather than
   let the page scroll sideways. */
@media(max-width:380px){
  :root{--gut:16px}
  .hdr-in{gap:2px}
  #langLbl{display:none}
  .langbtn,.curbtn{padding:8px 6px}
  .iconbtn{width:33px;height:33px}
  .brandmark img{height:38px}
  .brandmark .tag{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============================================================
   EDITORIAL — journal index, articles and pages
   Set for reading: a centred measure, type with enough weight
   to hold up in Arabic as well as English, and a share rail and
   sidebar either side of the column.
   ============================================================ */

/* ---------- article header ---------- */
.art-hd{background:var(--wash);border-block-end:1px solid var(--line);
  padding-block:clamp(26px,4vw,52px) clamp(28px,4.4vw,56px);text-align:center}
.art-hd .wrap{max-width:1180px}
.art-hd .crumbs{margin-bottom:clamp(16px,2.4vw,26px);justify-content:center}
.art-cat{display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--green);background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;margin-bottom:18px;transition:.24s var(--ease)}
.art-cat:hover{border-color:var(--green);background:var(--green);color:#fff}
.art-hd h1{font-family:var(--fd);font-weight:600;font-size:clamp(31px,4.4vw,53px);line-height:1.1;
  letter-spacing:-.012em;color:var(--ink);margin-inline:auto;max-width:none;
  /* A long title breaks into even lines instead of leaving one word stranded. */
  text-wrap:balance}
.art-hd h1 em{font-style:italic;color:var(--green)}
.art-sub{margin:clamp(14px,1.8vw,20px) auto 0;font-size:clamp(16.5px,1.8vw,19.5px);line-height:1.6;
  color:var(--ink2);max-width:70ch;font-weight:400;text-wrap:balance}
.art-meta{margin-top:clamp(18px,2.4vw,26px);display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  justify-content:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink3)}
.art-meta .dot{color:var(--line2)}

html[dir="rtl"] .art-hd h1{font-family:'Cairo',var(--ff);font-weight:700;line-height:1.3;letter-spacing:0}
html[dir="rtl"] .art-hd h1 em{font-family:'Cairo';font-style:normal}
html[dir="rtl"] .art-sub{font-size:clamp(16px,1.8vw,19px);line-height:1.9}
html[dir="rtl"] .art-meta,html[dir="rtl"] .art-cat{letter-spacing:0;text-transform:none;font-size:12.5px}

/* A date is read left to right even inside Arabic, so it is isolated from
   the surrounding direction instead of being reordered into nonsense. */
.art-meta time,.jc-meta time,.sidepost time{unicode-bidi:plaintext}

/* ---------- lead image ---------- */
.art-hero{margin-block:clamp(22px,3.4vw,44px);max-width:1040px;margin-inline:auto}
.art-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;max-height:62vh;
  border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--tile)}
.art-hero figcaption{margin-top:11px;font-size:12.5px;color:var(--ink3);text-align:center}

/* ---------- three columns, text in the middle ---------- */
.art-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,2.4vw,38px);
  padding-block:clamp(14px,2.4vw,34px) clamp(40px,6vw,86px);max-width:1560px;margin-inline:auto}
.art-main{min-width:0}
.prose,.art-foot{max-width:900px;margin-inline:auto}

/* Equal side columns put the text column dead centre on the page, with the
   share rail and the sidebar sitting in the margins either side of it. Each
   child is placed explicitly, so a page with no rails — a plain Page, say —
   still gets the middle column rather than falling into the first one. */
@media(min-width:1024px){
  .art-body{grid-template-columns:minmax(0,1fr) minmax(0,900px) minmax(0,1fr);align-items:start}
  .art-share{grid-column:1;justify-self:end;margin-inline-end:clamp(16px,2vw,34px)}
  .art-main{grid-column:2}
  .art-side{grid-column:3;justify-self:start;width:100%;max-width:272px;
    margin-inline-start:clamp(16px,2vw,34px)}
}

/* ---------- share rail ---------- */
.art-share{display:flex;flex-direction:column;align-items:center;gap:11px}
.art-share span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--ink3);margin-bottom:3px}
.art-share a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;
  place-items:center;transition:.24s var(--ease);background:var(--paper)}
.art-share a:hover{border-color:var(--deep);background:var(--deep);transform:translateY(-2px)}
.art-share svg{width:16px;height:16px;stroke:var(--ink2);fill:none;stroke-width:1.7}
.art-share a:hover svg{stroke:#fff}
@media(min-width:1024px){
  .art-share{position:sticky;inset-block-start:calc(var(--hdr-h) + 26px)}
}
@media(max-width:1023px){
  .art-share{flex-direction:row;justify-content:center;max-width:66ch;margin-inline:auto;
    padding-block-end:clamp(18px,3vw,26px);border-block-end:1px solid var(--line)}
  .art-share span{margin:0 4px 0 0;align-self:center}
}
html[dir="rtl"] .art-share span{letter-spacing:0;font-size:12px}

/* ---------- the side rail ---------- */
.art-side{display:none}
@media(min-width:1560px){
  .art-side{display:block;position:sticky;inset-block-start:calc(var(--hdr-h) + 26px);
    max-height:calc(100vh - var(--hdr-h) - 52px);overflow:auto}
}
.side-h{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--ink);padding-block-end:11px;margin-block-end:14px;border-block-end:1px solid var(--line2)}
html[dir="rtl"] .side-h{letter-spacing:0;font-size:13px}

.toc{margin-block-end:34px}
.toc ol{list-style:none}
.toc a{display:block;padding-block:8px;padding-inline:14px 0;font-size:13.5px;line-height:1.45;
  color:var(--ink2);border-inline-start:2px solid var(--line);transition:.22s var(--ease)}
.toc a:hover{color:var(--ink);border-inline-start-color:var(--line2)}
.toc a.on{color:var(--green);border-inline-start-color:var(--green);font-weight:600}
html[dir="rtl"] .toc a{font-size:14.5px;line-height:1.75}

.sidepost{display:flex;gap:13px;margin-block-end:18px}
.sidepost .im{flex:0 0 68px;width:68px;height:68px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--tile);border:1px solid var(--line)}
.sidepost .im img{width:100%;height:100%;object-fit:cover}
.sidepost b{display:block;font-size:14px;font-weight:500;line-height:1.35;color:var(--ink);
  transition:color .2s var(--ease)}
.sidepost:hover b{color:var(--green)}
.sidepost time{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);font-weight:600}
html[dir="rtl"] .sidepost b{font-size:15px;line-height:1.6}
html[dir="rtl"] .sidepost time{letter-spacing:0;text-transform:none;font-size:12px}

/* ============================================================
   PROSE — whatever is typed in the editor
   ============================================================ */
.prose{color:var(--ink);font-size:21px;line-height:1.82;font-weight:400}
.prose > *:first-child{margin-block-start:0}
.prose > *:last-child{margin-block-end:0}

/* Arabic runs longer and sits lower on the line; it needs the room. */
html[dir="rtl"] .prose{font-family:'Cairo',var(--ff);font-size:22.5px;line-height:2.05;
  font-weight:400;letter-spacing:0}

/* Every paragraph reads at one size — no enlarged opening paragraph, which
   made the first block look like a different typeface from the rest. */

.prose p{margin-block:0 1.4em}
.prose strong,.prose b{font-weight:700;color:var(--ink)}
.prose em{font-style:italic}
html[dir="rtl"] .prose strong,html[dir="rtl"] .prose b{font-weight:700}
.prose a{color:var(--green);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px;text-decoration-color:rgba(36,120,70,.45);transition:.2s var(--ease)}
.prose a:hover{color:var(--deep);text-decoration-color:currentColor}

/* ---------- headings ---------- */
.prose h2,.prose h3,.prose h4{position:relative;color:var(--ink);
  scroll-margin-block-start:calc(var(--hdr-h) + 22px)}
.prose h2{font-family:var(--ff);font-weight:600;font-size:clamp(27px,3.2vw,38px);line-height:1.2;
  letter-spacing:-.008em;margin-block:1.7em .45em}
.prose h3{font-family:var(--ff);font-weight:600;font-size:clamp(21px,2.3vw,25px);line-height:1.35;
  margin-block:1.6em .4em}
.prose h4{font-family:var(--ff);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink2);margin-block:1.7em .45em}
.prose h5,.prose h6{font-family:var(--ff);font-weight:600;font-size:15px;color:var(--ink2);margin-block:1.5em .4em}
.prose h2 + h3,.prose h2 + p,.prose h3 + p{margin-block-start:0}

html[dir="rtl"] .prose h2{font-family:'Cairo',var(--ff);font-weight:700;letter-spacing:0;
  line-height:1.45;font-size:clamp(26px,3.1vw,36px)}
html[dir="rtl"] .prose h3{font-family:'Cairo',var(--ff);font-weight:600;letter-spacing:0;
  line-height:1.55;font-size:clamp(21px,2.3vw,25px)}
html[dir="rtl"] .prose h4{font-family:'Cairo',var(--ff);letter-spacing:0;text-transform:none;font-size:15px}

/* the # that appears on hover, for linking to a section */
.hanchor{position:absolute;inset-inline-end:100%;padding-inline-end:12px;color:var(--gold);
  text-decoration:none;opacity:0;transition:opacity .2s var(--ease);font-weight:400;font-size:.7em}
.prose h2:hover .hanchor,.prose h3:hover .hanchor{opacity:.55}
.hanchor:hover{opacity:1!important}
@media(max-width:1400px){.hanchor{display:none}}

/* ---------- lists ---------- */
.prose ul,.prose ol{margin-block:0 1.4em;padding-inline-start:0;list-style:none}
.prose li{position:relative;padding-inline-start:28px;margin-block-end:.6em}
.prose ul > li::before{content:"";position:absolute;inset-inline-start:5px;inset-block-start:.68em;
  width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.prose ol{counter-reset:li}
.prose ol > li{counter-increment:li;padding-inline-start:34px}
.prose ol > li::before{content:counter(li) ".";position:absolute;inset-inline-start:0;inset-block-start:0;
  font-weight:700;color:var(--gold);font-size:.95em}
.prose li > ul,.prose li > ol{margin-block:.5em 0}
.prose li p{margin-block-end:.5em}
html[dir="rtl"] .prose li{padding-inline-start:30px}
html[dir="rtl"] .prose ul > li::before{inset-block-start:.82em}

/* ---------- quotes ---------- */
.prose blockquote{margin-block:2.2em;padding:0 clamp(8px,3vw,42px);text-align:center;border:0}
.prose blockquote::before{content:"\201C";display:block;font-family:var(--fd);font-size:68px;
  line-height:.6;color:var(--light);margin-bottom:8px}
.prose blockquote p{font-family:var(--fd);font-size:clamp(25px,3.1vw,35px);line-height:1.32;
  font-weight:600;color:var(--ink);margin-block-end:.4em;letter-spacing:-.008em}
.prose blockquote cite,.prose blockquote footer{display:block;font-family:var(--ff);font-style:normal;
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink3);
  margin-top:16px;font-weight:600}
html[dir="rtl"] .prose blockquote p{font-family:'Cairo',var(--ff);font-weight:600;line-height:1.75;
  letter-spacing:0;font-size:clamp(21px,2.6vw,27px)}
html[dir="rtl"] .prose blockquote cite,html[dir="rtl"] .prose blockquote footer{letter-spacing:0;
  text-transform:none;font-size:13px}

/* ---------- media ---------- */
.prose figure{margin-block:2em}
.prose img,.prose video{display:block;max-width:100%;height:auto;border-radius:var(--radius-lg)}
.prose figcaption,.prose .wp-caption-text{margin-top:11px;font-size:13px;line-height:1.5;
  color:var(--ink3);text-align:center}
.prose .alignwide{width:min(118%,100%);margin-inline:auto}
.prose .alignleft{float:inline-start;margin-inline-end:26px;margin-block:.4em 1em;max-width:min(46%,320px)}
.prose .alignright{float:inline-end;margin-inline-start:26px;margin-block:.4em 1em;max-width:min(46%,320px)}
.prose .aligncenter{margin-inline:auto}
.prose .wp-block-embed__wrapper,.prose iframe{max-width:100%;border-radius:var(--radius-lg)}

/* ---------- tables ---------- */
.prose table{width:100%;border-collapse:collapse;margin-block:1.8em;font-size:17px}
.prose th,.prose td{padding:13px 15px;text-align:start;border-block-end:1px solid var(--line)}
.prose th{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--ink2);border-block-end:1px solid var(--line2)}
.prose tbody tr:nth-child(even){background:var(--tile)}
.prose table caption{caption-side:bottom;margin-top:10px;font-size:13px;color:var(--ink3)}
html[dir="rtl"] .prose table{font-size:16.5px}
html[dir="rtl"] .prose th{letter-spacing:0;text-transform:none;font-size:14px}

/* ---------- code ---------- */
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);padding:2px 6px;color:var(--deep)}
.prose pre{background:#10231A;color:#DCE9E0;border-radius:var(--radius-lg);padding:20px 22px;
  overflow:auto;margin-block:1.7em;font-size:13.5px;line-height:1.6;direction:ltr;text-align:start}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:1em}

/* ---------- rules and the rest ---------- */
.prose hr{border:0;margin-block:2.6em;text-align:center;height:auto}
.prose hr::before{content:"· · ·";letter-spacing:.7em;color:var(--line2);font-size:16px}
.prose mark{background:var(--light);color:var(--deep);padding:1px 4px;border-radius:var(--radius)}
.prose kbd{font-family:ui-monospace,monospace;font-size:.85em;background:var(--paper);
  border:1px solid var(--line2);border-block-end-width:2px;border-radius:3px;padding:2px 6px}
.prose dl dt{font-weight:700;margin-block-start:1.1em}
.prose dl dd{margin-inline-start:0;padding-inline-start:26px;color:var(--ink2)}
.prose .wp-block-button__link{display:inline-block;background:var(--deep);color:#fff;padding:14px 28px;
  border-radius:var(--radius);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;text-decoration:none}
.prose .wp-block-button__link:hover{background:var(--green)}

/* ---------- foot of the article ---------- */
.art-foot{margin-block-start:clamp(34px,4.4vw,56px);padding-block-start:clamp(22px,2.8vw,30px);
  border-block-start:1px solid var(--line)}
.artnav{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.artnav a{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:.26s var(--ease);background:var(--paper)}
.artnav a:hover{border-color:var(--line2);box-shadow:var(--shadow);transform:translateY(-2px)}
.artnav span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--ink3);margin-bottom:7px}
.artnav b{font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
.an-next{text-align:end}
html[dir="rtl"] .artnav span{letter-spacing:0;text-transform:none;font-size:12px}
@media(max-width:620px){.artnav{grid-template-columns:1fr}.an-next{text-align:start}}

/* ============================================================
   JOURNAL INDEX
   ============================================================ */
.jhd{background:var(--wash);border-block-end:1px solid var(--line);
  padding-block:clamp(30px,4.6vw,62px) clamp(32px,5vw,66px);text-align:center}
.jhd .crumbs{justify-content:center}
.jhd h1{font-family:var(--fd);font-weight:600;font-size:clamp(36px,5.2vw,62px);line-height:1.08;
  letter-spacing:-.016em;margin-block:14px 0;text-wrap:balance}
.jhd p{margin:16px auto 0;font-size:clamp(16px,1.7vw,18.5px);line-height:1.68;color:var(--ink2);
  max-width:56ch;font-weight:400}
html[dir="rtl"] .jhd h1{font-family:'Cairo',var(--ff);font-weight:700;letter-spacing:0;line-height:1.3}
html[dir="rtl"] .jhd p{line-height:1.95}

.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,38px)}
@media(max-width:980px){.jgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.jgrid{grid-template-columns:1fr}}
.jwrap{padding-block:clamp(34px,5vw,72px)}

.jcard{display:flex;flex-direction:column}
.jc-im{display:block;position:relative;aspect-ratio:4/3;background:var(--tile);overflow:hidden;
  border-radius:var(--radius-lg);border:1px solid var(--line)}
.jc-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.jcard:hover .jc-im img{transform:scale(1.045)}
.jc-im.na{display:grid;place-items:center}
.jc-im.na svg{width:46px;height:46px;stroke:var(--line2);fill:none;stroke-width:1.2}
.jc-tx{padding-block-start:16px;display:flex;flex-direction:column;flex:1}
.jc-tx .art-cat{margin-bottom:11px;align-self:flex-start;padding:4px 11px;font-size:9.5px}
.jc-name{font-weight:600;font-size:clamp(19px,2vw,22px);line-height:1.3;margin-bottom:9px}
.jc-name a{color:var(--ink);transition:color .22s var(--ease)}
.jc-name a:hover{color:var(--green)}
.jc-ex{font-size:15px;line-height:1.65;color:var(--ink2);font-weight:400;margin-bottom:14px}
.jc-meta{margin-top:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--ink3);display:flex;align-items:center;gap:9px}
.jc-meta .dot{color:var(--line2)}
html[dir="rtl"] .jc-name{line-height:1.6}
html[dir="rtl"] .jc-ex{line-height:1.95;font-size:15.5px}
html[dir="rtl"] .jc-meta,html[dir="rtl"] .jc-tx .art-cat{letter-spacing:0;text-transform:none;font-size:12.5px}

.jrel{padding-block:clamp(34px,5vw,74px);border-block-start:1px solid var(--line)}
@media(max-width:860px){.jrel .jgrid{grid-template-columns:1fr}}

/* ---------- pagination ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
  margin-block-start:clamp(34px,4.6vw,58px)}
.pager a,.pager span{min-width:42px;height:42px;display:grid;place-items:center;padding-inline:12px;
  border:1px solid var(--line);border-radius:var(--radius);font-size:14px;color:var(--ink2);
  font-weight:500;transition:.24s var(--ease)}
.pager a:hover{border-color:var(--deep);color:var(--ink)}
.pager .current{background:var(--deep);border-color:var(--deep);color:#fff;font-weight:600}
.pager .dots{border:0}

/* ---------- empty / 404 ---------- */
.contentless{padding-block:clamp(60px,10vw,140px);text-align:center}
.contentless svg{width:52px;height:52px;stroke:var(--line2);fill:none;stroke-width:1.1;margin-bottom:22px}
.contentless h1{font-family:var(--fd);font-weight:600;font-size:clamp(30px,4.4vw,50px);line-height:1.1;
  letter-spacing:-.014em;margin-bottom:12px;text-wrap:balance}
.contentless p{color:var(--ink2);font-size:16.5px;line-height:1.7;max-width:46ch;margin-inline:auto;font-weight:400}
.contentless .btn{margin-top:26px}
html[dir="rtl"] .contentless h1{font-family:'Cairo',var(--ff);font-weight:700;letter-spacing:0;line-height:1.35}

/* ---------- search form ---------- */
.ssearch{display:flex;gap:10px;max-width:460px;margin:22px auto 0}
.ssearch input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:var(--radius);
  padding:13px 15px;font:inherit;font-size:15.5px;background:var(--paper);color:var(--ink)}
.ssearch input:focus{outline:none;border-color:var(--green)}


/* brand-specific mega-menu panes */
.mm-pane{position:relative}
.pane-chamain{background:linear-gradient(158deg,#FDF6EA 0%,#FFFDF9 58%)}
.pane-chamain .bp-links a:hover,.pane-chamain .link-acc{color:var(--chamain)}
.pane-chamain .btn-p{background:var(--chamain)}
.pane-chamain .btn-p:hover{background:#A9691F;box-shadow:0 10px 24px rgba(190,123,49,.3)}
.pane-vahdam{background:linear-gradient(158deg,#0E5643 0%,#093B2F 100%);color:#DFEDE6}
.pane-vahdam h3,.pane-vahdam .bp-links a{color:#fff}
.pane-vahdam .story{color:#B7D2C6}
.pane-vahdam .bp-links a{border-color:rgba(255,255,255,.15)}
.pane-vahdam .bp-links a em{color:rgba(255,255,255,.5)}
.pane-vahdam .bp-links a:hover{color:var(--light)}
.pane-vahdam .btn-p{background:var(--gold);color:#fff}
.pane-vahdam .btn-p:hover{background:#C09A4F;box-shadow:0 10px 24px rgba(168,132,60,.35)}
.pane-vahdam .bp-side{border-color:rgba(255,255,255,.18)}
.pane-vahdam .mm-group h4{color:rgba(255,255,255,.5)}
.pane-fils{background:linear-gradient(158deg,#FDF1ED 0%,#FFFCFB 58%)}
.pane-fils .bp-links a:hover{color:var(--fils)}
.pane-fils .btn-p{background:var(--fils)}
.pane-fils .btn-p:hover{background:#8C3122;box-shadow:0 10px 24px rgba(168,64,46,.3)}
.pane-thalia{background:linear-gradient(158deg,#ECF5F6 0%,#FBFDFD 58%)}
.pane-thalia .bp-links a:hover,.pane-thalia .link-acc{color:var(--thalia)}
.pane-thalia .btn-p{background:var(--thalia)}
.pane-thalia .btn-p:hover{background:#2A5C66;box-shadow:0 10px 24px rgba(53,112,123,.3)}
.bp-note{display:flex;gap:11px;align-items:flex-start;margin-top:26px;padding:14px 16px;
  border-radius:var(--radius-lg);background:rgba(255,255,255,.6);border:1px solid var(--line);font-size:12.5px;line-height:1.55}
.pane-vahdam .bp-note{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#C9DED4}
.bp-note svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;flex:0 0 17px;margin-top:2px;opacity:.7}
.bp-uses{margin-top:34px;max-width:540px}
.bp-uses .lbl{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:14px}
.bp-uses li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:14.5px;font-weight:300;border-bottom:1px solid var(--line)}
.bp-uses svg{width:15px;height:15px;stroke:var(--fils);fill:none;stroke-width:2;flex:0 0 15px;margin-top:5px}
.bp-deco{position:absolute;inset-block-start:-30px;inset-inline-end:-40px;width:300px;height:300px;opacity:.06;pointer-events:none}
.pane-vahdam .bp-deco{opacity:.11;color:var(--light)}
@media(max-width:980px){.bp{grid-template-columns:1fr}.bp-side{display:none}}