/* IDM shop. Built on the site tokens in site.css. The catalogue is calm; the project list is the one strong object. */

/* Header additions */
.shop .top-in { gap: var(--s4); }
.shop .brand { margin-right: 0; }
.hsearch { position: relative; flex: 1 1 320px; max-width: 460px; margin-right: auto; }
.hsearch svg, .csearch svg, .bigsearch-row svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--slate); stroke-width: 1.6; pointer-events: none; }
.hsearch input, .csearch input, .bigsearch input {
  width: 100%; min-height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--slate); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: 400 .9688rem var(--text);
}
.hsearch input::placeholder, .csearch input::placeholder, .bigsearch input::placeholder { color: var(--slate); opacity: .85; }
.hsearch input:focus-visible, .csearch input:focus-visible, .bigsearch input:focus-visible { outline: 3px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
.has-cat .hsearch { visibility: hidden; }
.shop .nav ul { gap: var(--s4); }
.listbtn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px;
  border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; font-size: .9375rem; white-space: nowrap;
}
.listbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.listbtn:hover { background: color-mix(in srgb, var(--ink) 86%, var(--signal)); }
.badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--leaf); color: #0E1A08; font-size: .8125rem; font-weight: 600; display: inline-grid; place-items: center; }
.badge[hidden] { display: none; }
.listbtn.pulse .badge { animation: pulse .5s var(--ease); }
@keyframes pulse { 50% { transform: scale(1.25); } }
@media (max-width: 1080px) {
  .hsearch { order: 5; flex-basis: 100%; max-width: none; margin: 0 0 var(--s3); }
  .shop .top-in { flex-wrap: wrap; }
  .shop .brand { margin-right: auto; }
}
@media (max-width: 520px) { .listbtn-label { display: none; } .listbtn { padding: 0 14px; } }

/* Breadcrumbs and page heads */
.crumbs { padding-top: var(--s4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--slate); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--rule); }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); display: inline-block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.page-head { padding: var(--s5) 0 var(--s4); display: grid; gap: var(--s3); }
.page-head h1 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.05; letter-spacing: -0.022em; }
.page-head p { color: var(--slate); max-width: 64ch; }

