/* DesignMyBlind - base styles. Built for legibility and mobile performance:
   one stylesheet, no external fonts, no JS framework. */

:root {
  --max-width: 64rem;
  --colour-fg: #1a1d20;
  --colour-fg-muted: #4a5056;
  --colour-bg: #fdfdfc;
  --colour-bg-soft: #f4f2ee;
  --colour-border: #e2dfd9;
  --colour-accent: #1f5f54;
  --colour-accent-soft: #d6ebe5;
  --colour-link: #1f5f54;
  --radius: 4px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --logo-max: 152px;          /* medallion size at rest; best-match.js shrinks --logo-size on scroll */
  --logo-shrinks: 1;          /* 1 = shrink on scroll (band layout); the masthead query sets 0 */
}

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

html { font-size: 17px; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--colour-fg);
  background: var(--colour-bg);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

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

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

h1, h2, h3 { line-height: 1.25; margin: var(--space-5) 0 var(--space-3); }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 var(--space-3); }

/* ---------- site chrome ---------- */
.site-header {
  position: sticky;            /* pinned to the top on scroll */
  top: 0;
  z-index: 80;                 /* above content, below the shortlist drawer (90-100) */
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-bg);
}
.site-header .container {
  position: relative;          /* positioning context for the logo medallion */
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* links on the right; the logo is absolutely placed */
  gap: var(--space-3);
  min-height: 2.5rem;          /* thin bar - just tall enough for the two links */
  padding: var(--space-2) 0;
}
/* Logo "medallion": a circle ~2x the old logo that straddles the header's bottom
   border. Its background and 1px border match the header, so the divider line
   appears to bend around the logo while its lower half bulges into the page.
   Absolutely positioned so the bar itself stays thin. */
.site-logo {
  position: absolute;
  left: var(--space-3);             /* aligned to the content gutter; min-width:1088 pulls it to the page edge */
  top: 4px;
  width: var(--logo-size, var(--logo-max));   /* best-match.js shrinks --logo-size on scroll */
  height: var(--logo-size, var(--logo-max));
  border-radius: 20%;               /* rounded-corner square - frames the square logo */
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  overflow: hidden;
  text-decoration: none;
  line-height: 0;
}
.site-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 500px) {
  :root { --logo-max: 120px; }      /* smaller medallion + shorter band on phones */
}
.site-nav { display: flex; gap: var(--space-4); }
.site-nav a { color: var(--colour-fg-muted); text-decoration: none; }
.site-nav a:hover { color: var(--colour-fg); }

/* The medallion bulges below the thin bar, so by default it gets its own band and
   content starts below it - clearing it at every narrow width and page type. On
   wide screens the masthead query below reclaims the space: the first heading sits
   beside the medallion instead. */
.site-main { padding: calc(var(--logo-max) - var(--space-3)) 0 var(--space-6); }

/* From the 64rem container width up there's room for the first heading to sit to
   the RIGHT of the medallion, so it rides the thin bar with no band and the logo
   aligns to the page edge. (px, not rem: a media-query rem ignores the 17px root,
   so 64rem here would wrongly resolve to 1024px.) */
@media (min-width: 1088px) {
  :root { --logo-shrinks: 0; }   /* fits beside the centred content -> stays full size on scroll */
  .site-logo { left: 0; }
  .site-main { padding-top: var(--space-6); }
}

.site-footer {
  border-top: 1px solid var(--colour-border);
  background: var(--colour-bg-soft);
  padding: var(--space-5) 0;
  margin-top: var(--space-6);
  color: var(--colour-fg-muted);
  font-size: 0.9rem;
}
.affiliate-disclosure { max-width: 50rem; }
.footer-meta { margin-top: var(--space-3); font-size: 0.85rem; }

