/* ============================================================
   APPLEBAGS DESIGN SYSTEM
   Change the tokens; the whole site follows.
   ============================================================ */
:root{
  --apple:#C9241C; --apple-dark:#A81C15; --leaf:#2A7230; --gold:#8A6508;
  --paper:#FBF9F5; --paper-2:#F3EFE8; --paper-3:#EAE4DA;
  --ink:#151210; --ink-2:#4A443E; --ink-3:#6E6860;
  --line:#DDD6CA; --line-soft:#EBE5DA;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --r-sm:5px; --r:10px; --r-lg:16px; --r-pill:999px;
  --pad:clamp(16px,4vw,56px); --maxw:1300px;
  --shadow:0 14px 40px -16px rgba(21,18,16,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.025em;line-height:1.05}
h1{font-size:clamp(32px,5vw,60px);font-weight:900}
h2{font-size:clamp(26px,3.6vw,42px);font-weight:800}
h3{font-size:19px;font-weight:800}
.serif{font-family:var(--serif);font-style:italic;font-weight:400}
.eyebrow{font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--apple)}
.sub{color:var(--ink-2);max-width:62ch}
.muted{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2.5px solid var(--apple);outline-offset:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;
  border-radius:var(--r-pill);font-weight:700;font-size:14px;transition:.18s;white-space:nowrap}
