/* ===== Diekastautofill — storefront (shop, PDP, blog) =====
   Additive only. /styles.css (v2) owns the shell, buttons, marquee and type;
   everything here is new commerce UI in the same language: bone + cobalt +
   lime, 2–3px ink borders, hard offset shadows, Space Mono for labels.
   Breakpoints match v2 exactly: 880px and 520px. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── breadcrumb ────────────────────────────────────────────────────── */
.crumbs{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--blue)}
.crumbs a{border-bottom:2px solid transparent}
.crumbs a:hover{color:var(--blue);border-color:var(--blue)}
.crumbs [aria-current]{opacity:.65}

/* ── product / post grid ───────────────────────────────────────────── */
.prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card--product,.card--post{padding:18px;display:flex}
.card__link{display:flex;flex-direction:column;width:100%}
.card--product h3,.card--post h3{font-size:24px;margin:16px 0 8px}
.card__blurb{font-size:15px;opacity:.85}
.card__fits,.card__date{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-top:10px}
.card__date{margin:0 0 6px;color:var(--blue);opacity:1}
.card--product .price,.card--post .price{margin-top:auto;padding-top:16px;font-size:34px}
.sticker--out{background:var(--ink);color:var(--bg);top:auto;bottom:14px;right:14px;transform:rotate(3deg)}
.empty{font-family:var(--mono);font-size:15px;padding:40px 0}
.empty a{color:var(--blue);border-bottom:2px solid var(--blue)}

/* ── category tabs + chips ─────────────────────────────────────────── */
.cattabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.chip--sm{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.06em;padding:8px 14px;
  border:2.5px solid var(--ink);text-transform:uppercase;background:var(--card)}
.chip--sm:hover{background:var(--lime);color:var(--ink);transform:translateY(-2px)}
.chip--sm.is-on{background:var(--blue);color:#fff;border-color:var(--ink)}
.chips--light .chip{border-color:var(--ink)}

/* ── filters ───────────────────────────────────────────────────────── */
.filters{border:3px solid var(--ink);background:var(--card);box-shadow:6px 6px 0 var(--ink);padding:18px;margin-bottom:34px}
.filters__row{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.filters__sort{display:grid;gap:6px}
.filters select,.filters input[type=number]{font-family:var(--mono);font-size:13px;padding:9px 10px;background:#fff;
  border:2.5px solid var(--ink);color:var(--ink);min-width:180px}
.filters input[type=number]{min-width:0;width:96px}
.filters__clear{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  border-bottom:2px solid var(--blue);color:var(--blue);margin-left:auto}
.filters__groups{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:18px}
.filters__group{border:0;padding:0;min-width:0}
.filters__group legend{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);margin-bottom:10px}
.checkline{display:flex;align-items:center;gap:9px;font-size:14px;padding:3px 0;cursor:pointer}
.checkline input{accent-color:var(--blue);width:16px;height:16px}
.filters__price{display:flex;align-items:center;gap:8px;font-family:var(--mono)}

/* ── PDP layout ────────────────────────────────────────────────────── */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start}
.frame--pdp{background:#fff;border:3px solid var(--ink);box-shadow:12px 12px 0 var(--blue);padding:12px;transform:rotate(-1.5deg);
  transition:transform .3s ease;margin:0}
.frame--pdp:hover{transform:rotate(0)}
.frame--pdp img{border:1px solid var(--ink);width:100%}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.thumb{width:74px;padding:4px;background:#fff;border:2.5px solid var(--ink);cursor:pointer;line-height:0}
.thumb.is-selected{box-shadow:4px 4px 0 var(--blue)}
.thumb img{width:100%;height:56px;object-fit:cover}

.pdp__title{font-size:clamp(34px,5vw,58px);margin:10px 0 18px}
.pdp .tag{margin-bottom:0}
.priceblock{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px}
.priceblock .price{font-size:clamp(38px,6vw,54px)}
.price__was{font-family:var(--mono);font-size:18px;opacity:.55}
.price__save{font-family:var(--mono);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  background:var(--lime);border:2px solid var(--ink);padding:5px 10px;transform:rotate(-2deg)}
.price__note{font-family:var(--mono);font-size:11.5px;opacity:.65;margin-top:8px}

/* variant picker — buttons, never a dropdown */
.picker{margin-top:26px}
.picker__label{display:block;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);margin-bottom:10px}
.picker__opts{display:flex;flex-wrap:wrap;gap:10px}
.swatch{display:grid;gap:2px;text-align:left;font-family:var(--mono);font-size:13px;background:var(--card);color:var(--ink);
  border:2.5px solid var(--ink);padding:10px 14px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s}