/* ---------- article ---------- */
.article { max-width: 44rem; margin: 0 auto; }
.article-header { margin-bottom: var(--space-5); }
.article-eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colour-fg-muted);
  margin: 0 0 var(--space-2);
}
.article-title { margin-top: 0; }
.article-meta { color: var(--colour-fg-muted); font-size: 0.9rem; }
.article-body { font-size: 1.05rem; }
.article-body > * + * { margin-top: var(--space-3); }
.article-body h2 { margin-top: var(--space-5); }

.inline-disclosure {
  font-size: 0.85rem;
  color: var(--colour-fg-muted);
  background: var(--colour-bg-soft);
  border-left: 3px solid var(--colour-accent);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
}

/* ---------- variant grid (range article) ---------- */
.variant-grid {
  margin: var(--space-5) 0;
  border-top: 1px solid var(--colour-border);
  padding-top: var(--space-4);
}
/* §15.4 fittings: the same fabric in standard / no-drill / motorised etc. */
.fittings {
  margin: var(--space-5) 0;
  border-top: 1px solid var(--colour-border);
  padding-top: var(--space-4);
}
.fitting-list { list-style: none; padding: 0; margin: var(--space-3) 0; }
.fitting {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--colour-border);
}
.fitting-name { font-weight: 600; min-width: 11rem; }
.fitting-price { color: var(--colour-text); }
.fitting-surcharge { font-size: 0.85rem; color: var(--colour-muted, #666); }
.fitting-desc { font-size: 0.85rem; color: var(--colour-muted, #666); flex-basis: 100%; }
.fitting-note { font-size: 0.85rem; color: var(--colour-muted, #666); margin-top: var(--space-3); }
/* §15.3 cross-retailer designer matches: the same designs at other shops */
.designer-matches {
  margin: var(--space-5) 0;
  border-top: 1px solid var(--colour-border);
  padding-top: var(--space-4);
}
.dm-list { list-style: none; padding: 0; margin: var(--space-3) 0; }
.dm-retailer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--colour-border);
}
.dm-site { font-weight: 600; min-width: 11rem; }
.dm-here { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--colour-muted, #666); }
.dm-construction { font-size: 0.85rem; color: var(--colour-muted, #666); }
.dm-prints, .dm-note { font-size: 0.85rem; color: var(--colour-muted, #666); }
.dm-compare { font-size: 0.9rem; margin-top: var(--space-2); }
.dm-compare a { font-weight: 600; }

/* §15.3 cross-retailer comparison pages */
.cmp-lead { font-size: 1.05rem; }
.cmp-callout {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--colour-surface, #f6f6f4);
  border-left: 3px solid var(--colour-accent, #2a6);
  border-radius: 4px;
  font-size: 0.95rem;
}
.cmp-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
}
.cmp-retailer {
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cmp-retailer-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cmp-site { font-weight: 600; font-size: 1.05rem; }
.cmp-badge {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--colour-accent, #2a6); color: #fff;
  padding: 0.1rem 0.4rem; border-radius: 3px; white-space: nowrap;
}
.cmp-price { font-size: 1.25rem; font-weight: 600; }
.cmp-facts { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; color: var(--colour-muted, #666); }
.cmp-facts li { padding: 0.1rem 0; }
.cmp-link { margin-top: auto; font-weight: 600; }
.cmp-note { font-size: 0.85rem; color: var(--colour-muted, #666); margin-top: var(--space-3); }
.cmp-foot { margin-top: var(--space-4); }
.cmp-idx-section { margin: var(--space-4) 0; }
.cmp-idx-list { list-style: none; padding: 0; margin: var(--space-2) 0; }
.cmp-idx-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--colour-border); }
.cmp-idx-meta { font-size: 0.85rem; color: var(--colour-muted, #666); margin-left: var(--space-2); }
/* §15.2 shallow range pages: the "not reviewed yet" note */
.shallow-note {
  font-size: 0.9rem;
  color: var(--colour-muted, #666);
  background: var(--colour-surface, #f6f6f4);
  padding: var(--space-3);
  border-radius: 4px;
  margin-bottom: var(--space-4);
}
/* §15.3 Phase C: shortlist "same designs cheaper elsewhere" hint */
.sl-item-cross { font-size: 0.72rem; color: var(--colour-accent, #1a7a55); margin: 2px 0 0; }
.variant-grid-heading { font-size: 1.1rem; margin: 0 0 var(--space-3); }
.variant-grid-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-3);
}
.variant-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.1s, box-shadow 0.1s;
}
.variant-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-decoration: none;
}
.variant-card.best-match {
  border-color: var(--colour-accent);
  box-shadow: 0 0 0 3px var(--colour-accent-soft);
}
.variant-card-image { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--colour-bg-soft); }
.variant-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; }
.variant-card-swatch { object-fit: cover; }
.variant-card-photo { object-fit: contain; background: var(--colour-bg-soft); opacity: 0; transition: opacity 0.25s ease; }
.variant-card-photo.is-loaded { opacity: 1; }
.variant-card-meta {
  padding: var(--space-2) var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
.variant-card-colour { font-weight: 600; text-transform: capitalize; }
.variant-card-price { font-size: 0.9rem; color: var(--colour-fg-muted); }

/* ---------- picks grid (feature article) ---------- */
.picks-grid {
  margin: var(--space-5) 0;
}
.picks-grid-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-4);
}
.pick-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--colour-bg);
  transition: transform 0.1s, box-shadow 0.1s;
}
.pick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-decoration: none;
}
.pick-card-category {
  position: absolute;
  margin: var(--space-2);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--colour-accent);
  color: white;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
}
.pick-card-image { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--colour-bg-soft); }
.pick-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pick-card-swatch { object-fit: cover; }
.pick-card-photo { object-fit: contain; background: var(--colour-bg-soft); opacity: 0; transition: opacity 0.25s ease; }
.pick-card-photo.is-loaded { opacity: 1; }
.pick-card-body { padding: var(--space-3); }
.pick-card-title { margin: 0 0 var(--space-1); font-size: 1.1rem; }
.pick-card-retailer { font-size: 0.85rem; color: var(--colour-fg-muted); margin: 0 0 var(--space-2); }
.pick-card-blurb { margin: var(--space-2) 0; color: var(--colour-fg-muted); }
.pick-card-meta { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0; font-size: 0.9rem; }
.pick-card-price { font-weight: 600; }
.pick-card-variants { color: var(--colour-fg-muted); }
.pick-card-missing {
  padding: var(--space-4);
  background: var(--colour-bg-soft);
  border: 1px dashed var(--colour-border);
  color: var(--colour-fg-muted);
}

/* ---------- retailer hub page ---------- */
.article-eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.article-eyebrow a:hover { color: var(--colour-accent); }
.retailer-type { margin: var(--space-4) 0; }
.retailer-type-heading { font-size: 1.05rem; margin: 0 0 var(--space-2); }
.retailer-type-count { color: var(--colour-fg-muted); font-weight: 400; font-size: 0.9rem; }
.retailer-range-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-1) var(--space-4); }
.retailer-range-list li { padding: var(--space-1) 0; border-bottom: 1px solid var(--colour-border); }
.retailer-range-meta { color: var(--colour-fg-muted); font-size: 0.82rem; }

/* ---------- price by dimensions widget ---------- */
.price-by-dimensions {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--colour-bg-soft);
  border-radius: var(--radius);
}
.price-by-dimensions-heading { margin-top: 0; }
.price-by-dimensions-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-3);
}
.price-by-dimensions-form label { display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.9rem; color: var(--colour-fg-muted); }
.price-by-dimensions-form input {
  padding: var(--space-2);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  font-size: 1rem;
  min-width: 8rem;
}
.price-by-dimensions-submit {
  padding: var(--space-2) var(--space-4);
  font-size: 1rem;
  background: var(--colour-accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}
.price-by-dimensions-result { display: block; font-size: 1.1rem; font-weight: 600; min-height: 1.6em; }
.price-by-dimensions-result .label { font-weight: 400; color: var(--colour-fg-muted); }

/* ---------- featured in ---------- */
.featured-in {
  margin: var(--space-5) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--colour-accent);
  background: var(--colour-bg-soft);
}
.featured-in-heading { font-size: 1rem; margin: 0 0 var(--space-2); }
.featured-in-list { margin: 0; padding-left: 1.2rem; }
.featured-in-list li { margin-bottom: var(--space-1); }

/* ---------- pick card category badge wants relative parent ---------- */
.pick-card { position: relative; }

/* ---------- shortlist sidebar ---------- */

/* The toggle: a slim vertical tab pinned to the right viewport edge,
   always visible once the JS hydrates. Click toggles the drawer.
   Text reads top-to-bottom (head-tilt-right reading), the natural
   orientation for a right-edge tab. */
.sl-toggle {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  /* Vertical text: writing-mode rotates the label's characters 90° CW
     so "Shortlist" reads from top to bottom. flex layout inherits the
     vertical inline axis, so children stack from top to bottom. */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: var(--space-3) var(--space-2);
  background: var(--colour-accent);
  color: white;
  border: none;
  border-radius: var(--radius) 0 0 var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  z-index: 90;
  box-shadow: -2px 0 8px rgba(0,0,0,0.08);
}
.sl-toggle:hover { background: #174a42; }
/* Icon and count keep horizontal text so they read as expected
   (the count number, the arrow glyph) - only the label gets the
   vertical rotation. */
.sl-toggle-icon, .sl-toggle-count { writing-mode: horizontal-tb; }
.sl-toggle-icon { font-size: 0.7rem; }
.sl-toggle-count {
  background: white;
  color: var(--colour-accent);
  border-radius: 999px;
  padding: 0 0.5em;
  font-size: 0.75rem;
  min-width: 1.5em;
  text-align: center;
}
.sl-toggle.has-items .sl-toggle-count { background: gold; color: #2a2a2a; }

/* The backdrop dims the page when the drawer is open on mobile.
   Desktop keeps the page reading-usable underneath. */
.sl-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
  display: none;
}

/* The drawer itself. Right-side panel on desktop, bottom sheet on mobile. */
.sl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--colour-bg);
  border-left: 1px solid var(--colour-border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.12);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sl-drawer[hidden] { display: none; }
body.sl-open .sl-backdrop { display: block; }

.sl-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-bg-soft);
}
.sl-drawer-title { margin: 0; font-size: 1.1rem; }
.sl-drawer-close {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--colour-fg-muted);
  padding: 0 var(--space-1);
}
.sl-drawer-close:hover { color: var(--colour-fg); }

