/* Daily Hockey Deals — shared stylesheet */

:root {
  --navy: #1857a8;      /* rink blue — brighter than a corporate navy, reads clearly "blue" */
  --navy-dark: #0f3d7a;
  --ice: #f4f8fc;        /* near-white, ice-surface tint */
  --ice-line: #d8e3ee;
  --red: #c8102e;        /* red line */
  --red-dark: #a10d25;
  --text: #1c2733;
  --muted: #5b6b7c;
  --white: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--ice);
}

a { color: inherit; text-decoration: none; }

/* ---------- Header ---------- */

.site-header {
  background: var(--white);
  color: var(--text);
  text-align: center;
}

/* Category icon band — sits above the logo, like a rink's category rail */
.category-band {
  background: var(--navy);
}

.category-band ul {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.category-band a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 18px 10px;
  color: #dce6f2;
  border-bottom: 3px solid transparent;
  flex-shrink: 0;
}

/* Mobile: category band becomes a horizontal scroll strip instead of wrapping to multiple rows */
@media (max-width: 700px) {
  .category-band ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* old Edge/IE */
    padding: 0 12px;
  }
  .category-band ul::-webkit-scrollbar {
    display: none;              /* Chrome/Safari */
  }
  .category-band a {
    padding: 12px 12px 8px;
  }
  .category-band a svg {
    width: 26px;
    height: 26px;
  }
  .category-band a img {
    width: 26px;
    height: 26px;
  }
  .category-band a span {
    font-size: 10px;
  }
  .brand-lockup {
    flex-direction: column;
    text-align: center;
  }
  .logo {
    text-align: center;
  }
  .logo-img {
    height: 74px;
  }
  .hero h1 {
    font-size: 26px;
  }
  .deal-card {
    flex-direction: column;
    align-items: stretch;
  }
  .deal-image {
    width: 100%;
    height: 180px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--ice-line);
  }
}

.category-band a svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
}

.category-band a img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.category-band a span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.category-band a:hover,
.category-band a.active {
  color: var(--white);
  border-bottom: 3px solid var(--red);
}

/* Logo + wordmark, centered */
.brand-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 20px 6px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.logo-mark { width: 54px; height: 54px; flex-shrink: 0; }

.logo {
  display: block;
  text-align: center;
}
.logo-img {
  display: inline-block;
  height: 100px;
  width: auto;
}

.tagline {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
}

/* ---------- Rink lines (brand motif: blue line + red line) ---------- */

.rink-lines {
  height: 6px;
  display: flex;
}
.rink-lines span { flex: 1; }
.rink-lines .blue-line { background: var(--navy); }
.rink-lines .red-line { background: var(--red); }

/* ---------- Hero ---------- */

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 20px;
  text-align: center;
}

.hero h1 {
  font-size: 34px;
  margin: 0 0 12px;
  color: var(--navy);
}

.hero p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- Layout ---------- */

.page-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 60px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 28px;
}

@media (max-width: 800px) {
  .page-wrap { grid-template-columns: 1fr; }
}

.feed-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ---------- Filter bar ---------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-pill {
  font: inherit;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--ice-line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.filter-pill .count {
  color: var(--muted);
  font-weight: 400;
}

.filter-pill:hover {
  border-color: var(--navy);
}

.filter-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.filter-pill.active .count {
  color: #cfe0f5;
}

/* ---------- Deal cards ---------- */

.deal-card {
  background: var(--white);
  border: 1px solid var(--ice-line);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.deal-image-link {
  display: block;
  flex-shrink: 0;
}

.deal-image {
  display: block;
  width: 150px;
  height: 150px;
  margin: 18px 0 18px 18px;
  padding: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--ice-line);
  border-radius: 8px;
}

.deal-body {
  padding: 18px 20px;
  flex: 1;
  min-width: 0;
}

.deal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--navy);
}

.deal-title .price {
  color: var(--red);
}

