/* 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; }
/* Social accounts (partials/social.php), in the footer: each network's own
   full-colour logo straight on the dark footer, lifting and glowing on hover. */
.social-links { display: inline-flex; align-items: center; gap: var(--sp-2); }
.social-links .social-link { display: inline-flex; align-items: center; justify-content: center; transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), filter .2s ease; }
.social-links svg { width: 22px; height: 22px; display: block; }
.site-footer .footer-social { margin-top: var(--sp-3); gap: var(--sp-4); }
.site-footer .footer-social .social-link { width: 2rem; height: 2rem; padding: 0; }
.site-footer .footer-social .social-link:hover,
.site-footer .footer-social .social-link:focus-visible { transform: translateY(-3px) scale(1.08); filter: drop-shadow(0 4px 10px rgba(255, 255, 255, .18)); }
.site-footer .footer-social .social-link:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .social-links .social-link { transition: none; transform: none !important; } }
.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 h3, .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); }
/* Videos: a thumbnail (YouTube's still, or a play mark) opens the full-screen player. */
.gallery-thumbs .gallery-thumb-video { position: relative; width: 64px; height: 64px; display: grid; place-content: center; justify-items: center; gap: 0.1rem; overflow: hidden; background: var(--c-surface-2); color: var(--c-ink); border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: var(--fs-xs); text-decoration: none; }
.gallery-thumbs .gallery-thumb-video svg { color: var(--c-brand); }
.gallery-thumbs .gallery-thumb-video.has-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs .gallery-thumb-video.has-poster svg { position: relative; color: var(--c-surface); filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.6)); }
.gallery-thumbs .gallery-thumb-video:hover, .gallery-thumbs .gallery-thumb-video:focus-visible { border-color: var(--c-brand); box-shadow: var(--ring); }
.gallery-play { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: var(--c-ink); }
.gallery-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.gallery-play-button { position: relative; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--c-brand); color: var(--c-surface); transition: transform 0.15s ease; }
.gallery-play:hover .gallery-play-button, .gallery-play:focus-visible .gallery-play-button { transform: scale(1.08); }
.video-modal .modal-content { background: var(--c-ink); border: 0; border-radius: 0; }
.video-modal-stage { position: absolute; inset: 0; display: grid; place-items: center; }
/* Pinned to the stage: as a grid item, height: 100% has no definite track to resolve against, so a portrait clip grew past the screen. */
.video-modal-stage video, .video-modal-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: var(--c-ink); }
.video-modal-close { position: absolute; top: max(var(--sp-3), env(safe-area-inset-top)); right: max(var(--sp-3), env(safe-area-inset-right)); z-index: 2; width: 1.5rem; height: 1.5rem; padding: 0.6rem; background-color: rgb(0 0 0 / 0.55); border-radius: 50%; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gallery-play-button { transition: none; } .gallery-play:hover .gallery-play-button { transform: none; } }
.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 ---------- */

@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 ---------- */
/* One column: the hero is copy and buttons only — the counter panel that used to
   sit beside it was removed. The headline and lede keep their own measure. */
.hero-grid { display: grid; grid-template-columns: 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; }

/* ---------- 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 { 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 -------------------------------------------------------- */
/* Its own light band under the hero: each logo shows in its own colours with
   nothing behind it (no tile), so dark logos and glyphs stay readable. */
.brand-band { background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.brand-rail-label {
  margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3);
}
.brand-rail {
  position: relative; padding: var(--sp-4) 0 var(--sp-3);
}
/* 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; }

/* No tile: the logo (transparent where it had a white box) sits on the band. */
.brand-chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.75rem; padding: 0 var(--sp-3);
  color: var(--c-ink); background: transparent; border-radius: var(--r-md);
  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: var(--brand-glyph-size); height: var(--brand-glyph-size); 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: var(--brand-wordmark-height); }
.brand-chip-logo { display: block; width: auto; height: var(--brand-logo-height); 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; }
/* Visible from the very first frame, so a new visitor reads the hero at once;
   the pieces only glide the last few pixels into place, with short delays. */
.is-first-visit .reveal {
  transform: translate3d(0, 8px, 0);
  animation: revealIn .45s cubic-bezier(.22,.68,.28,1) forwards;
  animation-delay: calc(var(--d, 0ms) * .4);
}
@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; padding: 0 var(--sp-2); }
  .brand-chip-name { font-size: var(--fs-xs); }
  .brand-wordmark { height: 1rem; }
  .brand-chip-logo { height: 1.6rem; max-width: 6.25rem; }
  .brand-rail { padding-block: var(--sp-3) var(--sp-2); }
  .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, .gallery-thumbs .gallery-thumb-video { 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; }
/* Product videos in "About this part": in the description or after it, full width at 16:9. */
.video-embed { position: relative; width: 100%; max-width: 72ch; aspect-ratio: 16 / 9; margin: var(--sp-4) 0; background: var(--c-ink); border-radius: var(--r-md); overflow: hidden; }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed video { object-fit: contain; background: var(--c-ink); }
.pdp-videos { margin-top: var(--sp-4); }
.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-colour { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-3); }
.cart-line-colour strong { color: var(--c-ink); }
.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: showcase cards, product carousel and questions
   ========================================================================== */

/* ---------- Home: showcase (Mac repairs · Laptops & PC · Accessories) ----------
   Three picture cards: black, brand red and soft red. Real product photos sit in
   white frames, scattered like a stack, each bobbing on its own slow loop;
   hovering or focusing a card fans the stack out into a grid. Everything moves
   with transform/opacity only. Without JS every card is simply visible and its
   loops run; home-cards.js adds the rise-in and pauses loops while a card is off
   screen or the tab is hidden. */
/* The Pause motion button sits on the heading's line */
@media (min-width: 561px) { .showcase .section-head { align-items: center; } }
.showcase-grid {
  display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr);
  list-style: none; margin: 0; padding: 0;
}
.showcase-cell { position: relative; isolation: isolate; display: flex; min-width: 0; }
/* The deeper hover shadow lives on its own layer and only fades (no box-shadow transition). */
.showcase-cell::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: calc(var(--r-lg) * 2); box-shadow: var(--shadow-3);
  opacity: 0; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.showcase-card {
  --show-bg: var(--c-black); --show-ink: var(--c-on-black); --show-ink-2: var(--c-on-black-2);
  --show-chip-bg: rgba(255,255,255,.07); --show-chip-line: rgba(255,255,255,.16);
  --show-chip-hover-bg: var(--c-brand); --show-chip-hover-ink: var(--c-on-black);
  --show-focus: var(--c-on-black); --show-icon: var(--c-brand);
  --show-art: var(--c-brand); --show-glow: var(--c-brand); --glow-lo: .3; --glow-hi: .62;
  --show-frame-shadow: 0 22px 38px -14px rgba(0,0,0,.7), 0 4px 10px rgba(0,0,0,.35);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; flex: 1; min-width: 0;
  overflow: hidden; border-radius: calc(var(--r-lg) * 2);
  color: var(--show-ink); background: var(--show-bg);
  box-shadow: var(--shadow-2);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.showcase-card--pc {
  --show-bg: var(--c-brand); --show-ink-2: var(--c-on-black);
  --show-chip-bg: rgba(0,0,0,.16); --show-chip-line: rgba(255,255,255,.34);
  --show-chip-hover-bg: var(--c-on-black); --show-chip-hover-ink: var(--c-ink);
  --show-icon: var(--c-on-black);
  --show-art: var(--c-on-black); --show-glow: var(--c-on-black); --glow-lo: .1; --glow-hi: .24;
  --show-frame-shadow: 0 22px 38px -14px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.25);
}
.showcase-card--acc {
  --show-bg: var(--c-brand-soft); --show-ink: var(--c-ink); --show-ink-2: var(--c-ink-2);
  --show-chip-bg: var(--c-surface); --show-chip-line: var(--c-border);
  --show-focus: var(--c-ink);
  --show-art: var(--c-brand); --show-glow: var(--c-surface); --glow-lo: .7; --glow-hi: 1;
  --show-frame-shadow: 0 20px 34px -16px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.08);
  box-shadow: var(--shadow-1); border: 1px solid var(--c-border);
}

