/* ==========================================================================
   paulrice.net
   Plain CSS. No build step, no preprocessor, no dependencies.

   Order:
   1.  Fonts
   2.  Tokens
   3.  Reset and base
   4.  Utilities
   5.  Header
   6.  Breadcrumb
   7.  Product block layout
   8.  Gallery
   9.  Summary (title, rating, variations, about)
   10. Buy box
   11. Frequently bought together
   12. Product details table
   13. Product description
   14. Systems (A+ content)
   15. Reviews
   16. Questions & answers
   17. Footer
   18. Responsive
   19. Reduced motion, forced colors, print
   ========================================================================== */


/* 1. Fonts ================================================================= */
/* Amazon's own declared stack. Amazon Ember is proprietary and is not, and
   cannot be, redistributed here. It renders only for viewers who already
   have it locally. Everyone else gets Arial, which is exactly what an Amazon
   page falls back to. No webfont is downloaded, by design. */


/* 2. Tokens =============================================================== */

/* Values are Amazon's own interface colours. The build brief banned these
   (see "Trade dress"); the client overrode that on 2026-08-04 and asked for
   an exact match. The wordmark and smile mark are still not used, and the
   footer disclaimer is still required. */

:root {
  /* Chrome */
  --nav-dark:   #131921;  /* top utility bar                              */
  --nav-mid:    #232F3E;  /* section bar, footer body                     */
  --nav-light:  #37475A;  /* back-to-top bar, footer headings rule        */

  /* Surfaces and text */
  --paper:      #FFFFFF;  /* page background, Amazon pages are white     */
  --surface:    #F7FAFA;  /* light panel fill, table label column         */
  --rule:       #D5D9D9;  /* every hairline on the page                   */
  --ink:        #0F1111;  /* primary text                                 */
  --ink-muted:  #565959;  /* secondary text                               */

  /* Interactive */
  --link:       #007185;  /* link rest                                    */
  --link-hover: #C7511F;  /* link hover                                   */
  --success:    #007600;  /* "In Stock" green                             */
  --accent:     #FF9900;  /* the orange, used only as an accent           */
  --btn-cart:   #FFD814;  /* Add to cart                                  */
  --btn-cart-h: #F7CA00;
  --btn-cart-b: #FCD200;
  --btn-buy:    #FFA41C;  /* Buy Now                                      */
  --btn-buy-h:  #FA8900;
  --btn-buy-b:  #FF8F00;
  --search-btn: #FEBD69;  /* search submit                                */

  /* Logo artwork, exactly as supplied. Do not "improve" these: the smile is
     white because that is what a dark-bar retail logo does. The orange
     version belongs on a light ground. The tag blue is Prime blue. */
  --logo-word:  #FEFEFE;
  --logo-smile: #FEFEFE;
  --logo-tag:   #1579E8;
  --star:       #DE7921;  /* star glyphs                                  */
  --select:     #E3F2F4;  /* selected variation fill                      */

  /* Chart ink. NOT --accent: #FF9900 on white is 2.14:1, which fails the
     3:1 floor for a graphical object, and a bar IS the datum. If it is
     hard to see against the page the chart is not readable. #C45500 is the
     same family at 4.49:1, and is already the badge colour. */
  --chart:      #C45500;
  --chart-bg:   #F0F2F2;  /* empty track behind a bar                     */

  /* Aliases kept so component rules read the way they did before. */
  --signal:      var(--link);
  --signal-deep: var(--link-hover);
  --signal-lift: var(--accent);
  --signal-wash: var(--select);
  --ink-2:       var(--nav-mid);

  --focus: var(--link);

  /* Type, on Amazon's scale. */
  --font-sans: 'Amazon Ember', Arial, Helvetica, sans-serif;
  --font-mono: var(--font-sans);

  --fs-meta:  0.8125rem; /* 13px */
  --fs-body:  0.875rem;  /* 14px */
  --fs-h2:    1.3125rem; /* 21px, section headings */
  --fs-h1:    1.5rem;    /* 24px, product title    */
  --fs-price: 1.75rem;   /* 28px, price slot       */

  /* Space */
  --gap:    1.5rem;
  --pad:    1.25rem;
  --radius: 8px;
  --wrap:   1520px;
}

/* 3. Reset and base ======================================================= */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.43;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset, table {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
fieldset { border: 0; min-inline-size: 0; }

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

a { color: var(--signal); }
a:hover { color: var(--signal-deep); }

button { font: inherit; color: inherit; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Only suppress the ring for pointer users, never for keyboard. */
:focus:not(:focus-visible) { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Stroke icons. The star symbol is filled and deliberately excluded. */
.icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--signal { stroke: var(--success); stroke-width: 2.4; }

/* In-page find results. */
::highlight(find) { background-color: #FFE8A3; color: var(--ink); }
.is-found { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }


/* 4. Utilities ============================================================ */

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

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

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--nav-mid);
  color: #FFF;
  font-size: var(--fs-meta);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { top: 0.5rem; color: #FFF; }

/* The mono layer is gone with the palette override, because Amazon sets everything
   in one face. Classes are kept so restoring it is a single block. */
.mono,
.num {
  font-variant-numeric: tabular-nums;
}
.num { font-weight: 700; }

.section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: normal;
  margin-bottom: 1rem;
}
.section-title--tight { font-size: 1rem; margin-bottom: 0.6rem; }

.subhead {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 1.75rem 0 0.75rem;
}

.kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1.25rem 0;
}

.stars { fill: var(--star); }

/* Asset placeholder. Replace the whole element with an <img> when the real
   file lands. Deliberately loud enough that nobody ships it by accident. */
.ph {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.25rem;
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(91, 101, 112, 0.045) 0 6px,
    transparent 6px 12px
  );
}
.ph__label {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-muted);
}
.ph__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  opacity: 0.8;
}
.ph__idx {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-muted);
}
.ph--thumb { padding: 0; aspect-ratio: 1; }

