/* Public storefront — extends base.css. */

/* ---------- Header ---------- */
.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 40; }
.site-header-top { background: var(--c-black); color: var(--c-on-black-2); font-size: var(--fs-sm); }
.site-header-top .container { display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; padding-block: 0.35rem; }
.site-header-top a { color: #e0e0e0; }
.site-header-main { display: flex; align-items: center; gap: var(--sp-5); padding-block: var(--sp-3); }
.site-logo { display: flex; align-items: center; gap: var(--sp-3); font-weight: 720; font-size: var(--fs-lg); color: var(--c-ink); letter-spacing: -0.02em; }
.site-logo:hover { text-decoration: none; }
.site-logo-img { height: 46px; width: auto; display: block; }
@media (max-width: 600px) { .site-logo-img { height: 36px; } }
.site-search { flex: 1; max-width: 34rem; position: relative; }
.site-search input { padding-left: 2.3rem; height: 2.6rem; border-radius: var(--r-full); }
.site-search svg { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--c-ink-3); }
.site-nav {
  display: flex; gap: var(--sp-1); align-items: center;
  border-top: 1px solid var(--c-border);
  /* A long category list scrolls inside its own strip instead of widening
     the page — the usual cause of a stray horizontal scrollbar on phones. */
  overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.site-nav::-webkit-scrollbar { display: none; }
/* Fade the trailing edge below lg so it reads as scrollable rather than cut off. */
@media (max-width: 991.98px) {
  .site-nav {
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
}
.site-nav a { scroll-snap-align: start; }
.site-nav a { padding: 0.6rem var(--sp-3); font-size: var(--fs-base); font-weight: 550; color: var(--c-ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover { color: var(--c-brand); text-decoration: none; }
.site-nav a.is-active { color: var(--c-brand); border-bottom-color: var(--c-brand); }

/* ---------- Hero ---------- */
.hero {
  background: var(--c-black);
  color: #fff; padding: var(--sp-8) 0 var(--sp-6); position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: 0.14; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 75% 30%, #000, transparent 70%);
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { font-size: var(--fs-4xl); max-width: 20ch; margin-bottom: var(--sp-4); letter-spacing: -0.03em; }
.hero p { font-size: var(--fs-lg); color: var(--c-on-black-2); max-width: 52ch; }

/* ---------- Page width ---------- */
/* The storefront uses the whole screen. base.css caps .container at --maxw,
   which on a wide monitor left a band of empty white down each side of every
   shop page. The gutter stays, so nothing touches the screen edge; running
   text keeps its own readable measure (.prose, the ledes). */
.container { max-width: none; }

/* ---------- Product card ---------- */
/* Column count is stated per breakpoint rather than left to auto-fill: a fixed
   min track width gives one lonely column at 360px and five cramped ones at 1440. */
.product-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px)  { .product-grid { gap: var(--sp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Beside the filter rail there is less room, so hold at three until xl. */
@media (min-width: 1200px) { .results .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .results .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* A full-width page has room for more cards; without these they would only grow. */
@media (min-width: 1600px) {
  .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .results .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1900px) {
  .product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .results .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 2400px) {
  .product-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .results .product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.product-card {
  display: flex; flex-direction: column; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.product-card:hover { box-shadow: var(--shadow-2); border-color: var(--c-border-strong); transform: translateY(-2px); }
.product-card a { color: inherit; text-decoration: none; }
.product-media { aspect-ratio: 4 / 3; background: var(--c-surface-2); display: grid; place-items: center; overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-3); }
.product-media .placeholder { color: var(--c-ink-3); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.product-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.product-brand { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-3); font-weight: 650; }
.product-name { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; margin: 0; }
.product-name:hover { color: var(--c-brand); }
.product-sku { font-size: var(--fs-xs); color: var(--c-ink-3); font-family: var(--font-mono); }
.product-price { font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-mono); color: var(--c-ink); margin-top: auto; letter-spacing: -0.02em; }
.product-price .was { font-size: var(--fs-sm); color: var(--c-ink-3); text-decoration: line-through; font-weight: 400; margin-left: var(--sp-2); }
.stock-pill { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--fs-xs); font-weight: 650; }
.stock-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock-in { color: var(--c-ok); } .stock-low { color: var(--c-warn); } .stock-out { color: var(--c-ink-3); }

/* ---------- Catalogue layout ---------- */
.catalogue { display: grid; grid-template-columns: 250px 1fr; gap: var(--sp-6); align-items: start; }
/* Only sticky where the rail is a sidebar; below lg it is a Bootstrap offcanvas
   and must keep the fixed positioning the component gives it. */
@media (min-width: 992px) {
  .filters { position: sticky; top: 7rem; max-height: calc(100vh - 8rem); overflow-y: auto; }
}
.filter-group { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.filter-group:last-child { border-bottom: 0; }
.filter-group h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-ink-3); margin-bottom: var(--sp-3); }
.filter-group label { display: flex; align-items: center; gap: var(--sp-2); padding: 0.2rem 0; font-size: var(--fs-base); cursor: pointer; }
.filter-group label:hover { color: var(--c-brand); }
.filter-count { margin-left: auto; font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ---------- Product detail ---------- */
.product-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-6); }
.gallery-main { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-5); }
.gallery-thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.gallery-thumbs button { width: 64px; height: 64px; padding: 0.2rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-sm); cursor: pointer; }
.gallery-thumbs button.is-active { border-color: var(--c-brand); box-shadow: var(--ring); }
.price-block { padding: var(--sp-4); background: var(--c-surface-2); border-radius: var(--r-lg); margin-block: var(--sp-4); }
.price-block .price { font-size: var(--fs-3xl); font-weight: 720; font-family: var(--font-mono); letter-spacing: -0.03em; }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.spec-table th { width: 40%; text-align: left; padding-block: 0.5rem; color: var(--c-ink-3); font-weight: 550; vertical-align: top; border-bottom: 1px solid var(--c-border); }
.spec-table td { padding-block: 0.5rem; border-bottom: 1px solid var(--c-border); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-black); color: var(--c-on-black-2); padding: var(--sp-7) 0 var(--sp-5); margin-top: var(--sp-8); }
.site-footer h4 { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3); }
.site-footer a { color: var(--c-on-black-2); display: block; padding: 0.15rem 0; }
.site-footer a:hover { color: #fff; }
.site-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: var(--sp-6); padding-top: var(--sp-4); font-size: var(--fs-sm); }

@media (max-width: 991.98px) {
  /* One column: the filter rail leaves the flow and becomes a drawer. */
  .catalogue { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero h1 { font-size: var(--fs-2xl); }
  .site-header-main { flex-wrap: wrap; }
  .site-search { order: 3; flex-basis: 100%; max-width: none; }
}

/* ==========================================================================
   Module A — storefront pages (home, catalogue, search, product, contact,
   content pages). Appended section; nothing above this line is modified.
   Design intent: a parts counter, not a lifestyle shop — hairline rules,
   monospace identifiers, dense readouts, colour used only to mean something.
   ========================================================================== */

/* ---------- Shared page furniture ---------- */
.kicker {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-brand-dark); margin: 0 0 var(--sp-2);
}
.kicker a { color: inherit; }
.kicker-invert { color: #7fdbe2; }

.band { padding-block: var(--sp-7); }
.band + .band { padding-top: 0; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--c-ink);
}
.section-head h2 { margin: 0; font-size: var(--fs-xl); letter-spacing: -0.02em; }
.section-link { font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; }

.page-head { padding-block: var(--sp-6) var(--sp-4); }
.page-head-tight { padding-block: var(--sp-4) 0; }
.page-head-main { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.page-head h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.page-head-lede { color: var(--c-ink-2); max-width: 62ch; margin: 0; }

.breadcrumbs { margin-bottom: var(--sp-3); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.breadcrumbs li + li::before { content: "/"; color: var(--c-ink-3); margin-right: var(--sp-2); }
.breadcrumbs a { color: var(--c-ink-3); }
.breadcrumbs a:hover { color: var(--c-brand); }
.breadcrumbs [aria-current] { color: var(--c-ink-2); }

.btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

/* ---------- Home: hero ---------- */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero-note { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: #9fb4b8; }
.hero-note .mono { color: #cfe9ec; }

.hero-panel {
  background: rgba(8, 14, 20, 0.55); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); backdrop-filter: blur(2px);
}
.hero-panel-head {
  margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7fdbe2;
}
.readout { margin: 0; display: grid; gap: 0; }
.readout > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: 0.45rem 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}
.readout > div:last-child { border-bottom: 0; }
.readout dt { font-size: var(--fs-sm); color: #b6c6cb; }
.readout dd {
  margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg); font-weight: 700; color: #fff; letter-spacing: -0.02em;
}
.readout dd.readout-ok { color: #6fe0a8; }
.hero-panel-foot { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: #9fb4b8; }

/* ---------- Home: trust band ---------- */
.trust-band { background: var(--c-surface); border-block: 1px solid var(--c-border); }
.trust-band ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.trust-band li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  /* Symmetric inline padding, with the divider on the LEFT: every cell then
     sits the same distance from the rule on either side of it. The previous
     rule had right padding but zero left padding, so text was jammed against
     one divider and floating away from the next. */
  padding: var(--sp-4) var(--sp-5);
  border-left: 1px solid var(--c-border);
}
/* The outer edges align flush with the container gutter, so the band's left and
   right margins match every other section on the page. */
.trust-band li:first-child { border-left: 0; padding-left: 0; }
.trust-band li:last-child { padding-right: 0; }

@media (max-width: 767.98px) {
  /* Stacked: a vertical divider between rows reads better than side rules. */
  .trust-band li { padding-inline: 0; border-left: 0; border-top: 1px solid var(--c-border); }
  .trust-band li:first-child { border-top: 0; }
}
.trust-band svg { width: 22px; height: 22px; flex: none; color: var(--c-brand); margin-top: 2px; }
.trust-band strong { display: block; font-size: var(--fs-base); }
.trust-band span { display: block; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* ---------- Category tiles ---------- */
.cat-tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.cat-tiles a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--c-surface);
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-border-strong);
  border-radius: var(--r-sm); color: var(--c-ink); font-weight: 600;
  transition: border-color var(--transition), background var(--transition);
}
.cat-tiles a:hover { border-left-color: var(--c-brand); background: var(--c-brand-soft); text-decoration: none; }
.cat-tile-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-ink-3); white-space: nowrap; }

