/*
 * styles.css - deckingoilsprayer.uk
 * Mobile-first, data-attribute driven (no BEM). Colours come from assets/tokens.css.
 * No font imports (HTML loads them), no images. Ranges written as "to".
 */

/* ==========================================================================
   1. RESET AND BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-slate-500);
  background: var(--color-cream-500);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* room for the sticky bottom tab bar on mobile */
  padding-bottom: env(safe-area-inset-bottom);
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--color-green-500); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--color-green-700); }

strong, b { font-weight: 600; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  transform: translateY(-150%);
  padding: 0.65rem 0.9rem;
  color: var(--text-on-green);
  background: var(--color-green-700);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-slate-500);
  line-height: 1.18;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 5vw + 0.5rem, 3rem); font-weight: 800; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 3vw + 0.4rem, 2.1rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.2rem, 1.5vw + 0.5rem, 1.4rem); font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

p[data-lede] {
  font-size: clamp(1.1rem, 1vw + 0.7rem, 1.35rem);
  line-height: 1.5;
  color: var(--color-green-700);
  max-width: 60ch;
  margin-bottom: 1.5rem;
}

p[data-muted] { color: #5b6573; font-size: 0.9375rem; }

p[data-todo] {
  color: var(--color-amber-700);
  background: var(--color-amber-50);
  border: 1px dashed var(--color-amber-500);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
}

/* ==========================================================================
   3. LAYOUT: WRAP + SECTIONS + BANDS
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

section[data-section] {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  scroll-margin-top: 1.5rem;
}

section[data-band="tint"] { background: var(--color-tint-500); }

section[data-section] > .wrap > h2 { margin-bottom: 0.4em; }

/* keep anchor targets clear of the desktop top bar */
@media (min-width: 768px) {
  section[data-section] { scroll-margin-top: 5rem; }
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 0.7rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: var(--border-width-thick) solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }

/* primary: amber background, SLATE text (AA fix, never white) */
.btn[data-variant="primary"] {
  background: var(--color-amber-500);
  color: var(--text-on-amber);
  border-color: var(--color-amber-500);
}
.btn[data-variant="primary"]:hover {
  background: var(--color-amber-600);
  border-color: var(--color-amber-600);
  color: var(--text-on-amber);
}

/* buy: forest green background, white text */
.btn[data-variant="buy"] {
  background: var(--color-green-500);
  color: var(--text-on-green);
  border-color: var(--color-green-500);
}
.btn[data-variant="buy"]:hover {
  background: var(--color-green-700);
  border-color: var(--color-green-700);
  color: var(--text-on-green);
}

/* ghost: outline only */
.btn[data-variant="ghost"] {
  background: transparent;
  color: var(--color-green-700);
  border-color: var(--color-green-500);
}
.btn[data-variant="ghost"]:hover {
  background: var(--color-green-50);
  color: var(--color-green-700);
}

/* ==========================================================================
   5. BADGES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.6em;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge[data-variant="best"] {
  background: var(--color-amber-500);
  color: var(--text-on-amber);
  border-color: var(--color-amber-600);
}
.badge[data-variant="tier"] {
  background: var(--color-green-500);
  color: var(--text-on-green);
  border-color: var(--color-green-600);
}
.badge[data-variant="sprayable"] {
  background: var(--color-green-50);
  color: var(--color-green-700);
  border-color: var(--color-green-300);
}
.badge[data-variant="brush"] {
  background: #f3ece4;
  color: var(--color-sienna-500);
  border-color: var(--color-sienna-500);
}
.badge[data-variant="not-tested"] {
  background: #eef0f3;
  color: #4a5568;
  border-color: var(--border-color-light);
}

/* ==========================================================================
   6. GRID + CARD
   ========================================================================== */

.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grid[data-cols="2"],
  .grid[data-cols="3"],
  .grid[data-cols="4"],
  .grid[data-cols="5"] { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  .grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
  .grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
}

.card {
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: break-word;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
/* push a trailing button (and the spec list above it) so buttons align across equal-height cards */
.card > .btn:last-child { margin-top: auto; align-self: flex-start; }
.card .card-specs { margin-bottom: 1rem; }
.card-facts { margin: 0 0 1rem; padding: 0; }
.card-facts dd { margin: 0; }
.card-facts .card-meta,
.card-facts .card-price { line-height: 1.7; }
.card-facts .card-meta { margin-bottom: 1rem; }

/* honesty-note: Ronseal thumbnail beside the "not sprayable" explanation */
[data-component="honesty-note"] { flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 1rem 1.25rem; }
[data-component="honesty-note"] .honesty-body { flex: 1 1 18rem; margin: 0; }
[data-component="honesty-note"] .honesty-body .ico { color: var(--color-green-500); vertical-align: -0.15em; margin-right: 0.15rem; }
.card[data-component="honesty-note"] > .prod-thumb:first-child { margin: 0; }

/* ==========================================================================
   7. TESTED PICK (.pick + .pick-head + details)
   ========================================================================== */

.pick {
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  overflow: hidden;
  scroll-margin-top: 5rem;
}

.pick-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.pick-id {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: 1 1 16rem;
  min-width: 0;
}
.pick-id > .ico {
  font-size: 2.1em;
  color: var(--color-green-500);
  flex: none;
}
.pick-thumb {
  flex: none; width: 140px; height: 140px;
  object-fit: contain;
  padding: 8px;
  border-radius: var(--radius-md);
  background: #ffffff; border: 1px solid var(--border-color-light);
}
.pick-thumb--ph { display: flex; align-items: center; justify-content: center; }
.pick-thumb--ph .ico { font-size: 2.3em; color: var(--color-green-500); }
@media (max-width: 560px) { .pick-thumb { width: 128px; height: 128px; } }
/* tiny product thumbnail in the comparison table model column */
.cmp-model { display: flex; align-items: center; gap: 0.6rem; }
.cmp-thumb { flex: none; width: 40px; height: 40px; object-fit: contain; background: #ffffff; border: 1px solid var(--border-color-light); border-radius: 6px; }
.cmp-thumb--ph { display: flex; align-items: center; justify-content: center; }
.cmp-thumb--ph .ico { font-size: 1.2em; color: var(--color-green-500); }

/* product image in consumable + catalogue cards, clean square, never the banner crop */
.prod-thumb {
  flex: none; width: 116px; height: 116px; object-fit: contain;
  padding: 8px;
  background: #ffffff; border: 1px solid var(--border-color-light); border-radius: var(--radius-md);
}
/* the thumb is the card's first child; .card>:first-child zeroes its top margin,
   so re-add breathing room above the bottle with a higher-specificity rule */
.card > .prod-thumb:first-child { margin: 0.4rem 0 1rem; }
/* tiny thumbnail in the oil-library table */
.lib-model { display: flex; align-items: center; gap: 0.55rem; }
.lib-thumb { flex: none; width: 38px; height: 38px; object-fit: contain; background: #ffffff; border: 1px solid var(--border-color-light); border-radius: 5px; }

/* "skip these" caution list as tidy bordered rows */
.skip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.skip-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-left: 3px solid var(--color-sienna-500);
  border-radius: var(--radius-md);
}
.skip-thumb {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: contain;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-sm);
}
.skip-thumb--ph { display: flex; align-items: center; justify-content: center; }
.skip-thumb--ph .ico { font-size: 1.7em; color: var(--color-green-500); }
.skip-copy { display: block; min-width: 0; }
.skip-name { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; color: var(--color-slate-500); margin-bottom: 0.2rem; }
.skip-name .ico { color: var(--color-sienna-500); }
.skip-reason { display: block; font-size: 0.92rem; line-height: 1.5; color: var(--color-slate-500); }
.pick-id h3 { margin: 0 0 0.4rem; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.2; }
.model-code {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-slate-300);
  letter-spacing: 0.01em;
}
.pick-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.pick-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; flex: none; }
.pick-why {
  margin: 0;
  padding: 0 clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--color-slate-500);
}
.price { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--color-slate-500); white-space: nowrap; }
/* small jump link beside the sprayer to the sprayable oils that suit it */
.pick-oils-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.9rem; font-weight: 600;
  color: var(--color-green-700); text-decoration: none;
}
.pick-oils-link:hover { text-decoration: underline; }
.pick-oils-link .ico { flex: none; color: var(--color-sienna-500); }
@media (max-width: 560px) {
  .pick-buy { align-items: flex-start; flex-basis: 100%; }
}

