/* ==========================================================================
   VeloChecker — the Liquid Glass look (the site's default since 2026-09-29)

   js/look.js sets html[data-look="glass"] for every visitor except one who chose
   ?look=classic (remembered in localStorage). EVERY rule below is scoped under that
   attribute, so for a classic visitor this file matches nothing and the classic look
   is untouched. That scoping is an invariant, not a habit:
   src/test/js/glass-scoping.test.mjs fails on any selector that escapes it.

   The rules come from Apple's "Adopting Liquid Glass" guidance, applied to a web page:
     - glass is a FUNCTIONAL layer for navigation and controls only, floating above
       the content; the content itself (photos, tables, charts) stays solid;
     - sparingly, and never glass on glass: a control INSIDE a glass panel is a plain
       fill, not another sheet of glass;
     - corners are concentric with their container (inner = outer - inset), and
       controls are capsules;
     - lists and tables get larger rows and rounder sections, and section headers use
       title case rather than ALL CAPS;
     - reduced transparency and increased contrast are honoured.

   Covers every page: the site header, footer and cookie banner; the product and home
   pages; the collection pages (/deals, /c/, /b/, /price-index); and the rest (sign in,
   pricing, account, my tracking, add, the legal pages and the guides).
   ========================================================================== */

/* ---------- tokens ---------- */
html[data-look="glass"] {
  --lg-fill: rgba(255, 255, 255, 0.44);
  --lg-blur: 22px;
  --lg-hi: rgba(255, 255, 255, 0.92);        /* the top edge catching the light */
  --lg-lo: rgba(255, 255, 255, 0.35);        /* the bottom rim */
  --lg-rim: rgba(255, 255, 255, 0.5);
  --lg-lift: rgba(20, 18, 15, 0.14);         /* the shadow that floats it off the page */
  --lg-sheen-a: rgba(255, 255, 255, 0.55);
  --lg-sheen-b: rgba(255, 255, 255, 0.2);
  --lg-solid: #F2EEE8;                       /* what glass becomes under Reduce Transparency */
  --lg-ground: #F7F5F2;                      /* the page the content cards sit on */
  --lg-ring: 0 0 0 1px rgba(20, 18, 15, 0.06);
  --lg-fill-subtle: rgba(20, 18, 15, 0.07);  /* a secondary control drawn ON glass */
  --lg-hairline: rgba(20, 18, 15, 0.07);
  --lg-rule: rgba(20, 18, 15, 0.1);          /* the rule between the rail's sections */
  /* The parts of the material the accessibility settings change. The material rule
     below reads them, and the media queries at the end override only these, so the
     list of glass elements is written once. */
  --lg-backdrop: blur(var(--lg-blur)) saturate(190%);
  --lg-shadow:
    inset 0 1px 0.5px var(--lg-hi),
    inset 0 -1px 0.5px var(--lg-lo),
    inset 0 0 0 1px var(--lg-rim),
    0 1px 1px rgba(20, 18, 15, 0.05),
    0 12px 32px var(--lg-lift);
}

/* ---------- the material ----------
   Translucent fill + backdrop blur and saturation (the content behind infuses the
   glass), a specular rim, and a lift shadow. The sheen is a background layer rather
   than a ::before, so it needs no positioning of the element's children. */
html[data-look="glass"] .nav-brand,
html[data-look="glass"] .nav-search,
html[data-look="glass"] .nav-links,
html[data-look="glass"] .nav-burger,
html[data-look="glass"] .nav-cats-inner,
html[data-look="glass"] .product-search,
html[data-look="glass"] .cookie-consent,
html[data-look="glass"] .tab-bar-tabs,
html[data-look="glass"] .tab-search,
html[data-look="glass"] .product-rail {
  background:
    linear-gradient(140deg, var(--lg-sheen-a) 0%, rgba(255, 255, 255, 0) 34%,
                    rgba(255, 255, 255, 0) 70%, var(--lg-sheen-b) 100%),
    var(--lg-fill);
  -webkit-backdrop-filter: var(--lg-backdrop);
  backdrop-filter: var(--lg-backdrop);
  border: 0;
  box-shadow: var(--lg-shadow);
}

/* ---------- the site header (every page) ----------
   The bar stops being a white strip and becomes capsules floating over the page. The
   wrapper stays sticky and in flow, so nothing below it moves; it just turns
   transparent, and lets clicks through the gaps between capsules. */
html[data-look="glass"] .site-header {
  background: transparent;
  border-bottom: 0;
  padding: 12px 0 6px;
  pointer-events: none;
}
/* The scroll-edge effect: content passing under the header fades behind a wash of
   the page colour so the capsules stay legible over it. A mask fades the wash out
   rather than ending in a line. It is a gradient, NOT a blur: every capsule sits on
   this layer, and a backdrop filter here would put glass under glass. */
html[data-look="glass"] .site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(247, 245, 242, 0.55), rgba(247, 245, 242, 0));
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
html[data-look="glass"] .nav-brand,
html[data-look="glass"] .nav-search,
html[data-look="glass"] .nav-links,
html[data-look="glass"] .nav-burger,
html[data-look="glass"] .nav-cats-inner { pointer-events: auto; }

html[data-look="glass"] .nav { height: 56px; gap: 12px; }

html[data-look="glass"] .nav-brand {
  height: 56px;
  padding: 0 22px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  font-size: 22px;
}

/* search.js injects the field and its own <style>; these out-specify it.
   The INPUT fills the capsule and carries the text inset. With the inset on the
   capsule and the input centred, the input was an 18px strip: most of the capsule
   focused nothing, and search.js, which places its results panel from the input's
   box, opened the panel 11px inside the capsule. */
html[data-look="glass"] .nav-search {
  height: 56px;
  border-radius: 28px;
  padding: 0 8px 0 0;
  align-items: stretch;
  overflow: hidden;
}
/* A solid accent ring, 4.4:1 on the page ground (WCAG 1.4.11 asks 3:1; 45% accent
   was 1.9:1). */
