/* ==========================================================================
   FORGE — collection page
   ========================================================================== */

/* ---------- head ---------- */
.chead { position: relative; background-color: var(--surface-shell); color: var(--text-on-shell); padding-top: clamp(22px, 2.6vw, 36px); }
.chead .crumbs { color: var(--shell-9); }
.crumbs a:hover { color: var(--shell-12); }
.crumbs > span:last-child > span:last-child { color: var(--safety); }
.crumbs #crumbLast { display: contents; }
.chead__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: clamp(22px, 3vw, 40px) 0 clamp(24px, 3vw, 36px); }
.chead__l { display: grid; justify-items: start; gap: 16px; min-width: 0; }
.chead .h-1 { font-size: clamp(2.8rem, 6vw, 5.8rem); overflow-wrap: anywhere; }
.chead .lede { color: var(--shell-10); max-width: 58ch; }
.chead__stats { display: grid; grid-template-columns: repeat(3, auto); gap: 0; flex: none; }
.chead__stats div { padding: 4px 0 4px 22px; margin-left: 22px; border-left: 1px solid var(--border-on-shell); }
.chead__stats div:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
.chead__stats dt { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--shell-9); }
.chead__stats dd { margin-top: 8px; font: 900 2.8rem/.85 var(--font-display); font-variant-numeric: tabular-nums; }
.chead__stats div:first-child dd { color: var(--safety); }
/* category rail */
.cnav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 18px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
.cnav::-webkit-scrollbar { display: none; }
.cnav a { --c: 10px; flex: none; display: grid; grid-template-columns: 40px auto; align-items: center; gap: 10px; height: 56px; padding: 0 16px 0 6px; background: var(--shell-3); color: var(--shell-11); font: 500 var(--text-xs)/1.15 var(--font-sans); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); box-shadow: inset 0 0 0 1px var(--border-on-shell); transition: background var(--dur-base), color var(--dur-base); }
.cnav a:hover { background: var(--shell-4); color: var(--shell-12); }
.cnav a.is-on { background: var(--shell-12); color: var(--ink); box-shadow: none; }
.cnav__art { width: 40px; height: 40px; background: var(--grey-6); }
.cnav__art .tool { width: 100%; height: 100%; }
.cnav__all { display: grid; place-items: center; background: var(--shell-5); color: var(--shell-12); }
.cnav a.is-on .cnav__all { background: var(--safety); color: var(--ink); }