details[data-pick-detail] {
  border-top: 1px solid var(--border-color-light);
}
details[data-pick-detail] > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem clamp(1.1rem, 2.5vw, 1.5rem);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-green-700);
  background: var(--color-tint-500);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
details[data-pick-detail] > summary::-webkit-details-marker { display: none; }
details[data-pick-detail] > summary::after {
  content: "+";
  font-size: 1.3em;
  line-height: 1;
  color: var(--color-amber-600);
}
details[data-pick-detail][open] > summary::after { content: "\2212"; } /* minus sign */
details[data-pick-detail] > summary:hover { background: var(--color-green-50); }
.pick-detail-label { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.2rem; min-width: 0; }
.pick-detail-label small {
  font-family: var(--font-body); font-weight: 500; font-size: 0.84rem;
  color: var(--color-slate-300); line-height: 1.4;
}
.pick-test-summary {
  border-left: 3px solid var(--color-amber-500);
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-cream-500);
  border-radius: var(--radius-sm);
}
details[data-pick-detail] > *:not(summary) {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}

/* ==========================================================================
   8. STARS
   ========================================================================== */

.stars {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 600;
  color: var(--color-slate-500);
  font-size: 0.95rem;
}
.stars .ico { color: var(--color-amber-500); font-size: 1.1em; }

/* ==========================================================================
   9. BUY BLOCK (consumable)
   ========================================================================== */