.pending {
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  padding: 0.5rem 0.7rem;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  background: var(--surface);
}


/* 5. Header =============================================================== */

/* The bars run edge to edge while the product content stays in a narrower
   centred column, the proportion a retail header actually has. */
.bar-main__inner,
.bar-nav__inner { max-width: none; }

/* --- Bar 1: identity, location, in-page search, quick actions ----------- */

.bar-main {
  background: var(--nav-dark);
  color: #FFF;
  --focus: #FFF;
}
.bar-main__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 60px;
  padding-block: 0.25rem;
}

/* --- Logo -------------------------------------------------------------- */
/* Artwork is outlined paths, so the anchor carries the accessible name.
   Fills come from --logo-* tokens so the artwork file is never edited to
   recolour it, and so the header, the social card and the icons cannot
   disagree. Values are the supplied file's own.

   The tag is logotype, which WCAG exempts from contrast. It measures
   4.15:1 on the bar. Fine for a mark; do not reuse --logo-tag for text. */

.logo {
  flex: none;
  display: block;
  padding: 0.3rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 3px;
}
.logo:hover { border-color: rgba(255, 255, 255, 0.45); }

.logo__art {
  display: block;
  height: 2.15rem;
  width: auto;
}
@media (max-width: 767px) { .logo__art { height: 1.95rem; } }
.logo__word  { fill: var(--logo-word); }
.logo__smile { fill: var(--logo-smile); }
/* The tag runs a shade larger and heavier than the artwork ships it: scaled
   about its own left edge in the markup, and emboldened here by stroking the
   outlines in their own colour rather than swapping in a heavier cut. */
.logo__tag {
  fill: var(--logo-tag);
  stroke: var(--logo-tag);
  stroke-width: 7;
  stroke-linejoin: round;
}

/* --- Location, account, returns: two-line blocks ------------------------ */
/* Amazon stacks a small label over a bold value. The location keeps its pin
   beside the stack; the others are plain text, so no caret is a dead button. */

.locale,
.stack {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #FFF;
  text-decoration: none;
}
.stack { flex-direction: column; align-items: flex-start; gap: 0; }
a.locale:hover,
a.stack:hover { border-color: rgba(255, 255, 255, 0.42); color: #FFF; }

.stack__top {
  display: block;
  font-size: 0.75rem;
  line-height: 1.25;
  color: #FFF;
}
.stack__main {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.stack__chev { display: inline; stroke: #CCC; vertical-align: -0.1em; }

/* --- Cart -------------------------------------------------------------- */

.counter {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #FFF;
  text-decoration: none;
}
.counter:hover { border-color: rgba(255, 255, 255, 0.42); color: #FFF; }
.counter__mark { position: relative; display: block; padding-top: 0.55rem; }
.counter__num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
/* Filled outline traced from the sprite; the symbol sets its own fills. */
.counter__cart { fill: currentColor; stroke: none; }
.counter__label { font-size: 0.875rem; font-weight: 700; padding-bottom: 0.15rem; }

/* --- Language selector -------------------------------------------------- */

.lang { flex: none; position: relative; }

.lang__btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: #FFF;
  cursor: pointer;
}
.lang__btn:hover,
.lang__btn[aria-expanded='true'] { border-color: rgba(255, 255, 255, 0.45); }

.flag {
  width: 1.5rem;
  height: 1rem;
  border-radius: 2px;
}
.lang__code { font-size: 0.875rem; font-weight: 700; }
.lang__chev { stroke: #CCC; }

.lang__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 30;
  width: 16rem;
  padding: 0.85rem 1rem 0.9rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 17, 17, 0.35);
  color: var(--ink);
  text-align: left;
}
/* The little pointer, the way a retail flyout has one. */
.lang__menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 1.4rem;
  width: 12px; height: 12px;
  background: var(--paper);
  transform: rotate(45deg);
}
.lang__heading {
  position: relative;
  font-size: var(--fs-meta);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.lang__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-body);
}
.lang__dot {
  width: 0.75rem; height: 0.75rem;
  border: 4px solid var(--link);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--paper);
}
.lang__note {
  position: relative;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* --- Search ------------------------------------------------------------ */
/* Hidden unless JS is running. A search field that does nothing is worse
   than no search field, so the html.js gate removes it entirely. */

.site-search { display: none; }
.js .site-search {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 10rem;
  background: var(--paper);
  border: 2px solid transparent;
  border-radius: 5px;
  overflow: hidden;
}
.site-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.55);
}

