@charset "UTF-8";
/* =========================================================================
   MyDIY — design system
   Built to the MyDIY Brand Guidelines V1.
   Palette, typeface, house geometry and icon set all come from that document.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Brand — these five are fixed by the guidelines */
  --purple:        #3D1773;   /* Pantone 2685 */
  --purple-light:  #945ACF;   /* Pantone 265  */
  --yellow:        #FFCE00;   /* Pantone 109  */
  --black:         #000000;
  --white:         #FFFFFF;

  /* Brand tints, derived only — no new hues introduced */
  --purple-950:    #240D45;
  --purple-900:    #2E1157;
  --purple-100:    #F4F0FA;
  --purple-150:    #EBE3F7;
  --purple-200:    #DCCFF0;
  --purple-300:    #C4ADE6;
  --yellow-600:    #E5B900;
  --yellow-200:    #FFE87F;
  --yellow-100:    #FFF6D2;
  --yellow-50:     #FFFBEB;

  /* Neutral UI palette */
  --ink:           #1B1522;
  --ink-2:         #574E63;
  --ink-3:         #7B7288;
  /* Small print that still has to be read. Six steps darker than
     --ink-3, same hue: that one lands at 4.14:1 on the tinted section
     backgrounds, just under the 4.5:1 small text needs. */
  --ink-note:      #756C82;
  --line:          #E4E0EC;
  --line-soft:     #EFECF5;
  --bg:            #FFFFFF;
  --bg-tint:       #FAF9FC;

  /* Support colours */
  --success:       #0F7A4A;
  --success-bg:    #E9F6EF;
  --warning:       #8A5300;
  --warning-bg:    #FFF4E3;
  --error:         #B3261E;
  --error-bg:      #FDECEA;

  /* Type */
  --font: "Archivo", "Archivo Fallback", Arial, Helvetica, sans-serif;

  /* Radii — one small set, used consistently */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Shadows — restrained */
  --shadow-1: 0 1px 2px rgba(27,21,34,.05), 0 1px 3px rgba(27,21,34,.04);
  --shadow-2: 0 4px 14px rgba(27,21,34,.08);
  --shadow-3: 0 14px 38px rgba(61,23,115,.16);

  /* Layout */
  --wrap: 1280px;
  --gutter: 20px;
  --header-h: 132px;

  /* Motion */
  --t-fast: 120ms;
  --t: 200ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
}

@media (max-width: 900px) {
  :root { --gutter: 16px; --header-h: 108px; }
}

/* Archivo metric-compatible fallback keeps CLS at zero while the font loads */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* A static tilt is not motion, so it stays. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5 { margin: 0; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--purple); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--purple-900); }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

/* Focus — always visible, never removed */
:focus-visible {
  outline: 3px solid var(--purple-light);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.on-purple :focus-visible,
.mdi-footer :focus-visible,
.mdi-header :focus-visible { outline-color: var(--yellow); }

/* -------------------------------------------------------------------------
   3. Utilities
   ------------------------------------------------------------------------- */

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

/*
 * The yellow newsletter band follows </main> directly, so every page whose
 * content ends in a bare .wrap — categories, products, deals, brands, the
 * static pages — ran its last row of tiles hard up against it. The homepage
 * escaped only because its final section carries its own padding.
 */
main { padding-bottom: clamp(36px, 3.4vw, 56px); }
/* The homepage's closing section already ends on its own padding; adding to
   it opened a hole between the last row of tiles and the band. */
body.page-home main { padding-bottom: 0; }
.wrap-narrow { max-width: 780px; }
.wrap-mid { max-width: 1000px; }

/*
 * The contact form's honeypot. Positioned away rather than display:none,
 * because a script that reads the stylesheet will skip anything hidden the
 * obvious way -- and left in the flow it stays a field a browser will
 * happily autofill, which is the point. aria-hidden and tabindex=-1 keep it
 * away from anyone reading or tabbing the form.
 */
.hp-field {
  position: absolute !important; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.sr-only {
  position: absolute !important; 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; left: 12px; top: -60px; z-index: 200;
  background: var(--yellow); color: var(--black);
  padding: 12px 20px; border-radius: 0 0 var(--r) var(--r);
  font-weight: 700; text-decoration: none;
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 0; color: var(--black); }

/* Both icon sets size to the current font-size unless a rule overrides them.
   Without this an inline <use> sprite renders at its intrinsic 24px+ and
   blows a component apart. */
.mdi-icon,
.ui-icon { width: 1em; height: 1em; flex: none; }
.mdi-icon { fill: currentColor; }
.ui-icon  { color: currentColor; }

.stack > * + * { margin-top: 16px; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.tiny  { font-size: .8125rem; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }

/* -------------------------------------------------------------------------
   4. Section rhythm
   ------------------------------------------------------------------------- */

.section { padding-block: clamp(40px, 5vw, 68px); }
.section-tight { padding-block: clamp(28px, 3.5vw, 44px); }
.section-tint { background: var(--bg-tint); }
.section-purple { background: var(--purple); color: var(--white); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.4vw, 30px);
}
.section-head h2 {
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.125rem);
  color: var(--purple);
}
.section-purple .section-head h2 { color: var(--white); }
.section-head .lede { margin: 8px 0 0; color: var(--ink-2); max-width: 62ch; }
.section-purple .section-head .lede { color: var(--purple-200); }

.link-more {
  font-weight: 700; font-size: .9375rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.link-more::after { content: "→"; transition: transform var(--t) var(--ease); }
.link-more:hover { text-decoration: underline; }
.link-more:hover::after { transform: translateX(3px); }
.section-purple .link-more { color: var(--yellow); }

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--purple);
  --btn-fg: var(--white);
  --btn-bd: var(--purple);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd); border-radius: var(--r);
  font-weight: 700; font-size: .9375rem; line-height: 1.2;
  text-decoration: none; text-align: center;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--purple-900); --btn-bd: var(--purple-900); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn-yellow  { --btn-bg: var(--yellow); --btn-fg: var(--black); --btn-bd: var(--yellow); }
.btn-yellow:hover { --btn-bg: var(--yellow-600); --btn-bd: var(--yellow-600); color: var(--black); }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--purple); --btn-bd: var(--purple); }
.btn-outline:hover { --btn-bg: var(--purple); --btn-fg: var(--white); color: var(--white); }

.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--purple); --btn-bd: var(--line);
}
.btn-ghost:hover { --btn-bg: var(--purple-100); --btn-bd: var(--purple-200); color: var(--purple); }

.btn-on-purple { --btn-bg: var(--white); --btn-fg: var(--purple); --btn-bd: var(--white); }
.btn-on-purple:hover { --btn-bg: var(--purple-100); --btn-bd: var(--purple-100); color: var(--purple); }

.btn-lg { min-height: 56px; padding: 14px 30px; font-size: 1rem; }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: .875rem; }
.btn-block { display: flex; width: 100%; }

/* -------------------------------------------------------------------------
   6. Savings system — MyDIY's most repeated visual signature
   ------------------------------------------------------------------------- */

.save-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--yellow); color: var(--black);
  font-weight: 800; font-size: .8125rem; line-height: 1;
  letter-spacing: .01em;
  padding: 7px 11px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.save-badge-lg { font-size: 1rem; padding: 10px 16px; border-radius: var(--r); }
.save-badge-sm { font-size: .75rem; padding: 5px 9px; }
.save-badge-outline {
  background: var(--yellow-100); border: 1px solid var(--yellow);
}

/* The circular "You save" device used on hero and comparison modules */
/*
 * A sticker, not a coloured circle.
 *
 * The white ring is the die-cut edge a real sticker has, and it is what
 * separates this from the yellow band behind it — without it the disc
 * dissolved into the background wherever the two met. The tilt and the
 * offset shadow do the rest: something placed on the photograph rather
 * than part of it.
 */
.save-disc {
  display: grid; place-content: center; text-align: center;
  aspect-ratio: 1; border-radius: 50%;
  background: var(--yellow); color: var(--black);
  padding: 14px; line-height: 1.05;
  border: 5px solid var(--white);
  box-shadow: 0 6px 18px rgba(27, 21, 34, .28);
  transform: rotate(-6deg);
}
.save-disc .sd-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.save-disc .sd-value { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.6rem); font-weight: 900; letter-spacing: -.02em; }
.save-disc .sd-note  { font-size: .75rem; font-weight: 700; }

/* -------------------------------------------------------------------------
   7. Price comparison component
   Used in three densities: .is-panel (product page), .is-hero (homepage
   feature) and .is-mini (inside product cards).
   ------------------------------------------------------------------------- */

.pcmp {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}
.pcmp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--purple-100);
  border-bottom: 1px solid var(--line);
}
.pcmp-head h2, .pcmp-head h3, .pcmp-head h4 {
  font-size: .9375rem; font-weight: 800; color: var(--purple);
  letter-spacing: -.005em; margin: 0;
}
.pcmp-head .mdi-icon { color: var(--purple); font-size: 1.05rem; }

.pcmp-table { font-size: .9375rem; }
.pcmp-table th, .pcmp-table td {
  padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line-soft);
}
.pcmp-table tr:last-child th, .pcmp-table tr:last-child td { border-bottom: 0; }
.pcmp-table th { font-weight: 600; color: var(--ink-2); }
/* Retailer logo sits beside the name, never instead of it — the name stays
   readable for screen readers and when a logo file is missing. The slot is a
   fixed width so rows line up whether or not a retailer has a logo. */
/* The flex row lives on an inner span, never on the <th> itself: a flex
   <th> stops being a table cell, and iOS Safari then sized the price column
   as if the name took no room, running "Cheapest" into the price. */
.pcmp-rowname { display: flex; align-items: center; gap: 10px; }
/* The mark is already trimmed and normalised onto a canvas of this shape, so
   the image fills the slot 1:1; MYDIY_LOGO_BOX in helpers.php renders it at
   2x for sharpness, and no CSS scaling is doing the balancing.
   90x40 everywhere except the product page, which is a little larger below. */
.pcmp-logo-slot {
  flex: none; width: 90px; height: 40px;
}
/* Pinned left, not centred: most marks are squarer than the slot, and
   centring left a gap before the logo that the price, flush to its own
   edge, has no match for — the table looked shifted right. */
.pcmp-logo-slot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }

/* The product page is where the comparison is actually read, so the marks are
   larger than on the homepage. They were once 180x80, which recognised well but
   made the table taller than the rest of the buy box and left a wide gap before
   each name. The slot keeps the 2.25:1 shape of MYDIY_LOGO_BOX. */
.pcmp.is-panel .pcmp-logo-slot { width: 108px; height: 48px; }
.pcmp.is-panel .pcmp-head { padding: 8px 16px; }
.pcmp.is-panel .pcmp-foot { padding: 8px 16px; }
.pcmp.is-panel .pcmp-table th,
.pcmp.is-panel .pcmp-table td { padding: 5px 16px; }
.pcmp-table td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/*
 * MyDIY's own row.
 *
 * It was yellow, and the page it sits on has a yellow hero band — so the row
 * that is supposed to be the answer read as one more piece of furniture.
 * Purple is the brand's primary and nothing else in the table uses it, so the
 * row now owns the only dark band on a white table. The yellow stays as the
 * accent on the price and the tag, where it marks the two things worth
 * reading rather than the whole strip.
 */
.pcmp-table tr.is-us { background: var(--purple); }
.pcmp-table tr.is-us th,
.pcmp-table tr.is-us td {
  color: var(--white); font-weight: 800;
  border-bottom-color: rgba(255,255,255,.18);
}
.pcmp-table tr.is-us td { color: var(--yellow); font-size: 1.0625rem; }
/* Wraps the tag under the logo when the row is narrow, rather than
   pushing into the price. */
.pcmp-table tr.is-us .pcmp-rowname { flex-wrap: wrap; gap: 6px 10px; }
/* The wordmark stands in for the shop name, so it carries the row. The full
   reversed mark, not the mono one — this is the only place on the page the
   brand speaks for itself, and a flattened silhouette undersells it. */
.pcmp-us-logo { display: block; width: auto; height: 32px; flex: none; }
/* Grows with the retailer marks on the product page. Our row is meant to be
   the dominant one, so it stays taller than the marks beneath it. */