.buyblock {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  background: var(--color-cream-500);
  margin-bottom: 0.75rem;
}
.buyblock .ico { font-size: 1.35em; color: var(--color-sienna-500); flex: none; }
/* product thumbnail tying the oil to the sprayer it was run through */
.buyblock-thumb {
  flex: none; width: 60px; height: 60px; object-fit: contain; padding: 4px;
  background: #ffffff; border: 1px solid var(--border-color-light); border-radius: var(--radius-md);
}
/* name grows and pushes price + a compact button to the right; the button only
   spans the full width on the narrowest screens */
.buyblock-name { flex: 1 1 11rem; font-weight: 600; }
.buyblock-price { flex: none; font-family: var(--font-heading); font-weight: 700; color: var(--color-slate-500); white-space: nowrap; }
.buyblock .btn { flex: 0 0 auto; }
@media (max-width: 480px) { .buyblock .btn { flex: 1 0 100%; } }

/* ==========================================================================
   TEST NEXT VOTING + REQUESTS
   ========================================================================== */
.test-next-layout {
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
}
@media (min-width: 900px) {
  .test-next-layout { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr); align-items: start; }
}
.test-next-alert {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-green-300);
  border-left: 4px solid var(--color-green-500);
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--color-green-700);
  font-weight: 600;
}
.test-next-alert[data-alert="error"] {
  border-color: var(--color-amber-500);
  border-left-color: var(--color-amber-600);
  color: var(--color-sienna-500);
}
.test-next-group + .test-next-group { margin-top: 2rem; }
.test-candidate-list {
  display: grid;
  gap: 0.9rem;
}
.test-candidate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem 1rem;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 700px) {
  .test-candidate { grid-template-columns: auto minmax(0, 1fr) minmax(140px, auto); align-items: center; }
}
.test-candidate-media {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.test-candidate-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}
.test-candidate-media span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-green-500);
  font-size: 2.4rem;
}
.test-candidate-copy { min-width: 0; }
.test-candidate-copy h4 { margin-top: 0.45rem; }
.test-candidate-copy p {
  margin-bottom: 0.5rem;
  font-size: 0.94rem;
  line-height: 1.55;
}
.test-candidate-use {
  color: var(--color-slate-300);
}
.vote-form {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-color-light);
}
@media (min-width: 700px) {
  .vote-form {
    grid-column: auto;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 1rem;
    border-top: 0;
    border-left: 1px solid var(--border-color-light);
  }
}
.vote-count {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.08rem;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--color-slate-300);
}
@media (min-width: 700px) {
  .vote-count { align-items: center; text-align: center; }
}
.vote-count strong {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--color-slate-500);
}
.vote-count small { font-size: 0.72rem; }
.test-request-panel {
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-top: 4px solid var(--color-amber-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.1rem, 2.5vw, 1.45rem);
}
.request-form {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}
.request-form label {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-slate-500);
}
.request-form input,
.request-form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: var(--color-slate-500);
  background: var(--color-cream-500);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
}
.request-form textarea { resize: vertical; min-height: 7rem; }
.request-form input:focus,
.request-form textarea:focus {
  border-color: var(--color-amber-500);
  outline: 3px solid rgba(212, 139, 32, 0.18);
}
.request-hp {
  position: absolute;
  left: -9999px;
}
.reader-requests {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-color-light);
}
.reader-requests ul {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}
.reader-requests li {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--color-tint-500);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
}
.reader-requests li span,
.reader-requests li small {
  font-size: 0.88rem;
  line-height: 1.45;
}
.reader-requests li small { color: var(--color-slate-300); }

/* consumable card spec facts */
.card > .ico:first-child { font-size: 1.7em; color: var(--color-green-500); }
.card-specs { margin: 0.6rem 0; padding: 0; display: grid; grid-template-columns: auto max-content minmax(0, 1fr); gap: 0.5rem 0.55rem; align-items: start; }
.card-specs dt { grid-column: 1 / 3; display: flex; align-items: flex-start; gap: 0.55rem; margin: 0; font-size: 0.95rem; font-weight: 400; line-height: 1.4; }
.card-specs dd { grid-column: 3; margin: 0; font-size: 0.95rem; line-height: 1.4; }
.card-specs dt .ico { color: var(--color-sienna-500); margin-top: 0.12em; }
.card-specs dt[data-spec="price"] { grid-column: 1; }
.card-specs dt[data-spec="price"] + dd { grid-column: 2 / 4; }