/* The picture half — its own stacking context and size container */
.showcase-stage {
  position: relative; z-index: 0; isolation: isolate; container-type: inline-size;
  height: 16.5rem; flex: none; overflow: hidden;
}
.showcase-card--pc .showcase-stage {
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 22px 22px; background-position: center;
}
.showcase-glow {
  position: absolute; left: 50%; top: 44%; width: 120%; aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--show-glow), transparent);
  opacity: var(--glow-lo); transform: translate(-50%, -50%) scale(.9);
  animation: showcase-breathe 7s ease-in-out infinite;
}
.showcase-card--pc .showcase-glow { left: 82%; top: 12%; width: 90%; }
.showcase-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--show-art); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: .38;
}
.showcase-card--acc .showcase-art { opacity: .3; }
.showcase-art-soft { stroke: var(--c-on-black); opacity: .28; }
.showcase-node, .showcase-dot { fill: var(--show-art); stroke: none; }
.showcase-node {
  opacity: .25; transform-box: fill-box; transform-origin: center;
  animation: showcase-blink 3.6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -.6s);
}
.showcase-led, .showcase-spark {
  fill: var(--c-on-black); stroke: none; opacity: .15;
  transform-box: fill-box; transform-origin: center;
}
.showcase-led { animation: showcase-led 4.2s steps(1, end) infinite; }
.showcase-spark {
  transform: scale(.4);
  animation: showcase-twinkle 5.5s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -1.9s);
}
.showcase-orbit { transform-box: view-box; transform-origin: 200px 140px; animation: showcase-spin 38s linear infinite; }
.showcase-orbit--back { animation-duration: 56s; animation-direction: reverse; }
.showcase-sheen {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform: translateX(-160%) skewX(-14deg);
  animation: showcase-sheen 9s ease-in-out infinite 1.5s;
}
.showcase-stage--bare .showcase-art { opacity: .7; }

/* The stack: every tile is centred, then pushed to its own spot (--x/--y/--r).
   Hover/focus swaps to the fanned spot (--fx/--fy/--fr). Tile size follows the
   stage's own width (container query units). */
.showcase-stack {
  --tile: clamp(4.5rem, 26cqi, 8.75rem);
  position: absolute; inset: var(--sp-4) var(--sp-3) var(--sp-6);
}
.showcase-tile {
  position: absolute; left: 50%; top: 50%; width: var(--tile);
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  transition: transform .7s cubic-bezier(.2,.9,.25,1.1);
  transition-delay: calc(var(--ti, 0) * 30ms);
}
.showcase-tile:nth-child(1) { --x: -66%; --y: -22%; --r: -10deg; --fx: -108%; --fy: -50%; --fr: -5deg; z-index: 3; }
.showcase-tile:nth-child(2) { --x:  64%; --y: -28%; --r:   8deg; --fx:  108%; --fy: -50%; --fr:  5deg; z-index: 2; }
.showcase-tile:nth-child(3) { --x:  -4%; --y:   8%; --r:  -3deg; --fx:    0%; --fy:  50%; --fr:  0deg; z-index: 6; }
.showcase-tile:nth-child(4) { --x: -72%; --y:  34%; --r:   6deg; --fx: -108%; --fy:  50%; --fr:  3deg; z-index: 4; }
.showcase-tile:nth-child(5) { --x:  70%; --y:  30%; --r:  -7deg; --fx:  108%; --fy:  50%; --fr: -3deg; z-index: 5; }
.showcase-tile:nth-child(6) { --x:  10%; --y: -38%; --r:   4deg; --fx:    0%; --fy: -50%; --fr:  1deg; z-index: 1; }
.showcase-stack[data-count="1"] .showcase-tile { --x: 0%; --y: 0%; --r: -4deg; --fx: 0%; --fy: -4%; --fr: 2deg; }
.showcase-stack[data-count="2"] .showcase-tile:nth-child(1) { --x: -42%; --y: -6%; --fx: -62%; --fy: 0%; }
.showcase-stack[data-count="2"] .showcase-tile:nth-child(2) { --x:  42%; --y:  6%; --fx:  62%; --fy: 0%; }
.showcase-stack[data-count="3"] .showcase-tile:nth-child(1) { --fx: -108%; --fy: 0%; }
.showcase-stack[data-count="3"] .showcase-tile:nth-child(2) { --fx:  108%; --fy: 0%; }
.showcase-stack[data-count="3"] .showcase-tile:nth-child(3) { --fx:    0%; --fy: 0%; }
.showcase-stack[data-count="4"] .showcase-tile:nth-child(1) { --fx: -56%; --fy: -52%; }
.showcase-stack[data-count="4"] .showcase-tile:nth-child(2) { --fx:  56%; --fy: -52%; }
.showcase-stack[data-count="4"] .showcase-tile:nth-child(3) { --fx:  56%; --fy:  52%; }
.showcase-stack[data-count="4"] .showcase-tile:nth-child(4) { --fx: -56%; --fy:  52%; }
/* Five: three across the top, two centred underneath */
.showcase-stack[data-count="5"] .showcase-tile:nth-child(3) { --fx: -56%; --fy: 50%; }
.showcase-stack[data-count="5"] .showcase-tile:nth-child(4) { --fx:  56%; --fy: 50%; }
.showcase-stack[data-count="5"] .showcase-tile:nth-child(5) { --fx:   0%; --fy: -50%; --fr: 1deg; }
.showcase-card:focus-within .showcase-tile {
  transform: translate(-50%, -50%) translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)) scale(.88);
}
.showcase-tile-in { display: block; }
.showcase-frame {
  display: block; aspect-ratio: 1; padding: 10%; overflow: hidden;
  background: var(--c-surface); border-radius: calc(var(--r-lg) * 1.5);
  box-shadow: var(--show-frame-shadow);
  --bob-y: -9px; --bob-r: 1.6deg;
  animation: showcase-bob calc(5.2s + var(--ti, 0) * .9s) ease-in-out infinite;
  animation-delay: calc(var(--ti, 0) * -1.7s);
}
.showcase-tile:nth-child(even) .showcase-frame { --bob-y: -12px; --bob-r: -1.8deg; }
.showcase-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* A lone photo drifts slowly closer so it still feels alive */
.showcase-stack[data-count="1"] .showcase-frame img { animation: showcase-drift 11s ease-in-out infinite alternate; }

