/* ==========================================================================
   Rig Dawgs storefront: category grid -> product list -> product page -> bag.
   Layout follows the reference Kage sent; the palette stays Rig Dawgs.
   Loads AFTER site.css and reuses its tokens (--ink, --crimson, --bone ...).
   ========================================================================== */

/* ---------- header with the bag count ---------- */
.shead{position:sticky;top:0;z-index:60;background:rgba(11,11,12,.94);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--steel)}
.shead__in{display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter);
  padding-top:calc(12px + env(safe-area-inset-top,0px))}
.shead a,.shead button{color:var(--bone);text-decoration:none;background:none;border:0;
  font:600 14px/1 var(--utility);text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
.shead__nav{display:flex;gap:18px}
.shead__nav a{color:var(--slate)}
.shead__nav a:hover,.shead__home:hover{color:var(--bone)}
.shead__bag{white-space:nowrap}
.shead__bag[data-has]{color:var(--signal)}
@media (max-width:520px){ .shead__nav a:not(:first-child){display:none} }

.swrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sband{padding:34px 0 18px}
.sband h1{font:800 clamp(32px,7vw,54px)/1 var(--display);text-transform:uppercase;
  letter-spacing:-.01em;margin:6px 0 0}
.sband__lead{max-width:52ch;margin-top:10px;color:var(--slate);font:400 15.5px/1.55 var(--body)}
.crumb{font:600 12.5px/1 var(--utility);text-transform:uppercase;letter-spacing:.1em;
  color:var(--slate);text-decoration:none}
.crumb:hover{color:var(--signal)}

/* ---------- category grid (two across, edge to edge like the reference) ---------- */
.catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;list-style:none;
  margin:14px 0 0;padding:0;background:var(--steel)}
.cattile{background:var(--ink)}
.cattile a{display:block;color:inherit;text-decoration:none}
.cattile__img{display:block;aspect-ratio:1;overflow:hidden;background:#1a1a1d}
.cattile__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 420ms var(--ease-out)}
@media (hover:hover){ .cattile a:hover .cattile__img img{transform:scale(1.04)} }
.cattile__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px var(--gutter) 2px}
.cattile__name{font:800 clamp(15px,3.6vw,20px)/1 var(--display);text-transform:uppercase}
.cattile__go{font:600 12.5px/1 var(--utility);text-transform:uppercase;letter-spacing:.09em;
  color:var(--signal)}
.cattile__n{display:block;padding:0 var(--gutter) 14px;color:var(--slate);
  font:500 12px/1.3 var(--utility);text-transform:uppercase;letter-spacing:.07em}

/* ---------- product list ---------- */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;list-style:none;
  margin:18px 0 0;padding:0;background:var(--steel)}
/* Fewer columns = bigger photos. Kage: "make them bigger". Was 3-up from 640 and 4-up from
   1000, which left cards ~360px on a laptop. Now 3-up holds until 1500. */
@media (min-width:900px){ .pgrid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1200px){ .pgrid{grid-template-columns:repeat(4,1fr)} }
.pcard{background:var(--ink)}
.pcard a{display:block;color:inherit;text-decoration:none;padding-bottom:10px}
.pcard__img{display:block;aspect-ratio:1;overflow:hidden;background:#1a1a1d}
.pcard__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 420ms var(--ease-out)}
@media (hover:hover){ .pcard a:hover .pcard__img img{transform:scale(1.04)} }
.pcard__name{display:block;padding:12px var(--gutter) 0;
  font:800 16px/1.1 var(--display);text-transform:uppercase}
.pcard__col{display:block;padding:3px var(--gutter) 0;color:var(--slate);
  font:500 12px/1.2 var(--utility);text-transform:uppercase;letter-spacing:.07em}
.pcard__price{display:block;padding:6px var(--gutter) 0;color:var(--bone);
  font:600 15px/1 var(--utility)}
.pcard__sizes{display:flex;flex-wrap:wrap;gap:9px;padding:9px var(--gutter) 0}
.pcard__sizes span{color:var(--slate);font:500 11.5px/1 var(--utility);
  text-transform:uppercase;letter-spacing:.06em}