.sl-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}
.sl-drawer-footer {
  border-top: 1px solid var(--colour-border);
  padding: var(--space-3) var(--space-4);
  background: var(--colour-bg-soft);
}

.sl-loading { color: var(--colour-fg-muted); font-size: 0.9rem; }
.sl-privacy-note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--colour-border);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--colour-fg-muted);
  text-align: center;
}
.sl-privacy-note a { color: inherit; text-decoration: underline; }

/* ---------- contact form ---------- */
.contact-form { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; max-width: 32rem; }
.contact-field { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.contact-field label { font-weight: 600; font-size: 0.9rem; }
.contact-field input, .contact-field textarea {
  font-family: inherit; font-size: 1rem; padding: var(--space-2);
  border: 1px solid var(--colour-border); border-radius: var(--radius);
  background: var(--colour-bg); color: inherit;
}
.contact-field textarea { resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus {
  outline: 2px solid var(--colour-accent); outline-offset: 1px; border-color: var(--colour-accent);
}
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-submit {
  align-self: flex-start; background: var(--colour-accent); color: white; border: none;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: background 0.1s;
}
.contact-submit:hover { background: #174a42; }
.contact-privacy { font-size: 0.82rem; color: var(--colour-fg-muted); }

/* Onboarding: three questions, chip groups */
.sl-onboarding-intro {
  color: var(--colour-fg-muted);
  font-size: 0.95rem;
  margin: 0 0 var(--space-4);
}
.sl-onboarding-or {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--colour-border);
  font-size: 0.9rem;
  color: var(--colour-fg-muted);
}
.sl-question {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.sl-question-label {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
  padding: 0;
}
.sl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sl-chips-compact { gap: var(--space-1); }
.sl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  border: 1px solid var(--colour-border);
  background: var(--colour-bg);
  font-size: 0.85rem;
  color: var(--colour-fg);
  cursor: pointer;
  text-decoration: none;
}
.sl-chip:hover { border-color: var(--colour-accent); }
.sl-chip.is-active {
  background: var(--colour-accent-soft);
  border-color: var(--colour-accent);
  color: var(--colour-accent);
}
.sl-chip.is-link::after { content: "→"; font-size: 0.85em; opacity: 0.7; }
.sl-chip-remove {
  background: transparent;
  border: none;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2em;
  color: inherit;
}

/* Preferences summary */
.sl-prefs { margin-bottom: var(--space-4); }
.sl-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}
.sl-section-title {
  font-size: 0.95rem;
  margin: 0;
  font-weight: 600;
}
.sl-count { color: var(--colour-fg-muted); font-weight: 400; }
.sl-link-button {
  background: transparent;
  border: none;
  font-size: 0.8rem;
  color: var(--colour-fg-muted);
  cursor: pointer;
  text-decoration: underline;
}
.sl-link-button:hover { color: var(--colour-fg); }

.sl-prefs-edit { margin-top: var(--space-2); }
.sl-prefs-edit summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--colour-fg-muted);
  padding: var(--space-1) 0;
}
.sl-prefs-edit[open] {
  padding: var(--space-2);
  background: var(--colour-bg-soft);
  border-radius: var(--radius);
}

