/* ===========================================================================
   SNIPER SAFETY - design system
   Navy scale is sampled from the real logo artwork: the eagle prints #182957.
   Type is the same pairing the Sniper Shopping store already serves:
   Oswald for display, Inter for UI. Content width 1200px, matching the store.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens */

/* ---------------------------------------------------------------- reset */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--ui);color:var(--body);background:var(--surface);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--ink);margin:0;font-weight:600;line-height:1.14;letter-spacing:.005em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- layout */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:72px 0}
.section--tight{padding:48px 0}
.section--tint{background:var(--surface-2)}
.section--navy{background:var(--navy-700);color:#fff}
.section--navy h2,.section--navy h3{color:#fff}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}
.sec-head h2{font-size:32px;text-transform:uppercase;letter-spacing:.02em}
.sec-head .kicker{margin-bottom:6px}
.sec-head a{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-600);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sec-head a:hover{color:var(--navy-500)}
.kicker{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--navy-400)}
.section--navy .kicker{color:var(--amber)}

/* ---------------------------------------------------------------- icons */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
.ic--lg{width:26px;height:26px;stroke-width:1.5}
.ic--xl{width:34px;height:34px;stroke-width:1.35}
.ic--sm{width:16px;height:16px;stroke-width:1.8}

/* An icon supplied as a picture rather than drawn. The file is used as a mask,
   not as an image: the artwork's own alpha decides the shape and the colour
   comes from currentColor, so an uploaded icon still turns orange on hover,
   white on the navy band and muted in the filter rail - exactly like a drawn
   one. The file must have a transparent background for this to work, which is
   the one requirement the admin's upload has to check. */
.ic--img{display:inline-block;background-color:currentColor;stroke:none;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r-pill);font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;transition:.22s var(--ease-out);white-space:nowrap}
.btn .ic{width:17px;height:17px;stroke-width:2}
.btn--amber{background:var(--amber);color:var(--navy-900)}
.btn--amber:hover{background:var(--amber-600);transform:translateY(-1px)}
.btn--navy{background:var(--navy-700);color:#fff}
.btn--navy:hover{background:var(--navy-600);transform:translateY(-1px)}
.btn--wire{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn--wire:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--outline{border:1.5px solid var(--navy-700);color:var(--navy-700)}
.btn--outline:hover{background:var(--navy-700);color:#fff}
.btn--sm{padding:10px 18px;font-size:11px}
.btn--block{width:100%}

/* ---------------------------------------------------------------- chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap}
.chip--cert{border:1px solid var(--navy-100);background:var(--navy-50);color:var(--navy-600)}
.chip--new{background:var(--amber);color:var(--navy-900)}
.chip--bulk{background:var(--navy-700);color:#fff}
.chip--stock{background:rgba(30,158,98,.12);color:var(--ok)}
.chip--oos{background:rgba(198,40,40,.1);color:#C62828;border:1px solid rgba(198,40,40,.22)}

/* ================================================================ HEADER */
.topbar{background:var(--navy-800);color:rgba(255,255,255,.82);font-size:12px}
.topbar .wrap{display:flex;align-items:center;gap:22px;height:38px}
.topbar a{display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:#fff}
.topbar .spacer{margin-inline-start:auto}
.topbar .ic{width:14px;height:14px}

.header{position:sticky;top:0;z-index:60;background:var(--navy-700);color:#fff}
.header .wrap{display:flex;align-items:center;gap:26px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:12px;padding:8px 0}
.brand img{height:42px;width:auto}
.brand__txt{display:none}

.nav{display:flex;align-items:center;gap:4px;height:var(--header-h)}
/* static, so the mega panel below resolves against the sticky header and spans
   the full width of it - not the width of one nav item */
.nav__item{position:static;display:flex;align-items:center;height:100%}
.nav__link{position:relative;display:inline-flex;align-items:center;gap:6px;padding:0 14px;height:100%;
  font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.86);transition:color .18s ease}
.nav__link:hover,.nav__item[aria-expanded="true"] .nav__link{color:#fff}
.nav__link .ic{width:14px;height:14px;transition:transform .22s var(--ease-out)}
.nav__item[aria-expanded="true"] .nav__link .ic{transform:rotate(180deg)}
.nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
.nav__item:hover .nav__link::after,
.nav__item[aria-expanded="true"] .nav__link::after{transform:scaleX(1)}

.header__tools{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.iconbtn{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;position:relative;
  color:#fff;transition:background .2s ease}
.iconbtn:hover{background:rgba(255,255,255,.1)}
.badge{position:absolute;top:3px;inset-inline-end:2px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-pill);
  background:var(--amber);color:var(--navy-900);font-size:10px;font-weight:700;display:grid;place-items:center}

/* division switch pill */
.switch{display:inline-flex;align-items:center;gap:10px;padding:6px 15px 6px 10px;border-radius:var(--r-pill);
  border:1.5px solid rgba(255,255,255,.4);color:#fff;transition:.24s var(--ease-out)}
.switch:hover{background:#fff;color:var(--navy-700);border-color:#fff}
.switch:hover .switch__mark{filter:none;transform:translateY(-2px)}
.switch__mark{height:22px;width:auto;filter:brightness(0) invert(1);transition:.22s var(--ease-out)}
.switch__txt{display:flex;flex-direction:column;line-height:1.08;text-align:start}
.switch__name{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.switch__cap{font-size:8px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.7}

/* ---------------------------------------------------------- mega menus */
.mega{position:absolute;top:100%;left:0;right:0;background:var(--mega-bg,#fff);color:var(--body);
  box-shadow:var(--shadow-3);border-top:2px solid var(--amber);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s var(--ease-out);z-index:59}
.nav__item[aria-expanded="true"] .mega{opacity:1;visibility:visible;transform:none}
.mega__inner{max-width:var(--container);margin:0 auto;padding:34px var(--gutter) 30px;
  display:grid;grid-template-columns:repeat(4,1fr) 280px;gap:28px}
.mega__col h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-700);
  margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.mega__inner--4{grid-template-columns:repeat(4,1fr)}
/* the Men / Women pair under Apparel - the gender filter as an entry point,
   since the sections themselves are no longer split by it */
.mega__seg{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.mega__seg a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 0;border:1px solid var(--line);border-radius:8px;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;transition:.18s var(--ease-out)}
.mega__seg a:hover{border-color:var(--amber-600);color:var(--amber-600)}
.mega__link{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:13px;color:var(--body);
  transition:color .16s ease}
.mega__link:hover{color:var(--navy-600)}
.mega__link .ic{color:var(--navy-400);margin-top:1px}
.mega__link:hover .ic{color:var(--amber-600)}
.mega__link small{display:block;font-size:11.5px;color:var(--muted);line-height:1.45}
.mega__promo{background:var(--navy-700);border-radius:var(--r-card);padding:24px;color:#fff;
  display:flex;flex-direction:column;gap:12px;justify-content:center}
.mega__promo h5{font-family:var(--display);font-size:20px;color:#fff;text-transform:uppercase;letter-spacing:.03em}
.mega__promo p{font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.6}
.mega__inner--5{grid-template-columns:repeat(5,1fr)}
.h-brand{color:var(--amber)}
.mega--industries .mega__inner{grid-template-columns:repeat(5,1fr)}
.mega--industries .ind-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
  border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink);transition:.2s var(--ease-out)}
.mega--industries .ind-link:hover{border-color:var(--navy-500);background:var(--navy-50);transform:translateY(-1px)}
.mega--industries .ind-link .ic{color:var(--navy-600)}

/* ------------------------------------------------------- mobile header */
.burger{display:none}
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden}
.drawer__scrim{position:absolute;inset:0;background:rgba(12,20,46,.5);opacity:0;transition:.3s ease}
.drawer__panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(400px,88vw);background:#fff;
  transform:translateX(-102%);transition:transform .34s var(--ease);display:flex;flex-direction:column}
[dir="rtl"] .drawer__panel{transform:translateX(102%)}
.drawer.open{visibility:visible}
.drawer.open .drawer__scrim{opacity:1}
.drawer.open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--navy-700)}
.drawer__head img{height:34px;filter:brightness(0) invert(1)}
.drawer__head .iconbtn{color:#fff}
.drawer__body{overflow-y:auto;padding:12px 0 30px;flex:1}
.acc__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 20px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--line-soft)}
.acc__head .ic{transition:transform .22s var(--ease-out);color:var(--navy-400)}
.acc__head[aria-expanded="true"] .ic{transform:rotate(180deg)}
.acc__body{display:none;padding:6px 20px 14px;background:var(--navy-50)}
.acc__body a{display:flex;gap:9px;padding:9px 0;font-size:13.5px;color:var(--body);border-bottom:1px solid var(--line-soft)}
.acc__body a:last-child{border-bottom:0}
.acc__head[aria-expanded="true"] + .acc__body{display:block}
.drawer__cta{padding:18px 20px;display:grid;gap:10px;border-top:1px solid var(--line)}

/* ================================================================== HERO */
.hero{position:relative;color:#fff;background:var(--navy-700);overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(12,20,46,.97) 0%,rgba(18,32,74,.9) 36%,rgba(24,41,87,.42) 72%,rgba(24,41,87,.12) 100%)}
[dir="rtl"] .hero__scrim{transform:scaleX(-1)}
.hero .wrap{position:relative;padding:86px 24px 92px;min-height:540px;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.04;color:#fff;max-width:15ch;margin-bottom:18px;text-transform:uppercase}
.hero p{max-width:480px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.86);margin-bottom:30px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__strip{position:relative;background:rgba(12,20,46,.72);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.12)}
.hero__strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:18px 24px;min-height:0}
.hero__strip div{display:flex;align-items:center;gap:11px;font-size:12.5px;color:rgba(255,255,255,.88)}
.hero__strip .ic{color:var(--amber)}

/* page hero (about / contact) */
.phero{background:var(--navy-700);color:#fff;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;inset-inline-end:-80px;top:-60px;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,184,0,.16),transparent 62%)}
.phero .wrap{position:relative;padding:58px 24px 62px}
.phero h1{color:#fff;font-size:clamp(32px,4.4vw,52px);text-transform:uppercase;margin:10px 0 14px}
.phero p{max-width:620px;color:rgba(255,255,255,.84);font-size:15.5px}
.crumbs{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.crumbs a:hover{color:#fff}
.crumbs .ic{width:13px;height:13px}

/* ======================================================= category cards */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{position:relative;display:flex;flex-direction:column;gap:9px;padding:22px;min-height:192px;
  border-radius:var(--r-card);overflow:hidden;background:var(--navy-700);color:#fff;isolation:isolate;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
/* Now that the tile is the photograph - no icon, no arrow - the photograph has
   to be readable. It runs at full strength with a bottom-weighted scrim: clear
   at the top where the picture is, dark under the text where it has to be. */
.cat__bg{position:absolute;inset:0;z-index:-2;object-fit:cover;width:100%;height:100%;opacity:1;
  transition:transform .55s var(--ease-out),opacity .3s ease}
.cat:hover .cat__bg{transform:scale(1.045)}
.cat::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,16,38,.93) 0%,rgba(10,16,38,.62) 38%,rgba(10,16,38,.14) 100%)}
.cat .ic{color:var(--amber)}
.cat h3{font-size:18px;color:#fff;text-transform:uppercase;letter-spacing:.02em;margin-top:auto;line-height:1.16}
.cat p{font-size:12px;color:rgba(255,255,255,.72);line-height:1.5}
.cat__go{position:absolute;top:20px;inset-inline-end:20px;color:rgba(255,255,255,.55);
  transition:transform .3s var(--ease-out),color .2s ease}
[dir="rtl"] .cat__go{transform:scaleX(-1)}
.cat:hover .cat__go{color:var(--amber);transform:translateX(4px)}
[dir="rtl"] .cat:hover .cat__go{transform:scaleX(-1) translateX(4px)}

/* ======================================================== product cards */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;transition:.26s var(--ease-out)}
.prod:hover{border-color:var(--navy-300);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.prod__media{position:relative;aspect-ratio:1;background:#fff;padding:14px;display:grid;place-items:center;
  border-bottom:1px solid var(--line-soft)}
.prod__media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .4s var(--ease-out)}
.prod:hover .prod__media img{transform:scale(1.04)}
.prod__flags{position:absolute;top:12px;inset-inline-start:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.prod__body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.prod__brand{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-400)}
.prod__name{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;min-height:2.8em}
.prod__certs{display:flex;flex-wrap:wrap;gap:5px}
.prod__price{font-family:var(--display);font-size:21px;font-weight:600;color:var(--navy-700);margin-top:auto;
  display:flex;align-items:baseline;gap:8px}
.prod__price small{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.prod__price s{font-size:14px;color:var(--navy-300);font-family:var(--ui)}
.prod__actions{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:11px}
.prod__actions .btn{padding:11px 14px;font-size:10.5px;letter-spacing:.1em}
.iconaction{width:42px;border:1.5px solid var(--line);border-radius:var(--r-pill);display:grid;place-items:center;
  color:var(--navy-600);transition:.2s var(--ease-out)}
.iconaction:hover{border-color:var(--navy-700);background:var(--navy-50)}

/* ========================================================= industry grid */
.ind-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ind{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--line);border-radius:var(--r-card);
  background:#fff;transition:.26s var(--ease-out)}
.ind:hover{border-color:var(--navy-500);background:var(--navy-50);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.ind__ic{width:46px;height:46px;border-radius:12px;background:var(--navy-50);color:var(--navy-700);
  display:grid;place-items:center;transition:.26s var(--ease-out)}
.ind:hover .ind__ic{background:var(--navy-700);color:var(--amber)}
.ind h3{font-size:14px;line-height:1.3;font-family:var(--ui);font-weight:600;color:var(--ink)}
.ind p{font-size:11.5px;color:var(--muted);line-height:1.5}

/* ============================================================== brands */
.brand-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.brand-strip div{height:76px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;
  font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.06em;color:var(--navy-300);
  text-align:center;padding:8px;line-height:1.15;transition:.24s var(--ease-out)}
.brand-strip div:hover{color:var(--navy-700);border-color:var(--navy-300);background:#fff;box-shadow:var(--shadow-1)}

/* ================================================================= why */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.why{display:flex;gap:15px}
.why__ic{width:44px;height:44px;flex:none;border-radius:11px;background:var(--amber-soft);color:var(--amber-600);
  display:grid;place-items:center}
.section--navy .why__ic{background:rgba(255,255,255,.1);color:var(--amber)}
.why h3{font-family:var(--ui);font-size:14.5px;font-weight:600;margin-bottom:5px}
.why p{font-size:13px;color:var(--muted);line-height:1.6}
.section--navy .why p{color:rgba(255,255,255,.72)}

/* ============================================================ corporate */
.corp{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  background:var(--navy-700);border-radius:16px;padding:46px;color:#fff;position:relative;overflow:hidden}
.corp::after{content:"";position:absolute;inset-inline-end:-90px;bottom:-110px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,0,.18),transparent 64%)}
.corp>*{position:relative}
.corp h2{font-size:30px;color:#fff;text-transform:uppercase;margin-bottom:12px}
.corp p{color:rgba(255,255,255,.8);margin-bottom:24px;max-width:46ch}
.corp__cta{display:flex;flex-wrap:wrap;gap:12px}
.corp__list{display:grid;gap:13px}
.corp__list div{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,.9)}
.corp__list .ic{color:var(--amber);margin-top:2px}

/* =============================================================== footer */
.footer{background:var(--navy-900);color:rgba(255,255,255,.7);padding:58px 0 0;font-size:13.5px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:34px;padding-bottom:42px}
.footer h4{font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer li{margin-bottom:9px}
.footer a:hover{color:var(--amber)}
.footer__brand img{height:52px;margin-bottom:16px}
.footer__brand p{font-size:13px;line-height:1.7;max-width:34ch;margin-bottom:16px}
.footer__contact div{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;line-height:1.55}
.footer__contact .ic{color:var(--amber);margin-top:2px}
.footer__bar{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;align-items:center;
  justify-content:space-between;gap:20px;font-size:12px;flex-wrap:wrap}
.footer__marks{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.footer__marks span{border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:5px 10px;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase}

/* ================================================================ about */
.story{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.story h2{font-size:30px;text-transform:uppercase;margin-bottom:18px}
.story p{margin-bottom:16px;line-height:1.8}
.story__media{position:relative}
.story__media img{border-radius:var(--r-card);width:100%;height:440px;object-fit:cover}
.story__badge{position:absolute;inset-block-end:-18px;inset-inline-start:-18px;background:var(--amber);color:var(--navy-900);
  border-radius:var(--r-card);padding:18px 22px;box-shadow:var(--shadow-2)}
.story__badge b{font-family:var(--display);font-size:32px;display:block;line-height:1}
.story__badge span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pillar{border:1px solid var(--line);border-radius:var(--r-card);padding:28px;background:#fff}
.pillar .ic{color:var(--navy-600);margin-bottom:14px}
.pillar h3{font-size:18px;text-transform:uppercase;margin-bottom:9px}
.pillar p{font-size:13.5px;color:var(--muted);line-height:1.7}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat b{font-family:var(--display);font-size:40px;color:#fff;display:block;line-height:1.05}
.stat span{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}

.branches{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.branch{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:.26s var(--ease-out)}
.branch:hover{box-shadow:var(--shadow-2);border-color:var(--navy-300)}
.branch__head{background:var(--navy-700);color:#fff;padding:16px 20px;display:flex;align-items:center;gap:11px}
.branch__head h3{font-size:16px;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.branch__head .ic{color:var(--amber)}
.branch__body{padding:18px 20px 20px;display:grid;gap:11px;font-size:13.5px}
.branch__body div{display:flex;gap:10px;align-items:flex-start;line-height:1.55}
.branch__body .ic{color:var(--navy-400);margin-top:2px}

/* ============================================================== contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start}
.contact-cards{display:grid;gap:14px}
.ccard{display:flex;gap:15px;padding:22px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;
  transition:.24s var(--ease-out)}
.ccard:hover{border-color:var(--navy-300);box-shadow:var(--shadow-1)}
.ccard__ic{width:44px;height:44px;flex:none;border-radius:11px;background:var(--navy-50);color:var(--navy-700);
  display:grid;place-items:center}
.ccard h3{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.ccard a,.ccard p{font-size:15px;color:var(--ink);font-weight:500;line-height:1.5;display:block}
.ccard a:hover{color:var(--navy-600)}
.ccard small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px}

.form{border:1px solid var(--line);border-radius:16px;padding:32px;background:#fff;box-shadow:var(--shadow-1)}
.form h2{font-size:24px;text-transform:uppercase;margin-bottom:6px}
.form>p{font-size:13.5px;color:var(--muted);margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-600);margin-bottom:7px}
.field label .req{color:var(--warn)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:var(--r-input);background:#fff;font-size:14.5px;transition:.18s ease}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy-500);outline:none;
  box-shadow:0 0 0 3px rgba(46,68,137,.12)}
.field textarea{min-height:130px;resize:vertical}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.6}
.form__ok{display:none;align-items:flex-start;gap:12px;padding:16px;border-radius:var(--r-input);
  background:rgba(30,158,98,.1);color:#14724a;font-size:13.5px;margin-bottom:18px}
.form__ok.show{display:flex}
.form__ok .ic{color:var(--ok);margin-top:2px}

.map{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);height:360px;background:var(--navy-50);
  display:grid;place-items:center}
.map iframe{width:100%;height:100%;border:0}

.faq{display:grid;gap:12px;max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;font-size:14.5px;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{color:var(--navy-400);transition:transform .22s var(--ease-out)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq p{padding:0 22px 20px;font-size:13.5px;color:var(--muted);line-height:1.75}

/* =============================================================== toast */
.toast{position:fixed;inset-block-end:24px;inset-inline-start:50%;transform:translate(-50%,18px);opacity:0;
  background:var(--navy-900);color:#fff;padding:13px 22px;border-radius:var(--r-pill);font-size:13.5px;
  z-index:200;transition:.3s var(--ease-out);pointer-events:none;box-shadow:var(--shadow-3);max-width:90vw}
[dir="rtl"] .toast{transform:translate(50%,18px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
[dir="rtl"] .toast.show{transform:translate(50%,0)}

/* ========================================================== responsive */
@media (max-width:1180px){
  .cat-grid,.prod-grid{grid-template-columns:repeat(3,1fr)}
  .ind-grid{grid-template-columns:repeat(4,1fr)}
  .brand-strip{grid-template-columns:repeat(6,1fr)}
  .footer__top{grid-template-columns:1.3fr 1fr 1fr;gap:28px}
}
@media (max-width:1023px){
  :root{--header-h:66px}
  .nav,.switch__txt{display:none}
  .burger{display:grid}
  .header .wrap{gap:14px}
  .hero .wrap{padding:60px 24px 66px;min-height:440px}
  .hero__strip .wrap{grid-template-columns:repeat(2,1fr);gap:14px}
  .cat-grid,.prod-grid{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .corp{grid-template-columns:1fr;padding:32px;gap:26px}
  .story{grid-template-columns:1fr;gap:34px}
  .story__media img{height:330px}
  .contact-grid{grid-template-columns:1fr;gap:30px}
  .branches{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr;gap:26px}
  .stats{grid-template-columns:repeat(2,1fr);gap:26px}
}
@media (max-width:767px){
  :root{--gutter:16px}
  .section{padding:52px 0}
  .topbar .wrap{gap:14px;overflow-x:auto;white-space:nowrap}
  .topbar .hide-sm{display:none}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .sec-head h2{font-size:25px}
  .hero h1{font-size:31px}
  .hero p{font-size:14.5px}
  .hero__cta .btn{flex:1;min-width:0}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .brand-strip{grid-template-columns:repeat(3,1fr)}
  .why-grid,.pillars{grid-template-columns:1fr}
  .field--row{grid-template-columns:1fr}
  .form{padding:22px}
  .corp h2{font-size:24px}
  .footer__top{grid-template-columns:1fr;gap:22px}
  .story__badge{inset-inline-start:12px;inset-block-end:12px;padding:14px 16px}
}
@media (max-width:479px){
  .prod-grid,.cat-grid{grid-template-columns:1fr}
  .prod__name{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* --------------------------------------------- category card, no photo */
.cat--icon{background:linear-gradient(158deg,var(--navy-600) 0%,var(--navy-800) 100%)}
.cat--icon::before{background:none}
.cat__ghost{position:absolute;inset-inline-end:-14px;inset-block-end:-18px;width:148px;height:148px;
  z-index:-1;color:#fff;opacity:.085;stroke-width:1}
[dir="rtl"] .cat__ghost{transform:scaleX(-1)}

/* ======================================================================
   CROSS-DIVISION HEADER BLOCK
   Home page only. The other division's colour bleeds in from the right edge
   of the viewport and fades out to the left, carrying that division's mark.
   On every other page this slot is empty and search + cart sit there instead.
   ====================================================================== */
.crossnav{
  display:none;position:relative;align-self:stretch;align-items:center;gap:13px;
  padding-inline:38px 4px;margin-inline-start:auto;text-decoration:none;
  color:var(--cross-ink,#fff);overflow:visible;
}
body[data-page="home"] .crossnav{display:flex}
/* The switcher paints its own block in the corner rather than the header
   washing a wide gradient across the bar. The old version faded in over 540px,
   which put the fade straight over the sign in button: half the word sat on
   navy, half on orange, and the two targets touched. A contained block keeps
   the switcher unmistakably one thing to click and leaves sign in on its own
   ground - which is how it already looked in Arabic, where the block reads as
   a clean edge. */
.crossnav__wash{display:none}
body[data-page="home"] .header::after{content:none}
body[data-page="home"] .header:has(.crossnav:hover) .crossnav{filter:brightness(1.08)}
.crossnav{z-index:1}
.crossnav__logo{height:30px;width:auto;transition:transform .25s var(--ease-out)}
.crossnav:hover .crossnav__logo{transform:translateY(-2px)}
.crossnav__txt{display:flex;flex-direction:column;line-height:1.12;text-align:start}
.crossnav__txt b{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase}
.crossnav__txt small{font-size:8.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;opacity:.78}
.crossnav__go{width:16px;height:16px;stroke-width:2.2;opacity:.85;transition:transform .25s var(--ease-out)}
.crossnav:hover .crossnav__go{transform:translateX(4px)}
[dir="rtl"] .crossnav__go{transform:scaleX(-1)}
[dir="rtl"] .crossnav:hover .crossnav__go{transform:scaleX(-1) translateX(4px)}
.crossnav:focus-visible{outline:3px solid #fff;outline-offset:-3px}

/* On the home page the header icons give up their slot to the division switch -
   all except sign in, which stays. It is the one action a first-time visitor
   needs from the home page, and the page it leads to is the whole reason to
   have an account, so hiding it there was hiding it where it matters most. */
body[data-page="home"] .header__tools .iconbtn{display:none}
body[data-page="home"] .header__tools .iconbtn--auth{display:inline-flex}
body[data-page="home"] .header__tools{gap:0}

/* the label beside the figure - a word converts better than a glyph alone,
   and it is the first thing to go when the bar gets tight */
.iconbtn--auth{gap:7px;padding-inline:10px;border-radius:8px}
.iconbtn__label{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap}
.iconbtn--auth:hover{background:rgba(255,255,255,.1)}
.iconbtn--auth.is-in .iconbtn__label{display:none}
.iconbtn--auth.is-in .iconbtn__who{position:static;width:22px;height:22px;line-height:22px;font-size:11px}

/* The room for it comes from the two widest things in the bar, trimmed rather
   than rearranged: the nav wording and the switch. The layout is unchanged. */
body[data-page="home"] .nav__link{font-size:11.5px;letter-spacing:.07em;padding:0 11px}
body[data-page="home"] .crossnav{padding-inline:26px 4px;gap:10px}
body[data-page="home"] .crossnav__logo{height:26px}
body[data-page="home"] .crossnav__txt b{font-size:12.5px;letter-spacing:.09em}
body[data-page="home"] .crossnav__txt small{font-size:8px;letter-spacing:.15em}
body[data-page="home"] .crossnav__go{width:14px;height:14px}

@media (max-width:1180px){
  .iconbtn--auth .iconbtn__label{display:none}
  .iconbtn--auth{padding-inline:6px}
}

/* ======================================================================
   FLOATING CART
   The header cart is hidden on the home page, so a cart with something in it
   follows the customer as a floating button instead of disappearing.
   ====================================================================== */
.cartfab{
  position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:150;
  width:60px;height:60px;border-radius:999px;display:none;place-items:center;
  background:var(--fab-bg,var(--navy-700));color:var(--fab-ink,#fff);
  box-shadow:0 10px 30px rgba(12,20,46,.32);
  transform:translateY(16px) scale(.9);opacity:0;
  transition:transform .32s var(--ease-out),opacity .28s var(--ease-out),background .2s ease;
}
.cartfab.show{display:grid;transform:none;opacity:1}
.cartfab:hover{filter:brightness(1.08)}
.cartfab .ic{width:24px;height:24px;stroke-width:1.7}
.cartfab__n{
  position:absolute;top:-2px;inset-inline-end:-2px;min-width:23px;height:23px;padding:0 6px;
  border-radius:999px;background:var(--fab-badge,var(--amber));color:var(--fab-badge-ink,var(--navy-900));
  font-size:11.5px;font-weight:700;display:grid;place-items:center;border:2px solid var(--surface);
}
@media (max-width:767px){
  .cartfab{inset-block-end:18px;inset-inline-end:18px;width:54px;height:54px}
  .crossnav{padding-inline:20px 2px;gap:9px}
  .crossnav__txt b{font-size:12px}
  .crossnav__logo{height:24px}
}
@media (max-width:479px){
  .crossnav__txt small{display:none}
}

/* ======================================================================
   CURRENCY + LANGUAGE
   BHD is the stored currency; everything else is a display conversion.
   ====================================================================== */
.topbar .curr{
  background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:4px;
  color:inherit;font-size:11.5px;font-weight:600;letter-spacing:.06em;padding:3px 6px;cursor:pointer;
}
.topbar .curr:hover{border-color:rgba(255,255,255,.55)}
.topbar .curr option{background:#1a1a1f;color:#fff}
.js-lang{cursor:pointer}
#fxNote{
  background:var(--amber-soft);border-bottom:1px solid var(--line);
  font-size:12px;color:var(--ink);text-align:center;padding:8px 16px;line-height:1.5;
}

/* ======================================================================
   ARABIC
   Layout mirrors on its own - the stylesheet uses logical properties. What
   Arabic needs is its own face and none of the Latin display mannerisms:
   there is no uppercase in Arabic, and tracking damages the joins.
   ====================================================================== */
body.is-ar{font-family:"Cairo","Segoe UI",system-ui,sans-serif}
body.is-ar h1,body.is-ar h2,body.is-ar h3,body.is-ar h4,body.is-ar h5{
  font-family:"Cairo","Segoe UI",system-ui,sans-serif;font-weight:700;
  text-transform:none;letter-spacing:0;line-height:1.35;
}
body.is-ar .kicker,body.is-ar .vhero__kicker,body.is-ar .btn,body.is-ar .nav__link,
body.is-ar .sec-head a,body.is-ar .chip,body.is-ar .prod__brand,body.is-ar .footer h4,
body.is-ar .switch__name,body.is-ar .crossnav__txt b,body.is-ar .crossnav__txt small{
  text-transform:none;letter-spacing:0;
}
body.is-ar .btn{font-weight:700}
body.is-ar .vhero__line,body.is-ar .hero h1{line-height:1.3}
body.is-ar .prod__name,body.is-ar .cat h3{line-height:1.5}
/* prices and part numbers stay Western and stay LTR inside Arabic text */
body.is-ar [data-bhd],body.is-ar .prod__price,body.is-ar .buybox__price,
body.is-ar .hs,body.is-ar .buybox__sku{direction:ltr;unicode-bidi:isolate}

/* ======================================================================
   PRODUCT CARD - one rigid skeleton
   Every card is the same height and every row inside it lines up across the
   grid: media, brand, name, status, price, actions. Rows that can be empty
   still hold their space, so a product without a brand does not drag the
   card above it out of alignment.
   ====================================================================== */
.prod{height:100%}
.prod__media{flex:none;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.prod__media img{width:100%;height:100%;object-fit:contain}
.prod__body{display:flex;flex-direction:column;gap:8px;flex:1}
.prod__brand{min-height:14px;display:block}
.prod__name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.8em;margin:0;
}
.prod__certs{min-height:25px;align-content:flex-start}
/* the short description belongs to the list view only - never in the grid */
.prod__desc{display:none}
.prod__price{margin-top:auto;padding-top:4px}
.prod__actions{margin-top:0}

/* ======================================================================
   COLOUR SWATCHES ON THE CARD
   Shown only when a product genuinely has more than one colour with its own
   photograph. Hovering previews, clicking commits, leaving puts it back.
   The row holds its height either way so the grid stays aligned.
   ====================================================================== */
.prod__colours{display:flex;align-items:center;gap:7px;min-height:22px;flex-wrap:wrap}
.swatch{
  width:18px;height:18px;border-radius:999px;padding:0;flex:none;cursor:pointer;
  border:1px solid rgba(17,17,17,.22);box-shadow:0 0 0 2px #fff inset;
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s ease;
}
.swatch:hover{transform:scale(1.14)}
.swatch.on{box-shadow:0 0 0 2px #fff inset,0 0 0 2px var(--amber);border-color:transparent}
.swatch:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.swatch__more{font-size:11px;color:var(--muted);font-weight:600}
.prod__media img{transition:opacity .18s ease}
@media (max-width:767px){
  .swatch{width:20px;height:20px}   /* a finger-sized target on touch */
}

/* ======================================================================
   CART DRAWER
   ====================================================================== */
.cartd{position:fixed;inset:0;z-index:200;visibility:hidden}
.cartd.open{visibility:visible}
.cartd__scrim{position:absolute;inset:0;background:rgba(11,16,32,.5);opacity:0;transition:opacity .3s ease}
.cartd.open .cartd__scrim{opacity:1}
.cartd__panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(420px,94vw);background:#fff;
  display:flex;flex-direction:column;transform:translateX(102%);
  transition:transform .34s var(--ease);box-shadow:-18px 0 50px rgba(11,16,32,.18)}
[dir="rtl"] .cartd__panel{transform:translateX(-102%)}
.cartd.open .cartd__panel{transform:none}
.cartd__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line);background:var(--navy-700);color:#fff}
.cartd__head b{font-family:var(--display);font-size:19px;letter-spacing:.1em;text-transform:uppercase}
.cartd__head .iconbtn{color:#fff}
.cartd__lines{flex:1;overflow-y:auto;padding:14px 20px;display:grid;gap:14px;align-content:start}
.cartd__empty{color:var(--muted);font-size:13.5px;line-height:1.7;padding:24px 0;text-align:center}
.cartd__foot{border-top:1px solid var(--line);padding:16px 20px}
.cartd__foot:empty{display:none}
.cartd__sum{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.cartd__sum span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cartd__sum b{font-family:var(--display);font-size:24px;color:var(--ink)}
.cartd__note{font-size:11.5px;color:var(--muted);line-height:1.6;margin-bottom:12px}

.cline{display:grid;grid-template-columns:64px 1fr 22px;gap:12px;align-items:start;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.cline:last-child{border-bottom:0}
.cline__img{width:64px;height:64px;border:1px solid var(--line);border-radius:var(--r-input);
  overflow:hidden;display:grid;place-items:center;background:#fff}
.cline__img img{width:100%;height:100%;object-fit:contain}
.cline__body b{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
.cline__var{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.cline__body .chip{margin-top:5px}
.chip--shopping{background:rgba(255,117,43,.12);color:#c9521a}
.chip--safety{background:rgba(24,41,87,.1);color:#182957}
.cline__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.cline__price{font-weight:700;font-size:13.5px;color:var(--ink)}
.qty--sm{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill)}
.qty--sm button{width:26px;height:26px;display:grid;place-items:center;color:var(--navy-600);font-size:14px}
.qty--sm button:hover{background:var(--navy-50)}
.qty--sm i{font-style:normal;min-width:24px;text-align:center;font-size:12.5px;font-weight:700}
.cline__x{color:var(--navy-300);padding:2px}
.cline__x:hover{color:var(--ink)}

/* ======================================================================
   SEARCH OVERLAY
   ====================================================================== */
.srch{position:fixed;inset:0;z-index:210;visibility:hidden}
.srch.open{visibility:visible}
.srch__scrim{position:absolute;inset:0;background:rgba(11,16,32,.55);opacity:0;transition:opacity .25s ease}
.srch.open .srch__scrim{opacity:1}
.srch__panel{position:relative;max-width:660px;margin:9vh auto 0;background:#fff;border-radius:var(--r-card);
  box-shadow:var(--shadow-3);overflow:hidden;transform:translateY(-14px);opacity:0;
  transition:transform .28s var(--ease-out),opacity .22s ease}
.srch.open .srch__panel{transform:none;opacity:1}
.srch__bar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.srch__bar .ic{color:var(--navy-400);flex:none}
.srch__bar input{flex:1;border:0;font-size:17px;padding:6px 0;background:transparent;color:var(--ink)}
.srch__bar input:focus{outline:none}
.srch__bar input::-webkit-search-cancel-button{display:none}
.srch__bar .iconbtn{color:var(--navy-400)}
.srch__results{max-height:min(62vh,540px);overflow-y:auto}
.srch__hint,.srch__count{padding:20px;font-size:13px;color:var(--muted);text-align:center;line-height:1.7}
.srch__count{padding:12px;border-top:1px solid var(--line-soft);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase}
.srow{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
  padding:11px 16px;border-bottom:1px solid var(--line-soft);transition:background .14s ease}
.srow:hover,.srow.on{background:var(--navy-50)}
.srow__img{width:52px;height:52px;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:grid;place-items:center;background:#fff}
.srow__img img{width:100%;height:100%;object-fit:contain}
.srow__body b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.srow__body small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.srow mark{background:var(--amber-soft);color:inherit;padding:0 1px;border-radius:2px}
.srow__price{text-align:end;font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap}
.srow__price em{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted)}
@media (max-width:767px){
  .srch__panel{margin:0;border-radius:0;height:100%;max-width:none}
  .srch__results{max-height:calc(100vh - 66px)}
}

/* Stock reads as a colour before it reads as a word: green in, red out, the
   same on both storefronts and never the brand colour. An orange "In stock"
   beside an orange price and an orange button is just more orange - the one
   thing on the card a customer scans for stops standing out. */
.chip--stock{background:rgba(30,158,98,.12);color:#1E9E62;border:1px solid rgba(30,158,98,.24)}
.prod__flags .chip--stock,.gallery__flags .chip--stock{background:#1E9E62;color:#fff;border-color:transparent}

/* out of stock reads red wherever it appears - card, flags, search, product page */
.chip--oos{background:rgba(198,40,40,.1);color:#C62828;border:1px solid rgba(198,40,40,.22)}
.prod__flags .chip--oos{background:#C62828;color:#fff;border-color:transparent}
.gallery__flags .chip--oos{background:#C62828;color:#fff;border-color:transparent}
.srow__price em{color:#C62828}
.prod:has(.chip--oos) .prod__media img{opacity:.62;filter:saturate(.7)}

/* ======================================================================
   MEDIA - a picture or a video, in the same slot
   Autoplaying video is muted by browser rule; the speaker button is the only
   lawful way to turn sound on, and it needs a tap.
   ====================================================================== */
.media{display:block;width:100%;height:100%}
.media--img{object-fit:contain}
.media--vid,.media--yt{position:relative;overflow:hidden;background:#0b0c0d}
.media--vid video{width:100%;height:100%;object-fit:cover;display:block}
.media--yt{background-size:cover;background-position:center}
.media--yt iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;
  min-height:100%;min-width:177.77vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
.media__sound{
  position:absolute;inset-block-end:12px;inset-inline-end:12px;z-index:2;
  width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  background:rgba(0,0,0,.52);color:#fff;backdrop-filter:blur(4px);
  transition:background .2s ease,transform .2s var(--ease-out);
}
.media__sound:hover{background:rgba(0,0,0,.7);transform:scale(1.06)}
.media__sound.on{background:var(--amber);color:var(--navy-900)}
.media__sound .ic{width:18px;height:18px}

/* a video sitting in a product slot fills it the way a photograph would */
.prod__media .media--vid,.prod__media .media--yt{position:absolute;inset:0}
.gallery__main .media--vid,.gallery__main .media--yt{position:absolute;inset:0;border-radius:inherit}
.gallery__main .media--vid video{object-fit:contain;background:#fff}
.cat .media--vid,.cat .media--yt{position:absolute;inset:0;z-index:-2}
.cat .media--vid video{opacity:.5}

/* a thumbnail that stands for a video says so */
.thumb-vid{position:relative}
.thumb-vid::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.thumb-vid .thumb-vid__play{position:absolute;inset:0;margin:auto;width:20px;height:20px;
  color:#fff;z-index:1;stroke-width:1.6}
@media (prefers-reduced-motion:reduce){
  .media--vid video{display:none}
  .media--vid{background-size:cover;background-position:center}
}

/* The label must never sit on the header's own colour - give the block its own
   solid ground with a short fade into it, so the text is legible whatever the
   viewport width does to the wash behind it. */
body[data-page="home"] .crossnav{
  background:var(--cross-bg);
  color:var(--cross-ink);
}
/* The block runs from the switcher out to the edge of the window, so it reads
   as the corner of the page rather than a tile floating inside the container.
   Painted with a pseudo-element instead of by moving the element, so the bar
   keeps its ordinary flex layout and nothing overlaps on a narrow screen. */
body[data-page="home"] .crossnav::after{
  content:"";position:absolute;inset-block:0;inset-inline-end:-100vw;width:100vw;
  background:var(--cross-bg);z-index:-1;pointer-events:none;
}
/* ...and the header trims it at the window's edge. Without this the 100vw strip
   hangs past the right of the page and the whole home page scrolls sideways.
   clip, not hidden: it creates no scroll box, so the sticky header and the
   menus that drop below it are untouched. */
body[data-page="home"] .header{overflow-x:clip}
/* A short, hard-ish edge on the inside - long enough not to look cut out with
   scissors, short enough that it never reaches the sign in button. */
body[data-page="home"] .crossnav::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:-26px;width:26px;z-index:-1;
  background:linear-gradient(to right,rgba(0,0,0,0),var(--cross-bg));
}
[dir="rtl"] body[data-page="home"] .crossnav::before{
  inset-inline-start:auto;inset-inline-end:-26px;
  background:linear-gradient(to left,rgba(0,0,0,0),var(--cross-bg));
}
/* and sign in keeps its own ground, clear of the edge */
body[data-page="home"] .header__tools{margin-inline-end:30px}
.crossnav__txt b,.crossnav__txt small{white-space:nowrap}
.crossnav__logo{filter:none}

/* a result that matched on the description shows the sentence it matched */
.srow__snip{display:block;font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.srow__sku{font-family:ui-monospace,Consolas,monospace;font-size:11px}

/* a link inside a content-block line */
.block__link{color:var(--amber-600);font-weight:600}
.block__link:hover{text-decoration:underline}
.trustlist .block__link{color:var(--amber-600)}

/* a phone number stays left-to-right inside Arabic text - see isolatePhones() */
a[href^="tel:"] bdi{direction:ltr;unicode-bidi:isolate}

/* ======================================================================
   DIVISION SWITCH - the curtain that carries you between the two sites
   Only clip-path and opacity animate, so it stays on the compositor.
   ====================================================================== */
.divcurtain{
  position:fixed;inset:0;z-index:900;display:grid;place-items:center;
  pointer-events:none;will-change:clip-path,opacity;
}
.divcurtain__mark{
  width:min(300px,56vw);height:auto;opacity:0;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.28));
}
@media (prefers-reduced-motion:reduce){
  .divcurtain__mark{display:none}
}
/* the stand-in that covers an arriving page before its script can append the
   real layer - removed the moment that layer is in place */
html[data-arriving]::before{
  content:"";position:fixed;inset:0;z-index:901;background:var(--division-bg,#182957);
}

/* contact details in the top bar, rendered from the site config */
.topbar__contact{display:flex;align-items:center;gap:22px}
.topbar__contact bdi{direction:ltr;unicode-bidi:isolate}
.footer__contact bdi{direction:ltr;unicode-bidi:isolate}
.branch bdi,.ccard bdi{direction:ltr;unicode-bidi:isolate}
@media (max-width:767px){.topbar__contact{gap:14px}}

/* The footer contact list is rendered into one container now, so the row
   styling has to sit on its children rather than on the wrapper - otherwise
   the three lines lay out side by side instead of stacking. */
.footer__contact [data-contact]{display:grid;gap:12px;margin-bottom:0}
.footer__contact [data-contact] > div{display:flex;gap:10px;align-items:flex-start;
  margin-bottom:0;line-height:1.55}
/* an English address inside Arabic text reads left to right on its own terms */
.footer__contact [data-contact] span,.footer__contact [data-contact] a,
.branch__body span,.ccard p,.ccard a{unicode-bidi:plaintext}

/* ---------------------------------------------------------------- delivery
   "Delivery to [country]" on the product page and in the basket. Both are
   rendered by the one rate engine in shared/js/shipping.js. */
.shipbox{border-bottom:1px solid var(--line);padding:14px 0}
.shipbox__head,.cartship__head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.shipbox__head select,.cartship__head select{margin-inline-start:auto;max-width:60%;padding:6px 10px;
  border:1.5px solid var(--line);border-radius:8px;background:#fff;font-size:13px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
.shipbox__head select:focus,.cartship__head select:focus{border-color:var(--navy-500);outline:none}
.shipbox__list{display:grid;gap:8px;margin-top:12px}
.shipbox__list li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:10px 12px;background:var(--surface-2);border-radius:10px}
.shipbox__list b{display:block;font-size:13.5px;color:var(--ink)}
.shipbox__eta,.shipbox__hint{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.shipbox__hint{color:var(--ok)}
.shipbox__list em,.cartship__opt em{font-style:normal;font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap}
.shipbox__free{color:var(--ok)!important}
.shipbox__q{color:var(--muted)!important;font-weight:600!important;font-size:12px!important}
.shipbox__note{margin-top:8px;font-size:11.5px;color:var(--muted)}
.shipbox__none,.cartship__none{margin-top:10px;font-size:12.5px;color:var(--warn);line-height:1.5}

.cartd__foot{max-height:62vh;overflow-y:auto}
.cartship{border-block:1px solid var(--line);margin:10px 0;padding:12px 0}
.cartship__div{margin-top:10px}
.cartship__label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cartship__opt{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:1.5px solid var(--line);
  border-radius:10px;margin-bottom:6px;cursor:pointer}
.cartship__opt:has(input:checked){border-color:var(--navy-500);background:var(--navy-50)}
.cartship__opt input{margin-top:3px;accent-color:var(--navy-700)}
.cartship__opt span{flex:1;min-width:0}
.cartship__opt b{display:block;font-size:13px;color:var(--ink)}
.cartship__opt small{display:block;font-size:11.5px;color:var(--muted);line-height:1.45}
.cartship__hint{font-size:12px;color:var(--ok);margin-top:4px}
.cartd__sum--sm b{font-family:var(--ui);font-size:14px}
.cartd__sum--total{border-top:1px solid var(--line);padding-top:8px}

/* the shipping admin's draft, previewed in this browser only */
.shipdraft{position:fixed;inset-inline-start:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:12px;
  padding:10px 14px;background:var(--navy-900);color:#fff;border-radius:10px;font-size:12.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.25)}
.shipdraft button{color:var(--amber);font-weight:700;font-size:12px;text-decoration:underline}

/* ---------------------------------------------------------------- request pop-up
   Documentation requests (shared/js/requests.js). Same frame as the size-chart
   pop-up: navy head, white body, full screen on a phone. */
.reqm{position:fixed;inset:0;z-index:230;visibility:hidden}
.reqm.open{visibility:visible}
.reqm__scrim{position:absolute;inset:0;background:rgba(11,16,32,.55);opacity:0;transition:opacity .25s ease}
.reqm.open .reqm__scrim{opacity:1}
.reqm__panel{position:relative;max-width:480px;margin:8vh auto 0;max-height:84vh;background:var(--surface);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(11,16,32,.35);
  transform:translateY(14px);opacity:0;transition:transform .25s ease,opacity .25s ease}
.reqm.open .reqm__panel{transform:none;opacity:1}
.reqm__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;
  background:var(--navy-700);color:#fff}
.reqm__head b{display:block;font-family:var(--display);font-size:19px;letter-spacing:.06em;text-transform:uppercase}
.reqm__head small{display:block;font-size:12px;opacity:.75;margin-top:2px;line-height:1.4}
.reqm__head .iconbtn{color:#fff;flex:none}
.reqm__body{padding:20px;overflow-y:auto}
.reqm__product{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:16px}
.reqm__product img{width:52px;height:52px;object-fit:contain;border-radius:6px;background:var(--surface-2)}
.reqm__product b{display:block;font-size:13.5px;color:var(--ink);line-height:1.35}
.reqm__product small{font-size:12px;color:var(--muted)}
.reqm__docs{border:0;margin:0 0 16px;padding:0;display:grid;gap:6px}
.reqm__docs legend{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:8px;padding:0}
.reqm__doc{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink)}
.reqm__doc:has(input:checked){border-color:var(--navy-500);background:var(--navy-50)}
.reqm__doc input{accent-color:var(--navy-700);width:16px;height:16px}
.reqm__doc .ic{color:var(--navy-500)}
.reqm__err{margin:-4px 0 12px;font-size:13px;color:#C62828}
.reqm__note{font-size:11.5px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.reqm__note a{color:var(--navy-600);text-decoration:underline}
.reqm__done{text-align:center;padding:8px 4px}
.reqm__tick{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(30,158,98,.12);color:var(--ok);margin-bottom:12px}
.reqm__done b{display:block;font-family:var(--display);font-size:20px;color:var(--ink);margin-bottom:8px}
.reqm__done p{font-size:14px;margin-bottom:14px}
@media (max-width:560px){
  .reqm__panel{margin:0;max-width:none;height:100%;max-height:none;border-radius:0}
}