/* Vulcan Workwear — catalogue + shop
   ------------------------------------------------------------------
   Direction: a working catalogue, not a brochure. The old site opened
   with a full-screen cinematic hero and made you scroll to reach the
   range; this one puts the six models on screen immediately and keeps
   the specs visible, because the people buying this compare before
   they buy. Light ground, tight grid, data set in tabular figures.
   Teal is reserved for things you can act on.
   ------------------------------------------------------------------ */

:root{
  --bg:#F2F5F5;
  --surface:#FFFFFF;
  --surface-2:#E9EEED;
  --surface-3:#DFE6E5;
  --ink:#0E1A19;
  --ink-soft:#4B5957;
  --ink-faint:#5F6A68;   /* 5.11:1 on the page, 5.60:1 on white — AA for body text */
  --line:#D9E0DF;
  --line-strong:#B9C4C2;

  --accent:#387F87;
  --accent-deep:#2A6168;
  --accent-ink:#1F4A50;
  --accent-soft:#E4EFF0;
  --on-accent:#FFFFFF;   /* text that sits ON --accent */

  --ok:#2C6E49;
  --ok-soft:#E3F0E8;
  --warn:#9C5524;
  --warn-soft:#F6E9DF;

  --display:"Rubik","Arial Hebrew","Segoe UI",system-ui,sans-serif;
  --ui:"Heebo","Arial Hebrew","Segoe UI",system-ui,sans-serif;

  --r:3px;
  --shadow-1:0 1px 2px rgba(14,26,25,.05);
  --shadow-2:0 1px 2px rgba(14,26,25,.05),0 6px 18px rgba(14,26,25,.07);
  --shadow-3:0 10px 40px rgba(14,26,25,.14);

  --head-h:62px;
  --wrap:1280px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1413;
    --surface:#161F1E;
    --surface-2:#1E2928;
    --surface-3:#273432;
    --ink:#E8EDEC;
    --ink-soft:#A3B0AE;
    --ink-faint:#7D8A88;
    --line:#2A3634;
    --line-strong:#3B4947;

    --accent:#5FA9B1;
    --accent-deep:#8ACBD1;
    --accent-ink:#A9DCE1;
    --accent-soft:#1A2C2E;
    --on-accent:#08201F;

    --ok:#6FB58C;  --ok-soft:#17291F;
    --warn:#D1905F; --warn-soft:#2B1E14;

    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3);
    --shadow-3:0 10px 40px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1413; --surface:#161F1E; --surface-2:#1E2928; --surface-3:#273432;
  --ink:#E8EDEC; --ink-soft:#A3B0AE; --ink-faint:#7D8A88;
  --line:#2A3634; --line-strong:#3B4947;
  --accent:#5FA9B1; --accent-deep:#8ACBD1; --accent-ink:#A9DCE1; --accent-soft:#1A2C2E;
  --on-accent:#08201F;
  --ok:#6FB58C; --ok-soft:#17291F; --warn:#D1905F; --warn-soft:#2B1E14;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3);
  --shadow-3:0 10px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ui);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--wrap);margin:0 auto;
  padding-left:max(18px,env(safe-area-inset-left,0px));
  padding-right:max(18px,env(safe-area-inset-right,0px));}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Hidden ABOVE the page, never beside it. In RTL inset-inline-start is the
   right edge, so a -9999px offset pushed this off to the right and gave the
   document 10,000px of horizontal scroll on every page. A vertical offset
   cannot do that. */
/* fixed colours, not tokens: this must stay legible in either theme */
.skip{position:absolute;inset-inline-start:0;top:-120px;z-index:200;
  background:#14403F;color:#fff;padding:10px 16px}
.skip:focus{top:0}

/* ---------- header ---------- */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:var(--surface);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:14px;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.brand img{width:30px;height:30px}
.brand b{font-family:var(--display);font-weight:800;font-size:15.5px;letter-spacing:.01em}
.brand span{display:block;font-size:9.5px;letter-spacing:.2em;color:var(--ink-faint);
  font-weight:600;margin-top:-3px}
.nav{display:flex;gap:2px;margin-inline-start:12px;flex:1 1 auto;min-width:0}
.nav a{padding:8px 11px;text-decoration:none;color:var(--ink-soft);font-size:14.5px;
  font-weight:500;border-radius:var(--r);white-space:nowrap}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent-ink);background:var(--accent-soft);font-weight:600}
.head-act{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:0 12px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;font-size:14px;font-weight:500;position:relative}
.icon-btn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.icon-btn svg{width:18px;height:18px;flex:0 0 auto}
.cart-count{position:absolute;top:-7px;inset-inline-end:-7px;min-width:19px;height:19px;
  padding:0 5px;background:var(--accent);color:var(--on-accent);border-radius:10px;
  font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums}
.cart-count.on{display:flex}
.navtoggle{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;border-radius:var(--r);border:1px solid transparent;
  font-family:var(--ui);font-weight:600;font-size:15px;cursor:pointer;
  text-decoration:none;position:relative;overflow:hidden;isolation:isolate}
/* The hover wash. Animating this instead of `background` keeps the button's
   real colour a plain token lookup, which is what survives a theme change. */
.btn::after{content:"";position:absolute;inset:0;background:#000;opacity:0;
  transition:opacity .14s ease;pointer-events:none;z-index:-1}
.btn:hover::after{opacity:.13}
.btn:active::after{opacity:.2}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn-wide{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- chips & labels ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:2px;
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.05em;
  white-space:nowrap}