/* Windows */
.sl-windows { margin-bottom: var(--space-4); }
.sl-window-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sl-window-card {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--colour-bg);
}
.sl-window-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.sl-window-label { font-size: 0.95rem; }
.sl-window-dims {
  font-size: 0.85rem;
  color: var(--colour-fg-muted);
  margin: 0 0 var(--space-1);
}
.sl-window-feature-link {
  color: var(--colour-accent);
  text-decoration: none;
  font-weight: 500;
}
.sl-window-feature-link:hover { text-decoration: underline; }
.sl-window-notes {
  font-size: 0.85rem;
  color: var(--colour-fg-muted);
  font-style: italic;
  margin: 0 0 var(--space-2);
}
.sl-window-items {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sl-window-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--colour-fg-muted);
}

/* Items */
.sl-items { margin-bottom: var(--space-3); }
.sl-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2);
  background: var(--colour-bg-soft);
  border-radius: var(--radius);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s;
}
.sl-item:hover { background: var(--colour-accent-soft); }
.sl-item:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 1px;
}
.sl-item-main { min-width: 0; }
.sl-item-title { font-size: 0.9rem; display: block; }
.sl-item-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--colour-fg-muted);
  text-transform: capitalize;
}
.sl-item-retailer { text-transform: none; }
.sl-item-price strong { color: var(--colour-fg); }
.sl-empty-note {
  margin: var(--space-1) 0 0;
  font-size: 0.85rem;
  color: var(--colour-fg-muted);
}

