/* ==========================================================================
   Tŷ Mêl Apiary — shop pages

   Shared by the sponsorship hub (/sponsorship) and the four category pages
   (/hardware, /consumables, /gear, /subscriptions) so they are styled from
   one file and cannot drift apart. Covers the brand tokens, the sponsor
   band, the sticky category bar, the product cards and the footer, plus the
   narrative blocks the hub uses on its own.

   Previously these rules were inlined in sponsorship.html; they were lifted
   out verbatim when the catalogue was split across pages.
   ========================================================================== */
:root {
  --forest-900: #14241a;
  --forest-800: #1a3022;
  --forest-700: #234430;
  --forest-600: #2f5a40;
  --charcoal:   #23262a;
  --ink:        #1d211d;
  --paper:      #fbf8f0;
  --offwhite:   #f3eee2;
  --sand:       #e7ddc8;
  --honey:      #c0871f;
  --honey-600:  #ad7716;
  --honey-300:  #e0b358;
  --muted:      #6b6f63;
  --line:       rgba(29, 33, 29, 0.12);

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 136px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23e0b358' stroke-width='1.5' opacity='0.05'%3E%3Cpath d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z'/%3E%3Cpath d='M28 50 L56 66 L56 100 L28 116 L0 100 L0 66 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  font-optical-sizing: auto;
}
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

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

.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--honey); color: #1f1606; padding: 0.7em 1.2em;
  border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  padding: 0.85em 1.55em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1), background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.btn-primary {
  background: var(--honey);
  color: #1f1606;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 22px -12px rgba(120,80,10,0.8);
}
.btn-primary:hover { background: var(--honey-600); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: inherit; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--honey); color: var(--honey-600); transform: translateY(-2px); }
:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; }

/* Header */
/* ===========================================================
   Sponsorship band + section menu
   -----------------------------------------------------------
   The sponsorship call gets its own band above the header so it
   reads as an offer rather than one more link in a crowded nav.
   Beneath the brand row, a section menu gives both pages a
   single, always-visible way to move between sections — it
   scrolls sideways on narrow screens, where the primary nav
   links collapse away entirely.
   =========================================================== */
