/* ==========================================================================
   Dirtanian — The Shop
   Loaded only on /shop and /shop/<handle>. Built entirely on site.css's tokens;
   no second palette, no second type scale. One new custom property (--plate-hi).

   THE KIT WALL. The site is black, and a shop full of black cards is a carpet.
   So the shop inverts the card: every product photo sits on a light plate
   (--grey, the brand book's panel colour) and the black page becomes the wall
   those plates hang on.

   The plate is not decoration — it is the fix for mixed Shopify photography.
   Some shots are studio-on-white, some are lifestyle, some are transparent PNG.
   `mix-blend-mode: multiply` over #E6E7E8 handles all three with no per-image
   classification: white × plate is exactly the plate, so a white background
   disappears and the garment appears to sit on the panel; a lifestyle frame
   darkens by a uniform ~10%, which reads as a film grade rather than a fault.
   The contrast/saturate pass then pulls flat phone photos and lit studio ones
   toward each other.

   Colour law holds throughout: on the light plate lime is only ever a fill
   behind black text; on the black card body and page, lime is free as text.
   ========================================================================== */

:root { --plate-hi: #F4F5F6; }

/* ---------- Hero ---------- */
.shop-hero .lead { margin-top: 32px; }
.shop-hero__meta { margin-top: 40px; }

/* ---------- The bar: shelves + find ---------- */
/* .tabs is already this component (pill, aria-pressed, count slot). It only
   needs to lose its baked-in margin and go sticky. */
.shop-bar {
  position: sticky; top: calc(var(--header-h) - 1px); z-index: 60;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; margin-bottom: clamp(20px, 3vw, 32px);
  background: rgba(0,0,0,.82);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tabs--shop {
  margin: 0; flex: 1; min-width: 0; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; padding: 2px 0;
}
.tabs--shop::-webkit-scrollbar { display: none; }
.tabs--shop button { white-space: nowrap; }
.tabs--shop button[aria-pressed="true"] { font-weight: 600; }
@media (min-width: 1000px) { .tabs--shop { flex-wrap: wrap; overflow: visible; } }

/* The tags are a different kind of control from the shelves — they narrow
   whatever shelf you are on rather than replacing it — so they are set apart by
   a rule and read as toggles: dashed until you switch one on. */
.tabs--tags { flex: none; position: relative; padding-left: 17px; }
.tabs--tags::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: var(--line-2);
}
.tabs--tags button { border-style: dashed; }
.tabs--tags button[aria-pressed="true"] {
  background: var(--lime-dim); border-color: var(--lime); border-style: solid; color: var(--lime);
}
.tabs--tags button[aria-pressed="true"] span { opacity: .8; }
@media (max-width: 999px) {
  .shop-bar { flex-wrap: wrap; }
  .tabs--tags { padding-left: 0; }
  .tabs--tags::before { display: none; }
}

.shop-search {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  height: 42px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--dim);
  transition: border-color .3s var(--ease), color .3s var(--ease);
  width: 210px;
}
.shop-search:focus-within { border-color: var(--lime); color: var(--lime); }
.shop-search svg { width: 16px; height: 16px; flex: none; }
.shop-search input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--white);
  font: 400 14px/1 var(--body); outline: none;
}
.shop-search input::placeholder { color: var(--dim); }
.shop-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (max-width: 860px) { .shop-search { display: none; } }

/* ---------- The wall ---------- */
/* Never one column. Two-up on a phone is what makes it read as a rail of kit
   rather than a feed, and the meta strip is only three short lines. */