/* compact visual tags for non-powered applicator cards */
.applicator-tags {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 1.25rem;
  padding: 0;
}
.applicator-tags li {
  display: grid;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  background: var(--color-tint-500);
  border: 1px solid var(--border-color-light);
  border-left: 3px solid var(--color-green-500);
  border-radius: var(--radius-md);
}
.applicator-tags li[data-tag="risk"] { border-left-color: var(--color-amber-500); }
.applicator-tags li[data-tag="speed"] { border-left-color: var(--color-sienna-500); }
.applicator-tags span {
  justify-self: start;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-full);
  background: #ffffff;
  color: var(--color-green-700);
  border: 1px solid var(--color-green-200);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.applicator-tags li[data-tag="risk"] span {
  color: var(--color-sienna-500);
  border-color: var(--color-amber-500);
}
.applicator-tags li[data-tag="speed"] span {
  color: var(--color-sienna-500);
  border-color: var(--color-sienna-500);
}
.applicator-tags strong {
  color: var(--color-slate-500);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ==========================================================================
   HOW-TO STEP CARDS
   ========================================================================== */
.steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.step {
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
}
@media (min-width: 680px) {
  .step { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; }
  .step:nth-child(even) .step-media { order: 2; }
}
.step-media { margin: 0; background: var(--color-tint-500); min-height: 180px; }
.step-media figure[data-placeholder] { margin: 0; height: 100%; border: none; border-radius: 0; }
.step-media img { display: block; width: 100%; height: 100%; min-height: 180px; object-fit: cover; }
/* how-to lead thumbnail (16:9) above the steps */
.how-to-lead { margin: 1.25rem 0 1.75rem; }
.how-to-lead img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border-color-light); box-shadow: var(--shadow-sm); }
/* kit photo + shop links inside the Overspray and PPE accordion */
.ppe-figure { margin: 0 0 1rem; max-width: 420px; }
.ppe-figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border-color-light); }
.ppe-figure figcaption { margin-top: 0.4rem; font-size: 0.85rem; color: var(--color-slate-300); }
.ppe-shop { font-size: 0.95rem; }
.step-body { padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.step-num {
  float: left;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--color-amber-500); color: var(--text-on-amber, #1e293b);
  font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem;
  margin: 0.1rem 0.75rem 0 0;
}
.step-body h3 { margin: 0 0 0.6rem; overflow: hidden; } /* sits beside the number */
.step-body p { margin: 0 0 0.7rem; clear: left; }
.step-body p:last-child { margin: 0; }

/* ==========================================================================
   VERTICAL RHYTHM + READABILITY
   ========================================================================== */
/* separate a heading from the content block directly above it */
:is(p, ul:not(.kit-list), ol, table[data-table], figure, .grid, [data-component="faq"]) + :is(h3, h4) { margin-top: 1.9em; }
/* airier body copy for long passages */
p { line-height: 1.72; }
.card p, .step-body p, [data-pick-detail] p { line-height: 1.7; }

/* ==========================================================================
   HERO PRICE-TIER TILES
   ========================================================================== */
.tier-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 1.1rem;
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-slate-500);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.tier-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tier-tile-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-green-700);
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.tier-tile-name .ico { color: var(--color-green-500); align-self: center; }
.tier-tile-price { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: var(--color-slate-500); }
.tier-tile-role { font-size: 0.85rem; color: var(--color-slate-300); }
.tier-tile-thumb { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: contain; padding: 10px; align-self: stretch; background: #ffffff; border: 1px solid var(--border-color-light); border-radius: 8px; }
.tier-tile-thumb--ph { display: flex; align-items: center; justify-content: center; }
.tier-tile-thumb--ph .ico { font-size: 2em; color: var(--color-green-500); }
.hero-cta { margin-top: 1.75rem; }
.hero-photo {
  margin: 1.5rem 0 2rem;
  position: relative;
}
.hero-photo > picture img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* three worked deck-size examples overlaid on the left of the hero photo,
   desktop only, hidden on mobile and tablet */
.hero-size-strip { display: none; }
@media (min-width: 1024px) {
  .hero-size-strip {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    position: absolute;
    left: clamp(0.75rem, 1.8vw, 1.4rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .hero-size-thumb {
    width: 124px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 5px 5px 6px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .hero-size-thumb:hover { transform: translateX(3px); }
  .hero-size-thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border: 0;
    border-radius: calc(var(--radius-md) - 2px);
    box-shadow: none;
  }
  .hero-size-cap {
    display: block;
    margin-top: 4px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--color-green-700);
  }
}


/* ==========================================================================
   PROOF GALLERIES (real garden photos + sprayer purchases)
   ========================================================================== */
.proof-shot { margin: 0; }
.proof-shot figure[data-placeholder] { margin: 0 0 0.5rem; aspect-ratio: 4 / 3; }
.proof-cap { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--color-slate-500); }
.proof-cap strong { color: var(--color-green-700); }

/* testing-kit: photo beside the prose, centred on its column */
.kit-layout { align-items: center; }
.kit-copy > p:last-child { margin-bottom: 0; }
/* the kit photo is square, show it whole instead of the proof-shot 4:3 crop */
.proof-shot.kit-shot img { aspect-ratio: 1 / 1; }

/* compact construction proof under the test-deck copy */
.test-deck-mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.8rem;
  margin: 1.25rem 0 2rem;
}
.test-deck-mini figure {
  margin: 0;
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.test-deck-mini img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.test-deck-mini figcaption {
  padding: 0.65rem 0.75rem 0.8rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-slate-500);
}
.test-deck-mini figcaption strong {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-heading);
  color: var(--color-green-700);
}

/* footer affiliate + freshness notes */
.footer-notes { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.18); display: grid; gap: 0.75rem; max-width: 70ch; }
.footer-notes p { font-size: 0.85rem; line-height: 1.55; margin: 0; opacity: 0.9; }
.footer-notes strong { opacity: 1; }