/* The words: they sit over the bottom of the picture on a fade of the card colour */
.showcase-body {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: calc(-1 * var(--sp-6));
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: linear-gradient(to bottom, transparent, var(--show-bg) var(--sp-5));
}
.showcase-title {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0; font-size: var(--fs-2xl); font-weight: 750; line-height: 1.1; letter-spacing: -0.025em; color: var(--show-ink);
}
.showcase-icon {
  flex: none; width: 1.6rem; height: 1.6rem;
  fill: none; stroke: var(--show-icon); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.showcase-line { margin: calc(-1 * var(--sp-2)) 0 0; font-size: var(--fs-sm); color: var(--show-ink-2); }
.showcase-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.showcase-chip {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: .35rem .8rem;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; color: var(--show-ink);
  background: var(--show-chip-bg); border: 1px solid var(--show-chip-line); border-radius: var(--r-full);
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.showcase-chip:hover {
  text-decoration: none; color: var(--show-chip-hover-ink);
  background: var(--show-chip-hover-bg); border-color: var(--show-chip-hover-bg); transform: translateY(-1px);
}
.showcase-cta {
  align-self: flex-start; margin-top: auto;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .7rem 1.15rem; min-height: 2.75rem; border-radius: var(--r-full);
  font-size: var(--fs-base); font-weight: 700; line-height: 1.2;
  color: var(--c-on-black); background: var(--c-brand);
  box-shadow: 0 12px 24px -12px rgba(0,0,0,.6);
  transition: background-color var(--transition), color var(--transition);
}
.showcase-cta:hover { text-decoration: none; color: var(--c-on-black); background: var(--c-brand-dark); }
.showcase-card--pc .showcase-cta { color: var(--c-ink); background: var(--c-on-black); box-shadow: 0 12px 24px -12px rgba(0,0,0,.45); }
.showcase-card--pc .showcase-cta:hover { color: var(--c-on-black); background: var(--c-black); }
.showcase-card--acc .showcase-cta { color: var(--c-on-black); background: var(--c-ink); box-shadow: 0 12px 24px -14px rgba(0,0,0,.45); }
.showcase-card--acc .showcase-cta:hover { background: var(--c-brand); }
.showcase-cta-arrow { display: inline-block; transition: transform .25s ease; }
.showcase-cta:hover .showcase-cta-arrow { transform: translateX(4px); }
.showcase-chip:focus-visible, .showcase-cta:focus-visible { outline: 2px solid var(--show-focus); outline-offset: 2px; }

/* Pointer hover only: a tap on a touch screen must not leave a card stuck open */
@media (hover: hover) {
  .showcase-cell:hover::after { opacity: 1; transform: translateY(-4px); }
  .showcase-cell:hover .showcase-card { transform: translateY(-4px); }
  .showcase-card:hover .showcase-tile {
    transform: translate(-50%, -50%) translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)) scale(.88);
  }
}

/* Layout: one column on phones; on tablets Mac runs full width with the picture beside the words */
@media (min-width: 768px) and (max-width: 991.98px) {
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-cell:first-child { grid-column: 1 / -1; }
  .showcase-cell:first-child .showcase-card { flex-direction: row; }
  .showcase-cell:first-child .showcase-stage { flex: 1 1 54%; height: auto; min-height: 20rem; }
  .showcase-cell:first-child .showcase-stack { inset: var(--sp-4) var(--sp-7) var(--sp-4) var(--sp-4); }
  .showcase-cell:first-child .showcase-body {
    flex: 1 1 46%; justify-content: center;
    margin: 0 0 0 calc(-1 * var(--sp-7)); padding: var(--sp-6) var(--sp-5) var(--sp-6) var(--sp-7);
    background: linear-gradient(to right, transparent, var(--show-bg) var(--sp-6));
  }
  .showcase-cell:first-child .showcase-cta { margin-top: var(--sp-2); }
}
@media (min-width: 992px)  { .showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .showcase-stage { height: 17.5rem; } }
@media (min-width: 1400px) { .showcase-grid { gap: var(--sp-5); } .showcase-stage { height: 19rem; } }

/* Rise-in (only once home-cards.js has armed the grid): card, then its photos, then its chips */
.showcase-grid.is-armed .showcase-cell { opacity: 0; transform: translateY(32px); }
.showcase-grid.is-armed .showcase-tile-in { opacity: 0; transform: translateY(36px) scale(.8) rotate(-8deg); }
.showcase-grid.is-armed .showcase-chips > li { opacity: 0; transform: translateY(8px); }
.showcase-grid.is-armed .showcase-cell.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--ci, 0) * 140ms);
}
.showcase-grid.is-armed .showcase-cell.is-in .showcase-tile-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .9s cubic-bezier(.2,.9,.25,1.25);
  transition-delay: calc(var(--ci, 0) * 140ms + 260ms + var(--ti, 0) * 90ms);
}
.showcase-grid.is-armed .showcase-cell.is-in .showcase-chips > li {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--ci, 0) * 140ms + 700ms + var(--j, 0) * 45ms);
}
/* Whatever holds keyboard focus is shown at once, never mid-fade */
.showcase-grid.is-armed .showcase-cell:focus-within,
.showcase-grid.is-armed .showcase-cell:focus-within .showcase-chips > li,
.showcase-grid.is-armed .showcase-cell:focus-within .showcase-tile-in { opacity: 1; transform: none; transition: none; }

/* Loops rest while someone is looking closely, while a card is off screen
   (is-watched: JS is running but has not seen it yet), and while the tab is hidden */
.showcase-card:focus-within :is(.showcase-frame, .showcase-frame img, .showcase-glow, .showcase-node, .showcase-led, .showcase-spark, .showcase-orbit, .showcase-sheen),
.showcase-grid.is-watched .showcase-cell:not(.is-live) :is(.showcase-frame, .showcase-frame img, .showcase-glow, .showcase-node, .showcase-led, .showcase-spark, .showcase-orbit, .showcase-sheen),
.showcase-grid.is-asleep :is(.showcase-frame, .showcase-frame img, .showcase-glow, .showcase-node, .showcase-led, .showcase-spark, .showcase-orbit, .showcase-sheen),
.showcase-grid.is-stopped :is(.showcase-frame, .showcase-frame img, .showcase-glow, .showcase-node, .showcase-led, .showcase-spark, .showcase-orbit, .showcase-sheen) {
  animation-play-state: paused;
}
@media (hover: hover) {
  .showcase-card:hover :is(.showcase-frame, .showcase-frame img, .showcase-glow, .showcase-node, .showcase-led, .showcase-spark, .showcase-orbit, .showcase-sheen) {
    animation-play-state: paused;
  }
}

