/* ===========================================================================
   SNIPER SHOPPING - brand tokens
   Orange and white with black doing the structural work. No grey panels:
   section backgrounds are white, and separation comes from rules, not fills.
   Colours are the live store's own - #ff752b with #ea5b0c on hover.
   =========================================================================== */

:root{
  /* the orange scale, built around the live store's accent */
  --navy-900:#0B0B0C;   /* the component layer is shared, so the names stay;   */
  --navy-800:#141416;   /* here they carry the Shopping palette instead        */
  --navy-700:#1C1C1F;   /* headers and footers: near-black, not navy           */
  --navy-600:#2A2A2E;
  --navy-500:#3D3D43;
  --navy-400:#8A8A92;
  --navy-300:#C9C9CF;
  --navy-100:#EDEDEF;
  --navy-50:#FFFFFF;    /* no grey fills - tinted sections resolve to white    */

  /* brand */
  --brand:#ff752b;
  --brand-dark:#ea5b0c;
  --amber:#ff752b;         /* the shared layer's accent slot                   */
  --amber-600:#ea5b0c;
  --amber-soft:rgba(255,117,43,.12);

  /* the other division, for the home header block and its marks */
  --cross-bg:#182957;      /* Sniper Safety navy */
  --cross-ink:#FFFFFF;
  --fab-bg:#ff752b;
  --fab-ink:#FFFFFF;
  --fab-badge:#111111;
  --fab-badge-ink:#FFFFFF;

  /* neutrals */
  --ink:#111111;
  --body:#3A3A3E;
  --muted:#77777E;
  --line:#E6E6E9;
  --line-soft:#F1F1F3;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;     /* the tint class stays white, by instruction       */

  --ok:#1E9E62;
  --warn:#C9721B;

  /* type - the pairing the live store already serves */
  --display:"Oswald","Segoe UI",system-ui,sans-serif;
  --ui:"Inter","Segoe UI",system-ui,sans-serif;

  /* metrics */
  --container:1200px;
  --gutter:24px;
  --r-card:4px;            /* squarer than Safety - tactical, not corporate    */
  --r-input:4px;
  --r-pill:999px;

  --shadow-1:0 1px 2px rgba(17,17,17,.05),0 2px 8px rgba(17,17,17,.04);
  --shadow-2:0 8px 26px rgba(17,17,17,.09);
  --shadow-3:0 18px 48px rgba(17,17,17,.15);

  --ease:cubic-bezier(.77,0,.18,1);
  --ease-out:cubic-bezier(.2,.7,.3,1);

  --header-h:76px;
}

/* ---------------------------------------------------------------------------
   Brand-specific overrides on top of the shared component layer
   --------------------------------------------------------------------------- */