/* affiliate disclosure callout (after the picker, before the test section) */
[data-disclosure-note] {
  padding: 1rem 1.25rem;
  background: var(--color-tint-500);
  border: 1px solid var(--border-color-light);
  border-left: 4px solid var(--color-amber-500);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-slate-500);
}
[data-disclosure-note] p { margin: 0 0 0.65rem; }
[data-disclosure-note] p:last-child { margin: 0; }

/* ==========================================================================
   SPRAYER PICKER (defined panel + quiz)
   ========================================================================== */
.picker-panel {
  max-width: 720px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-top: 4px solid var(--color-amber-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.3rem, 3.5vw, 2.25rem);
}
.picker-panel h2 { margin-top: 0.2rem; }
.picker-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-amber-600);
}
[data-picker] { margin-top: 1.25rem; }
[data-picker-progress] {
  margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-green-500);
}
[data-picker] h3 { margin: 0 0 0.35rem; }
[data-picker-hint] { margin: 0 0 1rem; color: var(--color-slate-300); font-size: 0.92rem; }
[data-picker-options] { display: flex; flex-direction: column; gap: 0.6rem; }
/* layout: options on the left, one shared preview image on the right (image questions) */
.picker-q--img { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1rem; align-items: start; }
@media (max-width: 560px) { .picker-q--img { grid-template-columns: 1fr; } }

[data-picker-options] { display: flex; flex-direction: column; gap: 0.6rem; }
[data-picker-options] button {
  text-align: left; width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border-color-light);
  border-radius: var(--radius-md);
  background: var(--color-tint-500);
  color: var(--color-slate-500);
  font: inherit; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.opt-label { font-weight: 500; }
/* hovered or active option turns colour */
[data-picker-options] button:hover,
[data-picker-options] button[data-active] {
  border-color: var(--color-green-500);
  background: #ffffff;
  color: var(--color-green-700);
}

/* the single large preview that swaps with the hovered option */
.picker-preview { position: sticky; top: 1rem; }
.picker-preview-img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius-md); border: 1px solid var(--border-color-light);
  background: #ffffff;
}
.picker-preview-img--missing {
  border-style: dashed;
  background: var(--color-tint-500)
    url("assets/icons/deck-boards-grooved.svg") center / 64px no-repeat;
}
[data-picker-options] button:hover { border-color: var(--color-green-500); background: #ffffff; transform: translateX(3px); }
[data-picker-options] button:focus-visible { outline: 3px solid var(--focus-ring, var(--color-amber-600)); outline-offset: 2px; }
[data-picker-reset] {
  background: none; border: 0; padding: 0; margin-left: 0.5rem;
  color: var(--color-green-700); font: inherit; text-decoration: underline; cursor: pointer;
}

/* ==========================================================================
   TESTER NOTE (collapsible author/E-E-A-T block, understated)
   ========================================================================== */
.tester-note { margin-top: 1.75rem; border: 1px solid var(--border-color-light); border-radius: var(--radius-md); background: #ffffff; }
.tester-note > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1rem;
  font-family: var(--font-heading); font-weight: 600; color: var(--color-green-700);
}
.tester-note > summary::-webkit-details-marker { display: none; }
.tester-note > summary::after { content: "+"; margin-left: auto; color: var(--color-amber-600); font-size: 1.2em; line-height: 1; }
.tester-note[open] > summary::after { content: "\2212"; }
.tester-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--color-green-500); flex: none; }
.tester-avatar .ico { color: #ffffff; }
.tester-note-body { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; padding: 0 1rem 1.1rem; }
.tester-note-photo { flex: 0 0 140px; }
.tester-note-photo figure[data-placeholder] { margin: 0; }
.tester-note-text { flex: 1 1 16rem; }
.tester-note-text p { font-size: 0.95rem; }
.tester-note-text p:last-child { margin-bottom: 0; }

/* ==========================================================================
   VIDEO CARDS (click-to-load YouTube)
   ========================================================================== */
.video-card { margin: 0; display: flex; flex-direction: column; }
.ytlite {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--color-slate-500);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.ytlite img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.92; transition: opacity 0.15s ease; }
.ytlite:hover img { opacity: 1; }
.ytlite-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-amber-500);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.ytlite-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0; height: 0;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--color-slate-500);
}
.ytlite:focus-visible { outline: 3px solid var(--focus-ring, var(--color-amber-600)); outline-offset: 2px; }
.video-card figcaption { padding: 0.7rem 0.2rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.video-card figcaption strong { font-family: var(--font-heading); color: var(--color-green-700); line-height: 1.3; }
.video-card figcaption span { font-size: 0.9rem; color: var(--color-slate-500); }

/* ==========================================================================
   10. TABLE
   ========================================================================== */

table[data-table] {
  width: 100%;
  margin: 0 0 1.75rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* allow horizontal scroll on narrow screens without breaking layout */
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
table[data-table] caption {
  padding: 0.75rem 0.85rem;
  text-align: left;
  white-space: normal;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-green-700);
  background: var(--color-tint-500);
  border: 1px solid var(--border-color-light);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@media (min-width: 700px) {
  table[data-table] { display: table; white-space: normal; }
}
table[data-table] th,
table[data-table] td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color-light);
  vertical-align: top;
}
table[data-table] thead th {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-on-green);
  background: var(--color-green-500);
  border-bottom: none;
}
table[data-table] tbody tr:nth-child(even) { background: var(--color-tint-500); }
table[data-table] tbody tr:last-child td { border-bottom: none; }
table[data-table] th[scope="row"] { font-weight: 600; }