.pgrid--sm .pcard__name{font-size:14px}

/* ---------- product page ---------- */
.pv{display:block}
@media (min-width:980px){
  /* gallery given more of the row so the product photo reads bigger */
  .pv{display:grid;grid-template-columns:1.3fr .7fr;gap:0 40px;
    max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);align-items:start}
  /* NOT sticky. It was pinning the photo to the screen while the specs, reviews and
     'you might also like' scrolled underneath it, so the photo sat on top of the text.
     Kage: "why does that thing stay on my screen the whole time blocking my view".
     The gallery now scrolls with the page like everything else. */
  .pv__detail,.revs,.sim{grid-column:1 / -1}
}
/* the slider is a scroll-snap track: no JS needed to swipe, JS only syncs the dots */
.pv__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;
  margin:0;padding:0;scrollbar-width:none;background:#1a1a1d}
.pv__track::-webkit-scrollbar{display:none}
.pv__slide{flex:0 0 100%;scroll-snap-align:center}
.pv__slide img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pv__dots{display:flex;gap:6px;justify-content:center;padding:12px 0 4px}
.pv__dot{width:26px;height:3px;border:0;padding:0;border-radius:2px;
  background:var(--steel);cursor:pointer;transition:background 200ms}
.pv__dot.is-on{background:var(--signal)}

.pv__buy{padding:16px var(--gutter) 26px}
@media (min-width:980px){ .pv__buy{padding:26px 0 26px} }
.pv__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pv__head h1{font:800 clamp(24px,5.4vw,34px)/1.05 var(--display);text-transform:uppercase;
  letter-spacing:-.01em;margin:0;max-width:18ch}
.pv__price{font:700 22px/1 var(--utility);color:var(--bone);margin:2px 0 0;white-space:nowrap}
.pv__blurb{margin:12px 0 0;color:var(--slate);font:400 15px/1.55 var(--body);max-width:46ch}
.pv__field{margin-top:22px}
.pv__label{display:block;font:600 12.5px/1 var(--utility);text-transform:uppercase;
  letter-spacing:.1em;color:var(--slate);margin-bottom:10px}
.pv__label strong{color:var(--bone)}
.pv__sws{display:flex;gap:14px;flex-wrap:wrap}
.pv__sw{width:26px;height:26px;border-radius:50%;border:1px solid var(--steel);
  background:var(--c);padding:0;cursor:pointer;position:relative}
/* gap must stay larger than 2x this inset or the targets overlap and the later
   sibling steals the click -- the "black selects grey" bug from Sept 28 */
.pv__sw::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.pv__sw.is-on{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--signal)}
.pv__sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:8px;max-width:420px}
.pv__size{padding:13px 6px;background:transparent;border:1px solid var(--steel);
  color:var(--bone);font:600 13.5px/1 var(--utility);text-transform:uppercase;
  letter-spacing:.06em;cursor:pointer;border-radius:2px;transition:border-color 160ms,background 160ms}
@media (hover:hover){ .pv__size:hover{border-color:var(--slate)} }
.pv__size.is-on{border-color:var(--signal);background:rgba(188,16,10,.14);color:var(--bone)}
.pv__err{color:var(--signal);font:600 13px/1.4 var(--utility);margin:10px 0 0}
.btn--wide{display:block;width:100%;margin-top:20px;text-align:center}
.btn--ghost{background:transparent;border:1px solid var(--steel);color:var(--bone)}
@media (hover:hover){ .btn--ghost:hover{border-color:var(--signal)} }
.pv__entry{margin:14px 0 0;color:var(--signal);font:600 12.5px/1.4 var(--utility);
  text-transform:uppercase;letter-spacing:.07em}
.pv__ship{margin:6px 0 0;color:var(--slate);font:400 13px/1.5 var(--body)}

/* ---------- accordions ---------- */
.pv__detail{padding:6px var(--gutter) 10px;max-width:var(--wrap);margin:0 auto}
/* margin:0 auto centres this section in the one-column phone layout, but .pv__detail
   is a GRID ITEM at this width -- and auto side margins cancel a grid item's default
   stretch, collapsing it to content width (300px) and parking it under the sticky
   gallery. Reset both so it spans 1/-1 for real. */