/* ---------- Brand strip ---------- */
.brand-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.brand-strip a {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  padding: 0.4rem 0.75rem; border: 1px solid var(--c-border); border-radius: var(--r-full);
  background: var(--c-surface); color: var(--c-ink-2); font-size: var(--fs-sm);
}
.brand-strip a:hover { border-color: var(--c-brand); color: var(--c-brand-dark); text-decoration: none; }
.brand-name { font-weight: 650; }
.brand-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ---------- Closing call to action ---------- */
.cta-band { margin-top: var(--sp-7); background: var(--c-brand-soft); border-block: 1px solid #bfe0e2; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-block: var(--sp-6); flex-wrap: wrap; }
.cta-band h2 { margin-bottom: var(--sp-1); }
.cta-band p { margin: 0; color: var(--c-ink-2); max-width: 56ch; }

/* ---------- Catalogue: filter rail ---------- */
.filters-form { font-size: var(--fs-base); }
.filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.filter-head .kicker { margin: 0; }
.filter-clear { font-size: var(--fs-sm); color: var(--c-ink-3); }
.filter-clear:hover { color: var(--c-danger); }
.filters-form fieldset.filter-group { border: 0; border-bottom: 1px solid var(--c-border); padding: 0 0 var(--sp-4); margin: 0 0 var(--sp-4); }
.filters-form legend {
  padding: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--c-ink-3); margin-bottom: var(--sp-3);
}
.facet-list { max-height: 15rem; overflow-y: auto; padding-right: var(--sp-2); }
.facet-list::-webkit-scrollbar { width: 6px; }
.facet-list::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-full); }
.facet-links { list-style: none; margin: 0; padding: 0; }
.facet-links li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: 0.2rem 0; }
.facet-links a { color: var(--c-ink-2); }
.facet-links .is-current { color: var(--c-ink); font-weight: 650; }
.price-range { display: flex; align-items: flex-end; gap: var(--sp-2); }
.price-range .field { margin: 0; flex: 1; min-width: 0; }
.price-range input { font-family: var(--font-mono); }
.price-range-sep { padding-bottom: 0.55rem; color: var(--c-ink-3); }
.filter-actions { margin-top: var(--sp-4); }

/* ---------- Catalogue: results ---------- */
.results-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-4);
}
.result-count { margin: 0; color: var(--c-ink-2); font-size: var(--fs-sm); }
.result-count strong { font-family: var(--font-mono); color: var(--c-ink); }
.sort-control { display: flex; align-items: center; gap: var(--sp-2); }
.sort-control label { font-size: var(--fs-sm); color: var(--c-ink-3); font-weight: 600; }
.sort-control select { width: auto; min-width: 11rem; font-size: var(--fs-sm); padding-block: 0.35rem; }