.sl-icon-button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--colour-fg-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 var(--space-1);
}
.sl-icon-button:hover { color: var(--colour-fg); }

/* R2b: a window whose products lack a grid is size-locked (lock icon, no edit) */
.sl-window-locked {
  color: var(--colour-fg-muted);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 var(--space-1);
  cursor: default;
}

/* R4: shared-shortlist read-first banner + per-item "View on site" origin links */
.sl-shared-banner {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--colour-accent-soft);
  border-left: 3px solid var(--colour-accent);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--colour-fg);
}
.sl-shared-hint { color: var(--colour-fg-muted); }
.sl-item-origin-link {
  color: var(--colour-accent);
  text-decoration: none;
  white-space: nowrap;
}
.sl-item-origin-link:hover { text-decoration: underline; }
.sl-print-shared-banner { margin-bottom: 1.5rem; }
.sl-print-origin-link {
  color: var(--colour-accent);
  text-decoration: none;
  font-size: 0.85em;
  white-space: nowrap;
}
.sl-print-origin-link:hover { text-decoration: underline; }

/* Buttons (reused across drawer + dialogs) */
.sl-button {
  display: inline-block;
  background: var(--colour-accent);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.sl-button:hover { background: #174a42; }
.sl-button-sm { padding: 0.3em 0.7em; font-size: 0.8rem; }
.sl-button-ghost {
  background: transparent;
  color: var(--colour-fg);
  border: 1px solid var(--colour-border);
}
.sl-button-ghost:hover { background: var(--colour-bg-soft); color: var(--colour-fg); }
.sl-button-danger { background: transparent; color: #a23b3b; border: 1px solid #d8b4b4; }
.sl-button-danger:hover { background: #fdf4f4; }

/* Footer totals */
.sl-totals { margin-bottom: var(--space-3); }
.sl-totals-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.1rem;
  margin-bottom: var(--space-1);
}
.sl-totals-label { color: var(--colour-fg-muted); font-size: 0.9rem; }
.sl-totals-value { font-size: 1.2rem; color: var(--colour-fg); }
.sl-totals-note {
  font-size: 0.8rem;
  color: var(--colour-fg-muted);
  margin: 0 0 var(--space-2);
}
.sl-retailers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.sl-retailer-chip {
  font-size: 0.75rem;
  padding: 0.2em 0.5em;
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: 999px;
  color: var(--colour-fg-muted);
}
.sl-footer-actions {
  display: flex;
  gap: var(--space-2);
}
.sl-footer-actions .sl-button { flex: 1; text-align: center; font-size: 0.85rem; padding: var(--space-2); }

/* Dialog (add window / add to shortlist) */
.sl-dialog {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  max-width: min(440px, 92vw);
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.sl-shortlist-dialog { max-width: min(480px, 94vw); }
.sl-dialog::backdrop { background: rgba(0,0,0,0.4); }
.sl-form { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.sl-form-title { margin: 0; font-size: 1.1rem; }
.sl-form-subtitle {
  margin: calc(var(--space-1) * -1) 0 var(--space-1);
  font-size: 0.9rem;
  color: var(--colour-fg-muted);
}
.sl-form-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--colour-fg-muted);
}
.sl-field { display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.9rem; }
.sl-field span { color: var(--colour-fg-muted); }
.sl-field input, .sl-field select {
  padding: var(--space-2);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
}
.sl-form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-2);
}

/* Existing-windows multi-select */
.sl-windows-pick {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sl-windows-pick legend {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0;
  margin-bottom: var(--space-1);
}
.sl-window-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.sl-window-checkbox:hover {
  border-color: var(--colour-accent);
  background: var(--colour-bg-soft);
}
.sl-window-checkbox input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--colour-accent);
}
.sl-window-checkbox-body {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-width: 0;
}
.sl-window-checkbox-label {
  font-weight: 600;
  font-size: 0.95rem;
}
.sl-window-checkbox-dims {
  font-size: 0.8rem;
  color: var(--colour-fg-muted);
}
.sl-window-checkbox input[type="checkbox"]:checked + .sl-window-checkbox-body {
  color: var(--colour-fg);
}