/* ---------- toolbar ---------- */
.ctool { position: sticky; top: calc(var(--bar-h) + var(--head-h) + var(--nav-h)); z-index: calc(var(--z-sticky) - 1); background: rgba(232, 233, 234, .88); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border-subtle); transition: top .35s var(--ease-snap), box-shadow .3s; }
html.bar-hidden .ctool { top: calc(var(--head-h) + var(--nav-h)); }
.ctool.is-stuck { box-shadow: 0 12px 30px -18px rgba(20, 21, 23, .35); }
.ctool__in { display: flex; align-items: center; gap: 14px; min-height: 64px; padding-block: 10px; }
.ctool__filters { --fill: var(--surface-page); flex: none; }
.ctool__filters .i { width: 18px; height: 18px; }
.ctool__n { --c: 3px; min-width: 18px; height: 18px; display: inline-grid; place-items: center; margin-left: -2px; background: var(--safety); color: var(--ink); font: 700 10px/1 var(--font-mono); position: relative; z-index: 1; }
.ctool__count { flex: none; font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.ctool__count b { font: 800 1.15rem/1 var(--font-display); color: var(--ink); letter-spacing: 0; margin-right: 4px; }
.chips { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { --c: 5px; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 11px; background: var(--ink); color: var(--shell-12); font: 500 var(--text-xs)/1 var(--font-sans); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition: background var(--dur-fast); }
.chip .i { width: 13px; height: 13px; color: var(--safety); }
.chip:hover { background: var(--shell-6); }
.chip--clear { background: none; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; }
.chip--clear:hover { background: none; color: var(--signal); }
.ctool__r { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.sort { --c: 7px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 12px; background: var(--surface-plate); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.sort .mono { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.sort select { height: 100%; padding: 0 28px 0 4px; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141517' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center / 10px; font: 600 var(--text-sm)/1 var(--font-sans); appearance: none; -webkit-appearance: none; cursor: pointer; }
.sort select:focus { outline: 0; }
.seg--icons button { width: 36px; padding: 0; display: grid; place-items: center; }
.seg--icons .i { width: 18px; height: 18px; }
@media (max-width: 1023px) { .ctool__in { flex-wrap: wrap; gap: 10px; } .chips { order: 5; flex: 1 1 100%; } .chips:empty { display: none; } .ctool__count { margin-right: auto; } .ctool__r { margin-left: 0; } }
@media (max-width: 559px) { .sort .mono { display: none; } .sort { padding-left: 4px; } .sort select { font-size: var(--text-xs); max-width: 140px; } .seg--icons { display: none; } .ctool__filters { padding: 0 12px; } }

/* ---------- body ---------- */
.cbody { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: start; padding-block: 28px clamp(64px, 7vw, 110px); }
body.facets-off .cbody { grid-template-columns: minmax(0, 1fr); }
body.facets-off .facets { display: none; }

/* facets */
.facets { position: sticky; top: calc(var(--bar-h) + var(--head-h) + var(--nav-h) + 80px); max-height: calc(100vh - var(--bar-h) - var(--head-h) - var(--nav-h) - 100px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--grey-8) transparent; padding-right: 6px; transition: top .35s var(--ease-snap); }
html.bar-hidden .facets { top: calc(var(--head-h) + var(--nav-h) + 80px); }
.facets__head, .facets__foot { display: none; }
.fgrp { border-top: 1px solid var(--border-default); }
.fgrp:last-child { border-bottom: 1px solid var(--border-default); }
.fgrp summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; cursor: pointer; list-style: none; font: 500 var(--text-2xs)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.fgrp summary::-webkit-details-marker { display: none; }
.fgrp summary small { color: var(--text-muted); letter-spacing: .06em; margin-left: 6px; }
.fgrp summary .i { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-snap); }
.fgrp[open] summary .i { transform: rotate(45deg); }
.fgrp__body { display: grid; gap: 2px; padding-bottom: 16px; }
.fopt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 4px; cursor: pointer; font-size: var(--text-sm); transition: background var(--dur-fast); }
.fopt:hover { background: rgba(20, 21, 23, .05); }
.fopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fopt i { --c: 4px; width: 18px; height: 18px; background: var(--surface-raised); box-shadow: inset 0 0 0 1.5px var(--grey-9); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); display: grid; place-items: center; transition: background var(--dur-fast); }
.fopt i::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .2s var(--ease-snap); }
.fopt input:checked + i { background: var(--safety); box-shadow: inset 0 0 0 1.5px var(--ink); }
.fopt input:checked + i::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.fopt input:focus-visible + i { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fopt b { font-size: 10.5px; font-weight: 500; color: var(--text-muted); }
.fopt.is-on b { color: var(--ink); font-weight: 600; }
.fopt.is-zero { opacity: .42; cursor: default; }
.fopt small { font-size: 9.5px; letter-spacing: .08em; color: var(--text-muted); }
.fhouse { padding: 2px 4px; background: var(--safety); color: var(--ink) !important; }
.fwm { font-size: 1.15rem !important; color: var(--ink); vertical-align: -2px; }
.fwm svg { width: 10px; height: 16px; }
.fcat { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 8px; text-align: left; font-size: var(--text-sm); border-left: 2px solid transparent; transition: background var(--dur-fast), border-color var(--dur-fast); }
.fcat:hover { background: rgba(20, 21, 23, .05); }
.fcat b { font: 500 10.5px/1 var(--font-mono); color: var(--text-muted); }
.fcat.is-on { border-color: var(--safety); background: var(--surface-raised); font-weight: 600; }
.fcat.is-on b { color: var(--ink); }
.fcat.is-zero { opacity: .4; }
.fnote { margin-top: 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
/* dual price range */
.frange { position: relative; height: 30px; margin: 4px 8px 0; }
.frange__track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; translate: 0 -50%; background: repeating-linear-gradient(90deg, var(--grey-8) 0 1px, transparent 1px 10%), var(--grey-6); }
.frange__track i { position: absolute; top: 0; bottom: 0; left: calc(var(--lo) * 100%); right: calc((1 - var(--hi)) * 100%); background: var(--ink); }
.frange input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.frange input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 22px; background: var(--safety); border: 2px solid var(--ink); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); cursor: grab; }
.frange input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 20px; background: var(--safety); border: 2px solid var(--ink); border-radius: 0; cursor: grab; }
.frange input::-webkit-slider-runnable-track { background: none; }
.frange__vals { display: flex; justify-content: space-between; margin: 6px 0 10px; font-size: 11px; font-weight: 600; }
.fquick { display: flex; flex-wrap: wrap; gap: 4px; }
.fquick button { --c: 4px; height: 26px; padding: 0 8px; font-size: 10px; letter-spacing: .04em; background: var(--surface-plate); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.fquick button:hover { background: var(--ink); color: var(--shell-12); }

@media (max-width: 1023px) {
  .cbody { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  body.facets-off .facets { display: flex; }
  .facets { position: fixed; inset: 0 auto 0 0; top: 0; z-index: var(--z-overlay); width: min(400px, 100vw); max-height: none; display: flex; flex-direction: column; padding: 0; background: var(--surface-panel); transform: translateX(-104%); visibility: hidden; transition: transform .55s var(--ease-snap), visibility 0s .55s; overflow: hidden; }
  html.bar-hidden .facets { top: 0; }
  .facets.is-open { transform: none; visibility: visible; transition: transform .55s var(--ease-snap); }
  .facets__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: var(--ink); color: var(--shell-12); }
  .facets__head h2 { font: 900 1.8rem/1 var(--font-display); text-transform: uppercase; }
  .facets__body { flex: 1; overflow: auto; padding: 4px 18px 18px; }
  .facets__foot { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 14px 18px; background: var(--surface-raised); border-top: 1px solid var(--border-subtle); }
  .facets__foot .btn--line { --fill: var(--surface-raised); }
}

/* ---------- grid ---------- */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.facets-off .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid > .card { container-type: inline-size; animation: cardIn .6s var(--ease-out) both; animation-delay: calc(var(--i) * .035s); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 1279px) { body.facets-off .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .grid, body.facets-off .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .grid, body.facets-off .grid { gap: 8px; } }

/* compare toggle sits on the packshot's lower-left */
.card__cmp { --c: 5px; position: absolute; left: 10px; top: calc(92cqw - 40px); z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 8px; background: rgba(251, 251, 252, .78); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); opacity: 0; transition: opacity .25s, background .2s; }
.card:hover .card__cmp, .card__cmp:has(:checked), .card__cmp:focus-within { opacity: 1; }
@media (hover: none) { .card__cmp { opacity: 1; } }
.card__cmp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.card__cmp i { width: 13px; height: 13px; box-shadow: inset 0 0 0 1.5px var(--ink); display: grid; place-items: center; }
.card__cmp i::after { content: ""; width: 7px; height: 4px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg) scale(0); transition: transform .2s var(--ease-snap); }
.card__cmp:has(:checked) { background: var(--safety); }
.card__cmp:has(:checked) i::after { transform: rotate(-45deg) scale(1); }
.card__cmp:has(:focus-visible) { outline: 2px solid var(--focus-ring); }
@media (max-width: 559px) { .card__cmp { left: 6px; top: calc(92cqw - 32px); height: 24px; padding: 0 7px 0 6px; font-size: 8.5px; gap: 5px; } .card__badges { top: 8px; left: 8px; } .card__badges .tag--plat { display: none; } .card__sku { display: none; } }

