/* ==========================================================================
   SANCTUS DEUS CHEMIAE — Design System
   Gold + Ink, hexagonal chemistry motif. Mobile-first.
   ========================================================================== */

:root{
  --gold:#C9A227; --gold-lt:#E8C766; --gold-dp:#8C6D10; --gold-pale:#FBF4DF;
  --ink:#0E1522; --ink-2:#1A2433; --ink-3:#26324A;
  --slate:#44506A; --muted:#6B7891;
  --mist:#F4F6FA; --line:#DFE4EE; --white:#fff;
  --teal:#0E7C86; --teal-pale:#E6F3F4;
  --crimson:#B3122F; --amber:#D97706; --green:#15803D;

  --sheen:linear-gradient(135deg,#8C6D10 0%,#C9A227 34%,#F4E3A8 52%,#C9A227 70%,#8C6D10 100%);
  --ink-fade:linear-gradient(160deg,#0E1522 0%,#1A2433 60%,#26324A 100%);

  --ff-display:'Sora','Segoe UI',system-ui,-apple-system,sans-serif;
  --ff-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --ff-ar:'Amiri','Noto Naskh Arabic','Times New Roman',serif;
  --ff-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-sm:6px; --r:12px; --r-lg:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(14,21,34,.06),0 2px 8px rgba(14,21,34,.05);
  --sh-2:0 4px 12px rgba(14,21,34,.08),0 12px 32px rgba(14,21,34,.07);
  --sh-3:0 10px 24px rgba(14,21,34,.10),0 28px 60px rgba(14,21,34,.12);
  --sh-gold:0 10px 30px rgba(201,162,39,.28);

  --wrap:1280px; --wrap-narrow:840px;
  --pad:clamp(16px,4vw,28px);
  --hdr-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;font-family:var(--ff-body);font-size:16px;line-height:1.65;color:var(--ink);background:var(--white);
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
/* Inline icons default to text size unless a component overrides them. */
svg.icon{width:1.05em;height:1.05em;flex:none}
.topbar svg.icon{width:14px;height:14px;vertical-align:-2px;display:inline-block}
.topbar a{display:inline-flex;align-items:center;gap:.35em}
.foot__contact svg.icon{width:16px;height:16px}
.card__link svg.icon,.crumbs svg.icon{width:.95em;height:.95em}
.honey__cell svg.icon{width:clamp(17px,2.1vw,25px);height:auto}
.btn svg.icon{width:1.05em;height:1.05em}
a{color:var(--gold-dp);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--gold)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-display);font-weight:700;line-height:1.14;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h2{font-size:clamp(1.7rem,3vw,2.5rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.65rem);font-weight:600}
h4{font-size:1.1rem;font-weight:600}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:clamp(48px,7vw,96px)}
.section--tight{padding-block:clamp(34px,4.5vw,60px)}
.section--mist{background:var(--mist)}
.section--ink{background:var(--ink-fade);color:#E8ECF4}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.flex{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ---------- Type helpers ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-family:var(--ff-display);font-size:.74rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:.85rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--sheen);border-radius:2px}
.section--ink .eyebrow{color:var(--gold-lt)}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--slate);max-width:64ch}
.section--ink .lede{color:#B9C3D6}
.muted{color:var(--muted)}
.mono{font-family:var(--ff-mono);font-size:.9em;letter-spacing:-.01em}
.ar{font-family:var(--ff-ar);direction:rtl}
.section-head{max-width:70ch;margin-bottom:clamp(26px,3.4vw,46px)}
.section-head.center{margin-inline:auto}

/* ---------- Hexagon motif ---------- */
.hex{--hs:100px;width:var(--hs);aspect-ratio:1/1.1547;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:grid;place-items:center;overflow:hidden}
.hex-outline{position:absolute;pointer-events:none;opacity:.5}
.hex-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23C9A227' stroke-opacity='.16' stroke-width='1.2'/%3E%3Cpath d='M28 64 56 80v32L28 128 0 112V80z' fill='none' stroke='%23C9A227' stroke-opacity='.16' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size:56px 97px}
.hex-field--dark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23E8C766' stroke-opacity='.12' stroke-width='1.2'/%3E%3C/svg%3E")}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--ff-display);font-weight:600;font-size:.94rem;line-height:1;
  padding:.92em 1.6em;border-radius:var(--r);border:1.5px solid transparent;cursor:pointer;
  transition:all .22s var(--ease);text-align:center;white-space:nowrap}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--gold{background:var(--sheen);color:#241c02;box-shadow:var(--sh-gold);
  background-size:200% 100%;background-position:0 0}