.sponsor-bar {
  background: linear-gradient(100deg, var(--honey-600) 0%, var(--honey) 46%, var(--honey-300) 100%);
  color: #241904;
  border-bottom: 1px solid rgba(31, 22, 6, 0.2);
}
.sponsor-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem clamp(0.9rem, 2.5vw, 1.8rem);
  padding-block: 0.7rem;
  text-align: center;
}
.sponsor-bar-copy {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.45;
  color: rgba(36, 25, 4, 0.86);
}
.sponsor-bar-copy strong { font-weight: 700; color: #241904; }
.sponsor-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  background: var(--forest-900);
  color: var(--paper);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  padding: 0.58em 1.35em;
  border-radius: 999px;
  border: 1px solid rgba(20, 36, 26, 0.9);
  box-shadow: 0 6px 16px -10px rgba(20, 36, 26, 0.9);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.sponsor-bar-cta svg { width: 1em; height: 1em; flex: none; }
.sponsor-bar-cta:hover,
.sponsor-bar-cta:focus-visible {
  background: var(--forest-700);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(20, 36, 26, 0.95);
}

.section-nav {
  border-top: 1px solid rgba(224, 179, 88, 0.16);
  background: rgba(11, 22, 15, 0.45);
}
.section-nav-inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 46px;
  padding-block: 0.3rem;
}
.section-nav-label {
  flex: none;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(243, 238, 226, 0.5);
}
.section-nav-list {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Mask the right edge so a sideways-scrollable menu looks scrollable. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.section-nav-list::-webkit-scrollbar { display: none; }
.section-nav-list li { flex: none; }
.section-nav-list a {
  display: block;
  white-space: nowrap;
  scroll-snap-align: start;
  text-decoration: none;
  color: rgba(243, 238, 226, 0.82);
  font-size: 0.87rem;
  font-weight: 600;
  padding: 0.4em 0.85em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.section-nav-list a:hover,
.section-nav-list a:focus-visible {
  color: var(--honey-300);
  background: rgba(224, 179, 88, 0.1);
  border-color: rgba(224, 179, 88, 0.3);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 36, 26, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(224, 179, 88, 0.16);
  color: var(--offwhite);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  padding-block: 0.6rem;
}
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: inherit; min-width: 0; }
.brand-mark {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--paper); padding: 4px;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.5); flex: none;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--serif); font-size: 1.32rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; }
.brand-tag {
  font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--honey-300); max-width: 42ch; margin-top: 2px;
}
.site-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: clamp(0.8rem, 2vw, 2rem); font-weight: 500; }
.site-nav a { text-decoration: none; color: var(--offwhite); font-size: 0.95rem; letter-spacing: 0.01em; opacity: 0.88; transition: opacity 0.2s, color 0.2s; }
.site-nav a:hover { opacity: 1; color: var(--honey-300); }
.site-nav a[aria-current="page"] { opacity: 1; color: var(--honey-300); }
.nav-cta { border: 1px solid rgba(224,179,88,0.5); padding: 0.45em 1.05em; border-radius: 999px; opacity: 1 !important; }
.nav-cta:hover { background: var(--honey); color: #1f1606 !important; border-color: var(--honey); }
.nav-cta-solid { background: var(--honey); border-color: var(--honey); color: #1f1606 !important; box-shadow: 0 8px 22px -14px rgba(120,80,10,0.9); }
.nav-cta-solid:hover { background: var(--honey-300); border-color: var(--honey-300); }
.site-nav .nav-link { font-size: 0.9rem; opacity: 0.72; }
.site-nav .nav-link:hover { opacity: 1; }

/* Narrative block */
.intro {
  position: relative;
  isolation: isolate;
  color: var(--offwhite);
  background: radial-gradient(120% 90% at 85% -10%, rgba(192,135,31,0.22), transparent 55%), linear-gradient(160deg, var(--forest-800) 0%, var(--forest-900) 70%);
  padding-block: clamp(3.4rem, 8vw, 6.5rem) clamp(3.4rem, 8vw, 6rem);
  overflow: hidden;
}
.intro::after {
  content: ""; position: absolute; right: -60px; bottom: -60px; width: 360px; height: 360px; z-index: -1; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23e0b358' stroke-width='1.5' opacity='0.5'%3E%3Cpath d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z'/%3E%3Cpath d='M28 50 L56 66 L56 100 L28 116 L0 100 L0 66 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 46px auto;
  -webkit-mask-image: radial-gradient(circle at 70% 70%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 70% 70%, #000, transparent 70%);
}
.intro-inner { position: relative; max-width: 74ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--honey-300); font-weight: 600; margin-bottom: 1.4rem;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--honey-300); box-shadow: 0 0 0 4px rgba(224,179,88,0.18); }
.intro h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.7rem); letter-spacing: -0.02em; margin-bottom: 1.6rem; }
.intro h1 em { font-style: italic; font-weight: 400; color: var(--honey-300); }
.intro-body p { color: rgba(243,238,226,0.86); font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.14rem); }
.intro-body p + p { margin-top: 1.3rem; }
.intro-body strong { color: var(--honey-300); font-weight: 600; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.intro-actions .btn-ghost { color: var(--offwhite); border-color: rgba(224,179,88,0.45); }
.intro-actions .btn-ghost:hover { color: #1f1606; background: var(--honey-300); border-color: var(--honey-300); }

/* Why back us — rationale, contribution routes and sponsor rewards */
.backing {
  padding-block: clamp(3rem, 7vw, 5rem);
  background: linear-gradient(180deg, var(--offwhite), rgba(251,248,240,0));
  border-bottom: 1px solid var(--line);
}
.backing-lede p + p { margin-top: 1rem; }
.backing-lede strong { color: var(--honey-600); font-weight: 600; }
.backing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
@media (max-width: 860px) { .backing-grid { grid-template-columns: 1fr; } }
.backing-sub {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.55rem);
  margin-bottom: 1.2rem;
}

.ways-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.way {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.3rem);
  background: rgba(251, 248, 240, 0.93);
  border: 1px solid var(--line);
  border-left: 4px solid var(--honey);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1), box-shadow 0.25s;
}
.way:hover { transform: translateY(-2px); box-shadow: 0 15px 40px -20px rgba(0,0,0,0.28); }
.way-num {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--honey-600);
  flex: none;
}
.way h4 { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.45rem; }
.way p { color: #4a4f45; font-size: 0.95rem; line-height: 1.55; }
.way-link {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-top: 0.7rem; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--honey-600); text-decoration: none;
  border-bottom: 1px solid rgba(192,135,31,0.4); padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.way-link:hover { color: var(--forest-700); border-color: var(--forest-700); }
.way-link svg { width: 0.8em; height: 0.8em; flex: none; }

.returns {
  background: linear-gradient(160deg, var(--forest-800), var(--forest-900));
  border: 1px solid rgba(224,179,88,0.28);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  color: var(--offwhite);
  position: sticky;
  top: 150px;
}
@media (max-width: 860px) { .returns { position: static; } }
.returns .backing-sub { color: var(--offwhite); margin-bottom: 0.7rem; }
.returns > p { color: rgba(243,238,226,0.82); font-size: 0.95rem; }
.returns-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.returns-list li {
  display: flex; gap: 0.7rem;
  color: rgba(243,238,226,0.9); font-size: 0.95rem; line-height: 1.5;
}
.returns-list li + li { border-top: 1px solid rgba(224,179,88,0.18); padding-top: 0.85rem; }
.returns-list svg { width: 1.05em; height: 1.05em; flex: none; margin-top: 0.28em; color: var(--honey-300); }

/* Catalogue */
.catalogue { padding-block: clamp(3rem, 7vw, 5.5rem); }
.cat-block + .cat-block { margin-top: clamp(3rem, 7vw, 5rem); }
.cat-head { max-width: 62ch; margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }
.kicker { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--honey-600); margin-bottom: 0.8rem; }
.cat-head h2 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem); margin-bottom: 0.75rem; }
.cat-head p { color: #383c34; }

.card-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.card {
  display: flex;
  flex-direction: column;
  background: rgba(251, 248, 240, 0.93);
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--honey);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1), box-shadow 0.25s, border-color 0.25s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 15px 40px -18px rgba(0,0,0,0.28); }
.card h3 { font-size: 1.24rem; line-height: 1.2; margin-bottom: 0.6rem; }
.card p { color: #4a4f45; font-size: 0.95rem; line-height: 1.55; }
.card-foot { margin-top: auto; padding-top: 1.35rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; }
.price { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--forest-700); line-height: 1; letter-spacing: -0.02em; }
.price .per { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 0.35rem; }
.card .btn { padding: 0.72em 1.25em; font-size: 0.92rem; }
.card .btn svg { width: 0.85em; height: 0.85em; flex: none; }

