/*
Theme Name: Horse Power Aminos — Leather
Theme URI: https://horsepoweraminos.com/
Author: Horse Power Aminos
Description: Tooled-leather and tack skin for Horse Power Aminos. Saddle-tan ground, real tooled-leather bands with azure and pasture-green belt edges, saddle-stitch borders, pure white content cards. Zilla Slab display over Figtree. WooCommerce ready.
Version: 2.13.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: horsepower
*/

/* ============================================================
   1. TOKENS  — change the look here; everything else follows
   ============================================================ */
:root {
  /* Grounds and ink */
  --color-bg: #d8c49b;            /* saddle-tan page ground */
  --color-bg-2: #cbb385;          /* second band ground */
  --color-surface: #cbb385;
  --color-text: #241611;
  --color-divider: rgba(27, 15, 8, 0.20);
  --paper: #ffffff;               /* pure white — every card. Non-negotiable. */

  /* Accents */
  --color-accent: #c67139;        /* terracotta — all CTAs */
  --color-accent-2: #5f9134;      /* pasture green — second voice */
  --lt-azure: #2f7fb8;            /* azure — third voice, belt top line */
  --lt-azure-700: #1f5f8f;
  --lt-azure-800: #17496e;
  --lt-azure-200: #cbe4f5;
  --lt-brass: #c8a24c;            /* conchos and hardware */
  --lt-oxblood: #6b2b25;
  --lt-stitch: #dfcda8;           /* saddle stitch on leather */
  --lt-stitch-dim: #b79f74;       /* saddle stitch on tan ground */

  /* Neutral ramp = saddle-leather browns */
  --color-neutral-100: #ffffff;
  --color-neutral-200: #f1e4c9;
  --color-neutral-300: #d9bd93;
  --color-neutral-400: #b98a55;
  --color-neutral-500: #8a5a34;
  --color-neutral-600: #6b432b;
  --color-neutral-700: #5a4433;
  --color-neutral-800: #3a2118;
  --color-neutral-900: #1b0f08;

  /* Terracotta ramp */
  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #f3c19b;
  --color-accent-400: #d98f57;
  --color-accent-500: #c67139;
  --color-accent-600: #a85a29;
  --color-accent-700: #8f4a1f;
  --color-accent-800: #753b16;
  --color-accent-900: #5c2e10;

  /* Pasture-green ramp */
  --color-accent-2-100: #eef6e2;
  --color-accent-2-200: #d3e6ba;
  --color-accent-2-300: #b6d493;
  --color-accent-2-400: #86b45c;
  --color-accent-2-500: #5f9134;
  --color-accent-2-600: #4a7a26;
  --color-accent-2-700: #3c661e;
  --color-accent-2-800: #2f5217;
  --color-accent-2-900: #203a0f;

  --font-heading: "Zilla Slab", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;
  /* HPA Logo lettering — western wood type */
  --font-brand: "Rye", "Zilla Slab", Georgia, serif;

  --space-1: 4px;  --space-2: 9px;  --space-3: 13px;
  --space-4: 18px; --space-6: 26px; --space-8: 35px;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(27, 15, 8, 0.18);
  --shadow-md: 0 3px 10px rgba(27, 15, 8, 0.22);
  --shadow-lg: 0 12px 32px rgba(27, 15, 8, 0.30);

  /* Leather band imagery */
  --hide: url("assets/images/leather-tooling.webp");
  --hide-2: url("assets/images/leather-tooling-2.webp");
  --frieze: url("assets/images/leather-frieze.webp");
  --hide-veil: linear-gradient(180deg, rgba(50,29,19,0.86) 0%, rgba(32,18,11,0.89) 55%, rgba(22,12,6,0.92) 100%);

  --wrap: 1180px;
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.006em; margin: 0 0 var(--space-2);
}
h1 { font-size: 54px; } h2 { font-size: 38px; } h3 { font-size: 24px; } h4 { font-size: 20px; }
h6 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-body); font-weight: 800; }
p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--color-accent-800); text-decoration: none; }
a:hover { color: var(--color-accent-900); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--lt-brass); outline-offset: 2px; }
::selection { background: rgba(198, 113, 57, 0.32); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }
.muted { color: var(--color-neutral-700); }
.kicker {
  color: var(--color-accent-800); margin: 0;
  font-family: var(--font-body); font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
}
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 999; background: #fff;
  padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow-md);
}

/* ============================================================
   3. LEATHER BANDS  — the signature treatment
   Real tooled hide at cover, darkened, finished like a belt:
   azure line along the top, pasture green along the bottom,
   inset saddle-stitch rows, lit-top / burnished-bottom bevel.
   ============================================================ */
.site-header,
.audience,
.section-dark,
.newsletter,
.gallop-copy,
.sidebar-cta,
.site-footer {
  position: relative;
  isolation: isolate;
  color: #f4e9d2;
  background-color: var(--color-neutral-900);
  background-image: var(--hide-veil), var(--hide);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-top: 6px solid var(--lt-azure-700);
  border-bottom: 6px solid var(--color-accent-2-600);
  box-shadow: inset 0 2px 0 rgba(255, 231, 186, 0.22), inset 0 -3px 0 rgba(0, 0, 0, 0.45);
}
/* inset saddle-stitch rows, top and bottom */
.site-header::before,
.audience::before,
.section-dark::before,
.newsletter::before,
.gallop-copy::before,
.sidebar-cta::before,
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 0;
  border-top: 2px dashed rgba(223, 205, 168, 0.42); z-index: 0; pointer-events: none;
}
.site-header::after,
.audience::after,
.section-dark::after,
.newsletter::after,
.gallop-copy::after,
.sidebar-cta::after,
.site-footer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 0;
  border-top: 2px dashed rgba(223, 205, 168, 0.42); z-index: 0; pointer-events: none;
}
.site-header > *, .audience > *, .section-dark > *, .newsletter > *,
.gallop-copy > *, .sidebar-cta > *, .site-footer > * { position: relative; z-index: 1; }