.swatch:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.swatch.is-selected{background:var(--blue);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.swatch.is-out{opacity:.45;text-decoration:line-through}
.swatch__title{font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.swatch__price{font-size:12px;opacity:.85}
.swatch__save{font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--ink);background:var(--lime);padding:1px 5px;justify-self:start}

/* stock */
.pdp__stock{margin-top:20px}
.stockbadge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.stockbadge i{width:10px;height:10px;border:2px solid var(--ink);border-radius:50%;background:var(--lime)}
.stockbadge--low i{background:#ffb020}
.stockbadge--out i{background:transparent}
.stockbadge--out{opacity:.7}

/* qty + actions */
.pdp__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px}
.qty{display:inline-flex;align-items:stretch;border:2.5px solid var(--ink);background:#fff}
.qty__btn{width:44px;font-family:var(--mono);font-size:19px;font-weight:700;background:var(--card);color:var(--ink);
  border:0;border-inline:2.5px solid transparent;cursor:pointer}
.qty__btn:hover{background:var(--lime)}
.qty__input{width:58px;text-align:center;font-family:var(--mono);font-size:15px;border:0;border-inline:2.5px solid var(--ink);
  background:#fff;color:var(--ink);-moz-appearance:textfield}
.qty__input::-webkit-outer-spin-button,.qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp__actions .btn{flex:1 1 200px;text-align:center}
.pdp__actions .btn[disabled]{opacity:.5;pointer-events:none}
.pdp__alt{margin-top:14px}
.pdp__alt .btn{width:100%;text-align:center}
.pdp__added{font-family:var(--mono);font-size:13px;background:var(--lime);border:2.5px solid var(--ink);padding:10px 14px;margin-top:16px}

/* trust row */
.trust{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin:26px 0 0;padding:22px 0 0;border-top:2px solid var(--ink)}
.trust li{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.trust span{font-size:17px}

/* four benefit headers, not prose */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;padding-top:34px;border-top:3px solid var(--ink)}
.benefit h3{font-family:var(--disp);font-weight:800;font-size:21px;text-transform:uppercase;margin:10px 0 6px}
.benefit p{font-size:14.5px;opacity:.85}
.benefit .num{font-size:38px;-webkit-text-stroke:2px var(--blue)}

/* description + specs */
.pdp__body{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;margin-top:64px}
.pdp__h2{font-size:clamp(28px,4vw,42px);margin-bottom:18px}
.pdp__desc p{max-width:60ch;margin-bottom:14px}
.acc{border:2.5px solid var(--ink);background:var(--card);box-shadow:4px 4px 0 var(--ink);padding:2px 20px;margin-top:22px}
.acc summary{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--disp);font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:14px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--blue);font-size:24px;line-height:1}
.acc[open] summary::after{content:"–"}
.acc p{padding-bottom:18px;font-size:15px}
.notice{font-family:var(--mono);font-size:13px;background:var(--lime);border:2.5px solid var(--ink);padding:12px 14px;margin-top:20px}

.specs-wrap{overflow-x:auto;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--card)}
.specs{width:100%;border-collapse:collapse;font-size:14.5px}
.specs th,.specs td{text-align:left;padding:12px 16px;border-bottom:2px solid rgba(22,21,15,.12);vertical-align:top}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;width:44%;opacity:.75}
.fitchips{margin-top:26px}

.related{margin-top:80px;padding-top:20px;border-top:3px solid var(--ink)}

/* ── blog ──────────────────────────────────────────────────────────── */
.section--article{max-width:960px}
.article__title{font-size:clamp(36px,7vw,72px);margin:8px 0 20px}
.article .frame--pdp{margin:30px 0}
.prose{margin-top:30px;max-width:68ch}
.prose h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,4vw,34px);text-transform:uppercase;margin:36px 0 12px}
.prose h3{font-family:var(--disp);font-weight:700;font-size:21px;margin:26px 0 10px}
.prose p,.prose li{font-size:17px;margin-bottom:14px}
.prose ul,.prose ol{padding-left:22px;margin-bottom:16px}
.prose a{color:var(--blue);border-bottom:2px solid var(--blue)}
.prose img{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);margin:26px 0}
.prose blockquote{border-left:5px solid var(--lime);padding-left:18px;font-size:19px;margin:24px 0}

/* ── responsive — v2 breakpoints ───────────────────────────────────── */
@media (max-width:880px){
  .prodgrid{grid-template-columns:1fr 1fr}
  .pdp{grid-template-columns:1fr;gap:34px}
  .pdp__body{grid-template-columns:1fr;gap:40px;margin-top:48px}
  .benefits{grid-template-columns:1fr 1fr;margin-top:48px}
  .filters__groups{grid-template-columns:1fr 1fr}
  .frame--pdp{transform:rotate(-1deg)}
}
@media (max-width:520px){
  .prodgrid{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr;gap:18px}
  .filters__groups{grid-template-columns:1fr}
  .filters__clear{margin-left:0}
  .trust{grid-template-columns:1fr}
  .pdp__actions{flex-direction:column;align-items:stretch}
  .pdp__actions .btn{width:100%}
  .qty{align-self:flex-start}
  .frame--pdp{transform:none}
  .swatch{flex:1 1 100%}
}

/* ── motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .frame--pdp,.frame--pdp:hover,.swatch,.swatch:hover,.chip--sm:hover,.card--product,.card--post{
    transition:none;transform:none}
  html{scroll-behavior:auto}
}

/* Made-to-order: orderable, longer lead time. Deliberately NOT styled like
   sold-out — it must read as "you can buy this", not "you cannot". */
.stockbadge--mto i { background: var(--blue, #2b27ff); }
.stockbadge--mto   { color: var(--ink, #16150f); }
.swatch.is-mto::after { content: "MTO"; font-family: var(--mono, monospace);
  font-size: 9px; margin-left: 6px; opacity: .7; letter-spacing: .06em; }