.chip-row { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; }
.chip {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.25rem 0.6rem; border-radius: var(--r-full);
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  font-size: var(--fs-sm); color: var(--c-ink-2);
}
.chip:hover { border-color: var(--c-danger); color: var(--c-danger); text-decoration: none; }
.chip-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-3); }
.chip:hover .chip-label { color: inherit; }
.chip-value { font-weight: 650; }
.chip-x { font-size: var(--fs-md); line-height: 1; }

.stock-count { color: var(--c-ink-3); font-weight: 500; }
.stock-count::before { content: "· "; }
.product-price-hidden { font-size: var(--fs-base); font-family: var(--font-sans); color: var(--c-ink-2); font-weight: 600; }

/* ---------- Product detail ---------- */
.gallery-main .placeholder { color: var(--c-ink-3); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: contain; }
.pdp-summary h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.pdp-idline { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); color: var(--c-ink-3); margin-bottom: var(--sp-3); }
.pdp-idline .sep { color: var(--c-border-strong); }
.pdp-lede { color: var(--c-ink-2); margin-bottom: 0; }
.price-block { border: 1px solid var(--c-border); }
.price-block .price { margin: 0; color: var(--c-ink); }
.price-block .price .was { font-size: var(--fs-lg); color: var(--c-ink-3); text-decoration: line-through; font-weight: 400; margin-left: var(--sp-2); }
.price-request { font-size: var(--fs-xl) !important; font-family: var(--font-sans) !important; }
.price-note { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-ink-3); }
.price-stock { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0 0; font-size: var(--fs-base); }
.pdp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.pdp-actions .btn { flex: 1 1 12rem; }
.pdp-nocheckout { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* No vertical rules here, so the column separation is a grid gap and the cells
   carry no inline padding at all — outer edges stay flush with the container
   and every fact sits the same distance from its neighbour. */
.pdp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 var(--sp-5); margin: 0; border-top: 1px solid var(--c-border); }
.pdp-facts > div { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); }
.pdp-facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-3); font-weight: 700; }
.pdp-facts dd { margin: var(--sp-1) 0 0; font-weight: 600; }

.pdp-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--sp-7); align-items: start; margin-top: var(--sp-7); }
.pdp-specs h2, .pdp-description h2 { font-size: var(--fs-lg); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-ink); }
.spec-table tbody tr:nth-child(odd) { background: var(--c-surface-2); }
.spec-table th, .spec-table td { padding-inline: var(--sp-3); }

/* ---------- Prose (page bodies, product descriptions) ---------- */
.prose { max-width: 72ch; color: var(--c-ink-2); }
.prose h2 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
.prose h3 { font-size: var(--fs-md); margin-top: var(--sp-4); }
.prose ul, .prose ol { padding-left: 1.2rem; margin-bottom: var(--sp-4); }
.prose li { margin-bottom: var(--sp-2); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); }
.prose th, .prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--c-border); text-align: left; }
.page-updated { font-size: var(--fs-sm); margin-top: var(--sp-6); }

/* ---------- Enquiry form ---------- */
.enquiry-panel {
  margin-top: var(--sp-6); padding: var(--sp-5);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent); border-radius: var(--r-md);
}
.enquiry-panel h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.enquiry-panel > p { margin-bottom: var(--sp-4); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--sp-4); }
.enquiry-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.req { color: var(--c-danger); }
/* Honeypot: kept in the layout but off-screen and out of the tab order. */
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Search ---------- */
.search-again { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); max-width: 34rem; }
.search-again input { flex: 1; }
.search-term { font-size: 0.9em; color: var(--c-brand-dark); }
.suggestions { margin-top: var(--sp-6); }
.suggestions .kicker { margin-bottom: var(--sp-3); }

/* ---------- Contact & content pages ---------- */
.contact-grid, .content-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; padding-bottom: var(--sp-7); }
.contact-grid .enquiry-panel { margin-top: 0; }
.contact-aside, .content-aside { display: grid; gap: var(--sp-4); position: sticky; top: 7rem; }
.contact-card { padding: var(--sp-4) var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.contact-card h2 { margin-bottom: var(--sp-3); }
.contact-card p:last-child { margin-bottom: 0; }
.contact-card-quiet { background: var(--c-surface-2); }
.address-block { font-style: normal; display: grid; gap: 0.15rem; margin-bottom: var(--sp-4); color: var(--c-ink-2); }
.address-block strong { color: var(--c-ink); }
.contact-list { margin: 0; display: grid; gap: var(--sp-3); }
.contact-list dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-3); font-weight: 700; }
.contact-list dd { margin: 0.1rem 0 0; font-weight: 600; }
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-base); color: var(--c-ink-2); }
.tick-list li { position: relative; padding-left: 1.4rem; }
.tick-list li::before { content: "✓"; position: absolute; left: 0; color: var(--c-brand); font-weight: 700; }

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .pdp-lower { grid-template-columns: 1fr; gap: var(--sp-6); }
  .contact-grid, .content-grid { grid-template-columns: 1fr; }
  .contact-aside, .content-aside { position: static; }
}

@media (max-width: 991.98px) {
  /* Inside the drawer the body itself scrolls; a nested scroll box would trap the gesture. */
  .facet-list { max-height: none; overflow-y: visible; }
}

@media (max-width: 900px) {
}