.section-dark h2, .section-dark h3, .section-dark h4,
.newsletter h2, .gallop-copy h2, .sidebar-cta h3 { color: #ffffff; }
.section-dark .kicker { color: var(--color-accent-2-300); }
.section-dark .lede, .section-dark p { color: #f0e3c9; }
.section-dark a, .newsletter a, .site-footer a { color: #ffffff; }

/* Brass hardware line: a thin lit edge under the azure belt line */
.section-dark, .site-footer, .newsletter, .audience, .gallop-copy, .sidebar-cta, .site-header {
  border-image: none;
}

/* ============================================================
   4. BUTTONS & TAGS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; text-decoration: none; font-family: var(--font-body); font-weight: 600;
  font-size: 17px; line-height: 1.2; min-height: 48px; padding: var(--space-3) var(--space-6);
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  color: var(--color-text); transition: background .15s ease, color .15s ease;
}
.btn-primary {
  background: var(--color-accent-700); color: #fff; border: none;
  box-shadow: inset 0 0 0 1px rgba(232, 208, 147, 0.5), 0 2px 0 var(--color-accent-900);
}
.btn-primary:hover { background: var(--color-accent-800); color: #fff; }
.btn-primary:active { background: var(--color-accent-900); box-shadow: inset 0 0 0 1px rgba(232, 208, 147, 0.4); }
.btn-secondary {
  background: var(--paper); color: var(--color-text);
  border: none; box-shadow: inset 0 0 0 1px var(--color-neutral-400), 0 2px 0 rgba(27, 15, 8, 0.28);
}
.btn-secondary:hover { background: var(--color-accent-100); color: var(--color-accent-900); }
.btn-light { background: var(--paper); color: var(--color-accent-800); }
.btn-light:hover { background: var(--color-accent-100); }
.btn-sm { font-size: 15px; min-height: 44px; padding: var(--space-2) var(--space-6); }

.pill {
  display: inline-flex; align-items: center; gap: 8px; background: var(--paper);
  border: none; box-shadow: inset 0 0 0 1px var(--color-neutral-400), 0 1px 0 rgba(27, 15, 8, 0.22);
  border-radius: 999px; min-height: 44px;
  padding: var(--space-2) var(--space-4); font-size: 14.5px; font-weight: 700; color: var(--color-text);
}
.pill-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--color-accent-2-500); flex: none; }
.tag {
  border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.tag-essential { background: var(--color-accent-200); color: var(--color-accent-900); }
.tag-conditional { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.tag-non { background: var(--lt-azure-200); color: var(--lt-azure-800); }

/* ============================================================
   5. HEADER  — a bridle band across the top
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background-attachment: scroll;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding-top: var(--space-3); padding-bottom: var(--space-3);
}
.brand { display: flex; align-items: center; gap: 12px; color: #f4e9d2; }
.brand:hover { color: #ffffff; }
/* HPA Logo — the brass concho widened to a pill, lettered in Rye wood type */
.brand-mark {
  height: 44px; padding: 0 15px; border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, #f0d79a 0%, var(--lt-brass) 46%, #8a6420 100%);
  color: #1b0f08; display: inline-flex; align-items: center; justify-content: center;
  font-family: "Rye", var(--font-brand, "Zilla Slab"), Georgia, serif;
  font-weight: 400; font-size: 17px; line-height: 1; flex: none;
  box-shadow: inset 0 0 0 2px rgba(27, 15, 8, 0.45), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.brand img, .custom-logo { height: 44px; width: auto; flex: none; }
@media (max-width: 480px) {
  .brand-mark { font-size: 15px; padding: 0 12px; }
}
.brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1; white-space: nowrap; }
.main-nav ul { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.main-nav a { color: #f0e3c9; font-size: 15px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.main-nav a:hover { color: #ffffff; }
.site-header .btn-primary { position: relative; }
.site-header .btn-primary::after {
  /* 44px invisible hit area around the compact Shop button */
  content: ""; position: absolute; inset: -8px -6px; border-radius: 999px;
}
.cart-count {
  background: rgba(255,255,255,0.26); color: #fff; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 999px; font-size: 12px; font-family: var(--font-body);
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.nav-toggle {
  display: none; background: var(--paper); border: none; border-radius: 999px;
  min-height: 48px; padding: 12px 20px; font-family: var(--font-body); font-size: 16px;
  font-weight: 700; color: var(--color-text); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--color-neutral-400), 0 2px 0 rgba(0, 0, 0, 0.4);
}

/* ============================================================
   6. SECTIONS & CARDS
   ============================================================ */
.section { padding-top: 70px; padding-bottom: 70px; }
.section-tight { padding-top: 44px; padding-bottom: 44px; }
.section-light {
  background: var(--color-bg-2);
  border-top: 2px dashed var(--lt-stitch-dim); border-bottom: 2px dashed var(--lt-stitch-dim);
}
.lede { font-size: 18px; line-height: 1.65; color: var(--color-neutral-800); max-width: 44em; }

/* white card, burnished tan frame, saddle-stitch inside it */
.card, .quote, .article, .post-card, .buybox, .amino, .thumb, .size-card {
  background: var(--paper); border: none; position: relative;
  box-shadow: inset 0 0 0 1px var(--color-neutral-400), 0 2px 0 rgba(27, 15, 8, 0.18), var(--shadow-sm);
}
.card, .quote, .article, .post-card, .buybox { border-radius: var(--radius-lg); }
.card, .quote, .buybox { padding: var(--space-6); }
.card::after, .quote::after {
  content: ""; position: absolute; inset: 7px; border: 2px dashed var(--lt-stitch);
  border-radius: calc(var(--radius-lg) - 7px); pointer-events: none;
}
.card > *, .quote > * { position: relative; }
.card h3 { font-size: 21px; margin: var(--space-3) 0 0; }
.card p { font-size: 15px; line-height: 1.55; color: var(--color-neutral-700); margin: var(--space-2) 0 0; }
.marker {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 999px; font-family: var(--font-heading); font-weight: 700; font-size: 16px;
}
.marker-lg { width: 48px; height: 48px; font-size: 21px; }
.m0 { background: var(--color-accent-200); color: var(--color-accent-900); }
.m1 { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.m2 { background: var(--lt-azure-200); color: var(--lt-azure-800); }
.m3 { background: var(--color-accent-300); color: var(--color-accent-900); }
.m4 { background: var(--color-neutral-300); color: var(--color-neutral-900); }
.m5 { background: var(--color-accent-2-300); color: var(--color-accent-2-900); }
.dot-lg { display: block; width: 42px; height: 42px; border-radius: 999px; box-shadow: inset 0 0 0 3px rgba(27,15,8,.28); }
.d0 { background: var(--color-accent-500); } .d1 { background: var(--color-accent-2-500); }
.d2 { background: var(--lt-azure); } .d3 { background: var(--lt-brass); }
.d4 { background: var(--color-accent-700); }

.grid { display: grid; gap: var(--space-4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ============================================================
   7. HERO
   ============================================================ */
.hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 48px; align-items: center; padding-top: 60px; padding-bottom: 40px; }
.hero h1 { margin: var(--space-4) 0 0; }
.hero h1 em { font-style: normal; color: var(--color-accent-2-800); }
.hero-sub { font-size: 19px; line-height: 1.62; margin: var(--space-4) 0 0; max-width: 30em; color: var(--color-neutral-800); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero-actions .btn { min-height: 54px; font-size: 17px; font-weight: 700; }
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 2px dashed var(--lt-stitch-dim); }
.stat { display: flex; align-items: baseline; gap: var(--space-2); }
.stat b { font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--color-accent-2-800); }
.stat:nth-child(2) b { color: var(--lt-azure-800); }
.stat:nth-child(3) b { color: var(--color-accent-800); }
.stat span { font-size: 14px; line-height: 1.25; color: var(--color-neutral-700); }

/* horse in a stitched leather roundel */
.hero-media { position: relative; aspect-ratio: 1 / 1; }
.hero-media .blob {
  position: absolute; inset: 0; border-radius: 999px;
  background-image: var(--hide-2); background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 3px rgba(223, 205, 168, 0.5), inset 0 6px 22px rgba(0,0,0,.5), var(--shadow-lg);
}
.hero-photo {
  position: absolute; inset: 26px; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(230, 213, 178, 0.65), 0 0 0 4px rgba(20, 11, 5, 0.55);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 6% 50%; filter: saturate(.86) contrast(.97); }
.hero-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(20,16,10,.55)); }
.chip-bond { position: absolute; left: 2%; bottom: 4%; box-shadow: var(--shadow-md); font-weight: 700; font-size: 13px; z-index: 2; }
@keyframes bondpulse { 0%,100% { opacity:.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.18); } }
@keyframes bonddash { to { stroke-dashoffset: -40; } }
.bond-dash { animation: bonddash 3s linear infinite; }
.ring-pulse { transform-box: fill-box; transform-origin: center; animation: bondpulse 2.8s ease-in-out infinite; }

/* the cinch strip */
.audience .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.audience .note { font-size: 14.5px; font-weight: 700; color: #f0e3c9; }

/* ============================================================
   8. PROBLEM / HAY
   ============================================================ */
.split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 46px; align-items: center; }
.hay {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(27, 15, 8, 0.55), var(--shadow-md);
}
.hay img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.hay figcaption {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  background: var(--paper); border: none; border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); font-size: 15px; line-height: 1.45;
  box-shadow: inset 0 0 0 1px var(--color-neutral-400), var(--shadow-md);
}
.hay figcaption strong { font-family: var(--font-heading); font-size: 18px; font-weight: 700; display: block; }

/* ============================================================
   9. PRODUCT
   ============================================================ */
.product { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 46px; align-items: center; }
.product-frame {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper); border: none;
  box-shadow: inset 0 0 0 3px rgba(27, 15, 8, 0.5), var(--shadow-md);
}
.product-frame img { width: 100%; height: 100%; object-fit: cover; }
.product-frame .pill { position: absolute; top: var(--space-4); left: var(--space-4); font-size: 13px; font-weight: 700; min-height: 38px; }
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.thumb { cursor: pointer; text-align: center; padding: var(--space-2); border-radius: var(--radius-md); font-family: var(--font-body); color: var(--color-text); }
.thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-sm); }
.thumb span { display: block; font-size: 13px; font-weight: 700; margin-top: var(--space-2); }
.thumb.is-active, .size-card.is-active {
  box-shadow: inset 0 0 0 3px var(--color-accent-700), 0 2px 0 rgba(27, 15, 8, 0.18);
  background: var(--color-accent-100);
}
.benefits { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); }
.benefits li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 16px; line-height: 1.5; }
.benefits li::before {
  content: "\2713"; flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--color-accent-2-200); color: var(--color-accent-2-900);
  font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.sizes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.size-card { cursor: pointer; text-align: left; padding: var(--space-4); border-radius: var(--radius-md); font-family: var(--font-body); color: var(--color-text); min-height: 48px; }