@media (min-width:980px){ .pv__detail{padding:6px 0 10px;margin:0;max-width:none} }
.acc{border-top:1px solid var(--steel)}
.acc:last-of-type{border-bottom:1px solid var(--steel)}
.acc summary{display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;cursor:pointer;list-style:none;
  font:700 15px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--slate);font:400 20px/1 var(--body)}
.acc[open] summary::after{content:"\2212"}
.acc ul{margin:0 0 16px;padding-left:18px;color:var(--slate);
  font:400 14.5px/1.7 var(--body)}

/* ---------- reviews + similar ---------- */
.revs{padding:26px 0 8px}
.revs h2,.sim h2{font:800 22px/1 var(--display);text-transform:uppercase;margin:0 0 10px}
.revs__empty{color:var(--slate);font:400 15px/1.6 var(--body);max-width:46ch;margin:0 0 14px}
/* inline-FLEX, not inline-block. .btn centres its label with align-items/justify-content,
   which only work on a flex box -- inline-block silently disabled both and left the 16px
   line sitting at the top of the 46px button. Kage spotted it: "it's not even centered
   in its box". inline-flex keeps it from stretching, same as inline-block did. */
.revs .btn{display:inline-flex}
.sim{padding:22px 0 90px}

/* ---------- sticky buy bar ---------- */
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  align-items:center;gap:12px;padding:10px var(--gutter);
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(11,11,12,.96);backdrop-filter:blur(8px);border-top:1px solid var(--steel)}
.stickybuy.is-on{display:flex}
.stickybuy__p{font:700 19px/1 var(--utility);color:var(--bone)}
.stickybuy .btn{flex:1;text-align:center}
@media (min-width:980px){ .stickybuy{display:none!important} }

/* ---------- bag drawer ---------- */
.drawer{position:fixed;inset:0;z-index:80}
.drawer[hidden]{display:none}
.drawer__veil{position:absolute;inset:0;background:rgba(6,6,7,.66);
  animation:fadeIn 220ms var(--ease-out) both}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);
  display:flex;flex-direction:column;background:var(--coal);
  border-left:1px solid var(--steel);animation:slideIn 280ms var(--ease-out) both;
  padding-top:env(safe-area-inset-top,0px)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .drawer__veil,.drawer__panel{animation:none}
}
.drawer__top{display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gutter);border-bottom:1px solid var(--steel)}
.drawer__top h2{font:800 20px/1 var(--display);text-transform:uppercase;margin:0}
.drawer__x{background:none;border:0;color:var(--slate);font-size:26px;line-height:1;
  cursor:pointer;padding:0 4px}
.drawer__x:hover{color:var(--bone)}
.drawer__body{flex:1;overflow-y:auto;padding:8px var(--gutter)}
.drawer__empty{color:var(--slate);font:400 15px/1.6 var(--body);padding:22px 0}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--steel)}
.line img{width:64px;height:64px;object-fit:cover;border:1px solid var(--steel);border-radius:2px}
.line__n{display:block;font:700 14px/1.2 var(--display);text-transform:uppercase}
.line__v{display:block;margin-top:3px;color:var(--slate);font:500 12px/1.4 var(--utility);text-transform:uppercase;letter-spacing:.06em}
.line__p{font:600 14px/1 var(--utility);color:var(--bone)}
/* This is a real button and always was, but styled as flat grey text nobody read as
   clickable -- Kage: "theres gotta be an option to remove from cart". Underlined and
   lifted in contrast so it reads as an action. */