/* ---------- Responsive: phones down to 360px ---------- */
@media (max-width: 560px) {
  .page-head-main { flex-direction: column; align-items: stretch; }
  .page-head h1 { font-size: var(--fs-xl); }
  .hero { padding-block: var(--sp-6); }
  .hero h1 { font-size: var(--fs-xl); }
  .hero p { font-size: var(--fs-md); }
  .hero-actions .btn { flex: 1 1 100%; }
  .section-head { flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
  .product-body { padding: var(--sp-3); }
  .product-name { font-size: var(--fs-sm); }
  .product-price { font-size: var(--fs-md); }
  .cat-tiles { grid-template-columns: 1fr; }
  .pdp-actions .btn { flex: 1 1 100%; }
  .pdp-facts { grid-template-columns: 1fr; }
  .enquiry-panel { padding: var(--sp-4); }
  .search-again { flex-direction: column; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .spec-table th { width: 45%; }
  .gallery-main { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Hero motion — brand rail and first-visit reveal
   --------------------------------------------------------------------------
   Everything here animates transform/opacity only, so the work stays on the
   compositor and never triggers layout or paint. No JavaScript runs per frame.
   ========================================================================== */

.hero { position: relative; isolation: isolate; }

/* The circuit canvas sits behind the copy but above the flat black ground.
   pointer-events:none so it never intercepts a click on the hero buttons. */
.hero-canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
  opacity: 1;
  /* No CSS mask here on purpose. A mask over a canvas that repaints every
     frame forces a full compositing pass per frame. The board is drawn evenly
     across the whole hero; legibility is handled by .hero-scrim below, which
     is a static layer the compositor never has to re-rasterise. */
}
@media (max-width: 991.98px) { .hero-canvas { opacity: .9; } }

/* A soft dark wash sitting between the circuit and the copy. This is what
   keeps the headline readable now that the board runs the full width — one
   static gradient instead of hiding half the artwork. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(68% 78% at 20% 46%, rgba(0,0,0,.60) 0%, rgba(0,0,0,.34) 48%, transparent 74%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 28%, transparent 74%, rgba(0,0,0,.30) 100%);
}
@media (max-width: 991.98px) {
  .hero-scrim {
    /* Lighter on phones too — the copy sits on near-black already, so it only
       needs enough wash to stop a pulse tracking straight through a word. */
    background: linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.30) 50%, rgba(0,0,0,.52) 100%);
  }
}

/* A slow red bloom behind the headline. Single composited layer, 24s loop. */
.hero-glow {
  position: absolute; z-index: -1; top: -30%; left: 45%;
  width: min(70vw, 780px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(228,28,33,.30) 0%, rgba(228,28,33,.10) 42%, transparent 68%);
  filter: blur(28px);
  transform: translate3d(0,0,0) scale(1);
  animation: heroGlow 24s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
@keyframes heroGlow {
  0%, 100% { transform: translate3d(0,0,0) scale(1);      opacity: .75; }
  50%      { transform: translate3d(-4%,3%,0) scale(1.12); opacity: 1;   }
}

/* ---- Brand rail -------------------------------------------------------- */
.brand-rail-label {
  margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
.brand-rail {
  position: relative; margin-top: var(--sp-7); padding: var(--sp-4) 0 var(--sp-2);
  border-top: 1px solid rgba(255,255,255,.14);
}
/* The fade belongs to the scrolling strip only — masking the whole rail also
   faded the heading above it. */
.brand-rail-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.brand-rail-track {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.25rem);
  width: max-content; padding-block: .25rem;
  /* The track holds two identical passes, so translating by exactly -50%
     lands on the duplicate and the loop is seamless. */
  animation: brandScroll var(--rail-duration, 42s) linear infinite;
  will-change: transform;
}
@keyframes brandScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.brand-rail:hover .brand-rail-track,
.brand-rail:focus-within .brand-rail-track { animation-play-state: paused; }

/* Each brand sits on a light tile: uploaded logos are full-colour artwork on
   their own backgrounds, which would clash with the dark hero, and the glyph
   brands share the same tile so the strip reads as one set. */
.brand-chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.75rem; min-width: 6.5rem; padding: 0 var(--sp-4);
  color: var(--c-ink); background: var(--c-surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform var(--transition), opacity var(--transition);
}
.brand-chip:hover, .brand-chip:focus-visible { color: var(--c-ink); text-decoration: none; transform: translateY(-2px); }
.brand-chip:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.brand-glyph { width: 22px; height: 22px; flex: none; display: block; }
.brand-chip-name { font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; }
/* Wordmark glyphs spell the brand themselves: shown alone, sized by height. */
.brand-wordmark { display: block; flex: none; width: auto; height: 1.15rem; }
.brand-chip-logo { display: block; width: auto; height: 1.9rem; max-width: 7.5rem; object-fit: contain; }
.brand-name {
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em;
  white-space: nowrap; text-transform: uppercase;
}

/* ---- First-visit reveal ------------------------------------------------
   The hero renders in its final position by default. Only when app.js adds
   .is-first-visit (once per browser) do the pieces animate in, so returning
   visitors get an instant page and no layout shift either way.            */
.reveal { opacity: 1; transform: none; }
.is-first-visit .reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: revealIn .62s cubic-bezier(.22,.68,.28,1) forwards;
  animation-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
@keyframes revealIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* Release the compositor hint once the intro is done. */
.is-first-visit .reveal { animation-fill-mode: forwards; }

@media (max-width: 575.98px) {
  .brand-glyph { width: 18px; height: 18px; }
  .brand-chip { height: 2.4rem; min-width: 5.5rem; padding: 0 var(--sp-3); }
  .brand-chip-name { font-size: var(--fs-xs); }
  .brand-wordmark { height: 1rem; }
  .brand-chip-logo { height: 1.6rem; max-width: 6.25rem; }
  .brand-rail { margin-top: var(--sp-5); }
  .brand-rail-track { animation-duration: calc(var(--rail-duration, 42s) * .8); }
}

/* Motion is decoration: honour the OS setting and drop all of it. */
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
  .brand-rail-track { animation: none; }
  .is-first-visit .reveal { opacity: 1; transform: none; animation: none; }
}


/* ==========================================================================
   Module A — responsive hardening (Bootstrap 5)
   Nothing above this line, and nothing in the hero/brand-rail block, is
   changed by this section: it only adds the small-screen behaviour the
   storefront pages need. Layout-only properties; no animation is introduced.
   ========================================================================== */

/* ---------- Filter rail as an offcanvas drawer below lg ---------- */
.filters.offcanvas-lg { --bs-offcanvas-width: min(22rem, 88vw); }
.filters .offcanvas-header { border-bottom: 1px solid var(--c-border); }
.filters .offcanvas-title { font-size: var(--fs-lg); margin: 0; }
/* From lg up the offcanvas shell is inert, so strip its padding and let the
   rail render exactly as the static sidebar it was before. */
@media (min-width: 992px) {
  .filters .offcanvas-body { padding: 0; overflow: visible; }
}
@media (max-width: 991.98px) {
  .filters .offcanvas-body { padding: var(--sp-4); }
  /* The offcanvas header already reads "Filters"; keep only the reset link. */
  .filters .filter-head { justify-content: flex-end; margin-top: calc(var(--sp-2) * -1); }
  .filters .filter-head .kicker { display: none; }
  /* Touch targets: a checkbox row must be comfortably tappable. */
  .filter-group label { min-height: 2.5rem; padding-block: var(--sp-2); }
  .facet-links li { min-height: 2.5rem; align-items: center; }
  .facet-links a { padding-block: var(--sp-2); }
  .filter-actions .btn { min-height: 2.75rem; }
}
.filters-toggle { align-items: center; gap: var(--sp-2); }
.filters-toggle .badge { font-family: var(--font-mono); }