@keyframes showcase-bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, var(--bob-y, -9px), 0) rotate(var(--bob-r, 1.6deg)); }
}
@keyframes showcase-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@keyframes showcase-breathe {
  0%, 100% { opacity: var(--glow-lo); transform: translate(-50%, -50%) scale(.9); }
  50%      { opacity: var(--glow-hi); transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes showcase-blink {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.25); }
}
@keyframes showcase-led {
  0%   { opacity: .15; }
  70%  { opacity: .95; }
  78%  { opacity: .15; }
  86%  { opacity: .95; }
}
@keyframes showcase-twinkle {
  0%, 100% { opacity: 0;  transform: scale(.4) rotate(0deg); }
  45%      { opacity: .9; transform: scale(1) rotate(45deg); }
  60%      { opacity: 0;  transform: scale(.5) rotate(60deg); }
}
@keyframes showcase-spin { to { transform: rotate(360deg); } }
@keyframes showcase-sheen {
  0%        { transform: translateX(-160%) skewX(-14deg); }
  55%, 100% { transform: translateX(420%) skewX(-14deg); }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card, .showcase-cell::after, .showcase-tile, .showcase-chip, .showcase-cta-arrow,
  .showcase-grid.is-armed .showcase-cell.is-in,
  .showcase-grid.is-armed .showcase-cell.is-in .showcase-tile-in,
  .showcase-grid.is-armed .showcase-cell.is-in .showcase-chips > li { transition: none; }
  .showcase-frame, .showcase-frame img, .showcase-glow, .showcase-node, .showcase-led,
  .showcase-spark, .showcase-orbit, .showcase-sheen { animation: none; }
  .showcase-sheen, .showcase-spark { opacity: 0; }
  .showcase-grid.is-armed .showcase-cell, .showcase-grid.is-armed .showcase-tile-in,
  .showcase-grid.is-armed .showcase-chips > li { opacity: 1; transform: none; }
  .showcase-cell:hover::after, .showcase-cell:hover .showcase-card,
  .showcase-chip:hover, .showcase-cta:hover .showcase-cta-arrow { transform: none; }
  .showcase-card:is(:hover, :focus-within) .showcase-tile {
    transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  }
  .showcase-stack[data-count="1"] .showcase-frame img { animation: none; }
  .showcase .showcase-toggle { display: none; }
}
/* A printout never waits for the rise-in */
@media print {
  .showcase-grid.is-armed .showcase-cell, .showcase-grid.is-armed .showcase-tile-in,
  .showcase-grid.is-armed .showcase-chips > li { opacity: 1; transform: none; }
  .showcase .showcase-toggle { display: none; }
}

/* ---------- 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) {
  .rail-btn { transition: none; }
  .rail-btn:active { transform: none; }
}

/* ---------- Product page: the brand's own mark ---------- */
/* A wordmark stands alone (it spells the brand); a square glyph sits beside the
   name, which is what a shopper reads. Both inherit .kicker's colour. */
.pdp-brand { margin-bottom: var(--sp-2); }
.pdp-brand-link { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; }
.pdp-brand-link:hover { color: var(--c-brand); }
.pdp-brand-wordmark, .pdp-brand-glyph, .pdp-brand-logo { display: block; }
.pdp-brand-wordmark { height: var(--brand-wordmark-height); width: auto; max-width: 9rem; }
.pdp-brand-glyph { width: var(--brand-glyph-size); height: var(--brand-glyph-size); flex: none; }
.pdp-brand-logo { height: var(--brand-logo-height); width: auto; max-width: 9rem; object-fit: contain; }


/* ---------- Floating WhatsApp call to action ---------- */
/* Sits clear of the flash toasts (top-right, z-index 1080) and above the page
   without covering it. The label appears only where there is room for it. */
.wa-fab {
  position: fixed; z-index: 50;
  right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.8rem; border-radius: 999px;
  background: #25d366; color: #fff; text-decoration: none; font-weight: 650;
  box-shadow: var(--shadow-2);
  transition: transform .18s ease, filter .18s ease;
}
.wa-fab:hover, .wa-fab:focus-visible { color: #fff; transform: translateY(-2px); filter: brightness(1.05); }
.wa-fab:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.wa-fab svg { width: 28px; height: 28px; display: block; fill: currentColor; }
.wa-fab-text { display: none; }
@media (min-width: 768px) { .wa-fab { padding-right: var(--sp-4); } .wa-fab-text { display: inline; } }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } .wa-fab:hover { transform: none; } }
@media print { .wa-fab { display: none; } }

/* ---------- Apple menu in the main nav ---------- */
/* No JS: <details> opens on its own, so the menu works on first paint and
   survives the deferred bootstrap bundle. */
.nav-menu { position: relative; flex: none; }
.nav-menu > summary {
  list-style: none; cursor: pointer; white-space: nowrap;
  padding: 0.6rem var(--sp-3); font-size: var(--fs-base); font-weight: 550;
  color: var(--c-ink-2); border-bottom: 2px solid transparent;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after { content: "\25BE"; margin-left: .35rem; font-size: .8em; }
.nav-menu > summary:hover, .nav-menu[open] > summary { color: var(--c-brand); }
.nav-menu > summary:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }
.nav-menu-list {
  position: absolute; top: 100%; left: 0; z-index: 60; min-width: 13rem;
  display: grid; padding: var(--sp-2);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-sm); box-shadow: var(--shadow-2);
}
.site-nav .nav-menu-list a {
  display: block; padding: .5rem var(--sp-3); border-bottom: 0; white-space: nowrap;
}
.site-nav .nav-menu-list a:hover { background: var(--c-surface-2); color: var(--c-brand); }

/* The nav is a horizontal scroller, so overflow-y computes to auto and would
   clip this menu. Lift the clipping (and the edge fade) only while it is open. */
.site-nav:has(details[open]) { overflow: visible; -webkit-mask-image: none; mask-image: none; }

/* Without :has() the menu would be cut off, so let its links sit in the nav
   strip as ordinary items rather than show a dropdown nobody can read. */
@supports not selector(:has(*)) {
  .nav-menu, .nav-menu .nav-menu-list { display: contents; }
  .nav-menu > summary { display: none; }
}

/* ---------- Find us: the map ---------- */
.map-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.map-frame {
  position: relative; aspect-ratio: 16 / 9; max-width: 100%;
  border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-details { display: grid; gap: var(--sp-3); }
.map-details .address-block { font-style: normal; display: grid; gap: var(--sp-1); }
.map-details .btn { justify-self: start; }
@media (max-width: 991.98px) {
  .map-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .map-frame { aspect-ratio: 4 / 3; }
}

/* ---------- One size for every brand mark ----------
   The marquee, the product page and the catalogue filters all draw the same
   artwork. They had three sets of numbers and drifted apart; now there is one.
   Declared on :root so any of the three can be styled without re-deciding. */
:root {
  --brand-glyph-size: 22px;
  --brand-wordmark-height: 1.15rem;
  --brand-logo-height: 1.9rem;
  /* A catalogue card is a few hundred pixels wide and the product name is what
     must be read first, so the mark above it is deliberately smaller than the
     one on the marquee and the product page. */
  --brand-logo-height-card: 1.25rem;
}

/* Brand facets: the mark sits between the checkbox and the name. */
.facet-list-brands label { display: flex; align-items: center; gap: var(--sp-2); }
.facet-list-brands .facet-mark { flex: none; color: var(--c-ink); }
.facet-list-brands .brand-chip-logo { max-width: 5.5rem; }
.facet-list-brands .filter-count { margin-left: auto; }

/* ---------- Catalogue card: the brand's mark, linked ---------- */
.product-brand-link { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--c-ink-3); }
.product-brand-link:hover, .product-brand-link:focus-visible { color: var(--c-brand); text-decoration: none; }
.product-brand-link:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: var(--r-sm); }
.product-brand-logo { display: block; height: var(--brand-logo-height-card); width: auto; max-width: 6.5rem; object-fit: contain; }
/* The shared glyph classes are sized for the marquee; on a card they follow the
   card's own token so the row stays one line beside the name. */
