/* ============================================================================
   DEFINITELY FOR RATS — stylesheet

   International Typographic Style, applied with a straight face: warm paper,
   near-black ink, one accent (safety orange) reserved for prices and CTAs.
   Hierarchy is carried by size and weight, never by colour. Hairlines and
   monospace marginalia do the rest.

   Shared by index.html and retatrutide.html. Mobile-first.

   Contents
     1  Tokens            8  Product grid + cards
     2  Reset and base    9  Option pills
     3  Utilities        10  Product page: breadcrumb, gallery, buy box
     4  Top bar          11  Numbered accordions
     5  Buttons          12  Tabs and spec table
     6  Hero             13  Footer
     7  Disclaimer       14  Age gate
                         15  Reduced motion
   ========================================================================== */

/* ---- 1. Tokens ------------------------------------------------------------ */
:root {
  /* Palette. The accent is the only colour on the page; it is used for prices,
     primary buttons, and focus rings, and for nothing else. */
  --paper:      #faf8f4;
  --paper-2:    #f1eee7;   /* specimen panels, strips */
  --card:       #fffefb;
  --ink:        #1a1917;
  --ink-soft:   #3d3a34;
  --muted:      #6b665c;   /* 5.4:1 on --paper */
  --line:       #ddd8cd;
  --line-firm:  #c6c0b2;
  --accent:     #c2410c;   /* 7.1:1 on --paper */
  --accent-dim: #9a330a;
  --on-accent:  #fff8f3;

  /* Type */
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing — 4px base, used everywhere. No ad-hoc margins. */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* Layout */
  --maxw: 1200px;
  --gutter: var(--s-5);
  --ease: cubic-bezier(.2, .6, .3, 1);
}

@media (min-width: 768px)  { :root { --gutter: var(--s-6); } }
@media (min-width: 1160px) { :root { --gutter: var(--s-7); } }

/* ---- 2. Reset and base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-8);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  /* Ruled paper, at the very edge of visibility. */
  background-image:
    linear-gradient(to right,  rgba(26, 25, 23, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 25, 23, .045) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* The small-caps monospace label that runs above headings and on labels. */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.rule { height: 1px; background: var(--line); border: 0; }

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

/* Section header: eyebrow, title, hairline. */
.section-head {
  display: grid;
  gap: var(--s-3);
  padding-block-end: var(--s-5);
  border-bottom: 1px solid var(--line);
  margin-block-end: var(--s-7);
}
.section-head h2 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.section-head .note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

/* ---- 4. Top bar ----------------------------------------------------------- */
.topbar {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* tap target */
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--accent); }
.topbar-end { display: flex; align-items: center; gap: var(--s-5); }
.topbar .eyebrow { display: none; }
@media (min-width: 768px) { .topbar .eyebrow { display: block; } }

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.cart-link:hover { color: var(--accent); }
.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ---- 5. Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease),
              color 180ms var(--ease), transform 180ms var(--ease);
}
.btn:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn:active { transform: translateY(1px); }

.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-dim); border-color: var(--accent-dim); }

.btn-ghost { background: transparent; border-color: var(--line-firm); color: var(--ink); }
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }

.btn[disabled], .btn[aria-disabled="true"] {
  background: transparent;
  border-color: var(--line-firm);
  border-style: dashed;
  color: var(--muted);
  cursor: not-allowed;
}
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover {
  background: transparent; border-color: var(--line-firm); transform: none;
}

.btn-block { width: 100%; }

/* ---- 6. Hero -------------------------------------------------------------- */
.hero {
  display: flex;
  align-items: center;
  min-height: 84svh;
  padding-block: var(--s-9) var(--s-8);
}
.hero .wrap { display: grid; gap: var(--s-5); }