/* list view */
.grid.is-list { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
.grid.is-list > .card { display: grid; grid-template-columns: 220px minmax(0, 1fr); container-type: normal; }
.grid.is-list .card__media { aspect-ratio: auto; min-height: 220px; height: 100%; }
.grid.is-list .card__cmp { top: auto; bottom: 12px; }
.grid.is-list .card__body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "brand buy" "title buy" "specs buy" "plate stk"; column-gap: 28px; row-gap: 8px; padding: 18px 20px; }
.grid.is-list .card__brand { grid-area: brand; }
.grid.is-list .card__title { grid-area: title; min-height: 0; font-size: var(--text-md); }
.grid.is-list .card__specs { grid-area: specs; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 18px; }
.grid.is-list .card__specs div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--border-subtle); font-size: var(--text-xs); }
.grid.is-list .card__specs dt { color: var(--text-muted); }
.grid.is-list .card__specs dd { font-weight: 500; text-align: right; }
.grid.is-list .plate--mini { grid-area: plate; align-self: end; }
.grid.is-list .stk { grid-area: stk; align-self: end; }
.grid.is-list .card__buy { grid-area: buy; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; margin: 0; padding: 0 0 0 20px; border-left: 1px solid var(--border-subtle); }
.grid.is-list .card__acts { display: grid; grid-template-columns: 1fr auto; }
.grid.is-list .card__acts .btn__lbl { display: inline; }
@media (max-width: 1023px) {
  .grid.is-list > .card { grid-template-columns: 150px minmax(0, 1fr); }
  .grid.is-list .card__media { min-height: 150px; }
  .grid.is-list .card__body { grid-template-columns: 1fr; grid-template-areas: "brand" "title" "plate" "stk" "buy"; }
  .grid.is-list .card__specs { display: none; }
  .grid.is-list .card__buy { padding: 0; border: 0; flex-direction: row; align-items: flex-end; }
}

