/* Reset, page frame and typography. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas, video { max-width: 100%; }
img { display: block; }

/* Product titles reach 171 characters and contain 28-character model codes
   ("E1504FA-BQ4930W"). Without this they push their container past the
   viewport on a phone instead of wrapping. */
h1, h2, h3, p, li, td, .card-title, .offer-name, .offer-shop { overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.12; }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-lg); font-weight: 700; }

/* Prices must line up in columns, so digits get fixed width. */
.num { font-variant-numeric: tabular-nums; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); }
.stack > * + * { margin-top: var(--sp-3); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }
.strike { text-decoration: line-through; color: var(--muted); font-weight: 500; }
/* `min-width: 0` is load-bearing: a flex or grid child defaults to a minimum
   of its content size, so nowrap text refuses to shrink and overflows instead
   of ellipsing. Every truncating element must also sit in a shrinkable box. */
.truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; max-width: 100%;
}
.clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { width: 1em; height: 1em; flex: none; }

/* `hidden` means hidden, whatever else an element is wearing.

   The attribute is only a UA `display: none`, so ANY class that sets display
   beats it — `.btn` is `inline-flex`, and "Clear list" sat on the saved-list
   page in full view while the markup said it was hidden. Scripts on this site
   show and hide by toggling the property (`el.hidden = …`), so this has to
   hold for every element rather than being remembered class by class, which is
   how it was done before and how it was missed. */
[hidden] { display: none !important; }

/* ---- header ---- */
.nav {
  height: var(--nav-h); display: flex; align-items: center; gap: var(--sp-5);
  border-bottom: 1px solid var(--line); background: var(--page);
  position: sticky; top: 0; z-index: 20;
}
/* The header row. This lived in a `style` attribute on the element, where no
   media query could reach it — so the row kept a 24px gap at every width and
   the controls at the end of it ran out of room on a phone. */
.nav-inner {
  display: flex; align-items: center; gap: var(--sp-5); width: 100%;
  min-width: 0;
}
/* Every child may shrink. A flex item's default `min-width: auto` refuses to
   go below its content, which is what turns a crowded row into an overflowing
   one instead of a tighter one. */
.nav-inner > * { min-width: 0; }
.brand {
  display: flex; align-items: center; gap: var(--sp-2); flex: none;
  font-family: var(--font-display);
}
.brand-mark {
  /* The site's icon, the same file the browser tab shows — so the tab, the
     home screen and the header all carry one mark instead of three. */
  width: 28px; height: 28px; flex: none; display: block; border-radius: 7px;
}
.brand-name {
  font-weight: 800; font-size: var(--fs-lg); letter-spacing: -.03em;
  white-space: nowrap;
}
.nav-links { display: flex; gap: var(--sp-4); font-weight: 500; }
.nav-links a:hover { color: var(--link); }
.nav-spacer { margin-left: auto; }

/* ---- footer ----
   The page's own ground, like every other section: the site tints panels, not
   bands, so a shaded footer would be the one place the rule breaks. The rule
   above it and the extra space are what mark the end of the page. */
.footer {
  margin-top: var(--sp-8); border-top: 1px solid var(--line);
  padding-block: var(--sp-7) var(--sp-5);
  color: var(--muted); font-size: var(--fs-sm);
}

/* What the header gives up, and in what order.

   The row carries brand, search, saved list and account. On a phone it has no
   navigation left to drop and no second line to wrap onto, so it sheds words —
   never controls — widest first.

   These rules used to sit in pages.css under a 360px query. They are the
   header's own, they belong beside it, and splitting them across two files is
   how the row ended up tightening in one place and not the other. */
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-inner { gap: var(--sp-3); }
  /* The magnifier says "search" already, and the button keeps its accessible
     name from `aria-label` — so the word is the cheapest thing in the row. */
  .navsearch-toggle .btn-label { display: none; }
  .navsearch-toggle { padding-inline: 11px; }
}
/* Last: the wordmark, and the remaining padding. The icon beside it is the
   same mark and is still a link to the home page. */
@media (max-width: 360px) {
  .brand-name { display: none; }
  .nav .btn { padding: 8px 10px; }
}