.size-card b { display: block; font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 1.15; }
.size-card small { display: block; font-size: 13px; line-height: 1.4; margin-top: var(--space-1); color: var(--color-neutral-700); }
.size-card i { display: block; font-family: var(--font-heading); font-style: normal; font-weight: 700; font-size: 26px; margin-top: var(--space-3); color: var(--color-accent-800); }
.buybox { margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.buybox .price { font-family: var(--font-heading); font-weight: 700; font-size: 34px; line-height: 1; }
.buybox .note { font-size: 13.5px; margin-top: var(--space-1); color: var(--color-neutral-700); }
.qty {
  display: flex; align-items: center; background: var(--paper); border: none; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--color-neutral-400);
}
.qty button { border: none; background: transparent; width: 52px; height: 52px; font-size: 22px; cursor: pointer; color: var(--color-accent-800); border-radius: 999px; }
.qty span { min-width: 28px; text-align: center; font-weight: 700; }
.fineprint { font-size: 14px; line-height: 1.5; margin-top: var(--space-3); color: var(--color-neutral-700); }

/* ============================================================
   10. AMINO CARDS  (the scientific centrepiece)
   ============================================================ */
/* Phone-only pieces. These must stay hidden at every other width — the phone
   block near the bottom of this file is what turns them on. */
.amino-brief, .lede-short { display: none; }