.line__rm{display:inline-block;margin-top:6px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--bone);font:600 11.5px/1 var(--utility);text-transform:uppercase;letter-spacing:.07em;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--steel)}
.line__rm:hover{color:var(--signal);text-decoration-color:var(--signal)}
.line__rm:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.drawer__foot{border-top:1px solid var(--steel);padding:14px var(--gutter);
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.drawer__entries{margin:0 0 8px;color:var(--signal);font:600 12.5px/1.4 var(--utility);
  text-transform:uppercase;letter-spacing:.07em}
.drawer__sum{display:flex;justify-content:space-between;align-items:baseline;margin:0;
  font:600 14px/1 var(--utility);text-transform:uppercase;letter-spacing:.08em;color:var(--slate)}
.drawer__sum strong{font:700 22px/1 var(--utility);color:var(--bone)}
.drawer__note{margin:6px 0 0;color:var(--slate);font:400 12.5px/1.5 var(--body)}
.drawer__foot .btn{margin-top:12px}
.drawer__msg{margin:10px 0 0;color:var(--signal);font:500 13px/1.5 var(--body)}

/* ---------- colour swatches on a product card ----------
   Lets the listing stay one card per DESIGN instead of one per colourway, the same
   way the home page works. Gap must stay > 2x the ::before inset or the targets
   overlap and the next swatch steals the click (the Sept 28 bug). */
.pcard{position:relative}
.pcard__sws{display:flex;gap:12px;flex-wrap:wrap;padding:10px var(--gutter) 20px}
.pcard__sw{width:26px;height:26px;border-radius:50%;border:1px solid var(--steel);
  background:var(--c);padding:0;cursor:pointer;position:relative;flex:0 0 auto}
.pcard__sw::before{content:"";position:absolute;inset:-5px;border-radius:50%}
.pcard__sw.is-on{box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--signal)}
.pcard__img img.is-swap{opacity:.25}
.pcard__img img{transition:transform 420ms var(--ease-out),opacity 180ms linear}

/* ---------- shop landing: every design on one page, grouped by garment ---------- */
.sjump{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px}
.sjump a{color:var(--slate);text-decoration:none;font:600 12.5px/1 var(--utility);
  text-transform:uppercase;letter-spacing:.09em;padding-bottom:3px;border-bottom:1px solid transparent}
.sjump a:hover{color:var(--signal);border-bottom-color:var(--signal)}
.sgroup{margin-top:28px;scroll-margin-top:72px}
.sgroup__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sgroup__head h2{font:800 clamp(20px,4.6vw,27px)/1 var(--display);text-transform:uppercase;margin:0}
.sgroup__n{color:var(--slate);font:500 12px/1 var(--utility);text-transform:uppercase;letter-spacing:.08em}

/* ---------- cart button: top right of the real site header ----------
   order:2 puts it last in the header's flex row, so it is the rightmost thing on
   desktop. On a phone the header wraps, so it gets order:0 + margin-left:auto to
   pin it to the right of the FIRST row instead of falling below the logo. */
.cartbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;order:2;padding:0;cursor:pointer;
  background:transparent;border:1px solid var(--steel);border-radius:3px;color:var(--bone);
  transition:border-color 180ms,color 180ms,transform 180ms var(--ease-out)}
.cartbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .cartbtn:hover{border-color:var(--signal);transform:translateY(-1px)} }
.cartbtn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.cartbtn__n{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;border-radius:10px;background:var(--steel);color:var(--bone);
  font:700 11.5px/1 var(--utility);border:2px solid var(--coal);
  transition:background 200ms,transform 220ms var(--ease-pop)}