/* "from $139.98" - shown when one listing charges different prices across
   sizes or divisions, so the headline figure is the cheapest variant rather
   than the price of every option. Deliberately quiet: it's a qualifier, not
   part of the price. See detail_enrichment.price_varies(). */
.deal-title .price-from {
  color: var(--muted, #6b7280);
  font-weight: 600;
  font-size: 0.82em;
  text-transform: lowercase;
}

.deal-title a:hover {
  text-decoration: underline;
}

.deal-store {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.deal-store a {
  color: var(--navy);
  font-weight: 600;
}

.deal-details {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 12px;
}

.deal-details b { color: var(--navy); }

.deal-cta {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 14px;
}

.deal-cta:hover { background: var(--red-dark); }

.deal-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--ice-line);
  padding-top: 10px;
}

.deal-meta .tag {
  display: inline-block;
  background: var(--ice);
  border: 1px solid var(--ice-line);
  border-radius: 4px;
  padding: 2px 8px;
  margin-right: 4px;
}

/* "New" badge — a genuinely new discovery since the last run. Red Line is the
   brand's accent-only colour, which is exactly what this is: one small, rare
   highlight per card, never a background. */
.deal-meta .tag.tag-new {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 11px;
}

button.tag.tag-filter {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button.tag.tag-filter:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ---------- Sidebar ---------- */

.sidebar-box {
  background: var(--white);
  border: 1px solid var(--ice-line);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 18px;
}

.sidebar-box h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--navy);
  margin: 0 0 12px;
}

.sidebar-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.sidebar-box li { margin-bottom: 8px; }
.sidebar-box a:hover { color: var(--red); }

.sidebar-box.newsletter p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}

.sidebar-box input[type="email"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--ice-line);
  border-radius: 5px;
  font-size: 13px;
  margin-bottom: 8px;
}

.sidebar-box button {
  width: 100%;
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 10px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.sidebar-box button:hover { background: var(--navy-dark); }

.sidebar-box button:disabled {
  background: var(--muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Sidebar beehiiv embed. Never clip it — clipping is what collapsed the box
   to zero height on the first attempt. Let it take whatever height it needs. */
.sidebar-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
  display: block;
}

.sidebar-secondary {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  margin-top: 4px;
}

.sidebar-secondary:hover { color: var(--red); }

/* Subscribe page: let the iframe span the card, but never clip it — beehiiv
   sets its own height and clipping is what broke the sidebar attempt. */
.subscribe-card iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
  display: block;
}

/* ---------- Email signup states ---------- */
/* The form must never look like it worked when it didn't - the previous
   version was a decorative input with no handler that silently ate every
   address typed into it. Every outcome now says something. */

.signup-form { margin: 0; }

.signup-msg {
  font-size: 12px;
  margin: 8px 0 0;
  min-height: 1em;
  line-height: 1.4;
}

.signup-msg.pending { color: var(--muted); }
.signup-msg.error   { color: var(--red); font-weight: 600; }
.signup-msg.success { color: #1a7f4b; font-weight: 600; }

.signup-form input[type="email"]:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}

/* Screen-reader-only label: the placeholder alone isn't an accessible name. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.footer-links a.footer-cta {
  color: var(--white);
  font-weight: 700;
}

.footer-links a.footer-cta:hover { color: var(--red); }

/* ---------- Inline signup between deal cards ---------- */
/* The only email capture most mobile readers will ever see — the sidebar
   stacks below all 30 cards under 800px. Styled to read as a deliberate
   interruption rather than another deal card. */

.feed-signup {
  background: var(--ice);
  border: 1px solid var(--ice-line);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  padding: 18px 20px 8px;
  margin: 18px 0;
}

.feed-signup-copy h2 {
  font-size: 18px;
  color: var(--navy);
  margin: 0 0 4px;
}

.feed-signup-copy p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 6px;
  line-height: 1.5;
}

/* beehiiv sets its own iframe height; never clip it — clipping is what broke
   the sidebar attempt and collapsed the box to zero. */
.feed-signup-form iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
  display: block;
}