/* Edit dialog footer: two stacked rows.
   Top row - destination links (Read review / Explore range, Visit retailer).
   Bottom row - state-changing actions (Remove, Done). */
.sl-form-actions-edit {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.sl-form-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--colour-border);
}
.sl-form-link {
  color: var(--colour-accent);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.sl-form-link:hover { text-decoration: underline; }
.sl-form-link-external::after { content: " \2197"; font-size: 0.85em; opacity: 0.7; }
.sl-form-buttons {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}
.sl-form-retailer {
  font-style: italic;
  font-size: 0.85em;
}

/* "+ Add a new window" collapsible */
.sl-new-window {
  border-top: 1px dashed var(--colour-border);
  padding-top: var(--space-3);
}
.sl-new-window > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--colour-accent);
  padding: var(--space-1) 0;
  list-style: none;
  user-select: none;
}
.sl-new-window > summary::-webkit-details-marker { display: none; }
.sl-new-window > summary:hover { color: #174a42; }
.sl-new-window[open] > summary { margin-bottom: var(--space-2); }
.sl-new-window-summary { font-weight: 500; }
.sl-new-window-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Per-window price rows on variant/pick cards. The original `from £X`
   span gets its innerHTML rewritten to a list of these. */
/* With per-window rows present, stack the meta into a column so the product
   name sits on its own line and each window's price spans the full card width,
   never clipping the value. */
.variant-card-meta:has(.variant-card-price.has-per-window),
.pick-card-meta:has(.pick-card-price.has-per-window) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3em;
}
.variant-card-price.has-per-window,
.pick-card-price.has-per-window {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  align-items: stretch;
  width: 100%;
  font-size: 0.8rem;
}
.sl-card-price-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15em 0;
  border-top: 1px dashed var(--colour-border);
}
.sl-card-price-row:first-child { border-top: none; }
/* Always-short dimensions, led by a tiny window-pane icon (a framed box with a
   centre mullion). Never shrinks, so it stays readable at any card width. */