.pcmp.is-panel .pcmp-us-logo { height: 40px; }
/* On the narrowest phones the slot and the padding would otherwise push the
   price past the card's edge, where overflow: hidden cuts it off. */
@media (max-width: 359px) {
  .pcmp.is-panel .pcmp-logo-slot { width: 72px; height: 32px; }
  .pcmp.is-panel .pcmp-table th,
  .pcmp.is-panel .pcmp-table td { padding: 5px 10px; }
  .pcmp.is-panel .pcmp-us-logo { height: 32px; }
}
/* Yellow on purple: the accent that says which row is the answer. */
.pcmp-table tr.is-us .us-tag {
  font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: var(--yellow); color: var(--purple-950); padding: 3px 8px;
  border-radius: var(--r-xs); white-space: nowrap;
}


.pcmp-foot {
  padding: 12px 16px; background: var(--purple-100);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  justify-content: space-between;
}
.pcmp-claim { font-weight: 700; color: var(--purple); font-size: .9375rem; }
.pcmp.is-panel .pcmp-claim { margin: 0; }
.pcmp-meta { font-size: .8125rem; color: var(--ink-2); margin: 0; }
.pcmp-meta a { color: var(--ink-2); }

/* Hero density — sits on purple */
.pcmp.is-hero { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.pcmp.is-hero .pcmp-head { background: var(--white); border-bottom: 2px solid var(--purple-150); }
.pcmp.is-hero .pcmp-table { font-size: 1rem; }
.pcmp.is-hero .pcmp-table th,
.pcmp.is-hero .pcmp-table td { padding: 13px 18px; }
.pcmp.is-hero 
.pcmp-foot { background: var(--white); }

/* Mini density — inside a product card, collapsed by default */
.pcmp.is-mini { border-radius: var(--r); font-size: .8125rem; }
.pcmp.is-mini .pcmp-table th,
.pcmp.is-mini .pcmp-table td { padding: 7px 11px; font-size: .8125rem; }
.pcmp.is-mini .pcmp-head { padding: 8px 11px; }
.pcmp.is-mini .pcmp-head h2,
.pcmp.is-mini .pcmp-head h3,
.pcmp.is-mini .pcmp-head h4 { font-size: .8125rem; }

/* Disclosure trigger on cards */
.pcmp-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 4px 0;
  font-size: .8125rem; font-weight: 700; color: var(--purple);
  text-decoration: underline; text-underline-offset: 2px;
}
.pcmp-toggle::after {
  content: ""; width: 7px; height: 7px; margin-left: 1px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t) var(--ease);
}
.pcmp-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.pcmp-panel[hidden] { display: none; }
.pcmp-panel { margin-top: 8px; }

/* Single-competitor and no-competitor states must never look broken */
.pcmp-none {
  font-size: .8125rem; color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
}

/* -------------------------------------------------------------------------
   8. Product card
   ------------------------------------------------------------------------- */

.grid-products {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
/* Beside the filter sidebar there is less room, so cards run a little
   narrower and four still fit rather than three. */
.listing .grid-products { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }

/*
 * A single-row strip, used for "Featured products" and "Biggest savings".
 * Wide enough and it is a plain five-across grid; below that it becomes a
 * horizontal snap-scroller, so it stays exactly one row at every width
 * instead of wrapping into a second, ragged line.
 */
.grid-products.is-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: row;
}

@media (max-width: 1099px) {
  .grid-products.is-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 32%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;           /* room for the scrollbar */
    scrollbar-width: thin;
  }
  .grid-products.is-row > .pc { scroll-snap-align: start; }
  /* The hover lift would clip inside a scroll container. */
  .grid-products.is-row > .pc:hover { transform: none; }
}

/* Exactly two whole cards across on a phone. It was 62% with a 190px floor,
   which left the second card hanging off the right edge -- it read as a
   layout fault rather than a hint to scroll. */
@media (max-width: 700px) {
  .grid-products.is-row { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
}

@media (max-width: 560px) {
  .grid-products,
  .listing .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.pc {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.pc:hover { border-color: var(--purple-200); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.pc:focus-within { border-color: var(--purple-light); }

.pc-media {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 14px;
  display: grid; place-items: center;
  background: var(--white);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
}
.pc-media img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform var(--t) var(--ease);
}
.pc:hover .pc-media img { transform: scale(1.035); }

.pc-flags { position: absolute; inset: 10px auto auto 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.pc-fav {
  position: absolute; inset: 8px 8px auto auto; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 50%; color: var(--ink-2);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pc-fav:hover { color: var(--purple); border-color: var(--purple-200); }
.pc-fav[aria-pressed="true"] { color: var(--purple); border-color: var(--purple); background: var(--purple-100); }
.pc-fav svg { width: 18px; height: 18px; }

.pc-body { display: flex; flex-direction: column; gap: 7px; padding: 0 14px 12px; flex: 1; }

.pc-brand {
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.pc-name { font-size: .9375rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; margin: 0; }
.pc-name a { color: var(--ink); text-decoration: none; }
.pc-name a:hover { color: var(--purple); text-decoration: underline; }
.pc-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pc-name span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}

.pc-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; margin-top: 2px; }
.pc-price { font-size: 1.375rem; font-weight: 800; color: var(--purple); letter-spacing: -.02em; }
.pc-was { font-size: .8125rem; color: var(--ink-3); text-decoration: line-through; }

.pc-vs { font-size: .8125rem; color: var(--ink-2); margin: 0; }
.pc-vs strong { color: var(--ink); font-weight: 700; }

.pc-foot { padding: 0 14px 14px; margin-top: auto; position: relative; z-index: 2; }
/* Tags: above the card's stretched link, or a click would open the product instead. */
.tag-pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.tag-pills li { max-width: 100%; min-width: 0; }
.tag-pill {
  display: block; max-width: 100%; padding: 4px 11px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--purple-100); color: var(--purple);
  border: 1px solid var(--purple-200); border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 600; line-height: 1.4; text-decoration: none;
}
.tag-pill:hover { background: var(--purple-150); color: var(--purple); }
.pc .tag-pills { position: relative; z-index: 2; margin-top: auto; padding-top: 3px; }
.pc .tag-pill { padding: 3px 9px; font-size: .75rem; }

/* Discount code in the basket and checkout summaries */
.code-form { margin: 12px 0 4px; }
.code-form label { display: block; font-size: .8125rem; font-weight: 700; margin-bottom: 6px; }
.code-form-row { display: flex; gap: 8px; }
.code-form-row input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.code-chip {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--purple-100); color: var(--purple); font-size: .75rem; font-weight: 700; letter-spacing: .03em;
}
.code-problem { color: var(--warning); font-weight: 600; margin: 0 0 6px; }
.code-remove { margin: -4px 0 8px; text-align: right; }

.pc-oos { font-size: .8125rem; font-weight: 700; color: var(--warning); display: flex; align-items: center; gap: 6px; }

/* Ranked variant used on the deals page */
.pc-rank {
  position: absolute; inset: 10px auto auto 10px; z-index: 2;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--purple); color: var(--white);
  border-radius: 50%; font-size: .8125rem; font-weight: 800;
}

/* -------------------------------------------------------------------------
   9. Stars
   ------------------------------------------------------------------------- */

.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.star {
  width: 14px; height: 14px; display: block;
  background: var(--line);
  -webkit-mask: var(--star-mask) center / contain no-repeat;
          mask: var(--star-mask) center / contain no-repeat;
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .8l3.4 7 7.6 1.1-5.5 5.4 1.3 7.6-6.8-3.6-6.8 3.6 1.3-7.6L1 8.9l7.6-1.1z'/%3E%3C/svg%3E");
}
.star.is-full { background: var(--yellow-600); }
.star.is-half { background: linear-gradient(90deg, var(--yellow-600) 50%, var(--line) 50%); }
.rating-row { display: flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--ink-2); }
.rating-row a { color: var(--ink-2); }

/* -------------------------------------------------------------------------
   10. Header
   ------------------------------------------------------------------------- */

.mdi-header { position: relative; z-index: 60; }

.header-top { background: var(--purple); color: var(--white); }
.header-top .wrap {
  display: grid; align-items: center; gap: 18px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-block: 14px;
}

.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img { width: 168px; height: auto; }
@media (max-width: 1080px) { .brand-logo img { width: 140px; } }

/* Search */
.search-form { position: relative; }
.search-field {
  display: flex; align-items: center; background: var(--white);
  border-radius: var(--r); overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--t) var(--ease);
}
.search-form:focus-within .search-field { border-color: var(--yellow); }
.search-field input {
  flex: 1; min-width: 0; border: 0; background: none;
  padding: 13px 16px; font-size: .9375rem; color: var(--ink);
}
.search-field input::placeholder { color: var(--ink-3); }
.search-field input:focus { outline: none; }
.search-field button {
  border: 0; background: var(--yellow); color: var(--black);
  width: 52px; align-self: stretch; display: grid; place-items: center;
  transition: background var(--t) var(--ease);
}
.search-field button:hover { background: var(--yellow-600); }
.search-field button svg { width: 20px; height: 20px; }

.search-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-3); overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.search-suggest[hidden] { display: none; }
.ss-group + .ss-group { border-top: 1px solid var(--line-soft); }
.ss-label {
  padding: 10px 14px 4px; font-size: .6875rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
}
.ss-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; text-decoration: none; color: var(--ink);
  font-size: .9375rem;
}
.ss-item:hover, .ss-item.is-active { background: var(--purple-100); color: var(--purple); }
.ss-item img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.ss-item .ss-price { margin-left: auto; font-weight: 800; color: var(--purple); white-space: nowrap; }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 4px; }
.hact {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 10px; min-width: 62px;
  color: var(--white); text-decoration: none; border-radius: var(--r-sm);
  font-size: .6875rem; font-weight: 600; line-height: 1;
  transition: background var(--t) var(--ease);
  position: relative;
}
.hact:hover { background: rgba(255,255,255,.12); color: var(--white); }
.hact svg { width: 22px; height: 22px; }
.hact-count {
  position: absolute; top: 1px; right: 8px;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--yellow); color: var(--black);
  border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 800; line-height: 19px; text-align: center;
}

/* Primary nav */
.header-nav { background: var(--purple); border-top: 1px solid rgba(255,255,255,.14); }
/*
 * Wraps. Every category the shop is set up for belongs here, and there is no
 * count at which one of them stops mattering — so the bar takes a second row
 * rather than hiding the trades that sort last.
 */
.nav-list {
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: 2px; list-style: none; margin: 0; padding: 0;
}
.nav-list > li { position: relative; }
.nav-link {
  display: flex; align-items: center; height: 100%;
  padding: 13px 14px; color: var(--white); text-decoration: none;
  font-size: .875rem; font-weight: 600; white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.nav-link:hover, .nav-link[aria-expanded="true"] {
  background: var(--purple-900); color: var(--white); border-bottom-color: var(--yellow);
}
.nav-link.is-deals { color: var(--yellow); font-weight: 800; }

/* Mega menu */
.mega {
  position: absolute; top: 100%; left: 0; z-index: 70;
  min-width: 620px; padding: 24px;
  background: var(--white); color: var(--ink);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-3);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 28px;
}
.mega[hidden] { display: none; }
.mega a {
  display: block; padding: 7px 10px; margin-left: -10px;
  color: var(--ink); text-decoration: none; font-size: .9375rem;
  border-radius: var(--r-sm);
}
.mega a:hover { background: var(--purple-100); color: var(--purple); }
.mega .mega-all { grid-column: 1 / -1; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 700; color: var(--purple); }

/* Compact sticky header */
.header-sticky {
  position: fixed; inset: 0 0 auto; z-index: 90;
  background: var(--purple); color: var(--white);
  transform: translateY(-100%);
  transition: transform var(--t) var(--ease);
  box-shadow: var(--shadow-2);
}
.header-sticky.is-on { transform: translateY(0); }
.header-sticky .wrap {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: 16px; padding-block: 10px;
}
.header-sticky .brand-logo img { width: 124px; }
.header-sticky .search-field input { padding-block: 10px; }
.header-sticky .search-field button { width: 46px; }