.chip-s3{background:var(--accent);color:var(--on-accent)}
.chip-life{background:var(--surface-3);color:var(--ink-soft)}
.chip-soft{background:var(--accent-soft);color:var(--accent-ink)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
/* says a photograph is still coming, so the placeholder tile is never
   mistaken for the product */
.chip-pending{background:var(--warn-soft);color:var(--warn)}
.eyebrow{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- page intro ---------- */
.intro{padding-block:30px 22px}
.intro h1{font-size:clamp(27px,3.6vw,42px);font-weight:800;letter-spacing:-.022em}
.intro p{margin-top:10px;color:var(--ink-soft);max-width:60ch;font-size:16px}
.intro-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px}
.intro-row>div:first-child{flex:1 1 320px;min-width:0}

/* a compact strip of facts, not a hero */
.facts{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);overflow:hidden}
.facts div{flex:1 1 140px;min-width:0;padding:11px 15px;border-inline-start:1px solid var(--line)}
.facts div:first-child{border-inline-start:0}
.facts b{display:block;font-family:var(--display);font-size:17px;font-weight:800;
  font-variant-numeric:tabular-nums}
.facts span{font-size:12.5px;color:var(--ink-faint)}

/* ---------- filter bar ---------- */
.filters{position:sticky;top:calc(var(--head-h) + env(safe-area-inset-top,0px));z-index:50;
  background:var(--bg);padding-block:12px;border-bottom:1px solid var(--line);
  margin-bottom:22px}
.filters-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fgroup{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fgroup>span{font-size:12.5px;color:var(--ink-faint);font-weight:600;
  margin-inline-end:2px}
.pill{padding:6px 13px;border:1px solid var(--line);background:var(--surface);
  border-radius:100px;font-size:13.5px;font-weight:500;cursor:pointer;
  color:var(--ink-soft);min-height:34px}
.pill:hover{border-color:var(--line-strong);color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent);font-weight:600}
.fcount{margin-inline-start:auto;font-size:13px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px;
  padding-bottom:56px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;min-width:0;
  box-shadow:var(--shadow-1);transition:box-shadow .15s ease}
.card:hover{box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.card-media{position:relative;background:var(--surface-2);aspect-ratio:1/1;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-media img{transform:scale(1.035)}
.card-media .chip{position:absolute;top:10px;inset-inline-start:10px}
/* must come AFTER the rule above: same specificity, so source order
   decides. Sits at the bottom of the tile so it never collides with the
   rating chip at the top. */
.card-media .chip-pending{top:auto;bottom:10px}
/* the premium mark sits opposite the rating so the two never stack */
.chip-prem{background:var(--ink);color:var(--bg)}
.card-media .chip-prem{top:10px;inset-inline-start:auto;inset-inline-end:10px}
.card-prem{font-size:12.5px;font-weight:600;color:var(--accent-ink);
  background:var(--accent-soft);padding:4px 9px;border-radius:2px;
  align-self:flex-start}
.card-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-top{display:flex;align-items:baseline;gap:8px}
.card-top h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
.card-top em{font-style:normal;font-size:13px;color:var(--ink-faint)}
.card-blurb{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.card-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--ink-faint);
  margin-top:auto;padding-top:6px}
.card-foot{display:flex;align-items:center;gap:10px;padding-top:10px;
  border-top:1px solid var(--line);margin-top:8px}
.price{font-family:var(--display);font-weight:800;font-size:17px;
  font-variant-numeric:tabular-nums}
.price small{font-weight:500;font-size:12px;color:var(--ink-faint)}
.price-tbc{font-family:var(--ui);font-weight:600;font-size:13.5px;color:var(--accent-ink);
  background:var(--accent-soft);padding:3px 9px;border-radius:2px}
.swatches{display:flex;gap:5px;margin-inline-start:auto}
.sw{width:17px;height:17px;border-radius:50%;border:1px solid rgba(0,0,0,.25);
  box-shadow:inset 0 0 0 2px var(--surface)}
.card a.stretch{position:absolute;inset:0;z-index:1}
.card-media{position:relative}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
th,td{padding:11px 14px;text-align:start;border-bottom:1px solid var(--line);
  vertical-align:top}
thead th{background:var(--surface-2);font-family:var(--display);font-weight:700;
  font-size:12.5px;letter-spacing:.04em;position:sticky;top:0;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
th[scope="row"]{font-weight:600;color:var(--ink-soft);white-space:nowrap}
td.n{font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
.foot{background:var(--surface);border-top:1px solid var(--line);margin-top:40px;
  padding-block:34px 26px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px}
/* h2 for the outline's sake, but sized as the small label it looks like */
.foot h2{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px}
.foot a{display:block;text-decoration:none;color:var(--ink-soft);padding:3px 0;font-size:14px}
.foot a:hover{color:var(--accent-ink)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;padding-top:16px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-faint)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav{position:fixed;inset-block:0;inset-inline-end:0;width:min(78vw,300px);
    flex-direction:column;gap:2px;background:var(--surface);z-index:80;
    border-inline-start:1px solid var(--line);padding:calc(var(--head-h) + 14px) 14px 14px;
    transform:translateX(105%);transition:transform .22s ease;margin:0}
  [dir="rtl"] .nav{transform:translateX(-105%)}
  .nav.open{transform:translateX(0)!important}
  .nav a{padding:12px 13px;font-size:16px}
  .navtoggle{display:inline-flex}
}
/* On a phone the four filter groups wrap to four rows. Stuck to the top
   that is roughly a third of the screen held open permanently, with the
   products scrolling through the gap underneath. It scrolls away instead;
   the range is short enough that scrolling back up is no hardship. */
@media (max-width:760px){
  .filters{position:static;padding-block:10px}
  .fgroup>span{flex-basis:100%;margin-bottom:-2px}
}
@media (max-width:620px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:11px}
  .card-body{padding:11px 12px 12px}
  .card-top h3{font-size:16.5px}
  .card-blurb{display:none}
  .facts div{flex-basis:50%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .card:hover .card-media img{transform:none}
}