.cartbtn[data-has]{border-color:var(--signal)}
.cartbtn[data-has] .cartbtn__n{background:var(--crimson);color:#fff}
/* fires once each time something lands in the bag */
@keyframes cartBump{
  0%{transform:none} 28%{transform:translateY(-5px) rotate(-7deg)}
  55%{transform:translateY(0) rotate(4deg)} 100%{transform:none}
}
@keyframes cartPop{0%{transform:scale(.4)} 60%{transform:scale(1.28)} 100%{transform:scale(1)}}
.cartbtn.is-bump{animation:cartBump 520ms var(--ease-out)}
.cartbtn.is-bump .cartbtn__n{animation:cartPop 420ms var(--ease-pop)}
@media (prefers-reduced-motion:reduce){
  .cartbtn.is-bump,.cartbtn.is-bump .cartbtn__n{animation:none}
  .cartbtn{transition:border-color 180ms,color 180ms}
}
@media (max-width:767px){
  /* Match the Facebook icon and Call button at 40px. This has to be here rather
     than in site.css: .cartbtn is defined in this file and store.css loads last,
     so an equal-specificity rule over there is always overridden. */
  .header .cartbtn{width:40px;height:40px}
  .header .cartbtn svg{width:19px;height:19px}

  /* The header wraps on a phone. Give every item an explicit order so the cart is the
     LAST thing on the first row -- with order:0 it landed left of the Facebook icon. */
  .header .brand{order:0}
  .header .header__fb{order:1}
  .cartbtn{order:2;margin-left:auto}
  .header .header__call{order:3}
  .header .nav{order:4}
}

/* ---------- mobile: a genuinely compact header once you scroll ----------
   Even with .scrolled the header wrapped to THREE rows on a phone (brand / call /
   nav), eating ~390px before any product was visible. Dropping the Facebook icon
   and tightening the rest gets brand + cart + call onto ONE row, nav under it. */
@media (max-width:767px){
  html.js .header.scrolled .wrap{min-height:50px;padding-top:5px;padding-bottom:5px;gap:4px 8px}
  html.js .header.scrolled .patch{width:36px;height:36px}
  html.js .header.scrolled .brand{gap:9px}
  html.js .header.scrolled .brand__name{font-size:16px}
  /* display:none rips the icon out of the flex row in one frame and the whole
     header jumps. Collapse it instead so it shrinks away with everything else. */
  html.js .header.scrolled .header__fb{width:0;height:0;opacity:0;margin:0;padding:0;
    border-width:0;overflow:hidden;pointer-events:none}
  html.js .header.scrolled .header__fb svg{width:0;height:0}
  html.js .header.scrolled .cartbtn{width:40px;height:40px;order:2;margin-left:auto}
  html.js .header.scrolled .cartbtn svg{width:19px;height:19px}
  html.js .header.scrolled .cartbtn__n{min-width:17px;height:17px;top:-6px;right:-6px;font-size:10.5px}
  html.js .header.scrolled .header__call.btn--sm{order:3;margin-left:6px;min-height:40px;
    font-size:14px;padding:0 14px;letter-spacing:.03em}
  html.js .header.scrolled .header__call .full{display:none}
  html.js .header.scrolled .header__call .short{display:inline}
  html.js .header.scrolled .nav{order:4;flex-basis:100%;margin-top:5px;font-size:11.5px;gap:0 13px}
}

/* Shop category filter -------------------------------------------------------
   Tap a category, the grid narrows to it. The bar only appears with JS, because
   buttons that do nothing are worse than no buttons at all. Apparel comes before
   snapbacks: a cap is always its own Printful parcel, so a second apparel piece
   is the add-on worth steering people to. */
/* ===== SHOP FILTER ==========================================================
/* THE SHOP FILTER: two flat rows of chips, sections then garment types.
   Kage asked for the collapsible selector to go (Oct 5 2026) -- "let's go back to what
   we had before. But keep the good animation." The animation he means is .pcard--in on
   the grid below, which is untouched by this.
   ⛔ The chips must NOT start at opacity 0 here. Under the old selector they faded in on
   .fsel.is-open; with no panel to open, that rule would leave an empty bar forever. */
.filt{margin-bottom:20px;display:grid;gap:10px}
html:not(.js) .filt{display:none}          /* no JS: no control, the full grid shows */
.filt__row{display:flex;flex-wrap:wrap;gap:7px}
.filt__row--cats{padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.fchip--deal{border-color:rgba(188,16,10,.55);color:var(--signal)}
.fchip--deal.is-on{border-color:var(--crimson);background:rgba(188,16,10,.14);
  color:var(--white)}

.fchip{font:700 12px/1 var(--utility);text-transform:uppercase;letter-spacing:.08em;
  padding:8px 12px;background:transparent;border:1px solid rgba(255,255,255,.14);
  color:var(--slate);cursor:pointer}
.fchip:hover{color:var(--bone);border-color:var(--bone)}
.fchip:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.fchip.is-on{border-color:var(--bone);color:var(--bone)}
.fchip[hidden]{display:none}
.fchip__n{font-variant-numeric:tabular-nums;opacity:.55;margin-left:5px}

.filt__none{font:400 15px/1.5 var(--body);color:var(--slate);padding-bottom:18px}
.filt__none[hidden]{display:none}
.pcard[hidden]{display:none}

/* A card that has just come back into the grid announces itself, so changing the
   filter reads as the grid rebuilding rather than things silently blinking. */
@keyframes pcardIn{from{opacity:0;transform:translateY(10px) scale(.985)}
                   to{opacity:1;transform:none}}
.pcard--in{animation:pcardIn .40s var(--ease-out) both;
  animation-delay:calc(var(--k,0) * 26ms)}

@media (prefers-reduced-motion:reduce){
  .fchip{transition-duration:1ms!important;
    transition-delay:0ms!important}
  .pcard--in{animation:none}
}

/* ===== BUNDLE DEALS =========================================================
   Kage asked for these as a category at the top of the shop, opening into a
   popup built like the ones he sent: a couple of words in big lettering, a big
   photo, one button. The size pickers sit UNDER the button's eye line on
   purpose - they are necessary, not the pitch. ========================== */
.filt__b--deal{border-color:var(--crimson);color:var(--signal)}
.filt__b--deal:hover{color:var(--white);border-color:var(--crimson)}

.bgrid{list-style:none;display:grid;gap:14px;padding:0 var(--edge) 26px;
  grid-template-columns:1fr}
.bgrid[hidden]{display:none}
@media(min-width:760px){ .bgrid{grid-template-columns:repeat(2,1fr);gap:18px} }
@media(min-width:1180px){ .bgrid{gap:22px} }

.bcard{list-style:none}
.bcard__hit{display:grid;width:100%;text-align:left;cursor:pointer;
  background:var(--coal);border:1px solid var(--steel);border-radius:0;
  color:var(--bone);padding:0;font:inherit;overflow:hidden;
  transition:border-color .18s var(--ease-out),transform .18s var(--ease-out)}
@media(hover:hover){ .bcard__hit:hover{border-color:var(--crimson);transform:translateY(-3px)} }
.bcard__hit:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.bcard__img{display:block;aspect-ratio:var(--shot,2/1);overflow:hidden;background:#1a1a1d;
  border-bottom:1px solid var(--steel)}
.bcard__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--ease-out)}
@media(hover:hover){ .bcard__hit:hover .bcard__img img{transform:scale(1.04)} }
.bcard__save{display:inline-block;justify-self:start;margin:12px 14px 0;
  background:var(--crimson);color:var(--white);padding:4px 9px;
  font:700 12px/1 var(--utility);text-transform:uppercase;letter-spacing:.1em}