.sl-card-price-dims {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--colour-fg-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sl-card-price-dims::before {
  content: "";
  width: 0.7em;
  height: 0.8em;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 1px;
  opacity: 0.65;
  background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
}
.sl-card-price-row strong {
  flex: none;
  font-size: 0.85rem;
  margin-left: auto;
  white-space: nowrap;
}
/* Quick-add toggle: tiny round button on each per-window price row.
   Toggles whether this exact (variant, window) is in the shortlist. */
.sl-card-quick-add {
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
  padding: 0;
  border: 1px solid var(--colour-border);
  border-radius: 50%;
  background: var(--colour-bg);
  color: var(--colour-fg-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.sl-card-quick-add:hover {
  border-color: var(--colour-accent);
  color: var(--colour-accent);
}
.sl-card-quick-add.is-active {
  background: var(--colour-accent);
  border-color: var(--colour-accent);
  color: white;
}
.sl-card-quick-add.is-active:hover { background: #174a42; border-color: #174a42; }

/* Card action footer: Shortlist button + Visit link, stacked.
   The whole card is clickable (default action = shortlist); these are
   the explicit affordances. Both visible by default - no hover reveal. */
.variant-card-actions, .pick-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border-top: 1px solid var(--colour-border);
  background: var(--colour-bg);
}
.variant-card-shortlist, .pick-card-shortlist {
  background: var(--colour-accent);
  color: white;
  border: none;
  padding: var(--space-2);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.02em;
  transition: background 0.1s;
}
.variant-card-shortlist:hover, .pick-card-shortlist:hover { background: #174a42; }
.variant-card-shortlist.is-added, .pick-card-shortlist.is-added { background: #2a8a4f; }
.variant-card-visit, .pick-card-visit {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--colour-fg-muted);
  text-decoration: none;
  padding: var(--space-1) 0;
  transition: color 0.1s;
}
.variant-card-visit:hover, .pick-card-visit:hover {
  color: var(--colour-accent);
  text-decoration: underline;
}
/* Fitting chips below the image: one clickable chip per fitting this colour is
   sold in. The chips are the retailer links (no separate "Visit retailer"); the
   arrow icon marks them clickable. */
.variant-card-fittings {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--space-2) var(--space-2) 0;
}
.fitting-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--colour-fg-muted);
  background: var(--colour-bg-soft);
  border: 1px solid var(--colour-border);
  border-radius: 999px;
  padding: 3px 8px;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.fitting-chip:hover {
  border-color: var(--colour-accent);
  color: var(--colour-accent);
  background: var(--colour-bg);
}
.fitting-chip-icon { font-size: 0.9em; }

/* The card is no longer an <a>, so it needs an explicit pointer cursor
   to signal it's clickable. Existing .variant-card:hover and
   .pick-card:hover transforms already provide the visual lift. */
.variant-card, .pick-card { cursor: pointer; }
.variant-card:focus-visible, .pick-card:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}

/* Priority match highlighting */
.variant-card.priority-match,
.pick-card.priority-match {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}
.priority-match-badge {
  position: absolute;
  bottom: var(--space-1);
  left: var(--space-1);
  background: var(--colour-accent);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15em 0.5em;
  border-radius: var(--radius);
  z-index: 2;
}

/* Mobile: bottom sheet */
@media (max-width: 640px) {
  .sl-toggle {
    top: auto;
    bottom: var(--space-3);
    right: var(--space-3);
    transform: none;
    writing-mode: horizontal-tb;
    flex-direction: row;
    border-radius: 999px;
    padding: var(--space-2) var(--space-3);
  }
  .sl-toggle-icon { transform: none; }
  .sl-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 85vh;
    border-left: none;
    border-top: 1px solid var(--colour-border);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  }
  body.sl-open { overflow: hidden; }
}