.kitwall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  scroll-margin-top: calc(var(--header-h) + 70px);
}
@media (max-width: 1080px) { .kitwall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .kitwall { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* The first plate on an unfiltered wall runs double-wide, so the grid reads as
   a considered layout rather than a spreadsheet. Column-span only — a row span
   goes fragile the moment a title wraps — and it drops back the moment a filter
   narrows the range, because a hero in a shelf of two is silly. */
@media (min-width: 761px) {
  .kitwall:not([data-filtered]) > .kit:first-child { grid-column: span 2; }
  .kitwall:not([data-filtered]) > .kit:first-child .kit__plate { aspect-ratio: 16 / 11; }
  .kitwall:not([data-filtered]) > .kit:first-child .kit__name { font-size: clamp(19px, 1.6vw, 24px); }
}

.kit {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--pill); overflow: hidden; isolation: isolate;
  background: var(--card); border: 1px solid var(--line);
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.kit[hidden] { display: none; }
.kit:hover, .kit:focus-visible { border-color: rgba(190,250,2,.55); transform: translateY(-4px); }

.kit__plate {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 5; background: var(--grey);
  transition: background .4s var(--ease);
}
.kit__plate img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply;                 /* the technique — see the header */
  filter: contrast(1.05) saturate(1.06);    /* the grade that unifies them */
  transition: transform 1s var(--ease), filter .4s var(--ease);
}
.kit:hover .kit__plate { background: var(--plate-hi); }
.kit:hover .kit__plate img { transform: scale(1.035); }

.kit__meta { display: grid; gap: 6px; padding: 14px 14px 16px; }
.kit__type { font: 600 10px/1 var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.kit__name {
  margin: 0; font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: clamp(16px, 1.15vw, 19px); line-height: 1.02; text-transform: uppercase; color: var(--white);
}
.kit__price {
  margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font: 600 15px/1 var(--hud); letter-spacing: .06em;
  font-variant-numeric: tabular-nums; color: var(--white);
}
.kit__price .from { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.kit__price s { font-size: 12px; color: var(--dim); text-decoration-thickness: 1px; }
.kit--sale .kit__price .amt { color: var(--lime); }
.kit__price em {
  font-style: normal; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lime);
}

/* A lime hairline sweeps in under the meta strip — the same gesture the rest of
   the site uses for "this is a link you are on". */
.kit::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1.5px;
  background: var(--lime); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.kit:hover::after, .kit:focus-visible::after { transform: scaleX(1); }

/* ---------- The hang tag ---------- */
/* Not a corner pill: a tag clipped over the top of the plate and punched with a
   hole that shows the plate colour through it. One object, five variants, on
   every card — furniture, not garnish. It swings on its pin on hover, and the
   transform-origin IS the hole, which is what makes it read as physical. */
.kit__tag {
  position: absolute; top: 0; left: 16px; z-index: 2;
  padding: 7px 10px 7px 17px; border-radius: 0 0 6px 6px;
  background: var(--lime); color: #000;
  font: 600 10px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase;
  transform-origin: 9px 5px;
}
.kit__tag::before {
  content: ""; position: absolute; left: 6px; top: 4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--grey);
}
.kit:hover .kit__tag::before, .pdp__shot:hover .kit__tag::before { background: var(--plate-hi); }
.kit__tag--sale { background: #000; color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.kit__tag--sale::before { background: var(--grey); }
.kit__tag--soon { background: var(--white); color: #000; }
.kit__tag--ex { background: #000; color: var(--white); }
.kit__tag--few { background: #000; color: var(--lime); }
.kit__tag--few::before, .kit__tag--ex::before { background: var(--grey); }

@keyframes tagswing {
  0% { rotate: 0deg; } 22% { rotate: 3.6deg; } 52% { rotate: -2.2deg; }
  78% { rotate: 1.1deg; } 100% { rotate: 0deg; }
}
.kit:hover .kit__tag, .kit:focus-within .kit__tag { animation: tagswing .62s var(--ease); }

/* ---------- Sold out, without the morgue ---------- */
/* No desaturation and no grey veil. The colourway stays alive because the
   product is coming back: a 6% brightness drop and a dashed inner frame carry
   the whole message. */
.kit--soon .kit__plate img { filter: contrast(1.05) saturate(1.06) brightness(.94); }
.kit--soon .kit__plate::after {
  content: ""; position: absolute; inset: 8px; z-index: 1; pointer-events: none;
  border: 1px dashed rgba(0,0,0,.28); border-radius: 10px;
}
.kit--soon .kit__price .amt { color: var(--muted); }

.kitwall__none {
  grid-column: 1 / -1; margin: 56px auto; max-width: 46ch; text-align: center;
  color: var(--muted); font-size: 16.5px; line-height: 1.65;
}
.kitwall__none b { display: block; font: 900 italic 26px/1 var(--display); text-transform: uppercase; color: var(--white); margin-bottom: 12px; }

/* ---------- Product page ---------- */
/* The rig holds still and the spec sheet scrolls past it, so the shot, every
   picker, the price and Add are on screen the whole way down. Nothing has to
   move on scroll to achieve that — the plate is sized in vh, so it gives way on
   a short laptop instead of pushing the buy row off the bottom. */
.crumbs {
  padding: calc(var(--header-h) + 26px) var(--gutter) 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font: 600 11px/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.crumbs a { color: var(--muted); transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--lime); }
.crumbs [aria-current] { color: var(--white); }

.pdp { padding: clamp(20px, 3vw, 34px) 0 clamp(48px, 7vw, 88px); }
.pdp__grid { display: grid; gap: clamp(26px, 3.6vw, 56px); align-items: start; }
@media (min-width: 980px) { .pdp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.rig { display: grid; gap: 12px; }
@media (min-width: 980px) { .rig { position: sticky; top: calc(var(--header-h) + 16px); } }
/* On a short laptop the shot gives way before the controls do — the price
   transparency line is required before a tap (doc 18), so it is never the
   thing that gets cut. */
@media (min-width: 980px) and (max-height: 840px) {
  .pdp__plate { height: clamp(120px, 16vh, 190px); }
  .rig, .buy, .pdp__form { gap: 10px; }
  .pdp__thumbs { display: none; }
}

/* The kit wall again: a light plate, the shot multiplied onto it, so a
   studio-on-white photo melts into the panel instead of floating on black. */
.pdp__plate {
  position: relative; background: var(--grey); border-radius: var(--radius); overflow: hidden;
  isolation: isolate; height: clamp(176px, 24vh, 300px);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 26px 60px -34px #000;
}
.pdp__plate-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2.5% 0;
  mix-blend-mode: multiply; filter: contrast(1.05) saturate(1.06);
  opacity: 0; transform: scale(1.02);
  transition: opacity .34s var(--ease), transform .55s var(--ease);
}
.pdp__plate-img.on { opacity: 1; transform: none; }
.pdp__plate .kit__tag::before { background: var(--grey); }

.pdp__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 54px; gap: 7px; justify-content: start; overflow-x: auto; scrollbar-width: none; }
.pdp__thumbs::-webkit-scrollbar { display: none; }
.pdp__thumb {
  aspect-ratio: 1; border: 0; padding: 0; border-radius: 6px; overflow: hidden; isolation: isolate;
  background: var(--grey); opacity: .5; transition: opacity .28s var(--ease), box-shadow .28s var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.pdp__thumb:hover { opacity: .85; }
.pdp__thumb.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--lime); }

.buy { display: grid; gap: 12px; }
.buy__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pdp__title {
  margin: 0; font: 900 italic clamp(20px, 2.1vw, 27px)/1 var(--display);
  text-transform: uppercase; letter-spacing: -.015em; color: var(--white);
  text-wrap: balance; max-width: 22ch;
}
.pdp .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; margin: 0; }
.pdp .price .from { font: 600 10px/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.pdp .price .amt { font: 700 26px/1 var(--hud); font-variant-numeric: tabular-nums; color: var(--white); }
.pdp .price s { font: 600 15px/1 var(--hud); color: var(--dim); }
.pdp .price em { font-style: normal; font: 600 10px/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }

.pdp__form { display: grid; gap: 12px; margin: 0; }
.pdp__field { display: grid; gap: 9px; }
.pdp__field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pdp__field-pick { font: 600 11.5px/1 var(--hud); letter-spacing: .06em; text-transform: uppercase; color: var(--white); }
.pdp__field.is-asking { animation: nudge .32s var(--ease) 2; }
.pdp__field.is-asking .lbl { color: var(--lime); }
@keyframes nudge { 0%, 100% { transform: none } 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }

/* A colourway swatch is a crop of that colourway, which works for any product
   without anyone having to record a hex value per colour name. */
.swatches { display: flex; gap: 9px; flex-wrap: wrap; }
.sw {
  position: relative; width: 48px; height: 48px; border-radius: 10px; padding: 0;
  border: 1.5px solid var(--line-2); background: var(--card); overflow: visible;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.sw i {
  position: absolute; inset: 3px; border-radius: 7px; display: block;
  background: var(--grey) center/cover no-repeat;
}
.sw:hover { transform: translateY(-2px); border-color: var(--muted); }
.sw[aria-pressed="true"] { border-color: var(--lime); box-shadow: 0 0 0 1.5px var(--lime); }
.sw__n {
  position: absolute; right: -5px; bottom: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 6px; display: grid; place-items: center;
  font: 700 10px/1 var(--hud); font-variant-numeric: tabular-nums;
  background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 0 2px var(--black);
}
.sw[data-out="1"] .sw__n { background: var(--card-2); color: var(--dim); box-shadow: 0 0 0 2px var(--black), inset 0 0 0 1px var(--line-2); }
.sw[data-out="1"] i { opacity: .34; filter: grayscale(.5); }

/* Every other option is a text chip carrying what is left of that value in the
   combination you are currently looking at. */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  min-width: 60px; min-height: 52px; padding: 0 14px; border-radius: 10px;
  border: 1.5px solid var(--line-2); background: var(--card); color: var(--grey);
  display: grid; align-content: center; gap: 3px; position: relative;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.opt b { font: 700 15px/1 var(--hud); letter-spacing: .03em; }
.opt small { font: 600 9px/1 var(--hud); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.opt:hover { border-color: var(--muted); color: var(--white); }
.opt[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.opt[aria-pressed="true"] small { color: var(--lime-ink); opacity: .72; }
/* A sold-out value keeps its place — removing it hides the truth about the
   size run — and stays clickable, so tapping it can explain itself. */
.opt[data-out="1"] {
  color: var(--dim); border-color: var(--line);
  background-image: linear-gradient(to top right, transparent calc(50% - .8px), var(--line-2) 50%, transparent calc(50% + .8px));
}
.opt[data-out="1"] small { color: var(--dim); }
.opt[data-out="1"][aria-pressed="true"] { background: var(--lime-dim); border-color: rgba(190,250,2,.5); color: var(--grey); }
.opt[data-out="1"][aria-pressed="true"] small { color: var(--muted); opacity: 1; }

/* ---------- stock, said at every level the product has ---------- */
.stockwrap { position: relative; }
.readout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 13px; border-radius: 10px; background: var(--card); border: 1px solid var(--line);
}
.readout dl { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.readout dt { font: 600 9px/1 var(--hud); letter-spacing: .17em; text-transform: uppercase; color: var(--dim); }
.readout dd { margin: 0; font: 700 13px/1 var(--hud); font-variant-numeric: tabular-nums; color: var(--white); }
.readout dd.lime { color: var(--lime); }
.readout dd.none { color: var(--muted); }
.matrix-btn {
  margin-left: auto; border: 0; background: none; padding: 4px 0; color: var(--muted);
  font: 600 9px/1 var(--hud); letter-spacing: .15em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
}
.matrix-btn:hover { color: var(--lime); }
.matrix-btn svg { width: 9px; height: 9px; transition: transform .3s var(--ease); }
.matrix-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* The whole sheet floats over the controls rather than pushing them down — the
   buy row must never leave — and its cells are the fastest way to pick. */
.matrix {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 12;
  background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 26px 60px -24px #000; padding: 0 13px;
  overflow: hidden; max-height: 0; opacity: 0; pointer-events: none;
  transition: max-height .32s var(--ease), opacity .24s var(--ease), padding .32s var(--ease);
}
.matrix.open { max-height: 300px; opacity: 1; pointer-events: auto; padding: 4px 13px 12px; overflow: auto; }
@media (max-width: 979px) { .matrix { position: static; box-shadow: none; background: var(--card); } }
.matrix table { width: 100%; border-collapse: collapse; margin-top: 9px; }
.matrix th, .matrix td {
  padding: 7px 4px; text-align: center; border-bottom: 1px solid var(--line);
  font: 600 11px/1 var(--hud); font-variant-numeric: tabular-nums;
}
.matrix thead th { font-size: 9px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.matrix tbody th { text-align: left; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding-right: 8px; }
.matrix td { color: var(--dim); }
.matrix td.has { color: var(--white); }
.matrix td.pick { cursor: pointer; border-radius: 5px; transition: background .18s var(--ease), color .18s var(--ease); }
.matrix td.pick:hover { background: var(--lime-dim); color: var(--lime); }
.matrix td.sel { color: var(--lime-ink); background: var(--lime); border-radius: 5px; }
.matrix td.sel.pick:hover { background: var(--lime); color: var(--lime-ink); }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.matrix tfoot td, .matrix tfoot th { border-bottom: 0; padding-top: 9px; color: var(--muted); font-size: 9.5px; letter-spacing: .12em; }
.matrix tfoot .tot { color: var(--lime); }
.matrix__hint { margin: 8px 0 0; font: 500 9.5px/1.4 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

.row { display: flex; gap: 10px; align-items: stretch; }
.qty {
  display: inline-flex; align-items: center; flex: none; height: 52px;
  border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--card);
}
.qty button { width: 40px; height: 100%; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 9px; transition: color .2s var(--ease); }
.qty button:hover:not([disabled]) { color: var(--lime); }
.qty button[disabled] { opacity: .3; cursor: not-allowed; }
.qty button svg { width: 12px; height: 12px; }
.qty output { min-width: 26px; text-align: center; font: 700 15px/1 var(--hud); font-variant-numeric: tabular-nums; color: var(--white); }

.add { flex: 1; min-height: 52px; border-radius: 10px; padding: 0 22px; }
.add[disabled] { background: var(--card-2); color: var(--dim); cursor: not-allowed; box-shadow: none; pointer-events: none; }
.add[disabled]::before { display: none; }

.pdp__stock { margin: 0; font: 500 12.5px/1.5 var(--body); color: var(--muted); min-height: 1.4em; }
.pdp__stock--few { color: var(--lime); }
.pdp__stock--out { color: var(--grey); }
.pdp__note { margin: 0; min-height: 0; font: 500 13px/1.5 var(--body); color: var(--lime); }
.pdp__note:empty { display: none; }

.pdp__trust { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.pdp__trust li { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; color: var(--dim); }
.pdp__trust svg { width: 13px; height: 13px; flex: none; margin-top: 3px; color: var(--lime); }

/* ---------- the spec sheet: the long copy, beside rather than before ------- */
/* The scrolling column carries the related range as well as the copy. That is
   not decoration: `position: sticky` only has travel while its neighbour is
   taller, so putting the rest of the page here is what actually keeps the buy
   panel on screen all the way down. */
.sheet { display: grid; gap: 4px; align-content: start; }
.more { margin-top: 36px; }
.more__title { margin: 0 0 18px; font: 900 italic clamp(20px, 2.1vw, 26px)/1 var(--display);
  text-transform: uppercase; letter-spacing: -.012em; color: var(--white); }
.kitwall--more { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1240px) { .kitwall--more { grid-template-columns: repeat(2, 1fr); } }
.sheet .lede { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--grey); margin-bottom: 20px; }
.sheet .lede p { margin: 0 0 12px; }
.sheet .lede p:last-child { margin: 0; }
.pdp__vendor { color: var(--dim); font-size: 13.5px; font-style: italic; }
.sheet details { border-top: 1px solid var(--line); }
.sheet details:last-of-type { border-bottom: 1px solid var(--line); }
.sheet summary {
  list-style: none; cursor: pointer; padding: 14px 0; display: flex; align-items: center;
  justify-content: space-between; gap: 14px;
  font: 900 italic 15px/1.1 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: var(--white);
}
.sheet summary::-webkit-details-marker { display: none; }
.sheet summary::after {
  content: ""; width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease);
}
.sheet details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.sheet .rich { padding-bottom: 14px; }

/* Shopify's own description markup, styled to the site rather than the theme
   it came from. */
.rich { color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.rich p { margin: 0 0 12px; }
.rich > :last-child { margin-bottom: 0; }
.rich h1, .rich h2, .rich h3, .rich h4 {
  margin: 18px 0 8px; font: 600 12px/1.3 var(--hud); letter-spacing: .15em;
  text-transform: uppercase; color: var(--white);
}
.rich h1:first-child, .rich h2:first-child, .rich h3:first-child { margin-top: 0; }
.rich strong, .rich b { color: var(--grey); font-weight: 600; }
.rich ul, .rich ol { margin: 0 0 12px; padding-left: 0; list-style: none; }
.rich ol { counter-reset: n; }
.rich li { position: relative; padding-left: 19px; margin-bottom: 7px; }
.rich ul li::before { content: ""; position: absolute; left: 1px; top: .6em; width: 8px; height: 2.5px; background: var(--lime); transform: skewX(-20deg); }
.rich ol li { counter-increment: n; }
.rich ol li::before { content: counter(n); position: absolute; left: 0; top: .05em; font: 600 11px/1.6 var(--hud); color: var(--lime); }
.rich li ul { margin: 6px 0 0; }
.rich li ul li { font-size: 12.5px; color: var(--dim); padding-left: 14px; }
.rich li ul li::before { width: 5px; height: 1.5px; background: var(--line-2); top: .72em; }
.rich a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.rich img { border-radius: 10px; margin: 12px 0; }
.rich table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.rich th, .rich td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.rich th { font: 600 11px/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Closing band ---------- */
.shop-close__inner { display: grid; gap: 32px; align-items: end; }
@media (min-width: 860px) { .shop-close__inner { grid-template-columns: 1fr auto; } }
.shop-close .lead { margin-top: 20px; }
.shop-close .btn--lg { width: auto; }

/* The plate that flies to the bag. Clone of the product image, so it is the
   product itself that lands in the bag rather than an abstract dot. */
.flyer {
  position: fixed; z-index: 140; border-radius: 10px; overflow: hidden;
  background: var(--grey); pointer-events: none;
  transition: transform .52s var(--ease), opacity .52s var(--ease);
}
.flyer img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

/* ---------- The bag ---------- */
/* --ink, not --card: the bag reads deeper than the page, a drawer pulled out
   of the wall. Blur and tint are lifted from .dialog::backdrop so it belongs to
   the same family of objects as the rest of the site's overlays. */
body.bag-open { overflow: hidden; }
.bag { position: fixed; inset: 0; z-index: 120; }
.bag__scrim {
  position: absolute; inset: 0; background: rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.bag.is-open .bag__scrim { opacity: 1; }
.bag__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  display: flex; flex-direction: column;
  background: var(--ink); border-left: 1px solid var(--line-2);
  box-shadow: -40px 0 120px -40px rgba(0,0,0,.9);
  transform: translateX(100%); transition: transform .32s var(--ease);
}
.bag.is-open .bag__panel { transform: none; transition-duration: .42s; }

.bag__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.bag__head h2 { margin: 0; font: 900 italic 24px/1 var(--display); text-transform: uppercase; color: var(--white); }
.bag__x {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 12px; background: transparent; color: var(--muted);
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.bag__x:hover { background: var(--lime); border-color: var(--lime); color: #000; }
.bag__x svg { width: 16px; height: 16px; }

.bag__lines { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.bagline { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
/* The mini plate is what makes the bag unmistakably this shop's bag. */
.bagline__shot { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; isolation: isolate; background: var(--grey); }
/* contain, not cover: a bag line is a reminder of what you picked, and a
   crop of a sleeve is not that. */
.bagline__shot img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.bagline__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bagline__title { font: 800 italic 15px/1.05 var(--display); text-transform: uppercase; color: var(--white); transition: color .25s var(--ease); }
.bagline__title:hover { color: var(--lime); }
.bagline__variant { margin: 0; font: 600 10px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.bagline__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bagline__price { font: 600 14px/1 var(--hud); font-variant-numeric: tabular-nums; color: var(--white); }
.bagline__rm { border: 0; background: none; padding: 0; font: 600 10px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); transition: color .25s var(--ease); }
.bagline__rm:hover { color: var(--white); }

.qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; }
.qty button {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 8px; background: none; color: var(--muted);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.qty button:hover:not([disabled]) { color: var(--lime); border-color: var(--lime); }
.qty button[disabled] { opacity: .3; pointer-events: none; }
.qty button svg { width: 12px; height: 12px; }
.qty span { min-width: 28px; text-align: center; font: 600 14px/1 var(--hud); font-variant-numeric: tabular-nums; color: var(--white); }

/* An empty bag is a brand moment, not a dead panel. */
.bag__empty { text-align: center; padding: 72px 24px; display: grid; gap: 10px; justify-items: center; }
.bag__empty .outline { font: 900 italic 64px/1 var(--display); text-transform: uppercase; }
.bag__empty p { margin: 0; max-width: 30ch; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.bag__empty .btn { margin-top: 14px; }

.bag__foot { flex: none; padding: 20px 22px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); background: #0B0B0B; }
.bag__foot:empty { display: none; }
.bag__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bag__sum span:first-child { font: 600 11px/1 var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.bag__total { font: 900 italic 30px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--white); }
.bag__ship { margin: 8px 0 16px; font-size: 13px; line-height: 1.55; color: var(--dim); }
.bag__go { width: 100%; }
.bag__go.is-busy { pointer-events: none; opacity: .75; }
.bag__secure {
  display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0;
  padding: 12px 14px; border-radius: 12px;
  background: var(--lime-dim); border: 1px solid rgba(190,250,2,.25);
  font-size: 13px; line-height: 1.5; color: var(--grey);
}
.bag__secure svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--lime); }
.bag__err { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .bag__panel, .bag__scrim, .kit, .kit__plate, .kit__plate img, .kit::after, .flyer { transition: none; }
  .kit:hover .kit__tag, .kit:focus-within .kit__tag { animation: none; }
  .pdp__opt.is-asking { animation: none; }
  .bag-btn.is-bumped .bag-btn__n, .bag-btn.is-bumped::after { animation: none; }
}

/* Shopify's own description markup — headings, lists and emphasis kept, styled
   to the site rather than to the theme it came from. */
.pdp__copy h1, .pdp__copy h2, .pdp__copy h3, .pdp__copy h4, .pdp__copy strong b {
  color: var(--white);
}
.pdp__copy h1, .pdp__copy h2, .pdp__copy h3, .pdp__copy h4 {
  margin: 22px 0 10px; font: 600 13px/1.3 var(--hud); letter-spacing: .16em; text-transform: uppercase;
}
.pdp__copy h1:first-child, .pdp__copy h2:first-child, .pdp__copy h3:first-child { margin-top: 0; }
.pdp__copy strong, .pdp__copy b { color: var(--grey); font-weight: 600; }
.pdp__copy ul, .pdp__copy ol { margin: 0 0 14px; padding-left: 0; list-style: none; }
.pdp__copy ol { counter-reset: n; }
.pdp__copy li { position: relative; padding-left: 22px; margin-bottom: 7px; }
.pdp__copy ul li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 2px; background: var(--lime); transform: skewX(-20deg);
}
.pdp__copy ol li { counter-increment: n; }
.pdp__copy ol li::before {
  content: counter(n); position: absolute; left: 0; top: .1em;
  font: 600 11px/1.6 var(--hud); color: var(--lime);
}
.pdp__copy a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.pdp__copy img { border-radius: 10px; margin: 14px 0; }
.pdp__copy table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.pdp__copy th, .pdp__copy td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.pdp__copy th { font: 600 11px/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pdp__copy > :last-child { margin-bottom: 0; }