@media (max-width: 700px) {
  .feed-signup { padding: 16px 14px 6px; }
  .feed-signup-copy h2 { font-size: 17px; }
}

/* ---------- /subscribe landing page ---------- */
/* Linked from Reddit post footers and the site footer, so it has to stand on
   its own rather than assume the visitor has seen the feed. */

.static-page .lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
}

.subscribe-card {
  background: var(--ice);
  border: 1px solid var(--ice-line);
  border-left: 4px solid var(--red);
  border-radius: 8px;
  padding: 22px 24px 18px;
  margin: 26px 0 32px;
}

.subscribe-card .signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.subscribe-card input[type="email"] {
  flex: 1 1 240px;
  padding: 12px 14px;
  border: 1px solid var(--ice-line);
  border-radius: 6px;
  font-size: 15px;
}

.subscribe-card button {
  flex: 0 0 auto;
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 12px 22px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.subscribe-card button:hover { background: var(--navy-dark); }

.subscribe-card button:disabled {
  background: var(--muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* The status line spans the full row under the input + button. */
.subscribe-card .signup-msg { flex: 1 1 100%; font-size: 13px; }

.subscribe-fine {
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 0;
}

/* ---------- Static pages (About / Disclosure) ---------- */

.static-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  line-height: 1.7;
  font-size: 15px;
}

.static-page h1 { color: var(--navy); font-size: 28px; }
.static-page h2 { color: var(--navy); font-size: 19px; margin-top: 32px; }
.static-page .stat-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.static-page .stat-box {
  background: var(--white);
  border: 1px solid var(--ice-line);
  border-radius: 8px;
  padding: 14px 18px;
  flex: 1;
  min-width: 160px;
}
.static-page .stat-box .n {
  font-size: 20px;
  font-weight: 800;
  color: var(--red);
}
.static-page .stat-box .l {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-dark);
  color: #b7c4d6;
  font-size: 13px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-links a {
  margin-right: 16px;
  color: #b7c4d6;
}
.footer-links a:hover { color: var(--white); }

.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-social a {
  color: #b7c4d6;
  display: flex;
}
.footer-social a:hover { color: var(--white); }

.disclosure-banner {
  background: #fff8e1;
  border-bottom: 1px solid #f0e0a8;
  font-size: 12px;
  color: #6b5b1f;
  text-align: center;
  padding: 6px 12px;
}
.disclosure-banner a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Deal archive pagination (backlog #56)
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 28px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--ice-line);
}
.pagination a,
.pagination .page-current,
.pagination .page-nav.disabled {
  display: inline-block;
  min-width: 38px;
  padding: 8px 11px;
  border: 1px solid var(--ice-line);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.pagination a {
  color: var(--navy);
  background: var(--white);
}
.pagination a:hover {
  background: var(--ice);
  border-color: var(--navy);
}
.pagination .page-current {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.pagination .page-nav {
  min-width: 0;
  white-space: nowrap;
}
.pagination .page-nav.disabled {
  color: #a9b7c6;
  background: var(--ice);
  cursor: default;
}
.pagination .page-gap {
  padding: 0 2px;
  color: var(--muted);
}

.archive-cta {
  margin: 24px 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--ice-line);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}
.archive-cta a { color: var(--navy); }
.archive-cta a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .pagination { gap: 4px; }
  .pagination a,
  .pagination .page-current,
  .pagination .page-nav.disabled {
    min-width: 34px;
    padding: 7px 8px;
    font-size: 13px;
  }
}

/* Price-history badge (backlog #89). "40% off" is a claim any deal site can
   make; "lowest since Jul 10" is one only we can, because only we were
   watching. Appears on roughly 7% of cards - see price_history.badge_for()
   for the four conditions it has to clear - and that scarcity is the point.

   Navy rather than red so it doesn't compete with the New badge when both are
   present; it reads as a statement of fact, not an alarm. Selector matches
   .tag-new's specificity or the base .deal-meta .tag rule wins. */
.deal-meta .tag.tag-low {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   GUIDE PAGES (2026-08-26, restyled)
   /guides/build-your-bag/ and /guides/what-hockey-gear-costs/

   The first pass put long-form content straight onto the body background,
   which is --ice, a pale blue meant to sit BEHIND white deal cards. Prose on
   a tinted background is hard to read and looked unfinished next to the rest
   of the site. Everything below now sits on a white sheet, the same surface
   deal cards use, so the guides read as part of the site rather than as
   something dropped on top of it.
   -------------------------------------------------------------------------- */
.guide-sheet {
  background: var(--white);
  border: 1px solid var(--ice-line);
  border-radius: 12px;
  padding: 32px 36px 36px;
  margin: 0 0 28px;
}
@media (max-width: 640px) {
  .guide-sheet { padding: 20px 18px 24px; border-radius: 10px; }
}

/* ---- Cost guide, long-form prose ---- */
.guide { max-width: none; }
/* Line length is capped on the paragraphs themselves, not on the container.
   Capping the container left a dead blue gutter between the text and the
   260px sidebar on desktop, and squeezed the tables into two thirds of the
   space they had. Paragraphs stay readable, tables use the whole column. */
.guide p, .guide-callout, .guide-lede { max-width: 68ch; }
.guide p { line-height: 1.7; margin: 0 0 18px; color: var(--text); font-size: 16px; }
.guide h2 { margin: 38px 0 14px; color: var(--navy-dark); font-size: 23px;
            padding-bottom: 8px; border-bottom: 2px solid var(--ice-line); }
.guide h2:first-of-type { margin-top: 8px; }
.guide-lede { font-size: 20px; font-weight: 600; color: var(--navy-dark); line-height: 1.5; }
.guide-callout { background: var(--ice); border-left: 4px solid var(--navy);
                 padding: 16px 18px; border-radius: 0 8px 8px 0; }
/* Was a solid navy block. Too heavy sitting in the middle of body copy, and
   it fought the deal cards for attention. Matched to the light callout
   treatment instead, which reads as emphasis rather than as a banner. */
.guide-figure { background: var(--ice); color: var(--navy-dark);
                border: 1px solid var(--ice-line); border-left: 4px solid var(--navy);
                padding: 16px 18px; border-radius: 0 8px 8px 0;
                font-weight: 700; font-size: 17px; letter-spacing: 0.01em;
                max-width: 68ch; }
.guide-cta { margin-top: 30px; }
.guide-cta a { display: inline-block; background: var(--red); color: var(--white);
               padding: 13px 22px; border-radius: 8px; text-decoration: none;
               font-weight: 700; }
.guide-cta a:hover { background: var(--red-dark); }
.guide-fineprint { font-size: 13px; color: var(--muted); margin-top: 26px;
                   padding-top: 16px; border-top: 1px solid var(--ice-line); }
.guide-nodata { color: var(--muted); font-style: italic; font-size: 13px; }

.guide-table { width: 100%; border-collapse: collapse; margin: 0 0 22px;
               border: 1px solid var(--ice-line); border-radius: 10px; overflow: hidden; }
.guide-table th, .guide-table td { text-align: left; padding: 11px 14px;
               border-bottom: 1px solid var(--ice-line); }
.guide-table thead th { background: var(--ice); color: var(--navy-dark);
               font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.guide-table tbody th { font-weight: 600; white-space: nowrap; }
.guide-table tbody tr:nth-child(even) { background: #fafcfe; }
.guide-table tbody tr:last-child th,
.guide-table tbody tr:last-child td { border-bottom: none; }

/* ---- Build Your Bag, product tables ---- */
.bag-intro, .bag-outro { max-width: none; }
.bag-intro p, .bag-outro p { max-width: 68ch; }
.bag-intro p, .bag-outro p { line-height: 1.7; margin: 0 0 16px; font-size: 16px; }
.bag-outro h2 { margin: 8px 0 14px; color: var(--navy-dark); font-size: 23px;
                padding-bottom: 8px; border-bottom: 2px solid var(--ice-line); }

.bag-division h2 { margin: 0 0 2px; color: var(--navy-dark); font-size: 24px; }
.bag-sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; }

.bag-table { width: 100%; border-collapse: collapse;
             border: 1px solid var(--ice-line); border-radius: 10px; overflow: hidden; }
.bag-table th, .bag-table td { text-align: left; padding: 12px 14px;
             border-bottom: 1px solid var(--ice-line); vertical-align: top; }
.bag-table thead th { background: var(--ice); color: var(--navy-dark);
             font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.bag-table tbody th { font-weight: 700; color: var(--text); white-space: nowrap;
             width: 130px; }
.bag-note { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }

.bag-pick-inner { display: flex; gap: 12px; align-items: flex-start; }
.bag-thumb-link { flex-shrink: 0; }
.bag-thumb { width: 72px; height: 72px; object-fit: contain; background: var(--white);
             border: 1px solid var(--ice-line); border-radius: 8px; padding: 5px;
             box-sizing: border-box; display: block; }
.bag-pick-text { min-width: 0; }

.bag-label { display: none; }
.bag-name { display: block; color: var(--navy); text-decoration: none;
            font-weight: 600; line-height: 1.35; }
.bag-name:hover { text-decoration: underline; }
.bag-price { display: block; margin-top: 5px; font-weight: 700; font-size: 17px; }
.bag-was { display: block; font-size: 12px; color: var(--red); }
.bag-store { display: block; font-size: 12px; color: var(--muted); }
.bag-none { color: var(--muted); font-style: italic; font-size: 13px; }

.bag-table tfoot th, .bag-table tfoot td { background: var(--ice);
            border-bottom: none; font-weight: 700; color: var(--navy-dark); }
.bag-total { font-size: 19px; }
.bag-caveat { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }

@media (max-width: 700px) {
  .bag-table, .bag-table tbody, .bag-table tr, .bag-table td, .bag-table tbody th { display: block; width: 100%; }
  .bag-table thead, .bag-table tfoot th { display: none; }
  .bag-table tbody th { background: var(--ice); border-bottom: none; width: auto; }
  .bag-table tr { border-bottom: 2px solid var(--ice-line); }
  .bag-label { display: block; font-size: 11px; text-transform: uppercase;
               letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
  .bag-table tfoot td { display: block; }
  .bag-table tfoot td:first-of-type::before { content: "Full bag, cheapest: "; font-weight: 400; }
  .bag-table tfoot td:last-of-type::before { content: "Full bag, best value: "; font-weight: 400; }
}

/* --------------------------------------------------------------------------
   GUIDE LINKS AND MOBILE TABLES (2026-08-27)

   LINKS. The global rule is `a { color: inherit; text-decoration: none; }`,
   which is right for the nav and wrong for body copy. Every inline link in
   the two guide pages rendered as plain text, so the cross-links between them
   were invisible. Prose links now look like links.

   TABLES. The bag tables already stack into cards below 700px. The guide
   tables only shrank their font, and the four-column size-ladder table is
   unreadable on a phone at any font size. They now scroll sideways inside
   their own container rather than crushing the columns, which keeps the
   numbers aligned and readable.
   -------------------------------------------------------------------------- */
.guide p:not(.guide-cta) a,
.bag-intro p a,
.bag-outro p:not(.guide-cta) a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.guide p:not(.guide-cta) a:hover,
.bag-intro p a:hover,
.bag-outro p:not(.guide-cta) a:hover { color: var(--red); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
                margin: 0 0 22px; }
.table-scroll .guide-table { margin-bottom: 0; min-width: 460px; }

@media (max-width: 640px) {
  .guide-table { font-size: 14px; }
  .guide-table th, .guide-table td { padding: 9px 10px; }
  /* A hint that there is more to the right, rather than a silent cut-off. */
  .table-scroll { border-right: 1px solid var(--ice-line); border-radius: 10px; }
}