/* Featured tier — the two complete systems get a darker treatment */
.card-grid.featured { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card.card-dark {
  background: linear-gradient(160deg, var(--forest-800), var(--forest-900));
  border-color: rgba(224,179,88,0.28);
  color: var(--offwhite);
}
.card.card-dark p { color: rgba(243,238,226,0.82); }
.card.card-dark .price { color: var(--honey-300); }
.card.card-dark .price .per { color: rgba(243,238,226,0.6); }
.card-tag {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--honey-300); margin-bottom: 0.7rem;
}

/* Subscription band */
.subs { background: linear-gradient(180deg, var(--offwhite), var(--paper)); border-block: 1px solid var(--line); }

/* Closing note */
.closing { padding-block: clamp(3rem, 6vw, 4.5rem); }
.closing-card {
  background: rgba(251, 248, 240, 0.93);
  border: 1px solid var(--line);
  border-left: 4px solid var(--honey);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  max-width: 78ch;
}
.closing-card h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.95rem); margin-bottom: 0.9rem; }
.closing-card p { color: #4a4f45; }
.closing-card p + p { margin-top: 0.9rem; }
.closing-card a { color: var(--honey-600); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(192,135,31,0.45); }
.closing-card a:hover { color: var(--forest-700); border-color: var(--forest-700); }

/* Footer */
.site-footer { background: var(--charcoal); color: rgba(243,238,226,0.78); padding-block: 2.6rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.footer-brand { display: flex; align-items: center; gap: 0.9rem; }
.footer-mark { width: 46px; height: 46px; background: var(--paper); border-radius: 50%; padding: 3px; flex: none; }
.footer-name { font-family: var(--serif); font-size: 1.15rem; color: var(--offwhite); }
.footer-parent { font-size: 0.82rem; color: var(--honey-300); letter-spacing: 0.03em; }
.footer-legal { text-align: right; font-size: 0.9rem; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 1.05rem;
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 600;
}
.footer-links a { color: rgba(243, 238, 226, 0.82); text-decoration: none; border-bottom: 1px solid rgba(224, 179, 88, 0.35); }
.footer-links a:hover { color: var(--honey-300); border-color: var(--honey-300); }
.footer-sub { color: rgba(243,238,226,0.55); margin-top: 0.25rem; }
.footer-sub a { color: var(--honey-300); text-decoration: none; border-bottom: 1px solid rgba(224,179,88,0.45); }
.footer-sub a:hover { color: var(--offwhite); border-color: var(--offwhite); }

/* Animations */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .site-nav { gap: 0.9rem; }
  .site-nav a { font-size: 0.88rem; }
  .nav-cta { padding: 0.42em 0.9em; }
}
@media (max-width: 880px) {
  .brand-tag { display: none; }
}
@media (max-width: 760px) {
  .section-nav-label { display: none; }
  .sponsor-bar-copy { font-size: 0.88rem; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 152px; }
  .sponsor-bar-inner { gap: 0.5rem 1rem; padding-block: 0.6rem; }
  .sponsor-bar-cta { font-size: 0.9rem; padding: 0.55em 1.2em; }
  .section-nav-inner { gap: 0; }
  .header-inner { flex-wrap: wrap; gap: 0.75rem; min-height: 0; }
  .site-nav { width: 100%; justify-content: flex-start; gap: 0.75rem 1.1rem; }
  .site-nav a { font-size: 0.85rem; }
  .card-grid, .card-grid.featured { grid-template-columns: 1fr; }
  .card-foot { flex-direction: column; align-items: stretch; text-align: left; }
  .card-foot .btn { width: 100%; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-legal { text-align: left; }
  .footer-links { justify-content: flex-start; }
}

/* ==========================================================================
   Added when the catalogue was split across pages
   ========================================================================== */

/* ---- Sticky category bar -------------------------------------------------
   The section menu inside the header doubles as the shop's category switcher.
   On a category page its links point at the other pages, so the bar is how a
   visitor moves between hardware, consumables, gear and subscriptions without
   ever going back to the hub. The current page is marked with aria-current.
   ------------------------------------------------------------------------- */
.section-nav-list a.is-active,
.section-nav-list a[aria-current="page"] {
  color: #1f1606;
  background: var(--honey-300);
  border-color: var(--honey-300);
}
.section-nav-list .nav-sep {
  width: 1px;
  height: 18px;
  margin-inline: 0.45rem;
  background: rgba(224, 179, 88, 0.28);
}
.section-nav-count {
  margin-left: 0.4em;
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
}

/* ---- Filter buttons above the grid --------------------------------------
   Progressive enhancement: without JavaScript these are plain anchors that
   jump to the matching category heading, which is why each one carries a real
   href as well as a data-filter.
   ------------------------------------------------------------------------- */
.filter-bar {
  position: sticky;
  top: var(--header-h, 128px);
  z-index: 40;
  margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
  padding-block: 0.7rem;
  background: linear-gradient(180deg, var(--paper) 72%, rgba(251, 248, 240, 0));
}
.filter-bar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}
.filter-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}
.filter-label {
  flex: none;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.filter-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(251, 248, 240, 0.93);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.5em 1em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}