/* Mobile bar */
.header-mobile { display: none; background: var(--purple); color: var(--white); }
.header-mobile .bar {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 8px; padding: 10px 0;
}
.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; color: var(--white); border-radius: var(--r-sm);
  position: relative;
}
.icon-btn:hover { background: rgba(255,255,255,.12); }
.icon-btn svg { width: 24px; height: 24px; }
.header-mobile .brand-logo { justify-self: start; }
.header-mobile .brand-logo img { width: 128px; }
.header-mobile .search-wrap { padding-bottom: 12px; }

@media (max-width: 1024px) {
  .header-top, .header-nav { display: none; }
  .header-mobile { display: block; }
  .header-sticky { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(27,21,34,.5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer-panel {
  position: absolute; inset: 0 auto 0 0; width: min(360px, 88vw);
  background: var(--white); display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--t) var(--ease);
  overflow-y: auto;
}
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--purple); color: var(--white);
  position: sticky; top: 0; z-index: 2;
}
.drawer-head img { width: 124px; }
.drawer-nav { padding: 8px 0 24px; }
.drawer-nav a, .drawer-nav button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px 18px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 600;
}
.drawer-nav a:hover, .drawer-nav button:hover { background: var(--purple-100); color: var(--purple); }
.drawer-nav .is-deals { color: var(--purple); font-weight: 800; }
.drawer-sub { background: var(--bg-tint); }
.drawer-sub[hidden] { display: none; }
.drawer-sub a { padding-left: 34px; font-weight: 500; font-size: .9375rem; }
.drawer-nav .chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); flex: none; }
.drawer-nav button[aria-expanded="true"] .chev { transform: rotate(45deg); }
.drawer-foot { margin-top: auto; padding: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }

body.no-scroll { overflow: hidden; }

/* -------------------------------------------------------------------------
   11. Hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 62% 42%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(0,0,0,.10) 100%),
    var(--yellow);
  color: var(--black);
}
.hero .wrap {
  display: grid; align-items: center; gap: 36px;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  padding-block: clamp(36px, 5vw, 64px);
}
/* The headline sets its own width (both lines are nowrap); the supporting
   text is measured separately so the CTAs are free to sit side by side. */
.hero-copy { max-width: none; }
.hero h1 {
  font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.02;
  color: var(--purple);
}
/* Each half of the headline holds together on its own line. */
.hero h1 .l1, .hero h1 .l2 { display: block; white-space: nowrap; }
.hero-lede {
  margin: 18px 0 26px; font-size: clamp(1rem, .93rem + .35vw, 1.1875rem);
  font-weight: 500; color: var(--purple-950); max-width: 34ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-cta .btn { flex: 0 0 auto; }

.hero-visual { position: relative; justify-self: end; width: 100%; max-width: 520px; }
.hero-house {
  aspect-ratio: 54.54 / 59.35;
  clip-path: url(#mydiy-house);
  background: var(--white);
  overflow: hidden;
}
.hero-house img { width: 100%; height: 100%; object-fit: cover; }

/* Shown until real photography is supplied — a brand panel, not a broken image. */
.hero-house.is-placeholder {
  display: grid; place-items: center;
  background:
    repeating-radial-gradient(circle at 50% 46%,
      rgba(61,23,115,.10) 0 1px, rgba(61,23,115,0) 1px 14px),
    var(--purple-100);
}
.hero-house-mark .mdi-icon { font-size: clamp(56px, 9vw, 104px); color: var(--purple-300); }
.hero-disc {
  /* Inside the picture, not hanging off it. It was at right: -6px, which
     put it over the edge and into the yellow band beyond — and on a
     narrow window it cleared the photograph altogether. */
  position: absolute; right: 5%; bottom: 7%;
  width: clamp(112px, 13vw, 158px);
}

/* Pattern device from the brand guidelines, kept low contrast */
.hero::after {
  content: ""; position: absolute; right: -110px; top: -120px;
  width: 380px; height: 380px; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      rgba(61,23,115,.14) 0 1px, rgba(61,23,115,0) 1px 11px);
  pointer-events: none;
}

@media (max-width: 720px) {
  .hero h1 .l1, .hero h1 .l2 { white-space: normal; }
}

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; padding-block: 30px 34px; }
  .hero-copy { max-width: none; }
  .hero-visual { max-width: 380px; justify-self: center; margin-top: 4px; }
  .hero::after { width: 260px; height: 260px; right: -90px; top: -90px; }
}

/* -------------------------------------------------------------------------
   12. Trust strip
   ------------------------------------------------------------------------- */

.trust {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.trust ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.trust li {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 12px;
  font-size: .875rem; font-weight: 600; line-height: 1.3;
}
.trust li + li { border-left: 1px solid var(--line-soft); }
.trust .mdi-icon { font-size: 2.125rem; color: var(--purple); flex: none; }
.trust-link { color: inherit; text-decoration: none; }
.pc-price.is-pending, .price-now.is-pending { font-size: 1.0625rem; color: var(--ink-3); font-weight: 700; }
.trust-link:hover strong { text-decoration: underline; }
@media (max-width: 860px) {
  .trust ul { grid-template-columns: repeat(2, 1fr); }
  .trust li:nth-child(odd) { border-left: 0; }
  .trust li:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 359px) {
  .trust li { font-size: .8125rem; padding: 14px 6px; gap: 9px; }
  .trust .mdi-icon { font-size: 1.4rem; }
}

/* -------------------------------------------------------------------------
   13. Category cards
   ------------------------------------------------------------------------- */

/*
 * auto-fit, not auto-fill: a trade with two sub-categories was leaving five
 * empty columns and the row looked unfinished. auto-fit drops the empty
 * tracks so the tiles share the width, and the max stops three of them
 * stretching to a third of the page each.
 */
/*
 * auto-fit, not auto-fill: a trade with two sub-categories was leaving five
 * empty columns and the row looked unfinished.
 *
 * The 190px cap is chosen so six tiles land on one line at desktop width,
 * which is what most trades have once the parent tile leads the row — at
 * 232px they broke five-and-one and every section trailed an orphan. The cap
 * also matters because the picture is square: let a tile grow to a third of
 * the page and it becomes a third of the page tall.
 */
.grid-categories {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
  justify-content: start;
}

/*
 * On a phone the 190px cap is what decides the column count — a definite max
 * is what auto-fit counts with, not the min — so 358px of room fitted exactly
 * one tile and the index ran to ten thousand pixels. A flexible max counts
 * from the minimum instead, which puts two across and halves the scrolling.
 */
@media (max-width: 560px) {
  .grid-categories {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }
}

/*
 * One row, at every width — the same treatment the product strips get.
 * auto-fill decides the column count from the viewport, so eight cards landed
 * as six and a ragged two. A fixed six across matches the six the homepage
 * asks for, and below that it scrolls sideways rather than wrapping.
 */
.grid-categories.is-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1099px) {
  .grid-categories.is-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(158px, 24%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .grid-categories.is-row > .cat-card { scroll-snap-align: start; }
  .grid-categories.is-row > .cat-card:hover { transform: none; }
}

@media (max-width: 700px) {
  .grid-categories.is-row { grid-auto-columns: minmax(140px, 44%); gap: 12px; }
}
/*
 * The homepage card and the index tile's head are the same object with
 * different chrome around them, so the geometry is written once: picture
 * flush to the edges, text padded underneath. Inset by ten pixels inside a
 * rounded white box, a photograph read as a broken image rather than a
 * category, and the two pages had already drifted on exactly this point.
 * The wrapper's overflow rounds the corners the picture meets.
 */
.cat-card, .cat-tile-main {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 0 12px; text-align: center; text-decoration: none; color: var(--ink);
}
.cat-card .cc-media, .cat-tile-main .cc-media { border-radius: 0; }
.cat-card .cc-text, .cat-tile-main .cc-text { padding: 0 12px; }

.cat-card {
  background: var(--white); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
/*
 * Hover, written once for both. Border-colour alone was too quiet to read as
 * "this is a link": the picture is the biggest thing on the tile and it did
 * not react at all. Now the picture itself moves — a slow push in, held
 * inside the frame by the media box's overflow — under a lifted tile with a
 * purple edge. Keyboard users get it too, via :focus-within.
 *
 * The reduced-motion rule near the top of this file flattens the duration to
 * nothing, so this becomes an instant state change rather than a zoom.
 */
.cc-media img, .cc-media .mdi-icon { transition: transform 260ms var(--ease); }

.cat-card:hover, .cat-card:focus-within,
.cat-tile:hover, .cat-tile:focus-within {
  border-color: var(--purple); box-shadow: var(--shadow-3);
  transform: translateY(-3px);
}
.cat-card:hover .cc-media img, .cat-card:focus-within .cc-media img,
.cat-tile:hover .cc-media img, .cat-tile:focus-within .cc-media img {
  transform: scale(1.07);
}
/* An icon has no photograph to push into, so it lifts off its tint instead. */
.cat-card:hover .cc-media .mdi-icon, .cat-card:focus-within .cc-media .mdi-icon,
.cat-tile:hover .cc-media .mdi-icon, .cat-tile:focus-within .cc-media .mdi-icon {
  transform: scale(1.12);
}
.cat-card:hover .cc-media, .cat-card:focus-within .cc-media,
.cat-tile:hover .cc-media, .cat-tile:focus-within .cc-media {
  background: var(--purple-150);
}
.cat-card:hover .cc-media.has-photo, .cat-card:focus-within .cc-media.has-photo,
.cat-tile:hover .cc-media.has-photo, .cat-tile:focus-within .cc-media.has-photo {
  background: var(--white);
}
.cat-card:hover .cc-name, .cat-tile:hover .cc-name { color: var(--purple); }
/*
 * Scoped to the class itself, not to .cat-card. The index grew a second kind
 * of tile and inherited none of this: the picture frame collapsed, the icon
 * shrank into the corner, and the name and the count ran together on one
 * line. These names are specific enough to stand on their own.
 */
.cc-media {
  /* Square, because that is what the category photographs are. The box was
     4:3 and the pictures are 600x600, so a quarter of every one of them was
     being thrown away. The uploader keeps whatever proportions it is given
     — a wide photograph stays wide — so the rule below still has to cope
     with a picture that does not match; it just no longer has to on every
     single tile. */
  aspect-ratio: 1 / 1; position: relative; display: grid; place-items: center;
  background: var(--bg-tint); border-radius: var(--r);
  overflow: hidden;
}
/*
 * Positioned rather than sized, because `height: 100%` never resolved here:
 * the box takes its height from aspect-ratio, which is not a definite height
 * a percentage can be measured against, so the image fell back to its own
 * proportions, overflowed the frame and was chopped off by the overflow rule
 * above — 59px of a 235px picture, silently. `inset: 0` gives object-fit a
 * real box to work in, so a mismatched photograph is now scaled and centred
 * instead of cropped by accident.
 */
.cc-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.cc-media.has-photo { background: var(--white); }
.cc-media .mdi-icon { font-size: 2.5rem; color: var(--purple-light); }
.cc-text { display: flex; flex-direction: column; gap: 2px; }
.cc-name { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.cc-count { font-size: .75rem; color: var(--ink-3); font-weight: 500; }

/* Search and one toggle, above the grid. */
.cat-filter {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 14px 16px;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--r);
}
.cat-filter input[type=search] { flex: 1 1 260px; min-width: 0; }
.cat-filter .check { flex: none; margin: 0; }

/* ---- The all-categories index ----------------------------------------- *
 * One grid of trades, each tile carrying its own sub-categories as links.
 * A section per trade only worked when every trade had children; on a flat
 * catalogue it produced a heading, a rule and one lonely tile, over and over.
 */
.grid-categories.is-index {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  /* Stretch, so a row of tiles shares one baseline instead of stepping up
     and down with however many sub-categories each trade happens to have. */
  align-items: stretch;
}
.cat-tile {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}

.cat-tile-kids {
  flex: 1 1 auto;
  list-style: none; margin: 0; padding: 4px 14px 12px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
}
.cat-tile-kids li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.cat-tile-kids a {
  display: block; padding: 5px 0;
  font-size: .8125rem; color: var(--ink-2); text-decoration: none;
}
.cat-tile-kids a:hover { color: var(--purple); text-decoration: underline; }
.cat-tile-kids a.more { color: var(--purple); font-weight: 600; }
.cat-tile-kids .c-count { font-size: .6875rem; color: var(--ink-3); }
/* Lower case and quiet. Upper case turned it into a badge, and on a
   half-built catalogue it is repeated a dozen times down one screen. */
.cat-tile-kids .c-soon { font-size: .6875rem; font-style: italic; color: var(--ink-note); }

/*
 * On a phone a 230px minimum means one tile per row, and ten trades became
 * six and a half thousand pixels of scrolling to read a directory. Two
 * narrower tiles fit, and a shorter picture keeps the names in reach.
 */
@media (max-width: 620px) {
  .grid-categories.is-index { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* The box stays square here too — a shorter one on phones only would crop
     the pictures back off on the screen they are largest on, relatively. */
  .cat-tile-kids { padding: 4px 10px 10px; }
  .cat-tile-kids a { font-size: .75rem; padding: 4px 0; }
}

/* -------------------------------------------------------------------------
   14. "Why pay more?" feature
   ------------------------------------------------------------------------- */

.why {
  background: var(--purple); color: var(--white);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3.2vw, 44px);
  display: grid; gap: clamp(24px, 3vw, 46px);
  /* The panel is the evidence, the copy is the caption — so the panel gets
     the room. At 1 : 1.1 the retailer names were wrapping ("Travis
     Perkins" over two lines) while the purple half sat half empty. */
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr);
  align-items: center;
  position: relative; overflow: hidden;
}
.why::before {
  content: ""; position: absolute; left: -140px; bottom: -160px;
  width: 400px; height: 400px; border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    rgba(255,255,255,.10) 0 1px, rgba(255,255,255,0) 1px 12px);
  pointer-events: none;
}
.why-copy { position: relative; z-index: 1; }
/* Scoped to .why-copy, not .why: the comparison panel nested inside this
   section has its own h2 on a white card, and a descendant selector here
   turned it white-on-white. */