.hero-eyebrow { display: flex; align-items: center; gap: var(--s-4); }
.hero-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.hero h1 {
  max-width: 17ch;
  font-size: clamp(40px, 8.4vw, 92px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero .lede {
  max-width: 46ch;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-block-start: var(--s-3);
}
.hero-actions .eyebrow { line-height: 1.7; }

/* ---- 7. Disclaimer strip -------------------------------------------------- */
/* Load-bearing. Never collapsed, never hover-hidden, never below 12px. */
.disclaimer-strip {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
}
.disclaimer-strip .wrap {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-4);
}
@media (min-width: 768px) {
  .disclaimer-strip .wrap {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: var(--s-5);
  }
}
.disclaimer-strip p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);   /* 9.4:1 on --paper-2 */
  max-width: 92ch;
}

/* ---- 8. Product grid and cards -------------------------------------------- */
.catalog { padding-block: var(--s-9) var(--s-10); }

.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three cards into two columns would leave one card stranded; the last card
     takes the full row and lays out horizontally instead. */
  .grid > .card:last-child { grid-column: 1 / -1; flex-direction: row; }
  .grid > .card:last-child .card-panel {
    flex: 0 0 40%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    border-radius: 2px 0 0 2px;
  }
  .grid > .card:last-child .card-body { flex: 1; }
}
@media (min-width: 1160px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid > .card:last-child { grid-column: auto; flex-direction: column; }
  .grid > .card:last-child .card-panel {
    flex: none;
    aspect-ratio: 4 / 3;
    border-bottom: 1px solid var(--line);
    border-right: 0;
    border-radius: 2px 2px 0 0;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease),
              box-shadow 200ms var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--line-firm);
  box-shadow: 0 8px 24px -16px rgba(26, 25, 23, .5);
}
.card:focus-within { border-color: var(--line-firm); }

.card-panel {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  aspect-ratio: 4 / 3;
  padding: var(--s-6);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
.card-panel img { min-width: 0; width: 100%; height: 100%; object-fit: contain; }

.card-badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
}
.card-cat {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
}

.card-body {
  /* Grows to fill the card so .card-foot's auto margin can pin the price and
     button to the bottom, aligned across every card in the row. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-6);
}
.card-name {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.card-name a { color: inherit; text-decoration: none; }
/* The whole card is the target; the button is the affordance. */
.card-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-name a:hover { color: var(--accent); }
.card-tag { margin-block-start: calc(var(--s-1) * -1); }
.card-copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.card-foot {
  display: grid;
  gap: var(--s-4);
  margin-block-start: auto;
  padding-block-start: var(--s-4);
}
.card-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.card-buy .btn { position: relative; z-index: 2; flex: 1 1 auto; }

/* Add to cart + Buy, side by side under the price. */
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.card-actions .btn {
  position: relative;
  z-index: 2;
  padding-inline: var(--s-3);
  font-size: 12px;
  letter-spacing: .06em;
}
.btn.is-added { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.price {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* The new figure is in the DOM on the same frame; only the fade is animated. */
@keyframes price-in { from { opacity: 0; } to { opacity: 1; } }
.price.is-changed { animation: price-in 220ms var(--ease); }

/* ---- 9. Option pills ------------------------------------------------------ */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.pill {
  position: relative;
  z-index: 2;
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-firm);
  border-radius: 2px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease),
              color 160ms var(--ease);
}
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ---- 10. Product page ----------------------------------------------------- */
.breadcrumb {
  padding-block: var(--s-5);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.breadcrumb li::after { content: "/"; margin-inline-start: var(--s-2); color: var(--line-firm); }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--ink); }

.pdp { padding-block-end: var(--s-9); }
.pdp-main {
  display: grid;
  gap: var(--s-7);
  align-items: start;
}
@media (min-width: 1024px) {
  .pdp-main {
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
    gap: var(--s-8);
  }
}

/* Gallery: main image with a vertical thumbnail strip beside it.
   minmax(0,…) and min-width:0 stop the images' intrinsic min-content width
   from blowing the tracks out past the column. */