.filter-btn:hover,
.filter-btn:focus-visible {
  border-color: var(--honey);
  color: var(--honey-600);
  transform: translateY(-1px);
}
.filter-btn[aria-current="true"] {
  background: var(--forest-800);
  border-color: var(--forest-800);
  color: var(--offwhite);
  transform: none;
}
.filter-btn[aria-current="true"]:hover { color: var(--honey-300); }
.filter-btn .filter-n {
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.filter-status {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Hidden by the filter rather than absent from the page, so the basket's
   data attributes stay in the DOM and nothing has to be re-rendered. */
[hidden].is-filtered { display: none !important; }

/* ---- Billing terms ------------------------------------------------------
   A one-off purchase and a monthly subscription must never be mistaken for
   each other, so they differ in fill, accent edge and badge — not colour
   alone, which would be lost on a colour-blind buyer.
   ------------------------------------------------------------------------- */
.card .billing-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  border: 1px solid rgba(192, 135, 31, 0.4);
  background: rgba(192, 135, 31, 0.12);
  color: var(--honey-600);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}
.card .billing-tag svg { width: 0.9em; height: 0.9em; flex: none; }

.card--monthly {
  background: linear-gradient(170deg, rgba(47, 90, 64, 0.09), rgba(251, 248, 240, 0.95) 58%);
  border-left: 4px solid var(--forest-600);
  border-bottom-color: var(--forest-600);
}
.card--monthly .price { color: var(--forest-700); }
.card--monthly .billing-tag {
  border-color: rgba(35, 68, 48, 0.4);
  background: rgba(35, 68, 48, 0.1);
  color: var(--forest-700);
}
.card--monthly .btn-primary {
  background: var(--forest-700);
  border-color: var(--forest-700);
  color: var(--offwhite);
}
.card--monthly .btn-primary:hover { background: var(--forest-600); }

.card-dark .billing-tag {
  border-color: rgba(224, 179, 88, 0.45);
  background: rgba(224, 179, 88, 0.14);
  color: var(--honey-300);
}

/* ---- Category chooser on the hub ---------------------------------------- */
.choose { padding-block: clamp(2.6rem, 6vw, 4.5rem); background: var(--offwhite); border-block: 1px solid var(--line); }
.choose-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}
.choose-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: clamp(1.3rem, 2.4vw, 1.7rem);
  border: 1px solid var(--line);
  border-top: 4px solid var(--honey);
  border-radius: var(--radius);
  background: rgba(251, 248, 240, 0.95);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1), box-shadow 0.25s, border-color 0.25s;
}
.choose-card:hover,
.choose-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px -18px rgba(0, 0, 0, 0.28);
  border-top-color: var(--honey-600);
}
.choose-card--monthly { border-top-color: var(--forest-600); }
.choose-card--monthly:hover, .choose-card--monthly:focus-visible { border-top-color: var(--forest-700); }
.choose-card h3 { font-size: 1.16rem; }
.choose-card p { color: #4a4f45; font-size: 0.92rem; line-height: 1.5; }
.choose-meta {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--honey-600);
}
.choose-card--monthly .choose-meta { color: var(--forest-700); }
.choose-meta svg { width: 0.95em; height: 0.95em; flex: none; }
.choose-count { margin-left: auto; font-weight: 600; color: var(--muted); letter-spacing: 0; }