/* On narrow screens, opt-in tables (data-stack) drop the horizontal scroll and
   reflow each row into a labelled card, no sliding, no column overlap. */
@media (max-width: 699px) {
  table[data-table][data-stack] {
    display: block;
    overflow-x: visible;
    white-space: normal;
    border: none;
    background: transparent;
    border-radius: 0;
    margin-bottom: 1.25rem;
  }
  table[data-table][data-stack] thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  table[data-table][data-stack] tbody,
  table[data-table][data-stack] tbody tr,
  table[data-table][data-stack] tbody td { display: block; }
  table[data-table][data-stack] tbody tr {
    background: #ffffff;
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 0.4rem 1rem 0.6rem;
    margin-bottom: 0.9rem;
  }
  table[data-table][data-stack] tbody tr:nth-child(even) { background: #ffffff; }
  table[data-table][data-stack] tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.25rem;
    padding: 0.6rem 0;
    text-align: right;
    border-bottom: 1px solid var(--border-color-light);
  }
  table[data-table][data-stack] tbody td:last-child { border-bottom: none; }
  table[data-table][data-stack] tbody td::before {
    content: attr(data-label);
    flex: 0 1 auto;
    margin-right: auto;
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-slate-300);
  }
  /* first cell is the row title: full-width block, no label, no scroll-crush */
  table[data-table][data-stack] tbody td:first-child {
    display: block;
    text-align: left;
    padding: 0.2rem 0 0.65rem;
    margin-bottom: 0.3rem;
    border-bottom: 2px solid var(--border-color-light);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--color-green-700);
  }
  table[data-table][data-stack] tbody td:first-child::before { display: none; }
  /* the model cell holds a thumbnail + link, keep them inline */
  table[data-table][data-stack] .cmp-model { font-size: 1.02rem; }
}

/* ==========================================================================
   11. FAQ
   ========================================================================== */

[data-component="faq"] {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  background: #ffffff;
  overflow: hidden;
}
[data-component="faq"] details { border-bottom: 1px solid var(--border-color-light); }
[data-component="faq"] details:last-child { border-bottom: none; }
[data-component="faq"] summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-slate-500);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
[data-component="faq"] summary::-webkit-details-marker { display: none; }
[data-component="faq"] summary::after {
  content: "+";
  font-size: 1.3em;
  line-height: 1;
  color: var(--color-amber-600);
  flex: none;
}
[data-component="faq"] details[open] summary::after { content: "\2212"; }
[data-component="faq"] summary:hover { background: var(--color-tint-500); }
/* icon + title as one flex item so the +/- marker still sits hard right */
[data-component="faq"] summary .acc-title { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; }
[data-component="faq"] summary .acc-title .ico { flex: none; color: var(--color-green-500); }
[data-component="faq"] details > :not(summary) {
  padding: 0 1.25rem 1.1rem;
  color: #3b4453;
}

/* ==========================================================================
   12. CALCULATOR
   ========================================================================== */

[data-component="calc"] {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 600px) {
  [data-component="calc"] { grid-template-columns: repeat(2, 1fr); }
  [data-component="calc"] [data-calc-actions],
  [data-component="calc"] fieldset { grid-column: 1 / -1; }
}

[data-component="calc"] label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.35rem;
  color: var(--color-slate-500);
}

[data-component="calc"] input[type="number"],
[data-component="calc"] input[type="text"],
[data-component="calc"] select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--color-slate-500);
  background: var(--color-cream-500);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
}
[data-component="calc"] input:focus,
[data-component="calc"] select:focus { border-color: var(--color-amber-500); }

[data-component="calc"] fieldset {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem 1rem;
  margin: 0;
}
[data-component="calc"] legend {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  padding-inline: 0.4rem;
  color: var(--color-green-700);
}
[data-component="calc"] fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1.25rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
}
[data-component="calc"] input[type="radio"],
[data-component="calc"] input[type="checkbox"] { width: auto; accent-color: var(--color-green-500); }

[data-calc-result] {
  margin-top: 1.25rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: var(--color-green-50);
  border: 1px solid var(--color-green-200);
  border-left: 4px solid var(--color-green-500);
  border-radius: var(--radius-lg);
}
[data-calc-result] :first-child { margin-top: 0; }
[data-calc-result] strong { color: var(--color-green-700); font-size: 1.15em; }
/* after Calculate, the page jumps here, leave room below the top nav */
[data-calc-result] { scroll-margin-top: 5.5rem; }