.amino { border-radius: var(--radius-md); padding: 0; overflow: hidden; }
.amino-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 2px dashed var(--lt-stitch); }
.amino-name { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: 700; font-size: 21px; }
.amino-dot { flex: none; width: 12px; height: 12px; border-radius: 999px; }
.amino ul { list-style: none; padding: var(--space-4) var(--space-6) var(--space-6); margin: 0; display: grid; gap: var(--space-2); }
.amino li { display: flex; gap: var(--space-2); font-size: 14.5px; line-height: 1.5; color: var(--color-neutral-700); }
.amino li::before { content: "\2022"; font-weight: 800; color: var(--color-accent-700); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

.bonus-row {
  display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
  gap: 12px; margin-top: 18px; align-items: stretch;
}
.bonus-photo {
  margin: 0; display: flex; border-radius: 14px; overflow: hidden; padding: 8px;
  background: var(--paper); box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 6px 14px rgba(8,34,49,.4);
}
.bonus-photo img {
  width: 100%; flex: 1; min-height: 300px; object-fit: cover; object-position: 50% 32%;
  border-radius: 9px; display: block;
}
@media (max-width: 900px) { .bonus-row { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 1080px) {
  .bonus-line, .bonus-invite { white-space: normal; text-wrap: pretty; }
  .bonus-line { max-width: 30em; }
  .bonus-invite { max-width: 44em; }
}

/* ---- "No extra charge" — blue-dyed leather panel, six joke aminos ---- */
.bonus {
  margin-top: var(--space-8); border-radius: var(--radius-lg); padding: var(--space-6);
  background-color: #1f4462;
  background-image:
    linear-gradient(160deg, rgba(8,22,34,0.34), rgba(8,22,34,0.5)),
    linear-gradient(#2f6da0, #24557f),
    var(--hide-2);
  background-size: auto, auto, 125%;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: normal, color, normal;
  box-shadow: inset 0 0 0 3px #0e2231, 0 12px 26px rgba(14, 34, 49, 0.3);
}
.bonus-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.bonus-badge {
  display: inline-flex; align-items: center; background: #ffffff; color: #1f4462; border-radius: 999px;
  padding: 8px 16px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(14, 34, 49, 0.35);
}
.bonus-line {
  font-family: var(--font-heading); font-style: italic; font-weight: 700;
  font-size: 21px; line-height: 1.3; color: #ffffff; text-align: center;
  white-space: nowrap;
}
.bonus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bonus-card {
  background: #ffffff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 6px 14px rgba(8, 22, 34, 0.4);
}
.bonus-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px dashed rgba(47, 93, 132, 0.45); }
.bonus-icon {
  flex: none; width: 56px; height: 56px; border-radius: 12px; background: #fff;
  border: 2px solid rgba(47, 93, 132, 0.4); display: flex; align-items: center; justify-content: center;
}
.bonus-icon svg { width: 42px; height: 42px; }
.bonus-name { font-family: var(--font-body); font-weight: 800; font-style: italic; font-size: 16px; line-height: 1.2; color: #16344c; }
.bonus-tag { padding: 8px 14px 0; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1f4462; }
.bonus-card ul { list-style: none; padding: 6px 14px 12px; margin: 0; display: grid; gap: 5px; }
.bonus-card li { display: flex; gap: 7px; font-size: 13px; line-height: 1.42; font-style: italic; color: #2b4d68; }
.bonus-card li > span:first-child { color: #2f5d84; }
.bonus-note-lead {
  max-width: 44em; margin: 0 auto var(--space-4) !important; font-size: 14.5px !important;
}
.bonus-note {
  font-size: 14px; font-weight: 700; line-height: 1.5; margin: var(--space-3) auto 0;
  text-align: center; color: #eaf3fb;
}
.bonus-invite {
  margin: var(--space-5) auto 0; text-align: center; white-space: nowrap;
  font-family: var(--font-heading); font-size: 17px; line-height: 1.45; color: #eaf3fb;
}
.bonus-more { margin: 2px 0 0; text-align: center; }
.bonus-more a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  font-family: var(--font-heading); font-size: 17px; color: #ffffff;
  text-decoration: underline; text-underline-offset: 3px;
}
.bonus-more a:hover { color: #bfdcf3; }
.bonus-invite a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  color: #ffffff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.bonus-invite a:hover { color: #bfdcf3; }

/* ============================================================
   11. GALLOP BAND / TESTIMONIALS / NEWSLETTER
   ============================================================ */
.gallop { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 3px rgba(27,15,8,.5), var(--shadow-md); }
.gallop-photo { position: relative; height: 100%; min-height: 340px; background: var(--color-neutral-800); }
.gallop-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(.97); }
.gallop-copy { padding: 42px; display: flex; flex-direction: column; justify-content: center; border-top: none; border-bottom: none; }
.gallop-copy h2 { font-size: 34px; margin: 0; }
.gallop-copy p { font-size: 17px; line-height: 1.6; margin: var(--space-4) 0 0; color: #f0e3c9; }
.gallop-copy .btn { margin-top: var(--space-6); align-self: flex-start; }
.gallop-copy::before, .gallop-copy::after { left: 18px; right: 18px; }

/* ============================================================
   11b. SADDLE BAND
   ============================================================ */
.saddle-band {
  position: relative;
  background-image: linear-gradient(rgba(28,15,8,.68), rgba(19,10,5,.78)), url('assets/images/leather-tile-sm.webp');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: repeat, no-repeat;
  border-top: 3px solid var(--color-neutral-900);
  border-bottom: 3px solid var(--color-neutral-900);
  color: #f4e9d2;
}
.saddle-frieze { height: 66px; overflow: hidden; border-bottom: 2px dashed rgba(230,213,178,.32); }
.saddle-frieze span {
  display: block; width: 100%; height: 66px;
  background-image: linear-gradient(rgba(27,15,8,.34), rgba(27,15,8,.34)), url('assets/images/frieze-band.webp');
  background-size: auto, auto 100%;
  background-position: center, center;
  background-repeat: repeat, repeat-x;
}
.saddle-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--space-8); align-items: center;
  padding-top: var(--space-8); padding-bottom: var(--space-4);
}
.saddle-photo {
  position: relative; aspect-ratio: 3 / 2; border-radius: 22px; padding: 10px;
  background-image: linear-gradient(150deg, rgba(107,67,43,.4), rgba(42,24,15,.58)), url('assets/images/leather-tooling-2.webp');
  background-size: auto, 380px; background-position: center, center;
  box-shadow: 0 16px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(27,15,8,.6), inset 0 2px 3px rgba(255,232,190,.26);
}
.saddle-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  display: block; border-radius: 14px; box-shadow: inset 0 0 0 3px rgba(230,213,178,.55);
}
.saddle-grid .kicker { color: var(--lt-brass); margin: 0; }
.saddle-grid h2 { font-size: 38px; line-height: 1.1; margin: var(--space-3) 0 0; color: #f7eeda; }
.saddle-grid p { font-size: 17.5px; line-height: 1.65; margin: var(--space-4) 0 0; max-width: 34em; color: #e0cfad; }
.saddle-grid .btn { margin-top: var(--space-6); }

/* ---- the science, now the second half of the saddle band ---- */
.science-block { padding-bottom: var(--space-8); }
.science-rule { height: 0; border-top: 2px dashed rgba(230,213,178,.34); margin-bottom: var(--space-6); }
.science-head {
  max-width: 44em; border-radius: 20px;
  padding: var(--space-3) var(--space-6) var(--space-4);
  margin-left: calc(var(--space-6) * -1);
  background: linear-gradient(90deg, rgba(20,11,5,.72), rgba(20,11,5,.5) 62%, rgba(20,11,5,0) 100%);
}
.science-head .kicker { color: var(--lt-brass); margin: 0; }
.science-head h2 { font-size: 36px; line-height: 1.1; margin: var(--space-2) 0 0; color: #f7eeda; }
.science-head .lede { font-size: 17px; line-height: 1.55; margin: var(--space-3) 0 0; color: #e0cfad; }

.zoom-grid { margin-top: var(--space-6); gap: var(--space-3); }
.zoom-card { padding: 20px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.zoom-head { position: relative; display: flex; align-items: center; gap: 12px; }
.zoom-card .marker { flex: none; }
.zoom-card h3 { margin: 14px 0 0; }
.zoom-card p { margin-top: 5px; font-size: 14.5px; line-height: 1.5; }
.molecule { flex: none; width: 74px; height: 46px; }

/* the three amino classes — colour-coded so they carry on the dark band */
.cat-grid { margin-top: var(--space-3); gap: var(--space-3); }
.cat { border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.cat-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 19px; line-height: 1.2; }
.cat-dot { flex: none; width: 14px; height: 14px; border-radius: 999px; }
.cat-text { font-size: 14.5px; line-height: 1.55; margin-top: 8px; }
.cat-0 { background: #f7d9b8; box-shadow: inset 0 0 0 2px #b35f2a, 0 8px 18px rgba(0,0,0,.3); }
.cat-0 .cat-title { color: #6d3512; } .cat-0 .cat-dot { background: #8f4a1f; } .cat-0 .cat-text { color: #4a2a12; }
.cat-1 { background: #d7ebbb; box-shadow: inset 0 0 0 2px #4a7a26, 0 8px 18px rgba(0,0,0,.3); }
.cat-1 .cat-title { color: #2b4d15; } .cat-1 .cat-dot { background: #3f6a22; } .cat-1 .cat-text { color: #25400f; }
.cat-2 { background: #cfe4f4; box-shadow: inset 0 0 0 2px #2f7fb8, 0 8px 18px rgba(0,0,0,.3); }
.cat-2 .cat-title { color: #154267; } .cat-2 .cat-dot { background: #1f5f8f; } .cat-2 .cat-text { color: #123852; }

/* ---- testimonial heading, under the banner ---- */
.stories-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.stories-head h2 { font-size: 36px; line-height: 1.1; margin: var(--space-2) 0 0; }
.stories-all { font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; }


/* ---- who it's for: heading beside the barn photograph ---- */
.whofor-head {
  display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr) minmax(0,240px);
  gap: var(--space-6); align-items: center;
}
.whofor-head h2 { font-size: 34px; line-height: 1.12; text-wrap: pretty; }
/* The hat sits centred in its own grid cell at every width — desktop, tablet
   and phone alike. Do not put justify-self: end/start back on it. */
.whofor-hat {
  width: 100%; height: auto; display: block; justify-self: center; margin-inline: auto;
  filter: drop-shadow(0 14px 20px rgba(27,15,8,.4));
}
.whofor-photo {
  margin: 0; background: var(--paper); border-radius: 20px; padding: var(--space-4);
  box-shadow: 0 0 0 1px var(--lt-hair), var(--shadow-md);
}
.whofor-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 52% 40%;
  display: block; border-radius: 12px;
}
@media (max-width: 1080px) {
  .whofor-head { grid-template-columns: minmax(0,1fr) minmax(0,200px); }
  .whofor-photo { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 700px) {
  .whofor-head { grid-template-columns: minmax(0,1fr); }
  .whofor-hat { justify-self: center; max-width: 220px; }
}

.quote { border-radius: var(--radius-lg); padding: var(--space-6); margin: 0; }

/* ---- hoof + coat evidence pair ---- */
.tissue { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.tissue-card {
  margin: 0; display: grid; grid-template-columns: minmax(0,150px) minmax(0,1fr);
  gap: var(--space-4); align-items: center; background: var(--paper);
  border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: 0 0 0 1px var(--lt-hair), var(--shadow-md);
}
.tissue-card img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; display: block;
  box-shadow: inset 0 0 0 2px rgba(230,213,178,.35);
}
.tissue-card figcaption { font-size: 14.5px; line-height: 1.55; color: var(--color-neutral-700); }
.tissue-card strong { display: block; font-weight: 800; font-size: 16px; margin-bottom: 5px; color: var(--lt-ink); }
@media (max-width: 900px) { .tissue { grid-template-columns: minmax(0,1fr); } }

.product-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  font-size: 14.5px; font-weight: 700; color: var(--color-accent-800);
  text-decoration: underline; text-underline-offset: 3px;
}
.product-link:hover { color: var(--color-accent-900); }

/* ---- three-up testimonial row: photo / video / photo ---- */
.stories {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4); margin-top: var(--space-4); align-items: stretch;
}
.story { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.story::before { inset: 7px; }
.story-media {
  position: relative; aspect-ratio: 16 / 10; margin: 14px 14px 0;
  border-radius: 12px; overflow: hidden; background: var(--color-neutral-800);
  box-shadow: inset 0 0 0 2px rgba(27,15,8,.28);
}
.story-media img,
.story-media iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block;
}
.story-body { position: relative; padding: var(--space-4) var(--space-6) var(--space-6); display: flex; flex-direction: column; flex: 1; }
.story-body blockquote { flex: 1; }
.avatar-play { font-size: 15px; padding-left: 3px; }
.quote .mark { font-family: var(--font-heading); font-weight: 700; font-size: 42px; line-height: .7; height: 26px; color: var(--color-accent-400); }
.quote blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; font-family: var(--font-heading); }
.quote figcaption { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); font-size: 14px; }
.avatar {
  width: 44px; height: 44px; border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, #f0d79a 0%, var(--lt-brass) 46%, #8a6420 100%);
  color: var(--color-neutral-900); font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: inset 0 0 0 2px rgba(27, 15, 8, 0.4);
}

.newsletter {
  overflow: hidden; border-radius: var(--radius-lg); padding: 46px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center;
}
.newsletter::before, .newsletter::after { left: 18px; right: 18px; }
.newsletter h2 { font-size: 34px; margin: 0; }
.newsletter p { font-size: 16.5px; line-height: 1.6; margin: var(--space-3) 0 0; color: #f0e3c9; }
.newsletter form { position: relative; z-index: 1; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.newsletter input {
  flex: 1; min-width: 190px; border-radius: 999px; padding: var(--space-4) var(--space-6);
  font-size: 16px; min-height: 52px; border: none; background: var(--paper); font-family: var(--font-body);
}

/* ============================================================
   12. INNER PAGES
   ============================================================ */
.page-head { border-bottom: 2px dashed var(--lt-stitch-dim); background: var(--color-bg-2); }
.page-head .wrap { padding-top: 22px; padding-bottom: 18px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--color-neutral-700); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.page-head h1 { font-size: 31px; margin: 0; max-width: 24em; }
.page-head .kicker { margin-bottom: 4px; }
.page-head .lede { font-size: 17px !important; margin-top: 10px !important; }
.page-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 46px; align-items: start; padding-top: 54px; padding-bottom: 70px; }
.page-body.no-sidebar { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-left: auto; margin-right: auto; }
.article { padding: 42px; }

/* A page builder owns its own width. Drop the reading cap, the white card and
   its padding so Elementor sections can run edge to edge. */
.page-body.is-builder { max-width: none; }
.page-body.is-builder.no-sidebar { max-width: none; }
.article.is-builder-content {
  padding: 0; background: none; box-shadow: none; border-radius: 0;
}
.article.is-builder-content::before, .article.is-builder-content::after { display: none; }
/* Elementor's own full-width sections need the wrap padding gone too. */
.page-body.is-builder.full-bleed { padding-left: 0; padding-right: 0; max-width: none; }
.sidebar { display: grid; gap: var(--space-4); position: sticky; top: 96px; }

/* ---- vertical photo reel (blog list + single posts) ---- */
.page-body.with-photos { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
/* breathing room on the outer edge so the reel never sits against the page edge */
.photo-col { align-self: stretch; padding-right: var(--space-6); }
.page-body.with-photos { padding-right: var(--space-4); }
.photo-frame {
  position: sticky; top: 92px; height: calc(100vh - 132px); min-height: 420px;
  overflow: hidden; border-radius: var(--radius-lg);
  background: var(--lt-800);
  box-shadow: inset 0 0 0 3px var(--color-neutral-900), var(--shadow-md);
}
/* the leather-belt edges, matched to the dark bands */
.photo-frame::before, .photo-frame::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px; z-index: 2; pointer-events: none;
}
.photo-frame::before { top: 0; background: var(--lt-azure); }
.photo-frame::after { bottom: 0; background: var(--lt-green); }
.photo-track { will-change: transform; }
.photo-track img {
  display: block; width: 100%; height: auto; margin: 0 0 10px; border-radius: 0;
}
.sidebar-cta { border-radius: var(--radius-lg); padding: var(--space-6); overflow: hidden; }
.sidebar-cta::before, .sidebar-cta::after { left: 14px; right: 14px; }
.sidebar-cta h3 { font-size: 21px; margin: 0; }
.sidebar-cta p { font-size: 15px; line-height: 1.6; margin: var(--space-3) 0 0; color: #f0e3c9; }
.sidebar-cta a.tel { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-4); font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: #fff; }

.prose h2 { font-size: 30px; line-height: 1.14; margin: 2.2em 0 .5em; }
.prose > :first-child { margin-top: 0; }
.prose h3 { font-size: 22px; margin: 1.8em 0 .4em; }
.prose p { font-size: 17.5px; line-height: 1.7; margin: 0 0 1.1em; color: var(--color-neutral-800); }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.2em; }
.prose ul { list-style: none; padding-left: 0; display: grid; gap: 10px; }
.prose ul li { display: flex; gap: 12px; font-size: 17px; line-height: 1.6; color: var(--color-neutral-800); }
.prose ul li::before { content: "•"; color: var(--color-accent-700); font-weight: 800; }
.prose ol li { font-size: 17px; line-height: 1.6; color: var(--color-neutral-800); margin-bottom: 10px; }
.prose strong { color: var(--color-text); }
.prose a { text-decoration: underline; }
.prose blockquote { margin: 1.5em 0; padding: var(--space-4) var(--space-6); background: var(--color-neutral-200); border-radius: var(--radius-md); font-family: var(--font-heading); font-weight: 700; font-size: 19px; box-shadow: inset 0 0 0 2px var(--lt-stitch); }
.prose img { border-radius: var(--radius-md); margin: 1.5em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.prose th, .prose td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-neutral-300); font-size: 16px; }
.prose th { font-family: var(--font-heading); font-weight: 700; }
.prose > *:last-child { margin-bottom: 0; }

.form-field { display: grid; gap: 6px; margin-bottom: var(--space-4); }
.form-field > span { font-size: 14px; font-weight: 700; }
.form-field input, .form-field textarea, .wpcf7 input, .wpcf7 textarea {
  width: 100%; border: none; box-shadow: inset 0 0 0 1px var(--color-neutral-400); border-radius: 999px;
  padding: var(--space-3) var(--space-4); min-height: 48px;
  font-family: var(--font-body); font-size: 16px; background: var(--paper);
}
.form-field textarea, .wpcf7 textarea { border-radius: var(--radius-md); resize: vertical; }

/* Blog */
.post-card { border-radius: var(--radius-lg); overflow: hidden; }
.post-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.post-card .body { padding: var(--space-6); }
.post-card h2 { font-size: 23px; margin: 0; }
.post-meta { font-size: 13.5px; color: var(--color-neutral-700); margin-top: var(--space-2); }

/* ---- post furniture (2.12.0): byline, contents, terms, author, related ---- */
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin: var(--space-3) 0 0; font-size: 14.5px; color: var(--color-neutral-800);
}
.byline-by { font-weight: 700; color: var(--color-neutral-900); }
.byline-sep { color: var(--lt-stitch-dim); }

.post-toc {
  margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5);
  background: var(--color-bg-2); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 2px var(--lt-stitch-dim);
}
.post-toc-title {
  margin: 0 0 var(--space-2); font-family: var(--font-body); font-size: 12.5px;
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-800);
}
.post-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.post-toc a {
  display: flex; align-items: center; min-height: 44px; font-size: 15.5px;
  line-height: 1.35; color: var(--color-accent-800); text-decoration: none;
}
.post-toc a:hover { color: var(--color-accent-900); text-decoration: underline; }
.post-toc .toc-l3 a { padding-left: var(--space-4); font-size: 15px; color: var(--color-neutral-800); }

.post-faq { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 2px dashed var(--lt-stitch-dim); }
.post-faq h2 { font-size: 26px; margin: 0 0 var(--space-4); }
.post-faq dl { margin: 0; }
.post-faq dt { font-family: var(--font-body); font-weight: 800; font-size: 16.5px; line-height: 1.4; margin-top: var(--space-4); color: var(--color-neutral-900); }
.post-faq dd { margin: var(--space-2) 0 0; font-size: 16px; line-height: 1.62; color: var(--color-neutral-800); }

.post-terms {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 2px dashed var(--lt-stitch-dim);
}
.post-terms-label {
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-neutral-700); margin-right: var(--space-2);
}
.term-pill {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--space-5); border-radius: 999px; font-size: 15px; font-weight: 600;
  color: var(--color-accent-900); background: var(--color-accent-100);
  box-shadow: inset 0 0 0 1px var(--color-accent-300); text-decoration: none;
}
.term-pill:hover { background: var(--color-accent-200); color: var(--color-accent-900); }

.author-card {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-5);
  align-items: start; margin-top: var(--space-6); padding: var(--space-6);
}
.author-card:only-child, .author-card > div:only-child { grid-column: 1 / -1; }
.author-photo { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; box-shadow: inset 0 0 0 2px var(--lt-stitch); }
.author-name { margin: 0; font-family: var(--font-heading); font-size: 21px; line-height: 1.2; }
.author-role { margin: 2px 0 0; font-size: 14px; color: var(--color-neutral-700); }
.author-bio { margin: var(--space-3) 0 var(--space-4); font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); }

.related { margin-top: var(--space-8); }
.related-title { font-size: 26px; margin: 0 0 var(--space-4); }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.related-card {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  background: var(--paper); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-neutral-400), 0 2px 0 rgba(27, 15, 8, 0.18), var(--shadow-sm);
}
.related-card:hover { box-shadow: inset 0 0 0 1px var(--color-accent-500), 0 2px 0 rgba(27, 15, 8, 0.28), var(--shadow-md); }
.related-card img { display: block; width: 100%; height: 130px; object-fit: cover; }
.related-card-body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); }
.related-card-title { font-family: var(--font-heading); font-size: 17.5px; line-height: 1.25; color: var(--color-text); }
.related-card time { font-size: 13px; color: var(--color-neutral-700); }
.pagination { display: flex; gap: var(--space-2); margin-top: var(--space-8); }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px;
  padding: 0 14px; border-radius: 999px; background: var(--paper); border: none; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--color-neutral-400);
}
.pagination .page-numbers.current { background: var(--color-accent-700); color: #fff; box-shadow: none; }

/* ============================================================
   13. FOOTER
   ============================================================ */
.site-footer { border-bottom: none; color: #e9dcc2; }
.footer-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); padding-top: 50px; padding-bottom: 44px; }
.footer-cols a { color: #e9dcc2; overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 40px; }
.footer-cols a:hover { color: #ffffff; }
.footer-cols h2, .footer-cols .footer-col-title {
  color: var(--color-accent-2-300); margin: 0;
  font-family: var(--font-body); font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
}
.footer-cols ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.footer-brand p { font-size: 14.5px; line-height: 1.5; margin: var(--space-3) 0 0; max-width: 28em; color: #ddd0b6; }
.footer-address {
  font-style: normal; margin-top: var(--space-3);
  font-size: 15px; line-height: 1.5; color: #e8d9bb;
}
.footer-contact { display: flex; flex-direction: column; margin-top: 2px; font-size: 15px; }
.footer-contact a { color: #fff; }
.legal-bar { border-top: 2px dashed rgba(223, 205, 168, 0.32); }
.legal-bar .wrap { display: grid; gap: var(--space-3); padding-top: var(--space-4); padding-bottom: var(--space-4); font-size: 13px; color: #d6c8ac; }
.legal-bar p { margin: 0; line-height: 1.6; }
.legal-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.legal-links a { color: #e9dcc2; display: inline-flex; align-items: center; min-height: 40px; }

/* ============================================================
   14. SIDE REINS  — straps hanging down both page edges
   ============================================================ */
body::before, body::after {
  content: ""; position: fixed; top: 0; bottom: 0; width: 26px; z-index: 40; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(27,15,8,.92) 0%, rgba(122,78,44,.85) 38%, rgba(58,33,24,.92) 72%, rgba(27,15,8,.95) 100%),
    var(--hide);
  background-size: auto, cover;
  box-shadow: 0 0 12px rgba(27, 15, 8, 0.45);
}
body::before { left: 0; }
body::after { right: 0; transform: scaleX(-1); }
@media (max-width: 1320px) { body::before, body::after { display: none; } }

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .main-nav ul { gap: var(--space-4); }
  .main-nav a { font-size: 14px; }
  .g5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-cols { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  h1 { font-size: 40px; } h2 { font-size: 30px; }
  .page-head h1 { font-size: 34px; }
  .nav-toggle { display: block; }
  .main-nav { display: none; width: 100%; }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) 0; }
  .site-header .wrap { flex-wrap: wrap; }
  .hero, .product, .split, .gallop, .newsletter, .page-body, .saddle-grid { grid-template-columns: minmax(0,1fr); }
  .saddle-photo { aspect-ratio: 3 / 2; max-width: 560px; }
  .saddle-grid h2 { font-size: 30px; }
  .science-head { margin-left: 0; font-size: inherit; }
  .science-head h2 { font-size: 28px; }
  .cat-grid { grid-template-columns: minmax(0,1fr); }
  .g3, .g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stories { grid-template-columns: minmax(0,1fr); }
  .story-media { aspect-ratio: 16 / 9; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sidebar { position: static; }
  .page-body.with-photos { grid-template-columns: minmax(0, 1fr); }
  .photo-col { display: none; }
  .article { padding: var(--space-6); }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: 33px; } h2 { font-size: 26px; }
  .grid, .g2, .g3, .g4, .g5, .sizes, .thumbs, .bonus-grid, .stories { grid-template-columns: minmax(0,1fr); }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .newsletter, .gallop-copy { padding: var(--space-6); }
  .buybox { flex-direction: column; align-items: stretch; }
  .buybox .actions { display: flex; gap: var(--space-3); }
}

/* ------------------------------------------------------------
   PHONE ONLY (<= 600px)
   The desktop and tablet page is unchanged. On a handset the full
   page is an endless scroll, so here we drop the passages that are
   atmosphere rather than information, condense the ten amino cards
   to a list, and bring the product buckets down to a sane size.
   ------------------------------------------------------------ */
@media (max-width: 600px) {

  /* --- cut: atmosphere, duplication and the joke panel --- */
  .hay { display: none; }                    /* the hay figure — the copy beside it already says it */
  .saddle-frieze, .saddle-grid { display: none; }   /* saddle passage goes; the science block below it stays */
  .bonus { display: none; }                  /* blue fake-amino panel */
  .stories .story:nth-of-type(3) { display: none; } /* third testimonial */
  .tissue { display: none; }                 /* both tissue photos — hoof wall and clean coat */
  .audience .pill:nth-of-type(5) { display: none; } /* "Barns & bulk" */
  .thumbs { display: none; }                 /* one bucket photo is enough on a phone */
  .chip-bond { display: none; }              /* caption pill, too small to read beside the shrunk photo */

  /* --- the horse and its molecule move above the headline, much smaller,
         so the graphic is on screen before any scrolling --- */
  /* explicit width: every child of .hero-media is absolutely positioned, so the
     box needs a real width for aspect-ratio to give it height */
  .hero-media { order: -1; width: 216px; max-width: 100%; margin-inline: auto; }
  .hero .blob { inset: -6px; }
  .hero-photo { inset: 14px; }

  /* --- short copy where the long copy was written for a wide column --- */
  .lede-full { display: none; }
  .lede-short { display: block; }

  /* --- three groups of separate cards become one bordered block each,
         laid out as compact bullet rows --- */
  .signs-grid, .zoom-grid, .g5 {
    display: block; margin-top: var(--space-5) !important;
    padding: 6px 22px; background: var(--paper);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 2px var(--lt-stitch), var(--shadow-sm);
  }
  .signs-grid .card, .zoom-grid .card, .g5 .card {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: start; column-gap: var(--space-3);
    background: none; box-shadow: none; border-radius: 0;
    padding: var(--space-3) 0;
    border: none; border-top: 2px dashed var(--lt-stitch);
  }
  .signs-grid .card:first-child, .zoom-grid .card:first-child, .g5 .card:first-child { border-top: none; }
  /* the per-card saddle-stitch outline belongs to a card, not to a row inside one */
  .signs-grid .card::after, .zoom-grid .card::after, .g5 .card::after { display: none; }
  .zoom-grid .zoom-card { padding: var(--space-3) 0; box-shadow: none; }
  .signs-grid .card > .marker, .zoom-grid .zoom-head, .g5 .card > .dot-lg { grid-row: 1 / span 2; margin: 0; }
  /* these blocks sit on white — the science one inside the dark band, which
     otherwise passes its light text colour down */
  .signs-grid .card h3, .zoom-grid .card h3, .g5 .card h3 {
    margin: 0; font-size: 16.5px !important; line-height: 1.25;
    align-self: center; color: var(--color-text);
  }
  .signs-grid .card p, .zoom-grid .card p, .g5 .card p {
    margin: 2px 0 0; font-size: 14px !important; line-height: 1.45; color: var(--color-neutral-800);
  }
  .signs-grid .marker, .zoom-grid .marker { width: 30px; height: 30px; min-width: 30px; font-size: 12px; }
  .g5 .dot-lg { width: 14px; height: 14px; margin-top: 5px; }

  /* --- amino acids: ten cards become ten bullets --- */
  .amino-grid { display: none; }
  .amino-brief {
    display: grid; gap: var(--space-4); margin: var(--space-6) 0 0;
    padding: 20px 22px; list-style: none;
    background: var(--paper); border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 2px var(--lt-stitch), var(--shadow-sm);
  }
  .amino-brief li { display: flex; gap: 14px; font-size: 15px; line-height: 1.45; }
  .amino-brief .amino-dot { flex: none; margin-top: 6px; }
  .amino-brief b { font-family: var(--font-heading); font-weight: 700; display: block; font-size: 16.5px; }

  /* --- product: the bucket photo was filling the whole screen --- */
  .product-frame { max-width: 208px; margin: 0 auto; }
  .product-frame .pill { top: var(--space-2); left: var(--space-2); font-size: 11.5px; min-height: 32px; padding: 0 var(--space-3); }
  .thumbs { max-width: 300px; margin-inline: auto; gap: var(--space-2); }
  .thumb { padding: var(--space-1); }
  .thumb span { font-size: 11.5px; margin-top: 4px; }
  /* size cards stay one per row so the 44px targets hold */
  .size-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .size-card b { font-size: 17px; }
  .size-card small { grid-column: 1; }
  .size-card i { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; font-size: 23px; }

  /* --- tighten the vertical rhythm everywhere --- */
  .section { padding-top: 38px; padding-bottom: 38px; }
  .hero { padding-top: 30px; padding-bottom: 22px; gap: 28px; }
  h1 { font-size: 30px; }
  h2, #inside h2, #product h2 { font-size: 25px !important; }
  .hero-sub { font-size: 17px; }
  .lede { font-size: 16.5px; }
  .hero-stats { gap: var(--space-5); margin-top: var(--space-5); padding-top: var(--space-4); }
  .audience .wrap { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .legend { gap: var(--space-2); }
  .science-block { padding-top: 34px; }
  .zoom-card .molecule { display: none; }   /* the ball-and-stick models do not read at this width */
  .zoom-head { margin-bottom: var(--space-2); }
  .fineprint { font-size: 12.5px; }
  .whofor-hat { justify-self: center; }

  /* --- full-width taps: every button spans the screen --- */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .buybox .actions { flex-wrap: wrap; }
  .buybox .actions .btn { flex: 1 1 100%; min-height: 52px; }
  .related-grid { grid-template-columns: minmax(0, 1fr); }
  .related-card img { height: 160px; }
  .author-card { grid-template-columns: minmax(0, 1fr); }
  .author-card .btn { width: 100%; }
}

@media print {
  .site-header, .site-footer, .hero-actions, .sidebar, .photo-col { display: none; }
  body { background: #fff; }
  body::before, body::after { display: none; }
}