/* promo tiles inside the grid */
.promo { --c: var(--cham-l); position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 100%; padding: 22px; background-color: var(--surface-shell); color: var(--text-on-shell); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); overflow: hidden; animation: cardIn .6s var(--ease-out) both; background-image: linear-gradient(rgba(237, 238, 240, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 238, 240, .05) 1px, transparent 1px); background-size: 24px 24px; }
.promo p { font-size: var(--text-sm); color: var(--shell-10); }
.promo .promo__k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--safety); }
.promo .h-3 { font-size: 1.8rem; line-height: .95; }
.promo .btn { align-self: flex-start; margin-top: 4px; }
.promo__art { position: absolute; top: 6%; left: 50%; width: 70%; aspect-ratio: 1; translate: -50% 0; }
.promo__art .tool { width: 100%; height: 100%; }
.promo--batt { padding-top: 0; }
.promo--batt::before { content: ""; flex: 1; min-height: 52%; }
.promo--trade { justify-content: flex-start; padding-top: 34px; }
.promo--trade .h-3 { font-size: 2.3rem; margin-top: 10px; }
.promo__haz { position: absolute; top: 0; left: 0; right: 0; height: 10px; }
.grid.is-list .promo { min-height: 0; padding: 22px 24px 22px 260px; }
.grid.is-list .promo__art { left: 120px; top: 50%; width: 180px; translate: -50% -50%; }
.grid.is-list .promo--batt::before { display: none; }
.grid.is-list .promo--trade { padding-left: 24px; }
@media (max-width: 559px) { .promo { padding: 14px; } .promo .h-3, .promo--trade .h-3 { font-size: 1.3rem; } .promo p { font-size: var(--text-xs); } .promo .btn { width: 100%; padding: 0 8px; font-size: 10px; } .grid.is-list .promo { padding: 16px 16px 16px 130px; } .grid.is-list .promo__art { left: 64px; width: 110px; } }

/* empty + more */
.empty { display: grid; justify-items: center; gap: 14px; padding: 48px 16px 64px; text-align: center; }
.empty__art { --c: 22px; width: 180px; height: 180px; background: var(--surface-plate); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.empty__art .tool { width: 100%; height: 100%; transform: rotate(-24deg); }
.empty p { max-width: 46ch; color: var(--text-secondary); }
.empty__cta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.more { display: grid; justify-items: center; gap: 12px; margin-top: 40px; }
.more .mono { font-size: var(--text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.more__bar { width: 220px; height: 3px; background: var(--grey-6); position: relative; }
.more__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .6s var(--ease-snap); }
.more .btn--line { --fill: var(--surface-page); }

/* counter help band */
.chelp { background: var(--surface-shell); color: var(--text-on-shell); border-top: 8px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--safety) 0 10px, var(--ink) 10px 20px) 8; }
.chelp__in { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-block: 34px; }
.chelp__l { display: grid; justify-items: start; gap: 14px; max-width: 640px; }
.chelp__l .h-3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; }
.chelp__r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.chelp .status { color: var(--shell-12); margin-right: 8px; }
@media (max-width: 1023px) { .chelp__in { flex-direction: column; align-items: flex-start; } .chelp__r { justify-content: flex-start; } }