/* ---------- Results toolbar: count and sort never collide ---------- */
.results-toolbar { row-gap: var(--sp-2); }
.sort-control select { max-width: 100%; }
/* flex-basis is a width only while the toolbar is a row — hence the min-width
   guard, or the count would claim 12rem of *height* once it stacks. */
@media (min-width: 576px) {
  .result-count { flex: 1 1 12rem; min-width: 0; }
  .sort-control { flex: 0 1 auto; min-width: 0; }
}
@media (max-width: 575.98px) {
  .results-toolbar { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .result-count, .sort-control { flex: 0 0 auto; }
  .sort-control { width: 100%; }
  .sort-control select { flex: 1 1 auto; min-width: 0; }
}

/* ---------- Active-filter chips ---------- */
.chip-row { max-width: 100%; }
.chip { max-width: 100%; flex-wrap: wrap; }
.chip-value { overflow-wrap: anywhere; }

/* ---------- Long identifiers must wrap, never widen the page ---------- */
.product-name, .product-sku, .pdp-summary h1, .pdp-idline, .pdp-idline .mono,
.spec-table td, .spec-table th, .breadcrumbs li, .contact-list dd, .address-block,
.search-term, .page-head h1 { overflow-wrap: anywhere; }
.pdp-idline .mono { min-width: 0; }
/* The echoed query is user input of arbitrary length. */
.search-term { display: inline-block; max-width: 100%; }
.spec-table { table-layout: fixed; }
.spec-table td.mono { word-break: break-word; }

/* ---------- Product detail on phones: image first, then the buying panel --- */
@media (max-width: 991.98px) {
  .product-detail { gap: var(--sp-5); }
  .gallery { order: -1; }            /* explicit, even though DOM order already leads with it */
  .pdp-actions .btn { min-height: 2.75rem; }
}
@media (max-width: 575.98px) {
  .gallery-main img { padding: var(--sp-4); }
  .gallery-thumbs button { width: 56px; height: 56px; }
}
/* Keep the gallery in view while the specification list scrolls, on desktop only. */
@media (min-width: 1200px) {
  .product-detail .gallery { position: sticky; top: 7rem; }
}

/* ---------- Search ---------- */
@media (max-width: 575.98px) {
  .search-again .btn { min-height: 2.75rem; }
}

/* ---------- Contact and content pages ---------- */
/* Fields are laid out by Bootstrap's grid, so the per-field margin would double
   the row gutter. */
.enquiry-fields .field { margin-bottom: 0; }
.enquiry-panel { max-width: 60rem; }
.enquiry-actions { margin-top: var(--sp-5); }
.enquiry-panel textarea { min-height: 8rem; }
@media (max-width: 575.98px) {
  .enquiry-actions .btn { width: 100%; }
  .enquiry-actions { align-items: flex-start; }
}

/* ---------- Prose: admin-authored HTML we do not control ---------- */
.prose { overflow-wrap: break-word; }
.prose img { max-width: 100%; height: auto; }
.prose pre, .prose code { overflow-wrap: anywhere; }
.prose pre { overflow-x: auto; }
/* shop.js wraps prose tables in .table-responsive; this is the no-JS fallback. */
.prose table { display: block; max-width: 100%; overflow-x: auto; }
.prose .table-responsive > table { display: table; }

/* ---------- Trust band: keep the dividers honest when the row wraps ---------
   The lead's symmetric-inset fix assumes one row: `:first-child`/`:last-child`
   are DOM-positional, so an auto-fit wrap (three cells at 768px, one below)
   left the wrapped cell with a stray left rule and a lopsided inset. Stating
   the column count per breakpoint means "first in row" is knowable. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .trust-band ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-band li:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .trust-band li:nth-child(2n)   { padding-right: 0; }
  .trust-band li:nth-child(n+3)  { border-top: 1px solid var(--c-border); }
}
@media (min-width: 992px) {
  .trust-band ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Last-resort guards against a sideways scroll ---------- */
.catalogue > .results { min-width: 0; }
.page-head-main > div { min-width: 0; }
.results-toolbar, .product-card, .product-body { min-width: 0; }

/* ==========================================================================
   Customer account area (/account/**)
   --------------------------------------------------------------------------
   Appended by the account module. Nothing above this line is modified.
   Layout only — no animation is introduced, so the 60fps budget is untouched.
   ========================================================================== */

/* ---------- Shell: sub-nav rail beside the content, stacked on phones ------ */
.acct-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  padding-bottom: var(--sp-7);
}
.acct-main { min-width: 0; }

.acct-nav {
  position: sticky; top: 7rem;
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  background: var(--c-surface); box-shadow: var(--shadow-1);
  padding: var(--sp-4);
}
.acct-nav-who { margin: 0 0 var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); display: grid; gap: 0.1rem; }
.acct-nav-name { font-weight: 650; overflow-wrap: anywhere; }
.acct-nav-email { font-size: var(--fs-sm); color: var(--c-ink-3); overflow-wrap: anywhere; }
.acct-nav-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: 2px; }
.acct-nav-list a {
  display: block; padding: 0.55rem var(--sp-3); border-radius: var(--r-md);
  color: var(--c-ink-2); font-weight: 550; border-left: 3px solid transparent;
}
.acct-nav-list a:hover { background: var(--c-surface-2); color: var(--c-ink); text-decoration: none; }
.acct-nav-list a.is-active { background: var(--c-brand-soft); color: var(--c-brand-dark); border-left-color: var(--c-brand); }
.acct-nav-out { margin: 0; }

/* ---------- Cards ---------- */
.acct-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-5); min-width: 0;
}
.acct-card-quiet { background: var(--c-surface-2); }
.acct-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.acct-card-head h2 { margin: 0; font-size: var(--fs-lg); }
.acct-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); }
.acct-head-actions { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* ---------- Sign-in / register / reset pages ---------- */
.acct-auth {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-6); align-items: start; padding-bottom: var(--sp-7);
}
.acct-auth-narrow { max-width: 30rem; }
.acct-auth-aside { display: grid; gap: var(--sp-4); }
.acct-auth-alt { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--c-ink-3); }
.acct-auth-guest {
  margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm); color: var(--c-ink-3);
}
.acct-form-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3); margin-top: var(--sp-5);
}
/* Bootstrap's grid supplies the row gutter, so per-field margins would double it. */
.acct-auth-form .row .field, .acct-card .row .field { margin-bottom: 0; }
.acct-optin { align-items: flex-start; }