.why-copy h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  font-weight: 900; letter-spacing: -.025em; color: var(--white);
}
.why-copy h2 em { font-style: normal; color: var(--yellow); }
.why-lede { margin: 14px 0 22px; color: var(--purple-200); font-size: 1.0625rem; max-width: 42ch; }

.why-panel {
  position: relative; z-index: 1;
  background: var(--white); color: var(--ink);
  border-radius: var(--r-lg); padding: 20px;
  display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  box-shadow: var(--shadow-3);
}
.why-thumb { display: grid; gap: 12px; justify-items: center; text-align: center; }
.why-thumb img { width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: contain; }
/*
 * The "image coming soon" placeholder needs a size here.
 *
 * img.is-noimg sizes itself as a percentage of its container, which works
 * in a product card because the card's picture box has a height of its own.
 * This panel's column is sized by its contents, so the percentage had
 * nothing to resolve against and the image collapsed to nothing at all --
 * an empty white column beside the price table. It only showed up once
 * products stopped borrowing each other's photographs.
 */
.why-thumb img.is-noimg {
  width: 100%; max-width: 260px; height: auto;
  /* max-height too: the shared rule caps the placeholder at 58% of its
     container's height, which with a square aspect-ratio dragged the width
     down to 151px inside a 290px column however wide the panel got. */
  max-height: none;
  aspect-ratio: 1; object-fit: contain;
}
.why-thumb .wt-name { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.why-thumb .wt-brand { font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; }

/* minmax(0, 1fr), not 1fr: a bare 1fr track is at least as wide as its
   content, so on a phone the comparison table pushed the column past the
   screen and .why's overflow cropped the prices off the right. */
@media (max-width: 980px) {
  .why { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .why-panel { grid-template-columns: minmax(0, 1fr); }
  .why .pcmp-foot { justify-content: center; text-align: center; }
  /* Stacked, the copy sits over a centred panel; left-aligned above it,
     with a short button, the whole block read as leaning to one side. */
  .why-copy { text-align: center; }
  .why-lede { margin-inline: auto; }
  .why-thumb img,
  .why-thumb img.is-noimg { max-width: 140px; }
}
/* Portrait phones. Three nested paddings (wrap, purple band, white panel)
   left the table about 240px at 360px wide — less than a logo, a retailer
   name and a price need side by side. Thin the frames, shrink the marks,
   and let MyDIY's row put its tag under the logo instead of beside it. */
@media (max-width: 480px) {
  .why { padding: 20px 14px; }
  .why-panel { padding: 10px; gap: 14px; }
  .why .pcmp.is-hero .pcmp-table { font-size: .9375rem; }
  .why .pcmp.is-hero .pcmp-table th,
  .why .pcmp.is-hero .pcmp-table td { padding: 10px 10px; }
  .why .pcmp.is-hero .pcmp-head,
  .why .pcmp.is-hero .pcmp-foot { padding: 10px 12px; }
  .why .pcmp-rowname { gap: 8px; }
  .why .pcmp-logo-slot { width: 60px; height: 28px; }
  .why .pcmp-table tr.is-us .pcmp-rowname { gap: 6px; }
  .why .pcmp-us-logo { height: 24px; }
}

/* -------------------------------------------------------------------------
   15. How it works
   ------------------------------------------------------------------------- */

.steps { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: step; }
.step {
  position: relative; padding: 26px 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 14px;
  background: var(--yellow); color: var(--black);
  border-radius: 50%; font-weight: 900; font-size: 1.125rem;
}
.step h3 { font-size: 1.125rem; color: var(--purple); margin-bottom: 8px; }
.step p { color: var(--ink-2); margin: 0; font-size: .9375rem; }
@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .section-how .section-head { justify-content: center; text-align: center; }
  .section-how .section-head .lede { margin-inline: auto; }
  .step { text-align: center; }
  .step::before { margin-inline: auto; }
}

/* -------------------------------------------------------------------------
   16. Brands
   ------------------------------------------------------------------------- */

.grid-brands { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.brand-card {
  display: grid; place-items: center; gap: 8px;
  min-height: 96px; padding: 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: var(--ink); text-align: center;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.brand-card:hover { border-color: var(--purple-200); box-shadow: var(--shadow-2); color: var(--purple); }
.brand-card img { max-height: 42px; width: auto; object-fit: contain; }
.brand-card .bc-name { font-weight: 700; font-size: .9375rem; }
.brand-card .bc-count { font-size: .75rem; color: var(--ink-3); }

/* -------------------------------------------------------------------------
   17. Listing pages: toolbar, filters, pagination
   ------------------------------------------------------------------------- */

.listing { display: grid; gap: 28px; grid-template-columns: 258px minmax(0, 1fr); align-items: start; }
@media (max-width: 980px) { .listing { grid-template-columns: 1fr; gap: 16px; } }

.page-head { padding-block: 22px 6px; }
.page-head h1 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem); color: var(--purple); }
.page-head .lede { margin: 10px 0 0; color: var(--ink-2); max-width: 70ch; }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.toolbar .count { font-size: .9375rem; color: var(--ink-2); font-weight: 600; }
.toolbar .count strong { color: var(--ink); }
.toolbar-controls { display: flex; align-items: center; gap: 10px; }

.select {
  appearance: none; -webkit-appearance: none;
  padding: 10px 38px 10px 14px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23574E63' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  font-size: .9375rem; font-weight: 600; color: var(--ink);
}
.select:hover { border-color: var(--purple-200); }

.filters { position: sticky; top: 16px; }
.filter-group { border-bottom: 1px solid var(--line); padding: 4px 0 14px; margin-bottom: 14px; }
.filter-group:last-child { border-bottom: 0; }
.filter-group legend { padding: 0; width: 100%; }
.filter-group h3 {
  font-size: .8125rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--purple); margin-bottom: 12px;
}
.filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 264px; overflow-y: auto; }
.check {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; margin-left: -6px; border-radius: var(--r-sm);
  font-size: .9375rem; cursor: pointer;
}
.check:hover { background: var(--purple-100); }
.check input { width: 18px; height: 18px; accent-color: var(--purple); flex: none; margin: 0; }
.check .c-count { margin-left: auto; font-size: .8125rem; color: var(--ink-3); }

.filter-facet { margin: 0 0 14px; }
.filter-facet summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 32px; cursor: pointer; list-style: none;
}
.filter-facet summary::-webkit-details-marker { display: none; }
.filter-facet summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: rotate(45deg);
}
.filter-facet[open] summary { margin-bottom: 8px; }
.filter-facet[open] summary::after { transform: rotate(-135deg); }
.filter-facet summary h3 {
  margin: 0; font-size: .8125rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--purple);
}

.price-range { display: flex; align-items: center; gap: 8px; }
.price-range input {
  width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .9375rem;
}
.applied { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; background: var(--purple-100); color: var(--purple);
  border: 1px solid var(--purple-200); border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 700; text-decoration: none;
}
.chip:hover { background: var(--purple-150); color: var(--purple); }
.chip .x { font-size: 1rem; line-height: 1; }

.filter-toggle { display: none; }
@media (max-width: 980px) {
  .filter-toggle { display: inline-flex; }
  .filters {
    position: fixed; inset: 0 auto 0 0; z-index: 120;
    width: min(340px, 90vw); background: var(--white);
    transform: translateX(-100%); transition: transform var(--t) var(--ease);
    overflow-y: auto; padding: 0 18px 24px; box-shadow: var(--shadow-3);
    visibility: hidden;
  }
  .filters.is-open { transform: none; visibility: visible; }
  .filters-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; background: var(--white);
    padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 14px;
  }
  .filters-title { font-size: 1.125rem; font-weight: 800; color: var(--purple); margin: 0; }
  .filters-backdrop {
    position: fixed; inset: 0; z-index: 110; background: rgba(27,21,34,.5);
    opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
  }
  .filters-backdrop.is-open { opacity: 1; visibility: visible; }
}
@media (min-width: 981px) { .filters-head, .filters-backdrop { display: none; } }

/* The tally under a grid. Quiet: it answers a question, it is not a claim. */
.result-count {
  margin: 18px 0 0; text-align: center;
  font-size: .875rem; color: var(--ink-3);
}
.result-count strong { color: var(--ink-2); font-weight: 700; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 34px; }
.pagination a, .pagination span {
  min-width: 44px; min-height: 44px; padding: 10px 12px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink); font-weight: 700; font-size: .9375rem;
}
.pagination a:hover { border-color: var(--purple); color: var(--purple); }
.pagination .is-current { background: var(--purple); border-color: var(--purple); color: var(--white); }
.pagination .is-gap { border: 0; min-width: 24px; color: var(--ink-3); }

/* -------------------------------------------------------------------------
   18. Breadcrumbs
   ------------------------------------------------------------------------- */