/* Shop home */
.shero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s5) var(--s7); align-items: end; padding-top: clamp(var(--s6), 7vw, var(--s8)); padding-bottom: clamp(var(--s5), 5vw, var(--s7)); }
.shero h1 { font-size: clamp(2.4rem, 1.1rem + 3.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.028em; font-weight: 620; }
.bigsearch { display: grid; gap: var(--s3); }
.bigsearch label { font-weight: 600; }
.bigsearch-row { position: relative; display: flex; gap: var(--s2); }
.bigsearch-row svg { left: 18px; width: 20px; height: 20px; margin-top: -10px; }
.bigsearch input { min-height: 56px; padding-left: 48px; font-size: 1.0625rem; border-color: var(--slate); }
.bigsearch .btn { min-height: 56px; }
.bigsearch-hint { color: var(--slate); font-size: .9375rem; max-width: 60ch; }
.row-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s5); margin-bottom: var(--s5); }
.row-head p { color: var(--slate); max-width: 52ch; }
.depts, .how, .excl { padding-block: clamp(var(--s5), 6vw, var(--s7)); background: linear-gradient(var(--rule), var(--rule)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.dtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.dtile a { display: grid; grid-template-columns: 112px 1fr; gap: var(--s4); align-items: center; min-height: 136px; padding: var(--s3); border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .18s var(--ease); }
.dtile a:hover { border-color: var(--ink); }
.dtile-img { width: 112px; height: 104px; display: grid; place-items: center; background: #fff; border-radius: 10px; overflow: hidden; }
.dtile-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.dtile-txt { display: grid; gap: 4px; min-width: 0; }
.dtile-name { font: 600 1.1875rem/1.2 var(--display); letter-spacing: -0.01em; }
.dtile-n { font-size: .8438rem; color: var(--slate); }
.dtile-subs { font-size: .875rem; color: var(--slate); }
.how h2 { margin-bottom: var(--s5); }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--ink); }
.how-steps li { counter-increment: step; padding-top: var(--s4); }
.how-steps li::before { content: counter(step); display: block; margin-bottom: var(--s3); font: 500 .9375rem var(--mono); color: var(--slate); }
.how-steps h3 { margin-bottom: var(--s2); }
.how-steps p { color: var(--slate); max-width: 40ch; }
.how-note { margin-top: var(--s5); font-weight: 500; }
.excl-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); column-gap: var(--s5); }
.excl-list a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.excl-name { font: 560 1.5rem/1.1 var(--display); letter-spacing: -0.015em; }
.excl-n { color: var(--slate); font-size: .875rem; }
.excl-list a:hover .excl-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Videos: one still, a calm list, nothing moves until asked */
.videos { background: var(--night); color: var(--night-ink); padding-block: clamp(var(--s6), 8vw, var(--s8)); }
.videos h2 { color: var(--night-ink); }
.videos .row-head p, .vnote { color: var(--night-slate); }
.vplayer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: start; }
.vstage { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; overflow: hidden; background: #000; }
.vstage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vposter { position: absolute; inset: 0; padding: 0; border: 0; background: #000; cursor: pointer; }
.vposter img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .2s var(--ease); }
.vposter svg { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.vposter svg circle { fill: rgba(14, 17, 19, .72); stroke: rgba(255,255,255,.85); stroke-width: 1.5; }
.vposter svg path { fill: #fff; }
.vposter:hover img { opacity: 1; }
.vposter:focus-visible { outline: 3px solid #A3BDFF; outline-offset: -3px; }
.vnow { display: grid; gap: 2px; margin-bottom: var(--s3); }
.vnow-t { font: 600 1.25rem/1.25 var(--display); }
.vnow-b { color: var(--night-slate); font-size: .875rem; }
.vlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--night-rule); max-height: 420px; overflow-y: auto; }
.vitem { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; width: 100%; min-height: 64px; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--night-rule); background: none; color: var(--night-ink); text-align: left; cursor: pointer; font: inherit; }
.vitem img { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; }
.vitem-t { display: block; font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.vitem-b { display: block; font-size: .8125rem; color: var(--night-slate); }
.vitem[aria-pressed="true"] { background: rgba(255,255,255,.06); }
.vitem[aria-pressed="true"] .vitem-t::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #8CCB4E; vertical-align: 1px; }
.vitem:hover { background: rgba(255,255,255,.04); }
.videos :focus-visible { outline-color: #A3BDFF; }
.vnote { margin-top: var(--s3); font-size: .8438rem; }

/* Catalogue */
.catalogue { padding-bottom: var(--s7); }
.cat-bar { display: grid; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); position: sticky; top: 72px; z-index: 5; background: var(--paper); }
.csearch { position: relative; display: flex; gap: var(--s2); }
.csearch input { min-height: 48px; }
.cat-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.count { margin-right: auto; font-weight: 600; }
.sort { display: inline-flex; align-items: center; gap: var(--s2); font-size: .9375rem; color: var(--slate); }
select, .price-range input, .p-opts select {
  min-height: 44px; padding: 0 36px 0 12px; border: 1px solid var(--slate); border-radius: 10px; background: var(--surface); color: var(--ink); font: 500 .9375rem var(--text);
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.price-range input { background-image: none; padding-right: 12px; width: 100%; }
.tbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font: 600 .875rem var(--text); cursor: pointer; }
.tbtn:hover { border-color: var(--slate); }
.tbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.tbtn.is-done { border-color: var(--leaf); }
.filter-toggle { display: none; }
.cat-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--s6); padding-top: var(--s5); }
.filters { align-self: start; position: sticky; top: 210px; max-height: calc(100vh - 230px); overflow-y: auto; padding-right: var(--s2); display: grid; gap: var(--s4); }
.facet { margin: 0; padding: 0; border: 0; min-width: 0; }
.facet legend { padding: 0; margin-bottom: var(--s2); font-weight: 600; font-size: .9375rem; }
.facet-opts { display: grid; gap: 2px; max-height: 300px; overflow-y: auto; }
.opt { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-height: 36px; padding: 2px 6px 2px 2px; border-radius: 8px; cursor: pointer; font-size: .9375rem; }
.opt:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--signal); }
.opt .n { font-size: .8125rem; color: var(--slate); }
.opt.is-zero { color: var(--slate); }
.price-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.price-range label { display: grid; gap: 4px; font-size: .8125rem; color: var(--slate); }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s5) var(--s4); margin: 0; padding: 0; list-style: none; }
.results-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.none { padding: var(--s6) 0; color: var(--slate); max-width: 52ch; }
.more { display: grid; justify-items: center; gap: var(--s3); padding-top: var(--s6); color: var(--slate); font-size: .9375rem; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* Card */
.card { display: grid; grid-template-rows: 1fr auto; gap: var(--s3); min-width: 0; }
.card[hidden] { display: none; }
.card-link { display: grid; align-content: start; gap: 6px; text-decoration: none; color: var(--ink); }
.card-img { display: grid; place-items: center; aspect-ratio: 1; max-width: 100%; margin-bottom: 8px; background: #fff; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; transition: border-color .18s var(--ease); }
.card-img img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.card-link:hover .card-img { border-color: var(--slate); }
.card-link:hover .card-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.card-brand { font-size: .8125rem; color: var(--slate); }
.card-name { font: 600 1rem/1.3 var(--text); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-sku { font-size: .8125rem; color: var(--slate); overflow-wrap: anywhere; }
.card-buy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.card-buy .pr { display: flex; flex-wrap: wrap; }
.noimg { font-size: .8125rem; color: #6B747C; }
.pr { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.pr .num, .p-list .num { font-family: var(--text); font-variant-numeric: normal; letter-spacing: 0; }
.pr-now { font: 600 1.0625rem var(--text); letter-spacing: 0; }
.pr-from { font: 400 .8125rem var(--text); color: var(--slate); }
.pr-ex { font-size: .75rem; color: var(--slate); }
.pr-list { font-size: .8125rem; color: var(--slate); }
.addbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: var(--signal); color: var(--signal-ink); font: 600 .875rem var(--text); cursor: pointer; text-decoration: none; transition: background-color .18s var(--ease); }
.addbtn:hover { background: var(--signal-hover); }
.addbtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.addbtn.is-added { background: var(--leaf); color: #0E1A08; }
.addbtn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--slate); padding: 0 14px; }
.addbtn-ghost:hover { background: transparent; border-color: var(--ink); }

/* Product page */
.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6) var(--s7); padding: var(--s5) 0 var(--s7); }
.gallery { display: grid; gap: var(--s3); align-self: start; position: sticky; top: 96px; }
.g-main { display: grid; place-items: center; aspect-ratio: 1; max-width: 100%; background: #fff; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.g-main img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.g-thumbs { display: flex; gap: var(--s2); }
.g-thumbs button { width: 76px; height: 76px; padding: 0; border: 1px solid var(--rule); border-radius: 10px; background: #fff; cursor: pointer; overflow: hidden; }
.g-thumbs button[aria-pressed="true"] { border: 2px solid var(--ink); }
.g-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.buy { display: grid; align-content: start; gap: var(--s3); }
.p-brand { font-size: .9375rem; color: var(--slate); }
.p-brand a { color: var(--ink); font-weight: 600; text-decoration: none; }
.p-brand a:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-name { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.p-sku { color: var(--slate); font-size: .9375rem; }
.p-sku .num { color: var(--ink); }
.p-sum { color: var(--slate); max-width: 56ch; }
.p-price { display: grid; gap: 4px; padding: var(--s4) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.pr-big .pr-now { font-size: 2rem; font-weight: 600; letter-spacing: -0.01em; }
.pr-big .pr-ex { font-size: .9375rem; }
.p-list, .p-incl { font-size: .9375rem; color: var(--slate); }
.p-opts { display: grid; gap: var(--s3); }
.sel { display: grid; gap: 6px; font-weight: 600; font-size: .9375rem; }
.sel select { width: 100%; }
.p-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.qty, .stepper { display: inline-flex; align-items: center; border: 1px solid var(--slate); border-radius: 999px; overflow: hidden; }
.qty button, .stepper button { width: 44px; height: 46px; border: 0; background: transparent; color: var(--ink); font: 500 1.25rem var(--text); cursor: pointer; }
.qty button:hover, .stepper button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.qty input, .stepper input { width: 56px; height: 46px; border: 0; background: transparent; color: var(--ink); text-align: center; font: 600 1rem var(--text); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.addmain { flex: 1 1 200px; justify-content: center; min-height: 48px; }
.addmain svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.addmain.is-added { background: var(--leaf); color: #0E1A08; }
.p-order { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); font-size: .9375rem; }
.p-order span { color: var(--slate); font-size: .875rem; }
.p-note { font-weight: 500; font-size: .9375rem; }
.p-help { color: var(--slate); font-size: .9375rem; }
.p-desc { padding: var(--s6) 0; background: linear-gradient(var(--rule), var(--rule)) left top / 100% 1px no-repeat; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s4) var(--s6); }
.p-desc > h2 { font-size: 1.5rem; }
.prose { max-width: 72ch; display: grid; gap: var(--s3); }
.prose h3 { font: 600 1.0625rem var(--text); margin-top: var(--s3); }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; display: block; overflow-x: auto; }
.prose td { padding: 8px var(--s3) 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose tr td:first-child { color: var(--slate); width: 40%; }
.p-tags, .p-ean { grid-column: 2; font-size: .875rem; color: var(--slate); }
.p-tags a { color: var(--ink); margin-right: 8px; }
.p-rel { padding: var(--s6) 0 var(--s7); background: linear-gradient(var(--rule), var(--rule)) left top / 100% 1px no-repeat; }
.p-rel h2 { font-size: 1.5rem; margin-bottom: var(--s5); }

/* Project list panel */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(10, 13, 14, .4); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.list-open .scrim { opacity: 1; pointer-events: auto; }
.list-open { overflow: hidden; }
.listpanel {
  position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(460px, 100%); display: flex; flex-direction: column;
  background: var(--paper); border-left: 1px solid var(--rule); box-shadow: -24px 0 60px -30px rgba(10,13,14,.5);
  transform: translateX(100%); transition: transform .22s var(--ease);
}
.listpanel.is-open { transform: none; }
.listpanel[hidden] { display: none; }
.lp-head { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s4) var(--s4) var(--s3); border-bottom: 1px solid var(--ink); }
.lp-head h2 { font-size: 1.5rem; }
.lp-n { color: var(--slate); font-size: .9375rem; margin-right: auto; }
.lp-close { min-height: 40px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font: 600 .875rem var(--text); cursor: pointer; }
.lp-empty { padding: var(--s5) var(--s4); color: var(--slate); }
.lp-empty[hidden] { display: none; }
.lp-lines { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0 var(--s4); list-style: none; overflow-y: auto; }
.listpanel .num { font-family: var(--text); font-variant-numeric: tabular-nums; }
.lp-head { padding-top: calc(var(--s4) + env(safe-area-inset-top, 0px)); }
.lp-foot { padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
.line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.line img, .line-ph { width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 4px; }
.line-main { display: grid; gap: 4px; min-width: 0; }
.line-main a { font-weight: 600; font-size: .9375rem; line-height: 1.3; text-decoration: none; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-main a:hover { text-decoration: underline; }
.line-meta { font-size: .8125rem; color: var(--slate); overflow-wrap: anywhere; }
.line-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: 4px; }
.stepper button { width: 36px; height: 36px; font-size: 1.0625rem; }
.stepper input { width: 48px; height: 36px; font-size: .9375rem; }
.line-total { font-weight: 600; }
.line-x { align-self: start; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--slate); font-size: 1.375rem; cursor: pointer; }
.line-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.lp-foot { padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--ink); display: grid; gap: var(--s3); background: var(--surface); }
.lp-foot[hidden] { display: none; }
.lp-sum { margin: 0; display: grid; gap: 4px; }
.lp-sum div { display: flex; justify-content: space-between; font-size: .9375rem; color: var(--slate); }
.lp-sum dd { margin: 0; }
.lp-sum .lp-total { color: var(--ink); font-weight: 600; font-size: 1.0625rem; padding-top: 6px; border-top: 1px solid var(--rule); }
.lp-note { font-size: .8438rem; color: var(--slate); }
.lp-quote { justify-content: center; }
.lp-tools { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Responsive */
@media (max-width: 1080px) {
  .cat-bar { top: 0; position: static; }
  .filters { top: 24px; }
}
@media (max-width: 960px) {
  .shero, .vplayer, .product, .p-desc { grid-template-columns: minmax(0, 1fr); }
  .dtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .how-steps li { padding-block: var(--s4); border-bottom: 1px solid var(--rule); }
  .excl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-body { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .filter-toggle { display: inline-flex; }
  .filters { display: none; position: static; max-height: none; padding: var(--s4); border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
  .filters.is-open { display: grid; }
  .gallery { position: static; }
  .p-tags, .p-ean { grid-column: 1; }
  .results-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vlist { max-height: none; }
}
@media (max-width: 640px) {
  .dtiles, .excl-list { grid-template-columns: minmax(0, 1fr); }
  .dtile a { grid-template-columns: 84px 1fr; min-height: 104px; }
  .dtile-img { width: 84px; height: 84px; }
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .card-buy { grid-template-columns: minmax(0, 1fr); }
  .addbtn { justify-content: center; }
  .bigsearch-row { flex-direction: column; }
  .bigsearch-row svg { top: 28px; }
  .bigsearch .btn { justify-content: center; }
  .csearch .btn { display: none; }
}
@media (prefers-reduced-motion: reduce) { .listpanel { transition: none; } .listbtn.pulse .badge { animation: none; } }

/* Header running total */
.listbtn-total { font-size: .875rem; font-weight: 500; opacity: .85; }
.listbtn-total[hidden] { display: none; }
@media (max-width: 760px) { .listbtn-total { display: none; } }

/* View toggle */
.views { display: inline-flex; border: 1px solid var(--slate); border-radius: 999px; overflow: hidden; }
.vbtn { min-height: 40px; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font: 600 .875rem var(--text); cursor: pointer; }
.vbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Row quantity, only in list view */
.rowqty { display: none; }
.rowqty input { width: 64px; min-height: 40px; border: 1px solid var(--slate); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: center; font: 600 .9375rem var(--text); -moz-appearance: textfield; }
.rowqty input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* List view: one row per product for building long lists */
.results.is-list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.results.is-list .card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; gap: var(--s4); padding: 10px 0; border-bottom: 1px solid var(--rule); }
.results.is-list .card-link { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 14em); grid-template-areas: "img name sku" "img brand sku"; column-gap: var(--s3); row-gap: 2px; align-items: center; }
.results.is-list .card-img { grid-area: img; width: 64px; margin: 0; border-radius: 8px; }
.results.is-list .card-img img { padding: 6px; }
.results.is-list .card-name { grid-area: name; -webkit-line-clamp: 1; font-size: .9688rem; }
.results.is-list .card-brand { grid-area: brand; }
.results.is-list .card-sku { grid-area: sku; font-size: .875rem; color: var(--ink); }
.results.is-list .card-buy { display: flex; align-items: center; gap: var(--s3); border: 0; padding: 0; }
.results.is-list .card-buy .pr { display: grid; justify-items: end; min-width: 9em; text-align: right; }
.results.is-list .rowqty { display: block; }
.results.is-list .noimg span { display: none; }
@media (max-width: 760px) {
  .results.is-list .card { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .results.is-list .card-link { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "img name" "img brand" "img sku"; }
  .results.is-list .card-img { width: 56px; }
  .results.is-list .card-buy { justify-content: space-between; }
  .results.is-list .card-buy .pr { justify-items: start; text-align: left; margin-right: auto; }
}

/* Added state shows in text as well as colour */
.addbtn.is-added svg, .addmain.is-added svg { display: none; }

/* Filters: find inside long facets, footer with result count on phones */
.facet-find input { width: 100%; min-height: 36px; margin-bottom: 6px; padding: 0 10px; border: 1px solid var(--slate); border-radius: 8px; background: var(--surface); color: var(--ink); font: 400 .875rem var(--text); }
.opt[hidden] { display: none; }
.filter-foot { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.filter-done { display: none; }
@media (max-width: 960px) { .filter-done { display: inline-flex; } }

/* No photo: the IDM symbol on white, quiet */
.noimg { display: grid; justify-items: center; gap: 8px; }
.noimg img { width: 40px; height: 40px; opacity: .35; padding: 0 !important; }

/* Project list extras */
.line-total { display: grid; justify-items: end; }
.line-unit { font-size: .75rem; font-weight: 400; color: var(--slate); }
.lp-ref { display: grid; gap: 4px; font-size: .8438rem; color: var(--slate); }
.lp-ref input { min-height: 40px; padding: 0 12px; border: 1px solid var(--slate); border-radius: 10px; background: var(--paper); color: var(--ink); font: 400 .9375rem var(--text); }
.lp-empty .tbtn { margin-top: var(--s3); }
.lp-empty .tbtn[hidden] { display: none; }
.vnow-l { color: var(--night-ink); font-size: .875rem; margin-top: 6px; text-underline-offset: 4px; }
.p-help a { color: var(--ink); }

/* Phones: the buy row stays in reach on product pages */
@media (max-width: 760px) {
  .p-actions { position: sticky; bottom: 0; z-index: 4; margin-inline: calc(-1 * var(--gutter)); padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) { .p-actions { flex-wrap: nowrap; } .p-actions .addmain { flex: 1 1 auto; min-width: 0; } }

/* Checkout */
.linkbtn { border: 0; background: none; padding: 0; cursor: pointer; font: 600 1rem var(--text); }
.lp-checkout { justify-content: center; }
.lp-quote { justify-content: center; }
.co-banner { margin: 0 0 var(--s4); padding: 14px 16px; border-radius: 12px; border: 1px solid var(--slate); background: var(--surface); font-weight: 500; }
.co-banner[data-kind="warn"] { border-color: var(--fault); }
.co-empty { display: grid; justify-items: start; gap: var(--s4); padding: var(--s5) 0 var(--s7); color: var(--slate); }
.co-empty[hidden], .co-grid[hidden] { display: none; }
.co-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6) var(--s7); align-items: start; padding-bottom: var(--s7); }
.co-form { display: grid; gap: var(--s5); }
.co-form fieldset { margin: 0; padding: var(--s4) 0 0; border: 0; border-top: 1px solid var(--ink); display: grid; gap: var(--s3); min-width: 0; }
.co-form legend { float: left; width: 100%; padding: 0; margin-bottom: var(--s3); font: 600 1.25rem var(--display); letter-spacing: -0.01em; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.fgrid[hidden] { display: none; }
.span2 { grid-column: 1 / -1; }
.fld { display: grid; gap: 6px; min-width: 0; align-content: start; }
.fld > label, .fld .fhint { font-size: .9375rem; }
.fld > label { font-weight: 600; }
.fhint { margin: 0; color: var(--slate); font-size: .8438rem !important; }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--slate); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: 400 1rem var(--text);
}
.fld textarea { min-height: 88px; resize: vertical; }
.fld select { padding-right: 36px; }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 3px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
.fld.is-err input, .fld.is-err select { border-color: var(--fault); border-width: 2px; }
.ferr { margin: 0; color: var(--fault); font-size: .875rem; font-weight: 500; }
.ferr::before { content: '! '; font-weight: 700; }
.ferr[hidden] { display: none; }
.chk { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .9688rem; cursor: pointer; }
.chk input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--signal); }
.fld.is-err .chk span { color: var(--fault); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.co-err { margin: 0; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--fault); color: var(--fault); font-weight: 600; }
.co-err[hidden] { display: none; }
.co-privacy, .co-methods { color: var(--slate); font-size: .875rem; }
.co-pay { justify-content: center; min-height: 56px; font-size: 1.0625rem; }
.co-pay[disabled] { opacity: .75; cursor: progress; }
.co-sum { position: sticky; top: 96px; padding: var(--s4); border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); display: grid; gap: var(--s3); }
.co-sum-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.co-sum-head h2 { font-size: 1.375rem; }
.co-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); max-height: 46vh; overflow-y: auto; }
.co-lines li { display: grid; grid-template-columns: 3em 1fr auto; gap: var(--s2); padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.co-q { color: var(--slate); }
.co-n { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.co-n small { color: var(--slate); font-size: .8125rem; }
.co-t { text-align: right; white-space: nowrap; }
.co-sum .num, .th .num { font-family: var(--text); font-variant-numeric: tabular-nums; }
.co-totals { margin: 0; display: grid; gap: 6px; }
.co-totals div { display: flex; justify-content: space-between; gap: var(--s3); color: var(--slate); font-size: .9375rem; }
.co-totals dd { margin: 0; }
.co-totals .co-total { padding-top: 8px; border-top: 1px solid var(--ink); color: var(--ink); font-weight: 600; font-size: 1.125rem; }
.co-ship-note { color: var(--slate); font-size: .8438rem; }
.th { padding-bottom: var(--s7); }
.th .page-head p { font-size: 1.125rem; color: var(--ink); max-width: 60ch; }
.th-lines { max-width: 640px; max-height: none; }
.th-bank { max-width: 640px; padding: var(--s4); margin-bottom: var(--s4); border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
.th-bank[hidden] { display: none; }
.th-bank h2 { font-size: 1.25rem; margin-bottom: var(--s3); }
.th-bank dl { margin: 0; display: grid; gap: 6px; }
.th-bank dl div { display: flex; justify-content: space-between; gap: var(--s3); }
.th-bank dd { margin: 0; font-weight: 600; }
.th-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.terms { padding-bottom: var(--s7); }
.terms-body { display: grid; gap: var(--s4); max-width: 68ch; }
.terms-body h2 { font-size: 1.25rem; margin-bottom: 6px; }
.terms-body p { color: var(--slate); }
.legal a { color: var(--night-ink); }
@media (max-width: 960px) {
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-sum { position: static; order: -1; }
}
@media (max-width: 560px) { .fgrid { grid-template-columns: minmax(0, 1fr); } }
.shop .nav ul a { white-space: nowrap; }
.listbtn-total { font-family: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 1320px) { .listbtn-total { display: none; } .shop .nav ul { gap: var(--s3); } }