.btn--gold:hover{background-position:100% 0;color:#241c02;transform:translateY(-2px);box-shadow:0 14px 34px rgba(201,162,39,.38)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-3);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-dp);background:var(--gold-pale)}
.btn--ghost-lt{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn--ghost-lt:hover{border-color:var(--gold-lt);color:var(--gold-lt);background:rgba(232,199,102,.08)}
.btn--wa{background:#25D366;color:#04310f}
.btn--wa:hover{background:#1eb856;color:#04310f;transform:translateY(-2px)}
.btn--sm{padding:.66em 1.05em;font-size:.84rem}
.btn--lg{padding:1.05em 2em;font-size:1.02rem}
.btn--block{width:100%}

/* ---------- Badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:.4em;padding:.32em .72em;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:var(--ff-display)}
.badge--gold{background:var(--gold-pale);color:var(--gold-dp)}
.badge--teal{background:var(--teal-pale);color:var(--teal)}
.badge--ink{background:var(--ink);color:var(--gold-lt)}
.badge--stock{background:#E8F6EC;color:var(--green)}
.badge--low{background:#FEF3C7;color:#92400E}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--ink);color:#AEB9CC;font-size:.8rem}
.topbar a{color:#AEB9CC}
.topbar a:hover{color:var(--gold-lt)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;flex-wrap:wrap}
.topbar__tag{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.topbar__tag span{position:relative;padding-right:.9rem}
.topbar__tag span:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:rgba(255,255,255,.18)}
.topbar__right{display:flex;gap:1.1rem;align-items:center}
.lang{display:flex;gap:.35rem;align-items:center}
.lang a{padding:.2em .45em;border-radius:4px;font-weight:600;letter-spacing:.04em}
.lang a.is-active{background:rgba(201,162,39,.18);color:var(--gold-lt)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:600;background:#fff;border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease)}
.site-header.is-stuck{box-shadow:var(--sh-2)}
.header__main{display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:.8rem;flex:none}
.brand__mark{width:auto;height:52px;flex:none}
.brand__txt{display:none}
@media(min-width:1100px){.brand__txt{display:block}}
.brand__name{font-family:var(--ff-display);font-weight:800;font-size:1.02rem;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink);line-height:1.1}
.brand__sub{font-size:.68rem;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;margin-top:2px}

/* Search */
.hsearch{flex:1 1 auto;max-width:640px;position:relative}
.hsearch form{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--mist);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.hsearch form:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14);background:#fff}
.hsearch select{border:0;background:transparent;padding:0 .7rem 0 .95rem;font-size:.86rem;font-weight:600;
  color:var(--slate);cursor:pointer;max-width:140px;appearance:none}
.hsearch .sep{width:1px;background:var(--line);margin-block:9px}
.hsearch input[type=search],.hsearch input[type=text]{flex:1;border:0;background:transparent;padding:.82rem .9rem;
  font-size:.92rem;min-width:0;outline:none}
.hsearch button{border:0;background:var(--sheen);background-size:200% 100%;color:#241c02;padding-inline:1.15rem;
  cursor:pointer;display:grid;place-items:center;transition:background-position .25s var(--ease)}
.hsearch button:hover{background-position:100% 0}
.hsearch button svg{width:19px;height:19px}

.header__actions{display:flex;align-items:center;gap:.35rem;margin-left:auto;flex:none}
.iconbtn{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r);border:0;background:transparent;
  color:var(--ink);cursor:pointer;position:relative;transition:background .2s}
.iconbtn:hover{background:var(--mist);color:var(--gold-dp)}
.iconbtn svg{width:21px;height:21px}
.iconbtn__count{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--crimson);color:#fff;font-size:.63rem;font-weight:700;display:grid;place-items:center;font-family:var(--ff-display)}
.burger{display:grid}
@media(min-width:1024px){.burger{display:none}}

/* ---------- Primary nav + mega menu ---------- */
.navbar{background:var(--ink);position:relative;z-index:500}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav{display:none;list-style:none;margin:0;padding:0}
@media(min-width:1024px){.nav{display:flex;flex-wrap:wrap}}
.nav > li{position:relative}
.nav > li > a{display:flex;align-items:center;gap:.4em;color:#DCE3EF;font-family:var(--ff-display);font-weight:600;
  font-size:.92rem;letter-spacing:.015em;padding:1rem .95rem;position:relative}
.nav > li > a::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.55rem;height:2px;
  background:var(--sheen);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav > li:hover > a,.nav > li.current-menu-item > a,.nav > li.current-menu-ancestor > a{color:#fff}
.nav > li:hover > a::after,.nav > li.current-menu-item > a::after,.nav > li.current-menu-ancestor > a::after{transform:scaleX(1)}
.nav .caret{width:.62em;height:.62em;transition:transform .25s var(--ease)}
.nav > li:hover .caret{transform:rotate(180deg)}
.nav--accent > a{color:var(--gold-lt)!important}

/* dropdown (simple) */
.nav .sub-menu{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border-radius:0 0 var(--r) var(--r);
  box-shadow:var(--sh-3);list-style:none;margin:0;padding:.5rem;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all .22s var(--ease);border-top:3px solid var(--gold)}
.nav li:hover > .sub-menu,.nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu a{display:block;padding:.62rem .8rem;border-radius:var(--r-sm);color:var(--ink);font-size:.9rem;font-weight:500}
.nav .sub-menu a:hover{background:var(--gold-pale);color:var(--gold-dp)}

/* mega */
.mega{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);width:min(1180px,calc(100vw - 40px));
  background:#fff;border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-3);border-top:3px solid var(--gold);
  padding:clamp(20px,2.4vw,34px);opacity:0;visibility:hidden;transition:all .24s var(--ease);z-index:510}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.5rem 1.4rem}
.mega__col h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:0 0 .6rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.mega__item{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .65rem;border-radius:var(--r-sm);
  transition:background .18s}
.mega__item:hover{background:var(--mist)}
.mega__ico{width:34px;height:34px;flex:none;border-radius:9px;background:var(--gold-pale);display:grid;place-items:center;color:var(--gold-dp)}
.mega__ico svg{width:18px;height:18px}
.mega__item strong{display:block;font-family:var(--ff-display);font-size:.88rem;font-weight:600;color:var(--ink);line-height:1.3}
.mega__item span{display:block;font-size:.76rem;color:var(--muted);line-height:1.45;margin-top:2px}
.mega__promo{background:var(--ink-fade);color:#fff;border-radius:var(--r);padding:1.2rem;position:relative;overflow:hidden}
.mega__promo h4{color:var(--gold-lt);border:0;margin-bottom:.4rem}
.mega__promo p{font-size:.82rem;color:#B9C3D6;margin-bottom:.9rem}
.mega__foot{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;gap:1.2rem;
  flex-wrap:wrap;align-items:center;justify-content:space-between}

/* quick links right of navbar */
.navbar__aux{display:none;gap:.4rem;align-items:center}
@media(min-width:1024px){.navbar__aux{display:flex}}
.navbar__aux a{color:#9FAABE;font-size:.82rem;font-weight:600;font-family:var(--ff-display);padding:.5rem .7rem;border-radius:var(--r-sm)}
.navbar__aux a:hover{color:var(--gold-lt);background:rgba(255,255,255,.05)}

/* ---------- Mobile drawer ---------- */
.drawer{position:fixed;inset:0 0 0 auto;width:min(390px,88vw);background:#fff;z-index:900;transform:translateX(100%);
  transition:transform .3s var(--ease);overflow-y:auto;box-shadow:var(--sh-3);display:flex;flex-direction:column}
.drawer.is-open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1rem var(--pad);
  border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.drawer__body{padding:1rem var(--pad) 2rem}
.drawer nav ul{list-style:none;margin:0;padding:0}
.drawer nav li{border-bottom:1px solid var(--line)}
.drawer nav a{display:block;padding:.95rem .2rem;font-family:var(--ff-display);font-weight:600;color:var(--ink);font-size:1rem}
.drawer nav .sub-menu{padding-left:.9rem;display:none}
.drawer nav .sub-menu.is-open{display:block}
.drawer nav .sub-menu a{font-weight:500;font-size:.92rem;color:var(--slate);padding-block:.7rem}
.drawer .toggle-sub{float:right;border:0;background:var(--mist);width:30px;height:30px;border-radius:8px;
  margin-top:.55rem;cursor:pointer;display:grid;place-items:center}
.drawer .toggle-sub svg{width:14px;height:14px;transition:transform .2s}
.drawer .toggle-sub.is-open svg{transform:rotate(180deg)}
.scrim{position:fixed;inset:0;background:rgba(14,21,34,.55);backdrop-filter:blur(2px);z-index:880;opacity:0;
  visibility:hidden;transition:opacity .3s}
.scrim.is-open{opacity:1;visibility:visible}
body.no-scroll{overflow:hidden}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink-fade);color:#fff;overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(900px 480px at 78% 18%,rgba(201,162,39,.20),transparent 62%),
             radial-gradient(700px 420px at 8% 92%,rgba(14,124,134,.16),transparent 60%)}
.hero__in{display:grid;gap:clamp(28px,4vw,56px);align-items:center;
  padding-block:clamp(48px,7vw,104px);grid-template-columns:1fr}
@media(min-width:960px){.hero__in{grid-template-columns:1.08fr .92fr}}
.hero h1{color:#fff;margin-bottom:.45em}
.hero h1 em{font-style:normal;background:var(--sheen);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__ar{font-family:var(--ff-ar);font-size:1.5rem;color:var(--gold-lt);direction:rtl;margin:-.2rem 0 1rem}
.hero__lede{color:#C3CCDD;font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:56ch}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.hero__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1rem;margin-top:2.6rem;
  padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.12)}
.hero__stat b{display:block;font-family:var(--ff-display);font-size:clamp(1.5rem,2.4vw,2rem);
  background:var(--sheen);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.hero__stat span{font-size:.78rem;color:#95A2B8;letter-spacing:.05em;text-transform:uppercase}

/* hex cluster art */
.hexart{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:460px;margin-inline:auto}
.hexart__cell{position:relative;aspect-ratio:1/1.1547;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:grid;place-items:center;text-align:center;padding:1.2rem;overflow:hidden;
  transition:transform .3s var(--ease)}
.hexart__cell:hover{transform:translateY(-6px)}
.hexart__cell:nth-child(odd){transform:translateY(28px)}
.hexart__cell:nth-child(odd):hover{transform:translateY(22px)}
.hexart__cell--gold{background:var(--sheen);color:#241c02}
.hexart__cell--ink{background:rgba(255,255,255,.06);border:1px solid rgba(232,199,102,.3);color:#fff;backdrop-filter:blur(4px)}
.hexart__cell--teal{background:linear-gradient(140deg,#0E7C86,#13A0AC);color:#fff}
.hexart__cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hexart__cell strong{font-family:var(--ff-display);font-size:.92rem;line-height:1.25;position:relative;z-index:2}
.hexart__cell small{display:block;font-size:.7rem;opacity:.82;margin-top:3px;position:relative;z-index:2}
.hexart__cell svg{width:30px;height:30px;margin-bottom:.45rem;position:relative;z-index:2}

/* ---------- Trust strip ---------- */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line)}
.trust__item{background:#fff;padding:1.15rem 1.2rem;display:flex;gap:.8rem;align-items:center}
.trust__item svg{width:26px;height:26px;color:var(--gold-dp);flex:none}
.trust__item b{display:block;font-family:var(--ff-display);font-size:.9rem;font-weight:600}
.trust__item span{font-size:.78rem;color:var(--muted)}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:rgba(201,162,39,.45)}
.card__media{position:relative;aspect-ratio:16/10;background:var(--mist);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__media--pad{display:grid;place-items:center;padding:1.4rem}
.card__body{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.card__body h3{margin:0;font-size:1.08rem}
.card__body h3 a{color:var(--ink)}
.card__body h3 a:hover{color:var(--gold-dp)}
.card__body p{font-size:.9rem;color:var(--slate);margin:0}
.card__foot{margin-top:auto;padding-top:.9rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.card__link{font-family:var(--ff-display);font-weight:600;font-size:.86rem;display:inline-flex;align-items:center;gap:.4em}
.card__link svg{width:14px;height:14px;transition:transform .22s var(--ease)}
.card:hover .card__link svg{transform:translateX(4px)}
.card__count{font-size:.75rem;color:var(--muted);font-family:var(--ff-mono)}

/* colour-block category card (Sigma/Merck style) */
.cblock{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:250px;display:flex;
  flex-direction:column;justify-content:flex-end;padding:1.5rem;color:#fff;isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cblock:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.cblock::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--blk,var(--ink-fade))}
.cblock::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,21,34,0) 30%,rgba(14,21,34,.82) 100%)}
.cblock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .55s var(--ease)}
.cblock:hover img{transform:scale(1.06)}
.cblock__hex{position:absolute;top:-30px;right:-30px;width:150px;height:170px;z-index:-1;opacity:.28;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--gold)}
.cblock h3{color:#fff;font-size:1.22rem;margin-bottom:.3rem;position:relative}
.cblock p{font-size:.86rem;color:#D3DAE7;margin:0 0 .9rem;position:relative}
.cblock .card__link{color:var(--gold-lt);position:relative}
.cblock--gold::before{background:var(--sheen)}
.cblock--gold h3,.cblock--gold p{color:#241c02}
.cblock--gold .card__link{color:#241c02}
.cblock--gold::after{background:linear-gradient(180deg,rgba(255,255,255,0) 45%,rgba(255,255,255,.16) 100%)}
.cblock--teal::before{background:linear-gradient(140deg,#0E7C86,#0a5a61)}
.cblock--ink::before{background:var(--ink-fade)}
.cblock--slate::before{background:linear-gradient(140deg,#44506A,#2B344A)}
.cblock--wide{grid-column:span 2}
@media(max-width:700px){.cblock--wide{grid-column:span 1}}

/* icon tile */
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.4rem;
  transition:all .26s var(--ease);position:relative;overflow:hidden}
.tile:hover{border-color:rgba(201,162,39,.5);box-shadow:var(--sh-2);transform:translateY(-4px)}
.tile__ico{width:52px;height:60px;display:grid;place-items:center;margin-bottom:1rem;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--gold-pale);color:var(--gold-dp)}
.tile__ico svg{width:24px;height:24px}
.tile h3{font-size:1.06rem;margin-bottom:.35rem}
.tile p{font-size:.89rem;color:var(--slate);margin:0}
.tile--ink{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.tile--ink h3{color:#fff}.tile--ink p{color:#B9C3D6}
.tile--ink .tile__ico{background:rgba(201,162,39,.16);color:var(--gold-lt)}

/* ---------- Product card ---------- */
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;
  flex-direction:column;transition:all .26s var(--ease);position:relative}
.pcard:hover{box-shadow:var(--sh-2);border-color:rgba(201,162,39,.5);transform:translateY(-4px)}
.pcard__media{aspect-ratio:1;background:var(--mist);display:grid;place-items:center;padding:1.1rem;position:relative;overflow:hidden}
.pcard__media img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;transition:transform .45s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.07)}
.pcard__flags{position:absolute;top:.6rem;left:.6rem;display:flex;flex-direction:column;gap:.35rem;z-index:2}
.pcard__body{padding:.95rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.pcard__cat{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;font-family:var(--ff-display)}
.pcard__title{font-family:var(--ff-display);font-size:.96rem;font-weight:600;line-height:1.35;margin:0}
.pcard__title a{color:var(--ink)}
.pcard__title a:hover{color:var(--gold-dp)}
.pcard__meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.76rem;color:var(--muted);font-family:var(--ff-mono)}
.pcard__meta b{color:var(--slate);font-weight:600}
.pcard__price{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;color:var(--ink);margin-top:auto}
.pcard__price del{font-weight:400;font-size:.85rem;color:var(--muted);margin-right:.35rem}
.pcard__actions{display:flex;gap:.4rem;margin-top:.7rem}
.pcard__actions .btn{flex:1;padding:.62em .7em;font-size:.8rem}

/* ---------- Spec table ---------- */
.spec{width:100%;border-collapse:collapse;font-size:.9rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec th,.spec td{text-align:left;padding:.78rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{background:var(--mist);font-family:var(--ff-display);font-weight:600;color:var(--slate);width:38%;white-space:nowrap}
.spec td{font-family:var(--ff-mono);font-size:.86rem}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:.88rem;min-width:620px}
table.data th{background:var(--ink);color:#fff;font-family:var(--ff-display);font-weight:600;text-align:left;
  padding:.8rem 1rem;font-size:.82rem;letter-spacing:.03em}
table.data td{padding:.75rem 1rem;border-bottom:1px solid var(--line)}
table.data tbody tr:nth-child(even){background:var(--mist)}
table.data tbody tr:hover{background:var(--gold-pale)}

/* ---------- Filters / sidebar ---------- */
.shop-layout{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:1fr}
@media(min-width:1000px){.shop-layout{grid-template-columns:272px 1fr}}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem;position:sticky;top:calc(var(--hdr-h) + 16px)}
.filters h3{font-size:.95rem;margin-bottom:.9rem}
.fgroup{border-top:1px solid var(--line);padding-top:.9rem;margin-top:.9rem}
.fgroup:first-of-type{border-top:0;margin-top:0;padding-top:0}
.fgroup > button{width:100%;display:flex;align-items:center;justify-content:space-between;background:0;border:0;
  padding:0 0 .6rem;cursor:pointer;font-family:var(--ff-display);font-weight:600;font-size:.86rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.fgroup > button svg{width:13px;height:13px;transition:transform .2s}
.fgroup > button[aria-expanded=false] svg{transform:rotate(-90deg)}
.fgroup ul{list-style:none;margin:0;padding:0;max-height:210px;overflow-y:auto}
.fgroup li{margin-bottom:.15rem}
.fgroup label{display:flex;gap:.55rem;align-items:center;font-size:.86rem;color:var(--slate);cursor:pointer;
  padding:.25rem .3rem;border-radius:var(--r-sm)}
.fgroup label:hover{background:var(--mist);color:var(--ink)}
.fgroup input[type=checkbox]{accent-color:var(--gold-dp);width:15px;height:15px}
.fgroup label span{margin-left:auto;font-size:.74rem;color:var(--muted);font-family:var(--ff-mono)}
.toolbar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;
  padding:.85rem 1.1rem;background:var(--mist);border:1px solid var(--line);border-radius:var(--r);margin-bottom:1.3rem}
.toolbar__count{font-size:.86rem;color:var(--slate)}
.toolbar select{border:1px solid var(--line);border-radius:var(--r-sm);padding:.5rem .7rem;background:#fff;font-size:.86rem}

/* ---------- Breadcrumb / page head ---------- */
.pagehead{background:var(--mist);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pagehead--ink{background:var(--ink-fade);border-bottom:0;color:#fff}
.pagehead__in{padding-block:clamp(26px,4vw,56px);position:relative;z-index:2}
.pagehead h1{margin-bottom:.35rem}
.pagehead--ink h1{color:#fff}
.pagehead p{max-width:64ch;color:var(--slate);margin:0}
.pagehead--ink p{color:#B9C3D6}
.crumbs{display:flex;flex-wrap:wrap;gap:.35rem;font-size:.8rem;color:var(--muted);margin-bottom:.85rem;list-style:none;padding:0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold-dp)}
.crumbs li::after{content:"/";margin-left:.45rem;opacity:.5}
.crumbs li:last-child::after{display:none}
.crumbs li:last-child{color:var(--ink);font-weight:600}
.pagehead--ink .crumbs,.pagehead--ink .crumbs a{color:#8D9AB2}
.pagehead--ink .crumbs li:last-child{color:var(--gold-lt)}

/* ---------- Downloads ---------- */
.dl{display:flex;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.1rem;transition:all .24s var(--ease)}
.dl:hover{border-color:rgba(201,162,39,.55);box-shadow:var(--sh-1);transform:translateY(-2px)}
.dl__ico{width:46px;height:54px;flex:none;display:grid;place-items:center;border-radius:6px;
  background:var(--gold-pale);color:var(--gold-dp);font-family:var(--ff-display);font-weight:700;font-size:.66rem;
  letter-spacing:.04em;position:relative}
.dl__ico::after{content:"";position:absolute;top:0;right:0;border-width:0 11px 11px 0;border-style:solid;
  border-color:#fff #fff var(--gold) var(--gold)}
.dl__meta{flex:1;min-width:0}
.dl__meta b{display:block;font-family:var(--ff-display);font-size:.95rem;font-weight:600;line-height:1.35}
.dl__meta span{font-size:.78rem;color:var(--muted)}

/* ---------- Forms ---------- */
.field{margin-bottom:1.05rem}
.field label,.form-label{display:block;font-family:var(--ff-display);font-size:.84rem;font-weight:600;
  margin-bottom:.4rem;color:var(--slate)}
.field .req{color:var(--crimson)}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=password],
input[type=search],input[type=date],select,textarea{
  width:100%;padding:.78rem .95rem;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
  font-size:.94rem;transition:border-color .2s,box-shadow .2s}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
.form-row{display:grid;gap:1.05rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form-note{font-size:.8rem;color:var(--muted);margin-top:.35rem}
.alert{padding:.9rem 1.1rem;border-radius:var(--r);font-size:.9rem;margin-bottom:1.2rem;border-left:4px solid}
.alert--ok{background:#E8F6EC;border-color:var(--green);color:#14532D}
.alert--err{background:#FEE9EC;border-color:var(--crimson);color:#7F0F22}

/* ---------- Accordion / FAQ ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.acc + .acc{margin-top:.7rem}
.acc__q{width:100%;text-align:left;background:0;border:0;padding:1.05rem 1.2rem;cursor:pointer;display:flex;
  gap:1rem;align-items:center;justify-content:space-between;font-family:var(--ff-display);font-weight:600;font-size:1rem}
.acc__q:hover{background:var(--mist)}
.acc__q svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease);color:var(--gold-dp)}
.acc.is-open .acc__q svg{transform:rotate(180deg)}
.acc__a{display:none;padding:0 1.2rem 1.2rem;color:var(--slate);font-size:.94rem}
.acc.is-open .acc__a{display:block}

/* ---------- Timeline (R&D) ---------- */
.tl{position:relative;padding-left:2.4rem}
.tl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl__i{position:relative;padding-bottom:1.9rem}
.tl__i::before{content:"";position:absolute;left:-2.4rem;top:3px;width:24px;height:28px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--sheen)}
.tl__i h4{margin-bottom:.2rem}
.tl__i time{font-family:var(--ff-mono);font-size:.78rem;color:var(--gold-dp);font-weight:600}

/* ---------- CTA band ---------- */
.ctaband{position:relative;background:var(--ink-fade);color:#fff;border-radius:var(--r-xl);overflow:hidden;
  padding:clamp(28px,4.4vw,56px);isolation:isolate}
.ctaband::after{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:320px;z-index:-1;opacity:.22;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--sheen)}
.ctaband h2{color:#fff;margin-bottom:.4rem}
.ctaband p{color:#B9C3D6;max-width:60ch}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#A5B1C6;font-size:.9rem;position:relative;overflow:hidden}
.site-footer a{color:#A5B1C6}
.site-footer a:hover{color:var(--gold-lt)}
.foot__top{padding-block:clamp(38px,5vw,68px);display:grid;gap:clamp(24px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot__brand{grid-column:span 1}
@media(min-width:900px){.foot__brand{grid-column:span 2;max-width:400px}}
.foot__logo{height:64px;width:auto;margin-bottom:1rem}
.foot h4{color:#fff;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.55rem}
.foot__contact li{display:flex;gap:.65rem;align-items:flex-start}
.foot__contact svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--gold)}
.foot__social{display:flex;gap:.5rem;margin-top:1.2rem}
.foot__social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center}
.foot__social a:hover{background:var(--gold);color:var(--ink)}
.foot__social svg{width:17px;height:17px}
.foot__news{display:flex;gap:.5rem;margin-top:1rem}
.foot__news input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.foot__news input::placeholder{color:#7E8CA4}
.foot__bar{border-top:1px solid rgba(255,255,255,.1);padding-block:1.2rem;display:flex;flex-wrap:wrap;
  gap:.8rem 1.5rem;align-items:center;justify-content:space-between;font-size:.82rem}
.foot__bar ul{display:flex;flex-wrap:wrap;gap:1.1rem}
.foot__certs{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.foot__certs span{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;padding:.35em .7em;
  border:1px solid rgba(255,255,255,.16);border-radius:6px;color:#8D9AB2;font-weight:600}

/* ---------- Floating WhatsApp ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:700;display:flex;align-items:center;gap:.6rem;
  background:#25D366;color:#04310f;padding:.8rem 1.1rem;border-radius:999px;font-family:var(--ff-display);
  font-weight:700;font-size:.88rem;box-shadow:0 8px 26px rgba(37,211,102,.4);transition:transform .25s var(--ease)}
.wa-float:hover{transform:translateY(-3px) scale(1.03);color:#04310f}
.wa-float svg{width:22px;height:22px}
.wa-float span{display:none}
@media(min-width:640px){.wa-float span{display:inline}}
.backtop{position:fixed;right:18px;bottom:82px;z-index:690;width:44px;height:44px;border-radius:50%;border:0;
  background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;
  transition:all .28s var(--ease);box-shadow:var(--sh-2)}
.backtop.is-on{opacity:1;visibility:visible}
.backtop:hover{background:var(--gold);color:var(--ink)}
.backtop svg{width:18px;height:18px}

/* ---------- Pagination ---------- */
.pagination{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:2.4rem}
.pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 .7rem;
  border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--ff-display);font-weight:600;
  font-size:.9rem;color:var(--slate);background:#fff}
.pagination .page-numbers:hover{border-color:var(--gold);color:var(--gold-dp)}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- Content (single/page) ---------- */
.entry{font-size:1.02rem}
.entry > *{max-width:var(--wrap-narrow)}
.entry .alignwide{max-width:1100px}
.entry .alignfull{max-width:none;width:100%}
.entry h2{margin-top:2.2em}
.entry h3{margin-top:1.8em}
.entry img{border-radius:var(--r)}
.entry blockquote{border-left:4px solid var(--gold);padding:.3rem 0 .3rem 1.4rem;margin:2rem 0;
  font-size:1.1rem;color:var(--slate);font-style:italic}
.entry table{width:100%;border-collapse:collapse;font-size:.92rem}
.entry table th,.entry table td{border:1px solid var(--line);padding:.65rem .85rem;text-align:left}
.entry table th{background:var(--mist)}
.entry code{background:var(--mist);padding:.15em .4em;border-radius:4px;font-family:var(--ff-mono);font-size:.88em}
.entry figure{margin:2rem 0}
.entry figcaption{font-size:.82rem;color:var(--muted);margin-top:.5rem}

/* ---------- WooCommerce bridges ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-radius:var(--r);border-left:4px solid var(--gold);
  background:var(--gold-pale);padding:1rem 1.2rem;list-style:none;margin-bottom:1.4rem;font-size:.92rem}
.woocommerce-error{border-color:var(--crimson);background:#FEE9EC}
.woocommerce ul.products{display:grid!important;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr));margin:0;padding:0;list-style:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important}
.woocommerce span.onsale{background:var(--crimson);border-radius:999px;font-family:var(--ff-display);
  font-weight:700;min-height:auto;min-width:auto;padding:.3em .8em;line-height:1.4;font-size:.72rem;top:10px;left:10px;margin:0}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit{background:var(--sheen)!important;background-size:200% 100%!important;
  color:#241c02!important;border-radius:var(--r)!important;font-family:var(--ff-display);font-weight:600;
  padding:.85em 1.5em!important;transition:background-position .25s var(--ease),transform .2s}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background-position:100% 0!important;transform:translateY(-2px)}
.woocommerce div.product .price,.woocommerce ul.products li.product .price{color:var(--ink);font-family:var(--ff-display);font-weight:700}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border-radius:var(--r) var(--r) 0 0;background:var(--mist);border-color:var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:#fff;border-bottom-color:#fff}
.woocommerce table.shop_table{border-radius:var(--r);border-color:var(--line)}
.woocommerce .quantity input.qty{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.55rem;width:70px}
.woocommerce-breadcrumb{font-size:.82rem;color:var(--muted)}

/* ---------- Utility / animation ---------- */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- RTL ---------- */
html[dir=rtl] body{font-family:var(--ff-ar)}
html[dir=rtl] .eyebrow::before{order:2}
html[dir=rtl] .crumbs li::after{margin:0 .45rem 0 0}
html[dir=rtl] .tl{padding-left:0;padding-right:2.4rem}
html[dir=rtl] .tl::before{left:auto;right:11px}
html[dir=rtl] .tl__i::before{left:auto;right:-2.4rem}
html[dir=rtl] .wa-float{right:auto;left:18px}
html[dir=rtl] .backtop{right:auto;left:18px}

/* ---------- Print ---------- */
@media print{
  .site-header,.navbar,.topbar,.site-footer,.wa-float,.backtop,.filters{display:none!important}
  body{font-size:11pt;color:#000}
  .section{padding-block:12pt}
}

/* ==========================================================================
   HONEYCOMB — the benzene-ring cluster of clickable divisions
   2 / 3 / 2 = 7 divisions, laid out as a true hexagonal cluster.
   ========================================================================== */
.honey{--hw:clamp(84px,11.5vw,158px);--hh:calc(var(--hw) * 1.1547);--hg:7px;
  display:flex;flex-direction:column;align-items:center;margin-inline:auto;width:max-content;max-width:100%}
.honey__row{flex-wrap:nowrap}
.honey__row{display:flex;gap:var(--hg)}
.honey__row + .honey__row{margin-top:calc(var(--hh) * -0.25 + (var(--hg) * .58))}
.honey__cell{width:var(--hw);height:var(--hh);flex:none;position:relative;display:grid;place-items:center;
  text-align:center;padding:8% 9%;overflow:hidden;color:#fff;text-decoration:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:rgba(255,255,255,.05);
  transition:transform .3s var(--ease),filter .3s var(--ease)}
.honey__cell::before{content:"";position:absolute;inset:0;background:var(--cell,linear-gradient(150deg,#1A2433,#26324A));z-index:0}
.honey__cell::after{content:"";position:absolute;inset:2px;z-index:1;opacity:0;transition:opacity .3s var(--ease);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,0) 60%)}
.honey__cell > *{position:relative;z-index:2}
.honey__cell:hover,.honey__cell:focus-visible{transform:scale(1.055);filter:drop-shadow(0 12px 26px rgba(201,162,39,.35));color:#fff}
.honey__cell:hover::after{opacity:1}
.honey__cell svg{width:clamp(17px,2.1vw,25px);height:auto;margin-bottom:.3em;opacity:.95}
.honey__cell strong{display:block;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(.6rem,1.02vw,.83rem);line-height:1.22;letter-spacing:-.005em}
.honey__cell small{display:block;font-size:clamp(.5rem,.72vw,.65rem);opacity:.72;margin-top:.22em;
  letter-spacing:.07em;text-transform:uppercase;font-family:var(--ff-mono)}
.honey__cell--gold{--cell:var(--sheen);color:#241c02}
.honey__cell--gold:hover{color:#241c02}
.honey__cell--teal{--cell:linear-gradient(150deg,#0E7C86,#0a5f68)}
.honey__cell--slate{--cell:linear-gradient(150deg,#44506A,#2B344A)}
.honey__cell--ink{--cell:linear-gradient(150deg,#1A2433,#0E1522)}
.honey__cell--core{--cell:radial-gradient(circle at 42% 35%,#F6E7B0,#C9A227 46%,#7A5E0B);color:#2B2003;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.honey__cell--core:hover{color:#2B2003}
.honey__cell--core svg{width:clamp(26px,3.4vw,44px);margin-bottom:.15em}
.honey-legend{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.6rem}
.honey-legend a{font-size:.76rem;padding:.4em .85em;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  color:#C3CCDD;font-family:var(--ff-display);font-weight:500}
.honey-legend a:hover{border-color:var(--gold);color:var(--gold-lt);background:rgba(201,162,39,.1)}

/* Wordmark lockup — crest large, translations small underneath */
.lockup{display:flex;gap:clamp(14px,2vw,26px);align-items:center}
.lockup__crest{width:clamp(92px,11vw,150px);height:auto;flex:none;
  filter:drop-shadow(0 8px 22px rgba(201,162,39,.32))}
.lockup__name{font-family:var(--ff-display);font-weight:800;letter-spacing:.045em;text-transform:uppercase;
  font-size:clamp(1.15rem,2.4vw,2.05rem);line-height:1.08;color:#fff;margin:0 0 .35rem;
  background:var(--sheen);-webkit-background-clip:text;background-clip:text;color:transparent}
.lockup__tr{font-size:clamp(.72rem,.95vw,.86rem);line-height:1.75;color:#AAB6CA;margin:0}
.lockup__tr .ar{font-size:1.15em;color:var(--gold-lt)}

/* Small helpers */
.hide-sm{display:none}
@media(min-width:768px){.hide-sm{display:inline-flex}}
.widget{margin-bottom:2rem;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
.widget-title{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.widget ul{list-style:none;padding:0;margin:0}
.widget li{padding:.35rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1.2rem;text-align:center}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.05;
  background:var(--sheen);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.section--ink .stat span{color:#8D9AB2}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.4em .85em;border-radius:999px;border:1px solid var(--line);
  font-size:.8rem;color:var(--slate);background:#fff;font-weight:500}
.chip:hover{border-color:var(--gold);color:var(--gold-dp)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.notice-strip{background:var(--gold-pale);border-top:1px solid #EFE0B4;border-bottom:1px solid #EFE0B4;
  padding:.7rem 0;font-size:.85rem;color:#6B520A}
.notice-strip .wrap{display:flex;gap:.7rem;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap}
.notice-strip svg{width:17px;height:17px;flex:none}
.split{display:grid;gap:clamp(24px,4vw,56px);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split--wide{grid-template-columns:1.15fr .85fr}}
.media-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame--hex{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border-radius:0;aspect-ratio:1/1.1547}
.ratio-16x9{aspect-ratio:16/9}
.list-check{list-style:none;padding:0;margin:0}
.list-check li{display:flex;gap:.7rem;align-items:flex-start;padding:.45rem 0;font-size:.94rem}
.list-check svg{width:18px;height:18px;color:var(--gold-dp);flex:none;margin-top:3px}
.section--ink .list-check svg{color:var(--gold-lt)}

/* ==========================================================================
   RESPONSIVE CORRECTIONS
   ========================================================================== */
@media(max-width:900px){
  /* The four mottos belong on desktop only — mobile keeps contact + language. */
  .topbar__tag{display:none}
  .topbar__in{justify-content:flex-end}
}
@media(max-width:700px){
  /* Give the search field room: the scope select moves out of the way. */
  .hsearch select,.hsearch .sep{display:none}
  .hsearch{order:3;flex:1 0 100%;max-width:none;margin-top:.55rem}
  .header__main{flex-wrap:wrap;padding-bottom:.6rem;row-gap:0}
  .brand__mark{height:44px}
  .header__actions{margin-left:auto}
  .topbar__right{gap:.8rem;font-size:.76rem}
  .topbar a[href^="mailto"]{display:none}
}
@media(max-width:480px){
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .honey{--hw:clamp(80px,26vw,112px)}
  .honey-legend a{font-size:.7rem;padding:.35em .7em}
}

/* Definition on the darker honeycomb cells so they read against the hero. */
.honey__cell--ink,.honey__cell--slate,.honey__cell--teal{
  box-shadow:inset 0 0 0 1px rgba(232,199,102,.26)}
.honey__cell--ink:hover,.honey__cell--slate:hover,.honey__cell--teal:hover{
  box-shadow:inset 0 0 0 1.5px rgba(232,199,102,.6)}

/* Keep long division names readable inside a hexagon. */
.honey__cell strong{hyphens:auto;overflow-wrap:anywhere}

/* Table of contact rows on the contact page. */
.pagehead--ink .lede{max-width:58ch}

/* ==========================================================================
   MEGA MENU POSITIONING + HONEYCOMB TYPOGRAPHY  (corrections)
   ========================================================================== */

/* The panel spans the nav container, not the individual menu item, so it can
   never be pushed off-screen by an item sitting near the left edge. */
.navbar .wrap{position:relative}
.nav > li.has-mega{position:static}
.mega{left:0;right:0;width:auto;transform:translateY(10px)}
.has-mega:hover .mega,.has-mega:focus-within .mega{transform:translateY(0)}

/* Break long division names only when they genuinely do not fit. */
.honey__cell{padding:7% 5%}
.honey__cell strong{hyphens:manual;overflow-wrap:break-word;word-break:normal}

/* ==========================================================================
   FOOTER LAYOUT CORRECTIONS
   ========================================================================== */
@media(min-width:900px){
  .foot__top{grid-template-columns:1.7fr 1fr 1fr .9fr 1.25fr;align-items:start}
  .foot__brand{grid-column:auto;max-width:none}
}
@media(min-width:600px) and (max-width:899px){
  .foot__top{grid-template-columns:repeat(2,1fr)}
  .foot__brand{grid-column:1/-1;max-width:none}
}
.foot ul,.foot__bar ul{list-style:none;margin:0;padding:0}
.foot__bar ul li{margin:0}
.foot__news{max-width:320px}
.foot__news input{flex:1;min-width:0}
.foot__news .btn{flex:none;padding-inline:1rem}
.foot__contact li{word-break:break-word}

/* Keep the legal links clear of the floating WhatsApp button. */
.foot__bar{padding-bottom:1.2rem}
@media(min-width:640px){.foot__bar{padding-bottom:4.6rem}}

/* ==========================================================================
   ELEMENTOR COMPATIBILITY
   ========================================================================== */
.section--flush{padding-block:0}
.sdc-block{display:block}

/* Our widgets bring their own full-width sections, so Elementor must not add
   its own gutters around them. */
.elementor-widget-container > .section,
.elementor-widget-container > .hero,
.elementor-widget-container > .pagehead,
.elementor-widget-container > .trust{margin-inline:0}
.elementor-widget-sdc-hero .elementor-widget-container,
.elementor-widget-sdc-page-head .elementor-widget-container,
.elementor-widget-sdc-trust .elementor-widget-container{padding:0}

/* Elementor's editor adds an empty-state placeholder height we do not need. */
.elementor-element .sdc-form{max-width:none}

/* Our widgets carry their own .wrap gutter. Removing it inside Elementor
   columns made every section touch the screen edge on phones, so it stays —
   Elementor columns have no padding of their own by default. */
.elementor-column > .elementor-widget-wrap > .elementor-element > .elementor-widget-container > .sdc-block > .wrap{padding-inline:0}

/* Keep theme headings from inheriting Elementor's global typography resets. */
.elementor-widget-container h1,
.elementor-widget-container h2,
.elementor-widget-container h3,
.elementor-widget-container h4{font-family:var(--ff-display)}

/* The editor preview has no sticky header, so anchor offsets must not jump. */
body.elementor-editor-active{--hdr-h:0px}

/* Quote-only (B2B) mode: the cart is irrelevant, so it is hidden. */
body.sdc-b2b .iconbtn[href*="cart"],
body.sdc-b2b .woocommerce-cart-form,
body.sdc-b2b .cart_totals{display:none!important}

/* WooCommerce toolbar inside the theme's toolbar shell. */
.toolbar .woocommerce-result-count{margin:0;font-size:.86rem;color:var(--slate)}
.toolbar .woocommerce-ordering{margin:0}
.toolbar .woocommerce-ordering select{border:1px solid var(--line);border-radius:var(--r-sm);padding:.5rem .7rem;background:#fff;font-size:.86rem}
.woocommerce .woocommerce-ordering,.woocommerce .woocommerce-result-count{float:none}

/* WooCommerce ships a clearfix ::before/::after on ul.products. In a grid
   container those pseudo-elements become grid items and steal the first
   cells, leaving a blank gap before the first product. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{display:none!important;content:none!important}

/* Same story on the shop layout wrapper and the single-product summary. */
.woocommerce .shop-layout::before,
.woocommerce .shop-layout::after{content:none!important}

/* Product tiles: keep the theme's card look inside WooCommerce loops. */
.woocommerce ul.products li.product{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:0 0 1rem;overflow:hidden;transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s;
  display:flex;flex-direction:column;text-align:left}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:rgba(201,162,39,.5)}
.woocommerce ul.products li.product a img{margin:0;background:var(--mist);aspect-ratio:1;object-fit:contain;
  mix-blend-mode:multiply;padding:.8rem}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--ff-display);font-size:.96rem;
  font-weight:600;line-height:1.35;padding:.2rem 1rem 0;color:var(--ink)}
.woocommerce ul.products li.product .pcard__meta{padding-inline:1rem}
.woocommerce ul.products li.product .price{padding:0 1rem;margin-top:auto;font-size:1.02rem}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .btn{margin:.7rem 1rem 0}
.woocommerce ul.products li.product .onsale{z-index:2}

/* Single product page inside the theme shell.
   The two-column placement is applied ONLY from 900px up — forcing
   grid-column:2 on a single-column grid pushed the summary off-screen
   on phones. */
.woocommerce div.product{display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:minmax(0,1fr)}
.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > .summary{grid-column:1/-1;width:100%!important;float:none!important;margin:0!important;min-width:0}
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .product_meta{grid-column:1/-1;min-width:0}
@media(min-width:900px){
  .woocommerce div.product{grid-template-columns:minmax(0,46%) minmax(0,1fr)}
  .woocommerce div.product > .woocommerce-product-gallery{grid-column:1}
  .woocommerce div.product > .summary{grid-column:2}
}
.woocommerce div.product .product_title{font-family:var(--ff-display)}
.woocommerce div.product .woocommerce-product-gallery img{background:var(--mist);border-radius:var(--r)}

/* ==========================================================================
   FULL-WIDTH SAFETY NET FOR ELEMENTOR CONTENT
   The theme's reading column (.entry) caps its children at 840px. Elementor
   builds full-width sections, so wherever Elementor output ends up inside a
   theme wrapper it must break out of every width cap.
   ========================================================================== */
.sdc-elementor-page{width:100%;max-width:none}

.entry > .elementor,
.entry .elementor,
.entry > .elementor-page,
.wrap-narrow > .elementor,
.sdc-elementor-page > .elementor{max-width:none!important;width:100%}

/* Elementor sections must never inherit the theme's narrow column. */
.entry .elementor-section,
.entry .elementor-container,
.entry .e-con,
.entry .e-con-inner{max-width:none!important}

/* Our own widgets each carry a .wrap, so a second .wrap must not shrink it. */
.elementor .wrap .wrap{max-width:none;padding-inline:0}

/* Elementor's boxed container should line up with the theme's 1280px grid,
   stay centred, and never let text touch the screen edge on smaller screens. */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner{max-width:var(--wrap);margin-inline:auto}
@media(max-width:1340px){
  .elementor-section.elementor-section-boxed > .elementor-container,
  .e-con.e-con-boxed > .e-con-inner{padding-inline:var(--pad)}
}

/* A full-width Elementor section really is full width. */
.elementor-section-full_width > .elementor-container{max-width:none!important}

/* ==========================================================================
   DIVISION CARDS — category artwork as a product shot, not a background
   A full-bleed product photo behind the text made the headings unreadable,
   so the image now sits to one side and the brand gradient stays the card.
   ========================================================================== */
.cblock:has(img){padding-right:clamp(1.5rem,14%,7rem)}
.cblock img{
  position:absolute;
  right:-2%;
  bottom:-6%;
  top:auto;
  left:auto;
  width:auto;
  height:112%;
  max-width:46%;
  object-fit:contain;
  object-position:bottom right;
  z-index:-1;
  opacity:.96;
  mix-blend-mode:normal;
  filter:drop-shadow(0 12px 26px rgba(14,21,34,.28));
  transition:transform .45s var(--ease)}
.cblock:hover img{transform:translateY(-4px) scale(1.03)}

/* Scrim used only when artwork is switched on via sdc_cblock_show_image. */
.cblock:has(img)::after{
  background:linear-gradient(105deg,
    rgba(14,21,34,.78) 0%,
    rgba(14,21,34,.6) 40%,
    rgba(14,21,34,.15) 74%,
    rgba(14,21,34,0) 100%)}
.cblock--gold:has(img)::after{
  background:linear-gradient(105deg,
    rgba(255,255,255,.6) 0%,
    rgba(255,255,255,.32) 42%,
    rgba(255,255,255,0) 80%)}

/* Keep the copy clear of the artwork. */
.cblock:has(img) h3,.cblock:has(img) p,.cblock:has(img) .card__link{max-width:min(100%,30ch)}
.cblock--wide:has(img) h3,.cblock--wide:has(img) p{max-width:min(100%,42ch)}

@media(max-width:560px){
  .cblock{padding-right:1.4rem}
  .cblock img{height:86%;max-width:38%;opacity:.55}
  .cblock h3,.cblock p,.cblock .card__link,
  .cblock--wide h3,.cblock--wide p{max-width:100%}
}

/* ==========================================================================
   MOBILE PASS
   ========================================================================== */

/* --- Shop: two products per row on a phone, not one giant card --- */
@media(max-width:767px){
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .woocommerce ul.products li.product a img{padding:.4rem}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.84rem;padding-inline:.7rem}
  .woocommerce ul.products li.product .price{font-size:.9rem;padding-inline:.7rem}
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .btn{margin:.5rem .7rem 0;font-size:.78rem;padding:.6em .7em}
  .woocommerce ul.products li.product .pcard__meta{padding-inline:.7rem;font-size:.7rem}
  .grid[style*="minmax(228px"],
  .grid[style*="minmax(212px"],
  .grid[style*="minmax(220px"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .pcard__title{font-size:.86rem}
  .pcard__actions .btn{font-size:.74rem;padding:.55em .5em}
  .pcard__media{padding:.5rem}
}
@media(max-width:400px){
  .woocommerce ul.products{gap:10px}
  .pcard__meta{font-size:.68rem}
}

/* --- Shop filters: a tap-to-open panel instead of a screenful of links --- */
@media(max-width:999px){
  .shop-layout{display:block}
  .filters{position:static;margin-bottom:1.2rem;padding:0;border:0;background:transparent}
  .filters > h3{margin:0;border:1px solid var(--line);border-radius:var(--r);background:#fff;
    padding:.85rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;cursor:pointer;
    font-size:.9rem}
  .filters > h3::after{content:"";width:9px;height:9px;border-right:2px solid var(--slate);
    border-bottom:2px solid var(--slate);transform:rotate(45deg);margin-left:auto;transition:transform .25s var(--ease)}
  .filters.is-open > h3::after{transform:rotate(-135deg)}
  .filters > *:not(h3){display:none}
  .filters.is-open{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:1rem}
  .filters.is-open > h3{border:0;padding:0 0 .6rem;background:transparent}
  .filters.is-open > *:not(h3){display:block}
  .toolbar{flex-direction:column;align-items:stretch;gap:.6rem}
  .toolbar .woocommerce-result-count{text-align:center}
  .toolbar select,.toolbar .woocommerce-ordering select{width:100%}
  .toolbar input[type=search]{max-width:none!important;width:100%}
}

/* --- Tables never push the page sideways --- */
@media(max-width:700px){
  .spec,table.data,.woocommerce table.shop_table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .spec th{width:auto;white-space:normal}
  .spec th,.spec td{padding:.6rem .75rem;font-size:.85rem}
  .entry table{display:block;overflow-x:auto}
}

/* --- Buttons behave on a phone --- */
@media(max-width:600px){
  .hero__cta{display:grid;gap:.6rem}
  .hero__cta .btn{width:100%}
  .ctaband .flex{justify-content:stretch}
  .ctaband .flex .btn{flex:1 1 100%}
  .btn{white-space:normal}
  .flex > .btn{flex:1 1 auto}
}

/* --- Product gallery / zoom image must not exceed the screen --- */
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image{max-width:100%}
.woocommerce div.product img.zoomImg{display:none!important}
.woocommerce div.product .woocommerce-product-gallery img{width:100%;height:auto}

/* --- Single product summary / tabs on a phone --- */
@media(max-width:767px){
  .woocommerce div.product .product_title{font-size:1.5rem}
  .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
  .woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0;flex:1 1 auto;text-align:center}
  .woocommerce div.product form.cart .button{width:100%;margin-top:.5rem}
  .woocommerce div.product form.cart div.quantity{float:none;margin-bottom:.5rem}
  .woocommerce div.product .btn--wa{margin-left:0!important;width:100%;justify-content:center}
  .woocommerce div.product table.variations td,
  .woocommerce div.product table.variations th{display:block;width:100%;text-align:left;padding:.25rem 0}
  .woocommerce div.product table.variations select{width:100%}
}

/* --- Forms & split sections --- */
@media(max-width:700px){
  .split,.split--wide{grid-template-columns:1fr!important}
  .form-row{grid-template-columns:1fr}
  aside[style*="sticky"],.filters[style*="sticky"]{position:static!important}
  .entry > *{max-width:100%}
}

/* --- Page heads and typography on small screens --- */
@media(max-width:600px){
  .pagehead__in{padding-block:1.6rem}
  .pagehead h1{font-size:clamp(1.7rem,7.5vw,2.3rem)}
  .hero h1{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .lockup{gap:.9rem}
  .lockup__crest{width:clamp(70px,20vw,96px)}
  .lockup__name{font-size:clamp(1rem,5vw,1.3rem)}
  .lockup__tr{font-size:.74rem;line-height:1.6}
  .section{padding-block:clamp(34px,9vw,54px)}
  .mega{display:none!important}
}

/* --- Download rows and accordions --- */
@media(max-width:520px){
  .dl{flex-wrap:wrap;gap:.7rem}
  .dl__meta{flex:1 1 60%;min-width:0}
  .dl__meta b{font-size:.88rem}
  .acc__q{padding:.9rem 1rem;font-size:.92rem;gap:.6rem}
  .honey-legend a{font-size:.68rem}
  .trust__item{padding:.9rem 1rem}
}

/* --- Elementor columns must stack on a phone even if a kit says otherwise --- */
@media(max-width:767px){
  .elementor-column,.e-con > .e-child{width:100%!important;flex:0 0 100%!important}
  .elementor-section .elementor-container{flex-wrap:wrap}
}

/* File inputs have an intrinsic width that ignores the form grid and pushed
   the enquiry and CV forms past the screen edge on small phones. */
input[type=file]{
  width:100%;
  max-width:100%;
  border:1.5px dashed var(--line);
  border-radius:var(--r);
  padding:.7rem .8rem;
  background:var(--mist);
  font-size:.86rem;
  cursor:pointer}
input[type=file]:hover{border-color:var(--gold)}
input[type=file]::file-selector-button{
  border:0;border-radius:var(--r-sm);padding:.45em .9em;margin-right:.7rem;cursor:pointer;
  background:var(--ink);color:#fff;font-family:var(--ff-display);font-weight:600;font-size:.82rem}
@media(max-width:420px){
  input[type=file]{font-size:.78rem;padding:.6rem}
  input[type=file]::file-selector-button{padding:.4em .6em;margin-right:.5rem;font-size:.76rem}
}

/* Decorative card hexagon stays inside its card on every screen. */
.cblock{overflow:hidden}
@media(max-width:600px){.cblock__hex{width:110px;height:126px;top:-22px;right:-22px}}

/* The drawer's expand arrow was floated, so it dropped onto the next row and
   looked like it belonged to the item below. Anchor it to its own row. */
.drawer nav li{position:relative}
.drawer nav li > a{padding-right:52px}
.drawer .toggle-sub{
  position:absolute;
  top:.5rem;
  right:0;
  float:none;
  margin:0;
  width:40px;
  height:40px;
  border-radius:10px;
  z-index:2}
.drawer nav .sub-menu li > a{padding-right:52px}
.drawer nav .sub-menu .toggle-sub{top:.35rem}

/* Loop buttons line up when product titles wrap to different heights. */
@media(max-width:767px){
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .btn{display:block;width:auto;text-align:center}
  .woocommerce ul.products li.product{justify-content:space-between}
}

/* Comfortable tap targets throughout on touch screens. */
@media(pointer:coarse){
  .iconbtn{width:46px;height:46px}
  .topbar a{padding-block:.35rem}
  .lang a{padding:.45em .6em}
  .fgroup label{padding:.5rem .3rem}
  .foot li a,.foot__bar a{display:inline-block;padding-block:.25rem}
  .crumbs a{padding-block:.2rem}
}

/* A slightly roomier gutter on phones so cards never kiss the screen edge. */
@media(max-width:600px){
  :root{--pad:18px}
  .wrap{padding-inline:var(--pad)}
}

/* Footer contact desks: Sales (Countrywide) / Info / Sales (International) */
.foot__desk-label{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:.15rem}
.foot__contact .foot__desk{margin-bottom:.9rem}
.foot__contact .foot__desk a{display:inline-block}
.foot__wa{display:inline-flex;align-items:center;margin-left:.45rem;vertical-align:-3px}
.foot__wa svg{width:15px;height:15px;color:#25D366}

/* ---------- Contact desks card ---------- */
.contact-card .desks{list-style:none;margin:1rem 0 0;padding:0}
.desk{padding:.85rem 0;border-top:1px solid var(--line)}
.desk:first-child{border-top:0;padding-top:0}
.desk__label{display:block;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-dp);font-weight:700;font-family:var(--ff-display);margin-bottom:.35rem}
.desk__row{display:flex;gap:.6rem;align-items:flex-start;flex-wrap:wrap;
  font-size:.92rem;color:var(--slate);line-height:1.5;margin-bottom:.2rem}
.desk__row svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--muted)}
.desk__row a{color:var(--ink)}
.desk__row a:hover{color:var(--gold-dp)}
.desk__wa{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:600;
  color:#128C4B!important;background:#E7F9EE;border-radius:999px;padding:.15rem .6rem;margin-left:.2rem}
.desk__wa svg{width:13px;height:13px;margin-top:0;color:#128C4B}
.desk__wa:hover{background:#d3f4e1}
@media(max-width:480px){
  .desk__row{font-size:.86rem}
  .desk__row--phone{flex-wrap:wrap}
}

/* ==========================================================================
   LOGO SIZING
   WooCommerce ships `.woocommerce-page img { height:auto; max-width:100% }`,
   which outranks a single-class rule and blew the crest up to its full
   intrinsic size on the shop, product and cart pages. These selectors carry
   two classes so they win everywhere.
   ========================================================================== */
.brand .brand__mark,
.drawer__head .brand__mark,
.site-header .brand__mark{height:52px;width:auto;max-width:none;flex:none;object-fit:contain}
@media(max-width:700px){
  .brand .brand__mark,
  .drawer__head .brand__mark,
  .site-header .brand__mark{height:44px}
}
.lockup .lockup__crest{width:clamp(92px,11vw,150px);height:auto;max-width:none;flex:none;object-fit:contain}
@media(max-width:600px){
  .lockup .lockup__crest{width:clamp(70px,20vw,96px)}
}
.foot .foot__logo,
.site-footer .foot__logo{height:64px;width:auto;max-width:none;object-fit:contain}

/* ==========================================================================
   HEADER BRAND — the name sits on top, the translations under it, exactly
   as on the front page. They were inline spans, so they ran side by side.
   ========================================================================== */
.brand__txt{display:flex;flex-direction:column;justify-content:center;gap:2px}
.brand__name{display:block;font-family:var(--ff-display);font-weight:800;font-size:1.02rem;
  letter-spacing:.055em;text-transform:uppercase;color:var(--ink);line-height:1.12}
.brand__sub{display:flex;flex-direction:column;gap:0;font-size:.63rem;line-height:1.5;
  color:var(--muted);letter-spacing:.02em;text-transform:none;margin-top:1px}
.brand__sub .ar{font-family:var(--ff-ar);font-size:.78rem;line-height:1.35;color:var(--gold-dp)}
@media(min-width:1280px){
  .brand__name{font-size:1.08rem}
  .brand__sub{font-size:.67rem}
}

/* The header brand now carries four motto lines, so the crest is sized to
   match the text block instead of floating small beside it. */
@media(min-width:1100px){
  .brand .brand__mark,
  .site-header .brand__mark{height:70px}
  .brand{gap:1rem}
  .brand__name{font-size:1.06rem;letter-spacing:.05em}
  .brand__sub{font-size:.66rem;line-height:1.42}
  .brand__sub .ar{font-size:.8rem;line-height:1.3;margin-top:1px}
}
@media(min-width:1440px){
  .brand .brand__mark,
  .site-header .brand__mark{height:76px}
  .brand__name{font-size:1.12rem}
  .brand__sub{font-size:.7rem}
}

/* ==========================================================================
   HEADER CREST — prominent at the top of the page, and it shrinks once the
   header sticks so a tall bar never eats the screen while scrolling.
   ========================================================================== */
.brand .brand__mark,
.site-header .brand__mark,
.drawer__head .brand__mark{
  transition:height .28s var(--ease);
  filter:drop-shadow(0 2px 3px rgba(18,24,38,.14))}

/* phones */
.brand .brand__mark,
.site-header .brand__mark{height:56px}

@media(min-width:701px){
  .brand .brand__mark,
  .site-header .brand__mark{height:78px}
}
@media(min-width:1100px){
  .brand .brand__mark,
  .site-header .brand__mark{height:96px}
  .brand{gap:1.1rem}
  .brand__name{font-size:1.2rem;letter-spacing:.055em}
  .brand__sub{font-size:.72rem;line-height:1.5}
  .brand__sub .ar{font-size:.88rem;line-height:1.35}
}
@media(min-width:1440px){
  .brand .brand__mark,
  .site-header .brand__mark{height:106px}
  .brand__name{font-size:1.3rem}
  .brand__sub{font-size:.76rem}
  .brand__sub .ar{font-size:.94rem}
}

/* Once the page is scrolled the header compacts. */
.site-header.is-stuck .brand__mark{height:52px}
@media(min-width:1100px){
  .site-header.is-stuck .brand__mark{height:62px}
  .site-header.is-stuck .brand__name{font-size:1.02rem}
  .site-header.is-stuck .brand__sub{font-size:.64rem;line-height:1.4}
  .site-header.is-stuck .brand__sub .ar{font-size:.76rem}
}
.site-header.is-stuck .header__main{min-height:68px}

/* The drawer logo gets the same presence. */
.drawer__head .brand__mark{height:62px}

/* Breathing room around the bigger crest, and the brand wordmark stays a
   desktop-only element — a later rule had re-shown it on phones and pushed
   the header to nearly 200px tall. */
.brand__txt{display:none}
@media(min-width:1100px){
  .brand__txt{display:flex;flex-direction:column;justify-content:center;gap:2px}
}
.header__main{padding-block:.55rem}
@media(min-width:1100px){.header__main{padding-block:.75rem}}
.site-header.is-stuck .header__main{padding-block:.45rem}

/* The Arabic motto is RTL, so a full-width flex row pushed it to the right
   edge and it no longer lined up with the three Latin lines above it.
   Letting every motto line shrink to its own text keeps the block flush. */
.brand__sub{align-items:flex-start}
.brand__sub > *{max-width:100%}

/* overflow-x:hidden on <html>/<body> turns them into scroll containers, and a
   position:sticky header then sticks to a box that never scrolls — so the
   header slid away with the page. overflow-x:clip stops sideways scrolling
   without creating that container. */
html,body{overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}

/* On phones the search sits on its own row, so a stuck header ate 129px of a
   small screen. Scrolled, the bar keeps the crest and the menu only. */
@media(max-width:700px){
  .brand .brand__mark,
  .site-header .brand__mark{height:60px}
  .site-header.is-stuck .hsearch{display:none}
  .site-header.is-stuck .brand__mark{height:48px}
  .site-header.is-stuck .header__main{min-height:60px}
}

/* ==========================================================================
   TRUST STRIP — the five promises were set in small grey type and read as
   fine print. They now carry the weight of a section heading: a gold rule
   above the row, larger display-face titles, a tinted icon badge and real
   vertical room, so the band has the same presence as the headings below it.
   ========================================================================== */
.trust{background:var(--mist,#f6f7f9);border-top:3px solid var(--gold);border-bottom:1px solid var(--line)}
.trust__in{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px}
.trust__item{flex-direction:column;align-items:flex-start;gap:.9rem;padding:1.75rem 1.4rem}
.trust__item svg{width:22px;height:22px;color:var(--gold-dp);flex:none;
  box-sizing:content-box;padding:10px;border-radius:12px;
  background:rgba(201,162,39,.12);box-shadow:inset 0 0 0 1px rgba(201,162,39,.22)}
.trust__item > span{display:flex;flex-direction:column;gap:.3rem}
.trust__item b{font-family:var(--ff-display);font-size:1.12rem;font-weight:700;
  letter-spacing:-.012em;line-height:1.2;color:var(--ink)}
.trust__item span span,
.trust__item b + span{font-size:.88rem;line-height:1.5;color:var(--slate,var(--muted))}

@media(min-width:1100px){
  .trust__item{padding:2rem 1.6rem}
  .trust__item b{font-size:1.2rem}
  .trust__item svg{width:24px;height:24px}
}
@media(max-width:700px){
  .trust__in{grid-template-columns:1fr}
  .trust__item{flex-direction:row;align-items:center;gap:1rem;padding:1.15rem 1rem}
  .trust__item b{font-size:1.04rem}
  .trust__item svg{padding:8px}
}

/* ==========================================================================
   BROCHURE STRIP — a division's own catalogue, offered right under its
   heading rather than buried in the downloads library.
   ========================================================================== */
.brochure-strip{background:var(--mist,#f6f7f9);border-bottom:1px solid var(--line)}
.brochure-strip__in{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;
  justify-content:space-between;padding-block:1.1rem}
.brochure-strip__txt{display:flex;flex-direction:column;gap:.15rem;margin:0}
.brochure-strip__txt strong{font-family:var(--ff-display);font-size:1.02rem;color:var(--ink)}
.brochure-strip__txt span{font-size:.86rem;color:var(--muted)}
.brochure-strip__act{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.brochure-strip .btn svg{width:1.05em;height:1.05em;margin-inline-end:.5em}
@media(max-width:700px){
  .brochure-strip__in{flex-direction:column;align-items:stretch;padding-block:1rem}
  .brochure-strip__act{flex-direction:column;align-items:stretch}
  .brochure-strip__act .btn{justify-content:center}
}