/* ---------- index page ---------- */
.index-intro {
  max-width: 44rem;
  margin: 0 auto var(--space-5);
}
.index-lead { font-size: 1.1rem; color: var(--colour-fg-muted); }
.index-section {
  max-width: 44rem;
  margin: 0 auto var(--space-5);
}
.index-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.index-list li { padding-bottom: var(--space-2); border-bottom: 1px solid var(--colour-border); }
.index-list li:last-child { border-bottom: none; }
.index-list a { font-weight: 600; font-size: 1.05rem; }
.index-desc {
  margin: var(--space-1) 0 0;
  font-size: 0.9rem;
  color: var(--colour-fg-muted);
}

/* ---------- /shortlist/ print page ---------- */
.shortlist-print-page { max-width: 44rem; margin: 0 auto; }
.sl-print-empty { padding: var(--space-4); background: var(--colour-bg-soft); border-radius: var(--radius); }
.sl-print-prefs dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
.sl-print-prefs dt { color: var(--colour-fg-muted); font-size: 0.9rem; }
.sl-print-prefs dd { margin: 0; font-weight: 600; }
.sl-print-window { margin: var(--space-5) 0; padding-top: var(--space-3); border-top: 2px solid var(--colour-border); }
.sl-print-window h2 { margin-top: 0; }
.sl-print-window-meta, .sl-print-notes { color: var(--colour-fg-muted); font-size: 0.9rem; margin: 0 0 var(--space-2); }
.sl-print-empty-window { color: var(--colour-fg-muted); font-style: italic; }
.sl-print-items {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0;
  font-size: 0.95rem;
}
.sl-print-items th, .sl-print-items td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--colour-border);
  text-align: left;
}
.sl-print-items th {
  font-weight: 600;
  font-size: 0.85rem;
  background: var(--colour-bg-soft);
}
.sl-print-th-price, .sl-print-td-price { text-align: right; white-space: nowrap; }
.sl-print-td-price { font-weight: 600; }
.sl-print-total {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 2px solid var(--colour-accent);
}
.sl-print-total-line { font-size: 1.2rem; margin: 0 0 var(--space-2); }
.sl-print-retailers { font-size: 0.9rem; color: var(--colour-fg-muted); margin: 0; }
.sl-print-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
@media print { .sl-print-actions { display: none; } }

/* Print: hide the chrome entirely (for /shortlist/ printable page) */
@media print {
  .sl-toggle, .sl-drawer, .sl-backdrop, .site-header, .site-footer { display: none !important; }
  .site-main { padding: 0 !important; }
}