html[data-look="glass"] .nav-search:focus-within { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
html[data-look="glass"] .nav-search-input {
  background: transparent;
  padding: 0 12px 0 20px;
  font-size: 15px;
}
/* padding 0: search.js gives the button 18px each side, which in a 40px box left the
   17px magnifier 4px wide. */
html[data-look="glass"] .nav-search-go {
  width: 40px;
  height: 40px;
  padding: 0;
  align-self: center;
  border-radius: 20px;
  background: transparent;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* One capsule for the links, like a toolbar group: the text links, the Add button
   and Sign in share it. Sign in is a solid accent capsule INSIDE the glass — a
   control drawn on glass is a fill, never a second sheet of glass. */
html[data-look="glass"] .nav-links {
  height: 56px;
  padding: 0 7px;
  gap: 2px;
  border-radius: 28px;
}
html[data-look="glass"] .nav-links a,
html[data-look="glass"] .nav-links button {
  height: 42px;
  padding: 0 14px;
  border-radius: 21px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}
html[data-look="glass"] .nav-links a:hover,
html[data-look="glass"] .nav-links button:hover { background: var(--lg-fill-subtle); color: var(--text-primary); }
/* The current page: the pill marks it, and the label is ink. The accent on this pill was
   4.0:1 over a plain page and 2.6:1 with the menu open over the page's orange button. */
html[data-look="glass"] .nav-links a.active { background: var(--lg-fill-subtle); color: var(--text-primary); }
html[data-look="glass"] .nav-links a::after { display: none; }
html[data-look="glass"] .nav-links a.nav-cta {
  width: 42px;
  padding: 0;
  justify-content: center;
  border: 0;
  background: transparent;
}
html[data-look="glass"] .nav-links a.nav-cta:hover { background: var(--lg-fill-subtle); color: var(--text-primary); }
html[data-look="glass"] #nav-auth { gap: 2px; }
html[data-look="glass"] #nav-auth > a:not(.nav-icon-btn) {
  height: 42px;
  padding: 0 18px;
  border-radius: 21px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
/* .nav-links in the selector: `.nav-links a` above (0,2,2) set 14px of padding each
   side, which squashed the 20px account icon to 14px in its 42px box. */
html[data-look="glass"] .nav-links .nav-icon-btn { width: 42px; padding: 0; justify-content: center; }

html[data-look="glass"] .nav-burger {
  width: 48px;
  height: 48px;
  margin-right: 0;
  border-radius: 24px;
}

/* The category strip: a second, lighter capsule under the bar, sized to its links. */
html[data-look="glass"] .nav-cats {
  border-top: 0;
  max-width: 1280px;
  margin: 8px auto 0;
  padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
}
/* The strip's links in the primary ink, not classic's secondary grey: at 44% the glass
   lets what scrolls under it through, and the grey fell to 2-3.9:1 over the rail's
   Go button, a dark card or a black button (measured on the rendered pixels). Ink holds
   5.3-10:1 over the same. */
html[data-look="glass"] .nav-cats-inner a { color: var(--text-primary); }
/* Classic's hover cue was grey to ink; they are ink at rest, and have no padding for a pill. */
html[data-look="glass"] .nav-cats-inner a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The placeholder in ink too: at 1024px and below the search has a row of its own, where the
   header's wash is thinner, and the secondary grey fell to 2.6:1 over the black
   add-retailer button. The magnifier and the wording keep it reading as a prompt. */
html[data-look="glass"] .nav-search-input::placeholder { color: var(--text-primary); }
/* The strip alone is a little denser: with the menu open it sits at the foot of a taller
   header, past the wash, and at 44% it read 4.48:1 over a dark band. */
html[data-look="glass"] .nav-cats-inner {
  --lg-fill: rgba(255, 255, 255, 0.5);
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  gap: 22px;
}

/* 1024px and below: the text links move behind the burger.
   In glass each link is a padded capsule item and the brand is a capsule, so the row
   needs about 130px more than classic's plain text. Signed in, with the Price Index
   link, the full row leaves the search a usable width only from about 1075px. Below
   that it ran off the screen from 761 to about 890px (every iPad in portrait: Sign In
   cut at the edge, the search a 28px stub), and squeezed the search to 64px at 901px.
   Classic collapses only at 640px, so the structural half of its stacked menu
   (style.css, max-width 640px) is repeated here for 641-1024.
   .nav's height must go back to auto (classic does this at 760px, and the 56px above
   out-specifies it). Otherwise the wrapped rows spill out of the bar: the search sat
   under the category strip and the open menu covered the page instead of pushing it
   down. */
@media (max-width: 1024px) {
  html[data-look="glass"] .nav {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    gap: 10px;
  }
  html[data-look="glass"] .nav-burger { display: flex; order: 2; margin-left: auto; }
  /* The search takes its own full row, as search.js makes it below 760px. Placed
     between the brand and the burger at 761-1024, it put the keyboard's tab order
     (brand, burger, search: the DOM order) out of step with the layout. */
  html[data-look="glass"] .nav-search { order: 3; flex-basis: 100%; max-width: none; }

  /* The opened menu is a glass panel of its own, with rows inside it. */
  html[data-look="glass"] .nav-links {
    order: 4;
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    height: auto;
    border-radius: 26px;
    padding: 6px;
    gap: 0;
    border-top: 0;
  }
  /* The header is sticky, so the whole of it must fit the screen or its lower rows can
     never be reached: on a landscape phone the open menu made it 484-594px tall in a
     375-430px viewport, and Sign In stayed below the fold at any scroll position. The
     menu scrolls inside itself instead. 210px is the rest of the header at its
     tallest (brand row, search row, category strip, gaps), 12px the cookie banner's
     inset from the bottom edge, and the banner covers the bottom while it is up; the
     floor keeps two rows visible regardless. */
  html[data-look="glass"] .nav.nav-open .nav-links {
    display: flex;
    max-height: max(108px, calc(100vh - 222px - var(--cookie-banner-height, 0px)));
    max-height: max(108px, calc(100dvh - 222px - var(--cookie-banner-height, 0px)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html[data-look="glass"] .nav-links > * { flex-shrink: 0; }
  html[data-look="glass"] .nav-links a,
  html[data-look="glass"] .nav-links button { height: 48px; width: 100%; padding: 0 16px; border-bottom: 0; }
  html[data-look="glass"] .nav-links > #nav-auth { border-bottom: 0; }
  html[data-look="glass"] #nav-auth { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  html[data-look="glass"] #nav-auth > a:not(.nav-icon-btn) { height: 48px; justify-content: center; }
  /* Add Product and Account are icon-only in the bar. In the menu they are icon and
     label rows like the rest, as classic does at 640px. Both selectors must beat this
     file's own bar rules (.nav-links a.nav-cta, and a::after { display: none }) and
     classic's ID rule for the account row, which otherwise keeps its 2px inset and
     bottom border. */
  html[data-look="glass"] .nav-links a.nav-cta,
  html[data-look="glass"] .nav-links #nav-auth .nav-icon-btn {
    width: 100%;
    padding: 0 16px;
    justify-content: flex-start;
    gap: 12px;
    border: 0;
    background: transparent;
  }
  /* Ink, not the accent: over content scrolling behind the glass menu, the accent label
     fell to 2:1 (the darker accent only reaches 2.9:1). The + glyph carries the accent. */
  html[data-look="glass"] .nav-links a.nav-cta { color: var(--text-primary); }
  html[data-look="glass"] .nav-links a.nav-cta svg { color: var(--accent-blue); }
  html[data-look="glass"] .nav-links a.nav-cta::after,
  html[data-look="glass"] .nav-links #nav-auth .nav-icon-btn::after {
    content: attr(aria-label);
    display: inline;
    font-size: 15px;
    font-weight: var(--weight-semibold);
  }
}
@media (max-width: 760px) {
  html[data-look="glass"] .nav-search { height: 50px; border-radius: 25px; }
  /* 16px: iOS Safari zooms the page into a focused field set smaller (glass sets 15px),
     and search.js's own 16px rule stops at this width too. 760, not 640: an iPhone SE or
     8 in landscape is 667px wide (#311 round 2). */
  html[data-look="glass"] .nav-search-input { font-size: 16px; }
}
/* Phones (Jay, 2026-09-29: make the search "just an icon", and give the bar "a more
   opaque back, more blurred / frosted"). Two changes at 640px and below.
   1. The header is ONE frosted sheet. The wash behind the capsules becomes an 80%
      layer with a strong blur, so what scrolls under the bar reads as frost. Before,
      price rows and Go buttons showed through the 44% capsules like a second page. The
      capsules are then fills ON that sheet, with no blur of their own: glass on glass
      would muddy both.
   2. The search is a round button at the end of the top row, after the burger (the
      DOM order, so Tab follows the layout), until it is used. Its field stays in the page (1px wide, transparent), so
      Tab and screen readers still reach it; focusing it, by the magnifier (search.js
      focuses the field on a tap, inside the gesture, so the keyboard opens), the tab
      bar's Search or Tab, opens the field on its own row, and it closes again when it
      is left empty. */
@media (max-width: 640px) {
  html[data-look="glass"] .site-header::before {
    background: rgba(247, 245, 242, 0.82);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  }
  html[data-look="glass"] .nav-brand,
  html[data-look="glass"] .nav-search,
  html[data-look="glass"] .nav-burger,
  html[data-look="glass"] .nav-links,
  html[data-look="glass"] .nav-cats-inner {
    --lg-fill: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Closed: the search is a round button after the burger. Open (the field focused,
     holding a query, or `is-closing`, which search.js keeps until a press that took focus
     away has ended), it takes its own row through the 1024px rule. Keyed on the FIELD's
     focus, not :focus-within: the magnifier takes focus on touch-down, and opening on that
     moved it before touch-up, so the tap was lost. */
  html[data-look="glass"] .nav-search:not(.is-closing):not(:has(.nav-search-input:focus)):not(:has(.nav-search-input:not(:placeholder-shown))) {
    order: 3;
    flex: 0 0 50px;
    width: 50px;
    padding: 0;
    justify-content: center;
  }
  html[data-look="glass"] .nav-search:not(.is-closing):not(:has(.nav-search-input:focus)):not(:has(.nav-search-input:not(:placeholder-shown))) .nav-search-input {
    flex: 0 0 1px;
    width: 1px;
    padding: 0;
    opacity: 0;
  }
  /* The closed button's whole 50px takes the tap, not only the 40px magnifier. */
  html[data-look="glass"] .nav-search:not(.is-closing):not(:has(.nav-search-input:focus)):not(:has(.nav-search-input:not(:placeholder-shown))) .nav-search-go {
    width: 50px;
    height: 50px;
    border-radius: 25px;
  }
  /* A 20px magnifier, level with the burger's bars; search.js draws it at 17px. */
  html[data-look="glass"] .nav-search-go svg { width: 20px; height: 20px; }
}
/* 380px and below: the wordmark, the burger and the search button share one row, so the
   wordmark is a little smaller (at 320px the three did not fit and the burger wrapped). */
@media (max-width: 380px) {
  html[data-look="glass"] .nav { gap: 8px; }
  html[data-look="glass"] .nav-brand { padding: 0 16px; font-size: 19px; }
}
/* 340px and below (a folding phone's cover screen, Safari at 125% zoom): smaller again, so
   the three still share a row down to 300px. */
@media (max-width: 340px) {
  html[data-look="glass"] .nav-brand { padding: 0 13px; font-size: 16px; }
}
/* 1025-1279px: the full row, tightened, so the search keeps about 250px signed in. */
@media (min-width: 1025px) and (max-width: 1279px) {
  html[data-look="glass"] .nav { gap: 8px; }
  html[data-look="glass"] .nav-brand { padding: 0 18px; font-size: 20px; }
  html[data-look="glass"] .nav-links a,
  html[data-look="glass"] .nav-links button { padding: 0 10px; }
}

/* ---------- shared controls, in glass ----------
   Capsules and title case. The markup already carries title-case labels; the classic
   stylesheet uppercases them, which Liquid Glass drops. */
html[data-look="glass"] .btn-primary,
html[data-look="glass"] .btn-outlined {
  border-radius: 999px;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 15px;
}
html[data-look="glass"] .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 16px rgba(198, 74, 22, 0.22); }
html[data-look="glass"] .btn-outlined { border: 0; background: var(--lg-fill-subtle); }
/* Destructive: a capsule with a red tint, title case, like the other fills. Classic's
   is a square, red-bordered, uppercase box. */
html[data-look="glass"] .btn-destructive {
  border: 0;
  border-radius: 999px;
  background: rgba(178, 49, 32, 0.1);
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  min-height: 44px;
}
html[data-look="glass"] .btn-destructive:hover:not(:disabled) { background: var(--danger-red); color: #FFFFFF; }
html[data-look="glass"] .btn-outlined:hover:not(:disabled) { background: rgba(20, 18, 15, 0.12); color: var(--text-primary); }
html[data-look="glass"] .input {
  border: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(20, 18, 15, 0.12);
}
/* Classic shows focus by darkening the field's border, and glass has no border, so
   the hairline thickens to an ink edge instead (WCAG 2.4.7, Focus Visible). */
html[data-look="glass"] .input:focus { box-shadow: inset 0 0 0 2px var(--ink); }

/* ==========================================================================
   The product page (group.html, and every /p/ page rendered from it)
   ========================================================================== */


html[data-look="glass"] .breadcrumb {
  background: transparent;
  border-bottom: 0;
  font-size: 13.5px;
  padding-top: 18px;
  padding-bottom: 0;
}
/* 1232 = the content's 1280px minus its 24px side padding. At 1280 the breadcrumb's
   own 24px side padding hid the difference; wider, the crumbs sat 24px left of every
   capsule and card on the page (80px against 104px at 1440). */
html[data-look="glass"] .breadcrumb-inner { max-width: 1232px; }
/* "Price summary" and "Related guides", which seo-prerender adds to every /p/ page,
   are 1180px columns (the summary's in an inline style, hence !important): they sat
   50px right of every other block at 1440px. The page's own 1280px grid instead. */
html[data-look="glass"] .seo-blurb,
html[data-look="glass"] .seo-related { max-width: 1280px !important; }

html[data-look="glass"] .product-head-image {
  border: 0;
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
}

/* Facts: a grouped section instead of a ruled row. */
html[data-look="glass"] .product-facts {
  margin-top: 20px;
  padding: 18px 24px;
  gap: 18px 34px;
  border-bottom: 0;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .product-facts dt {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
}
html[data-look="glass"] .product-facts dd { font-size: 20px; margin-top: 4px; }
/* On a phone the 34px between facts is what pushes the third one onto a second line: at 375px
   the three GRX facts are 248px wide (84 + 84 + 80: the 20px prices set two of them, the
   "Highest price" label the third) against 279px of card. At 10px they fit with 11px to spare;
   the space you see between two prices is about 12px. */
@media (max-width: 620px) {
  html[data-look="glass"] .product-facts { column-gap: 10px; }
}

html[data-look="glass"] .section-rule { border-bottom: 0; padding-bottom: 12px; }
html[data-look="glass"] .section-rule-note { font-size: 13.5px; }

/* The retailer table becomes a rounded grouped list: inner padding, taller rows,
   hairline separators, title-case headers, capsule actions. */
html[data-look="glass"] .product-section .table-scroll {
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .product-section .data-table th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding-top: 14px;
  padding-bottom: 10px;
}
html[data-look="glass"] .product-section .data-table td { padding-top: 16px; padding-bottom: 16px; vertical-align: middle; }
html[data-look="glass"] .product-section .data-table th:first-child,
html[data-look="glass"] .product-section .data-table td:first-child { padding-left: 22px; }
html[data-look="glass"] .product-section .data-table th:last-child,
html[data-look="glass"] .product-section .data-table td:last-child { padding-right: 22px; }
html[data-look="glass"] .product-section .data-table thead tr { border-bottom: 1px solid var(--lg-hairline); }
html[data-look="glass"] .product-section .data-table tbody tr { border-bottom: 1px solid var(--lg-hairline); }
html[data-look="glass"] .product-section .data-table tbody tr:last-child { border-bottom: 0; }
html[data-look="glass"] .retailer-row--best { background: rgba(30, 122, 70, 0.04); }
html[data-look="glass"] .retailer-logo { border: 0; border-radius: 7px; box-shadow: var(--lg-ring); }
html[data-look="glass"] .retailer-tag {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
}
html[data-look="glass"] .btn-go {
  border: 0;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  padding: 9px 16px;
  background: var(--lg-fill-subtle);
}
html[data-look="glass"] .btn-go:hover { background: var(--ink); color: var(--ink-on); }
html[data-look="glass"] .btn-go--best { background: var(--accent-blue); color: var(--accent-on); }

/* Phones stack each retailer row into a grid (style.css, max-width 700px) whose cells
   carry no padding. The desktop inset above targets td:first-child and out-specifies
   that, so only the retailer cell got indented and the price sat on the card's edge.
   Inside the card, the ROW carries the inset instead. */
@media (max-width: 700px) {
  html[data-look="glass"] .product-section .retailer-table tr { padding: 16px 20px; }
  html[data-look="glass"] .product-section .retailer-table td,
  html[data-look="glass"] .product-section .retailer-table td:first-child,
  html[data-look="glass"] .product-section .retailer-table td:last-child { padding: 0; }
}

/* Price history: a segmented control, and the chart in its own section. */
html[data-look="glass"] .range-toggle {
  padding: 3px;
  gap: 0;
  border-radius: 999px;
  background: var(--lg-fill-subtle);
}
html[data-look="glass"] .range-toggle button {
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  background: transparent;
}
html[data-look="glass"] .range-toggle button[aria-pressed="true"] {
  background: #FFFFFF;
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(20, 18, 15, 0.14);
}
html[data-look="glass"] #history-chart {
  margin-top: 4px;
  padding: 22px 22px 16px;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--lg-ring);
}
/* The ID beats .product-facts above: classic's #history-facts { padding: 16px 0 0 }
   left "Lowest £114.99" flush against the white card's edge. */
html[data-look="glass"] #history-facts { border-top: 0; padding: 18px 24px; margin-top: 16px; }

html[data-look="glass"] .specs-panel-inner {
  border: 0;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
  padding: 18px 24px;
}
html[data-look="glass"] .specs-panel-header,
html[data-look="glass"] .specs-grid dt { text-transform: none; letter-spacing: 0; font-size: 13px; }
html[data-look="glass"] .specs-panel-header { font-weight: 600; color: var(--text-primary); }
html[data-look="glass"] .report-btn {
  border: 0;
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--lg-fill-subtle);
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

html[data-look="glass"] .product-section .add-input-group {
  border: 0;
  border-radius: 999px;
  padding: 5px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .product-section .add-input-group .input { box-shadow: none; background: transparent; }
html[data-look="glass"] .product-section .add-input-group:focus-within { box-shadow: var(--lg-ring), 0 0 0 2px var(--accent-blue); }
html[data-look="glass"] .product-section .add-input-group .btn { border-radius: 999px; }
/* Phones: classic stacks the field over the button at 480px. Inside a capsule that
   squashed the button to a 20px strip along the bottom curve. Stacked, the group is a
   rounded card and each row is a 48px control, concentric (22 - 6 = 16). */
@media (max-width: 480px) {
  html[data-look="glass"] .product-section .add-input-group { border-radius: 22px; padding: 6px; gap: 6px; }
  /* flex: 0 0 auto on the field, or classic's `flex: 1` (a 0% basis) overrides the height
     in a column and it collapses to its 18px line. 16px keeps iPhone Safari from zooming
     in when it is tapped. */
  html[data-look="glass"] .product-section .add-input-group .input { flex: 0 0 auto; height: 48px; padding: 0 14px; font-size: 16px; }
  html[data-look="glass"] .product-section .add-input-group .btn { height: 48px; border-radius: 16px; font-size: 15px; }
}

/* ---------- the decision rail: a glass inspector ----------
   The one floating panel on the page. Its two blocks were separately bordered boxes;
   inside one sheet of glass they become sections split by a hairline. */
html[data-look="glass"] .product-rail {
  border-radius: 34px;
  padding: 22px;
}
html[data-look="glass"] .rail-price { border: 0; padding: 0; }
html[data-look="glass"] .rail-price-tag {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
}
/* 52px unless the price is too long for its column. --price-chars is the price's length,
   set by group.js: 180cqi / 10 characters is 18% of the column per character's worth, which
   fits "£11,999.00" with room to spare in Libre Franklin 800, while "£27.74" (6) stays at
   52px everywhere. Sizing by the column alone shrank every price to fix two products
   (review round 2, #319: 306 of 308 groups lost 6px of headline). Without the variable
   (an older group.js), 6 characters: the full size, as before. */
html[data-look="glass"] .rail-price-amount { font-size: 52px; font-size: min(52px, calc(180cqi / var(--price-chars, 6))); }
/* 44px, both of them: the touch-target size, and a standard control height. At 16px
   padding they were 50 and 48px, which read as oversized in a 300px rail. */
html[data-look="glass"] .rail-price .btn-primary { padding-top: 13px; padding-bottom: 13px; }
/* "Go to specializedconceptstore.co.uk" wraps; the label stays centred, not flush left. */
html[data-look="glass"] .rail-price .btn-primary { text-align: center; }
html[data-look="glass"] .rail-price .track-toggle {
  border: 0;
  border-radius: 999px;
  background: var(--lg-fill-subtle);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  padding: 13px 24px;
}
html[data-look="glass"] .rail-price .track-toggle:hover { background: rgba(20, 18, 15, 0.12); color: var(--text-primary); }
html[data-look="glass"] .rail-price .track-toggle[aria-pressed="true"] { background: var(--ink); color: var(--ink-on); }

/* The rail's sections under the price: the alert form and, on groups that split by size,
   the other sizes (group.js). One sheet of glass split by a rule, not boxes: classic's
   Other sizes was a three-sided square box with an 11px capitals title at 3.5:1. */
html[data-look="glass"] .rail-alerts,
html[data-look="glass"] .rail-sizes {
  border: 0;
  background: transparent;
  padding: 18px 0 0;
  margin-top: 18px;
  border-top: 1px solid var(--lg-rule);
}
html[data-look="glass"] .rail-alerts-title { font-size: 17px; }
/* The tablet card (style.css, 641-1020px): the two sections sit side by side, so the
   hairline between them turns from horizontal to vertical. */
@media (min-width: 641px) and (max-width: 1020px) {
  html[data-look="glass"] .product-rail .rail-price { padding-right: 22px; }
  html[data-look="glass"] .product-rail .rail-alerts {
    border-top: 0;
    border-left: 1px solid var(--lg-rule);
    margin-top: 0;
    padding: 0 0 0 22px;
  }
}
html[data-look="glass"] .rail-sizes-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
html[data-look="glass"] .rail-sizes a { border-bottom-color: var(--lg-hairline); }
html[data-look="glass"] .rail-sizes a:hover { color: var(--accent-blue-hover); }
/* Fields on glass: a lighter fill with a hairline, radius concentric with the rail
   (34 outer - 22 inset = 12). */
html[data-look="glass"] .rail-alert-input {
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 0 0 1px rgba(20, 18, 15, 0.1);
}
/* The field is a wrapper (prefix + input), so focus is read from inside it. */
html[data-look="glass"] .rail-alert-input:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
html[data-look="glass"] .rail-alert-input--pct { border-radius: 10px; }
html[data-look="glass"] .rail-alerts .btn-primary { border-radius: 999px; }

/* ==========================================================================
   The home page (index.html; its sections are rendered by js/explore.js)
   ========================================================================== */


html[data-look="glass"] .home-hero { background: transparent; border-bottom: 0; }
/* The "All price drops" and "All guides" links: the accent is 4.4:1 on the ground
   (4.8:1 on classic's white), below AA for 13px text; the darker accent is 6.5:1. */
html[data-look="glass"] .section-rule-more { color: var(--accent-blue-hover); }

/* The hero search is the page's primary control, so it is the one glass element in
   the content area: a capsule with the Compare button as a solid capsule inside it,
   concentric (36 outer - 8 inset = 28). search.js injects its own <style>; these
   out-specify it. */
html[data-look="glass"] .product-search {
  max-width: 680px;
  height: 72px;
  border: 0;
  border-radius: 36px;
  padding: 8px 8px 8px 0;
  box-sizing: border-box;
  /* STRETCH, not center, and the text inset lives on the INPUT. With the padding on
     the capsule and the input centred, the input shrank to its 21px line box: only a
     strip through the middle of a 72px capsule took a click, the top, bottom and left
     edges focused nothing, and search.js — which positions its results dropdown from
     the input's box — opened the list 18px inside the capsule and narrower than it. */
  align-items: stretch;
}
/* margin -8px 0: the input also covers the capsule's top and bottom 8px, so a click
   there focuses the field, and search.js's panel (placed 8px below the input) opens
   8px below the capsule instead of on top of the focus ring. */
html[data-look="glass"] .product-search-input { padding: 0 16px 0 24px; margin: -8px 0; font-size: 18px; }
/* A solid accent ring: 4.4:1 on the page ground (WCAG 1.4.11 asks 3:1). The first
   version, 45% accent, was 1.9:1. */
html[data-look="glass"] .product-search:focus-within { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
html[data-look="glass"] .product-search-go {
  height: 56px;
  border-radius: 28px;
  padding: 0 28px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 16px rgba(198, 74, 22, 0.22);
}

/* Popular searches: chips, not underlined links. */
html[data-look="glass"] .home-hero-popular { gap: 6px; }
html[data-look="glass"] .home-hero-popular a {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lg-fill-subtle);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
}
html[data-look="glass"] .home-hero-popular a:hover { background: rgba(20, 18, 15, 0.12); }

/* The stats rail: one grouped section with hairlines between its rows. */
html[data-look="glass"] .home-stats {
  border-top: 0;
  padding: 6px 22px;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .home-stats > div { border-bottom: 1px solid var(--lg-hairline); padding: 14px 0; }
html[data-look="glass"] .home-stats > div:last-child { border-bottom: 0; }

/* Biggest drops: the same rounded grouped list as the product page's retailer table. */
html[data-look="glass"] .home-section .table-scroll {
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .home-section .data-table th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding-top: 14px;
  padding-bottom: 10px;
}
html[data-look="glass"] .home-section .data-table td { padding-top: 14px; padding-bottom: 14px; vertical-align: middle; }
html[data-look="glass"] .home-section .data-table th:first-child,
html[data-look="glass"] .home-section .data-table td:first-child { padding-left: 22px; }
html[data-look="glass"] .home-section .data-table th:last-child,
html[data-look="glass"] .home-section .data-table td:last-child { padding-right: 22px; }
html[data-look="glass"] .home-section .data-table thead tr,
html[data-look="glass"] .home-section .data-table tbody tr { border-bottom: 1px solid var(--lg-hairline); }
html[data-look="glass"] .home-section .data-table tbody tr:last-child { border-bottom: 0; }
/* Phones stack each drop into a grid whose cells have no padding; as on the product
   page, the ROW carries the inset or the first cell's desktop inset wins alone. */
@media (max-width: 700px) {
  html[data-look="glass"] .home-section #drops-table tr { padding: 14px 20px; }
  html[data-look="glass"] .home-section #drops-table td,
  html[data-look="glass"] .home-section #drops-table td:first-child,
  html[data-look="glass"] .home-section #drops-table td:last-child { padding: 0; }
}

/* Scoped to .home-section: the dashboard's tracking table uses .cell-thumb and
   .btn-track too, and has rules of its own below. */
html[data-look="glass"] .home-section .cell-thumb { border: 0; border-radius: 12px; box-shadow: var(--lg-ring); }
html[data-look="glass"] .home-section .drop-pill { border-radius: 999px; padding: 3px 9px; font-size: 13px; }
html[data-look="glass"] .home-section .btn-track {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  background: var(--lg-fill-subtle);
}
html[data-look="glass"] .home-section .btn-track:hover { background: var(--ink); color: var(--ink-on); }
html[data-look="glass"] .home-section .btn-track[disabled]:hover { background: var(--lg-fill-subtle); color: var(--text-primary); }

/* Most compared, and the latest guides (explore.js renders both as .compare-cell):
   separate cards on the ground instead of a grid ruled like a table. */
html[data-look="glass"] .compare-grid { gap: 20px; margin-top: 4px; }
html[data-look="glass"] .compare-cell {
  padding: 20px;
  border: 0;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
  transition: box-shadow var(--duration-normal) var(--ease-default);
}
html[data-look="glass"] .compare-cell:hover { box-shadow: var(--lg-ring), 0 10px 26px rgba(20, 18, 15, 0.08); }
html[data-look="glass"] .compare-cat { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
/* Concentric: the image is inset 8px from the card's edge (20px padding - 12px), so
   its corners are 24 - 8 = 16px. */
html[data-look="glass"] .compare-img { border: 0; border-radius: 16px; margin: -12px -12px 14px; }

/* Browse the catalogue: each column a grouped section. */
html[data-look="glass"] .catalogue-columns { gap: 20px; }
html[data-look="glass"] .catalogue-columns > div {
  padding: 18px 20px 8px;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .catalogue-heading {
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  color: var(--text-primary);
  border-bottom: 0;
  padding-bottom: 4px;
}
html[data-look="glass"] .catalogue-columns a { border-bottom: 1px solid var(--lg-hairline); padding: 11px 0; }
html[data-look="glass"] .catalogue-columns a:last-child { border-bottom: 0; }

/* The target-price band: a dark card, so the one sign-up on the page stands apart.
   Its field and button are fills on the card, not glass (nothing floats here). */
html[data-look="glass"] .target-band {
  background: var(--ink);
  color: var(--ink-on);
  border: 0;
  border-radius: 30px;
  padding: 36px;
}
html[data-look="glass"] .target-band-title { color: var(--ink-on); }
html[data-look="glass"] .target-band-copy { color: #C9C2B8; }
html[data-look="glass"] .target-band-form {
  border: 0;
  border-radius: 999px;
  padding: 6px;
  /* 8%, not 10%: the accent button inside must stand 3:1 off this fill (WCAG 1.4.11).
     At 10% it is 3.01:1, on the line; at 8% it is 3.2:1. */
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
html[data-look="glass"] .target-band-form input { color: var(--ink-on); padding: 12px 16px; }
html[data-look="glass"] .target-band-form input::placeholder { color: #A39C93; }
html[data-look="glass"] .target-band-form button {
  border-radius: 999px;
  background: var(--accent-blue);
  color: var(--accent-on);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  padding: 0 24px;
}
html[data-look="glass"] .target-band-form button:hover { background: var(--accent-blue-hover); }
/* Classic drew an ink frame round the field at all times, which doubled as its focus
   state; the glass field has none, so focus gets a ring of its own. */
html[data-look="glass"] .target-band-form:focus-within { outline: 3px solid rgba(240, 138, 90, 0.7); outline-offset: 2px; }
/* Chrome paints autofilled fields light blue, which on this card hid the typed address. */
html[data-look="glass"] .target-band-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink-on);
  -webkit-box-shadow: 0 0 0 100px #272522 inset;   /* the field's 8% fill over ink */
  caret-color: var(--ink-on);
  border-radius: 999px;
}
/* Phones: classic drops the band's padding to 22px at 620px, and 36px here overrode
   it — at 320px the email field was left 0px for text, and it is `required`, so tapping
   Create account raised a validation bubble on a field you could not see. The field
   and the button stack, each full width. */
@media (max-width: 620px) {
  html[data-look="glass"] .target-band { padding: 22px; border-radius: 26px; }
  html[data-look="glass"] .target-band-form { flex-wrap: wrap; gap: 6px; border-radius: 22px; }
  html[data-look="glass"] .target-band-form input { flex: 1 1 100%; }
  html[data-look="glass"] .target-band-form button { flex: 1 1 100%; height: 48px; border-radius: 16px; }
  /* Classic's 16px, and a narrower Compare, so the placeholder shows as much as it
     does in classic (at 18px and 28px padding it read "Search for a bike, p"). */
  html[data-look="glass"] .product-search-input { font-size: 16px; }
  html[data-look="glass"] .product-search-go { padding: 0 20px; }
}

/* The category and brand links seo-prerender writes at the foot of the page. Its own
   inline <style> uses a (0,2,1) selector for the chips; this out-specifies it. */
html[data-look="glass"] .hub-links { border-top: 0; }
html[data-look="glass"] .hub-links ul a.hub-chip {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
  font-weight: 600;
}
html[data-look="glass"] .hub-links ul a.hub-chip:hover { box-shadow: 0 0 0 1px var(--ink); }

/* Forced colours drop the shadows these surfaces are edged with (the foundation's
   block, further down, covers the header, the shared controls and the product page). */
@media (forced-colors: active) {
  html[data-look="glass"] .product-search,
  html[data-look="glass"] .home-stats,
  html[data-look="glass"] .home-section .table-scroll,
  html[data-look="glass"] .compare-cell,
  html[data-look="glass"] .catalogue-columns > div,
  html[data-look="glass"] .home-hero-popular a,
  html[data-look="glass"] .hub-links ul a.hub-chip,
  html[data-look="glass"] .target-band,
  html[data-look="glass"] .target-band-form,
  html[data-look="glass"] .home-section .btn-track { border: 1px solid CanvasText; }
}

/* ==========================================================================
   The collection pages: collection.html renders /deals, every /c/ category hub,
   every /b/ brand hub and /price-index. Their own rules are an inline <style> that
   loads after this file; the html[data-look] prefix out-specifies each of them.
   ========================================================================== */
/* The tertiary grey is 3.4:1 on the ground; the secondary is 6.5:1 (WCAG 1.4.3). */
html[data-look="glass"] .coll-crumbs,
html[data-look="glass"] .coll-crumbs a.coll-crumb,
html[data-look="glass"] .coll-stamp { color: var(--text-secondary); }
html[data-look="glass"] .coll-crumbs { font-size: 13.5px; }

/* /deals: the ruled grid becomes separate cards on the ground. */
html[data-look="glass"] .coll-grid { gap: 20px; border-top: 0; margin-top: 24px; }
html[data-look="glass"] .coll-grid a.coll-card {
  padding: 20px;
  border: 0;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
  transition: box-shadow var(--duration-normal) var(--ease-default);
}
html[data-look="glass"] .coll-grid a.coll-card:hover { box-shadow: var(--lg-ring), 0 10px 26px rgba(20, 18, 15, 0.08); }
/* Concentric: the photo is inset 8px from the card's edge (20px padding - 12px), so
   its corners are 24 - 8 = 16px. */
html[data-look="glass"] .coll-figure { margin: -12px -12px 14px; }
html[data-look="glass"] .coll-thumb { border: 0; border-radius: 16px; }
html[data-look="glass"] .coll-figure .coll-drop { border-radius: 999px; padding: 4px 10px; }
html[data-look="glass"] .coll-cat { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-secondary); }

/* Category and brand hubs: the sibling links and the table are each a card. */
html[data-look="glass"] .coll-layout { gap: 28px; }
html[data-look="glass"] .coll-side {
  border-top: 0;
  padding: 16px 20px 6px;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .coll-side-title { text-transform: none; letter-spacing: 0; font-size: 15px; margin-bottom: 4px; }
html[data-look="glass"] .coll-side a.coll-side-link { padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--lg-hairline); }
html[data-look="glass"] .coll-side a.coll-side-link:last-child { border-bottom: 0; }

html[data-look="glass"] .coll-table-scroll {
  /* relative: absolutely positioned things in the table (the screen-reader labels, and
     the visually hidden column headers on phones) are held by the scroller, not placed
     against the page. The table no longer outgrows its box; this keeps them in if it does. */
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .coll-table { border-top: 0; }
html[data-look="glass"] .coll-table th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding-top: 14px;
  padding-bottom: 10px;
}
html[data-look="glass"] .coll-table thead tr,
html[data-look="glass"] .coll-table tbody tr { border-bottom: 1px solid var(--lg-hairline); }
html[data-look="glass"] .coll-table tbody tr:last-child { border-bottom: 0; }
html[data-look="glass"] .coll-table th:first-child,
html[data-look="glass"] .coll-table td:first-child { padding-left: 22px; }
html[data-look="glass"] .coll-table th:last-child,
html[data-look="glass"] .coll-table td:last-child { padding-right: 22px; }
html[data-look="glass"] .coll-row-thumb { border: 0; border-radius: 12px; box-shadow: var(--lg-ring); }
/* The favicon fallback: the template's padding is 22%, which resolves against the
   CELL's width, so the 46px thumb grew to a 160-190px blank box with a 0px content box
   and the favicon never showed. A fixed inset keeps it a 46px thumb. */
html[data-look="glass"] .coll-row-thumb.is-favicon { width: 46px; height: 46px; padding: 9px; box-sizing: border-box; }
/* "cheapest at merlincycles.com" was nowrap, the widest cell in the row: at 701-760
   and 950px it pushed the table past its card and cut Compare off. A retailer domain is
   one long word ("specializedconceptstore.co.uk"), so it may break anywhere, as a URL
   does, rather than set the column's width: in a one-retailer row it is the cell's own
   text, elsewhere the "cheapest at" line under it. */
html[data-look="glass"] .coll-row-where { white-space: normal; overflow-wrap: anywhere; }
/* But not so narrow that the table squeezes this column and ordinary domains split
   ("condorcycles.co / m"): 10.75em (129px at 12px) holds the widest of them,
   winstanleysbikes.co.uk (127px). specializedconceptstore.co.uk (168px) still breaks. */
html[data-look="glass"] .coll-row-sub { overflow-wrap: anywhere; min-width: 10.75em; }
/* Stock is the column a phone cannot lose; the tertiary grey was 3.7:1 on the card. */
html[data-look="glass"] .coll-oos { color: var(--text-secondary); }
/* A hub with no sibling links (a brand with no related pages, /b/apple) has no aside,
   so the table fell into the 238px sidebar track and showed no price at all. */
html[data-look="glass"] .coll-layout > .coll-main:only-child { grid-column: 1 / -1; }
html[data-look="glass"] .coll-table a.coll-row-cta {
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
}
/* Beside the sidebar, 961-1100px leaves the table about 660px; a narrower sidebar gives
   it 30px more, so long names and domains wrap onto fewer lines. */
@media (min-width: 961px) and (max-width: 1100px) {
  html[data-look="glass"] .coll-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
}
/* Phones hide columns 2 and 5 and zero the new last cell's right padding (the
   template's own mirror rule), which would put the prices on the card's edge. */
@media (max-width: 700px) {
  html[data-look="glass"] .coll-table th:first-child,
  html[data-look="glass"] .coll-table td:first-child { padding-left: 16px; }
  html[data-look="glass"] .coll-table th:nth-child(4),
  html[data-look="glass"] .coll-table td:nth-child(4) { padding-right: 16px; }
  html[data-look="glass"] .coll-row-thumb.is-favicon { width: 36px; height: 36px; padding: 7px; }
}
/* Small phones: each row stacks, product on top, stock and price underneath, the
   shape the tracking table takes on phones. As a table, a long name beside a
   five-figure price was wider than the 272-372px card and clipped the price
   ("£11,999.0") on 16 of 42 hubs at 320px, and the page gutter cannot give way
   without leaving the header's edge. Stacked, a row fits any width. The column
   headers go (each row states its own stock and price), as on the tracking table. */
@media (max-width: 420px) {
  html[data-look="glass"] .coll-table,
  html[data-look="glass"] .coll-table tbody { display: block; }
  html[data-look="glass"] .coll-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html[data-look="glass"] .coll-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "product product"
      "stock   price";
    align-items: center;
    gap: 6px 12px;
    padding: 12px 16px;
  }
  html[data-look="glass"] .coll-table td,
  html[data-look="glass"] .coll-table td:first-child,
  html[data-look="glass"] .coll-table td:nth-child(4) { padding: 0; }
  html[data-look="glass"] .coll-table td:nth-child(1) { grid-area: product; }
  html[data-look="glass"] .coll-table td:nth-child(3) { grid-area: stock; }
  html[data-look="glass"] .coll-table td:nth-child(4) { grid-area: price; text-align: right; }
  html[data-look="glass"] .coll-table a.coll-row-product { gap: 10px; }
}
/* 960px and below the sibling links wrap into a row of chips above the table. The
   template does this at 900px; from 901 to 960 its sidebar left the table too little
   room for /c/complete-bikes and /b/specialized (27px short at 901), so glass stacks
   60px sooner and repeats the template's structural rules for that band. */
@media (max-width: 960px) {
  html[data-look="glass"] .coll-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  html[data-look="glass"] .coll-side {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }
  html[data-look="glass"] .coll-side-title { width: 100%; margin-bottom: 0; }
  html[data-look="glass"] .coll-side a.coll-side-link,
  html[data-look="glass"] .coll-side a.coll-side-link:last-child {
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    background: #FFFFFF;
    box-shadow: var(--lg-ring);
    font-size: 13px;
    font-weight: 600;
  }
}

/* /price-index: already built of rounded panels. Glass puts them on the ground as
   white cards, groups the ranking into one list, and drops the capitals. */
/* One left edge with the header: the page is a centred 1080px column (16px sides on
   phones), so its heading sat 100px right of the header at 1280px and up and 8px left
   of it at 720px and below. It takes the header's grid; its blocks keep their measure. */
html[data-look="glass"] .pi {
  max-width: 1280px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
html[data-look="glass"] .pi > * { max-width: 1032px; }
/* ...except the lede's own 64ch, which that rule (0,2,1) outranks. */
html[data-look="glass"] .pi > .pi-lede { max-width: 64ch; }
html[data-look="glass"] .pi-hero { border-bottom: 0; }
html[data-look="glass"] .pi-kicker { text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 14px; font-weight: 700; }
html[data-look="glass"] .pi-stats,
html[data-look="glass"] .pi-method,
html[data-look="glass"] .pi-note {
  border: 0;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .pi-verdict { border-radius: 24px; }
html[data-look="glass"] .pi-stats dt,
html[data-look="glass"] .pi-head,
html[data-look="glass"] .pi-method h3 { text-transform: none; letter-spacing: 0; font-size: 13px; }
/* 18px (the row's) + 6px (the list's padding) + 1px (the row's border), so the labels
   sit over the columns they name, as they do in classic. */
html[data-look="glass"] .pi-head { border-bottom: 0; padding-left: 25px; padding-right: 25px; }
/* One grouped list: rows inside a card, concentric (24 - 6 = 18). */
html[data-look="glass"] .pi-list {
  gap: 0;
  padding: 6px;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .pi-row { background: transparent; border-radius: 18px; }
html[data-look="glass"] .pi-row:hover { background: var(--lg-fill-subtle); }
/* The olive outline marks the cheapest shop; hovering it must not take it away. */
html[data-look="glass"] .pi-row:not(.pi-row--best):hover { border-color: transparent; }

@media (forced-colors: active) {
  html[data-look="glass"] .coll-grid a.coll-card,
  html[data-look="glass"] .coll-side,
  html[data-look="glass"] .coll-table-scroll,
  html[data-look="glass"] .coll-table a.coll-row-cta,
  html[data-look="glass"] .pi-stats,
  html[data-look="glass"] .pi-method,
  html[data-look="glass"] .pi-note,
  html[data-look="glass"] .pi-list { border: 1px solid CanvasText; }
}
@media (forced-colors: active) and (max-width: 960px) {
  html[data-look="glass"] .coll-side { border: 0; }
  html[data-look="glass"] .coll-side a.coll-side-link,
  html[data-look="glass"] .coll-side a.coll-side-link:last-child { border: 1px solid CanvasText; }
}

/* ==========================================================================
   Every page: the ground, title case, the footer and the cookie banner
   ========================================================================== */

/* All of the glass site sits on the warm ground, so its white sections read as cards. */
html[data-look="glass"] body { background: var(--lg-ground); }
/* Links on that ground: the accent is 4.4:1 there (4.8:1 on classic's white), below AA
   for text under 18.66px bold, which is every guide title, prose link and legal link.
   The darker accent is 6.5:1 on the ground and 7:1 on white cards. */
html[data-look="glass"] {
  --link-blue: var(--accent-blue-hover);
  --link-prose: var(--accent-blue-hover);
  --link-prose-hover: var(--ink);
}
/* Not the filled buttons among them (the guides' Buy button is an a inside .legal), nor
   the guides' breadcrumb. The rule outranks the pages' own :hover rules, so it sets the
   hover colour too. */
html[data-look="glass"] .legal a:not(.guide-card-buy):not(.btn):not(.guide-crumbs a),
html[data-look="glass"] .pricing-eyebrow { color: var(--accent-blue-hover); }
html[data-look="glass"] .legal a:not(.guide-card-buy):not(.btn):not(.guide-crumbs a):hover { color: var(--link-prose-hover); }
/* The breadcrumb stays grey, as on the hubs: the tertiary grey is 3.4:1 on the ground,
   the secondary 6.5:1. */
html[data-look="glass"] .guide-crumbs a { color: var(--text-secondary); }
html[data-look="glass"] .guide-crumbs a:hover { color: var(--accent-blue-hover); }
/* The same for the grey labels these pages move from white onto the ground. */
html[data-look="glass"] .account-section-label,
html[data-look="glass"] .legal-updated,
html[data-look="glass"] .pricing-reassure,
html[data-look="glass"] .guide-chart figcaption { color: var(--text-secondary); }

/* Title case everywhere: a net under the per-component rules above, so a label
   this file has not reached yet drops its capitals too. (0,1,2) beats the
   single-class rules the pages' inline <style> blocks use. */
html[data-look="glass"] body * { text-transform: none; }
/* The letter-spacing those labels carried for capitals is too loose in mixed case. */
html[data-look="glass"] .site-footer-heading,
html[data-look="glass"] .auth-tab,
html[data-look="glass"] .section-title,
html[data-look="glass"] .overline,
html[data-look="glass"] .pricing-eyebrow,
html[data-look="glass"] .plan-name,
html[data-look="glass"] .plan-badge,
html[data-look="glass"] .bill-save,
html[data-look="glass"] .plan-features-label,
html[data-look="glass"] .account-section-label,
html[data-look="glass"] .account-card-label,
html[data-look="glass"] .track-status,
html[data-look="glass"] .product-brand { letter-spacing: 0; }
/* The darker accent: the brand is 12px bold, and the accent is 4.4:1 on the ground. */
html[data-look="glass"] .product-brand { color: var(--accent-blue-hover); }

/* One left edge: every page's content starts where the header's capsules do. The
   classic .section is a centred 980px column with 22px sides, so legal pages, the
   guides and pricing sat 2px left of the header on a phone and 150-260px right of it
   on a desktop. In glass it takes the header's 1280px grid and 24px gutters; a
   document keeps its 760px reading measure by capping its children, left-aligned on
   that grid. */
html[data-look="glass"] .section {
  max-width: 1280px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
html[data-look="glass"] .section.legal > * { max-width: 760px; }

/* The footer: plain text on the ground, headings in title case. */
html[data-look="glass"] .site-footer { background: transparent; border-top: 0; }
html[data-look="glass"] .site-footer-heading { font-size: 13px; color: var(--text-secondary); }
html[data-look="glass"] .site-footer-legal { border-top: 1px solid var(--lg-hairline); }

/* The cookie banner is a control floating over the content, so it is glass: a panel
   inset from the screen's edges rather than a bar across the bottom. Its buttons
   are fills on it. The page's reserved space grows by the inset (auth.js measures
   the banner, not its offset). */
html[data-look="glass"] .cookie-consent {
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 26px;
  padding: 14px 18px;
}
html[data-look="glass"] body.has-cookie-banner { padding-bottom: calc(var(--cookie-banner-height, 0px) + max(12px, env(safe-area-inset-bottom)) + 12px); }
/* A panel people read and answer, so it barely takes its colour from the page: at the
   glass's 44% the reject option and the policy link fell to 1.1-1.3:1 over the home
   page's dark sign-up card. "Essential only" must be as readable as "Accept all". */
html[data-look="glass"] .cookie-consent { --lg-fill: rgba(255, 255, 255, 0.9); }
html[data-look="glass"] .cookie-consent .btn { border-radius: 999px; }
html[data-look="glass"] .cookie-consent .btn-secondary { background: var(--lg-fill-subtle); padding: 10px 16px; color: var(--text-primary); }
html[data-look="glass"] .cookie-consent-text { color: var(--text-primary); }

/* ---------- sign in, create account, reset password ---------- */
html[data-look="glass"] .auth-container { background: transparent; }
/* .card.auth-card: the generic .card rule further down has the same specificity and
   comes later, so a bare .auth-card here never applied. */
html[data-look="glass"] .card.auth-card {
  border-top: 0;
  border-radius: 30px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring), 0 12px 32px rgba(20, 18, 15, 0.06);
}
/* The Sign in / Create account switch is a segmented control. */
html[data-look="glass"] .auth-tabs { border-radius: 999px; padding: 3px; background: var(--lg-fill-subtle); }
html[data-look="glass"] .auth-tab { border-radius: 999px; font-size: 14px; font-weight: 600; }
/* The selected option carries an ink edge, as classic's Monthly / Annual did: the white
   thumb alone is 1.16:1 against the track, under the 3:1 a state indicator needs. */
html[data-look="glass"] .auth-tab.active,
html[data-look="glass"] .bill-opt.is-active { box-shadow: inset 0 0 0 1.5px var(--ink), 0 1px 3px rgba(20, 18, 15, 0.14); }
html[data-look="glass"] .auth-error { border-radius: 14px; }

/* ---------- pricing ---------- */
html[data-look="glass"] .pricing-eyebrow { font-size: 14px; }
html[data-look="glass"] .pricing-grid { gap: 20px; border-top: 0; }
html[data-look="glass"] .plan,
html[data-look="glass"] .plan--featured {
  padding: 28px;
  border: 0;
  border-radius: 30px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .plan--featured { box-shadow: 0 0 0 2px var(--accent-blue), 0 12px 32px rgba(198, 74, 22, 0.12); }
html[data-look="glass"] .plan-name { font-size: 15px; }
html[data-look="glass"] .plan-badge,
html[data-look="glass"] .bill-save { border-radius: 999px; }
/* The featured plan's 28px right padding narrows the Annual option; keep "Save 30%" on one line. */
html[data-look="glass"] .bill-save { white-space: nowrap; }
/* Monthly / Annual: a segmented control, concentric (capsule in a capsule). */
html[data-look="glass"] .bill-toggle { border: 0; border-radius: 999px; padding: 3px; background: var(--lg-fill-subtle); }
html[data-look="glass"] .bill-opt { border-radius: 999px; }
html[data-look="glass"] .plan-features-label { font-size: 13px; }
html[data-look="glass"] .faq-item { border-top-color: var(--lg-hairline); }
html[data-look="glass"] .faq-item:last-child { border-bottom-color: var(--lg-hairline); }

/* ---------- account ---------- */
html[data-look="glass"] .account-section-label { font-size: 13px; }
html[data-look="glass"] .plan-card,
html[data-look="glass"] .account-card {
  border: 0;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .plan-card--premium { box-shadow: 0 0 0 2px var(--accent-blue); }
html[data-look="glass"] button.plan-card-action,
html[data-look="glass"] .account-signout {
  border: 0;
  border-radius: 999px;
  background: var(--lg-fill-subtle);
}
html[data-look="glass"] button.plan-card-action:hover,
html[data-look="glass"] .account-signout:hover { background: rgba(20, 18, 15, 0.12); color: var(--text-primary); }
html[data-look="glass"] .digest-slider { border-radius: 999px; }
html[data-look="glass"] .digest-switch input:focus-visible + .digest-slider { box-shadow: 0 0 0 2px var(--lg-ground), 0 0 0 4px var(--accent-blue); }

/* ---------- my tracking (dashboard) ----------
   The same rounded grouped list as the home page's drops table. */
html[data-look="glass"] .track-wrap .table-scroll {
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--lg-ring);
  margin-top: 36px;
}
/* Classic spaces the table from the header with its own margin, which would now sit
   inside the card as an empty band, with the card flush under the header. */
html[data-look="glass"] .track-wrap .track-table { border-top: 0; margin-top: 0; }
@media (max-width: 700px) { html[data-look="glass"] .track-wrap .table-scroll { margin-top: 24px; } }
html[data-look="glass"] .track-wrap .data-table th {
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding-top: 14px;
  padding-bottom: 10px;
}
html[data-look="glass"] .track-wrap .data-table td { padding-top: 14px; padding-bottom: 14px; vertical-align: middle; }
html[data-look="glass"] .track-wrap .data-table th:first-child,
html[data-look="glass"] .track-wrap .data-table td:first-child { padding-left: 22px; }
html[data-look="glass"] .track-wrap .data-table th:last-child,
html[data-look="glass"] .track-wrap .data-table td:last-child { padding-right: 22px; }
html[data-look="glass"] .track-wrap .data-table thead tr,
html[data-look="glass"] .track-wrap .data-table tbody tr { border-bottom: 1px solid var(--lg-hairline); }
html[data-look="glass"] .track-wrap .data-table tbody tr:last-child { border-bottom: 0; }
html[data-look="glass"] .track-wrap .cell-thumb { border: 0; border-radius: 12px; box-shadow: var(--lg-ring); }
html[data-look="glass"] .track-status { border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
html[data-look="glass"] .track-wrap .btn-track {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  background: var(--lg-fill-subtle);
}
html[data-look="glass"] .track-wrap .btn-track:hover { background: var(--ink); color: var(--ink-on); }
html[data-look="glass"] .track-wrap .btn-track[disabled]:hover { background: var(--lg-fill-subtle); color: var(--text-primary); }
/* Phones stack each row into a grid whose cells have no padding, so the row carries
   the inset, as on the product and home pages. */
@media (max-width: 700px) {
  html[data-look="glass"] .track-wrap .track-table tr { padding: 14px 20px; }
  html[data-look="glass"] .track-wrap .track-table td,
  html[data-look="glass"] .track-wrap .track-table td:first-child,
  html[data-look="glass"] .track-wrap .track-table td:last-child { padding: 0; }
}

/* ---------- add a product ---------- */
/* .card is classic's generic bordered panel (the add page's result preview; the
   sign-in card carries it too, restyled above). */
html[data-look="glass"] .card {
  border: 0;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
}

/* ---------- legal and about pages, and the guides ---------- */
/* The cookie policy's table names cookies with long identifiers (in <code>), which on a
   320px phone pushed the page wider than the screen. Only they may break anywhere; a
   rule on the whole cell split ordinary words ("Strict / ly", "Cloudfl / are"). */
html[data-look="glass"] .legal td code { overflow-wrap: anywhere; }
@media (max-width: 360px) {
  html[data-look="glass"] .legal th,
  html[data-look="glass"] .legal td { padding-left: 8px; padding-right: 8px; }
}
html[data-look="glass"] .legal .legal-note {
  border-left: 0;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .guide-card {
  border: 0;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
  padding: 16px;
}
/* Concentric: 24 - 16 = 8. */
html[data-look="glass"] .guide-card-img { border-radius: 8px; }
html[data-look="glass"] .guide-card-buy { border-radius: 999px; padding: 10px 18px; }
/* The guide's email-alert sign-up: a solid content card like .guide-card, with a capsule
   field and button, as the product page's alert box has. */
html[data-look="glass"] .guide-alert {
  border: 0;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
}
html[data-look="glass"] .guide-alert-row input { border-radius: 999px; padding-left: 18px; }
html[data-look="glass"] .guide-alert-row .btn,
html[data-look="glass"] .guide-alert-signed-in .btn { border-radius: 999px; }
html[data-look="glass"] .guide-spark {
  border: 0;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: var(--lg-ring);
}

@media (forced-colors: active) {
  html[data-look="glass"] .card.auth-card,
  html[data-look="glass"] .card,
  html[data-look="glass"] .plan,
  html[data-look="glass"] .plan-card,
  html[data-look="glass"] .account-card,
  html[data-look="glass"] .track-wrap .table-scroll,
  html[data-look="glass"] .guide-card,
  html[data-look="glass"] .guide-alert,
  html[data-look="glass"] .guide-spark,
  html[data-look="glass"] .legal .legal-note,
  html[data-look="glass"] .cookie-consent,
  html[data-look="glass"] .auth-tabs,
  html[data-look="glass"] .bill-toggle { border: 1px solid CanvasText; }
  html[data-look="glass"] .auth-tab.active,
  html[data-look="glass"] .bill-opt.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  /* That outline replaces the focus ring, so the selected option, the first stop in
     both controls, would show no focus at all. */
  html[data-look="glass"] .auth-tab.active:focus-visible,
  html[data-look="glass"] .bill-opt.is-active:focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
}

/* ==========================================================================
   The phone tab bar (js/auth.js adds it, in glass only)
   Home, Deals, Tracking and Account in a floating capsule, with Search in a
   round button beside it, on phones held upright (640px wide or less, 480px tall
   or more: in landscape, header plus bar left 58px of a 320px-tall screen). One
   <nav> holds both pieces; it is transparent and lets clicks through its gap. The
   tabs are fills on the glass, concentric with it (32 - 5 = 27). The burger's
   menu still lists every link, three of which the bar repeats.
   ========================================================================== */
html[data-look="glass"] .tab-bar { display: none; }
@media (max-width: 640px) and (min-height: 480px) {
  html[data-look="glass"] .tab-bar {
    position: fixed;
    z-index: 1001;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    height: 64px;
    display: flex;
    gap: 10px;
    pointer-events: none;
  }
  /* A bar people read while the page moves under it: a denser glass than the header's,
     so its labels hold 4.5:1 over a dark block or photo scrolling behind. */
  html[data-look="glass"] .tab-bar-tabs,
  html[data-look="glass"] .tab-search { --lg-fill: rgba(255, 255, 255, 0.72); pointer-events: auto; }
  html[data-look="glass"] .tab-bar-tabs {
    flex: 1 1 auto;
    min-width: 0;
    height: 64px;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 32px;
    display: flex;
    gap: 2px;
  }
  html[data-look="glass"] .tab-bar a {
    flex: 1 1 0;
    min-width: 0;
    height: 54px;
    border-radius: 27px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
  }
  /* The current tab: a white pill, and the darker accent for its 11px label (the
     accent is 4.4:1 at best; over the dark sign-up band the pill keeps it 5.5:1+). */
  html[data-look="glass"] .tab-bar a[aria-current="page"] { color: var(--accent-blue-hover); background: rgba(255, 255, 255, 0.85); font-weight: 700; }
  /* Not by colour alone: over light content the pill is 1.04:1 against the glass and the
     accent 2.7:1 against the ink, so the current tab's icon is filled and its label bold. */
  html[data-look="glass"] .tab-bar a[aria-current="page"] svg { fill: currentColor; }
  html[data-look="glass"] .tab-bar a[aria-current="page"] svg .tab-icon-hole { fill: #FFFFFF; }
  /* Focus inside the control, in ink, where the fill behind it is known; a ring
     outside it sat on whatever scrolled under the glass (2.45:1 over the dark band). */
  html[data-look="glass"] .tab-bar a:focus-visible,
  html[data-look="glass"] .tab-search:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
  html[data-look="glass"] .tab-search {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    padding: 0;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
  }
  /* A field being typed into hides the bar: where the on-screen keyboard shrinks the
     viewport (Firefox for Android), the bar sat on top of the field. */
  html[data-look="glass"] body.has-tab-bar:has(input:focus, textarea:focus, select:focus) .tab-bar { display: none; }
  html[data-look="glass"]:has(body.has-tab-bar) { scroll-padding-bottom: calc(64px + 36px + env(safe-area-inset-bottom)); }
  /* The page ends above the bar, and the cookie banner sits above it. */
  html[data-look="glass"] body.has-tab-bar { padding-bottom: calc(64px + 24px + env(safe-area-inset-bottom)); }
  html[data-look="glass"] body.has-tab-bar .cookie-consent { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); }
  html[data-look="glass"] body.has-tab-bar.has-cookie-banner {
    padding-bottom: calc(var(--cookie-banner-height, 0px) + 64px + 36px + env(safe-area-inset-bottom));
  }
  /* The open menu's cap leaves room for the bar too. */
  html[data-look="glass"] body.has-tab-bar .nav.nav-open .nav-links {
    max-height: max(108px, calc(100vh - 222px - 76px - var(--cookie-banner-height, 0px)));
    max-height: max(108px, calc(100dvh - 222px - 76px - var(--cookie-banner-height, 0px)));
  }
}
@media (forced-colors: active) {
  html[data-look="glass"] .tab-bar-tabs,
  html[data-look="glass"] .tab-search { border: 1px solid CanvasText; }
  /* The current tab is filled, so it cannot be mistaken for a focused one (an outline). */
  html[data-look="glass"] .tab-bar a[aria-current="page"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  html[data-look="glass"] .tab-bar a[aria-current="page"] svg .tab-icon-hole { fill: Highlight; }
  html[data-look="glass"] .tab-bar a:focus-visible,
  html[data-look="glass"] .tab-search:focus-visible { outline-color: CanvasText; }
  /* On the Highlight fill, CanvasText is 1.9:1 (2.4:1 in a dark theme); HighlightText is the
     colour made to be read on it. */
  html[data-look="glass"] .tab-bar a[aria-current="page"]:focus-visible { outline-color: HighlightText; }
}

/* ---------- accessibility ----------
   Reduce Transparency turns the glass into a solid surface. Safari does not support
   prefers-reduced-transparency (WebKit evaluates the query as unknown), so on Apple
   devices only Increase Contrast (prefers-contrast: more, which Safari supports)
   reaches this block. Increase Contrast also gets the solid surface, because
   translucency hurts those users most. Chromium honours both queries. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-look="glass"] {
    --lg-backdrop: none;
    --lg-fill: var(--lg-solid);
    --lg-sheen-a: transparent;
    --lg-sheen-b: transparent;
  }
  html[data-look="glass"] .nav-cats-inner,
  html[data-look="glass"] .nav-brand,
  html[data-look="glass"] .nav-search,
  html[data-look="glass"] .nav-burger,
  html[data-look="glass"] .nav-links { --lg-fill: var(--lg-solid); }
  html[data-look="glass"] .site-header::before {
    background: var(--lg-ground);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-look="glass"] .cookie-consent,
  html[data-look="glass"] .tab-bar-tabs,
  html[data-look="glass"] .tab-search { --lg-fill: var(--lg-solid); }
}
@media (prefers-contrast: more) {
  html[data-look="glass"] {
    --lg-shadow: inset 0 0 0 1.5px rgba(20, 18, 15, 0.6), 0 8px 24px rgba(0, 0, 0, 0.2);
    /* The content cards and their row separators: 6-7% ink is about 1.1:1 against the
       ground; 50% is about 3.4:1. */
    --lg-ring: 0 0 0 1px rgba(20, 18, 15, 0.5);
    --lg-hairline: rgba(20, 18, 15, 0.25);
    /* The rule between the rail's sections stays stronger than the rows' hairlines. */
    --lg-rule: rgba(20, 18, 15, 0.5);
  }
}
/* Forced colours (Windows High Contrast) drop box-shadows and backgrounds, and glass
   draws every edge with a shadow after setting border: 0, so the capsules, the rail,
   the cards, the fields and the fill buttons lost their outlines. A real border comes
   back; the system picks its colour. */
@media (forced-colors: active) {
  html[data-look="glass"] .nav-brand,
  html[data-look="glass"] .nav-search,
  html[data-look="glass"] .nav-links,
  html[data-look="glass"] .nav-burger,
  html[data-look="glass"] .nav-cats-inner,
  html[data-look="glass"] .product-rail,
  html[data-look="glass"] .product-head-image,
  html[data-look="glass"] .product-facts,
  html[data-look="glass"] #history-facts,
  html[data-look="glass"] .specs-panel-inner,
  html[data-look="glass"] .report-btn,
  html[data-look="glass"] .btn-destructive,
  html[data-look="glass"] .product-section .table-scroll,
  html[data-look="glass"] #history-chart,
  html[data-look="glass"] .input,
  html[data-look="glass"] .rail-alert-input,
  html[data-look="glass"] .product-section .add-input-group,
  html[data-look="glass"] .btn-outlined,
  html[data-look="glass"] .btn-go,
  html[data-look="glass"] .range-toggle,
  html[data-look="glass"] .rail-price .track-toggle { border: 1px solid CanvasText; }
  html[data-look="glass"] .product-section .add-input-group .input { border: 0; }
}