/* headline numbers as stat tiles so litres / tubs / cost read at a glance */
.calc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1.1rem 0 1.25rem;
}
.calc-stat {
  background: #ffffff;
  border: 1px solid var(--color-green-200);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  text-align: center;
}
.calc-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  line-height: 1.1;
  color: var(--color-green-700);
}
.calc-stat-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-slate-300);
}
.calc-stat--cost { background: var(--color-amber-50); border-color: var(--color-amber-500); }
.calc-stat--cost .calc-stat-num { color: var(--color-amber-700); }
/* supporting fine print under the tiles */
.calc-detail { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.92rem; line-height: 1.55; color: #3b4453; }
.calc-detail strong { font-size: 1em; color: var(--color-green-700); }

/* "complete kit" CTA under the budget tiles */
.kit-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem 1.25rem;
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
  padding: 1rem 1.25rem;
  background: var(--color-green-50);
  border: 1px solid var(--color-green-300);
  border-left: 4px solid var(--color-green-500);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-slate-500);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.kit-cta:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kit-cta-text { flex: 1 1 18rem; line-height: 1.5; }
.kit-cta-text strong { color: var(--color-green-700); }
.kit-cta-go { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-heading); font-weight: 700; color: var(--color-green-700); white-space: nowrap; }

/* complete-kit section: featured respirator + grouped buy rows */
.kit-feature {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  background: #ffffff;
  border: 1px solid var(--color-amber-500); border-left: 4px solid var(--color-amber-500);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  margin: 0 0 1.75rem;
}
.kit-feature > .ico { flex: none; font-size: 2em; color: var(--color-amber-600); }
.kit-feature-thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  padding: 6px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.kit-feature-img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 480px) { .kit-feature-thumb { width: 88px; height: 88px; } }
.kit-feature-body { min-width: 0; }
.kit-feature-eyebrow { margin: 0 0 0.2rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-amber-700); }
.kit-feature-body h3 { margin: 0 0 0.5rem; }
.kit-list { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.kit-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem;
  padding: 0.7rem 0.9rem; margin-bottom: 0.6rem;
  background: #ffffff; border: 1px solid var(--border-color-light); border-radius: var(--radius-md);
}
.kit-row > .ico { flex: none; font-size: 1.3em; color: var(--color-sienna-500); }
.kit-row-thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 5px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kit-row-thumb:hover {
  border-color: var(--color-green-500);
  box-shadow: var(--shadow-sm);
}
.kit-row-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
}
.kit-row-body { flex: 1 1 14rem; min-width: 0; }
.kit-row-body strong { display: block; color: var(--color-green-700); }
.kit-row-body span { font-size: 0.9rem; line-height: 1.45; color: #3b4453; }
.kit-row .btn { flex: 0 0 auto; }
@media (max-width: 480px) {
  .kit-row-thumb { width: 64px; height: 64px; }
  .kit-row-img { max-width: 52px; max-height: 52px; }
  .kit-row .btn { flex: 1 0 100%; }
}

/* deck-size thumbnail in the popular-sizes table */
.size-cell { display: flex; align-items: center; gap: 0.7rem; }
.size-thumb {
  flex: none; width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--radius-md); border: 1px solid var(--border-color-light);
}
/* the "Popular UK decking sizes" heading sits right under the results box, give it air */
[data-calc-result] + h3 { margin-top: 2.5rem; }
/* trim the dead space below the calculator before the next section */
section[data-section="calc"] { padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

/* ==========================================================================
   13. INLINE ICONS
   ========================================================================== */

.ico {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  fill: currentColor;
  stroke: currentColor;
  flex: none;
}

/* ==========================================================================
   14. IMAGE PLACEHOLDER (figure[data-placeholder], uses --ratio)
   ========================================================================== */

figure[data-placeholder] {
  margin: 0 0 1.25rem;
  aspect-ratio: var(--ratio, 16 / 9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem;
  color: var(--color-green-700);
  background: var(--color-tint-500);
  border: 2px dashed var(--color-green-300);
  border-radius: var(--radius-lg);
}

/* Real images replacing placeholders.
   Product thumbnails (prod-thumb/lib-thumb/cmp-thumb/pick-thumb) keep their own
   square sizing, only genuine content/proof photos get the 4:3 banner treatment. */
.card img:not(.prod-thumb):not(.lib-thumb):not(.cmp-thumb):not(.pick-thumb):not(.kit-feature-img):not(.kit-row-img),
.proof-shot img,
.tester-note-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color-light);
  margin-bottom: 1.25rem;
}
.proof-shot img {
  margin-bottom: 0.5rem;
}
.tester-note-photo img {
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
}
.card > .image-lightbox-trigger:first-child {
  margin: 0 0 1.25rem;
}
.image-lightbox-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.image-lightbox-trigger img {
  margin-bottom: 0;
}
.image-lightbox-trigger:focus-visible {
  outline: 3px solid var(--color-amber-500);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}