.product-brand-link .brand-glyph { width: auto; height: var(--brand-logo-height-card); }
.product-brand-link .brand-wordmark { height: var(--brand-logo-height-card); max-width: 6.5rem; }

/* ---------- bundle (cart module): "Complete your setup" ----------
   Shared by the basket panel, the product-page block and the after-add
   dialog cart.js builds. Tokens only; the only motion is on opacity and
   transform, and none of it under prefers-reduced-motion. */
.bundle-panel { margin-top: var(--sp-5); }
.bundle-panel .card-head h2 { margin: 0; }
.bundle-panel h2:focus:not(:focus-visible) { outline: none; }
.bundle-lede { margin: var(--sp-1) 0 0; color: var(--c-ink-3); font-size: var(--fs-sm); }
.bundle-form { padding: var(--sp-4); }
.bundle-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.bundle-grid {
  display: grid; gap: var(--sp-3); list-style: none; padding: 0; margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .bundle-grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
}
.bundle-cell { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.bundle-item {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-1); flex: 1 1 auto;
  min-width: 0; padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  background: var(--c-surface); cursor: pointer;
}
.bundle-item:hover { border-color: var(--c-border-strong); }
/* The selected ring is its own layer and only fades (no border/shadow transition). */
.bundle-item::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  border: 2px solid var(--c-brand); border-radius: inherit;
  opacity: 0; transition: opacity .15s;
}
.bundle-item:has(.bundle-check:checked)::after { opacity: 1; }
.bundle-check { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 1; width: 1.25rem; height: 1.25rem; margin: 0; }
.bundle-check:focus-visible { box-shadow: var(--ring); }
.bundle-media {
  aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  background: var(--c-surface-2); border-radius: var(--r-md);
}
.bundle-media img { width: 100%; height: 100%; object-fit: contain; transition: opacity .15s, transform .15s; }
.bundle-item:not(:has(.bundle-check:checked)) .bundle-media img { opacity: .55; transform: scale(.97); }
.bundle-kicker { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink-3); font-weight: 650; }
.bundle-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; color: var(--c-ink); font-weight: 600; font-size: var(--fs-sm); line-height: 1.35;
}
.bundle-price { margin-top: auto; font-weight: 700; color: var(--c-ink); }
.bundle-note { font-size: var(--fs-xs); color: var(--c-warn); }
.bundle-cell-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; }
.bundle-link { font-size: var(--fs-sm); }
/* Added: say so in text and colour; only the photo fades, so the words keep their contrast. */
.bundle-item.is-added { border-color: var(--c-ok); cursor: default; }
.bundle-item.is-added::after { border-color: var(--c-ok); }
.bundle-item.is-added .bundle-kicker { color: var(--c-ok); }
.bundle-item.is-added .bundle-media img { opacity: .6; transform: none; }
.bundle-item.is-added .bundle-check:disabled { opacity: 1; background-color: var(--c-ok); border-color: var(--c-ok); }
.bundle-foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between;
  margin-top: var(--sp-4);
}
.bundle-total { margin: 0; font-weight: 600; }
.bundle-total .muted { font-weight: 400; margin-left: var(--sp-1); }
.pdp-bundle { margin-top: var(--sp-5); }

/* The after-add dialog (Bootstrap modal, built by cart.js). */
.bundle-modal .modal-header { gap: var(--sp-2); }
.bundle-modal .modal-title { font-size: 1.125rem; margin: 0; }
.bundle-modal .modal-title:focus { outline: none; }
.bundle-modal .modal-body h3 { font-size: 1rem; margin: var(--sp-4) 0 0; }
.bundle-modal .bundle-form { padding: 0; margin-top: var(--sp-3); }
.bundle-modal .modal-footer {
  position: sticky; bottom: 0; background: var(--c-surface);
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end;
}
.bundle-modal .modal-footer .bundle-total { margin-right: auto; }
.bundle-ok {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: var(--r-full); color: var(--c-ok); background: var(--c-ok-soft); font-weight: 700;
}
.bundle-added { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; }
.bundle-added img {
  width: 56px; height: 56px; flex: none; object-fit: contain;
  background: var(--c-surface-2); border-radius: var(--r-md);
}
.bundle-added-name { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bundle-added-meta { margin: 0; color: var(--c-ink-3); font-size: var(--fs-sm); }
.bundle-basket-line { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-ink-2); }

@media (max-width: 575.98px) {
  .bundle-foot .btn, .bundle-modal .modal-footer .btn { flex: 1 1 100%; }
  .bundle-modal .modal-footer .bundle-total { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bundle-item::after, .bundle-media img { transition: none; }
  .bundle-item:not(:has(.bundle-check:checked)) .bundle-media img { transform: none; }
  .bundle-modal.fade .modal-dialog { transition: none; }
}

/* ---------- Footer: compact, with a live circuit behind it ----------
   The traces are a static tile. The red "current" is two soft gradient bands
   sliding across (transform only) under a mask of the same tile, so the light
   only ever shows along the traces. Nothing runs per frame in JS. */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 140% at 85% 0%, #1a0304 0%, var(--c-black) 55%);
  color: var(--c-on-black-2); padding: var(--sp-6) 0 var(--sp-3); margin-top: var(--sp-7);
  border-top: 1px solid rgba(228, 28, 33, .35);
}
.site-footer::after { /* a thin highlight running along the top edge */
  content: ""; position: absolute; top: -1px; left: 0; width: 30%; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 95, .95), transparent);
  animation: fcEdge 9s linear infinite; pointer-events: none;
}
.footer-circuit { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='rgba%28255,255,255,0.07%29' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 20H60L80 40H150L170 20H240'/%3E%3Cpath d='M0 70H100L115 55H200L215 70H240'/%3E%3Cpath d='M0 100H150L165 85H200L215 100H240'/%3E%3Cpath d='M30 100V112'/%3E%3Cpath d='M150 40V28'/%3E%3Cpath d='M200 55V45'/%3E%3C/g%3E%3Cg fill='rgba%28255,255,255,0.12%29'%3E%3Ccircle cx='80' cy='40' r='2'/%3E%3Ccircle cx='170' cy='20' r='2'/%3E%3Ccircle cx='115' cy='55' r='2'/%3E%3Ccircle cx='165' cy='85' r='2'/%3E%3Ccircle cx='30' cy='112' r='2'/%3E%3Ccircle cx='150' cy='28' r='2'/%3E%3Ccircle cx='200' cy='45' r='2'/%3E%3Ccircle cx='60' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 240px 120px; }
.footer-circuit-glow {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 20H60L80 40H150L170 20H240'/%3E%3Cpath d='M0 70H100L115 55H200L215 70H240'/%3E%3Cpath d='M0 100H150L165 85H200L215 100H240'/%3E%3Cpath d='M30 100V112'/%3E%3Cpath d='M150 40V28'/%3E%3Cpath d='M200 55V45'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='80' cy='40' r='2.6'/%3E%3Ccircle cx='170' cy='20' r='2.6'/%3E%3Ccircle cx='115' cy='55' r='2.6'/%3E%3Ccircle cx='165' cy='85' r='2.6'/%3E%3Ccircle cx='30' cy='112' r='2.6'/%3E%3Ccircle cx='150' cy='28' r='2.6'/%3E%3Ccircle cx='200' cy='45' r='2.6'/%3E%3Ccircle cx='60' cy='20' r='2.6'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 20H60L80 40H150L170 20H240'/%3E%3Cpath d='M0 70H100L115 55H200L215 70H240'/%3E%3Cpath d='M0 100H150L165 85H200L215 100H240'/%3E%3Cpath d='M30 100V112'/%3E%3Cpath d='M150 40V28'/%3E%3Cpath d='M200 55V45'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='80' cy='40' r='2.6'/%3E%3Ccircle cx='170' cy='20' r='2.6'/%3E%3Ccircle cx='115' cy='55' r='2.6'/%3E%3Ccircle cx='165' cy='85' r='2.6'/%3E%3Ccircle cx='30' cy='112' r='2.6'/%3E%3Ccircle cx='150' cy='28' r='2.6'/%3E%3Ccircle cx='200' cy='45' r='2.6'/%3E%3Ccircle cx='60' cy='20' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 240px 120px; mask-size: 240px 120px;
}
.fc-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; will-change: transform; transform: translate3d(-100%, 0, 0); }
.fc-sweep--a {
  background: linear-gradient(90deg, transparent 0%, rgba(228, 28, 33, .15) 35%, rgba(255, 70, 76, .95) 50%, rgba(228, 28, 33, .15) 65%, transparent 100%);
  animation: fcSweep 7s cubic-bezier(.45, 0, .55, 1) infinite;
}
.fc-sweep--b {
  top: 40%; width: 22%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 200, 200, .7) 50%, transparent 100%);
  animation: fcSweep 11s linear infinite 3.5s;
}
@keyframes fcSweep { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(390%, 0, 0); } }
@keyframes fcEdge  { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(340%, 0, 0); } }