/* ---------- compare ---------- */
.cmpbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-overlay) - 3); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); animation: barIn .45s var(--ease-snap); border-top: 2px solid var(--safety); }
@keyframes barIn { from { transform: translateY(100%); } }
.cmpbar__in { display: flex; align-items: center; gap: 18px; min-height: 76px; padding-block: 10px; }
.cmpbar__lbl { flex: none; font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--shell-10); }
.cmpbar__lbl b { font: 900 1.6rem/1 var(--font-display); color: var(--safety); margin: 0 2px 0 6px; }
.cmpbar__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1; min-width: 0; }
.cmpslot { --c: 8px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 10px; height: 54px; padding: 0 6px 0 5px; background: rgba(237, 238, 240, .08); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); color: var(--shell-12); font-size: var(--text-xs); }
.cmpslot__art { width: 44px; height: 44px; background: var(--grey-6); }
.cmpslot__art .tool { width: 100%; height: 100%; }
.cmpslot__t { display: grid; gap: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.cmpslot__t small { font-size: 9px; color: var(--shell-9); }
.cmpslot button { width: 28px; height: 28px; display: grid; place-items: center; color: var(--shell-10); }
.cmpslot button:hover { color: var(--safety); }
.cmpslot button .i { width: 14px; height: 14px; }
.cmpslot--empty { display: grid; place-items: center; grid-template-columns: 1fr; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--shell-8); box-shadow: inset 0 0 0 1px dashed; outline: 1px dashed var(--shell-7); outline-offset: -1px; background: none; }
.cmpbar__acts { display: flex; gap: 8px; flex: none; }
body.has-cmp .to-top { bottom: 96px; }
body.has-cmp .toast { bottom: 100px; }
@media (max-width: 767px) { .cmpbar__slots { display: none; } .cmpbar__in { justify-content: space-between; min-height: 64px; } }

.drawer--cmp { width: min(1120px, 100vw); }
.drawer--cmp .drawer__head { gap: 18px; }
.drawer--cmp .drawer__head h2 { margin-right: auto; }
.cmp__diff { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--shell-10); cursor: pointer; }
.cmp__diff input { accent-color: var(--safety); width: 16px; height: 16px; }
.drawer--cmp .drawer__body { padding: 0; }
.cmp__scroll { overflow-x: auto; }
.cmp__table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; }
.cmp__table th, .cmp__table td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.cmp__table tbody th { position: sticky; left: 0; z-index: 1; width: 170px; background: var(--surface-panel); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.cmp__table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-raised); padding-top: 18px; vertical-align: bottom; }
.cmp__table thead th:first-child { width: 170px; }
.cmp__p { display: grid; gap: 6px; }
.cmp__art { --c: 12px; display: block; width: 100%; max-width: 200px; aspect-ratio: 1.2; background: var(--surface-plate); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.cmp__art .tool { width: 100%; height: 100%; }
.cmp__p small { font-size: 9.5px; letter-spacing: .08em; color: var(--text-muted); }
.cmp__p b { font-weight: 600; line-height: 1.3; }
.cmp__p:hover b { text-decoration: underline; }
.cmp__price .price b { font-size: 1.7rem; }
.cmp__stk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); }
.cmp__table.is-diff tr.is-d td { background: var(--amber-3); }
.cmp__table.is-diff tr.is-d th { box-shadow: inset 3px 0 0 var(--safety); color: var(--ink); }
.cmp__table.is-diff tbody tr:not(.is-d):not(.cmp__acts) { opacity: .45; }
.cmp__acts td { display: table-cell; }
.cmp__acts .btn { margin: 0 6px 6px 0; }
.cmp__acts .btn--line { --fill: var(--surface-panel); }

/* ---------- narrow cards (2-up on phones): stack the plate and stock ---------- */
@container (max-width: 250px) {
  .plate--mini { grid-template-columns: 1fr; padding: 4px 8px; }
  .plate--mini div { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; border-left: 0; border-top: 1px solid var(--border-subtle); min-width: 0; }
  .plate--mini div:first-child { border-top: 0; }
  .plate--mini dd { margin: 0; text-align: right; min-width: 0; }
  .stk { display: grid; grid-template-columns: 1fr 1fr; }
  .stk li, .stk li:first-child { padding: 5px 4px 5px 0; border-left: 0; border-top: 1px solid var(--border-subtle); }
  .stk li:nth-child(-n+2) { border-top: 0; }
  .stk li:nth-child(even) { padding-left: 6px; border-left: 1px solid var(--border-subtle); }
  .card__title { min-height: 0; }
  .card__tier { display: none; }
}
@media (max-width: 767px) {
  .chead__row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .chead__stats { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-on-shell); padding-top: 14px; }
  .chead__stats div { margin-left: 0; padding-left: 14px; }
  .chead__stats dd { font-size: 2rem; }
  .cmpbar__acts .btn--line-inv { padding: 0 10px; }
}
@media (max-width: 559px) {
  .ctool__in { gap: 8px; }
  .ctool__count { font-size: 0; letter-spacing: 0; margin-right: 0; }
  .ctool__count b { font-size: 1.15rem; margin: 0; }
  .ctool__r { margin-left: auto; }
}