.has-image-lightbox {
  overflow: hidden;
}
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgb(15 26 22 / 0.86);
}
.image-lightbox[hidden] {
  display: none;
}
.image-lightbox__panel {
  position: relative;
  max-width: min(96vw, 1120px);
  max-height: 92vh;
}
.image-lightbox__panel img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 88vh;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-lg);
}
.image-lightbox__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 0.42);
  border-radius: var(--radius-sm);
  color: var(--text-on-green);
  background: rgb(16 68 50 / 0.92);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.image-lightbox__close:hover,
.image-lightbox__close:focus-visible {
  background: var(--color-green-700);
}
.image-lightbox__close:focus-visible {
  outline: 3px solid var(--color-amber-500);
  outline-offset: 3px;
}
.kit-feature-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}
.kit-row-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 60px;
  max-height: 60px;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}
@media (max-width: 480px) { .kit-row-img { max-width: 52px; max-height: 52px; } }
figure[data-placeholder] [data-ph-label] {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-amber-700);
}
figure[data-placeholder] [data-ph-spec] {
  font-size: 0.875rem;
  max-width: 42ch;
  color: #4a5568;
}
figure[data-placeholder] [data-ph-img] {
  width: 40px;
  height: 40px;
  opacity: 0.55;
  order: -1;
}

/* Coat colour thumbnails and cost-per-m2 diagram placeholders */
.coat-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}
.coat-thumbs figure[data-placeholder] {
  margin: 0;
  --ratio: 4 / 3;
}
.cost-diagram {
  margin: 1.25rem 0;
}
.cost-diagram figure[data-placeholder] {
  --ratio: 16 / 9;
}
.cost-proof-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 38%);
  gap: 1.25rem;
  align-items: start;
  margin: 1.25rem 0;
}
.cost-proof-inline > p,
.cost-proof-inline > figcaption,
.cost-proof-inline .cost-diagram {
  margin: 0;
}
.cost-proof-inline > figcaption {
  line-height: 1.72;
}
.cost-proof-inline picture {
  max-width: none !important;
  margin: 0 !important;
}
@media (max-width: 560px) {
  .coat-thumbs { grid-template-columns: 1fr; }
  .cost-proof-inline { grid-template-columns: 1fr; }
}

/* ==========================================================================
   15. TOP NAV (desktop) + LOGO
   ========================================================================== */

header[data-nav="top"] {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 251, 247, 0.92);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--border-color-light);
  display: none; /* hidden on mobile, shown at >= 768px */
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.75rem;
}

[data-logo] {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-green-500);
  text-decoration: none;
  white-space: nowrap;
}
[data-logo] .ico { font-size: 1.4em; color: var(--color-amber-500); }
[data-logo] b { font-weight: 500; color: var(--color-slate-500); font-size: 0.85em; }

header[data-nav="top"] nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
header[data-nav="top"] nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-slate-500);
  text-decoration: none;
  padding: 0.35rem 0.15rem;
  border-bottom: 2px solid transparent;
}
header[data-nav="top"] nav a:hover {
  color: var(--color-green-700);
  border-bottom-color: var(--color-amber-500);
}

@media (min-width: 768px) {
  header[data-nav="top"] { display: block; }
}

/* ==========================================================================
   16. BOTTOM TAB BAR (mobile only)
   ========================================================================== */

nav[data-nav="bottom"] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: var(--color-green-500);
  border-top: 1px solid var(--color-green-700);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 10px rgba(9, 23, 18, 0.18);
}
nav[data-nav="bottom"] a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem 0.25rem;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}
nav[data-nav="bottom"] a .ico { font-size: 1.5em; }
nav[data-nav="bottom"] a:hover { color: #ffffff; }
nav[data-nav="bottom"] a[data-active] {
  color: #ffffff;
  background: var(--color-green-700);
  box-shadow: inset 0 3px 0 var(--color-amber-500);
}

@media (min-width: 768px) {
  nav[data-nav="bottom"] { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

footer[data-footer] {
  background: var(--color-green-700);
  color: rgba(255, 255, 255, 0.88);
  padding-block: clamp(2rem, 5vw, 3rem);
  /* clear the mobile tab bar so the last line is never hidden */
  margin-bottom: 3.75rem;
}
footer[data-footer] .wrap { display: grid; gap: 0.5rem; }
footer[data-footer] strong { color: #ffffff; font-family: var(--font-heading); font-size: 1.1rem; }
footer[data-footer] a { color: var(--color-amber-300); }
footer[data-footer] p[data-muted] { color: rgba(255, 255, 255, 0.62); }

@media (min-width: 768px) {
  footer[data-footer] { margin-bottom: 0; }
}

/* ==========================================================================
   18. FOCUS-VISIBLE (WCAG AA) - applies to all interactive elements
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-amber-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

/* dark backgrounds: keep the ring visible against green */
nav[data-nav="bottom"] a:focus-visible,
footer[data-footer] a:focus-visible {
  outline-color: var(--color-amber-300);
}

/* ==========================================================================
   19. SMALL UTILITIES (in the markup vocabulary only)
   ========================================================================== */

.wrap > h2 + p[data-lede] { margin-top: -0.25rem; }