.crumbs { padding: 14px 0 4px; font-size: .8125rem; color: var(--ink-2); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumbs li { display: flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--purple); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------------------
   19. Product page
   ------------------------------------------------------------------------- */

/* Grid areas let mobile lead with the product's identity, then the gallery,
   then the buy controls — without duplicating any markup. */
.product-main {
  display: grid;
  gap: clamp(16px, 2.2vw, 28px) clamp(20px, 3vw, 40px);
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  grid-template-areas:
    "gallery head"
    "gallery buy";
  grid-template-rows: auto 1fr;
  align-items: start;
  padding-block: 8px 34px;
}
.product-main > .p-head  { grid-area: head; }
.product-main > .gallery { grid-area: gallery; position: sticky; top: 16px; }
.product-main > .buy-col { grid-area: buy; }

@media (max-width: 980px) {
  .product-main {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "gallery" "buy";
    grid-template-rows: auto;
  }
  .product-main > .gallery { position: static; }
}

/* Gallery */
.gallery { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; align-items: start; }
/* One image means no thumbnail strip — the stage must not be squeezed into
   the column the strip would have used. */
.gallery.is-single { grid-template-columns: minmax(0, 1fr); }
/*
 * Spans both columns. As an ordinary grid child it would drop into the
 * thumbnail column and sit under the strip rather than under the picture.
 */
/* The same notice under a grid of cards, shown once rather than per card. */
/*
 * One rule for both: the same sentence, under a single picture or under a
 * grid of them, so they cannot drift apart.
 */
.grid-note,
.gallery-note {
  margin: 14px 0 0;
  font-size: .8125rem; line-height: 1.5;
  /* A lighter grey was tried first and measured 2.7:1 — a disclosure nobody
     can read is not a disclosure. This one clears 4.5:1 on white and on both
     tinted section backgrounds the notice actually sits on. */
  color: var(--ink-note);
  text-align: center;
}
.gallery-note {
  /* Spans both columns; as an ordinary grid child it would drop into the
     thumbnail column and sit under the strip rather than under the picture. */
  grid-column: 1 / -1;
  margin-top: 10px;
}
.note-mark { margin-right: .25em; }
.gallery-thumbs { display: flex; flex-direction: column; gap: 10px; }
.gallery-thumbs button {
  width: 78px; height: 78px; padding: 6px;
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-sm);
  display: grid; place-items: center; overflow: hidden;
}
.gallery-thumbs button:hover { border-color: var(--purple-200); }
.gallery-thumbs button[aria-current="true"] { border-color: var(--yellow); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.gallery-stage {
  position: relative; aspect-ratio: 1;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; display: grid; place-items: center; overflow: hidden;
}
.gallery-stage img { width: 100%; height: 100%; object-fit: contain; }

/* The placeholder is artwork, not a photo — it must not blow up to fill a
   large frame. */
img.is-noimg { width: auto; height: auto; max-width: min(58%, 240px); max-height: 58%; margin: auto; }
.gallery-flags { position: absolute; inset: 14px auto auto 14px; display: flex; flex-direction: column; gap: 8px; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 50%;
  color: var(--purple); box-shadow: var(--shadow-1);
}
.gallery-nav:hover { border-color: var(--purple); }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
.gallery-nav svg { width: 18px; height: 18px; }

@media (max-width: 620px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery-thumbs { flex-direction: row; overflow-x: auto; order: 2; padding-bottom: 4px; }
  .gallery-thumbs button { width: 64px; height: 64px; flex: none; }
}

/* Buy column */
.buy-col { display: grid; gap: 16px; }
.p-brand { display: flex; align-items: center; gap: 10px; }
.p-brand img { max-height: 30px; width: auto; }
.p-brand .pb-name {
  font-size: .75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--purple);
  background: var(--purple-100); padding: 5px 9px; border-radius: var(--r-xs);
}
.p-title { font-size: clamp(1.375rem, 1.05rem + 1.3vw, 1.875rem); letter-spacing: -.02em; }
.p-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p-benefits li { display: flex; gap: 10px; font-size: .9375rem; color: var(--ink-2); }
.p-benefits li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px;
  background: var(--purple);
  -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.6L4.4 11.4l1.4-1.4 3.8 3.8 8.6-8.6 1.4 1.4z'/%3E%3C/svg%3E");
}

.price-block { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.price-now { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 900; color: var(--purple); letter-spacing: -.03em; line-height: 1; }
.price-was { font-size: 1.0625rem; color: var(--ink-3); text-decoration: line-through; }
/* What one price buys ("per pack of 10"), beside the price on cards, product page and buy bar. */
.price-unit { font-size: .875rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
/*
 * Sits between the price and the VAT small print: a claim, not small print.
 * Green rather than the yellow of the Save badge above it, because the two
 * are measured against different things -- that one against the cheapest
 * retailer, this one against the average of all of them -- and dressing
 * them alike would read as the same figure stated twice.
 */
.price-vs-avg {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px;
  margin: 10px 0 0; font-size: .875rem; color: var(--ink-2);
}
.price-vs-avg .pva-figure {
  padding: 3px 9px; border-radius: var(--r-sm);
  background: var(--success-bg); color: var(--success);
  font-weight: 800; letter-spacing: .01em;
}

.price-vat { font-size: .8125rem; color: var(--ink-3); width: 100%; margin: 0; }

.buy-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--white);
}
.qty button { width: 46px; min-height: 48px; border: 0; background: none; font-size: 1.25rem; font-weight: 700; color: var(--purple); }
.qty button:hover { background: var(--purple-100); }
.qty input {
  width: 54px; min-height: 48px; text-align: center; border: 0;
  border-inline: 1px solid var(--line); 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 .btn { flex: 1; min-width: 190px; }
.fav-btn {
  width: 52px; display: grid; place-items: center;
  border: 2px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--ink-2);
}
.fav-btn:hover { border-color: var(--purple-200); color: var(--purple); }
.fav-btn[aria-pressed="true"] { border-color: var(--purple); color: var(--purple); background: var(--purple-100); }
.fav-btn svg { width: 22px; height: 22px; }
/* The heart on its own, when there is no Add to basket beside it. */
.fav-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: .9375rem; color: var(--ink-2); }
.fav-row .fav-btn { min-height: 48px; flex: none; }

.stock { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 700; }
.stock::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.stock.in { color: var(--success); }
.stock.out { color: var(--warning); }

/* Fulfilment strip */
.fulfil {
  display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--line-soft);
}
.fulfil > div { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--white); }
.fulfil .mdi-icon { font-size: 1.5rem; color: var(--purple); flex: none; }
.fulfil strong { display: block; font-size: .875rem; }
.fulfil span { font-size: .8125rem; color: var(--ink-2); }

/* Tabs */
.p-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: clamp(16px, 2vw, 24px); }
.p-tags-label { font-size: .8125rem; font-weight: 700; color: var(--ink-2); }

.tabs { margin-top: 8px; }
.tablist {
  display: flex; gap: 4px; overflow-x: auto;
  border-bottom: 1px solid var(--line); margin-bottom: 24px;
  scrollbar-width: none;
}
.tablist::-webkit-scrollbar { display: none; }
/* Without the script there is nothing to switch: the panels stack instead. */
[data-tabs]:not(.is-ready) .tablist { display: none; }
.tablist button {
  padding: 14px 20px; background: none; border: 0;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  font-size: .9375rem; font-weight: 700; color: var(--ink-2); white-space: nowrap;
}
.tablist button:hover { color: var(--purple); }
.tablist button[aria-selected="true"] { color: var(--purple); border-bottom-color: var(--yellow); background: var(--purple-100); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.tabpanel[hidden] { display: none; }
.tabpanel { max-width: 78ch; }
.tabpanel h3 { font-size: 1.125rem; color: var(--purple); margin: 26px 0 10px; }
.tabpanel h3:first-child { margin-top: 0; }
.tabpanel ul { padding-left: 1.2em; }
.tabpanel li { margin-bottom: 6px; }

/*
 * Two or three tables side by side rather than stacked: the physical facts
 * and the trade specifications are read together -- "is it 2.4m AND is it
 * B-rated" -- and a column each keeps both in view.
 */
.spec-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

.spec-table { font-size: .9375rem; max-width: 620px; }
.spec-table caption { text-align: left; font-weight: 800; color: var(--purple); padding-bottom: 10px; }
.spec-table th, .spec-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.spec-table th { font-weight: 600; color: var(--ink-2); width: 44%; }
.spec-table td { font-weight: 600; }
.spec-table tr:nth-child(even) { background: var(--bg-tint); }

.review { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.review:last-child { border-bottom: 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-head .r-author { font-weight: 700; }
.review-head .r-date { font-size: .8125rem; color: var(--ink-3); }

/* Sticky mobile buy bar */
.buy-bar {
  position: fixed; inset: auto 0 0; z-index: 95;
  display: none; align-items: center; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(27,21,34,.10);
  transform: translateY(110%); transition: transform var(--t) var(--ease);
}
.buy-bar.is-on { transform: none; }
.buy-bar .bb-price { font-size: 1.25rem; font-weight: 900; color: var(--purple); line-height: 1.1; }
.buy-bar .bb-save { font-size: .75rem; font-weight: 700; color: var(--ink-2); }
.buy-bar .btn { flex: 1; }
@media (max-width: 780px) { .buy-bar { display: flex; } body.has-buybar { padding-bottom: 78px; } }

/* -------------------------------------------------------------------------
   20. Basket & checkout
   ------------------------------------------------------------------------- */

.cart-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 366px; align-items: start; }
@media (max-width: 980px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-line {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line);
}
.cart-line .cl-media {
  width: 96px; height: 96px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--r); display: grid; place-items: center;
}
.cart-line .cl-media img { width: 100%; height: 100%; object-fit: contain; }
.cart-line .cl-name { font-weight: 600; font-size: .9375rem; }
.cart-line .cl-name a { color: var(--ink); text-decoration: none; }
.cart-line .cl-name a:hover { color: var(--purple); text-decoration: underline; }
.cart-line .cl-meta { font-size: .8125rem; color: var(--ink-2); margin-top: 4px; }
.cart-line .cl-right { text-align: right; display: grid; gap: 8px; justify-items: end; }
.cart-line .cl-total { font-size: 1.125rem; font-weight: 800; color: var(--purple); }
.cart-line .qty { transform: scale(.9); transform-origin: right center; }
.link-remove { background: none; border: 0; padding: 0; font-size: .8125rem; color: var(--ink-2); text-decoration: underline; }
.link-remove:hover { color: var(--error); }

@media (max-width: 620px) {
  .cart-line { grid-template-columns: 76px minmax(0, 1fr); }
  .cart-line .cl-media { width: 76px; height: 76px; }
  .cart-line .cl-right { grid-column: 1 / -1; justify-items: stretch; text-align: left;
    display: flex; align-items: center; justify-content: space-between; }
  .cart-line .qty { transform: none; }
}

.summary {
  position: sticky; top: 16px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
}
.summary h2 { font-size: 1.125rem; color: var(--purple); margin-bottom: 14px; }
.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: .9375rem; }
.sum-row.total {
  border-top: 2px solid var(--line); margin-top: 8px; padding-top: 14px;
  font-size: 1.25rem; font-weight: 900; color: var(--purple);
}
.sum-saving {
  margin: 14px 0; padding: 14px 16px;
  background: var(--yellow); color: var(--black); border-radius: var(--r);
  display: flex; align-items: center; gap: 12px;
}
.sum-saving .ss-amount { font-size: 1.375rem; font-weight: 900; line-height: 1; }
.sum-saving .ss-text { font-size: .8125rem; font-weight: 700; line-height: 1.25; }
.sum-note { font-size: .8125rem; color: var(--ink-2); margin: 12px 0 0; }

.progress-free { margin: 4px 0 14px; }
.progress-free .pf-bar { height: 8px; background: var(--line-soft); border-radius: var(--r-pill); overflow: hidden; }
.progress-free .pf-fill { height: 100%; background: var(--yellow); border-radius: var(--r-pill); }
.progress-free p { margin: 8px 0 0; font-size: .8125rem; color: var(--ink-2); }

.checkout-layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 366px; align-items: start; }
@media (max-width: 980px) { .checkout-layout { grid-template-columns: 1fr; } }
.checkout-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 24px; padding: 0; flex-wrap: wrap; }
.checkout-steps li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--bg-tint); color: var(--ink-2); font-size: .8125rem; font-weight: 700;
}
.checkout-steps li.is-done { background: var(--purple-100); color: var(--purple); }
.checkout-steps li.is-now { background: var(--purple); color: var(--white); }

/* -------------------------------------------------------------------------
   21. Forms
   ------------------------------------------------------------------------- */

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: .875rem; font-weight: 700; }
.field .hint { font-size: .8125rem; color: var(--ink-2); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); font-size: 1rem;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--purple-200); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-150);
}
.field.has-error input, .field.has-error textarea { border-color: var(--error); }
.field .error { font-size: .8125rem; color: var(--error); font-weight: 600; }
.field-row { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.form-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(20px, 3vw, 30px);
}
.form-card h2 { font-size: 1.25rem; color: var(--purple); margin-bottom: 6px; }
.form-card .form-lede { color: var(--ink-2); margin-bottom: 20px; font-size: .9375rem; }

.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r); margin-bottom: 18px;
  font-size: .9375rem; font-weight: 600;
  border: 1px solid transparent;
}
.alert-success { background: var(--success-bg); border-color: #BFE3D1; color: var(--success); }
.alert-error   { background: var(--error-bg);   border-color: #F3C6C2; color: var(--error); }
.alert-info    { background: var(--purple-100); border-color: var(--purple-200); color: var(--purple); }
.alert-warning { background: var(--warning-bg); border-color: #F0D9B0; color: var(--warning); }

.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1; min-width: 190px; min-height: 48px; padding: 12px 14px;
  border: 1px solid transparent; border-radius: var(--r); font-size: .9375rem;
}
.newsletter-form input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,206,0,.35); }

