/* ==========================================================================
   Punchbag.sg — Design system
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Brand */
  --ink:            #0B0D10;
  --ink-soft:       #171B21;
  --ink-line:       #262C35;
  --accent:         #E5322D;
  --accent-dark:    #C4241F;
  --accent-soft:    #FDECEB;

  /* Neutrals */
  --paper:          #FFFFFF;
  --paper-alt:      #F6F7F9;
  --paper-alt-2:    #EDEFF3;
  --border:         #E1E5EA;
  --border-strong:  #C9D0D9;
  --text:           #14181D;
  --text-muted:     #5A6472;
  --text-faint:     #8A94A3;

  /* Status */
  --success:        #12805C;
  --success-bg:     #E7F5F0;
  --warning:        #A66300;
  --warning-bg:     #FDF3E3;
  --error:          #C4241F;
  --error-bg:       #FDECEB;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Space */
  --gutter: clamp(1rem, 4vw, 2rem);
  --section: clamp(3.5rem, 8vw, 6rem);
  --max: 1200px;
  --max-prose: 720px;

  /* Shape */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(11, 13, 16, .06), 0 1px 3px rgba(11, 13, 16, .04);
  --shadow:    0 2px 4px rgba(11, 13, 16, .04), 0 8px 24px rgba(11, 13, 16, .07);
  --shadow-lg: 0 4px 8px rgba(11, 13, 16, .04), 0 20px 48px rgba(11, 13, 16, .12);

  --header-h: 68px;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header. The extra allowance on
     narrow screens covers the taller mobile bar plus the announcement strip,
     so a TOC jump never lands the heading underneath the header. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

@media (max-width: 900px) {
  html { scroll-padding-top: calc(var(--header-h) + 2.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Images scale to the width of their container and take their height from
   their own aspect ratio. Nothing is ever cropped on any device — no
   object-fit: cover, no forced aspect-ratio boxes. */
img, svg, video {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
}
button, input, select, textarea { font: inherit; color: inherit; }

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  line-height: 1.18;
  letter-spacing: -.022em;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.15rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.2rem); letter-spacing: -.026em; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.075rem; font-weight: 700; }

p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }

strong { font-weight: 700; color: var(--ink); }
small  { font-size: .875rem; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.lede {
  font-size: clamp(1.075rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

.eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .85rem;
}

.eyebrow--muted { color: var(--text-faint); }

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 860px; }
.prose-wrap   { max-width: var(--max-prose); }

.section       { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.section--alt  { background: var(--paper-alt); }
.section--ink  { background: var(--ink); color: #C7CCD4; }
.section--ink h2, .section--ink h3 { color: #fff; }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.stack > * + * { margin-top: 1.15rem; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

.section-head { max-width: 660px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; }

/* --- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff;
  padding: .8rem 1.2rem; border-radius: 0 0 var(--r) 0;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-bar {
  display: flex; align-items: center; gap: 1.5rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--ink);
  flex-shrink: 0;
}
.brand svg { width: 30px; height: 30px; color: var(--ink); }
.brand-word {
  font-size: 1.28rem; font-weight: 800; letter-spacing: -.045em;
  line-height: 1;
}
.brand-word .tld { color: var(--accent); }

.nav { margin-left: auto; }
.nav-list {
  display: flex; align-items: center; gap: .35rem;
  list-style: none; margin: 0; padding: 0;
}
.nav-list a {
  display: block; padding: .55rem .8rem;
  color: var(--text); text-decoration: none;
  font-weight: 600; font-size: .945rem;
  border-radius: var(--r-sm);
  transition: background .15s, color .15s;
}
.nav-list a:hover { background: var(--paper-alt-2); color: var(--ink); }
.nav-list a.is-active { color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: .5rem; }

/* Cart button */
.cart-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .9rem;
  background: var(--ink); color: #fff;
  border-radius: var(--r-sm);
  text-decoration: none; font-weight: 700; font-size: .9rem;
  transition: background .15s;
}
.cart-btn:hover { background: var(--accent); color: #fff; }
.cart-btn svg { width: 17px; height: 17px; }
.cart-count {
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-grid; place-items: center;
  background: var(--accent); color: #fff;
  border-radius: 999px; font-size: .72rem; font-weight: 800;
  line-height: 1;
}
.cart-btn:hover .cart-count { background: #fff; color: var(--accent); }
.cart-count[data-count="0"] { display: none; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; order: 3; width: 44px; height: 44px; }
  .nav {
    order: 4; flex-basis: 100%;
    display: none;
    border-top: 1px solid var(--border);
    padding-block: .5rem 1rem;
  }
  .nav.is-open { display: block; }
  /* The open menu must never run past the bottom of the screen — in phone
     landscape the full list is taller than the viewport. */
  .nav.is-open {
    max-height: calc(100vh - var(--header-h) - 1rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .header-bar { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-block: .6rem; gap: .75rem; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a { padding: .75rem .6rem; border-radius: 0; }
  .header-actions { margin-left: auto; order: 2; }
}

/* --- Keeping the header on one row -------------------------------------- *
 * At full size the bar needs ~355-380px for brand + cart + toggle, but a
 * 320px phone only offers 288px of content width. It used to wrap onto two
 * rows, stranding the hamburger on the far left and doubling the height of a
 * permanently sticky header. These rules shed width progressively instead. */

@media (max-width: 520px) {
  /* The trolley icon and the badge already say "cart". */
  .cart-btn .cart-label { display: none; }
  .cart-btn { padding: .55rem .75rem; gap: .4rem; }
}

@media (max-width: 400px) {
  .brand svg { width: 26px; height: 26px; }
  .brand { gap: .45rem; }
  .brand-word { font-size: 1.05rem; }
  .header-bar { gap: .5rem; }
  .announce { font-size: .78rem; padding-inline: .75rem; }
}

/* Smallest phones still in use (iPhone SE 1st gen, 320px). */
@media (max-width: 360px) {
  .brand svg { width: 24px; height: 24px; }
  .brand-word { font-size: .92rem; letter-spacing: -.04em; }
  .cart-btn { padding: .5rem .6rem; }
  .header-bar { gap: .4rem; }
}

/* --- Announcement bar --------------------------------------------------- */
.announce {
  background: var(--ink); color: #C7CCD4;
  font-size: .845rem; text-align: center;
  padding: .55rem var(--gutter);
}
.announce strong { color: #fff; }
.announce a { color: #fff; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem;
  border: 2px solid transparent; border-radius: var(--r-sm);
  font-weight: 700; font-size: .97rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Uses --accent-dark, not --accent. White on #E5322D measures 4.40:1, just
   under the 4.5:1 required for normal text — and 16.48px bold does not reach
   the large-text threshold. #C4241F measures 5.73:1 and is visually almost
   identical. The brand colour is unchanged everywhere else. */
.btn--primary { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.btn--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn--outline { background: transparent; border-color: var(--border-strong); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink); padding-inline: .5rem; }
.btn--ghost:hover { color: var(--accent); }

.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn--lg    { padding: 1rem 1.9rem; font-size: 1.03rem; }
.btn--sm    { padding: .5rem 1rem; font-size: .875rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row.center { justify-content: center; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: #C7CCD4;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -8%; bottom: -30%;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(229,50,45,.16), transparent 65%);
  pointer-events: none;
}
.hero-inner {
  display: grid; gap: clamp(2rem, 4.5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5rem);
  position: relative; z-index: 1;
}
/* Two columns only once there is genuinely room for them. Below 1150px the
   text column gets narrow enough that the headline and bullets wrap raggedly
   and the two columns end up very different heights — stacking looks better. */
@media (min-width: 1150px) {
  /* The image column is given slightly more room than the text column so the
     two sit at comparable heights. minmax(0,…) stops long words forcing the
     text column wider than its share. */
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); }
}

/* Stacked layout. Both blocks are capped and centred: left-aligned at full
   width the headline ran to ~950px lines on a tablet, and the image sat in a
   560px box with a few hundred pixels of dead space beside it. */
@media (max-width: 1149px) {
  .hero-inner { gap: clamp(1.75rem, 4vw, 2.5rem); }
  .hero-inner > * {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
  }
  .hero-media { max-width: 560px; }
}

.hero h1 {
  color: #fff;
  /* Smaller than the global h1 scale: the hero headline sits in a narrow
     column, and at the default size it ran to four ragged lines. */
  font-size: clamp(1.95rem, 4.1vw, 2.8rem);
  line-height: 1.12;
  margin-bottom: .7rem;
}
.hero .lede { color: #A8B0BC; max-width: 46ch; }
.hero-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
}
/* Full width of its column, natural height — never cropped. */
.hero-media img { width: 100%; height: auto; }

.hero-points {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: .7rem;
}
.hero-points li {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .95rem; line-height: 1.45; color: #B6BDC8;
}
/* Nudge the icon onto the cap-height of the first line so it reads as
   aligned with the text rather than floating above it. */
.hero-points svg {
  width: 17px; height: 17px; flex-shrink: 0;
  margin-top: .28em; color: var(--accent);
}
.hero-points strong { color: #fff; font-weight: 700; }

/* --- Trust strip -------------------------------------------------------- */
.trust {
  border-bottom: 1px solid var(--border);
  background: var(--paper-alt);
}
.trust-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding-block: 1.5rem;
}
.trust-item { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.trust-item svg { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; }
.trust-item strong { display: block; font-size: .93rem; line-height: 1.3; }
.trust-item span { color: var(--text-muted); font-size: .84rem; }

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-3px); }
.card-media { background: var(--paper-alt); position: relative; }
.card-media img { width: 100%; height: auto; padding: 1.2rem; }
.card-body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; gap: .55rem; }
.card-body h3 { margin: 0; font-size: 1.13rem; }
.card-body h3 a { color: var(--ink); text-decoration: none; }
.card-body h3 a:hover { color: var(--accent); }
.card-text { color: var(--text-muted); font-size: .915rem; margin: 0; flex: 1; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: .4rem; padding-top: .9rem;
  border-top: 1px solid var(--border);
}
.card-price { font-weight: 800; color: var(--ink); font-size: 1.09rem; }
.card-price small { display: block; font-size: .74rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }

.badge {
  position: absolute; top: .85rem; left: .85rem;
  background: var(--accent); color: #fff;
  font-size: .69rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 4px;
}
.badge--ink { background: var(--ink); }

/* --- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs { padding-block: 1rem .25rem; font-size: .855rem; }
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  color: var(--text-faint);
}
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .4rem; color: var(--border-strong); }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 600; }

/* --- Product page ------------------------------------------------------- */
.product-layout {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--section);
}
@media (min-width: 940px) {
  .product-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
  .product-buy { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.gallery { display: grid; gap: .75rem; }
.gallery-main {
  background: var(--paper-alt); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
/* Main product image: full container width, natural height, never cropped. */
.gallery-main img { width: 100%; height: auto; padding: clamp(1rem, 3vw, 2.5rem); }

.gallery-thumbs { display: flex; gap: .6rem; flex-wrap: wrap; }
.gallery-thumb {
  width: 76px; min-height: 76px; padding: .35rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-alt); border: 2px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; overflow: hidden;
}
/* Thumbnails fit inside their box whole — object-fit: contain letterboxes
   rather than crops, so the whole photo stays visible. */
.gallery-thumb img { width: 100%; height: auto; max-height: 68px; object-fit: contain; }
.gallery-thumb[aria-selected="true"] { border-color: var(--ink); }

.product-title { margin-bottom: .35rem; }
.product-tagline { color: var(--text-muted); font-size: 1.06rem; margin-bottom: 1.25rem; }

.price-block { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.price { font-size: clamp(1.9rem, 4vw, 2.4rem); font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.price-note { color: var(--text-faint); font-size: .875rem; }

.stock-line {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .875rem; font-weight: 600; color: var(--success);
  margin-bottom: 1.4rem;
}
.stock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }

/* Variant selector */
.field { margin-bottom: 1.25rem; }
.field-label {
  display: block; font-size: .8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: .55rem;
}
.variant-list { display: grid; gap: .55rem; }
.variant {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem;
  border: 2px solid var(--border); border-radius: var(--r);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.variant:hover { border-color: var(--border-strong); }
.variant input { accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
.variant:has(input:checked) { border-color: var(--ink); background: var(--paper-alt); }
.variant-name { font-weight: 700; font-size: .96rem; }
.variant-meta { font-size: .82rem; color: var(--text-muted); }
.variant-price { margin-left: auto; font-weight: 800; font-size: 1.02rem; }

.swatch-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch {
  padding: .55rem 1.05rem;
  border: 2px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer; font-weight: 600; font-size: .9rem;
}
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
/* The radio is invisible, so its focus ring landed on a transparent 13x13 box
   instead of the 66x45 label a keyboard user can actually see. Move the
   indicator to the label. */
.swatch:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.swatch:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Quantity */
.qty {
  display: inline-flex; align-items: center;
  border: 2px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden;
}
.qty button {
  width: 40px; height: 44px;
  background: var(--paper-alt); border: 0; cursor: pointer;
  font-size: 1.15rem; font-weight: 700; color: var(--ink);
}
.qty button:hover { background: var(--paper-alt-2); }
.qty input {
  width: 54px; height: 44px; text-align: center;
  border: 0; border-inline: 2px solid var(--border);
  font-weight: 700; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buy-row { display: flex; gap: .75rem; align-items: stretch; flex-wrap: wrap; margin-bottom: 1rem; }
.buy-row .btn { flex: 1; min-width: 190px; }

/* Delivery note box */
.buy-note {
  background: var(--paper-alt); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1rem 1.15rem;
  font-size: .885rem; color: var(--text-muted);
}
.buy-note ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.buy-note strong { color: var(--ink); }

/* Answer capsule — the AI-quotable definition block */
.answer-box {
  border-left: 4px solid var(--accent);
  background: var(--paper-alt);
  padding: 1.15rem 1.35rem;
  border-radius: 0 var(--r) var(--r) 0;
  margin-bottom: 1.5rem;
}
.answer-box p { font-size: 1.03rem; line-height: 1.6; margin: 0; color: var(--text); }
.answer-box p + p { margin-top: .7rem; }

.best-for {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem 1.2rem;
  background: var(--accent-soft); border-radius: var(--r);
  font-size: .93rem; margin-bottom: 1.5rem;
}
.best-for svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.best-for strong { display: block; margin-bottom: .15rem; }

/* --- Spec table --------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec-table {
  width: 100%; border-collapse: collapse;
  font-size: .93rem;
}
.spec-table th, .spec-table td {
  text-align: left; padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.spec-table th {
  font-weight: 700; color: var(--text-muted);
  width: 38%; white-space: nowrap;
}
.spec-table tbody tr:nth-child(odd) { background: var(--paper-alt); }
.spec-table caption {
  text-align: left; font-weight: 700; color: var(--ink);
  padding-bottom: .7rem;
}

.compare-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.compare-table th, .compare-table td {
  padding: .85rem 1rem; text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table thead th {
  background: var(--ink); color: #fff; font-weight: 700;
  border-bottom: 0;
}
.compare-table thead th:first-child { border-radius: var(--r-sm) 0 0 0; }
.compare-table thead th:last-child  { border-radius: 0 var(--r-sm) 0 0; }
.compare-table tbody th { font-weight: 700; color: var(--text-muted); }
.compare-table .yes { color: var(--success); font-weight: 700; }
.compare-table .no  { color: var(--text-faint); }

/* --- Feature list ------------------------------------------------------- */
.feature-list { display: grid; gap: 1.35rem; }
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature-num {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  border-radius: 50%; font-size: .82rem; font-weight: 800;
}
.feature h3 { margin: 0 0 .3rem; font-size: 1.06rem; }
.feature p  { margin: 0; color: var(--text-muted); font-size: .945rem; }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.check-list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; }
.check-list svg { width: 19px; height: 19px; color: var(--success); flex-shrink: 0; margin-top: 3px; }

/* --- FAQ ---------------------------------------------------------------- */
.faq-separator {
  border: 0; height: 1px;
  background: linear-gradient(90deg, var(--border), var(--border-strong), var(--border));
  margin-block: clamp(3rem, 6vw, 4.5rem) 0;
  position: relative;
}
.faq-separator::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 4px; border-radius: 2px;
  background: var(--accent);
}

.faq-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.faq-head { margin-bottom: 1.75rem; }
.faq-head h2 { margin-bottom: .35rem; }
.faq-head p  { color: var(--text-muted); margin: 0; }

.faq-list { display: grid; gap: .7rem; max-width: 860px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .15s;
}
.faq-item[open] { border-color: var(--border-strong); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 1.1rem 3rem 1.1rem 1.25rem;
  font-weight: 700; font-size: 1.005rem; color: var(--ink);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after {
  content: ""; position: absolute; right: 1.25rem; top: 50%;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--text-faint);
  border-bottom: 2.5px solid var(--text-faint);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s;
}
.faq-item[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq-answer { padding: 0 1.25rem 1.25rem; color: var(--text-muted); font-size: .95rem; }
.faq-answer p:first-child { margin-top: 0; }

/* --- Blog --------------------------------------------------------------- */
.post-card { }
.post-card .card-media img { width: 100%; height: auto; padding: 0; }
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--text-faint);
}
.post-meta .tag {
  background: var(--paper-alt-2); color: var(--text-muted);
  padding: .2rem .55rem; border-radius: 4px;
  font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em;
}

.post-hero { padding-block: clamp(2rem, 5vw, 3rem) 1.5rem; }
.post-hero h1 { max-width: 18ch; }
.post-figure {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border);
}
.post-figure img { width: 100%; height: auto; }

.prose { font-size: 1.045rem; line-height: 1.72; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  margin-top: 2.4em; margin-bottom: .55em;
  padding-top: 1.6rem; border-top: 1px solid var(--border);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 1.9em; margin-bottom: .45em; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--accent); font-weight: 700; }
.prose blockquote {
  margin: 1.6em 0; padding: 1.1rem 1.4rem;
  border-left: 4px solid var(--accent);
  background: var(--paper-alt);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 1.02rem;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose img { border-radius: var(--r); margin-block: 1.6em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }

.callout {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.15rem 1.35rem; border-radius: var(--r);
  background: var(--warning-bg); border: 1px solid #F0DEBC;
  font-size: .95rem;
}
.callout--info  { background: var(--paper-alt); border-color: var(--border); }
.callout--good  { background: var(--success-bg); border-color: #C6E5DA; }
.callout svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; }
.callout--info svg { color: var(--text-muted); }
.callout--good svg { color: var(--success); }
.callout svg { color: var(--warning); }
.callout strong { display: block; margin-bottom: .2rem; }
.callout p:last-child { margin-bottom: 0; }

/* Table of contents */
.toc {
  background: var(--paper-alt); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.25rem 1.4rem;
  margin-bottom: 2.5rem;
}
.toc h2 {
  font-size: .78rem !important; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted); margin: 0 0 .7rem !important;
  padding: 0 !important; border: 0 !important;
}
.toc ol { margin: 0; padding-left: 1.15rem; font-size: .93rem; }
.toc li + li { margin-top: .35rem; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

/* --- Cart & checkout ---------------------------------------------------- */
.cart-layout {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .cart-layout { grid-template-columns: minmax(0, 1.6fr) minmax(300px, .85fr); }
  .cart-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.cart-lines { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.cart-line {
  display: grid; gap: 1rem;
  grid-template-columns: 88px 1fr;
  padding: 1.15rem;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.cart-line:last-child { border-bottom: 0; }
.cart-line-media {
  width: 88px; padding: .4rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-alt); border-radius: var(--r-sm);
}
.cart-line-media img { width: 100%; height: auto; max-height: 80px; object-fit: contain; }
.cart-line-title { font-weight: 700; margin: 0 0 .15rem; font-size: 1rem; }
.cart-line-title a { color: var(--ink); text-decoration: none; }
.cart-line-title a:hover { color: var(--accent); }
.cart-line-meta { font-size: .855rem; color: var(--text-muted); margin: 0 0 .7rem; }
.cart-line-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cart-line-price { margin-left: auto; font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.link-remove {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-faint); font-size: .85rem; text-decoration: underline;
}
.link-remove:hover { color: var(--error); }

/* --- Free gift line ----------------------------------------------------- */
.cart-line--gift { background: var(--success-bg); }
.gift-tag {
  display: inline-block; vertical-align: 2px;
  margin-left: .45rem; padding: .15rem .5rem;
  background: var(--success); color: #fff;
  border-radius: 4px;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.cart-line-price--free { color: var(--success); }

/* Promotional banner on product pages */
.gift-banner {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem 1.2rem; margin-bottom: 1.5rem;
  background: var(--success-bg); border: 1px solid #C6E5DA;
  border-radius: var(--r);
  font-size: .93rem;
}
.gift-banner svg { width: 20px; height: 20px; color: var(--success); flex-shrink: 0; margin-top: 2px; }
.gift-banner strong { display: block; margin-bottom: .15rem; color: var(--ink); }

.summary {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.5rem; background: var(--paper-alt);
}
.summary h2 { font-size: 1.2rem; margin-bottom: 1.1rem; }
.summary-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .5rem; font-size: .95rem;
}
.summary-row span:last-child { font-weight: 600; white-space: nowrap; }
.summary-total {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .75rem; padding-top: .9rem;
  border-top: 2px solid var(--border-strong);
  font-size: 1.2rem; font-weight: 800; color: var(--ink);
}
.summary-note { font-size: .82rem; color: var(--text-faint); margin-top: .9rem; }

/* Fulfilment toggle */
.method-list { display: grid; gap: .6rem; margin-bottom: 1.25rem; }
.method {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.1rem; cursor: pointer;
  border: 2px solid var(--border); border-radius: var(--r);
  background: var(--paper);
  transition: border-color .15s;
}
.method:has(input:checked) { border-color: var(--ink); }
.method input { accent-color: var(--accent); width: 18px; height: 18px; margin: 3px 0 0; flex-shrink: 0; }
.method-title { font-weight: 700; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.method-price { color: var(--accent); font-weight: 800; }
.method-desc { font-size: .865rem; color: var(--text-muted); margin: .2rem 0 0; }

/* Forms */
.form-grid { display: grid; gap: 1.1rem; }
.form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.form-field label {
  display: block; font-size: .85rem; font-weight: 700;
  margin-bottom: .35rem; color: var(--text);
}
.form-field .req { color: var(--accent); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: .75rem .9rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--paper);
  transition: border-color .15s, box-shadow .15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field .hint { font-size: .8rem; color: var(--text-faint); margin-top: .3rem; }
.form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select {
  border-color: var(--error);
}
.field-error { font-size: .8rem; color: var(--error); margin-top: .3rem; font-weight: 600; }

.checkbox-row { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; }
.checkbox-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }

fieldset { border: 0; margin: 0 0 2rem; padding: 0; }
legend {
  font-size: 1.15rem; font-weight: 800; color: var(--ink);
  margin-bottom: 1rem; padding: 0;
}
.step-num {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; margin-right: .55rem;
  background: var(--ink); color: #fff;
  border-radius: 50%; font-size: .8rem; font-weight: 800;
  vertical-align: 2px;
}

/* --- Out of stock ------------------------------------------------------- */
.stock-line--out { color: var(--error); }
.stock-line--out .stock-dot { background: var(--error); }

/* Running low: amber rather than red — still buyable, just hurry. */
.stock-line--low { color: var(--warning); }
.stock-line--low .stock-dot { background: var(--warning); }
.badge--warn { background: var(--warning); }

/* Listing cards for unavailable products stay visible but read as muted. */
.card--out .card-media img { opacity: .55; filter: grayscale(35%); }
.card--out .card-price { color: var(--text-faint); }

/* --- Admin: stock screen ------------------------------------------------ */
.admin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.admin-form { max-width: 420px; margin-top: 1.5rem; }
.admin-form .form-field { margin-bottom: 1.25rem; }

/* --- Company identity block (About page) -------------------------------- */
.company-card {
  margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--paper-alt);
}
.company-lede { font-size: 1.05rem; margin: 0 0 1.25rem; }

.company-facts { display: grid; gap: .5rem 1.25rem; margin: 0; }
.company-facts dt {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}
.company-facts dd { margin: 0 0 .5rem; color: var(--text); }
@media (min-width: 560px) {
  .company-facts { grid-template-columns: 160px 1fr; align-items: baseline; }
  .company-facts dd { margin-bottom: 0; }
}

.group-sites { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .75rem; }
.group-sites li {
  padding: .85rem 1rem; background: var(--paper);
  border: 1px solid var(--border); border-radius: var(--r);
}
.group-sites a { text-decoration: none; }
.group-sites a strong { font-size: 1.02rem; }
.group-sites .muted { display: block; font-size: .875rem; margin-top: .15rem; }

.footer-group a { text-decoration: underline; }
.footer-break { display: none; }
@media (max-width: 700px) { .footer-break { display: block; } }

/* --- Admin: tabs + order list ------------------------------------------- */
.admin-tabs {
  display: flex; gap: .35rem; margin-top: 1.5rem;
  border-bottom: 2px solid var(--border);
}
.admin-tab {
  padding: .7rem 1.1rem; font-weight: 700; font-size: .95rem;
  color: var(--text-muted); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.is-current { color: var(--ink); border-bottom-color: var(--accent); }
.admin-tab-badge {
  display: inline-block; margin-left: .35rem; padding: .1rem .45rem;
  background: var(--warning); color: #fff; border-radius: 99px;
  font-size: .72rem; font-weight: 800; vertical-align: 1px;
}

.order-stats {
  display: grid; gap: .75rem; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.order-stat {
  padding: .9rem 1rem; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--paper);
}
.order-stat strong { display: block; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.order-stat span { font-size: .8rem; color: var(--text-muted); }
.order-stat--paid strong   { color: var(--success); }
.order-stat--unpaid strong { color: var(--warning); }

.order-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 760px; }
.order-table th {
  text-align: left; padding: .6rem .7rem; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.order-table td { padding: .7rem; vertical-align: top; }
.order-row td { border-top: 1px solid var(--border); }
.order-row code { font-family: var(--font-mono); font-weight: 700; }
.order-row--unpaid { background: var(--warning-bg); }
.order-row--failed { background: var(--error-bg); }

.order-items td { padding-top: 0; font-size: .82rem; color: var(--text-muted); }
.order-items--unpaid { background: var(--warning-bg); }
.order-items--failed { background: var(--error-bg); }
.order-item { display: inline-block; margin-right: .9rem; }

.order-pill {
  display: inline-block; padding: .25rem .6rem; border-radius: 4px;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.order-pill--paid   { background: var(--success-bg); color: var(--success); }
.order-pill--unpaid { background: #F6E4C0;           color: var(--warning); }
.order-pill--failed { background: #F8D2D0;           color: var(--error); }

.stock-list { display: grid; gap: 1rem; margin-top: 1.75rem; }

.stock-row {
  display: grid; gap: .9rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--paper);
  transition: border-color .15s, background .15s;
}
.stock-row--out { border-color: #F5C9C7; background: var(--error-bg); }
.stock-row--low { border-color: #EBD3A8; background: var(--warning-bg); }

.stock-id { min-width: 0; }

/* Current state, stated in words so the screen reads at a glance. */
.stock-state {
  display: inline-block; margin-top: .45rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 4px;
}
.stock-state--ok        { background: var(--success-bg); color: var(--success); }
.stock-state--low       { background: #F6E4C0;           color: var(--warning); }
.stock-state--out       { background: #F8D2D0;           color: var(--error); }
.stock-state--untracked { background: var(--paper-alt-2); color: var(--text-muted); }

/* The number box: big enough to hit with a thumb on a phone. */
.stock-qty label {
  display: block; font-size: .8rem; font-weight: 700;
  color: var(--text-muted); margin-bottom: .3rem;
}
.stock-qty input {
  width: 100%; max-width: 130px;
  padding: .6rem .7rem; font-size: 1.1rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
}
.stock-qty input:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.stock-qty .hint { display: block; margin-top: .3rem; font-size: .76rem; color: var(--text-faint); }
.stock-name { display: block; font-size: 1.02rem; color: var(--ink); }
.stock-meta { display: block; font-size: .84rem; font-weight: 400; color: var(--text-muted); margin-top: .15rem; }

.stock-note label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--text-muted); }
.stock-note input {
  width: 100%; padding: .6rem .8rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
}
.stock-note input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* The note stays visible at every stock level. It used to appear only on
   sold-out rows, which meant typing 0, saving, then coming back to write the
   note — two trips for one job. Now both go in the same save. */
.stock-row--out .stock-note label { color: var(--error); }

.stock-link { font-size: .85rem; justify-self: start; }

@media (min-width: 720px) {
  .stock-row {
    grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto;
    align-items: start;
  }
  .stock-link { justify-self: end; align-self: center; }
}

/* --- Alerts ------------------------------------------------------------- */
.alert {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .95rem 1.2rem; border-radius: var(--r);
  font-size: .93rem; margin-bottom: 1.5rem;
  border: 1px solid transparent;
}
.alert svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; }
.alert--success { background: var(--success-bg); border-color: #C6E5DA; color: #0C5F45; }
.alert--error   { background: var(--error-bg);   border-color: #F5C9C7; color: #96201C; }
.alert--info    { background: var(--paper-alt);  border-color: var(--border); color: var(--text); }

/* --- Empty state -------------------------------------------------------- */
.empty {
  text-align: center; padding: clamp(3rem, 8vw, 5rem) 1rem;
  border: 2px dashed var(--border); border-radius: var(--r-lg);
}
.empty svg { width: 48px; height: 48px; color: var(--border-strong); margin: 0 auto 1rem; }

/* --- Order confirmation ------------------------------------------------- */
.order-hero { text-align: center; padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; }
.order-tick {
  width: 66px; height: 66px; margin: 0 auto 1.25rem;
  display: grid; place-items: center;
  background: var(--success-bg); border-radius: 50%;
}
.order-tick svg { width: 32px; height: 32px; color: var(--success); }

/* Green means paid. Amber means we are still waiting. Red means it failed.
   Never show a success colour for an unpaid order. */
.order-tick--pending { background: var(--warning-bg); }
.order-tick--pending svg { color: var(--warning); }
.order-tick--failed  { background: var(--error-bg); }
.order-tick--failed  svg { color: var(--error); }
.order-ref {
  display: inline-block; margin-top: .5rem;
  font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700;
  background: var(--paper-alt); border: 1px solid var(--border);
  padding: .5rem 1rem; border-radius: var(--r-sm);
  letter-spacing: .04em;
}
.pay-panel {
  border: 2px solid var(--ink); border-radius: var(--r-lg);
  padding: clamp(1.35rem, 3vw, 2rem);
  margin-block: 2rem;
}
.pay-panel h2 { margin-bottom: .5rem; }
.pay-detail {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem;
  font-size: .95rem; margin-top: 1.1rem;
}
.pay-detail dt { font-weight: 700; color: var(--text-muted); }
.pay-detail dd { margin: 0; font-family: var(--font-mono); }

/* --- Showroom / contact ------------------------------------------------- */
.info-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.info-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.4rem;
}
.info-card h3 { font-size: 1.02rem; margin-bottom: .5rem; display: flex; gap: .5rem; align-items: center; }
.info-card h3 svg { width: 19px; height: 19px; color: var(--accent); }
.info-card p, .info-card address { font-style: normal; color: var(--text-muted); font-size: .93rem; margin: 0; }
.hours-list { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.hours-list li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .3rem; }
.hours-list li span:first-child { color: var(--text-muted); }

/* Larger hours table used on the contact page */
.hours-list--lg { font-size: 1rem; }
.hours-list--lg li {
  padding-block: .6rem;
  border-bottom: 1px solid var(--border);
}
.hours-list--lg li:last-child { border-bottom: 0; }
.hours-list--lg li span:last-child { font-weight: 600; color: var(--ink); }

/* --- Contact page ------------------------------------------------------- */
.contact-card { display: flex; flex-direction: column; }
.contact-card h3 { margin-bottom: .75rem; }
.contact-card p { font-size: .93rem; }

/* The address or number itself — the thing people came to the page for. */
.contact-primary {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 .65rem;
  word-break: break-word;      /* long addresses must not overflow on mobile */
}
.contact-primary a { text-decoration: none; }
.contact-primary a:hover { text-decoration: underline; }

/* --- Location photos ---------------------------------------------------- */
.photo-card {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}
.photo-card img { width: 100%; height: auto; }
.photo-card figcaption {
  padding: .9rem 1.1rem;
  font-size: .9rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* Standalone image inside a prose/story column */
.story-image {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

/* --- Video direction cards ---------------------------------------------- */
.video-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.video-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  color: inherit;
}

.video-thumb { position: relative; display: block; background: var(--ink); }
.video-thumb img { width: 100%; height: auto; display: block; }

/* Play badge, centred over the still. */
.video-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 13, 16, .25);
  transition: background .18s;
}
.video-play svg {
  width: 26px; height: 26px;
  padding: .9rem 1rem .9rem 1.15rem;
  box-sizing: content-box;
  color: #fff;
  background: rgba(229, 50, 45, .92);
  border-radius: 50%;
}
.video-card:hover .video-play { background: rgba(11, 13, 16, .12); }
.video-card:hover .video-play svg { background: var(--accent); }

.video-body { display: block; padding: 1.1rem 1.2rem; }
.video-title {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .35rem;
  line-height: 1.35;
}
.video-text { display: block; font-size: .9rem; color: var(--text-muted); }

/* Contact links sitting on the dark CTA band */
.cta-band .cloak-link,
.cta-mail { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cta-band .cloak-link:hover,
.cta-mail:hover { color: var(--accent); }

/* --- Internal link cluster ---------------------------------------------- */
.link-cluster {
  background: var(--paper-alt); border-radius: var(--r-lg);
  padding: clamp(1.35rem, 3vw, 2rem);
  margin-block: 2.5rem;
}
.link-cluster h2 { font-size: 1.15rem; margin-bottom: .9rem; }
.link-cluster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.link-cluster li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; }
.link-cluster svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 4px; }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { background: var(--ink); color: #B6BDC8; }
.cta-band h2 { color: #fff; }
.cta-inner { padding-block: clamp(2.75rem, 6vw, 4rem); text-align: center; }
.cta-inner p { max-width: 55ch; margin-inline: auto; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--ink); color: #99A2AE;
  font-size: .92rem;
  padding-block: clamp(3rem, 6vw, 4rem) 0;
}
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  padding-bottom: 2.5rem;
}
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 720px) { .footer-brand { grid-column: auto; max-width: 300px; } }
.footer-brand .brand { color: #fff; margin-bottom: .9rem; }
.footer-brand .brand svg { color: #fff; }
.footer-brand p { font-size: .9rem; line-height: 1.6; }
.site-footer h3 {
  color: #fff; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: .95rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-links a { color: #99A2AE; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer .cloak-link { color: #fff; cursor: pointer; }

.footer-bar {
  border-top: 1px solid var(--ink-line);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .845rem;
}
.footer-bar p { margin: 0; }
.footer-bar nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bar a { color: #99A2AE; text-decoration: none; }
.footer-bar a:hover { color: #fff; }

/* --- Cloaked contact links --------------------------------------------- */
.cloak-link { cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cloak-link:hover { color: var(--accent-dark); }
.cloak-text { }

/* --- Utilities ---------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }

/* --- Touch targets ------------------------------------------------------ *
 * Applied only on touch pointers so desktop keeps its tighter spacing.
 * Small buttons and inline links were 18-37px tall, below the 44px comfort
 * threshold for a fingertip. */
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; }

  .link-remove { padding-block: .65rem; }

  /* Inline links become taller hit areas without moving visually. */
  .breadcrumbs a,
  .announce a,
  .footer-bar a {
    display: inline-block;
    padding-block: .4rem;
  }

  .footer-links { gap: .9rem; }
  .footer-links a { display: inline-block; padding-block: .25rem; }
  .footer-bar nav { gap: 1.35rem; row-gap: .5rem; }

  .hours-list li { padding-block: .5rem; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .announce, .cta-band, .btn { display: none !important; }
  body { font-size: 11pt; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}