.gallery { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.gallery > * { min-width: 0; }
@media (min-width: 640px) {
  .gallery.has-thumbs { grid-template-columns: 76px minmax(0, 1fr); }
  .gallery.has-thumbs .thumbs { grid-row: 1; grid-column: 1; flex-direction: column; }
  .gallery.has-thumbs .gallery-main { grid-row: 1; grid-column: 2; }
}
.gallery-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: var(--s-5);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 3px;
}
@media (min-width: 640px) { .gallery-main { padding: var(--s-8); } }
.gallery-main img { min-width: 0; width: 100%; height: 100%; object-fit: contain; }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--s-3); order: 2; }
@media (min-width: 640px) { .thumbs { order: 0; } }
.thumb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: var(--s-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 160ms var(--ease);
}
.thumb img { min-width: 0; width: 100%; height: 100%; object-fit: contain; }
.thumb:hover { border-color: var(--line-firm); }
.thumb[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Buy box */
.buybox { display: grid; gap: var(--s-5); }
.buybox h1 {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.buybox .price {
  font-size: clamp(28px, 3.4vw, 36px);
  min-height: 1.2em;
}
.buybox .lede {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.buybox-head { display: grid; gap: var(--s-2); }
.options { display: grid; gap: var(--s-3); }
.buy-slot { display: grid; gap: var(--s-3); justify-items: center; }
.buy-actions { display: grid; gap: var(--s-3); width: 100%; }
@media (min-width: 480px) { .buy-actions { grid-template-columns: 1fr 1fr; } }
.buy-actions .btn { width: 100%; }

.notice {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-firm);
  border-inline-start: 3px solid var(--accent);
  border-radius: 2px;
  background: var(--paper-2);
}
.notice p {
  margin-block-start: var(--s-2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.trust { display: grid; gap: var(--s-3); }
.trust li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.trust svg { flex: none; width: 15px; height: 15px; color: var(--accent); }

/* ---- 11. Numbered accordions ---------------------------------------------- */
.notes { border-top: 1px solid var(--line); }
.note-item { border-bottom: 1px solid var(--line); }
.note-item summary {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  min-height: 44px;
  padding-block: var(--s-5);
  cursor: pointer;
  list-style: none;
}
.note-item summary::-webkit-details-marker { display: none; }
.note-item summary:hover .note-title { color: var(--accent); }
.note-num {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}
.note-title {
  flex: 1;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 500;
  letter-spacing: -.01em;
  transition: color 160ms var(--ease);
}
.note-sign {
  flex: none;
  width: 12px; height: 12px;
  position: relative;
  align-self: center;
  color: var(--muted);
}
.note-sign::before, .note-sign::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  width: 12px; height: 1.5px; background: currentColor;
  transition: transform 200ms var(--ease);
}
.note-sign::after { transform: rotate(90deg); }
.note-item[open] .note-sign::after { transform: rotate(0deg); }
.note-body {
  display: grid;
  gap: var(--s-3);
  max-width: 78ch;
  padding-block-end: var(--s-6);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---- 12. Tabs and spec table ---------------------------------------------- */
.tabs { margin-block-start: var(--s-9); }
.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.tab {
  padding: var(--s-3) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-block-end: -1px;
  background: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.tabpanel { padding-block-start: var(--s-6); }
.tabpanel[hidden] { display: none; }
.prose { display: grid; gap: var(--s-4); max-width: 72ch; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }

.spec { width: 100%; max-width: 720px; border-collapse: collapse; }
.spec th, .spec td {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
  font-size: 14.5px;
}
.spec th {
  width: 40%;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec td { color: var(--ink-soft); }

/* ---- 12b. Checkout page --------------------------------------------------- */
.checkout { padding-block-end: var(--s-10); }
.checkout-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--s-8); }
  /* The summary follows you down a long cart. */
  .summary { position: sticky; top: var(--s-5); }
}

/* Column headings over the lines, in the catalogue's register. */
.clines-head {
  display: none;
  padding-block-end: var(--s-3);
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 560px) {
  .clines-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: var(--s-5);
    align-items: baseline;
  }
  .clines-head span:nth-child(2) { width: 132px; text-align: center; }
  .clines-head span:nth-child(3) { width: 72px; text-align: end; }
  /* Spacer matching the Remove column. */
  .clines-head::after { content: ""; width: 58px; }
}

.clines { border-top: 1px solid var(--line); }
@media (min-width: 560px) { .clines { border-top: 0; } }
.cline {
  display: grid;
  grid-template-areas: "id id" "qty price" "rm rm";
  grid-template-columns: auto 1fr;
  gap: var(--s-3) var(--s-4);
  align-items: center;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .cline {
    grid-template-areas: "id qty price rm";
    /* Fixed tracks so the rows line up under .clines-head. */
    grid-template-columns: minmax(0, 1fr) 132px 72px 58px;
    gap: var(--s-5);
  }
  .qty { justify-self: center; }
}
.cline-id { grid-area: id; min-width: 0; }
.cline-name { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.cline-price {
  grid-area: price;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.cline-remove {
  grid-area: rm;
  justify-self: start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.cline-remove:hover { color: var(--accent); }
@media (min-width: 560px) { .cline-remove { justify-self: end; } }

.qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-firm);
  border-radius: 2px;
}
.qty-btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.qty-btn:hover { background: var(--paper-2); }
.qty-n {
  min-width: 34px;
  text-align: center;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--line-firm);
  align-self: stretch;
  display: grid;
  place-items: center;
}

.cart-empty {
  padding-block: var(--s-8);
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
  text-align: center;
}

.summary {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.summary-rows { display: grid; }
.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--muted);
}
.summary-total {
  padding-block-end: 0;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.summary-total .price { font-size: 26px; }
.summary-fine { font-size: 12.5px; line-height: 1.55; color: var(--muted); }

.cart-status {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-firm);
  border-radius: 2px;
  background: var(--paper-2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cart-status.is-error { border-color: var(--accent); }
.paylinks { display: grid; gap: var(--s-2); }

.order-note {
  padding: var(--s-4) var(--s-5);
  margin-block-end: var(--s-6);
  border: 1px solid var(--accent);
  border-inline-start: 3px solid var(--accent);
  border-radius: 2px;
  background: var(--paper-2);
  font-size: 14px;
  color: var(--ink-soft);
}
.order-note.is-cancelled { border-color: var(--line-firm); border-inline-start-color: var(--line-firm); }

/* ---- 13. Footer ----------------------------------------------------------- */
.site-foot {
  padding-block: var(--s-8);
  background: var(--ink);
  color: #d8d2c6;
}
.site-foot .wrap { display: grid; gap: var(--s-5); }
.site-foot .brand { color: #f3efe6; }
.site-foot .brand:hover { color: #fff; }
.foot-disclaimer {
  max-width: 84ch;
  font-size: 13px;
  line-height: 1.65;
  color: #d8d2c6;   /* 11.6:1 on --ink */
}
.foot-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-start: var(--s-5);
  border-top: 1px solid rgba(216, 210, 198, .22);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a9a294;   /* 5.1:1 on --ink */
}

/* ---- 14. Age gate --------------------------------------------------------- */
.agegate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: rgba(26, 25, 23, .86);
}
.agegate-box {
  width: 100%;
  max-width: 480px;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-6) var(--s-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.agegate-box h2 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.agegate-box p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.agegate-actions { display: grid; gap: var(--s-3); margin-block-start: var(--s-2); }
@media (min-width: 480px) { .agegate-actions { grid-template-columns: 1fr auto; } }
.agegate-box .agegate-fine {
  padding-block-start: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---- 15. Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover { transform: none; }
}