/* -------------------------------------------------------------------------
   22. Account
   ------------------------------------------------------------------------- */

.account-layout { display: grid; gap: 28px; grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .account-layout { grid-template-columns: 1fr; } }
.account-nav { display: grid; gap: 2px; }
.account-nav a {
  display: block; padding: 12px 14px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9375rem;
}
.account-nav a:hover { background: var(--purple-100); color: var(--purple); }
.account-nav a[aria-current="page"] { background: var(--purple); color: var(--white); }

.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.panel + .panel { margin-top: 16px; }
.panel h2 { font-size: 1.125rem; color: var(--purple); margin-bottom: 14px; }

.data-table { font-size: .9375rem; }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.data-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 800; }
.data-table tbody tr:hover { background: var(--bg-tint); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.status {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 800; background: var(--purple-100); color: var(--purple);
}
.status.is-pending, .status.is-awaiting_payment { background: var(--warning-bg); color: var(--warning); }
.status.is-completed, .status.is-paid, .status.is-delivered { background: var(--success-bg); color: var(--success); }
.status.is-cancelled, .status.is-refunded { background: var(--error-bg); color: var(--error); }

/* -------------------------------------------------------------------------
   23. Compare table (catalogue-level)
   ------------------------------------------------------------------------- */

.compare-table { font-size: .9375rem; min-width: 640px; }
.compare-table th, .compare-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); text-align: right; }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; }
.compare-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.compare-table thead th.is-us { background: var(--yellow); color: var(--black); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.compare-table td.is-us { background: var(--yellow-50); font-weight: 800; color: var(--purple); }

/* -------------------------------------------------------------------------
   24. Empty states
   ------------------------------------------------------------------------- */

.empty {
  text-align: center; padding: clamp(36px, 6vw, 64px) 20px;
  border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--bg-tint);
}
.empty .mdi-icon { font-size: 2.75rem; color: var(--purple-300); margin: 0 auto 14px; }
.empty h2 { font-size: 1.25rem; color: var(--purple); margin-bottom: 8px; }
.empty p { color: var(--ink-2); max-width: 48ch; margin-inline: auto; }
.empty .empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.empty ul { display: inline-block; text-align: left; color: var(--ink-2); margin-top: 8px; }

/* -------------------------------------------------------------------------
   25. Content pages
   ------------------------------------------------------------------------- */

.prose { max-width: 72ch; font-size: 1rem; }
.prose h2 { font-size: 1.375rem; color: var(--purple); margin: 34px 0 12px; }
.prose h3 { font-size: 1.0625rem; color: var(--ink); margin: 24px 0 8px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin-bottom: 1.1em; }
.prose li { margin-bottom: 7px; }
.prose a { font-weight: 600; }

.seo-copy { font-size: .9375rem; color: var(--ink-2); max-width: 78ch; }
.seo-copy h2 { font-size: 1.25rem; color: var(--purple); margin-bottom: 10px; }
.seo-copy a { color: var(--purple); font-weight: 600; }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  padding: 18px 40px 18px 0; font-weight: 700; font-size: 1rem;
  cursor: pointer; list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 8px; top: 24px;
  width: 10px; height: 10px; border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: rotate(45deg); transition: transform var(--t) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); top: 27px; }
.faq-item .faq-body { padding-bottom: 20px; color: var(--ink-2); max-width: 72ch; }

.note-business {
  border-left: 4px solid var(--yellow); background: var(--yellow-50);
  padding: 14px 16px; border-radius: 0 var(--r) var(--r) 0; margin: 18px 0;
  font-size: .9375rem;
}
.note-business strong { color: var(--purple); }

/* -------------------------------------------------------------------------
   26. Footer
   ------------------------------------------------------------------------- */

.mdi-footer { background: var(--purple); color: var(--white); margin-top: clamp(48px, 6vw, 80px); }
.footer-top {
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
  padding-block: clamp(36px, 4vw, 56px);
}
.footer-brand img { width: 168px; margin-bottom: 16px; }
.footer-tagline { font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: var(--white); max-width: 15ch; letter-spacing: -.015em; }
.footer-col h3 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--yellow); margin-bottom: 14px; font-weight: 800;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a { color: var(--purple-200); text-decoration: none; font-size: .9375rem; }
.footer-col a:hover { color: var(--white); text-decoration: underline; }

.footer-news h3 { color: var(--yellow); }
.footer-news p { font-size: .875rem; color: var(--purple-200); margin-bottom: 12px; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: var(--white);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.social a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.social svg { width: 18px; height: 18px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.18);
  padding-block: 20px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .8125rem; color: var(--purple-200);
}
.footer-bottom a { color: var(--purple-200); }

@media (max-width: 1080px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand, .footer-news { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; gap: 26px; }
}

/* -------------------------------------------------------------------------
   27. Newsletter band
   ------------------------------------------------------------------------- */

.band-news {
  background: var(--yellow); color: var(--black);
  padding-block: clamp(28px, 3.4vw, 44px);
}
.band-news .wrap { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); align-items: center; }
.band-news h2 { font-size: clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem); color: var(--purple); }
.band-news p { margin: 8px 0 0; font-size: .9375rem; color: var(--purple-950); }
@media (max-width: 780px) { .band-news .wrap { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   28. Flash messages
   ------------------------------------------------------------------------- */

.flash-stack { position: fixed; inset: auto 16px 16px auto; z-index: 140; display: grid; gap: 8px; max-width: 360px; }
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; border-radius: var(--r);
  background: var(--purple); color: var(--white);
  box-shadow: var(--shadow-3); font-size: .9375rem; font-weight: 600;
  animation: flash-in var(--t) var(--ease) both;
}
.flash.is-error { background: var(--error); }
.flash.is-success { background: var(--success); }
.flash button { background: none; border: 0; color: inherit; opacity: .8; padding: 0 0 0 6px; font-size: 1.125rem; line-height: 1; }
@keyframes flash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------------------
   29. Print
   ------------------------------------------------------------------------- */

@media print {
  .mdi-header, .mdi-footer, .buy-bar, .flash-stack, .band-news, .filters { display: none !important; }
  body { color: #000; }
  .pcmp-table tr.is-us { background: #eee !important; }
}

/* -------------------------------------------------------------------------
   Archivo, self-hosted (SEO #25, ideas #73)
   Served from assets/fonts instead of Google Fonts: no render-blocking
   stylesheet on another host, and no visitor IP addresses sent to Google.
   One variable file per subset covers every weight from 400 to 900. The
   "Archivo Fallback" face above still stands in while it loads.
   Licence: SIL Open Font Licence 1.1, see assets/fonts/OFL.txt.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   SEO round 3: card brand links, <picture> wrappers, visually hidden H1 words
   ------------------------------------------------------------------------- */
/* The brand on a card is a link (SEO #49). It sits above the card's
   stretched name link, or that would swallow the click. */
.pc-brand a { position: relative; z-index: 2; color: inherit; text-decoration: none; }
.pc-brand a:hover { color: var(--purple); text-decoration: underline; }

/* <picture> only chooses the file; the <img> inside keeps every rule it had. */
picture.mdi-pic { display: contents; }

/* =========================================================================
   Customer journey (added 11 Nov 2026): sign-out form, basket postcode and
   saved lists, checkout extras, product calculator and question form,
   account data and returns, price alerts, basket drawer, cookie consent.
   A block of its own; nothing above is changed by it.
   ========================================================================= */

/* Buttons that look like links, for actions that must be a form post. */
.link-button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--purple); text-decoration: underline; text-underline-offset: 2px;
}
.link-button:hover { color: var(--purple-light); }
.inline-form { display: inline; margin: 0 0 0 10px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.btn-danger { --btn-bg: var(--error); --btn-fg: var(--white); --btn-bd: var(--error); }
.btn-danger:hover { --btn-bg: #8E1E17; --btn-bd: #8E1E17; color: var(--white); }

/* Sign out in the account menu: a form, styled as the links beside it. */
.account-nav-out { margin: 0; }
.account-nav-out button {
  display: block; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; font-weight: 600; font-size: .9375rem; color: var(--ink); cursor: pointer;
}
.account-nav-out button:hover { background: var(--purple-100); color: var(--purple); }
.drawer-foot form { margin: 0; }

/* Basket: delivery postcode and saving the basket as a list. */
.sum-sub { font-size: .8125rem; color: var(--ink-2); font-weight: 500; }
.sum-postcode, .save-list { margin-top: 12px; }
.sum-postcode label, .save-list label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 6px; }
.sum-postcode-row { display: flex; gap: 8px; }
.sum-postcode-row input { flex: 1; min-width: 0; }
.save-list { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
.save-list summary { cursor: pointer; font-weight: 600; color: var(--purple); }
.save-list form { margin-top: 10px; }

/* Checkout: address lookup and a separate billing address. */
.address-lookup { display: grid; gap: 8px; margin: -4px 0 16px; justify-items: start; }
.address-lookup select { width: 100%; }
.check-row { margin: 4px 0 16px; }
.billing-fields { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 4px; margin: 0 0 16px; }
.billing-fields legend { font-weight: 700; padding: 0 6px; }

/* Product page: order rules, the quantity calculator, the question form. */
.qty-rule { font-size: .875rem; color: var(--ink-2); margin-top: 8px; }
.calc { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--bg-tint); }
.calc summary { cursor: pointer; font-weight: 700; color: var(--purple); }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; }
.calc-grid label { display: grid; gap: 4px; font-size: .875rem; font-weight: 600; }
.calc-note { font-size: .8125rem; color: var(--ink-2); margin: 8px 0 0; }
.calc-result { font-weight: 700; color: var(--success); min-height: 1.4em; margin: 0; }
.ask { margin: 32px 0 8px; border-top: 1px solid var(--line); padding-top: 20px; }
.ask summary { cursor: pointer; list-style: none; }
.ask summary::-webkit-details-marker { display: none; }
.ask summary h2 { display: inline; font-size: 1.25rem; color: var(--purple); }
.ask summary::after { content: " +"; font-weight: 700; color: var(--purple); }
.ask details[open] summary::after { content: " \2212"; }
.ask-form { max-width: 640px; margin-top: 14px; }
.ss-item .ss-save { margin-left: 8px; font-size: .75rem; font-weight: 800; color: var(--success); white-space: nowrap; }

/* Home and about: the counted saving. */
.step-proof { margin-top: 8px; font-size: .9375rem; }

/* Account: returns, saved lists, data, price alerts. */
.return-form summary, .price-alerts summary { cursor: pointer; }
.return-form summary h2, .price-alerts summary h2 { display: inline; margin: 0; }
.return-form form { margin-top: 14px; }
.field-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-inline input { width: 90px; }
.saved-list-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.close-account { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 16px; }
.close-account summary { cursor: pointer; font-weight: 600; color: var(--error); }
.close-account form { margin-top: 12px; max-width: 420px; }
.price-alerts { margin-bottom: 20px; }
.alert-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.list-actions { margin: 20px 0; }
.list-share input { width: 100%; }

/* Basket drawer after adding (mydiy.js). */
.bdrawer {
  position: fixed; inset: 0; z-index: 300; background: rgba(27, 21, 34, .45);
  display: flex; justify-content: flex-end;
}
.bdrawer[hidden] { display: none; }
.bdrawer-panel {
  position: relative; width: min(400px, 100%); height: 100%; overflow-y: auto;
  background: var(--white); padding: 24px 20px; box-shadow: var(--shadow-3);
}
.bdrawer-panel h2 { font-size: 1.25rem; color: var(--purple); margin: 0 32px 16px 0; }
.bdrawer-x {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: var(--r-pill);
  background: var(--purple-100); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--purple);
}
.bdrawer-line { display: flex; gap: 12px; align-items: flex-start; }
.bdrawer-line img { border-radius: var(--r-sm); border: 1px solid var(--line); flex: none; }
.bdrawer-name { font-weight: 700; margin: 0 0 4px; }
.bdrawer-meta { font-size: .875rem; color: var(--ink-2); margin: 0; }
.bdrawer-save { font-size: .875rem; font-weight: 700; color: var(--success); margin: 4px 0 0; }
.bdrawer-note { font-size: .875rem; background: var(--yellow-100); border-radius: var(--r-sm); padding: 8px 10px; margin: 14px 0 0; }
.bdrawer-sub { margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--line); }
.bdrawer-sub span { font-size: .875rem; color: var(--success); font-weight: 700; }
.bdrawer-actions { display: grid; gap: 8px; }
@media (max-width: 560px) {
  .bdrawer { align-items: flex-end; }
  .bdrawer-panel { height: auto; max-height: 90vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* Cookie consent: only drawn when a tag is set in the admin. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 250;
  max-width: 560px; margin: 0 auto; background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 18px 20px;
}
.consent[hidden] { display: none; }
.consent h2 { font-size: 1.0625rem; margin: 0 0 6px; color: var(--purple); }
.consent p { font-size: .9375rem; margin: 0 0 12px; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-link { color: inherit; }

/* -------------------------------------------------------------------------
   "Thank you" dialog: confirms something the customer sent us (a price
   report, a question, a return request). In the middle of the screen, where
   it cannot be missed after the page has jumped back to the form.
   ------------------------------------------------------------------------- */
.sent-dialog {
  position: fixed; inset: 0; margin: auto; z-index: 160;
  width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 28px 24px 24px; border: 0; border-radius: var(--r);
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-3);
  text-align: center;
  animation: sent-in var(--t) var(--ease) both;
}
.sent-dialog::backdrop { background: rgba(27, 21, 34, .45); }
.sent-dialog h2 { margin: 12px 0 8px; font-size: 1.375rem; color: var(--purple); }
.sent-dialog p { margin: 0 0 10px; color: var(--ink-2); line-height: 1.5; }
.sent-dialog form { margin-top: 18px; }
.sent-dialog .btn { min-width: 140px; }
.sent-tick {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--success-bg); color: var(--success);
}
.sent-tick .ui-icon { width: 30px; height: 30px; }
@keyframes sent-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sent-dialog { animation: none; } }
@media print { .sent-dialog { display: none !important; } }
/* Jumped to by "Seen it cheaper?" and after sending: clear of the sticky header. */
.ask { scroll-margin-top: 96px; }
/* A mandatory field left empty or wrong, pointed at on Send (see mydiy.js). */
input.needs-input, select.needs-input, textarea.needs-input {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .15);
}
/* Scrolled to from a form: clear of the sticky header. */
input, select, textarea { scroll-margin-top: 110px; scroll-margin-bottom: 90px; }