/* white sections, separated by a rule rather than a grey fill */
.section--tint{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--navy{background:var(--ink);color:#fff}

/* buttons: square, orange, with black as the alternate */
.btn{border-radius:2px;letter-spacing:.15em}
.btn--amber{background:var(--brand);color:#fff}
.btn--amber:hover{background:var(--brand-dark)}
.btn--navy{background:var(--ink);color:#fff}
.btn--navy:hover{background:var(--brand)}
.btn--outline{border-color:var(--ink);color:var(--ink);border-radius:2px}
.btn--outline:hover{background:var(--ink);color:#fff}

/* header: black bar, orange underline on the active item */
.topbar{background:#000;color:rgba(255,255,255,.76)}
.header{background:var(--ink)}
.nav__link::after{background:var(--brand)}
.mega{border-top-color:var(--brand)}
.mega__promo{background:var(--ink)}
.quote-cta{background:var(--brand);color:#fff}

/* product cards: no fill, a rule and a lift */
.prod{border-radius:2px}
.prod__media{background:#fff}
.prod__price{color:var(--ink)}
.chip--cert{background:#fff;border-color:var(--line);color:var(--body)}
.chip--new{background:var(--brand);color:#fff}
.addbtn,.iconaction{border-radius:2px}
.cert{color:var(--body);border-color:var(--line)}

/* category tiles keep the store's portrait crop */
.cat{border-radius:2px}
.cat .ic{color:var(--brand)}
.cat__go{color:rgba(255,255,255,.6)}
.cat:hover .cat__go{color:var(--brand)}

.ind__ic{background:#fff;border:1px solid var(--line);color:var(--ink)}
.ind:hover .ind__ic{background:var(--ink);color:var(--brand)}
.ind{background:#fff}
.ind:hover{background:#fff;border-color:var(--ink)}

.why__ic{background:var(--amber-soft);color:var(--brand-dark)}
.corp{background:var(--ink);border-radius:2px}
.corp__list .ic{color:var(--brand)}
.footer{background:#000}
.footer a:hover{color:var(--brand)}
.phero,.cat-hero{background:var(--ink)}
.filters,.panel,.form,.branch,.ccard,.pillar{border-radius:2px}
.sizebox.on,.fopt input:checked + .box{background:var(--brand);border-color:var(--brand)}
.viewtog button.on{background:var(--ink)}
.fchip{background:#fff;border-color:var(--line);color:var(--ink)}
.spec th{width:40%}
.gallery__main,.gallery__thumbs button{border-radius:2px}
.gallery__thumbs button.on{border-color:var(--brand)}
.buybox__price b{color:var(--ink)}
.bulk__head{background:#fff;border-bottom:1px solid var(--line);color:var(--ink)}
.trustlist .ic{color:var(--brand)}
.subnav a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.subnav a.on .ic{color:#fff}

/* ---------------------------------------------------------------------------
   White header - black type, the colour logo, orange on hover
   --------------------------------------------------------------------------- */
.header{background:#fff;border-bottom:1px solid var(--line)}
.header .brand img{height:44px}
.nav__link{color:var(--ink)}
.nav__link:hover,.nav__item[aria-expanded="true"] .nav__link{color:var(--brand)}
.header .iconbtn{color:var(--ink)}
.header .iconbtn:hover{background:var(--line-soft)}
.badge{border:2px solid #fff}
.nav__link::after{background:var(--brand)}

/* the drawer takes the same treatment */
.drawer__head{background:#fff;border-bottom:1px solid var(--line)}
.drawer__head img{filter:none;height:38px}
.drawer__head .iconbtn{color:var(--ink)}

/* the Safety wash still needs white type sitting on navy */
.crossnav{color:#fff}

/* ---------------------------------------------------------------------------
   Product card - orange does the selling
   --------------------------------------------------------------------------- */
.prod__price{color:var(--brand);font-weight:600}
.prod__price s{color:var(--navy-300)}
.prod .btn--navy,.buybox .btn--navy{background:var(--brand);color:#fff}
.prod .btn--navy:hover,.buybox .btn--navy:hover{background:var(--brand-dark)}
.chip--bulk,.chip--new{background:var(--brand);color:#fff}
.prod__flags .chip{box-shadow:0 2px 8px rgba(17,17,17,.18)}
.iconaction{border-color:var(--line);color:var(--ink)}
.iconaction:hover{border-color:var(--brand);color:var(--brand);background:var(--amber-soft)}
.buybox__price b{color:var(--brand)}
/* every tag on a card is orange - there is no black chip on this storefront */
.chip--bulk,.chip--new,.prod__flags .chip:not(.chip--stock):not(.chip--oos){background:var(--brand);color:#fff;border-color:transparent}
.chip--oos{background:rgba(198,40,40,.1);color:#C62828;border:1px solid rgba(198,40,40,.22)}

/* mega menu - plain white under the white header, separated by the orange rule */
:root{--mega-bg:#FFFFFF}
.mega{background:#fff;border-top-color:var(--brand)}
.mega__col h4{color:var(--ink);border-bottom-color:var(--line)}
.mega__link{color:var(--body)}
.mega__link:hover{color:var(--brand)}
.mega__link .ic{color:var(--navy-400)}
.mega__link:hover .ic{color:var(--brand)}

/* this division's own colour, used by the switch curtain on arrival */
:root{--division-bg:#ff752b}