.site-search__scope {
  display: flex;
  align-items: center;
  padding: 0 0.7rem;
  background: var(--surface);
  border-right: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.site-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.7rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
}
/* No inner ring on purpose: .site-search:focus-within already draws an orange
   border plus a 3px glow around the whole control, which measures 8.5:1
   against the dark bar. An outline on the input as well would render a second
   ring inside the first. */
.site-search__input:focus { outline: none; }
.site-search__input::placeholder { color: var(--ink-muted); }
.site-search__count {
  display: flex;
  align-items: center;
  padding-right: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--ink-muted);
}
.site-search__go {
  display: grid;
  place-items: center;
  width: 3rem;
  border: 0;
  background: var(--search-btn);
  color: var(--nav-dark);
  cursor: pointer;
}
.site-search__go:hover { background: #F3A847; }

/* --- Bar 2: section nav ------------------------------------------------ */

.bar-nav {
  background: var(--nav-mid);
  color: #FFF;
  --focus: #FFF;
}
.bar-nav__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 40px;
}
.bar-nav__all {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: #FFF;
  text-decoration: none;
}
.bar-nav__all:hover { border-color: rgba(255, 255, 255, 0.42); color: #FFF; }

.bar-nav__list {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.bar-nav__list::-webkit-scrollbar { display: none; }
.bar-nav__list a {
  display: block;
  padding: 0.3rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: var(--fs-meta);
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}
.bar-nav__list a:hover { border-color: rgba(255, 255, 255, 0.42); color: #FFF; }





/* 6. Breadcrumb =========================================================== */

.crumbs { padding: 0.9rem 0 0.5rem; }
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-meta);
  color: var(--link);
}
.crumbs__list li + li::before {
  content: '\203A';
  margin-right: 0.4rem;
  color: var(--ink-muted);
}
.crumbs__list [aria-current='page'] { color: var(--ink-muted); font-weight: 400; }


/* 7. Product block layout ================================================= */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 0.905fr) minmax(0, 1fr) 15.5rem;
  gap: 2.5rem;
  align-items: start;
  padding: 0.75rem 0 0.5rem;
}


/* 8. Gallery ============================================================== */

.gallery {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-areas: 'rail stage';
  gap: 1.125rem;
}
.gallery__rail  { grid-area: rail; }
.gallery__stage { grid-area: stage; position: relative; }

.share {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink-muted);
  cursor: pointer;
}
.share:hover { border-color: var(--rule); color: var(--ink); }
.share__flash:not(:empty) {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--signal);
}

.thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.thumb {
  display: block;
  position: relative; /* contains the .sr-only label inside the scroller */
  width: 100%;
  padding: 2px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.thumb:hover { border-color: var(--ink-muted); }
.thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.thumb.is-active {
  border-color: var(--signal);
  box-shadow: 0 0 0 1px var(--signal);
}

.shot__frame {
  display: grid;
  aspect-ratio: 1 / 1;
  padding: 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.shot__frame picture { display: contents; }
.shot__frame img { width: 100%; height: 100%; object-fit: contain; }
/* 9. Summary ============================================================== */

.brand { margin: 0.2rem 0 0.1rem; }
.brand__mark {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.2;
  color: var(--ink);
}
.brand__link {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: var(--fs-meta);
  text-decoration: none;
}
.brand__link:hover { text-decoration: underline; }

.product-title {
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: normal;
  text-wrap: balance;
}

/* Badge in the slot a retail page uses for "Choice"-style flags. */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.tag {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  background: var(--nav-mid);
  border-radius: 3px 8px 8px 3px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #FFF;
}
.tag__plus { color: var(--accent); }
.tag-for { font-size: var(--fs-meta); color: var(--ink-muted); }

.stat-line {
  margin-top: 0.6rem;
  font-size: var(--fs-meta);
  font-weight: 500;
}

.price-block { margin-top: -0.15rem; }
.price--summary { font-size: 1.75rem; }

/* A price slot that asks rather than quotes. Same weight and size as a figure
   so the slot still reads as the price slot, but it is a link, and it is the
   colour of one. */
.price__ask {
  color: var(--signal);
  text-decoration: none;
}
.price__ask:hover { color: var(--signal-deep); text-decoration: underline; }

/* A phrase in the price slot rather than a figure: same weight and size,
   tightened so it reads as one unit. */
.price--phrase { letter-spacing: -0.02em; }
.price--phrase .num { font-weight: 400; }
.price__note {
  margin-top: 0.4rem;
  max-width: 46ch;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}
.ship-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-size: var(--fs-meta);
}

.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}
.rating__stars {
  display: inline-flex;
  text-decoration: none;
  border-radius: 2px;
}
.rating__stars:hover .stars { fill: var(--signal); }
.rating__sep { color: var(--rule); }
.rating__bar {
  width: 1px;
  height: 0.95rem;
  margin-inline: 0.2rem;
  background: var(--rule);
}
.rating__find {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-meta);
  color: var(--signal);
  cursor: pointer;
}
.rating__find:hover { color: var(--signal-deep); text-decoration: underline; }
.rating__meta .num { color: var(--ink); }