/* ---------- Detail lists ---------- */
.acct-details { margin: 0; display: grid; gap: var(--sp-3); }
.acct-details dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-3); font-weight: 700; }
.acct-details dd { margin: 0.15rem 0 0; font-weight: 550; }
.acct-wrap { overflow-wrap: anywhere; }
.acct-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.acct-links a { display: block; padding: 0.45rem 0; border-bottom: 1px solid var(--c-border); color: var(--c-ink-2); }
.acct-links li:last-child a { border-bottom: 0; }
.acct-links a:hover { color: var(--c-brand); }

/* ---------- Open orders ---------- */
.acct-open-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.acct-open-item {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  padding: var(--sp-4); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-brand); border-radius: var(--r-md);
  background: var(--c-surface);
}
.acct-open-main { min-width: 0; flex: 1 1 16rem; }
.acct-open-side { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.acct-ref { font-family: var(--font-mono); font-weight: 650; overflow-wrap: anywhere; }
.acct-open-note { margin: var(--sp-1) 0 0; color: var(--c-ink-2); }
.acct-open-meta { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-ink-3); }
.acct-open-total { font-family: var(--font-mono); font-weight: 700; }

/* ---------- Order tables ---------- */
.acct-cell-ref { font-family: var(--font-mono); font-weight: 600; overflow-wrap: anywhere; }
.acct-cell-item { font-weight: 550; min-width: 12rem; }
.acct-sku { display: block; font-size: var(--fs-xs); color: var(--c-ink-3); overflow-wrap: anywhere; }
.acct-rate { display: block; font-size: var(--fs-xs); }
.acct-pay-note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }

/* Order totals: their own block under the table, never inside its scroll box. */
.acct-totals { margin: var(--sp-4) 0 0; margin-left: auto; max-width: 22rem; display: grid; gap: var(--sp-2); }
.acct-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.acct-totals dt { color: var(--c-ink-2); }
.acct-totals dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 650; }
.acct-totals-grand { padding-top: var(--sp-2); border-top: 2px solid var(--c-ink); font-size: var(--fs-lg); }
.acct-totals-grand dt { color: var(--c-ink); font-weight: 650; }
.acct-totals-grand dd { font-weight: 720; }
.acct-order-title { font-family: var(--font-mono); overflow-wrap: anywhere; }
.acct-stat-date { font-size: var(--fs-lg); }

/* ---------- Status timeline ---------- */
.acct-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--sp-5); position: relative; display: grid; gap: var(--sp-4); }
.acct-timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--c-border);
}
.acct-timeline-item { position: relative; min-width: 0; }
.acct-timeline-item::before {
  content: ""; position: absolute; left: calc(var(--sp-5) * -1); top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-surface); border: 2px solid var(--c-border-strong);
}
.acct-timeline-item.is-cancelled::before { border-color: var(--c-danger); }
.acct-timeline-item.is-collected::before { border-color: var(--c-ok); }
.acct-timeline-item.is-ready::before { border-color: var(--c-brand); }
.acct-timeline-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.acct-timeline-head time { font-size: var(--fs-sm); color: var(--c-ink-3); font-family: var(--font-mono); }
.acct-timeline-note { margin: var(--sp-1) 0 0; color: var(--c-ink-2); overflow-wrap: anywhere; }
.acct-timeline-actor { margin: 0.1rem 0 0; font-size: var(--fs-sm); }

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
  .acct-shell { grid-template-columns: 1fr; gap: var(--sp-4); }
  .acct-auth { grid-template-columns: 1fr; }
  .acct-auth-narrow { max-width: none; }
  /* The rail becomes a strip above the content; sticky would cover the page. */
  .acct-nav { position: static; display: grid; gap: var(--sp-3); }
  .acct-nav-who { margin-bottom: 0; }
  .acct-nav-list {
    grid-auto-flow: column; grid-auto-columns: minmax(7rem, 1fr);
    gap: var(--sp-2); margin-bottom: 0; overflow-x: auto;
  }
  .acct-nav-list a {
    text-align: center; border-left: 0; border-bottom: 3px solid transparent;
    min-height: 2.75rem; display: flex; align-items: center; justify-content: center;
  }
  .acct-nav-list a.is-active { border-left: 0; border-bottom-color: var(--c-brand); }
  /* Touch targets: everything tappable clears 40px from tablet down. */
  .acct-nav-out .btn,
  .acct-form-actions .btn,
  .acct-head-actions .btn,
  .acct-open-side .btn { min-height: 2.75rem; }
}

/* ---------- Phones down to 360px ---------- */
@media (max-width: 575.98px) {
  .acct-card { padding: var(--sp-4); }
  .acct-shell, .acct-auth { padding-bottom: var(--sp-6); }
  .acct-split { grid-template-columns: 1fr; }
  .acct-form-actions { flex-direction: column; align-items: stretch; }
  .acct-form-actions .btn { width: 100%; }
  .acct-head-actions .btn { flex: 1 1 100%; }
  .acct-open-item { flex-direction: column; align-items: stretch; }
  /* flex-basis is a width only while the item is a row; once it stacks, the
     16rem basis becomes 16rem of empty HEIGHT under the text. */
  .acct-open-main { flex: 0 0 auto; }
  .acct-open-side { justify-content: space-between; }
  /* Three short tabs fit across a 360px screen if they may shrink; a fixed
     minimum turned the strip into a swipe for something always visible. */
  .acct-nav-list { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; }
  .acct-nav-list a { padding-inline: var(--sp-1); font-size: var(--fs-sm); }
  /* Four stat tiles in one column read as a wall; two-up keeps them scannable. */
  .acct-shell .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .acct-stat-date { font-size: var(--fs-md); }
  .acct-timeline { padding-left: var(--sp-4); }
  .acct-timeline-item::before { left: calc(var(--sp-4) * -1); }
}

/* ==========================================================================
   Module — basket and checkout (appended section; nothing above is modified)

   Reserve-and-collect, not e-commerce: there is no payment step to style, so
   the weight goes on the totals and on saying, repeatedly and plainly, that
   nothing is being charged. Motion is limited to opacity/transform.
   ========================================================================== */