/* ---- Category page lede ------------------------------------------------- */
.page-lede {
  position: relative;
  isolation: isolate;
  color: var(--offwhite);
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(192, 135, 31, 0.24), transparent 58%),
    linear-gradient(172deg, var(--forest-800), var(--forest-900));
  border-bottom: 1px solid rgba(224, 179, 88, 0.18);
  padding-block: clamp(2.4rem, 5vw, 3.8rem);
}
.page-lede-inner { max-width: 70ch; }
.page-lede h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -0.02em; margin-bottom: 1rem; }
.page-lede h1 em { font-style: italic; font-weight: 400; color: var(--honey-300); }
.page-lede p { color: rgba(243, 238, 226, 0.86); }
.page-lede p + p { margin-top: 0.9rem; }
.page-lede .kicker { color: var(--honey-300); }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  font-size: 0.84rem;
  color: rgba(243, 238, 226, 0.62);
}
.breadcrumb a { color: rgba(243, 238, 226, 0.82); text-decoration: none; border-bottom: 1px solid rgba(224, 179, 88, 0.4); }
.breadcrumb a:hover { color: var(--honey-300); }
.breadcrumb li::after { content: "/"; margin-left: 0.45rem; opacity: 0.45; }
.breadcrumb li:last-child::after { content: none; }

/* ---- Cross-links at the foot of a category page ------------------------- */
.also { padding-block: clamp(2.4rem, 5vw, 3.6rem); background: var(--offwhite); border-top: 1px solid var(--line); }
.also h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin-bottom: 1.3rem; }

@media (max-width: 620px) {
  .filter-bar { position: static; background: none; padding-block: 0; }
  .filter-status { margin-left: 0; width: 100%; }
}