.btn-primary{background:var(--apple);color:#fff}
.btn-primary:hover{background:var(--apple-dark)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#000}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:9px 15px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- header ---------- */
.announce{background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:600;
  text-align:center;padding:9px 16px}
.announce b{color:#FF8A80}
header.site{position:sticky;top:0;z-index:100;background:rgba(251,249,245,.95);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:18px;padding-block:13px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo svg{width:32px;flex-shrink:0}
.logo .wm{font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:-.045em;line-height:1}
.logo .tl{font-family:var(--serif);font-style:italic;font-size:11px;color:var(--ink-3);display:block;margin-top:1px}
.searchbar{flex:1;display:flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:9px 17px;min-width:0}
.searchbar input{flex:1;background:none;border:0;color:var(--ink);font-size:14px;min-width:0}
.hactions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pmode{display:flex;background:var(--paper-2);border-radius:var(--r-pill);padding:3px}
.pmode button{padding:7px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;color:var(--ink-3)}
.pmode button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pmode button[data-mode="wholesale"][aria-pressed="true"]{background:var(--leaf);color:#fff}
.cartbtn{position:relative}
.cartcount{background:var(--apple);color:#fff;border-radius:var(--r-pill);font-size:11px;
  font-weight:800;padding:2px 7px;margin-left:2px}
/* department nav — scrolls horizontally with arrow controls and edge fades */
nav.cats{border-top:1px solid var(--line-soft);position:relative}
nav.cats .navwrap{max-width:var(--maxw);margin:0 auto;position:relative;
  padding-inline:var(--pad);display:flex;align-items:center}
nav.cats .track{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;flex:1;min-width:0}
nav.cats .track::-webkit-scrollbar{display:none}
nav.cats ul{display:flex;list-style:none;margin:0;padding:0}
nav.cats a{display:block;padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  white-space:nowrap;border-bottom:2.5px solid transparent}
nav.cats a:hover,nav.cats a[aria-current]{color:var(--apple);border-bottom-color:var(--apple)}
nav.cats .navbtn{position:absolute;top:0;bottom:0;width:38px;display:none;align-items:center;
  justify-content:center;background:var(--paper);color:var(--ink-2);z-index:3;
  border:0;cursor:pointer;transition:color .15s}
nav.cats .navbtn:hover{color:var(--apple)}
nav.cats .navbtn.prev{left:0}
nav.cats .navbtn.next{right:0}
nav.cats[data-overflow="true"] .navbtn{display:flex}
nav.cats .navbtn[disabled]{opacity:.25;cursor:default}
/* fades hint that there is more to either side */
nav.cats .navwrap::before,nav.cats .navwrap::after{content:"";position:absolute;top:0;bottom:0;
  width:26px;pointer-events:none;z-index:2;opacity:0;transition:opacity .18s}
nav.cats .navwrap::before{left:38px;background:linear-gradient(90deg,var(--paper),transparent)}
nav.cats .navwrap::after{right:38px;background:linear-gradient(270deg,var(--paper),transparent)}
nav.cats[data-at-start="false"] .navwrap::before{opacity:1}
nav.cats[data-at-end="false"] .navwrap::after{opacity:1}
nav.cats[data-overflow="true"] .track{padding-inline:38px}

/* ---------- product cards ---------- */
section{padding-block:clamp(40px,5.5vw,72px)}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--ink-3)}
.card .media{position:relative;aspect-ratio:1;background:var(--paper-2);overflow:hidden;
  border-bottom:1px solid var(--line-soft)}
.card .media img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);z-index:2}
.tag.low{background:#fff;color:var(--apple);border:1.5px solid var(--apple)}
.tag.out{background:var(--ink);color:#fff}
.tag.res{background:var(--gold);color:#fff}
.tag.hot{background:var(--leaf);color:#fff}
.shots{position:absolute;bottom:9px;right:9px;background:rgba(21,18,16,.78);color:#fff;
  font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
.shots.pending{background:var(--gold)}
.card .media img[data-pending]{opacity:.92}
.card .media{position:relative}
.card .body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.card h3{font-size:14.5px;font-weight:700;line-height:1.3;font-family:var(--body);letter-spacing:-.005em}
.packline{font-size:11.5px;color:var(--ink-3)}
.priceline{margin-top:auto;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;padding-top:8px}
.price{font-family:var(--display);font-size:20px;font-weight:800}
.was{font-size:12.5px;color:var(--ink-3);text-decoration:line-through}
.plabel{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.locked{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--apple);font-weight:700}
.card .add{margin-top:10px;width:100%}
.wholesale-only{display:none}
body[data-mode="wholesale"] .wholesale-only{display:block}
body[data-mode="wholesale"] .retail-only{display:none}
body[data-mode="wholesale"] .price{color:var(--leaf)}

/* ---------- shop layout ---------- */
.shoplayout{display:grid;grid-template-columns:230px 1fr;gap:32px;align-items:start}
.shoplayout>*{min-width:0}
.filters{position:sticky;top:118px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;padding:20px}
.filters h4{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 12px}
.filters ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:2px}
.filters button{display:flex;justify-content:space-between;width:100%;padding:7px 10px;
  border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--ink-2);text-align:left}
.filters button:hover{background:var(--paper-2)}
.filters button[aria-pressed="true"]{background:var(--apple);color:#fff}
.filters .n{opacity:.6;font-size:12px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-bottom:20px;flex-wrap:wrap}
.toolbar select{border:1.5px solid var(--line);border-radius:var(--r-pill);padding:9px 14px;
  font-size:13.5px;background:#fff;font-weight:600}
.empty{border:1.5px dashed var(--line);border-radius:var(--r-lg);padding:56px 24px;text-align:center;color:var(--ink-3)}

/* ---------- product detail ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.pdp .shot{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2)}
.pdp h1{font-size:clamp(26px,3.4vw,40px)}
.spec{display:grid;gap:0;margin:22px 0;border-top:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.spec dt{color:var(--ink-3)}
.spec dd{margin:0;font-weight:700;text-align:right}
.qtyrow{display:flex;gap:10px;align-items:center;margin:18px 0}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);background:#fff}
.qty button{width:40px;height:42px;font-size:19px;font-weight:700;color:var(--ink-2)}
.qty input{width:56px;text-align:center;border:0;font-size:15px;font-weight:700;background:none}
.bigprice{font-family:var(--display);font-size:40px;font-weight:900;letter-spacing:-.03em;line-height:1}
.notice{border-radius:var(--r);padding:12px 15px;font-size:13px;font-weight:600;margin-bottom:14px}
.notice.warn{background:rgba(138,101,8,.1);color:var(--gold)}
.notice.ok{background:rgba(42,114,48,.1);color:var(--leaf)}

/* ---------- pdp gallery + variants ---------- */
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:9px}
.thumb{border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;padding:0;
  background:var(--paper-2);aspect-ratio:1;transition:.15s}
.thumb:hover{border-color:var(--ink-3)}
.thumb.on{border-color:var(--apple);box-shadow:0 0 0 2px rgba(201,36,28,.2)}
.thumb img{width:100%;height:100%;object-fit:cover}
.variantbox{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:20px;margin-top:22px}
.cfgstep{margin-bottom:18px}
.cfgstep:last-of-type{margin-bottom:12px}
.cfglabel{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.cfglabel b{font-family:var(--display);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.cfglabel .pick{font-size:13px;color:var(--apple);font-weight:700;margin-left:auto}
.opts{display:flex;flex-wrap:wrap;gap:7px;max-height:190px;overflow-y:auto}
.opt{border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-pill);
  padding:7px 14px;font-size:13px;font-weight:600;transition:.15s}
.opt:hover{border-color:var(--ink-3)}
.opt.on{border-color:var(--apple);background:var(--apple);color:#fff}
.varline{border-top:1px solid var(--line-soft);padding-top:12px;font-size:13.5px}
.varline b{font-family:var(--display);letter-spacing:.02em}

/* ---------- cart ---------- */
.cartlayout{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start}
.citem{display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line-soft)}
.citem img{width:84px;height:84px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.summary{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:24px;position:sticky;top:118px}
.srow{display:flex;justify-content:space-between;padding:8px 0;font-size:14.5px}
.srow.total{border-top:2px solid var(--ink);margin-top:10px;padding-top:14px;
  font-family:var(--display);font-size:24px;font-weight:800}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.field input,.field textarea,.field select{border:1.5px solid var(--line);border-radius:var(--r);
  padding:11px 14px;font-size:14px;font-family:var(--body);background:#fff;width:100%}
.field textarea{min-height:90px;resize:vertical}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--paper);padding-top:48px;margin-top:40px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px;padding-bottom:36px}
.fgrid h4{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;margin:0 0 14px}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fgrid a{font-size:13px;color:#B9B2A9}
.fgrid a:hover{color:#FF8A80}
.fbrand p{font-size:13px;color:#B9B2A9;max-width:34ch;margin:12px 0 14px;line-height:1.6}
.fbrand .ph{font-family:var(--display);font-size:18px;font-weight:800}
.legal{border-top:1px solid #35302B;padding-block:22px;font-size:11.5px;color:#8C857C;line-height:1.7}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.badge{border:1px solid #35302B;border-radius:var(--r-sm);padding:4px 10px;font-weight:700;
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#B9B2A9}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .cartlayout{grid-template-columns:1fr}
  .summary{position:static}
}
@media(max-width:860px){
  .shoplayout{grid-template-columns:1fr}
  .filters{position:static;padding:16px;min-width:0;overflow:hidden}
  .filters ul{display:flex;overflow-x:auto;gap:8px;margin-bottom:16px;
    scrollbar-width:none;padding-bottom:2px}
  .filters ul::-webkit-scrollbar{display:none}
  .filters li{flex:0 0 auto}
  .filters button{width:auto;border:1.5px solid var(--line);border-radius:var(--r-pill);
    padding:8px 14px;white-space:nowrap;gap:7px}
  .filters button[aria-pressed="true"]{border-color:var(--apple)}
  .pdp{grid-template-columns:1fr;gap:26px}
  .searchbar{display:none}
}
@media(max-width:600px){
  .pgrid{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .hrow{gap:10px}
  /* header actions must be allowed to shrink or they push the page sideways */
  .hactions{flex-shrink:1;min-width:0;gap:6px}
  .hactions .btn-ghost{display:none}          /* "Apply" lives in the nav + footer on mobile */
  .logo{min-width:0}
  .logo .wm{font-size:18px}
  .logo .tl{display:none}
  .pmode button{padding:6px 9px;font-size:11px}
  .cartbtn{padding:9px 12px}
}
@media(max-width:380px){
  .pmode{display:none}                        /* toggle moves to the shop page filters */
}