.bcard__name{padding:8px 14px 0;font:800 26px/1 var(--display);
  text-transform:uppercase;letter-spacing:-.01em}
@media(min-width:760px){ .bcard__name{font-size:30px} }
.bcard__what{padding:5px 14px 0;font:400 14px/1.4 var(--body);color:var(--slate)}
.bcard__price{padding:8px 14px 14px;font:600 17px/1 var(--utility)}
.bcard__price s{color:var(--slate);margin-right:6px}
.bcard__price strong{color:var(--signal);font-size:21px}

/* ---- the popup ---- */
.bpop[hidden]{display:none}
.bpop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:calc(var(--gutter) + env(safe-area-inset-top,0px)) var(--gutter)
          calc(var(--gutter) + env(safe-area-inset-bottom,0px))}
.bpop__veil{position:absolute;inset:0;background:rgba(6,6,7,.86);backdrop-filter:blur(3px)}
.bpop__panel{position:relative;width:min(560px,100%);max-height:100%;overflow:auto;
  background:var(--coal);border:1px solid var(--steel);
  box-shadow:0 30px 90px rgba(0,0,0,.7);animation:rise .28s var(--ease-pop) both}
@media (prefers-reduced-motion:reduce){ .bpop__panel{animation:none} }
.bpop__x{position:absolute;top:8px;right:8px;z-index:2;width:38px;height:38px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(11,11,12,.72);border:1px solid var(--steel);color:var(--bone);
  font:400 26px/1 var(--body)}
.bpop__x:hover{border-color:var(--crimson);color:var(--white)}
.bpop__x:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.bpop__shot{aspect-ratio:var(--shot,2/1);overflow:hidden;background:#1a1a1d;
  border-bottom:1px solid var(--steel)}
