/* ═══════════════════════════════════════════════════
   TAHA TRADE — palette taken from the logo
   navy #17356B · blue #2C5AA0 · orange #F5821F · rust #C0421C
   ═══════════════════════════════════════════════════ */

:root{
  --navy:#17356B; --navy-d:#0E2249; --navy-l:#24488A;
  --blue:#2C5AA0; --orange:#F5821F; --orange-d:#DC6E10; --rust:#C0421C;
  --ink:#15202E; --body:#4A5A6E; --mute:#7C8B9E;
  --line:#E1E7EF; --line-2:#EEF2F7; --page:#F5F7FA; --white:#fff;
  --wa:#25976C; --ok:#15803D;
  --ar:"Cairo",system-ui,"Segoe UI",sans-serif;
  --lat:"Inter",system-ui,sans-serif;
  --wrap:1320px; --pad:clamp(16px,3.4vw,32px);
  --r:10px; --r-lg:16px;
  --sh:0 1px 2px rgba(21,32,46,.06),0 8px 24px -14px rgba(21,32,46,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms !important;animation-duration:.01ms !important}}

body{margin:0;background:var(--white);color:var(--ink);font-family:var(--ar);
  font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.num{font-family:var(--lat);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:99;background:var(--orange);color:#fff;padding:10px 18px}
.skip:focus{inset-inline-start:0}

.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic--sm{width:15px;height:15px}
.ic--lg{width:26px;height:26px}

.h2{margin:0 0 8px;font-size:clamp(24px,3.4vw,38px);font-weight:800;line-height:1.3;letter-spacing:-.02em}
.h2__soft{color:var(--mute);font-weight:700}
.lede{margin:0 0 26px;max-width:62ch;font-size:16px;color:var(--body)}
.empty{padding:60px 0;text-align:center;color:var(--mute)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;
  border:1.5px solid transparent;border-radius:var(--r);font-family:var(--ar);font-size:15px;
  font-weight:700;cursor:pointer;text-align:center;transition:background .18s,color .18s,border-color .18s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn--full{width:100%}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-d)}
.btn--orange{background:var(--orange);color:#fff}
.btn--orange:hover{background:var(--orange-d)}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:#1C7A56}
.btn--light{background:#fff;color:var(--navy)}
.btn--light:hover{background:var(--orange);color:#fff}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--line)}
.btn--outline:hover{border-color:var(--navy)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--outline-light:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ══════ topbar ══════ */
.topbar{background:var(--navy);color:#C7D5EA;font-size:13px}
.topbar__in{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:space-between;min-height:42px;padding-block:5px}
.topbar__promo{margin:0;font-family:var(--lat);font-size:12px;letter-spacing:.08em;color:#8FA8CC}
.topbar__links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;padding:0;list-style:none}
.topbar__links a{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:6px;transition:background .16s}
.topbar__links a:hover{background:rgba(255,255,255,.1)}
.topbar__lang{display:flex;align-items:center;gap:2px;border-inline-start:1px solid rgba(255,255,255,.2);margin-inline-start:6px;padding-inline-start:8px}
.topbar__lang a.is-on{color:var(--orange);font-weight:700}

/* ══════ header ══════ */
.head{background:#fff;border-bottom:1px solid var(--line)}
.head__in{display:flex;align-items:center;gap:14px;min-height:84px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:52px;width:auto;object-fit:contain}
.logo--plate{display:inline-flex;width:fit-content;max-width:100%;background:#fff;border-radius:var(--r);padding:10px 14px}
.logo--plate img{height:42px}

.search{flex:1 1 auto;max-width:620px;display:flex;align-items:stretch;height:48px;
  border:2px solid var(--navy);border-radius:var(--r);overflow:hidden;background:#fff}
.search__cat{position:relative;display:flex;align-items:center;border-inline-end:1px solid var(--line)}
.search__cat select{appearance:none;border:0;background:transparent;height:100%;padding-inline:14px 32px;
  font-size:13.5px;font-weight:600;cursor:pointer;outline:0;max-width:170px}
.search__caret{position:absolute;inset-inline-end:11px;pointer-events:none;color:var(--mute)}
.search input{flex:1;border:0;outline:0;padding-inline:16px;font-size:15px;min-width:0}
.search input::placeholder{color:var(--mute)}
.search__go{width:56px;border:0;background:var(--orange);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .18s}
.search__go:hover{background:var(--orange-d)}

.help{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r);background:var(--page);flex:none;transition:background .18s}
.help:hover{background:var(--line-2)}
.help .ic{color:var(--wa)}
.help__t{display:flex;flex-direction:column;line-height:1.35}
.help__t strong{font-size:12.5px;font-weight:700}
.help__t small{font-size:12.5px;color:var(--body)}

.icobtn{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center;border:0;
  background:transparent;border-radius:var(--r);cursor:pointer;color:var(--ink);transition:background .18s}
.icobtn:hover{background:var(--page)}
.icobtn__n{position:absolute;top:5px;inset-inline-end:4px;min-width:19px;height:19px;padding-inline:5px;
  display:grid;place-items:center;border-radius:99px;background:var(--orange);color:#fff;font-size:11px;font-weight:700}

.burger{display:none;width:44px;height:44px;flex:none;border:0;background:transparent;cursor:pointer;padding:12px 10px;border-radius:var(--r)}
.burger span{display:block;height:2px;background:var(--ink);margin-block:3.5px;border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ══════ nav ══════ */
.nav{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.nav__in{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.nav__a{display:inline-flex;align-items:center;gap:5px;padding:14px 14px;font-size:14.5px;font-weight:600;
  color:var(--ink);border-bottom:3px solid transparent;transition:color .16s,border-color .16s}
.nav__a:hover{color:var(--navy);border-bottom-color:var(--orange)}
.nav__a.is-active{color:var(--navy);border-bottom-color:var(--navy)}

/* ══════ hero ══════ */
.hero{padding-block:26px 8px}
.hero__card{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:400px;
  display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:24px;padding:clamp(26px,4.2vw,56px);
  background:
    radial-gradient(120% 130% at 88% 15%,rgba(245,130,31,.32) 0%,rgba(245,130,31,0) 52%),
    radial-gradient(90% 120% at 8% 100%,rgba(44,90,160,.5) 0%,rgba(44,90,160,0) 60%),
    linear-gradient(140deg,#17356B 0%,#0E2249 62%,#132C58 100%);
  color:#fff}
.hero__eyebrow{margin:0 0 14px;font-family:var(--lat);font-size:12px;font-weight:600;letter-spacing:.16em;color:#F9B776}
.hero__h1{margin:0 0 16px;font-size:clamp(30px,4.8vw,54px);font-weight:800;line-height:1.18;letter-spacing:-.025em}
.hero__lede{margin:0 0 28px;max-width:52ch;font-size:16.5px;color:#CFDCEE}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__shot{display:grid;place-items:center}
.hero__shot img{width:100%;max-width:460px;max-height:340px;object-fit:contain;background:#fff;
  border-radius:var(--r-lg);padding:20px;box-shadow:0 30px 60px -26px rgba(0,0,0,.6)}

/* ══════ stats ══════ */
.stats{padding-block:26px;border-bottom:1px solid var(--line)}
.stats--inline{border:0;padding-block:10px 0}
.stats__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.stats__i{display:flex;flex-direction:column;gap:1px;padding-inline-start:16px;border-inline-start:3px solid var(--orange)}
.stats__i b{font-size:30px;font-weight:800;color:var(--navy);line-height:1.2}
.stats__i span{font-size:13.5px;color:var(--mute)}

/* ══════ sections ══════ */
.cats{padding-block:clamp(40px,5.5vw,68px)}
.cats__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.cat{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;font-size:13.5px;font-weight:700;color:var(--ink);text-align:center;
  transition:border-color .18s,transform .18s,box-shadow .18s;height:100%}
.cat:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:var(--sh)}
.cat img{width:80px;height:64px;object-fit:contain}
.cat small{color:var(--mute);font-weight:600;font-size:11.5px}

/* ══════ product grid ══════ */
.prods{padding-block:clamp(34px,5vw,60px);background:var(--page)}
.prods__head{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:14px;margin:0;padding:0;list-style:none}

.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.card:hover{border-color:#CBD6E4;box-shadow:var(--sh);transform:translateY(-3px)}
.card__media{position:relative;display:block;height:172px;flex:none;padding:14px;background:#fff;border-bottom:1px solid var(--line-2)}
.card__media img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.card:hover .card__media img{transform:scale(1.05)}
.card__ph{display:grid;place-items:center;width:100%;height:100%;color:#C6D1DE;background:var(--page);border-radius:8px}
.card__ph--lg{min-height:320px}

.badge{position:absolute;top:10px;inset-inline-start:10px;max-width:calc(100% - 20px);
  padding:3px 8px;border-radius:6px;background:var(--navy);color:#fff;font-size:10.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.card__body{display:flex;flex-direction:column;gap:5px;padding:12px 13px 13px;flex:1}
.card__brand{margin:0;font-family:var(--lat);font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--rust)}
.card__name{margin:0;font-size:14px;font-weight:700;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.card__name a:hover{color:var(--navy)}
.card__dim{margin:0;font-size:11.5px;color:var(--mute)}
.card__dim b{font-weight:600;color:var(--body);font-size:11px}
.card__quote{margin:2px 0 0;font-size:12.5px;font-weight:700;color:var(--navy)}
.card__foot{margin-top:auto;padding-top:11px}
.card__cta{width:100%;min-height:38px;padding:8px 12px;border:1.5px solid var(--line);border-radius:8px;
  background:#fff;font-family:var(--ar);font-size:12.5px;font-weight:700;color:var(--navy);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.card__cta:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.card__cta[data-in="1"]{background:var(--orange);border-color:var(--orange);color:#fff}

/* ══════ listing ══════ */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:16px;font-size:13px;color:var(--mute)}
.crumb a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.crumb span{color:var(--line)}
.crumb b{color:var(--ink);font-weight:600}

.listing{padding-block:6px 50px}
.listing__in{display:grid;grid-template-columns:250px 1fr;gap:clamp(18px,2.6vw,32px);align-items:start}

.side{display:flex;flex-direction:column;gap:14px;position:sticky;top:70px}
.side__box{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:#fff}
.side__box h3{margin:0 0 10px;font-size:14px;font-weight:800}
.side__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px}
.side__list a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:7px 9px;
  border-radius:7px;font-size:13.5px;color:var(--body);transition:background .16s,color .16s}
.side__list a:hover{background:var(--page);color:var(--navy)}
.side__list a.is-on{background:var(--navy);color:#fff;font-weight:700}
.side__list a span{font-size:11px;opacity:.7}
.side__scroll{max-height:330px;overflow-y:auto}

.filtertoggle{display:none;width:100%;align-items:center;justify-content:center;gap:9px;
  padding:12px 18px;margin-bottom:14px;border:1.5px solid var(--navy);border-radius:var(--r);
  background:#fff;font-family:var(--ar);font-size:14.5px;font-weight:700;color:var(--navy);cursor:pointer}
.filtertoggle[aria-expanded="true"]{background:var(--navy);color:#fff}

.results__head{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.results__count{margin:0;font-size:13.5px;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{padding:5px 12px;border:1px solid var(--line);border-radius:99px;background:var(--page);font-size:12.5px;color:var(--body)}
.chip:hover{border-color:var(--rust);color:var(--rust)}

.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:32px}
.pager a,.pager span{display:grid;place-items:center;min-width:40px;height:40px;padding-inline:12px;
  border:1px solid var(--line);border-radius:8px;font-size:14px;font-weight:600;color:var(--body)}
.pager span{border-color:transparent}
.pager a:hover{border-color:var(--navy);color:var(--navy)}
.pager a.is-on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ══════ product page ══════ */
.pdp{padding-block:6px 40px}
.pdp__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(22px,4vw,50px);align-items:start}
.pdp__frame{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,3vw,38px);display:grid;place-items:center;min-height:380px}
.pdp__frame img{max-height:440px;width:auto;max-width:100%;object-fit:contain}
.pdp__zoom{position:absolute;bottom:14px;inset-inline-end:14px;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:99px;background:#fff;cursor:pointer;color:var(--navy);transition:background .18s,color .18s}
.pdp__zoom:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.pdp__src{margin:12px 0 0;font-size:12.5px;color:var(--mute)}

.pdp__brand{margin:0 0 6px;font-family:var(--lat);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--rust)}
.pdp__title{margin:0 0 14px;font-size:clamp(22px,3vw,32px);font-weight:800;line-height:1.32;letter-spacing:-.02em}
.pdp__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--mute)}
.pdp__meta b{color:var(--body)}
.pdp__tag{padding:3px 10px;border-radius:6px;background:var(--page);color:var(--navy);font-weight:700;font-size:12px}
.pdp__pricebox{padding-block:16px;border-bottom:1px solid var(--line)}
.pdp__price{margin:0;font-size:24px;font-weight:800;color:var(--navy)}
.pdp__vat{margin:6px 0 0;font-size:13px;color:var(--mute);line-height:1.7}
.pdp__quick{padding-top:16px}
.pdp__k{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--body)}
.quicklist{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.quicklist li{padding:5px 11px;border:1px solid var(--line);border-radius:7px;background:var(--page);font-size:12.5px;color:var(--body)}
.pdp__buy{display:flex;flex-wrap:wrap;gap:10px;padding-top:20px}
.pdp__buy .btn{flex:1 1 190px;min-height:48px}
.pdp__add[data-in="1"]{background:var(--orange)}
.pdp__perks{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);list-style:none;display:flex;flex-direction:column;gap:9px}
.pdp__perks li{font-size:13.5px;color:var(--body)}

.ptabs{padding-block:10px 44px}
.spectbl{width:100%;border-collapse:collapse;font-size:14.5px;max-width:900px}
.spectbl tr:nth-child(odd){background:var(--page)}
.spectbl th,.spectbl td{text-align:start;padding:12px 16px;border-bottom:1px solid var(--line)}
.spectbl th{font-weight:600;color:var(--body);width:42%}
.spectbl td{font-size:13.5px;color:var(--ink)}

.related{padding-block:clamp(30px,4.5vw,54px);background:var(--page)}

/* ══════ pages ══════ */
.page{padding-block:8px 54px}
.prose{max-width:70ch;font-size:16px;color:var(--body);line-height:1.95}
.prose p{margin:0 0 16px}
.prose strong{color:var(--ink)}

.logogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin:8px 0 0;padding:0;list-style:none}
.logotile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:18px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.logotile:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:var(--sh)}
/* logos ship as square tiles with their own background colour */
.logotile img{width:100%;aspect-ratio:1;height:auto;object-fit:contain;border-radius:8px}
.logotile span{font-size:12.5px;font-weight:600;color:var(--body);text-align:center;line-height:1.4}

.contactgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.ccard{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:#fff;display:flex;flex-direction:column;gap:10px}
.ccard--wide{grid-column:1/-1}
.ccard h3{margin:0;font-size:15px;font-weight:800;color:var(--navy)}
.ccard__h2{margin-top:8px !important;padding-top:12px;border-top:1px solid var(--line-2)}
.ccard__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ccard__list a{font-size:19px;font-weight:700;color:var(--ink)}
.ccard__list a:hover{color:var(--orange)}
.ccard__big{margin:0;font-size:15px;color:var(--body);line-height:1.8}
.ccard__note{margin:0;font-size:13.5px;color:var(--mute)}
.ccard__social{display:flex;flex-wrap:wrap;gap:8px}
.ccard__social a{padding:7px 15px;border:1px solid var(--line);border-radius:99px;font-size:13px;font-weight:600;color:var(--body)}
.ccard__social a:hover{border-color:var(--orange);color:var(--navy)}
.ccard .btn{align-self:flex-start}

/* ══════ why ══════ */
.why{padding-block:clamp(40px,5.5vw,70px)}
.why__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.why__row li{padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--page)}
.why__row--flat{margin-top:32px}
.why__row span{display:block;font-size:12.5px;font-weight:800;color:var(--orange);margin-bottom:8px}
.why__row h3{margin:0 0 6px;font-size:17px;font-weight:800}
.why__row p{margin:0;font-size:14.5px;color:var(--body);line-height:1.75}

/* ══════ brands ══════ */
.brands{padding-block:clamp(34px,4.5vw,60px);background:var(--page)}
.brands__row{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.brands__row a{display:block;padding:9px 18px;border:1px solid var(--line);border-radius:99px;background:#fff;
  font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--body);transition:border-color .18s,color .18s}
.brands__row a:hover{border-color:var(--orange);color:var(--navy)}

/* ══════ cta ══════ */
.cta{padding-block:clamp(36px,5vw,62px);background:var(--navy);color:#fff}
.cta__in{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}
.cta__h{margin:0 0 8px;font-size:clamp(21px,2.8vw,30px);font-weight:800;letter-spacing:-.02em}
.cta p{margin:0;color:#C4D3EA;max-width:54ch}
.cta__btns{display:flex;flex-wrap:wrap;gap:10px}

/* ══════ footer ══════ */
.foot{background:var(--navy-d);color:#9DB0CB;font-size:14px}
.foot__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.6fr;gap:32px;padding-block:44px 34px}
.foot__brand p{margin:14px 0 0;line-height:1.75;max-width:38ch}
.foot__slogan{font-family:var(--lat);font-size:11.5px;letter-spacing:.12em;color:var(--orange) !important;margin-top:10px !important}
.foot__col{display:flex;flex-direction:column;gap:8px}
.foot__col h4{margin:0 0 4px;font-size:15px;font-weight:700;color:#fff}
.foot__h2{margin-top:14px !important}
.foot__col a:hover{color:var(--orange)}
.foot__col p{margin:0;line-height:1.75}
.foot__link{color:var(--orange) !important;font-weight:600}
.foot__social{display:flex;gap:8px;margin-top:12px}
.foot__social a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);
  border-radius:99px;transition:background .18s,border-color .18s,color .18s}
.foot__social a:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.foot__bot{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;
  padding-block:18px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px}
.foot__bot p{margin:0;color:#7D91B0}
.foot__admin{color:#7D91B0}
.foot__admin:hover{color:var(--orange)}

/* floating whatsapp */
.wafloat{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:50;width:56px;height:56px;
  display:grid;place-items:center;border-radius:99px;background:var(--wa);color:#fff;
  box-shadow:0 10px 26px -8px rgba(37,151,108,.7);transition:transform .18s}
.wafloat:hover{transform:scale(1.07)}
.wafloat svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ══════ modals ══════ */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__scrim{position:absolute;inset:0;background:rgba(14,34,73,.55);animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:translateY(14px) scale(.98);opacity:0}}
@keyframes slide{from{transform:translateX(26px);opacity:0}}
.modal__box{position:relative;z-index:1;width:min(900px,100%);max-height:88vh;overflow:auto;background:#fff;
  border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);animation:pop .24s cubic-bezier(.22,.8,.3,1)}
.modal__box--zoom{display:grid;place-items:center}
.modal__box--zoom img{max-height:76vh;width:auto;max-width:100%;object-fit:contain}
.modal--side{place-items:stretch;justify-content:flex-start;padding:0}
.modal__panel{position:relative;z-index:1;width:min(430px,100%);height:100%;overflow-y:auto;background:#fff;
  padding:26px clamp(18px,3vw,26px) 28px;display:flex;flex-direction:column;animation:slide .24s cubic-bezier(.22,.8,.3,1)}
.modal__x{position:absolute;top:14px;inset-inline-end:14px;width:34px;height:34px;border:1px solid var(--line);
  border-radius:99px;background:#fff;cursor:pointer;font-size:14px;line-height:1;color:var(--body)}
.modal__x:hover{border-color:var(--navy);color:var(--navy)}
.modal__title{margin:0 0 6px;font-size:21px;font-weight:800}
.modal__sub{margin:0 0 18px;font-size:13px;color:var(--mute)}

.cartlist{margin:0;padding:0;list-style:none;flex:1}
.cartlist li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.cartlist img{width:54px;height:54px;object-fit:contain;flex:none;border:1px solid var(--line-2);border-radius:8px;padding:4px}
.cartlist h4{margin:0;font-size:14px;font-weight:700;line-height:1.4}
.cartlist button{margin-inline-start:auto;border:0;background:transparent;color:var(--mute);cursor:pointer;font-size:17px;padding:4px 6px}
.cartlist button:hover{color:var(--rust)}
.cartempty{color:var(--mute);padding:24px 0}
.cartfoot{border-top:1px solid var(--line);padding-top:16px;margin-top:auto;display:flex;flex-direction:column;gap:10px}
.cartclear{border:0;background:transparent;color:var(--mute);cursor:pointer;font-size:13px;text-decoration:underline}
.cartclear:hover{color:var(--rust)}

/* ══════ responsive ══════ */
@media (max-width:1100px){
  .help__t,.topbar__promo{display:none}
  .foot__top{grid-template-columns:1fr 1fr}
  .listing__in{grid-template-columns:210px 1fr}
}

@media (max-width:900px){
  .burger{display:block}
  .nav{position:static}
  .nav__in{display:none}
  .nav.is-open .nav__in{display:flex;flex-direction:column;align-items:stretch;padding-block:6px}
  .nav.is-open .nav__a{border-bottom:1px solid var(--line-2)}
  .head__in{flex-wrap:wrap;gap:10px;padding-block:12px;min-height:0}
  .search{order:5;flex:1 1 100%;max-width:none}
  .logo{margin-inline-end:auto}

  .hero__card{grid-template-columns:1fr;text-align:center}
  .hero__shot{order:-1}
  .hero__lede{margin-inline:auto}

  .listing__in,.pdp__grid{grid-template-columns:1fr}
  .pdp__frame{min-height:0}
  .pdp__frame img{max-height:320px}
  .cta__in{flex-direction:column;align-items:flex-start}

  /* filters collapse behind a button */
  .filtertoggle{display:flex}
  .side{position:static;display:none}
  .side.is-open{display:flex}
}

@media (max-width:680px){
  /* header: logo + cart on one row, search below */
  .topbar__in{justify-content:center;gap:4px 12px}
  .topbar__links{justify-content:center;font-size:12px}
  .head__in{gap:8px}
  .logo img{height:42px}
  .help{display:none}
  .search{height:44px}
  .search__cat select{max-width:104px;padding-inline:10px 26px;font-size:12.5px}
  .search input{font-size:14px;padding-inline:12px}
  .search__go{width:48px}

  /* nav items become a comfortable tap list */
  .nav.is-open .nav__a{padding:13px 4px;font-size:15px}

  .hero{padding-block:16px 4px}
  .hero__card{padding:24px 18px;border-radius:12px;gap:18px}
  .hero__shot img{max-width:100%;max-height:230px;padding:14px}
  .hero__cta{justify-content:center}

  .stats__in{grid-template-columns:1fr 1fr;gap:12px}
  .stats__i b{font-size:24px}

  .cats__row{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
  .cat{padding:13px 8px;font-size:12px;gap:6px}
  .cat img{width:56px;height:46px}

  /* two product columns, tighter cards */
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card__media{height:132px;padding:10px}
  .card__body{padding:10px 10px 11px;gap:4px}
  .card__name{font-size:12.5px;min-height:2.8em}
  .card__brand{font-size:9.5px}
  .card__dim{font-size:10.5px}
  .card__quote{font-size:11.5px}
  .card__cta{font-size:11.5px;min-height:34px;padding:7px 8px}
  .badge{font-size:9.5px;padding:2px 6px;top:7px;inset-inline-start:7px}

  .results__head{gap:2px}
  .h2{font-size:22px}
  .lede{font-size:14.5px}

  /* product page */
  .pdp__frame{padding:16px}
  .pdp__frame img{max-height:250px}
  .pdp__title{font-size:20px}
  .pdp__buy{position:sticky;bottom:0;z-index:30;margin-inline:calc(var(--pad) * -1);
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
  .pdp__buy .btn{flex:1 1 100%;min-height:46px;font-size:14px}
  .spectbl{font-size:13px}
  .spectbl th,.spectbl td{padding:10px 11px}
  .spectbl th{width:46%}

  /* the sticky buy bar would sit under the floating button */
  .wafloat{width:48px;height:48px;inset-block-end:78px;inset-inline-end:12px}
  .wafloat svg{width:24px;height:24px}

  .logogrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
  .logotile{padding:10px 8px;gap:6px}
  .logotile span{font-size:11.5px}

  .contactgrid{grid-template-columns:1fr}
  .ccard{padding:18px}
  .ccard__list a{font-size:17px}

  .why__row li{padding:18px}
  .pager a,.pager span{min-width:36px;height:36px;padding-inline:9px;font-size:13px}
  .cta__h{font-size:20px}
  .cta__btns{width:100%}
  .cta__btns .btn,.hero .btn{width:100%}

  .foot__top{grid-template-columns:1fr;gap:22px;padding-block:32px 26px}
  .foot__bot{justify-content:center;text-align:center}

  .modal{padding:0}
  .modal__box{border-radius:0;max-height:100vh;height:100%;width:100%}
  .modal__panel{width:100%}
}

@media (max-width:380px){
  .grid{gap:8px}
  .card__media{height:116px}
  .cats__row{grid-template-columns:1fr 1fr}
  .search__cat{display:none}
}