/* Variations ------------------------------------------------------------- */

/* Variation matrix, in the slot a product page uses for size or colour. */
.swatch-label {
  margin-bottom: 0.55rem;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}
.swatch-label strong { color: var(--ink); font-weight: 600; }

.swatches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
/* An odd number of chips leaves an orphan on the last row; it spans the row
   instead of sitting half-width beside a hole.
   :nth-of-type, NOT :nth-child. Every label is preceded by its own radio
   input, so the labels are children 2, 4, 6 and so on: every one of them is
   an even child, and a :nth-child(odd) rule can never match. Counting labels
   among labels is what actually works, and it self-corrects if a chip is
   added or removed later. */
.swatch:nth-of-type(odd):last-of-type { grid-column: 1 / -1; }
.swatch {
  display: grid;
  place-items: center;
  min-height: 3rem;
  padding: 0.5rem 0.65rem;
  text-align: center;
  font-size: var(--fs-meta);
  line-height: 1.3;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.swatch:hover { border-color: var(--ink-muted); }
/* Amazon's selected variation: teal rule, black label. */
.pill__input:checked + .swatch {
  border-color: var(--link);
  box-shadow: inset 0 0 0 1px var(--link);
  background: var(--select);
  color: var(--ink);
  font-weight: 700;
}
.pill__input:focus-visible + .swatch {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* About this item -------------------------------------------------------- */

.about__list {
  display: grid;
  gap: 0.5rem;
}
.about__list li {
  position: relative;
  padding-left: 1rem;
}
.about__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px; height: 5px;
  background: var(--ink-muted);
}


/* 10. Buy box ============================================================= */

.buybox-col { position: relative; }
.buybox__sentinel {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
}

.buybox {
  position: sticky;
  top: 1rem;
  padding: var(--pad);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.buybox.is-stuck {
  border-color: #CFD6DA;
  box-shadow: 0 6px 18px -12px rgba(20, 23, 26, 0.45);
}

.price {
  font-weight: 400;
  font-size: var(--fs-price);
  line-height: 1.1;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.price__cur {
  font-size: 0.4em;
  font-weight: 500;
  vertical-align: 0.95em;
  letter-spacing: 0;
  margin-right: 0.04em;
}
.price__mag {
  font-size: 0.46em;
  font-weight: 500;
  vertical-align: 0.82em;
  letter-spacing: 0;
  margin-left: 0.06em;
}
.price__label {
  margin-top: 0.3rem;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}

.avail { display: none; }
.avail--in  { margin-top: 0.75rem; font-size: 1.125rem; font-weight: 400; color: var(--success); }
.avail--out { margin-top: 0.75rem; font-size: 1.0625rem; font-weight: 400; color: #B12704; }
body.is-available  .avail--in  { display: block; }
body:not(.is-available) .avail--out { display: block; }

.buybox__row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.75rem;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}
.buybox__row .icon { margin-top: 0.15rem; }
.buybox__row strong { color: var(--ink); font-weight: 500; }

.fulfil {
  margin-top: 0.45rem;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}
.fulfil strong { color: var(--ink); font-weight: 500; }

.more { margin-top: 0.5rem; }
.more__toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-meta);
  color: var(--signal);
  cursor: pointer;
  list-style: none;
}
.more__toggle::-webkit-details-marker { display: none; }
.more__toggle:hover { color: var(--signal-deep); }
.more__toggle .icon { transition: transform 140ms ease; }
.more[open] .more__toggle .icon { transform: rotate(180deg); }
.more .buybox__meta { margin-top: 0.6rem; padding-top: 0.6rem; }

.buybox__actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.btn {
  display: block;
  padding: 0.5rem 1rem;
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn--primary {
  background: var(--btn-cart);
  border-color: var(--btn-cart-b);
  color: var(--ink);
}
.btn--primary:hover { background: var(--btn-cart-h); border-color: var(--btn-cart-b); color: var(--ink); }
.btn--secondary {
  background: var(--btn-buy);
  border-color: var(--btn-buy-b);
  color: var(--ink);
}
.btn--secondary:hover { background: var(--btn-buy-h); border-color: var(--btn-buy-b); color: var(--ink); }

.buybox__meta {
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.3rem;
  font-size: var(--fs-meta);
}
.buybox__meta > div {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 0.4rem;
}
.buybox__meta dt { color: var(--ink-muted); }
.buybox__meta dd { color: var(--ink); }


/* 11. Frequently bought together ========================================== */

.fbt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 2rem;
  align-items: start;
  padding: var(--pad);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.fbt__cards {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.fbt__card {
  flex: 0 1 9.5rem;
  min-width: 0;
  transition: opacity 140ms ease;
}
.fbt__card.is-off { opacity: 0.35; }
.fbt__frame {
  display: grid;
  aspect-ratio: 1 / 1;
  padding: 0.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.fbt__frame img { width: 100%; height: 100%; object-fit: contain; }
.fbt__cards { flex-wrap: wrap; }
.fbt__name {
  margin-top: 0.55rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.35;
}
.fbt__sub {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.fbt__plus {
  align-self: flex-start;
  margin-top: 3.6rem;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  color: var(--ink-muted);
}

.fbt__total { font-size: var(--fs-body); }
.fbt__total strong {
  font-weight: 700;
  color: #B12704;
}
.fbt__list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
/* Padded so each row is a comfortable target rather than a 19px sliver. It
   passed WCAG 2.5.8 before only on the spacing exception, at 26px centre to
   centre, which is a pass by 2px and no fun under a thumb. */
.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  padding: 0.3rem 0;
  font-size: var(--fs-meta);
  cursor: pointer;
}
.check input {
  width: 1.125rem; height: 1.125rem;
  margin: 0.05rem 0 0;
  accent-color: var(--signal);
  cursor: pointer;
}
.check__lead { color: var(--ink-muted); }
.fbt__note {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.fbt__lede {
  margin: -0.4rem 0 1rem;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}

/* A skill has no product photo. The frame keeps the photo's footprint so
   the row still reads as a bundle, and holds a glyph instead. */
.fbt__frame--glyph { display: grid; place-items: center; }
.tile {
  width: 44%;
  height: auto;
  max-width: 3.25rem;
  stroke: var(--chart);
  stroke-width: 2.2;
}


/* 11b. Platform experience ================================================ */

/* Names, not logos: shipping other companies' marks on a page that already
   borrows one brand's layout is a trademark problem, and a greyed-out logo
   grid reads as agency filler. Set in the page's own type it reads as spec. */

.plat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem 2rem;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}
.plat__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.plat__set {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.plat__chip {
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--surface);
  font-size: var(--fs-meta);
  color: var(--ink);
}


/* 12. Product information ================================================= */

/* One open panel on the left with the everyday facts loose beneath it, a
   stack of collapsed panels on the right, description full width below.
   The panels are <details>, so the browser owns the keyboard handling, the
   expanded/collapsed state exposed to assistive tech, and find-in-page. */

.pinfo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  align-items: start;
}
.pinfo__col { display: grid; gap: 0; }

.panel { margin: 0; }
.panel + .panel { border-top: 0; }
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.panel__head::-webkit-details-marker { display: none; }
.panel + .panel .panel__head { border-top: 0; }
.panel__head:hover { background: #EDF1F1; }
.panel__chev {
  flex: none;
  stroke: var(--ink);
  stroke-width: 2;
  transition: transform 140ms ease;
}
.panel[open] .panel__chev { transform: rotate(180deg); }
.panel[open] + .panel .panel__head { border-top: 1px solid var(--rule); }
.panel__body { padding: 0.9rem 0 1.1rem; }

/* Facts that sit outside the panel, the way a retail page drops warranty and
   feedback lines under an expanded block rather than inside another box. */
.pinfo__loose { padding-top: 0.25rem; }
.pinfo__label {
  margin-top: 0.9rem;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}
.pinfo__line {
  margin-top: 0.35rem;
  padding-left: 0.9rem;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
}
.pinfo__line strong { font-weight: 700; }

/* Description runs the full content width beneath both columns. */
.pdesc {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.pdesc__title { margin-bottom: 0.9rem; }


.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  border: 1px solid var(--rule);
  background: var(--paper);
}

.specs th,
.specs td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
  border-bottom: 1px solid var(--rule);
}
.specs tr:last-child th,
.specs tr:last-child td { border-bottom: 0; }
.specs th {
  width: 14rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
}
.specs td { color: var(--ink); }
.specs td.mono,
.specs td .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1, 'zero' 1; }

/* Inside a panel the table has already been framed by the panel head, so it
   drops its own border and its label column shrinks to fit the narrower bay. */
.specs--flat { border: 0; }
.specs--flat th { width: 11rem; background: transparent; }
.specs--flat th,
.specs--flat td { padding: 0.5rem 0.75rem 0.5rem 0; }
.specs--flat tr:last-child th,
.specs--flat tr:last-child td { border-bottom: 0; }


/* 13. Product description ================================================= */

.prose {
  display: grid;
  gap: 0.9rem;
  max-width: 66ch;
  line-height: 1.68;
}

/* Full width under the information panels, the way a retail page runs its
   long description. Defined after .prose so the modifier actually wins. */
.prose--wide { max-width: none; }


/* 13b. Operating model ==================================================== */

/* Sits above Systems and reads as its own module because it is a different
   kind of thing: everything in Systems is software Paul wrote, this is a way
   of working he installs. The board is drawn rather than screenshotted, so it
   inherits the palette and carries no vendor's chrome. */

.om {
  margin-top: 3rem;
  padding: 3rem 0 2.75rem;
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.om__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem 3rem;
  align-items: start;
  margin-top: 2rem;
}
.om__frame {
  padding: 0.75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.om__cap {
  margin-top: 0.6rem;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}

.om__steps { display: grid; gap: 1.25rem; }
.om__step {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 0.5rem;
}
.om__n {
  grid-row: 1 / span 2;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
}
.om__name { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.om__does { margin-top: 0.3rem; max-width: 52ch; line-height: 1.6; }

.om__why {
  max-width: 78ch;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* --- The board ---------------------------------------------------------- */

.board { width: 100%; height: auto; }
.board__col { fill: var(--surface); stroke: var(--rule); stroke-width: 1; }
.board__card { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.board__ln { fill: var(--rule); }
.board__ln--short { fill: #E4E8E8; }
.board__head {
  fill: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.board__wip { fill: var(--select); stroke: var(--link); stroke-width: 1; }
.board__wiptext {
  fill: var(--link);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
}
.board__span { stroke: var(--ink-muted); stroke-width: 1; fill: none; }
.board__span--dash { stroke: var(--rule); stroke-dasharray: 4 4; }
.board__tick { stroke: var(--ink-muted); stroke-width: 1.5; fill: none; }
.board__note { fill: var(--ink-muted); font-size: 11px; }
.board__note--end { text-anchor: end; }


/* 14. Systems (A+ content) ================================================ */

.systems {
  margin-top: 3rem;
  padding: 3rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.systems__title { margin-bottom: 0.4rem; }
.systems__lede {
  max-width: 46ch;
  color: var(--ink-muted);
  font-size: var(--fs-body);
}
.systems__list {
  display: grid;
  gap: 3.5rem;
  margin-top: 2.5rem;
}

.sys {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.sys:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.sys:nth-child(even) .sys__media { order: 2; }

.sys__frame {
  display: grid;
  aspect-ratio: 16 / 10;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
/* display: contents so the <picture> wrapper does not become the sized box;
   object-fit only applies to the replaced element, which is the <img>. */
.sys__frame picture { display: contents; }
.sys__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }

.sys__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}
.sys__name {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.sys__link { color: var(--signal); text-decoration: none; }
.sys__link:hover { color: var(--signal-deep); text-decoration: underline; }
.sys__does {
  margin-top: 0.5rem;
  max-width: 46ch;
  line-height: 1.6;
}
.sys__was {
  margin-top: 0.6rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--rule);
  max-width: 46ch;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}


/* 15. Reviews ============================================================= */

/* --- Customer reviews header: rail + summary ---------------------------- */
/* Two columns the way a retail PDP splits them: the distribution and the
   sponsored slot on the left, the synthesis and the reviews on the right. */

.crv {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: 1rem 3rem;
  align-items: start;
}
.crv__rail { position: relative; }

.crv__score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.crv__score .stars { flex: none; }
.crv__out {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
}

/* Distribution. All five rows are present even though four are empty.
   a histogram with the zeros removed is not a histogram. */
.bars {
  width: 100%;
  margin-top: 0.85rem;
  border-collapse: collapse;
  font-size: var(--fs-meta);
}
.bars th {
  width: 3.5rem;
  padding: 0.2rem 0.5rem 0.2rem 0;
  text-align: left;
  font-weight: 400;
  color: var(--ink-muted);
  white-space: nowrap;
}
/* Only the row that has reviews behind it is a link, and it goes to them.
   A teal label that does nothing is a button-shaped lie; the empty rows
   stay grey because there is nothing to jump to. */
.bars a { text-decoration: none; }
.bars a:hover { text-decoration: underline; }
.bars td { padding: 0.2rem 0; }
.bars__track {
  display: block;
  height: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--chart-bg);
  overflow: hidden;
}
.bars__fill {
  display: block;
  height: 100%;
  background: var(--star);
}
.bars td.bars__pct {
  width: 2.75rem;
  padding-left: 0.55rem;
  text-align: right;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.more--rate { margin-top: 0.6rem; }
.crv__how {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* --- The house ad ------------------------------------------------------- */

.promo {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}
.promo__flag {
  font-size: 0.6875rem;
  color: var(--ink-muted);
}
.promo__h {
  margin-top: 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.promo__cta { margin-top: 1rem; width: 100%; }
.promo__fine {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--ink-muted);
  text-align: center;
}

/* Three bars, one series, so no legend. The caption names it. Each bar is
   labelled directly above itself, which is why there is no axis: at this
   width an axis would cost more pixels than it explains. */
.growth { margin-top: 0.9rem; }
.growth__list { display: grid; gap: 0.7rem; }
.growth__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.growth__k { font-size: 0.75rem; color: var(--ink-muted); }
.growth__v {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.growth__track {
  height: 0.5rem;
  border-radius: 2px;
  background: var(--chart-bg);
}
.growth__bar {
  display: block;
  height: 100%;
  border-radius: 2px 4px 4px 2px;
  background: var(--chart);
}
.growth__cap {
  margin-top: 0.65rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* --- "Customers say" ---------------------------------------------------- */

.crv__say {
  margin-top: 0.5rem;
  max-width: 72ch;
  line-height: 1.6;
}
.crv__meta {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
}

/* Topic chips. Each runs the page's real find for its term rather than
   filtering a list that is short enough to read whole. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--paper);
  font-size: var(--fs-meta);
  cursor: pointer;
}
.chip:hover { background: var(--surface); border-color: var(--ink-muted); }
.chip.is-on {
  background: var(--select);
  border-color: var(--signal);
}
.chip__tick { stroke: var(--success); stroke-width: 2.6; flex: none; }

.crv .rule { margin: 1.5rem 0; }
.subhead--history { margin-top: 2.5rem; }

.review__more { margin-top: 0.65rem; }
.review__more a {
  font-size: var(--fs-meta);
  text-decoration: none;
}
.review__more a:hover { text-decoration: underline; }

.reviews__note {
  max-width: 62ch;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  margin-top: -0.4rem;
}

.reviews {
  display: grid;
  gap: 1.25rem;
}
.review {
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.review__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.review__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.125rem; height: 2.125rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--rule);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.review__avatar .icon { stroke: var(--ink-muted); stroke-width: 1.6; }
.review__who { font-size: var(--fs-meta); font-weight: 700; }

/* A recommendation puts stars and headline on one line the way a retail
   review does, and carries no date, because a good one does not go stale. */
.review-rec .review__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.review-rec .review__title { margin-top: 0; font-size: var(--fs-body); }
.review-rec .badge {
  display: block;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: var(--fs-meta);
  font-weight: 700;
}
.review-rec blockquote { margin: 0; }
.more--recs { margin-top: 1.25rem; }
.more--recs .reviews { margin-top: 1.25rem; }
.review__role { font-size: 0.75rem; color: var(--ink-muted); }

.badge {
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #C45500;
  background: transparent;
  border-radius: 0;
}

.review__rating { margin-top: 0.7rem; }
.review__title {
  margin-top: 0.7rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.review__date {
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-feature-settings: 'tnum' 1;
  color: var(--ink-muted);
}
.review__body { margin-top: 0.7rem; max-width: 82ch; }
.review__body p + p { margin-top: 0.5rem; }
.review__body ul {
  display: grid;
  gap: 0.35rem;
}
.review__body li {
  position: relative;
  padding-left: 1rem;
  font-size: var(--fs-body);
}
.review__body li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 5px; height: 5px;
  background: var(--ink-muted);
}


/* 16. Questions & answers ================================================= */

.qa {
  display: grid;
  gap: 1rem;
}
.qa__item {
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--rule);
}
.qa__q,
.qa__a {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}
.qa__q { font-weight: 500; }
.qa__a { margin-top: 0.45rem; color: var(--ink-muted); }
.qa__mark {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-muted);
}
.qa__q .qa__mark { color: var(--signal); }


/* 17. Footer ============================================================== */

/* Centred throughout, the way the reference footer is: a brand band carrying
   the header's own artwork, a menu band, then the legal line. Our link count
   is a fraction of the reference's, so the grid is centred as a block rather
   than stretched across a width it cannot honestly fill. */

.site-footer {
  margin-top: 3.5rem;
  background: var(--nav-dark);
  color: #DDD;
  font-size: var(--fs-meta);
}

.back-to-top {
  display: block;
  padding: 0.95rem 1rem;
  background: var(--nav-light);
  color: #FFF;
  font-size: var(--fs-meta);
  text-align: center;
  text-decoration: none;
  --focus: #FFF;
}
.back-to-top:hover { background: #485769; color: #FFF; }

.site-footer__brand {
  display: grid;
  place-items: center;
  padding: 1.75rem 1.5rem;
  background: var(--nav-mid);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.logo--foot { padding: 0.25rem 0.5rem; }
.logo--foot .logo__art { height: 2.35rem; }

.site-footer__menu { padding: 2.5rem 0 2.75rem; }
.foot-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 13.5rem));
  justify-content: center;
  gap: 1.5rem 3.5rem;
}
.foot-menu a {
  display: grid;
  gap: 0.15rem;
  text-decoration: none;
  --focus: #FFF;
}
.foot-menu__t {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: #FFF;
}
.foot-menu__s {
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: #999;
}
.foot-menu a:hover .foot-menu__t { text-decoration: underline; }
.foot-menu a:hover .foot-menu__s { color: #DDD; }

.site-footer__legal {
  padding: 1.75rem 0 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.5rem;
  color: #DDD;
}
.foot-legal a { color: #DDD; text-decoration: none; --focus: #FFF; }
.foot-legal a:hover { color: #FFF; text-decoration: underline; }
.footer-avail { margin-top: 0; font-size: var(--fs-meta); color: #FFF; }

.disclaimer {
  max-width: 74ch;
  margin: 1rem auto 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #999;
}
.colophon {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: #999;
}


/* 18. Responsive ========================================================== */

/* Laptop: drop the second quick-action block before the search gets cramped. */
@media (max-width: 1199px) {
  .stack--hide-md { display: none; }
  .bar-main__inner { gap: 1rem; }
}

/* Tablet: gallery + summary side by side, buy box full width beneath. */
@media (max-width: 1023px) {
  .pdp {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.75rem;
  }
  /* Give the search room; the resume link still sits in the buy box. */
  .stack { display: none; }
  .buybox-col { grid-column: 1 / -1; }
  .buybox { position: static; max-width: 34rem; }
  .buybox__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fbt { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .fbt__side { max-width: 34rem; }

  .sys { gap: 1.75rem; }
  .foot-menu { grid-template-columns: repeat(3, minmax(0, 13.5rem)); gap: 1.5rem 2.5rem; }
  .om__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  /* Rail unstacks sideways rather than dropping a tall column of summary
     furniture between the heading and the first review. */
  .crv { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .crv__rail {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 22rem);
    gap: 0.5rem 2.5rem;
    align-items: start;
  }
  /* Explicit placement, not auto-flow: the rail's four children would
     otherwise alternate across the two columns instead of stacking the
     rating block in one and the ad in the other. */
  .crv__score,
  .bars,
  .more--rate { grid-column: 1; }
  .promo {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
  }
}

/* Small tablet / large phone. */
@media (max-width: 767px) {
  :root { --fs-h1: 1.5rem; --pad: 1rem; }

  /* Header collapses the way a retail header does: identity and the systems
     counter on row one, search on row two, location on row three. */
  .bar-main__inner { flex-wrap: wrap; gap: 0.6rem 1rem; padding-block: 0.6rem; }
  .logo    { order: 1; }
  .lang    { order: 2; margin-left: auto; }
  .counter { order: 3; }
  .js .site-search { order: 4; flex-basis: 100%; max-width: none; }
  .locale  { order: 5; flex-basis: 100%; padding-inline: 0; }

  /* Anchoring the flyout to the button pushes it off-screen once the button
     sits mid-row, so on small screens it spans the viewport instead. */
  .lang__menu {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    top: auto;
    width: auto;
  }
  .lang__menu::before { display: none; }
  .locale > span { display: flex; align-items: baseline; gap: 0.35rem; }
  .locale .stack__top { font-size: 0.75rem; }


  .shot__frame { padding: 0.6rem; }

  .pdp { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .buybox { max-width: none; }

  /* Gallery flips: main image first, thumbnail rail beneath it. */
  .gallery {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'stage' 'rail';
  }
  .thumbs {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }
  .thumb { width: 3.25rem; flex: none; }
  .thumbs { gap: 0.5rem; }

  /* Both selectors, not just .sys. A media query adds no specificity, so a
     bare .sys (0,1,0) in here loses to .sys:nth-child(even) (0,2,0) declared
     outside it, and every second card kept its two columns on a phone. Any
     mobile override of an alternating rule has to match its specificity. */
  .sys,
  .sys:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .sys:nth-child(even) .sys__media { order: 0; }
  .om { padding: 2.25rem 0 2rem; }
  .om__frame { padding: 0.5rem; }
  .systems { padding: 2.25rem 0; }
  .systems__list { gap: 2.5rem; margin-top: 1.75rem; }

  .specs th, .specs td { display: block; width: auto; }
  .specs th { padding-bottom: 0; border-bottom: 0; font-size: var(--fs-meta); }
  .specs td { padding-top: 0.15rem; }

  .foot-menu { grid-template-columns: repeat(2, minmax(0, 13.5rem)); gap: 1.25rem 2.5rem; }

  /* Back to one column, and unwind the explicit placement above it. */
  .pinfo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pinfo__loose { padding-bottom: 1.25rem; }
  /* Stacked, the two columns become one run of panels, so the seam between
     the last panel of column one and the first of column two needs the rule
     that the side-by-side layout got for free. */
  .pinfo__col + .pinfo__col .panel:first-child .panel__head { border-top: 1px solid var(--rule); }

  .crv__rail { grid-template-columns: minmax(0, 1fr); max-width: 26rem; }
  .crv__score,
  .bars,
  .more--rate,
  .promo { grid-column: 1; }
  .promo { grid-row: auto; margin-top: 1.25rem; }
  .more--rate { margin-top: 0.75rem; }

  .plat { padding: 1rem; }
}

/* 360px floor. */
@media (max-width: 479px) {
  :root { --fs-price: 2.375rem; }

  .wrap { padding-inline: 1rem; }
  .buybox__actions { grid-template-columns: minmax(0, 1fr); }

  /* Bundle stacks: thumbnail left, name and note right, plus signs between. */
  .foot-menu { grid-template-columns: minmax(0, 15rem); }

  .fbt__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }
  .fbt__plus { margin-top: 0; justify-self: center; }
  .fbt__card {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    grid-template-areas: 'img name';
    align-content: center;
    column-gap: 0.85rem;
  }
  .fbt__frame { grid-area: img; width: 4rem; align-self: center; }
  .fbt__name  { grid-area: name; align-self: center; margin-top: 0; }
  .fbt__frame .ph { padding: 0.2rem; }
  .fbt__frame .ph__label { font-size: 0.625rem; }
  .fbt__frame .ph__note { display: none; }

  .locale .stack__main { font-size: 0.75rem; }
  .bar-nav__all { padding-inline: 0.35rem; }
}


/* 19. Reduced motion, forced colors, print ================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .buybox.is-stuck { box-shadow: none; }
}

@media (forced-colors: active) {
  .thumb.is-active,
  .pill__input:checked + .pill { forced-color-adjust: none; border: 2px solid Highlight; }
  .btn { border: 1px solid ButtonText; }
}

@media print {
  .skip-link,
  .bar-nav,
  .site-search,
  .gallery__rail,
  .fbt,
  .buybox__actions { display: none; }

  body { background: #FFF; font-size: 11pt; }
  .site-footer { background: #FFF; color: #000; }
  .foot-menu__t, .foot-menu__s, .disclaimer, .colophon, .foot-legal, .foot-legal a { color: #000; }
  .buybox { position: static; }
  .section { break-inside: avoid; }
  .sys { break-inside: avoid; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}