.bpop__shot img{width:100%;height:100%;object-fit:cover;display:block}
.bpop__body{padding:16px 18px calc(18px + env(safe-area-inset-bottom,0px))}
.bpop__save{display:inline-block;background:var(--crimson);color:var(--white);
  padding:5px 10px;font:700 12px/1 var(--utility);
  text-transform:uppercase;letter-spacing:.1em}
.bpop__title{margin:10px 0 0;font:800 clamp(34px,9vw,52px)/.92 var(--display);
  text-transform:uppercase;letter-spacing:-.015em;text-wrap:balance}
.bpop__what{margin:8px 0 0;font:400 15px/1.45 var(--body);color:var(--slate)}
.bpop__price{margin:12px 0 0;font:600 20px/1 var(--utility)}
.bpop__price s{color:var(--slate);margin-right:8px}
.bpop__price strong{color:var(--signal);font-size:30px}
.bpop__picks{margin:16px 0 18px;display:grid;gap:12px}
.bpop__pick{display:grid;gap:6px}
.bpop__picklab{font:700 12px/1 var(--utility);text-transform:uppercase;
  letter-spacing:.09em;color:var(--slate)}
.bpop__row{display:flex;flex-wrap:wrap;gap:6px}
.bpop__opt{cursor:pointer;background:transparent;border:1px solid var(--steel);
  color:var(--slate);padding:7px 11px;font:600 13px/1 var(--utility);
  text-transform:uppercase;letter-spacing:.05em;transition:all .15s var(--ease-out)}
.bpop__opt:hover{color:var(--bone);border-color:var(--bone)}
.bpop__opt.is-on{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.bpop__opt:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.bpop__sw{width:26px;height:26px;padding:0;border-radius:50%;background:var(--c)}
/* .bpop__opt.is-on sets background:var(--bone); a swatch must keep its OWN colour
   when selected, so restate it at the same specificity and mark it with a ring. */
.bpop__opt.bpop__sw.is-on{background:var(--c);border-color:transparent;
  box-shadow:0 0 0 2px var(--coal),0 0 0 4px var(--signal)}
.bpop__buy{margin-top:2px;position:sticky;
  bottom:calc(-1px + env(safe-area-inset-bottom,0px));z-index:1}
.bpop__fine{margin:10px 0 0;font:400 13px/1.45 var(--body);color:var(--slate)}
.bpop__fine.is-warn{color:var(--signal)}
.drawer__deal{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px;margin-top:4px;font:600 15px/1.3 var(--utility);color:var(--signal)}
.drawer__deal strong{font-variant-numeric:tabular-nums}
.drawer__dealnote{flex:1 0 100%;font:400 12px/1.4 var(--body);color:var(--slate)}
.pgrid[hidden]{display:none}

/* ---- bundle grid heading, now that the deals sit UNDER the products ---- */
.bgrid__h{font:800 clamp(26px,5vw,38px)/1 var(--display);text-transform:uppercase;
  letter-spacing:-.01em;padding-top:26px}
.bgrid__sub{margin:6px 0 16px;font:400 15px/1.5 var(--body);color:var(--slate)}

/* ---- product page: the bundle this piece is in ---- */
.bxs[hidden]{display:none}
.bxs{padding:0 var(--edge) 6px}
.bxs .swrap{padding:0 0 12px}
.bxs__hit{display:grid;grid-template-columns:1fr;width:100%;text-align:left;cursor:pointer;
  background:var(--coal);border:1px solid var(--steel);color:var(--bone);padding:0;font:inherit;
  overflow:hidden;transition:border-color .18s var(--ease-out),transform .18s var(--ease-out)}
@media(hover:hover){ .bxs__hit:hover{border-color:var(--crimson);transform:translateY(-3px)} }
.bxs__hit:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.bxs__img{display:block;aspect-ratio:2/1;overflow:hidden;background:#1a1a1d;
  border-bottom:1px solid var(--steel)}
.bxs__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--ease-out)}
@media(hover:hover){ .bxs__hit:hover .bxs__img img{transform:scale(1.04)} }
.bxs__txt{display:grid;padding:12px 14px 14px;gap:4px;align-content:start}
.bxs__save{justify-self:start;background:var(--crimson);color:var(--white);padding:4px 9px;
  font:700 12px/1 var(--utility);text-transform:uppercase;letter-spacing:.1em}