/* =========================================================================
   Story pages: About MyDIY, How price comparison works (11 Nov 2026).
   Full-width bands in the brand colours, each holding one part of the story,
   with the concentric-ring device from the guidelines used sparingly.
   ========================================================================= */

.story-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--purple); color: var(--white);
}
/* The ring device, twice, kept quiet. */
.story-hero::before, .story-hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle at center, rgba(255,255,255,.10) 0 1px, rgba(255,255,255,0) 1px 13px);
}
.story-hero::before { width: 520px; height: 520px; right: -140px; top: -180px; }
.story-hero::after  { width: 300px; height: 300px; left: -120px; bottom: -170px; opacity: .6; }
.story-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 40px;
  padding-block: clamp(40px, 6vw, 84px);
}
.story-hero h1 {
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.02; color: var(--white);
}
.story-hero h1 span { color: var(--yellow); }
.story-lede { margin: 20px 0 0; font-size: clamp(1.0625rem, .98rem + .4vw, 1.3125rem); max-width: 46ch; color: var(--purple-150); }
.story-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-ghost-light { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255,255,255,.55); }
.btn-ghost-light:hover { --btn-bg: rgba(255,255,255,.1); --btn-bd: var(--white); color: var(--white); }

.story-eyebrow {
  display: inline-block; margin: 0 0 14px; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--black);
  font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.story-eyebrow.is-dark { background: var(--purple); color: var(--white); }

.story-badge { justify-self: center; }
.story-disc {
  display: grid; place-items: center; position: relative;
  width: clamp(170px, 22vw, 280px); aspect-ratio: 1; border-radius: 50%;
  background: var(--yellow); color: var(--purple);
  box-shadow: 0 0 0 16px rgba(255,206,0,.22), 0 0 0 34px rgba(255,206,0,.10);
}
.story-disc .mdi-icon { width: 46%; height: 46%; }

.story-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.story-chips li {
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: var(--white);
}
.story-chips strong { color: var(--yellow); }

/* Bands */
.story-band { padding-block: clamp(40px, 6vw, 76px); background: var(--white); }
.story-band.is-lilac  { background: var(--purple-100); }
.story-band.is-yellow { background: var(--yellow); color: var(--black); }
.story-band.is-purple { background: var(--purple-950); color: var(--white); }
.story-head { margin-bottom: 26px; }
.story-band h2 {
  font-size: clamp(1.625rem, 1.15rem + 2vw, 2.5rem); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.1; color: var(--purple);
}
.story-band.is-purple h2 { color: var(--white); }
.story-band.is-yellow h2 { color: var(--purple-950); }
.story-band p { max-width: 68ch; line-height: 1.6; }
.story-band h3 { font-size: 1.25rem; font-weight: 800; color: var(--purple); margin: 0 0 8px; }

.story-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.story-split.is-wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

.story-panel {
  position: relative; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl);
  background: var(--purple-100); border: 1px solid var(--purple-200);
}
.story-band.is-lilac .story-panel { background: var(--white); }
.story-panel.is-yellow { background: var(--yellow); border-color: var(--yellow); }
.story-panel h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); margin: 14px 0 10px; }
.story-panel h3 { margin-top: 14px; }
.story-icon {
  display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--purple); color: var(--yellow);
}
.story-panel.is-yellow .story-icon { background: var(--purple-950); }
.story-icon .mdi-icon { width: 30px; height: 30px; }

/* Numbered cards and steps */
.story-cards, .story-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px);
  margin: 0; padding: 0; list-style: none;
}
.story-cards li, .story-steps li {
  position: relative; padding: 30px 26px 26px; border-radius: var(--r-xl);
  background: var(--white); box-shadow: var(--shadow-2); border-top: 6px solid var(--yellow);
}
.story-cards li:nth-child(2), .story-steps li:nth-child(2) { border-top-color: var(--purple-light); }
.story-cards li:nth-child(3), .story-steps li:nth-child(3) { border-top-color: var(--purple); }
.story-num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 50%; background: var(--purple); color: var(--yellow);
  font-size: 1.25rem; font-weight: 900;
}
.story-cards p, .story-steps p { margin: 0; color: var(--ink-2); }
/* The steps join up: a dotted path between the cards on a wide screen. */
@media (min-width: 961px) {
  .story-steps li:not(:last-child)::after {
    content: ""; position: absolute; top: 52px; right: calc(-1 * clamp(16px, 2.4vw, 28px));
    width: clamp(16px, 2.4vw, 28px); border-top: 3px dotted var(--purple-light);
  }
}

/* Where we are today */
.story-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.story-figures li {
  padding: 22px 20px; border-radius: var(--r-xl); background: rgba(255,255,255,.55);
  border: 2px solid var(--purple-950);
}
.story-figures strong { display: block; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 900; color: var(--purple); line-height: 1; }
.story-figures span { display: block; margin-top: 8px; font-weight: 600; color: var(--purple-950); }

/* Start here */
.story-links {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.story-links a {
  display: flex; flex-direction: column; gap: 14px; height: 100%;
  padding: 24px; border-radius: var(--r-xl); text-decoration: none;
  background: var(--purple-100); color: var(--ink-2);
  border: 1px solid var(--purple-200);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.story-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--purple-light); }
.story-links .mdi-icon { width: 40px; height: 40px; color: var(--purple); }
.story-links strong { display: block; margin-bottom: 4px; font-size: 1.125rem; color: var(--purple); }
.story-links strong::after { content: " \2192"; color: var(--purple-light); }

/* The sums */
.story-formula {
  margin: 0 0 18px; padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--purple-950); color: var(--white);
}
.story-formula p { margin: 6px 0; font-size: 1.0625rem; }
.story-formula span { color: var(--yellow); font-weight: 800; }
.story-formula em { font-style: normal; text-decoration: underline; text-decoration-color: var(--purple-light); text-underline-offset: 4px; }

.story-example {
  margin: 0; padding: 26px; border-radius: var(--r-xl);
  background: var(--purple-100); border: 1px solid var(--purple-200);
}
.story-example figcaption { margin-bottom: 48px; font-weight: 600; color: var(--ink-2); }
.story-tag {
  display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--black); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
/* Bars sit in a fixed-height plot; --h is each price as a share of the dearest. */
.story-bars {
  --plot: 200px;
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 14px;
  height: var(--plot); margin: 0 0 34px; padding: 0; list-style: none;
  border-bottom: 2px solid var(--purple-300);
}
.story-bars li { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.story-bars .bar { width: 100%; height: var(--h); border-radius: 10px 10px 0 0; background: var(--purple-200); }
.story-bars .is-ours .bar { background: var(--purple); }
/* The price sits inside the top of its bar, clear of the average line. */
.story-bars strong {
  position: absolute; bottom: calc(var(--h) - 32px); z-index: 2;
  padding: 1px 6px; border-radius: 6px; background: var(--purple-200);
  font-size: .9375rem; color: var(--purple-950);
}
.story-bars .is-ours strong { color: var(--yellow); background: var(--purple); }
.story-bars small { position: absolute; bottom: -28px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.story-bars .is-ours small { color: var(--purple); font-weight: 800; }
/* The average: a dashed line across every bar, at its own height. */
.story-bars .story-avg {
  position: absolute; left: -6px; right: -6px; bottom: 0; height: var(--h);
  border-top: 3px dashed var(--purple-950); pointer-events: none; z-index: 1;
}
.story-bars .story-avg span {
  position: absolute; left: 6px; top: -30px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--black); font-size: .75rem; font-weight: 800; white-space: nowrap;
}
.story-result { margin: 0 0 6px; font-size: 1.0625rem; }
.story-result strong { color: var(--purple); }
.story-note { margin: 0; font-size: .9375rem; color: var(--ink-2); }

/* What we never do */
.story-never {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px;
  margin: 0; padding: 0; list-style: none;
}
.story-never li {
  position: relative; padding: 18px 20px 18px 64px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); line-height: 1.5;
}
.story-never li::before {
  content: "\2715"; position: absolute; left: 18px; top: 16px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--yellow); color: var(--purple-950); font-weight: 900; font-size: .875rem;
}

/* Closing call to action */
.story-callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.story-callout p { margin: 10px 0 0; color: var(--ink-2); }

@media (max-width: 960px) {
  .story-cards, .story-steps { grid-template-columns: 1fr; }
  .story-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .story-hero-grid, .story-split, .story-split.is-wide-left, .story-never { grid-template-columns: 1fr; }
  .story-badge { display: none; }
  .story-links { grid-template-columns: 1fr; }
  .story-bars { --plot: 170px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-links a { transition: none; }
  .story-links a:hover { transform: none; }
}
@media print {
  .story-hero::before, .story-hero::after { display: none; }
  .story-band, .story-hero { background: none; color: var(--ink); }
}

/* =========================================================================
   Legal documents written in the admin: Privacy policy, Terms (11 Nov 2026).
   Deliberately light next to the story pages: a slim lilac header, a
   contents list that stays beside the text, and an easy reading column with
   a thin rule between sections.
   ========================================================================= */

.doc-head {
  position: relative; overflow: hidden;
  background: var(--purple-100); border-bottom: 1px solid var(--purple-200);
  padding-block: clamp(26px, 4vw, 44px);
}
.doc-head::after {      /* one quiet ring, from the brand guidelines */
  content: ""; position: absolute; right: -90px; top: -110px; width: 280px; height: 280px; border-radius: 50%;
  background: repeating-radial-gradient(circle at center, rgba(61,23,115,.09) 0 1px, rgba(61,23,115,0) 1px 12px);
  pointer-events: none;
}
.doc-kicker {
  display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--black);
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.doc-head h1 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); font-weight: 900; letter-spacing: -.02em; color: var(--purple); }
.doc-meta { margin: 8px 0 0; color: var(--ink-2); font-size: .9375rem; }

.doc-layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px);
  align-items: start; padding-block: clamp(28px, 4vw, 48px) clamp(40px, 5vw, 64px);
}
.doc-layout.is-single { grid-template-columns: minmax(0, 1fr); }