/* ---------- Header basket ------------------------------------------------ */
.site-cart {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-3);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-full);
  color: var(--c-ink); font-weight: 600; font-size: var(--fs-base);
  background: var(--c-surface); white-space: nowrap;
  transition: border-color var(--transition), color var(--transition);
}
.site-cart:hover { border-color: var(--c-brand); color: var(--c-brand); text-decoration: none; }
.site-cart svg { width: 20px; height: 20px; flex: none; }
.site-cart-count {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem;
  padding-inline: 0.3rem; border-radius: var(--r-full);
  background: var(--c-brand); color: var(--c-brand-ink);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}
/* The label is the first thing to go when the header row gets tight. */
@media (max-width: 767.98px) {
  .site-cart-label { display: none; }
  .site-header-main { gap: var(--sp-3); }   /* room for the fourth control */
  .site-cart { padding-inline: var(--sp-2); }
}
/* Below ~390px the header row wraps; right-align the basket so the wrapped
   line reads as deliberate rather than as a stray control. */
@media (max-width: 575.98px) { .site-cart { margin-left: auto; } }

/* ---------- Quantity stepper (shared by the product page and the basket) --- */
.qty-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); overflow: hidden;
}
.qty-step {
  min-width: 44px; min-height: 44px; padding: 0;
  border: 0; background: var(--c-surface-2); color: var(--c-ink);
  font-size: var(--fs-lg); font-weight: 700; line-height: 1; cursor: pointer;
  transition: background-color var(--transition);
}
.qty-step:hover { background: var(--c-surface-3); }
.qty-step:disabled { opacity: .5; cursor: default; }
.qty-input {
  width: 4rem; min-height: 44px; text-align: center;
  border: 0; border-inline: 1px solid var(--c-border-strong); border-radius: 0;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.qty-input:focus { box-shadow: none; border-color: var(--c-brand); }
/* Native spinners are redundant once the steppers are live and too small to hit. */
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input { -moz-appearance: textfield; appearance: textfield; }

/* ---------- Add to basket ------------------------------------------------ */
.add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.add-to-cart-submit { flex: 1 1 12rem; min-height: 44px; }
.card-add { margin-top: var(--sp-2); }
.card-add .btn { min-height: 40px; }
form.is-busy { opacity: .65; }

/* ---------- Basket page -------------------------------------------------- */
.cart-page { padding-bottom: var(--sp-7); }
.cart-layout { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 992px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 21rem; } }
@media (min-width: 1200px) { .cart-aside { position: sticky; top: 7rem; } }

.cart-empty { padding: var(--sp-4); }
.cart-notice { margin-bottom: var(--sp-4); }
.cart-notice-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; font-size: var(--fs-sm); }
.cart-notice-list li { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0.15rem 0; }
.cart-notice-name { font-weight: 650; overflow-wrap: anywhere; }
.cart-notice-foot { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); }

.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: grid; grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line-media {
  grid-column: 1; grid-row: 1;
  display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 1; background: var(--c-surface-2); border-radius: var(--r-md);
}
.cart-line-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-2); }
.cart-line-media .placeholder { font-size: var(--fs-xs); color: var(--c-ink-3); text-align: center; padding: var(--sp-1); }
.cart-line-body { grid-column: 2; grid-row: 1; min-width: 0; }
.cart-line-name { font-size: var(--fs-base); font-weight: 650; margin: 0 0 var(--sp-1); overflow-wrap: anywhere; }
.cart-line-name a { color: inherit; }
.cart-line-name a:hover { color: var(--c-brand); }
.cart-line-meta { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-3); overflow-wrap: anywhere; }
.cart-line-meta .sep { margin-inline: var(--sp-1); }
.cart-line-stock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-sm); }
.cart-line-qty { grid-column: 1 / -1; grid-row: 2; }
.qty-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.qty-apply { min-height: 40px; }
.cart-line-money {
  grid-column: 1 / -1; grid-row: 3;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.cart-line-total { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; }
.cart-line-remove { min-height: 40px; color: var(--c-ink-3); }
.cart-line-remove:hover { color: var(--c-danger); }
.cart-lines-foot { display: flex; justify-content: flex-start; }

@media (min-width: 768px) {
  .cart-line { grid-template-columns: 80px minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--sp-5); }
  .cart-line-qty { grid-column: 3; grid-row: 1; }
  .cart-line-money { grid-column: 4; grid-row: 1; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
}

/* ---------- Totals block (basket, checkout, confirmation) ---------------- */
.cart-totals { margin: 0 0 var(--sp-4); }
.cart-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 0.4rem 0; }
.cart-totals dt { color: var(--c-ink-2); font-size: var(--fs-base); font-weight: 400; }
/* An amount never breaks mid-figure; the label beside it wraps instead. */
.cart-totals dd { margin: 0; font-weight: 650; white-space: nowrap; flex-shrink: 0; text-align: right; }
.cart-totals-grand { border-top: 1px solid var(--c-border); margin-top: var(--sp-2); padding-top: var(--sp-3) !important; }
.cart-totals-grand dt { font-weight: 650; color: var(--c-ink); }
.cart-totals-grand dd { font-size: var(--fs-xl); letter-spacing: -0.02em; }

.cart-checkout { min-height: 48px; align-items: center; justify-content: center; }
.cart-reserve-note, .checkout-submit-note, .checkout-notice, .cart-guest-note {
  margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-ink-3);
}
.cart-reserve-note strong { color: var(--c-ink); display: block; }

/* ---------- Checkout ----------------------------------------------------- */
.checkout-page { padding-bottom: var(--sp-7); }
.checkout-nopay { margin-bottom: var(--sp-5); }
.checkout-nopay strong { display: block; }
/* Quieter than the alert above it: an option, not a warning. */
.checkout-guest-note {
  margin: 0 0 var(--sp-5); font-size: var(--fs-sm); color: var(--c-ink-3);
}
.checkout-layout { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 992px) { .checkout-layout { grid-template-columns: minmax(0, 1fr) 22rem; } }
@media (min-width: 1200px) { .checkout-aside { position: sticky; top: 7rem; } }

.checkout-fulfilment { margin-top: var(--sp-5); }
.fulfilment-option {
  align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); min-height: 44px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--transition), background-color var(--transition);
}
.fulfilment-option + .fulfilment-option { margin-top: var(--sp-2); }
.fulfilment-option:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); }
.fulfilment-option:has(input:checked) { border-color: var(--c-brand); background: var(--c-brand-soft); }
.fulfilment-option strong { display: block; }
.fulfilment-option .muted { display: block; font-size: var(--fs-sm); }
.checkout-address { margin-top: var(--sp-4); }
.checkout-collect {
  margin: var(--sp-5) 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-2); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--c-ink-2);
}
.checkout-collect strong { color: var(--c-ink); }