.bxs__name{font:800 24px/1 var(--display);text-transform:uppercase;padding-top:4px}
.bxs__what{font:400 14px/1.4 var(--body);color:var(--slate)}
.bxs__price{font:600 16px/1 var(--utility);padding-top:2px}
.bxs__price s{color:var(--slate);margin-right:6px}
.bxs__price strong{color:var(--signal);font-size:20px}
@media(min-width:760px){
  .bxs__hit{grid-template-columns:1.1fr .9fr}
  .bxs__img{aspect-ratio:2/1;border-bottom:0;border-right:1px solid var(--steel)}
  .bxs__txt{align-content:center;padding:18px 20px}
  .bxs__name{font-size:30px}
}

/* ---- size guide -------------------------------------------------------------
   Lives as a fourth accordion beside Materials / Features / Product care, where
   Kage went looking for it. The link on the size row opens this one rather than
   showing a second copy in a modal. ---------------------------------------- */
.pv__sglink{margin-left:10px;background:none;border:0;padding:2px 0;cursor:pointer;
  font:700 12px/1 var(--utility);text-transform:uppercase;letter-spacing:.08em;
  color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.pv__sglink:hover{color:var(--bone)}
.pv__sglink:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.sg{padding-top:2px}
.sg__blank{margin:0 0 10px;font:400 13px/1.4 var(--body);color:var(--slate)}
/* a table is the one thing allowed to out-run the page, in its own scroller */
.sg__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sg__table{border-collapse:collapse;width:100%;font:500 14px/1.3 var(--utility);
  font-variant-numeric:tabular-nums}
.sg__table th,.sg__table td{border:1px solid var(--steel);padding:8px 10px;text-align:left;
  white-space:nowrap}
.sg__table thead th{background:var(--surface-hi);color:var(--bone);
  font:700 12px/1 var(--utility);text-transform:uppercase;letter-spacing:.07em}
.sg__table tbody th{color:var(--bone);font-weight:700}
.sg__table tbody td{color:var(--slate)}
.sg__note{margin:12px 0 0;font:400 13px/1.5 var(--body);color:var(--slate)}
.sg__note--warn{color:var(--signal)}

/* ===== BAG NOTICE ===========================================================
   Shown when the bag changes without the shopper touching it -- a product that
   went away since they added it. Bottom of the screen so it never covers the
   buy button, and it clears itself. ====================================== */
.rdtoast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,16px);z-index:80;max-width:min(92vw,520px);margin:0;
  padding:13px 18px;background:var(--ink,#121210);color:var(--bone,#e8e4dc);
  border:1px solid var(--crimson,#9f1c20);border-radius:3px;
  font:400 14px/1.45 var(--body,system-ui);box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0;transition:opacity 260ms ease,transform 260ms ease;pointer-events:none}
.rdtoast.is-on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.rdtoast{transition:none}}


/* A size this colour does not come in. Readable but clearly out of play -- a
   strikethrough alone reads as "on sale" at a glance, so it also drops contrast
   and loses the pointer. */
.pv__size.is-gone {
  opacity: .34;
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: auto;        /* keep it hoverable so the title explains why */
}
.pv__size.is-gone:hover { background: none; }

/* A colour with nothing left in any size. Kage, Oct 5 2026: "just put a little x on the
   size or colour if certain ones are sold out." A swatch is a 26px circle with no room for
   words, so the X is drawn across it -- in bone, not red, because red is the brand's
   BUY colour everywhere else on this page and an X in it reads as a badge, not a refusal. */
.pv__sw.is-gone, .pcard__sw.is-gone { opacity: .42; cursor: not-allowed; }
.pv__sw.is-gone::after, .pcard__sw.is-gone::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px),
      var(--bone) calc(50% - 1px), var(--bone) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom left, transparent calc(50% - 1px),
      var(--bone) calc(50% - 1px), var(--bone) calc(50% + 1px), transparent calc(50% + 1px));
  border-radius: 50%;
  pointer-events: none;
}