.doc-toc { position: sticky; top: calc(var(--header-h, 72px) + 16px); max-height: calc(100vh - 120px); overflow: auto; }
.doc-toc summary {
  cursor: pointer; list-style: none; margin-bottom: 10px;
  font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--purple-200); }
.doc-toc li { margin: 0; }
.doc-toc a {
  display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--ink-2); text-decoration: none; font-size: .9375rem; line-height: 1.35;
}
.doc-toc a:hover { color: var(--purple); border-left-color: var(--purple-light); }
.doc-toc a.is-current { color: var(--purple); font-weight: 700; border-left-color: var(--yellow); }

.doc-body { max-width: 74ch; font-size: 1.0313rem; line-height: 1.7; }
.doc-body h2 {
  margin: 40px 0 12px; padding-top: 28px; border-top: 1px solid var(--line);
  font-size: 1.375rem; color: var(--purple); scroll-margin-top: calc(var(--header-h, 72px) + 20px);
}
.doc-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body h3 { margin: 26px 0 8px; font-size: 1.0938rem; color: var(--purple-950); scroll-margin-top: calc(var(--header-h, 72px) + 20px); }
.doc-body ul li::marker { color: var(--purple-light); }
.doc-body ol li::marker { color: var(--purple); font-weight: 700; }
.doc-body a { color: var(--purple); text-decoration-color: var(--purple-light); text-underline-offset: 3px; }
.doc-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .9375rem; }
.doc-body th, .doc-body td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-body th { background: var(--purple-100); color: var(--purple-950); }
.doc-foot { margin-top: 44px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--purple-100); }
.doc-foot p { margin: 0; }

@media (max-width: 900px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { position: static; max-height: none; padding: 14px 16px; border-radius: var(--r-lg); background: var(--purple-100); }
  .doc-toc summary { margin-bottom: 0; }
  .doc-toc summary::after { content: " +"; color: var(--purple); }
  .doc-toc details[open] summary { margin-bottom: 10px; }
  .doc-toc details[open] summary::after { content: " \2212"; }
}
@media print {
  .doc-toc, .doc-head::after { display: none; }
  .doc-layout { grid-template-columns: 1fr; }
}

/* =========================================================================
   Pattern circles from the brand guidelines (p12), 11 Nov 2026.
   "Always in circles... used minimally and subtly". Each is an SVG used as
   a mask (assets/img/patterns), so the line colour and strength are set here.
   ========================================================================= */

.hero-pattern, .how-pattern {
  position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1;
  -webkit-mask: var(--pat) center / contain no-repeat;
          mask: var(--pat) center / contain no-repeat;
}
.is-rings    { --pat: url("../img/patterns/rings.svg"); }
.is-diagonal { --pat: url("../img/patterns/diagonal.svg"); }
.is-waves    { --pat: url("../img/patterns/waves.svg"); }
.is-zigzag   { --pat: url("../img/patterns/zigzag.svg"); }

/* Hero: deep purple lines on the yellow, faint enough to sit under the copy. */
.hero .wrap { position: relative; z-index: 1; }
.hero-pattern { background: var(--purple); opacity: .07; }
.hero-pattern.is-waves    { width: 340px; left: -120px; bottom: -150px; }
.hero-pattern.is-zigzag   { width: 190px; left: 41%; top: -70px; opacity: .06; }
.hero-pattern.is-diagonal { width: 230px; right: 31%; bottom: -120px; opacity: .06; }

/* How MyDIY works: a purple band, the patterns in white and yellow,
   and a yellow wedge in one corner as in the brand's example adverts. */
.section-how {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--purple); color: var(--white);
  padding-block: clamp(48px, 6vw, 84px);
}
.section-how::before {
  content: ""; position: absolute; z-index: -1; right: 0; bottom: 0;
  width: min(38%, 520px); height: 46%;
  background: var(--yellow); clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: .95;
}
.section-how .wrap { position: relative; z-index: 1; }
.how-pattern { z-index: 0; background: var(--white); opacity: .10; }
.how-pattern.is-zigzag   { width: 300px; left: -110px; top: -90px; }
.how-pattern.is-rings    { width: 380px; right: -120px; top: -150px; opacity: .12; }
.how-pattern.is-diagonal { width: 220px; left: 38%; bottom: -130px; background: var(--yellow); opacity: .16; }

.section-how .section-head h2 {
  color: var(--white); font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); font-weight: 900; letter-spacing: -.02em;
}
.section-how .section-head .lede { color: var(--purple-150); font-size: 1.125rem; }
.section-how .section-head .lede span {
  display: inline-block; margin-right: 4px; padding: 0 8px; border-radius: 6px;
  background: var(--yellow); color: var(--purple-950); font-weight: 800;
}
.section-how .link-more { color: var(--yellow); }

.section-how .steps { gap: clamp(18px, 2.4vw, 30px); margin-top: 8px; }
.section-how .step {
  padding: 34px 28px 28px; border: 0; border-radius: var(--r-xl);
  background: var(--white); box-shadow: 0 18px 40px rgba(20, 6, 40, .28);
  overflow: hidden;
}
/* The number, large and yellow, tucked into the card's corner. */
.section-how .step::before {
  position: absolute; right: 18px; top: 16px; margin: 0;
  width: 52px; height: 52px; font-size: 1.5rem;
  background: var(--yellow); color: var(--purple-950);
  box-shadow: 0 0 0 8px rgba(255, 206, 0, .25);
}
/* A faint ring pattern in the corner of each card. */
.section-how .step::after {
  content: ""; position: absolute; right: -70px; bottom: -70px; width: 170px; aspect-ratio: 1;
  background: var(--purple); opacity: .05; pointer-events: none;
  -webkit-mask: url("../img/patterns/rings.svg") center / contain no-repeat;
          mask: url("../img/patterns/rings.svg") center / contain no-repeat;
}
.step-icon {
  display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 18px;
  border-radius: 16px; background: var(--purple-100); color: var(--purple);
}
.step-icon .ui-icon, .step-icon .mdi-icon { width: 30px; height: 30px; }
.section-how .step h3 { font-size: 1.375rem; font-weight: 900; color: var(--purple); }
.section-how .step p { font-size: 1rem; line-height: 1.6; }
.section-how .step-proof { margin-top: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--yellow-100); color: var(--purple-950); }

/* The steps join up: one dotted path behind the row, seen in the gaps. */
@media (min-width: 781px) {
  .section-how .steps { position: relative; }
  .section-how .steps::before {
    content: ""; position: absolute; left: 0; right: 0; top: 64px; z-index: 0;
    border-top: 3px dotted var(--yellow);
  }
  .section-how .step { z-index: 1; }
}
@media (max-width: 780px) {
  .section-how::before { width: 60%; height: 22%; }
  .hero-pattern.is-zigzag, .hero-pattern.is-diagonal { display: none; }
}
@media print {
  .hero-pattern, .how-pattern, .section-how::before { display: none; }
  .section-how { background: none; color: var(--ink); }
}

/* =========================================================================
   Motion (11 Nov 2026): the brand patterns come alive, gently.
   Concentric rings look the same however far they turn. Moving them in
   CSS shimmered (1px lines at fractions of a pixel read as pulsing), so the
   CSS rings stay still and only the hero shader's smooth rings travel; the
   zigzag, diagonal and wave circles, which are not symmetrical, turn slowly. Everything here is skipped for visitors who
   ask their device for reduced motion, and none of it is near a price or a
   button that is being read.
   ========================================================================= */

/* The hero's WebGL background (hero-shader.js), fading in over the CSS yellow. */
.hero-shader {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .8s var(--ease); pointer-events: none;
}
.hero-shader.is-on { opacity: 1; }

/* A ring's offset inside its 12px repeat, animated 0 -> 12px so the rings travel outward. */
@property --ripple { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes pattern-turn { to { rotate: 360deg; } }
@keyframes pattern-turn-back { to { rotate: -360deg; } }

@media (prefers-reduced-motion: no-preference) {
  /* Ripples: the hero's ring circle, the purple band's, and the story pages' heroes. */
  .hero::after {
    background: repeating-radial-gradient(circle at center,
      transparent 0 var(--ripple), rgba(61,23,115,.14) var(--ripple) calc(var(--ripple) + 1px),
      transparent calc(var(--ripple) + 1px) 12px);
    -webkit-mask: radial-gradient(circle, #000 52%, transparent 71%);
            mask: radial-gradient(circle, #000 52%, transparent 71%);
  }
  /* Rings drawn by the shader already sit behind the house; this one stays in the corner. */
  .how-pattern.is-rings {
    -webkit-mask: radial-gradient(circle, #000 50%, transparent 71%);
            mask: radial-gradient(circle, #000 50%, transparent 71%);
    background: repeating-radial-gradient(circle at center,
      transparent 0 var(--ripple), #fff var(--ripple) calc(var(--ripple) + 1px),
      transparent calc(var(--ripple) + 1px) 12px);
  }
  .story-hero::before, .story-hero::after {
    background: repeating-radial-gradient(circle at center,
      transparent 0 var(--ripple), rgba(255,255,255,.10) var(--ripple) calc(var(--ripple) + 1px),
      transparent calc(var(--ripple) + 1px) 13px);
    -webkit-mask: radial-gradient(circle, #000 52%, transparent 71%);
            mask: radial-gradient(circle, #000 52%, transparent 71%);
  }

  /* Turning: about one revolution a minute and a half, in alternate directions. */
  .hero-pattern.is-zigzag, .how-pattern.is-zigzag   { animation: pattern-turn 95s linear infinite; }
  .hero-pattern.is-diagonal, .how-pattern.is-diagonal { animation: pattern-turn-back 80s linear infinite; }
  .hero-pattern.is-waves   { animation: pattern-turn 120s linear infinite; }

  /* A slight drift as the page scrolls (--drift, -1..1, set by mydiy.js). */
  .hero-pattern, .how-pattern { translate: var(--jx, 0px) calc(var(--jy, 0px) + var(--drift, 0) * 26px); }
  .hero-pattern.is-waves, .how-pattern.is-rings { translate: var(--jx, 0px) calc(var(--jy, 0px) + var(--drift, 0) * -18px); }

  /* "Typically 16%": one ring pulses out from the badge once the number lands. */
  .hero-disc::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 3px solid var(--purple); opacity: 0; pointer-events: none;
  }
  .hero-disc.is-landed::after { animation: disc-pulse 1.4s var(--ease) 1; }
  @keyframes disc-pulse {
    0%   { opacity: .55; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.45); }
  }

  /* Product cards: on hover a faint ring pattern blooms behind the saving, and the badge gives a nudge. */
  .pc-flags::before {
    content: ""; position: absolute; left: -26px; top: -26px; width: 110px; aspect-ratio: 1; z-index: -1;
    background: repeating-radial-gradient(circle at center,
      transparent 0 var(--ripple), rgba(255,206,0,.9) var(--ripple) calc(var(--ripple) + 1.5px),
      transparent calc(var(--ripple) + 1.5px) 9px);
    -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%);
            mask: radial-gradient(circle, #000 40%, transparent 70%);
    opacity: 0; transform: scale(.6);
    transition: opacity .35s var(--ease), transform .45s var(--ease);
    pointer-events: none;
  }
  .pc:hover .pc-flags::before, .pc:focus-within .pc-flags::before {
    opacity: .55; transform: scale(1);
  }
  .pc:hover .save-badge { animation: badge-nudge .5s var(--ease) 1; }
  @keyframes badge-nudge {
    0%, 100% { transform: rotate(0); }
    30% { transform: rotate(-5deg) scale(1.06); }
    60% { transform: rotate(3deg) scale(1.03); }
  }
}
.hero-disc { isolation: isolate; }

/* A different arrangement on every page load (mydiy.js "Fresh on every
   visit"): each pattern circle is nudged (--jx, --jy) and resized (--js);
   the wedge in "How MyDIY works" can sit in either bottom corner. */
.hero-pattern, .how-pattern { scale: var(--js, 1); }
.section-how.is-wedge-left::before { right: auto; left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* The hero's ring circle is now an element (so it can be placed at random,
   mydiy.js); this is where it sits without script, as the old corner ring did. */
.hero::after { content: none; }
.hero-pattern.is-rings { width: 380px; right: -110px; top: -120px; opacity: .12; }