.footer-grid { display: grid; gap: var(--sp-4) var(--sp-5); grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.site-footer h4 { color: #fff; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--sp-2); }
.site-footer p { margin-bottom: var(--sp-2); }
.site-footer a { color: var(--c-on-black-2); display: block; padding: 0.1rem 0; font-size: var(--fs-sm); transition: color .15s ease; }
.site-footer a:hover { color: #fff; }
.site-footer a.btn { display: inline-block; margin-top: var(--sp-2); }
/* Address, phone and email: one line each, in the footer's own type. */
.footer-contact { font-size: var(--fs-sm); line-height: 1.6; }
.footer-contact > * { display: block; }
.site-footer .footer-contact a { padding: 0; }
.site-footer a.footer-strong { color: #fff; font-weight: 700; }
.hours-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; font-size: var(--fs-sm); }
.hours-list li + li { margin-top: .15rem; }
.site-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: var(--sp-4); padding-top: var(--sp-3); font-size: var(--fs-xs); gap: var(--sp-2); }
@media (max-width: 991.98px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .site-footer { padding-top: var(--sp-5); margin-top: var(--sp-6); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-sweep, .site-footer::after { animation: none; opacity: 0; }
}

/* ---------- Photo fit: every product photo shows whole, never cropped ----------
   A percentage height on an image inside a grid box does not resolve, so the
   photo fell back to its natural height and a tall one ran past the frame and
   was cut off. Here the frame sets the size (aspect-ratio) and the photo is
   pinned to it and scaled down to fit, whatever its shape. White, because the
   product photos are shot on white, so the frame never shows as a grey band.
   Tune per frame with --fit-pad (breathing room) and --fit-bg. */
.product-media, .cart-line-media, .bundle-media, .colour-thumb {
  position: relative; overflow: hidden;
  background: var(--fit-bg, var(--c-surface));
}
.product-media img, .cart-line-media img, .bundle-media img, .colour-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: center;
  padding: var(--fit-pad, var(--sp-2));
}
/* Square: fits portrait, square and landscape photos alike without wasting half the card. */
.product-media { aspect-ratio: 1 / 1; --fit-pad: var(--sp-3); border-bottom: 1px solid var(--c-border); }
@media (max-width: 575.98px) { .product-media { --fit-pad: var(--sp-2); } }

/* ---------- Condition badge (Open Box, Refurbished, Pre-Owned, Used) ----------
   Over the card photo's corner; Brand New is the default and goes unbadged. */
.condition-badge {
  position: absolute; z-index: 1; top: var(--sp-2); left: var(--sp-2);
  padding: .15rem .5rem; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; letter-spacing: .01em;
  background: var(--c-info-soft); color: var(--c-info); box-shadow: inset 0 0 0 1px var(--c-border);
}
/* Brand New (either warranty) is the shop's red, on the product page where it shows. */
.condition-badge.condition-new, .condition-badge.condition-new-5-years, .condition-badge.condition-new-international, .condition-badge.condition-new-3-months, .condition-badge.condition-new-no-warranty { background: var(--c-brand); color: var(--c-brand-ink); box-shadow: none; }
.condition-badge.condition-open-box,
.condition-badge.condition-new-open-box { background: var(--c-brand-soft); color: var(--c-brand-dark); }
.condition-badge.condition-refurbished { background: var(--c-ok-soft); color: var(--c-ok); }
.condition-badge.condition-pre-owned, .condition-badge.condition-used { background: var(--c-warn-soft); color: var(--c-warn); }

/* ---------- Scroll to top / bottom ----------
   A small pair stacked above the WhatsApp button (desktop) or the bottom bar
   (phones). Each button fades in only when it would move the page. */
.scroll-nav {
  position: fixed; z-index: 49; right: var(--sp-4);
  bottom: calc(var(--sp-4) + 4.25rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: translate .35s cubic-bezier(.2, .7, .2, 1);
}
.scroll-nav[hidden] { display: none; }
.scroll-nav-btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  color: var(--c-on-black); background: rgba(20, 20, 20, .82);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; cursor: pointer;
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(8px) scale(.9); pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, background-color .15s ease, visibility 0s linear .2s;
}
.scroll-nav-btn svg { width: 1.2rem; height: 1.2rem; }
.scroll-nav.can-up .scroll-nav-up,
.scroll-nav.can-down .scroll-nav-down {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s;
}
.scroll-nav-btn:hover { background: var(--c-brand); border-color: var(--c-brand); }
.scroll-nav-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
/* Rides up with the WhatsApp button when the product page's buy bar shows. */
body:has(.pdp-buybar.is-shown) .scroll-nav { translate: 0 -68px; }
@media (max-width: 767.98px) {
  .scroll-nav { right: var(--sp-3); bottom: calc(66px + var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
  .scroll-nav-btn { width: 2.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-nav, .scroll-nav-btn { transition: none; }
}
@media print { .scroll-nav { display: none; } }

/* Opening hours as one line under the shop's name (each part kept whole), in place
   of the tagline; the last column belongs to Patch. */
.footer-hours-line { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); font-size: var(--fs-md); color: var(--c-on-black); }
.footer-hours-line li { white-space: nowrap; }
/* A compact footer: tighter padding, line spacing and type, so the bar takes less height. */
.site-footer { padding: var(--sp-4) 0 var(--sp-2); }
.site-footer h4 { margin-bottom: var(--sp-1); }
.site-footer p { margin-bottom: var(--sp-1); }
.site-footer a { padding: 0; line-height: 1.55; }
.site-footer .footer-tagline { font-size: var(--fs-sm); }
.footer-hours-line { font-size: var(--fs-sm); color: #fff; margin-bottom: var(--sp-1); }
.footer-contact { line-height: 1.5; }
.site-footer .footer-social { margin-top: var(--sp-2); }
.site-footer-bottom { margin-top: var(--sp-3); padding-top: var(--sp-2); }

/* ---------- Footer on phones: compact, circuit kept ----------
   About block (with the hours) on the left with Patch beside it, then Shop
   beside Help. The tagline, the extra category links and the note
   are left out to keep it short. */
@media (max-width: 575.98px) {
  .site-footer { padding: var(--sp-4) 0 var(--sp-2); margin-top: var(--sp-5); }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4);
    grid-template-areas: "about mascot" "shop help";
  }
  .footer-grid > .footer-about { grid-area: about; grid-column: auto; }
  .footer-shop  { grid-area: shop; }
  .footer-help  { grid-area: help; }
  .footer-mascot { grid-area: mascot; }
  .footer-hours-line { font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
  /* Every line in the footer the same size and spacing, so the columns sit level. */
  .site-footer h4 { margin-bottom: var(--sp-1); font-size: .6875rem; }
  .site-footer a, .footer-contact, .hours-list { font-size: var(--fs-sm); line-height: 1.6; }
  .site-footer a { padding: 0; }
  .site-footer p { margin-bottom: 0; }
  .footer-tagline, .footer-note { display: none; }
  .footer-shop a:nth-of-type(n + 5) { display: none; }
  .hours-list { margin: 0; }
  .hours-list li + li { margin-top: 0; }
  .site-footer .footer-social a { padding: 0; }
  .site-footer-bottom { margin-top: var(--sp-3); padding-top: var(--sp-2); font-size: .6875rem; }
}

/* ---------- Find us on desktop: one compact card ----------
   Details on the left, the map as a short wide strip on the right, in a single
   bordered card, so the section is about half its old height with no empty
   column beside the map. Tablets and phones keep the stacked layout. */
@media (min-width: 992px) {
  .map-band { padding-block: var(--sp-5); }
  .map-band h2 { margin-bottom: var(--sp-3); }
  .map-grid {
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr); gap: 0; align-items: stretch;
    border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden;
    background: var(--c-surface); box-shadow: var(--shadow-1);
  }
  .map-details {
    order: 1; align-content: center; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5); border-right: 1px solid var(--c-border);
  }
  .map-details .address-block { margin-bottom: 0; }
  .map-details .hours-list, .map-details p { margin: 0; }
  .map-details .btn { margin-top: var(--sp-1); }
  .map-frame {
    order: 2; aspect-ratio: auto; height: clamp(240px, 20vw, 280px);
    border: 0; border-radius: 0;
  }
}

/* ---------- Find us: Call us (WhatsApp) in red, Get directions in black ---------- */
.map-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.map-btn {
  display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem;
  font-weight: 650; border-radius: var(--r-md); border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.map-btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.map-btn:hover, .map-btn:focus-visible { text-decoration: none; transform: translateY(-1px); }
.map-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.map-btn--call { background: var(--c-brand); color: var(--c-brand-ink); box-shadow: 0 6px 16px -8px rgba(228, 28, 33, .8); }
.map-btn--call:hover, .map-btn--call:focus-visible { background: var(--c-brand-dark); color: var(--c-brand-ink); }
.map-btn--directions { background: var(--c-black); color: var(--c-on-black); border-color: var(--c-black); }
.map-btn--directions:hover, .map-btn--directions:focus-visible { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-black); }
@media (max-width: 575.98px) { .map-actions .map-btn { flex: 1 1 0; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .map-btn { transition: none; } .map-btn:hover { transform: none; } }

/* ---- Patch, the mascot (partials/mascot.php, mascot.js) ----
   Dr. Patch, centred in the footer's last column, in a small scene: parts float
   around it on their own clocks, a red glow beats behind it and a heart monitor
   runs either side with a pulse sweeping in time. A click hops Patch, scatters
   the parts and gives the next tip; opening a home page question makes it nod.
   Only transform and opacity move, and none of it runs under reduced motion. */
.footer-mascot { display: flex; justify-content: center; align-items: center; }
/* Desktop: Help's links are short, so its column narrows and Patch's widens; Patch
   sits at the start of it, in the open space between the links and the edge. */
@media (min-width: 992px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr .75fr 1.25fr; }
  .footer-mascot { justify-content: flex-start; }
}
.site-footer .mascot { display: grid; justify-items: center; gap: 0; width: 100%; max-width: 15rem; text-align: center; }
.mascot-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-lg); }
.mascot-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 4px; }
.mascot-art { display: block; width: 100%; height: auto; overflow: visible; }
.mascot-bubble {
  position: relative; max-width: 12rem; margin: 0 !important; padding: var(--sp-1) var(--sp-2);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: .9rem;
  font-size: .6875rem; line-height: 1.45; color: var(--c-on-black);
  transition: opacity .2s ease, transform .2s ease;
}
.mascot-bubble strong { display: block; color: #fff; font-weight: 700; }
.mascot-bubble::before {
  content: ""; position: absolute; left: 50%; top: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--c-black); border-left: 1px solid rgba(255, 255, 255, .14); border-top: 1px solid rgba(255, 255, 255, .14);
  transform: rotate(45deg);
}
.mascot-bubble.is-changing { opacity: 0; transform: translate3d(0, 4px, 0); }
/* Tablets and phones: the scene on the left, the bubble beside it, clear of the scroll buttons. */
@media (max-width: 991.98px) {
  .footer-mascot { justify-content: flex-start; }
  .site-footer .mascot { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; max-width: none; text-align: left; gap: var(--sp-2); }
  .mascot-bubble { max-width: 12rem; }
  .mascot-bubble::before { left: -6px; top: 50%; margin: -5px 0 0; border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
}
/* Phones: Patch beside the shop's details, the bubble under it. */
@media (max-width: 575.98px) {
  .footer-mascot { justify-content: center; align-self: start; }
  .site-footer .mascot { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 0; }
  .mascot-bubble { max-width: none; }
  .mascot-bubble::before { left: 50%; top: -6px; margin: 0 0 0 -5px; border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; }
  .site-footer .footer-social { gap: var(--sp-2); }
}
/* Tablets: a half-width cell, so a smaller scene and a narrower bubble. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .site-footer .mascot { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .mascot-bubble { max-width: 10.5rem; }
}

/* Scene colours, all from the tokens. */
.mascot .p-glow-in { stop-color: var(--c-brand); stop-opacity: .38; }
.mascot .p-glow-out { stop-color: var(--c-brand); stop-opacity: 0; }
.mascot .p-glow { fill: url(#pt-glow); }
.mascot .p-alu-top { stop-color: var(--c-surface); }
.mascot .p-alu-bot { stop-color: var(--c-surface-3); }
.mascot .p-glass-a { stop-color: var(--c-surface); stop-opacity: .16; }
.mascot .p-glass-b { stop-color: var(--c-surface); stop-opacity: 0; }
.mascot .p-ecg path { fill: none; stroke: var(--c-brand); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; opacity: .3; }
.mascot .p-ecg--lit path { stroke-width: 2; opacity: 1; }
.mascot .p-floor { fill: var(--c-brand); opacity: .35; }
.mascot .p-base { fill: url(#pt-alu); stroke: var(--c-black); stroke-width: 1.5; }
.mascot .p-lip { fill: var(--c-border-strong); }
.mascot .p-lid { fill: url(#pt-alu); stroke: var(--c-black); stroke-width: 1.5; }
.mascot .p-screen { fill: var(--c-black); }
.mascot .p-sheen { fill: url(#pt-glass); }
.mascot .p-notch { fill: var(--c-black-3); }
.mascot .p-eye { fill: var(--c-surface); }
.mascot .p-eye-glow { fill: var(--c-surface); opacity: .55; }
.mascot .p-cheek { fill: var(--c-brand); opacity: .75; }
.mascot .p-smile { fill: none; stroke: var(--c-surface); stroke-width: 3; stroke-linecap: round; }
.mascot .p-plaster { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-width: 1; }
.mascot .p-plaster-pad { fill: var(--c-surface-3); }
.mascot .p-cross { fill: var(--c-brand); }
.mascot .p-tube { fill: none; stroke: var(--c-ink-2); stroke-width: 3; stroke-linecap: round; }
.mascot .p-ear { fill: var(--c-ink-3); }
.mascot .p-chest { fill: var(--c-surface-2); stroke: var(--c-ink-2); stroke-width: 2; }
.mascot .p-chest-in { fill: var(--c-surface-3); }
.mascot .p-pcb { fill: var(--c-ok); }
.mascot .p-ic { fill: var(--c-black-2); }
.mascot .p-gold { fill: none; stroke: var(--c-warn); stroke-width: 1.4; stroke-linecap: round; }
.mascot .p-cpu { fill: var(--c-surface-3); }
.mascot .p-die { fill: var(--c-black-3); }
.mascot .p-dot { fill: var(--c-brand); }
.mascot .p-cell { fill: var(--c-black-2); stroke: var(--c-surface-3); stroke-width: 1.6; }
.mascot .p-cell-tip { fill: var(--c-surface-3); }
.mascot .p-charge { fill: var(--c-ok); }
.mascot .p-ssd { fill: var(--c-black-3); stroke: var(--c-ink-3); stroke-width: 1; }
.mascot .p-label { fill: var(--c-surface-2); }
.mascot .p-hole { fill: var(--c-black); stroke: var(--c-warn); stroke-width: 1; }
.mascot .p-gear { fill: var(--c-ink-3); }
.mascot .p-gear-hole { fill: var(--c-black); }
.mascot .p-screw { fill: var(--c-surface-3); }
.mascot .p-slot { stroke: var(--c-ink-2); stroke-width: 1.3; stroke-linecap: round; }
.mascot .p-spark { fill: var(--c-brand); }

/* Motion. Every moving group keeps its own box so transforms pivot where they should. */
.mascot .p-body, .mascot .p-float, .mascot .p-spin, .mascot .p-spark, .mascot .p-eyes, .mascot .p-beat { transform-box: fill-box; transform-origin: center; }
.mascot .p-body { transform-origin: 50% 100%; animation: patchBob 5s ease-in-out infinite; }
.mascot .p-eyes { animation: patchBlink 6s infinite; }
.mascot .p-beat { animation: patchBeat 2.4s ease-out infinite; }
.mascot .p-sweep { animation: patchSweep 2.4s linear infinite; }
.mascot .p-spin { animation: patchSpin 14s linear infinite; }
.mascot .p-f1 { animation: patchDrift 6.5s ease-in-out infinite; }
.mascot .p-f2 { animation: patchDrift 7.5s ease-in-out -2s infinite reverse; }
.mascot .p-f3 { animation: patchDrift 7s ease-in-out -4s infinite; }
.mascot .p-f4 { animation: patchDrift 8s ease-in-out -1s infinite reverse; }
.mascot .p-f5 { animation: patchDrift 9s ease-in-out -3s infinite; }
.mascot .p-f6 { animation: patchDrift 6s ease-in-out -5s infinite reverse; }
.mascot .p-spark { animation: patchTwinkle 3.2s ease-in-out infinite; }
.mascot .p-s2 { animation-delay: -.8s; }
.mascot .p-s3 { animation-delay: -1.6s; }
.mascot .p-s4 { animation-delay: -2.4s; }
.mascot .p-charge--2 { animation: patchCharge 2.4s steps(1) infinite; }
.mascot-btn:hover .p-body { animation-duration: 2.5s; }

/* A tip: Patch hops, the parts fly out and settle back. */
.mascot.is-tip .p-body { animation: patchHop .55s cubic-bezier(.3, 1.5, .5, 1); }
.mascot.is-tip .p-f1 { animation: patchBurstL .7s cubic-bezier(.3, 1.4, .5, 1); }
.mascot.is-tip .p-f3 { animation: patchBurstL .7s cubic-bezier(.3, 1.4, .5, 1) 60ms; }
.mascot.is-tip .p-f6 { animation: patchBurstU .7s cubic-bezier(.3, 1.4, .5, 1) 30ms; }
.mascot.is-tip .p-f2 { animation: patchBurstR .7s cubic-bezier(.3, 1.4, .5, 1) 30ms; }
.mascot.is-tip .p-f4 { animation: patchBurstR .7s cubic-bezier(.3, 1.4, .5, 1) 90ms; }
.mascot.is-tip .p-f5 { animation: patchBurstR .7s cubic-bezier(.3, 1.4, .5, 1); }
.mascot.is-tip .p-spark { animation: patchFlash .6s ease-out; }
.mascot.is-nod .p-body { animation: patchNod .6s ease-in-out; }

@keyframes patchBob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4px, 0); } }
@keyframes patchBlink { 0%, 91%, 97%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@keyframes patchBeat { 0%, 100% { transform: scale(1); opacity: .75; } 8% { transform: scale(1.07); opacity: 1; } 16% { transform: scale(1.01); opacity: .85; } 24% { transform: scale(1.05); opacity: .95; } 45% { transform: scale(1); opacity: .75; } }
@keyframes patchSweep { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(370px, 0, 0); } }
@keyframes patchSpin { to { transform: rotate(360deg); } }
@keyframes patchDrift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 33% { transform: translate3d(2px, -6px, 0) rotate(4deg); } 66% { transform: translate3d(-2px, 3px, 0) rotate(-3deg); } }
@keyframes patchTwinkle { 0%, 100% { transform: scale(.4); opacity: 0; } 40%, 60% { transform: scale(1); opacity: .9; } }
@keyframes patchCharge { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
@keyframes patchHop { 0% { transform: translate3d(0, 0, 0) scale(1, 1); } 30% { transform: translate3d(0, 2px, 0) scale(1.05, .94); } 60% { transform: translate3d(0, -12px, 0) scale(.97, 1.04); } 100% { transform: translate3d(0, 0, 0) scale(1, 1); } }
@keyframes patchBurstL { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 40% { transform: translate3d(-10px, -8px, 0) rotate(-14deg); } }
@keyframes patchBurstR { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 40% { transform: translate3d(10px, -8px, 0) rotate(14deg); } }
@keyframes patchBurstU { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 40% { transform: translate3d(0, -12px, 0) rotate(90deg); } }
@keyframes patchFlash { 0% { transform: scale(.4); opacity: 0; } 35% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1); opacity: .9; } }
@keyframes patchNod { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 65% { transform: rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .mascot *, .mascot.is-tip *, .mascot.is-nod * { animation: none !important; }
  .mascot .p-spark { opacity: .8; }
  .mascot .p-sweep { transform: translate3d(185px, 0, 0); }
  .mascot-bubble { transition: none; }
}