.checkout-items { list-style: none; margin: 0 0 var(--sp-4); padding: 0 0 var(--sp-3); border-bottom: 1px solid var(--c-border); }
.checkout-items li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 0.3rem 0; font-size: var(--fs-sm); }
.checkout-item-name { min-width: 0; overflow-wrap: anywhere; }
.checkout-item-qty { color: var(--c-ink-3); margin-right: 0.35rem; }
/* Product links inside a summary are references, not calls to action. */
.checkout-items a { color: inherit; }
.checkout-items a:hover { color: var(--c-brand); }
.checkout-submit { min-height: 48px; align-items: center; justify-content: center; }
.checkout-notice { border-top: 1px solid var(--c-border); padding-top: var(--sp-3); }

/* ---------- Confirmation ------------------------------------------------- */
.done-page { padding-bottom: var(--sp-7); }
.done-hero { text-align: center; padding: var(--sp-7) 0 var(--sp-6); }
.done-tick {
  display: inline-grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--c-ok-soft); color: var(--c-ok);
  margin-bottom: var(--sp-4);
}
.done-tick svg { width: 28px; height: 28px; }
.done-lede { color: var(--c-ink-2); max-width: 52ch; margin: var(--sp-2) auto 0; }
.done-ref { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--c-ink-3); }
.done-ref strong { display: block; font-size: var(--fs-2xl); color: var(--c-ink); letter-spacing: 0.02em; overflow-wrap: anywhere; }

.done-layout { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 992px) { .done-layout { grid-template-columns: minmax(0, 1fr) 22rem; } }

.done-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--sp-4); }
.done-steps li { padding-left: var(--sp-1); color: var(--c-ink-2); }
.done-steps strong { display: block; color: var(--c-ink); }
.done-address { overflow-wrap: anywhere; }
.done-nopay {
  margin: var(--sp-5) 0 0; padding: var(--sp-4);
  background: var(--c-surface-2); border-left: 3px solid var(--c-brand); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--c-ink-2);
}
.done-nopay strong { display: block; color: var(--c-ink); }
.done-notice, .done-guest-note { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--c-ink-3); }
.done-guest { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
.done-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.done-actions .btn { min-height: 44px; align-items: center; }
.done-facts { margin: var(--sp-4) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--c-border); display: grid; gap: var(--sp-3); }
.done-facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-ink-3); font-weight: 650; }
.done-facts dd { margin: 0.15rem 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* ---------- Phones: full-width controls, nothing sideways ---------------- */
@media (max-width: 575.98px) {
  .cart-line { padding: var(--sp-4) var(--sp-4); }
  .cart-lines-foot .btn, .done-actions .btn { width: 100%; }
  .add-to-cart-submit { flex-basis: 100%; }
  .qty-form { width: 100%; }
  .cart-line-qty .qty-stepper { flex: 1 1 auto; }
  .cart-line-qty .qty-input { flex: 1 1 auto; width: auto; }
}

/* The quote button and the basket are one action cluster, so they wrap together
   rather than the basket dropping onto a row of its own on a phone. */
.site-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; margin-left: auto; }
@media (max-width: 767.98px) {
  .site-actions { margin-left: 0; }
  .site-actions .btn { padding-inline: var(--sp-3); }
}

/* Account link in the header action cluster, matching the basket control. */
.site-account {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .45rem .7rem; border-radius: var(--r-full);
  border: 1px solid var(--c-border); background: #fff;
  color: var(--c-ink); font-size: var(--fs-sm); font-weight: 600;
  min-height: 40px; white-space: nowrap;
}
.site-account:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); text-decoration: none; }
.site-account svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 575.98px) { .site-account-label { display: none; } }


/* ==========================================================================
   Home: Mac repairs, product carousel and questions
   ========================================================================== */

/* ---------- Mac repair services ---------- */
.band-lede { color: var(--c-ink-2); max-width: 70ch; margin: calc(-1 * var(--sp-2)) 0 var(--sp-5); }
.repair-grid { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 576px)  { .repair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .repair-grid { gap: var(--sp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.repair-card {
  display: flex; flex-direction: column; gap: var(--sp-2); height: 100%;
  padding: var(--sp-5); color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.repair-card:hover { text-decoration: none; border-color: var(--c-brand); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.repair-card h3 { margin: 0; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.repair-card p { margin: 0; color: var(--c-ink-2); }
.repair-card-link { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 650; color: var(--c-brand); }

/* ---------- Home: product carousel ---------- */
.rail .section-head { flex-wrap: wrap; align-items: center; }
.rail-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rail-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1; color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-full);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.rail-btn:hover { border-color: var(--c-brand); color: var(--c-brand); }
.rail-btn:active { transform: scale(.94); }
.rail-btn svg { width: 18px; height: 18px; }
/* Same column count as .product-grid at every width, laid out as one scrolling row. */
.rail-track {
  --rail-gap: var(--sp-3); --rail-cols: 2;
  position: relative; /* absolutely placed card bits (sr-only labels) stay inside the scroller */
  display: grid; grid-auto-flow: column; gap: var(--rail-gap);
  grid-auto-columns: calc((100% - (var(--rail-cols) - 1) * var(--rail-gap)) / var(--rail-cols));
  list-style: none; margin: 0; padding: 0 0 var(--sp-3);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.rail-track:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 4px; }
.rail-track > li { display: flex; min-width: 0; scroll-snap-align: start; }
.rail-track > li > .product-card { flex: 1; min-width: 0; }
@media (min-width: 768px)  { .rail-track { --rail-gap: var(--sp-4); --rail-cols: 3; } }
@media (min-width: 1200px) { .rail-track { --rail-cols: 4; } }
@media (min-width: 1600px) { .rail-track { --rail-cols: 5; } }
@media (min-width: 1900px) { .rail-track { --rail-cols: 6; } }
@media (min-width: 2400px) { .rail-track { --rail-cols: 7; } }

/* ---------- Home: questions ---------- */
.faq-list { max-width: 72rem; border-top: 1px solid var(--c-border); }
.faq-list details { border-bottom: 1px solid var(--c-border); }
.faq-list summary { padding-block: var(--sp-4); font-size: var(--fs-md); font-weight: 650; cursor: pointer; }
.faq-list summary:hover { color: var(--c-brand); }
.faq-list details p { margin: 0 0 var(--sp-4); color: var(--c-ink-2); max-width: 72ch; }

@media (prefers-reduced-motion: reduce) {
  .repair-card, .rail-btn { transition: none; }
  .repair-card:hover, .rail-btn:active { transform: none; }
}