/* K9-Rx 2.0 — storefront stylesheet.
   Design tokens carry the K9-Rx visual identity forward from the legacy
   WordPress site (deep burgundy brand color, bold condensed headings,
   warm light background) into a cleaner, less cluttered layout — per
   Phase 2 instruction #4: "recognizably K9-Rx" but substantially tidier
   than the WordPress theme it replaces. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Libre+Franklin:wght@400;500;600;700&display=swap');

/* Responsive breakpoint scale (Phase 5B-1).
   New shared-shell and component work should key off these three
   values, mobile-first (base styles are mobile; min-width overrides add
   tablet/desktop treatment):
     480px  - large phone
     768px  - tablet / small laptop (nav switches from hamburger to a
              full row here)
     1024px - desktop
   Existing page-specific breakpoints (760/900/600/860px, used today by
   the hero, product, testimonial and checkout layouts) are left as-is —
   reconciling those belongs to each page's own later Phase 5B sub-phase,
   not this global-shell phase. */

:root {
  /* Color */
  --k9-maroon: #7a1b2b;
  --k9-maroon-dark: #58121d;
  --k9-maroon-tint: #f4e6e6;
  --k9-gold: #c8952f;
  --k9-cream: #fbf6ef;
  --k9-paper: #ffffff;
  --k9-ink: #241315;
  --k9-ink-soft: #5b4a4c;
  --k9-line: #e7dcd4;
  --k9-success-bg: #eef4ea;
  --k9-success-ink: #3a5c2a;

  /* Type */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Libre Franklin', -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --content-width: 1080px;
  --content-narrow: 760px;
  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(36, 19, 21, 0.06), 0 4px 16px rgba(36, 19, 21, 0.05);

  /* Spacing scale (Phase 5B-1). New customer-facing work should use
     these instead of ad hoc pixel values; existing inline styles are
     left alone here and migrated screen-by-screen in later sub-phases. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Danger/status red - was duplicated as literal hex values across
     .btn--danger, .alert--error, .status-pill--failed and .field-error.
     Same visual colors as before, defined once now. */
  --k9-danger: #7a1b1b;
  --k9-danger-bg: #fbe9e9;
  --k9-danger-border: #eec3c3;
  --k9-danger-border-strong: #c95c5c;

  /* Minimum comfortable tap target for interactive controls on touch
     screens. */
  --tap-target: 44px;

  /* Fallback header height for the mobile nav overlay's positioning
     (Phase 5B-1 follow-up) - public/js/nav.js overwrites this with the
     header's real measured height, so this constant only matters for
     the brief window before that measurement runs. */
  --header-height: 72px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--k9-ink);
  background: var(--k9-cream);
  line-height: 1.65;
  font-size: 17px;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--k9-maroon); }
a:hover { color: var(--k9-maroon-dark); }

/* Phase 5B-1: a single, consistent visible-focus treatment for every
   interactive element (keyboard/switch-device users), not just the
   navigation. Uses :focus-visible so a mouse click never shows the
   ring, only keyboard/programmatic focus does. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--k9-gold);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--k9-ink);
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--k9-maroon); }
h3 { font-size: 1.15rem; letter-spacing: 0.03em; }
h4 { font-size: 1rem; color: var(--k9-ink-soft); }

/* Brand rule: always "K9-Rx" (lowercase x), never "K9-RX". Wrap the
   brand in .brand-mark wherever its container is uppercased (headings,
   .btn labels) so it keeps its authored case. Markdown headings and
   content-page titles get this automatically via brandMark()
   (src/services/markdown.js). */
.brand-mark { text-transform: none; }

p { margin: 0 0 1em; }

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header / nav */
.site-header {
  background: var(--k9-paper);
  border-bottom: 3px solid var(--k9-maroon);
  /* Phase 5B-1 follow-up: positioning context for the open mobile nav
     panel below, so it anchors to the header (position: absolute;
     top: 100%) and scrolls naturally with the page instead of being
     pinned to a viewport-fixed offset that would go stale as soon as
     the user scrolls. */
  position: relative;
}

.site-header__bar {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--k9-maroon);
  margin-right: auto;
}

.brand img { height: 40px; width: auto; }

/* Mobile hamburger control (Phase 5B-1). Hidden by default; only shown
   below the tablet breakpoint once nav.js has confirmed the browser can
   run it (see "html.js" below) - the no-JS fallback further down keeps
   the full nav reachable even without JavaScript. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  background: transparent;
  border: 2px solid var(--k9-maroon);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--k9-maroon);
}
.nav-toggle__icon { position: relative; }
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }

.site-nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
}

.site-nav a {
  text-decoration: none;
  color: var(--k9-ink);
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--k9-maroon);
  border-bottom-color: var(--k9-gold);
}

/* Below 768px, once JS confirms the toggle will work, collapse the nav
   behind the hamburger control. Without JS (no "js" class on <html>,
   added by public/js/nav.js), the rules above already render the full
   nav as a plain stacked list - always reachable, never dependent on
   script execution. */
@media (max-width: 767px) {
  html.js .nav-toggle { display: inline-flex; }
  html.js .site-nav { display: none; }

  /* Phase 5B-1 follow-up: the open mobile nav was an in-flow stacked
     list that pushed the whole page down by ~600px for this site's full
     link set - it read as an expanded sitemap, not a mobile nav. It is
     now an absolutely positioned dropdown panel anchored to .site-header
     (top: 100%, which .site-header's own "position: relative" makes
     possible) rather than pushed into normal flow, so opening it never
     moves any page content, and it scrolls naturally with the page
     instead of drifting if the header scrolls out of view. Width is set
     purely by left:0/right:0 against .site-header (itself full-width),
     so it can never cause horizontal overflow. Height is capped via the
     JS-measured --header-height so the panel scrolls internally if the
     link list is taller than the remaining viewport - the panel itself
     scrolls, the page behind it does not. */
  html.js .site-nav.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-height));
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--k9-paper);
    border-top: 1px solid var(--k9-line);
    box-shadow: var(--shadow-card);
    padding: var(--space-3) var(--space-4) var(--space-5);
    z-index: 40;
  }
}

/* Tablet and up: full horizontal nav, hamburger never shown, regardless
   of JS state. */
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav {
    flex-direction: row;
    flex-wrap: wrap;
    flex: initial;
    gap: 4px 22px;
  }
  .site-nav a {
    min-height: 0;
    padding: 4px 0;
  }
}

/* Phase 5B: simplified storefront navigation (partials/header.ejs).
   #site-nav now holds two groups: the five primary choices
   (.site-nav__primary, ending in the Shop K9-Rx CTA) and a compact
   utility group (.site-nav__utility: Cart, Account). Mobile: one stacked
   panel - primary links, the Shop CTA as a full-width button, then the
   utilities below a hairline. Tablet/desktop: one row - primary links,
   the CTA, then the utilities set apart by a thin divider. The existing
   .site-nav a rules above still provide the link base, hover/current
   underline, tap targets and focus ring. */
.site-nav__primary,
.site-nav__utility {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* "K9-Rx" inside the uppercased nav keeps its lowercase x. The margin
   restores the word space that flex layout drops before it. */
.site-nav__mark { text-transform: none; margin-left: 0.3em; }

.site-nav a.site-nav__shop {
  justify-content: center;
  margin-top: var(--space-2);
  padding: 10px 18px;
  border: 1px solid var(--k9-maroon);
  border-radius: var(--radius);
  background: var(--k9-maroon);
  color: var(--k9-cream);
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.site-nav a.site-nav__shop:hover,
.site-nav a.site-nav__shop[aria-current="page"] {
  background: var(--k9-maroon-dark);
  border-color: var(--k9-maroon-dark);
  color: var(--k9-cream);
  box-shadow: inset 0 -2px 0 var(--k9-gold);
}

.site-nav__utility {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--k9-line);
}

.site-nav__utility a {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--k9-ink-soft);
}

@media (min-width: 768px) {
  .site-nav {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
  }
  .site-nav__primary {
    flex-direction: row;
    align-items: center;
    gap: 22px;
  }
  .site-nav a.site-nav__shop {
    margin: 0 0 0 4px;
    padding: 8px 16px;
    min-height: 0;
  }
  .site-nav__utility {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin: 0 0 0 22px;
    padding: 0 0 0 20px;
    border-top: 0;
    border-left: 1px solid var(--k9-line);
  }
}

/* Tablet: tighter spacing so logo + nav still share one row. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-nav { font-size: 0.78rem; letter-spacing: 0.02em; }
  .site-nav__primary { gap: 7px; }
  .site-nav__item--sub { gap: 0; }
  .site-nav__sub-toggle { width: 14px; }
  .site-nav a.site-nav__shop { margin-left: 2px; padding: 7px 9px; }
  .site-nav__utility { margin-left: 8px; padding-left: 8px; gap: 8px; }
  .site-nav__utility a { font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a.site-nav__shop { transition: none; }
}

/* Phase 5B: Nutrition dropdown (partials/header.ejs + public/js/nav.js).
   Structure: .site-nav__item--sub holds the real /nutrition link
   (.site-nav__parent), a toggle button, and the .site-nav__sub list.

   - No JS, any width: link + submenu shown as a plain nested list.
   - JS mobile panel (<768px): the link is hidden; the button, labelled
     "Nutrition", expands/collapses the submenu (aria-expanded).
   - Tablet/desktop: the link stays clickable; the submenu is a compact
     dropdown opened by hover, keyboard focus, or the chevron button. */
.site-header { z-index: 50; }

.site-nav__item { position: relative; }

.site-nav__sub-toggle { display: none; }

.site-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-4);
}

.site-nav__sub a {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.site-nav__chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.site-nav__sub-toggle[aria-expanded="true"] .site-nav__chevron {
  transform: translateY(1px) rotate(-135deg);
}

/* Current section: Nutrition is underlined while on any of its pages. */
.site-nav__item.is-section > .site-nav__parent {
  color: var(--k9-maroon);
  border-bottom-color: var(--k9-gold);
}

@media (max-width: 767px) {
  html.js .site-nav__parent { display: none; }

  html.js .site-nav__sub-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--tap-target);
    padding: 10px 2px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--k9-ink);
    cursor: pointer;
    text-align: left;
  }

  html.js .site-nav__sub-toggle[aria-expanded="true"],
  html.js .site-nav__item.is-section .site-nav__sub-toggle {
    color: var(--k9-maroon);
  }

  html.js .site-nav__sub-toggle .site-nav__chevron { margin-right: 6px; }

  html.js .site-nav__sub { display: none; }

  html.js .site-nav__item.is-open .site-nav__sub {
    display: block;
    margin: 0 0 var(--space-2);
    padding-left: var(--space-4);
    border-left: 2px solid var(--k9-gold);
  }
}

@media (min-width: 768px) {
  .site-nav__item--sub {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .site-nav__sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 3px;
    color: var(--k9-ink-soft);
    cursor: pointer;
  }

  .site-nav__sub-toggle:hover,
  .site-nav__item--sub:hover .site-nav__sub-toggle { color: var(--k9-maroon); }

  .site-nav__sub-label { display: none; }

  .site-nav__sub {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: -18px;
    min-width: 232px;
    padding: 8px 0;
    background: var(--k9-paper);
    border: 1px solid var(--k9-line);
    border-top: 2px solid var(--k9-maroon);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 10px 28px -12px rgba(36, 19, 21, 0.28);
    z-index: 60;
  }

  /* Invisible bridge over the 12px gap, so moving the pointer from
     NUTRITION down into the menu never closes it. */
  .site-nav__sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
  }

  .site-nav__item--sub:hover .site-nav__sub,
  .site-nav__item--sub:focus-within .site-nav__sub,
  .site-nav__item--sub.is-open .site-nav__sub {
    display: block;
  }

  /* Escape dismisses the menu until the pointer/focus leaves (nav.js). */
  .site-nav__item--sub.is-dismissed .site-nav__sub { display: none; }

  .site-nav .site-nav__sub a {
    display: block;
    min-height: 0;
    padding: 10px 18px 10px 16px;
    border-bottom: 0;
    border-left: 2px solid transparent;
    color: var(--k9-maroon);
    white-space: nowrap;
  }

  .site-nav .site-nav__sub a:hover,
  .site-nav .site-nav__sub a:focus-visible,
  .site-nav .site-nav__sub a[aria-current="page"] {
    background: var(--k9-cream);
    border-left-color: var(--k9-gold);
    color: var(--k9-maroon-dark);
  }

  .site-nav .site-nav__sub a:focus-visible { outline-offset: -2px; }

  /* Block (not flex) links keep their normal word space before "K9-Rx". */
  .site-nav .site-nav__sub .site-nav__mark { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__chevron { transition: none; }
}

/* Hero (Phase 5B-2A redesign; Phase 5B-2G swapped in the cinematic
   beach motion as the hero's full background; this final composition
   revision removes the pouch from the hero entirely (it has moved
   down into .lifestyle, composed with the three-dog animation - see
   that section below and the matching comment in home.ejs) and moves
   the copy column to the right, over the open beach/ocean side of the
   frame, so the dog and runner (who sit in the left ~55-60% of the
   source video across its whole loop - verified by sampling frames
   throughout) stay fully visible and uncovered. See .bg-video just
   below for the shared full-bleed-video component.

   Sizing: deliberately NOT using aspect-ratio here. This section's
   height instead comes from its own in-flow content (.hero__inner)
   plus a min-height floor, with .bg-video absolutely positioned
   (inset: 0) to stretch and match whatever that resolves to. That
   sidesteps the documented aspect-ratio + min-height width-blowup bug
   entirely (see the .lifestyle comment below) rather than needing a
   matching width:100% fix here - .hero was never a fixed-ratio box to
   begin with.

   display:flex + align-items:center vertically centers .hero__inner's
   content within the section's full height (rather than just sitting
   at the top under its own padding) now that the pouch no longer
   shares the row and drives its own height - keeps the hero feeling
   spacious and intentional even where the copy block is shorter than
   the section's min-height floor. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 620px;
  background: var(--k9-ink);
  border-bottom: 1px solid var(--k9-line);
}

@media (max-width: 767px) {
  .hero { min-height: 560px; }
}

/* .bg-video: full-bleed, OPAQUE background motion component - poster,
   then video, then a contrast scrim, no JS required (the video is a
   normal opaque rectangular scene, so once it has a frame ready it
   simply paints over the poster underneath at full opacity - the same
   reasoning .lifestyle's own Phase 5B-2E video panel used, see
   below). Absolutely positioned to this section's own bounds. */
.bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bg-video__poster,
.bg-video__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mobile (base) crop - same 1660x1244 source scene as .lifestyle's
     own crop below (owner far left, dog running through center, open
     beach/ocean right). The hero's mobile copy sits ABOVE this full-
     height background (not in a bottom band the way .lifestyle's
     mobile copy did), so the scrim below is inverted (dark at the
     top, fading down) and this crop favors keeping the dog visible in
     the lower/mid area where the scrim has already faded, checked
     across the loop's start/mid/end frames. */
  object-position: 68% 34%;
}

@media (prefers-reduced-motion: reduce) {
  .bg-video__video { display: none; }
  .bg-video__poster { display: block; }
}

/* Cinematic scrim, mobile (base) default: top-down, since mobile hero
   copy sits above the beach scene here (see .hero__inner below),
   opposite of how .lifestyle's own bottom-band mobile copy needed a
   bottom-up version. Dark enough near the top across the whole loop
   for the headline/lede to stay readable, fully transparent by the
   point the dog is in frame lower down (the pouch that used to sit
   here too is gone - see .hero__inner below). */
.bg-video__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(36, 19, 21, 0.74) 0%,
    rgba(36, 19, 21, 0.52) 30%,
    rgba(36, 19, 21, 0.14) 58%,
    rgba(36, 19, 21, 0) 78%
  );
}

/* Final composition revision: the pouch is gone from the hero (moved
   into .lifestyle - see below), so .hero__inner now holds a single
   copy column instead of a two-up grid. It is no longer a grid at
   all - just a full-width block, vertically centered within .hero by
   the flex rule above; .hero__copy itself (below) is what actually
   gets pushed to the right on desktop, over the open beach/ocean side
   of the frame, while staying full-width and naturally left-reading
   on mobile (see .hero__copy's own mobile-vs-desktop rules). */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-5) 20px var(--space-4);
}

@media (min-width: 768px) {
  .hero__inner {
    padding: var(--space-8) 24px var(--space-7);
  }
}

/* Mobile (base): full-width, reads top-to-bottom exactly like before,
   just shorter now that the pouch no longer stacks below it. Desktop:
   pushed to the right of the content-width column via margin-left:
   auto, with its own max-width keeping the headline/lede/CTAs a
   controlled, readable measure rather than stretching the full
   column - this is what actually separates the copy from the dog and
   runner, who sit in the left ~55-60% of the beach scene throughout
   its whole loop (checked by sampling frames across the full
   animation), leaving them fully visible in the open left two-thirds
   of the hero. */
.hero__copy {
  max-width: 46ch;
}

@media (min-width: 768px) {
  .hero__copy {
    max-width: 560px;
    margin-left: auto;
    /* Phase 5B-2H: the copy column was already pushed to the right
       edge of the frame, but its text was still reading left-aligned
       within that column - an unfinished-looking half-measure. Setting
       the whole column to read right-aligned (eyebrow, headline, lede,
       CTA row below) makes the composition deliberately right-anchored
       rather than "a left-aligned block that happens to sit on the
       right." Desktop/tablet only - mobile keeps its existing
       top-to-bottom left-aligned reading, which is already the more
       readable layout at that width (see .hero__copy's base rule and
       .hero__lede/.btn-row below, both left untouched outside this
       media query). */
    text-align: right;
  }
  /* .hero__lede carries its own max-width (46ch, see the base rule
     below) so its box is narrower than .hero__copy's 560px column. A
     block element that's narrower than its container stays flush with
     the container's LEFT edge unless explicitly pushed - without this,
     text-align:right above would right-align the lede's text inside a
     box whose own right edge falls short of the headline/CTA row's
     right edge, reading as misaligned rather than as one clean
     right-anchored column. margin-left:auto pins the lede's box to the
     same right edge as everything else in the column. */
  .hero__lede {
    margin-left: auto;
  }
  /* .btn-row is shared with .closing-cta (out of scope this phase), so
     the flex-end override is scoped strictly to .hero rather than
     changed on the shared rule itself. flex-end packs the two buttons
     against the column's right edge while leaving their source/reading
     order exactly as authored (Shop K9-Rx, then Why K9-Rx Works) -
     only their position shifts, not their order. */
  .hero .btn-row {
    justify-content: flex-end;
  }
}

/* Phase 5B-2I: .hero__inner's max-width:1080px container centers with
   growing side margins as the viewport grows past it, so .hero__copy's
   margin-left:auto push above (which only reaches that container's own
   right padding edge) left an increasingly large, unused gap between
   the copy and the hero's actual right edge - measured at ~200px at
   1440px, clearly more than intended once the copy itself already
   reads as a deliberate right-aligned block (see the 768px rule above).
   A small explicit margin-right pulls the whole column - eyebrow,
   headline, lede and CTA row all move together, since they are one box
   - further right, into that unused gutter, landing its right edge at
   roughly 90-110px from the hero's true right edge at ~1400-1440px.
   .hero itself already clips overflow (see its own rule near the top
   of this section), so this never causes page-level horizontal scroll
   or affects any other section's layout.

   Scoped to this new, wider breakpoint rather than widening the
   existing 768px rule above: below ~1080px, .hero__inner is no longer
   width-constrained by max-width at all, so the gap there is already a
   tight ~24px (just the inner's own padding) - pulling the copy
   further right at 1024px or 768px would crowd the headline against
   the runner/dog for no benefit, so those breakpoints deliberately keep
   today's already-approved position unchanged.

   Only position moves: .hero__copy's own max-width:560px (and every
   font-size/line-height/headline line break inside it) is untouched,
   so nothing about how the text itself wraps or reads is affected. */
@media (min-width: 1400px) {
  .hero__copy {
    margin-right: -100px;
  }
}

.hero__eyebrow {
  font-family: var(--font-display);
  color: var(--k9-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

/* Cream, not the old dark ink - this copy now sits over a scrimmed
   photographic video instead of the old light gradient, so it needs
   to be light to read at all (the same reasoning already applied to
   .lifestyle__headline when Phase 5B-2E gave IT a photographic
   background). The accent span below is unified to the same cream
   rather than kept maroon, for the same reason - maroon-on-dark-photo
   would be close to unreadable. A subtle text-shadow gives every line
   a second, frame-independent layer of contrast insurance the way
   .lifestyle__copy's own shadow already does below. */
.hero__headline {
  color: var(--k9-cream);
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.05;
  margin: 0 0 var(--space-4);
  text-shadow: 0 1px 3px rgba(36, 19, 21, 0.55);
}

.hero__headline-accent {
  color: var(--k9-cream);
}

.hero__lede {
  font-size: 1.15rem;
  color: rgba(251, 246, 239, 0.88);
  max-width: 46ch;
  text-shadow: 0 1px 3px rgba(36, 19, 21, 0.45);
}

@media (max-width: 767px) {
  .hero__headline { font-size: clamp(2rem, 9vw, 2.75rem); }
  .hero__lede { font-size: 1.05rem; }
}

/* Hero-scoped override: .btn--outline's shared maroon-on-transparent
   styling (see the .btn rules further down) reads fine over every
   other page's light backgrounds, but loses contrast over this new
   photographic hero background. Scoped strictly to .hero, never
   changed globally - .btn--outline is reused as-is on /benefits, the
   closing CTA, cart, account and admin pages, none of which this
   phase may touch. */
.hero .btn--outline {
  color: var(--k9-cream);
  border-color: var(--k9-cream);
}
.hero .btn--outline:hover {
  background: var(--k9-cream);
  color: var(--k9-maroon);
}

/* .hero__media / .hero__media-product (the pouch) are removed as of
   this final composition revision - the pouch has moved down into
   .lifestyle, composed there with the three-dog animation instead
   (see that section below). The hero is now beach motion + copy only.
   public/images/k9rx-hero-pouch.webp is reused, unmodified, from its
   new home - see .motion-subject__pouch below. */

@media (min-width: 768px) {
  /* Desktop crop: at every realistic desktop width, .bg-video's
     container is far wider (relative to its height) than the source
     video's own 1660x1244 (~4:3) ratio, so object-fit:cover scales to
     fill the width exactly and crops only vertically - there is no
     horizontal cropping margin left for object-position's X value to
     move within (checked against .hero's actual rendered width/height
     at 1024/1280/1440/1920px; width-driven scaling wins at all of
     them). The full width of the frame - both the runner/dog on the
     left and the open beach/ocean on the right - is already visible
     regardless of X, which is why the real fix for "keep the dog
     clear of the copy" is .hero__copy's own right-aligned placement
     above, not a horizontal crop here. Y is nudged down slightly from
     the previous 22% (was biased hard toward sky) to 30%, keeping a
     little more of the dog's body/legs and the sand in frame - opened
     across the loop's start/mid/end frames to confirm the dog stays
     fully in view at every sampled point. X is left at a neutral 50%
     (inert at these dimensions, kept simple rather than a
     no-op "clever" value). */
  .bg-video__poster, .bg-video__video { object-position: 50% 30%; }
  /* Desktop scrim: right-originating now that the copy sits on the
     right (mirrors the old left-originating version), strongest
     directly behind the copy and fading out toward the left so the
     runner and dog stay visibly "alive" rather than washed under a
     dark gradient - checked against frames throughout the loop so the
     fade point (62% from the right) consistently lands past both
     subjects for every sampled frame. */
  .bg-video__scrim {
    background: linear-gradient(
      270deg,
      rgba(36, 19, 21, 0.72) 0%,
      rgba(36, 19, 21, 0.52) 26%,
      rgba(36, 19, 21, 0.16) 46%,
      rgba(36, 19, 21, 0) 62%
    );
  }
}

/* Reassurance / value strip - three factual, verifiable claims only:
   free shipping on an Autoship-only cart (src/services/shipping/
   staticProvider.js), "human-grade" ingredient language already used in
   this app's own meta description (src/views/partials/header.ejs), and
   the real pause/skip/cancel account functionality (src/routes/account,
   src/views/account/subscription-detail.ejs and friends). */
.hero-strip {
  background: var(--k9-paper);
  border-bottom: 1px solid var(--k9-line);
}

.hero-strip__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-4) 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.hero-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--k9-ink);
  text-align: left;
}

.hero-strip__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--k9-maroon);
}

@media (max-width: 767px) {
  .hero-strip__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-3) 20px;
  }
  .hero-strip__item { justify-content: flex-start; }
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 2px solid var(--k9-maroon);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--k9-maroon);
  color: var(--k9-paper);
}
.btn--primary:hover { background: var(--k9-maroon-dark); border-color: var(--k9-maroon-dark); color: var(--k9-paper); }

.btn--outline {
  background: transparent;
  color: var(--k9-maroon);
}
.btn--outline:hover { background: var(--k9-maroon); color: var(--k9-paper); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }

/* Phase 3C-2: a smaller button for inline row/detail actions (pause,
   resume, cancel) — same family as .btn, not a new component. */
.btn--small { padding: 8px 16px; font-size: 0.78rem; }

/* Cancel is destructive (from a business perspective), so it gets its own
   color distinct from the brand maroon used for primary/outline — reusing
   the existing .alert--error palette rather than inventing a new one. */
.btn--danger {
  background: transparent;
  color: var(--k9-danger);
  border-color: var(--k9-danger-border-strong);
}
.btn--danger:hover { background: var(--k9-danger); border-color: var(--k9-danger); color: var(--k9-paper); }

/* Sections / cards */
main { padding: 0 0 64px; }

.section { padding: 48px 0; }
.section + .section { border-top: 1px solid var(--k9-line); }
.section--tint { background: var(--k9-paper); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.card {
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
}

.card h3 { color: var(--k9-maroon); margin-top: 0; }
/* .card / .card-grid are no longer used on the homepage as of Phase
   5B-2B (see .benefits below) but are left in place - unused, not
   removed - since nothing else in this codebase currently references
   them and a future page may still want the plain boxed-card look. */

/* Homepage benefits (Phase 5B-2B) - a premium editorial section that
   replaces the old boxed .card-grid treatment above. Open cream
   background, a centered eyebrow/headline pair (same visual language as
   the hero's own eyebrow + accent-span headline), and three plain
   columns - no card chrome - separated by a hairline rule on desktop
   only. Mobile-first: base rules below are the single-column mobile
   layout, the min-width:768px block adds the three-column desktop
   composition with vertical separators. */
.benefits {
  background: var(--k9-cream);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--k9-line);
  border-bottom: 1px solid var(--k9-line);
}

.benefits__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.benefits__eyebrow {
  font-family: var(--font-display);
  color: var(--k9-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

/* h2 defaults to var(--k9-maroon) (see the global h2 rule above) - this
   overrides to ink so maroon reads as deliberate emphasis only on the
   .benefits__headline-accent span, the same pattern the hero headline
   uses for "Happier Dogs." */
.benefits__headline {
  color: var(--k9-ink);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 var(--space-5);
}

.benefits__headline-accent {
  color: var(--k9-maroon);
}

.benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  text-align: center;
}

.benefits__icon {
  width: 30px;
  height: 30px;
  color: var(--k9-maroon);
  margin: 0 auto var(--space-3);
}

.benefits__title {
  color: var(--k9-ink);
  margin: 0 0 var(--space-2);
}

.benefits__copy {
  color: var(--k9-ink-soft);
  margin: 0;
}

.benefits__more {
  margin: var(--space-5) 0 0;
}

@media (min-width: 768px) {
  .benefits { padding: var(--space-8) 0; }
  .benefits__headline { margin-bottom: var(--space-7); }
  .benefits__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
    text-align: left;
  }
  .benefits__item + .benefits__item {
    border-left: 1px solid var(--k9-line);
    padding-left: var(--space-6);
  }
  .benefits__icon { margin: 0 0 var(--space-3); }
  .benefits__more { margin-top: var(--space-7); }
}

/* Homepage lifestyle section (Phase 5B-2B original split image/text
   layout; Phase 5B-2E rebuilt it as a full-width cinematic beach
   motion panel; Phase 5B-2G swapped that beach motion UP into .hero
   and gave this section an opaque three-dog reaction clip in a
   cropped video panel). This final composition revision replaces that
   opaque panel with a genuinely TRANSPARENT three-dog animation
   composed directly against this section's own warm tint background
   (no video card/border/black-bars/photo panel), plus the K9-Rx pouch
   - moved down from the hero (see the matching comment there) - as a
   secondary product anchor beside the dogs. The point is the same
   deliberate contrast after the cinematic hero: photographic hero ->
   clean brand/editorial dog-and-product moment -> benefits. The
   eyebrow/headline/lede/CTA copy is the exact same approved text this
   section has carried since Phase 5B-2B.

   .lifestyle itself needs no position/overflow/isolation or aspect-
   ratio - there is no absolutely-positioned full-bleed layer here,
   so this section's height comes from its own normal in-flow content
   (copy + the motion+pouch composite below), with simple section
   padding rather than a fixed ratio. */
.lifestyle {
  background: var(--k9-maroon-tint);
  padding: var(--space-8) 0;
}

.lifestyle__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 480px) {
  .lifestyle__inner { padding: 0 24px; }
}

@media (min-width: 768px) {
  /* Copy-left, dogs+pouch-right - source order (.lifestyle__copy
     before .lifestyle__motion in home.ejs) drives this directly, so
     mobile naturally stacks copy-on-top/dogs-below without any extra
     ordering rules. */
  .lifestyle__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

.lifestyle__motion {
  width: 100%;
}

/* .motion-subject / .motion-subject__poster / .motion-subject__video /
   .motion-subject__pouch: this final composition revision revives the
   pre-Phase-2 .motion-subject naming (public/js/dogMotion.js already
   targets these exact selectors, unchanged, and is reconnected in
   home.ejs) because the new three-dog source is genuinely transparent
   again, which reintroduces the same "ghost ears" risk that component
   was originally built to solve: the static poster
   (.motion-subject__poster) and the animated video
   (.motion-subject__video) are two stacked layers showing the SAME
   dogs from different moments in the loop, so once the video is
   actually decoding, the still poster underneath must be faded out
   completely (dogMotion.js's job) rather than left visible through
   the video's transparent background as a duplicate/ghost image.

   Layering: the poster is a normal in-flow <img> (using its own
   width/height attributes to set this box's intrinsic 728x486 ratio,
   avoiding the documented aspect-ratio + min-height width-blowup bug
   entirely - no aspect-ratio property is used here), and the video is
   absolutely positioned on top of it, matching exactly. The pouch is
   a third, separately-positioned layer above both (see below). */
.motion-subject {
  position: relative;
  width: 100%;
}

.motion-subject__poster {
  display: block;
  width: 100%;
  height: auto;
}

.motion-subject__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .motion-subject__video { display: none; }
  .motion-subject__poster { display: block; }
}

/* Once dogMotion.js confirms (via `loadeddata`/`canplay`) that the
   video has an actual decoded frame ready, fade the static poster out
   - gated on both the shared "html.js" progressive-enhancement flag
   (see the nav.js-driven rules near the top of this file) and
   prefers-reduced-motion:no-preference, so a no-JS browser or a
   reduced-motion user always keeps the always-present poster with no
   dependency on this transition ever running. The short transition
   (not an instant cut) is deliberate - long enough to not look like a
   flicker, short enough that the poster's and video's slightly
   different in-loop poses are never both simultaneously visible at
   meaningful opacity. */
@media (prefers-reduced-motion: no-preference) {
  html.js .motion-subject__poster {
    transition: opacity 0.15s ease;
  }
  html.js .motion-subject.is-motion-ready .motion-subject__poster {
    opacity: 0;
  }
}

/* The K9-Rx pouch (public/images/k9rx-hero-pouch.webp, reused byte-
   identical from its old hero position - see the matching comment
   there).

   Phase 5B-2H: re-scaled and re-centered as a substantial product
   anchor instead of a small bottom-right accessory, per direct
   frame-by-frame inspection of the transparent source (all 145 frames
   decoded and visually checked, plus the exact poster frame) rather
   than an arbitrary percentage:

     - The three dogs never actually touch/merge (there is always a
       narrow gap of background between each pair, all the way down to
       the paws), so there is no way to fit a substantial pouch fully
       BETWEEN them without overlap - the brief explicitly allows
       overlapping the dogs' lower body/paw region, so the pouch is
       centered on the middle (black) pug's lower chest/torso, which
       reads as "sitting with them" rather than "beside them."
     - Every sampled frame's faces (including the most extreme
       open-mouth/tongue-out reaction poses, checked directly) are
       fully resolved well above the 55-60% line of the crop's own
       height. Sized/positioned so the pouch's own top edge lands at
       roughly 57% down the frame - comfortably clear of every mouth/
       tongue extent actually observed, not just the resting pose.
     - width:38% puts the pouch's rendered height at roughly 42% of the
       frame - clearly shorter than the dogs' own ~92%-of-frame height
       (never taller than the dogs), while landing close to their
       seated chest/torso height and large enough to read the K9-Rx
       wordmark clearly - confirmed by compositing the actual asset
       over actual decoded frames at this exact size before committing
       to it.
     - Horizontally centered (left:50% + translateX(-50%), replacing
       the old right-anchored position) rather than pixel/percent
       offset from an edge, so it stays centered on the three-dog group
       at any container width without separate breakpoint math.
     - No pixel max-width cap: .lifestyle__inner's own max-width:1080px
       grid already bounds how wide this column can ever get (roughly
       480px at most), so a percentage alone can't run away on large
       viewports the way an uncapped percentage could on a truly
       full-bleed element. */
.motion-subject__pouch {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2%;
  width: 38%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(36, 19, 21, 0.35));
}

@media (max-width: 767px) {
  /* Mobile: modestly larger proportionally than desktop, same reasoning
     as before this phase (the whole composite renders smaller here, so
     an identical ratio would read as too small to register as the
     product it is) - but capped at a deliberately smaller step up
     (38% -> 40%, not desktop's old 30%->34% jump repeated on this
     bigger base) because the same frame-by-frame check showed 40% is
     where the pouch's top edge is still clearly clear of the black
     pug's chin/tongue in the most extreme reaction frame; 44% was
     tested and rejected for crowding it. Percentages are relative to
     the video's own fixed 728x486 intrinsic frame, not the viewport, so
     this same safety margin holds at any mobile width without a
     separate pixel cap. */
  .motion-subject__pouch {
    width: 40%;
  }
}

.lifestyle__eyebrow {
  font-family: var(--font-display);
  color: var(--k9-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

/* This section's background is light again (the clean maroon-tint
   field above, not a photographic scrim), so the headline reverts to
   the same h2-maroon-default override .benefits__headline uses,
   rather than the light-cream-on-dark-photo treatment Phase 5B-2E
   needed. */
.lifestyle__headline {
  color: var(--k9-ink);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.lifestyle__lede {
  color: var(--k9-ink-soft);
  font-size: 1.05rem;
  max-width: 46ch;
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lifestyle__link a {
  color: var(--k9-maroon);
  font-weight: 600;
}

/* Page prose (content pages imported from the legacy site) */
.page-header {
  padding: 40px 0 8px;
}

/* Generalized from .page-header p.lede: this class is used as a
   standalone "lede" paragraph in several templates outside a
   .page-header block too (e.g. product.ejs) - same treatment
   wherever it appears. */
.lede {
  color: var(--k9-ink-soft);
  font-size: 1.05rem;
}

/* Phase 3C-4B.1: shared identity/navigation header on authenticated
   customer "My Account" pages (src/views/account/_account-header.ejs).
   Visually secondary, wraps on narrow screens, no fixed widths. */
.account-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--k9-line);
  font-size: 0.85rem;
  color: var(--k9-ink-soft);
}
.account-nav a {
  font-weight: 600;
  color: var(--k9-maroon);
}
.account-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-width: 0;
}
.account-identity__email {
  overflow-wrap: anywhere;
}
.account-identity__logout {
  display: inline;
}

/* Phase 5B QA: comfortable touch target for Log Out on small screens
   without changing how the link looks (padding grows the hit area, the
   negative margin keeps the layout where it was). */
@media (max-width: 640px) {
  .account-identity__logout .btn-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    padding: 0 12px;
    margin: -13px -12px;
  }
}

/* Phase 5B QA: never break the phone number across lines on /contact. */
.contact-phone { white-space: nowrap; }

/* Phase 5B QA: My Account subscriptions table - stack each subscription
   as a labelled card on small screens so the page never scrolls sideways.
   Desktop/tablet keep the existing table. */
@media (max-width: 640px) {
  .account-subs-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .account-subs-table,
  .account-subs-table tbody,
  .account-subs-table tr,
  .account-subs-table td { display: block; width: 100%; }
  .account-subs-table tr {
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--k9-paper);
    border: 1px solid var(--k9-line);
    border-radius: 10px;
  }
  .account-subs-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 0;
    white-space: normal;
    text-align: right;
  }
  .account-subs-table td::before {
    content: attr(data-label);
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--k9-ink-soft);
    text-align: left;
  }
  .account-subs-table td.account-subs-table__action { justify-content: flex-end; border-bottom: 0; }
  .account-subs-table td.account-subs-table__action::before { content: none; }
  .account-subs-table td.account-subs-table__action a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    font-weight: 600;
  }
}

.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; color: var(--k9-maroon); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }

.content-image {
  margin: 2em 0;
  padding: 0;
}
.content-image img {
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin: 0 auto;
}
.content-image figcaption {
  margin-top: 10px;
  text-align: center;
  color: var(--k9-ink-soft);
  font-size: 0.88rem;
}

.references {
  margin-top: 3em;
  border-top: 1px solid var(--k9-line);
  padding-top: 1.5em;
}
.references summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--k9-maroon);
  font-size: 1rem;
  padding: 4px 0;
}
.references[open] summary { margin-bottom: 1em; }
.references .prose { font-size: 0.92rem; color: var(--k9-ink-soft); }

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--k9-line);
  padding: 18px 0;
}
.faq-item:first-child { border-top: 1px solid var(--k9-line); }
.faq-item dt {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--k9-maroon);
  margin-bottom: 6px;
}
.faq-item dd { margin: 0; color: var(--k9-ink-soft); }

/* Testimonials
   A dedicated grid, deliberately separate from the generic .card-grid
   (used elsewhere for short benefit blurbs at a 230px minimum column —
   far too narrow for a full testimonial quote, which was wrapping every
   few words). Column counts are explicit per breakpoint rather than
   auto-fit/minmax, so a wide desktop viewport never packs in more than
   3 columns no matter how much horizontal room is available. */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}

@media (max-width: 900px) {
  /* Tablet: 2 per row. */
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  /* Mobile: 1 per row. */
  .testimonial-grid { grid-template-columns: 1fr; }
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-left: 4px solid var(--k9-gold);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}

/* Photo + author name share a header row, so the quote below always gets
   the card's full width to wrap normally — the photo never narrows the
   text column the way an inline side-by-side layout did. Testimonials
   without a photo (see scripts/seed-data/testimonials.js) simply omit
   the <img>, and the header row collapses to just the name. */
.testimonial__header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial__photo {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--k9-line);
}
.testimonial p { margin: 0; color: var(--k9-ink-soft); font-style: italic; line-height: 1.6; }
.testimonial cite {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--k9-maroon);
}

/* Homepage testimonial preview cards (Phase 5B-2C) - a compact,
   equal-height alternative to the full-length .testimonial cards above.
   Deliberately a SEPARATE class family so nothing here changes the
   .testimonial/.testimonial-grid styles the full /testimonials page
   still uses (untouched this phase). Every quote is the authentic,
   unedited testimonial text from scripts/seed-data/testimonials.js -
   the "collapsed" look is done entirely with CSS line-clamping below,
   never a second rewritten excerpt, so the visible preview is always a
   true prefix of the real testimonial. Mobile-first: base rules below
   are the single-column mobile layout, the min-width:768px block adds
   the three-column desktop grid. */
.testimonial-preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

@media (min-width: 768px) {
  .testimonial-preview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
}

.testimonial-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-top: 3px solid var(--k9-gold);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}

.testimonial-preview__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-preview__photo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--k9-line);
}

.testimonial-preview__name {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--k9-maroon);
}

.testimonial-preview__quote {
  margin: 0;
  color: var(--k9-ink-soft);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Excerpt (Phase 5B): the card always shows the start of the verbatim
   testimonial, clamped to a few lines by CSS; the complete text is on the
   testimonial's own Full Story page (/testimonials/:id), reached through
   the "Read full story" link below - a real link, so this works with or
   without JavaScript. (Previously the clamp only applied once JS could
   run an in-place expand toggle.) */
.testimonial-preview__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

@media (min-width: 768px) {
  .testimonial-preview__quote { -webkit-line-clamp: 4; line-clamp: 4; }
}

/* "Read full story" link - same look as the former toggle button. */
.testimonial-preview__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-2) 0;
  margin-top: calc(var(--space-1) * -1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--k9-maroon);
}
.testimonial-preview__more:hover { color: var(--k9-maroon-dark); text-decoration: underline; }

/* Full /testimonials page: the same card grid, stepping 1 -> 2 -> 3
   columns (the homepage grid jumps straight to 3). Cards stay
   top-aligned (inherited). */
.testimonial-preview-grid--all { margin-top: 0; }

@media (min-width: 768px) {
  .testimonial-preview-grid--all { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .testimonial-preview-grid--all { grid-template-columns: repeat(3, 1fr); }
}

.testimonials-page { margin-top: 24px; }

.testimonial-preview-section__more {
  margin: var(--space-6) 0 0;
  text-align: center;
}

/* Homepage closing CTA (Phase 5B-2C) - the intentional conclusion of
   the redesigned homepage, replacing the previous plain .section
   treatment. A strong maroon, high-contrast block that visually breaks
   from the paper-background testimonials above it and returns the
   visitor to purchase intent. Headline/lede colors override the global
   h2 maroon-on-cream default (see the .benefits__headline /
   .lifestyle__headline comments above) since the background itself is
   now maroon. */
.closing-cta {
  background: var(--k9-maroon);
  padding: var(--space-7) 0;
}

.closing-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.closing-cta__headline {
  color: var(--k9-paper);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

.closing-cta__lede {
  color: var(--k9-maroon-tint);
  font-size: 1.05rem;
  margin: 0 0 var(--space-5);
}

.closing-cta__actions {
  justify-content: center;
}

/* Invert the shared .btn colors for this maroon-background context only
   - a plain .btn--primary (maroon-on-maroon) would disappear here. */
.closing-cta .btn--primary {
  background: var(--k9-cream);
  border-color: var(--k9-cream);
  color: var(--k9-maroon);
}
.closing-cta .btn--primary:hover {
  background: var(--k9-paper);
  border-color: var(--k9-paper);
  color: var(--k9-maroon-dark);
}
.closing-cta .btn--outline {
  border-color: var(--k9-paper);
  color: var(--k9-paper);
}
.closing-cta .btn--outline:hover {
  background: var(--k9-paper);
  color: var(--k9-maroon);
}

.closing-cta__reassurance {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k9-maroon-tint);
}

@media (min-width: 768px) {
  .closing-cta { padding: var(--space-8) 0; }
}

/* Product page */
.product-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 760px) {
  .product-layout { grid-template-columns: 1fr; }
}
.product-layout img {
  border-radius: var(--radius);
  border: 1px solid var(--k9-line);
  background: var(--k9-paper);
}
.price {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--k9-maroon);
  margin: 6px 0 18px;
}
.variant-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 22px;
}
.variant-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--k9-paper);
  cursor: default;
}
.variant-list .variant-price { margin-left: auto; font-weight: 600; }
.form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  background: var(--k9-paper);
  color: var(--k9-ink);
}
.variant-price-display {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--k9-maroon);
}
.notice {
  background: var(--k9-success-bg);
  color: var(--k9-success-ink);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.92rem;
  margin-top: 8px;
}

/* Forms (admin) */
.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: var(--k9-ink-soft);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  background: var(--k9-paper);
  color: var(--k9-ink);
}
.form-field textarea { min-height: 220px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.92rem; }

.admin-bar {
  background: var(--k9-ink);
  color: #fff;
  font-size: 0.85rem;
}
.admin-bar .container { display: flex; justify-content: space-between; padding: 8px 24px; }
.admin-bar a { color: #f4d9db; }

.admin-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--k9-line);
  font-size: 0.95rem;
}
.admin-table th { font-family: var(--font-display); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--k9-ink-soft); }

/* Phase 3C-2: subscription status, at a glance. Reuses the dashboard
   card badge's pill shape rather than inventing a new one; color is the
   only thing that changes per status, kept subtle (tint background, dark
   ink) rather than loud/saturated so it stays consistent with the rest of
   this admin UI's restrained palette. */
.status-pill {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-pill--active { background: var(--k9-success-bg); color: var(--k9-success-ink); border-color: #d3e3ca; }
.status-pill--paused { background: #fbf1de; color: #7a5a17; border-color: #ecdcb2; }
.status-pill--on-hold { background: #fbf1de; color: #7a5a17; border-color: #ecdcb2; }
.status-pill--cancelled { background: #f1ecec; color: var(--k9-ink-soft); border-color: var(--k9-line); }
.status-pill--expired { background: #f1ecec; color: var(--k9-ink-soft); border-color: var(--k9-line); }

/* Phase 3C-5: renewal-attempt (processing/succeeded/failed) and
   notification (pending/processing/sent/skipped/failed) status pills for
   the admin Operations dashboard. Reuses the exact same tokens as the
   subscription-status pills above rather than inventing a new palette —
   "succeeded"/"sent" share the active/success treatment,
   "processing"/"pending" share the paused/on-hold amber (in-progress,
   nothing wrong yet), "failed" reuses .alert--error's red, and "skipped"
   reuses the neutral cancelled/expired grey. */
.status-pill--succeeded, .status-pill--sent { background: var(--k9-success-bg); color: var(--k9-success-ink); border-color: #d3e3ca; }
.status-pill--processing, .status-pill--pending { background: #fbf1de; color: #7a5a17; border-color: #ecdcb2; }
.status-pill--failed { background: var(--k9-danger-bg); color: var(--k9-danger); border-color: var(--k9-danger-border); }
.status-pill--skipped { background: #f1ecec; color: var(--k9-ink-soft); border-color: var(--k9-line); }

/* Phase 3C-5: Operations dashboard "Needs Attention" summary counts. */
.ops-summary-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.ops-summary-card {
  flex: 1 1 180px;
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--k9-paper);
}
.ops-summary-card__count { font-family: var(--font-display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ops-summary-card__label { color: var(--k9-ink-soft); font-size: 0.85rem; margin-top: 4px; }
.ops-summary-card--attention .ops-summary-card__count { color: #7a1b1b; }
.ops-section { margin-top: 40px; }

/* Admin dashboard (operations home, /admin) */
.admin-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.admin-dashboard-card {
  position: relative;
  display: block;
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.admin-dashboard-card:hover {
  border-color: var(--k9-maroon);
  transform: translateY(-2px);
}
.admin-dashboard-card h3 {
  margin: 0 0 8px;
  color: var(--k9-maroon);
  font-size: 1.2rem;
}
.admin-dashboard-card p {
  margin: 0;
  color: var(--k9-ink-soft);
  font-size: 0.92rem;
}
/* Orders: first and most visually prominent card in the grid. */
.admin-dashboard-card--primary {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--k9-maroon) 0%, var(--k9-maroon-dark) 100%);
  border-color: var(--k9-maroon-dark);
  padding: 32px 28px;
}
.admin-dashboard-card--primary h3 { color: var(--k9-paper); font-size: 1.5rem; }
.admin-dashboard-card--primary p { color: #f4d9db; }
a.admin-dashboard-card--primary:hover { border-color: var(--k9-gold); transform: translateY(-2px); }

.admin-dashboard-card--disabled {
  cursor: default;
  color: var(--k9-ink-soft);
  opacity: 0.7;
}
.fulfillment-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  max-width: 760px;
  margin: 8px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  background: var(--k9-paper);
  font-size: 0.95rem;
}
.fulfillment-state__action { margin-left: auto; }

/* Orders card: whole-card link to /admin/orders plus a NEW ORDERS tally
   linking to the Awaiting Fulfillment list (two sibling links, never
   nested). */
.admin-orders-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding: 0;
}
.admin-orders-card:hover { border-color: var(--k9-gold); }
.admin-orders-card__main {
  flex: 1 1 auto;
  display: block;
  padding: 32px 0 32px 28px;
  text-decoration: none;
  color: inherit;
}
.admin-orders-card__main h3 { margin: 0 0 8px; color: var(--k9-paper); font-size: 1.5rem; }
.admin-orders-card__main p { margin: 0; color: #f4d9db; font-size: 0.92rem; }
.admin-orders-card__tally {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: 28px;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--k9-paper);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-orders-card__tally:hover,
.admin-orders-card__tally:focus-visible { border-color: var(--k9-gold); background: rgba(0, 0, 0, 0.28); }
.admin-orders-card__tally-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
}
.admin-orders-card__tally-count {
  min-width: 2.4em;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--k9-gold);
  color: var(--k9-maroon-dark);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.admin-orders-card__tally--zero .admin-orders-card__tally-count {
  background: rgba(255, 255, 255, 0.16);
  color: var(--k9-paper);
}
@media (max-width: 640px) {
  .admin-orders-card { flex-direction: column; align-items: stretch; }
  .admin-orders-card__main { padding: 26px 24px 0; }
  .admin-orders-card__tally { margin: 0 24px 24px; justify-content: space-between; }
}

/* Shipping card: same two-link layout as the Orders card, on the regular
   white card. */
.admin-queue-card { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 0; flex-wrap: wrap; }
.admin-queue-card:hover { border-color: var(--k9-maroon); }
.admin-queue-card__main { flex: 1 1 180px; display: block; padding: 26px 0 0 24px; text-decoration: none; color: inherit; align-self: stretch; }
.admin-queue-card__main h3 { margin: 0 0 8px; color: var(--k9-maroon); font-size: 1.2rem; }
.admin-queue-card__main p { margin: 0; color: var(--k9-ink-soft); font-size: 0.92rem; }
.admin-queue-card__tally {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 24px 22px; padding: 7px 8px 7px 14px; flex: 1 1 100%;
  border: 1px solid var(--k9-line); border-radius: 999px; background: var(--k9-cream);
  color: var(--k9-maroon); text-decoration: none;
}
.admin-queue-card__tally:hover, .admin-queue-card__tally:focus-visible { border-color: var(--k9-maroon); }
.admin-queue-card__tally-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; }
.admin-queue-card__tally-count {
  min-width: 2.2em; padding: 2px 10px; border-radius: 999px; background: var(--k9-maroon); color: var(--k9-paper);
  font-family: var(--font-display); font-size: 1.15rem; text-align: center; font-variant-numeric: tabular-nums;
}
.admin-queue-card__tally--zero .admin-queue-card__tally-count { background: var(--k9-line); color: var(--k9-ink-soft); }

/* NEW ORDERS / SHIPPING queue forms */
.queue-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 4px; padding: 12px 14px; border: 1px solid var(--k9-line); border-radius: var(--radius); background: var(--k9-paper); }
.queue-toolbar__all { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.queue-toolbar__all[hidden] { display: none; }
.queue-toolbar__note { color: var(--k9-ink-soft); font-size: 0.85rem; }
.queue-select input[type="checkbox"], .queue-toolbar input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--k9-maroon); }
.queue-select input[type="checkbox"]:disabled { opacity: 0.35; }
.queue-eligibility .status-pill { margin-bottom: 4px; }
.queue-reason { display: block; color: var(--k9-ink-soft); font-size: 0.82rem; max-width: 260px; }
.tracking-code { font-size: 0.82rem; overflow-wrap: anywhere; }
.batch-summary .ops-summary-card { flex-basis: 150px; }
.print-steps { max-width: 760px; margin: 8px 0 24px; padding-left: 22px; }
.print-steps li { margin-bottom: 18px; line-height: 1.6; }
.fulfillment-state__unresolved { flex: 1 1 100%; margin-top: 6px; padding: 10px 12px; border-radius: var(--radius); background: var(--k9-danger-bg); color: var(--k9-danger); font-size: 0.9rem; }
.fulfillment-state__unresolved .btn { margin-left: 8px; }
@media (max-width: 900px) {
  .admin-table--stack td.queue-select { text-align: left; }
  .queue-reason { max-width: none; text-align: right; }
}

/* Informational card (no admin screen behind it): reads as a static note
   rather than a dimmed/disabled control. */
.admin-dashboard-card--info {
  cursor: default;
  background: var(--k9-cream);
  border-style: dashed;
  box-shadow: none;
}
.admin-dashboard-card--info h3 { color: var(--k9-ink); }

.admin-dashboard-card__badge {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--k9-ink-soft);
  background: var(--k9-cream);
  border: 1px solid var(--k9-line);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.alert {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 0.92rem;
}
.alert--error { background: var(--k9-danger-bg); color: var(--k9-danger); border: 1px solid var(--k9-danger-border); }
.alert--info { background: var(--k9-success-bg); color: var(--k9-success-ink); border: 1px solid #d3e3ca; }

/* Footer */
.site-footer {
  background: var(--k9-ink);
  color: #efe3e4;
  margin-top: var(--space-7);
}
.site-footer .container {
  padding: var(--space-7) 24px var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: space-between;
  font-size: 0.9rem;
}
.site-footer__address { line-height: 1.7; }
.site-footer a { color: #f4d9db; }
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.site-footer .footer-links a {
  padding: var(--space-1) 0;
  display: inline-block;
}
.site-footer .footer-note {
  color: #c9b6b8;
  width: 100%;
  margin-top: var(--space-4);
  font-size: 0.8rem;
  border-top: 1px solid rgba(239, 227, 228, 0.15);
  padding-top: var(--space-4);
}

/* Policies group (Terms, Privacy, Shipping, Refund & Returns). */
.site-footer .footer-links { flex: 1 1 320px; align-content: flex-start; }
.site-footer .footer-policies {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 170px;
}
.site-footer .footer-policies__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k9-gold);
}
.site-footer .footer-policies a { padding: var(--space-1) 0; }

@media (max-width: 767px) {
  .site-footer .container {
    flex-direction: column;
    gap: var(--space-4);
  }
  .site-footer .footer-policies {
    padding-top: var(--space-3);
    border-top: 1px solid rgba(239, 227, 228, 0.15);
  }
  .site-footer .footer-policies a {
    padding: 10px 0;
    min-height: var(--tap-target);
    display: flex;
    align-items: center;
  }
  .site-footer .footer-links {
    flex-direction: column;
    gap: 0;
  }
  .site-footer .footer-links a {
    padding: 10px 0;
    min-height: var(--tap-target);
    display: flex;
    align-items: center;
  }
}

/* Footer newsletter signup (double opt-in, /newsletter/subscribe) */
.site-footer .footer-signup {
  flex: 1 1 280px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer .footer-signup__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k9-gold);
}
.site-footer .footer-signup__row { display: flex; gap: var(--space-2); }
.site-footer .footer-signup__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap-target);
  padding: 0 var(--space-3);
  border: 1px solid rgba(239, 227, 228, 0.35);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
}
.site-footer .footer-signup__input:focus { outline: 2px solid var(--k9-gold); outline-offset: 1px; border-color: var(--k9-gold); }
.site-footer .footer-signup__btn {
  flex: 0 0 auto;
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius);
  background: var(--k9-gold);
  color: var(--k9-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.site-footer .footer-signup__btn:hover,
.site-footer .footer-signup__btn:focus-visible { background: #d9a744; }
.site-footer .footer-signup__note { margin: 0; font-size: 0.78rem; line-height: 1.45; color: #c9b6b8; }
.newsletter-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.newsletter-page__form { max-width: 420px; }
.newsletter-page__note { font-size: 0.88rem; color: var(--k9-ink-soft); }
@media (max-width: 767px) {
  .site-footer .footer-signup {
    flex: 0 0 auto;
    max-width: none;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(239, 227, 228, 0.15);
  }
}

/* Cart (Phase 3A) */
.cart-table td { vertical-align: middle; }
.cart-qty-form { display: flex; align-items: center; gap: 8px; }
.cart-qty-form input[type="number"] {
  width: 64px;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 8px 10px;
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  background: var(--k9-paper);
  color: var(--k9-ink);
}
.form-field input[type="number"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  background: var(--k9-paper);
  color: var(--k9-ink);
}
.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--k9-maroon);
  text-decoration: underline;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn-link:hover { color: var(--k9-maroon-dark); }
.cart-summary {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--k9-cream);
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  max-width: 420px;
}
.cart-summary__subtotal {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--k9-maroon);
  margin: 0;
}

/* Cart (Phase 5B) - src/views/public/cart.ejs. Presentation only, all
   scoped under .cart-page so the shared .cart-summary / .cart-table
   rules above (still used by Checkout, Order Confirmation and Admin)
   are untouched. Desktop: items left (~65%), Order Summary right. */
.cart-page { padding-bottom: var(--space-6); }
.cart-page .page-header { padding-bottom: var(--space-4); }
.cart-nowrap { white-space: nowrap; }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.cart-items__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }

.cart-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas:
    "thumb main"
    "total total";
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

.cart-item__thumb {
  grid-area: thumb;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 8px;
}
/* The transparent pouch sits directly on the card; scaled 8% within its
   unchanged thumbnail box (centered, aspect ratio kept). */
.cart-item__thumb img { width: 100%; height: auto; display: block; transform: scale(1.08); transform-origin: center; }

.cart-item__main { grid-area: main; min-width: 0; }

.cart-item__name {
  margin: 0 0 6px;
  font-size: 1.25rem;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--k9-ink);
}

.cart-item__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--k9-cream);
  line-height: 1.3;
  border: 1px solid var(--k9-line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k9-ink-soft);
}
.cart-item--autoship .cart-item__type {
  background: var(--k9-maroon-tint);
  border-color: #ecd6d3;
  color: var(--k9-maroon);
}
.cart-item__type-icon { width: 15px; height: 15px; flex-shrink: 0; }

.cart-item__note {
  margin: 8px 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--k9-ink-soft);
}

.cart-item__unit {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--k9-ink);
}
.cart-item__unit span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--k9-ink-soft);
}

.cart-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}
.cart-page .cart-qty-form { gap: var(--space-2); }
.cart-qty-form__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k9-ink-soft);
}
.cart-page .cart-qty-form input[type="number"] {
  width: 68px;
  min-height: var(--tap-target);
  text-align: center;
  font-weight: 600;
  border: 1.5px solid #d9c9bf;
}
.cart-page .cart-qty-form input[type="number"]:focus { border-color: var(--k9-maroon); }
.cart-page .cart-qty-form .btn--small { min-height: var(--tap-target); padding: 8px 16px; cursor: pointer; }
.cart-item__remove { margin: 0; }
.cart-item__remove .btn-link { min-height: var(--tap-target); font-size: 0.9rem; }

.cart-item__total {
  grid-area: total;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--k9-line);
}
.cart-item__total-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k9-ink-soft);
}
.cart-item__total-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--k9-maroon);
}

/* Order Summary */
.cart-order {
  padding: var(--space-5);
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-top: 3px solid var(--k9-gold);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(36, 19, 21, 0.05), 0 16px 36px -22px rgba(36, 19, 21, 0.35);
}
.cart-order__title {
  margin: 0 0 var(--space-4);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--k9-ink);
}
.cart-order__rows { margin: 0 0 var(--space-5); }
.cart-order__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--k9-line);
}
.cart-order__row:first-child { padding-top: 0; }
.cart-order__row dt,
.cart-order__row dd { margin: 0; }
.cart-order__row dt { font-weight: 600; color: var(--k9-ink); }
.cart-order__row dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--k9-maroon);
}
.cart-order__count { font-weight: 400; color: var(--k9-ink-soft); font-size: 0.9rem; }
.cart-order__row--muted dt { font-weight: 400; color: var(--k9-ink-soft); }
.cart-order__row--muted dd {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--k9-ink-soft);
  text-align: right;
}
.cart-order__row--free dt { font-weight: 400; color: var(--k9-ink-soft); }
.cart-order__row--free dd {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--k9-maroon);
}
.cart-order__ship-note {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--k9-ink-soft);
}
.cart-order__ship-elsewhere { margin: var(--space-2) 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--k9-ink-soft); }
.cart-order__cta,
.cart-order__continue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.cart-order__cta {
  min-height: 56px;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  box-shadow: 0 10px 20px -12px rgba(122, 27, 43, 0.7);
}
.cart-order__continue { margin-top: var(--space-3); }

/* Empty cart */
.cart-empty {
  max-width: 520px;
  margin: var(--space-4) auto 0;
  padding: var(--space-6) var(--space-5) var(--space-7);
  text-align: center;
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.cart-empty__img { width: 180px; height: auto; margin: 0 auto var(--space-4); opacity: 0.95; }
.cart-empty__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--k9-ink);
}
.cart-empty__copy { margin: 0 0 var(--space-5); color: var(--k9-ink-soft); }

@media (min-width: 600px) {
  .cart-item {
    grid-template-columns: 112px minmax(0, 1fr) auto;
    grid-template-areas: "thumb main total";
    gap: var(--space-5);
    padding: var(--space-5);
  }
  .cart-item__thumb { align-self: start; }
  .cart-item__total {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 4px;
    padding-top: 0;
    border-top: 0;
  }
}

@media (min-width: 1024px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
  .cart-order { position: sticky; top: var(--space-5); }
}

/* Checkout (Phase 3A) */
.checkout-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 40px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 860px) {
  .checkout-layout { grid-template-columns: 1fr; }
}
.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}
.field-error {
  color: var(--k9-danger);
  font-size: 0.82rem;
  margin: 4px 0 0;
}
.checkout-layout h3:not(:first-child) { margin-top: 30px; }

/* Checkout (Phase 5B) - src/views/public/checkout.ejs. Presentation
   only, scoped under .checkout-page; the older .checkout-layout /
   .cart-summary rules above stay for the pages that still use them.
   Mobile (base): one column - sections, Order Summary, CTA. Desktop:
   form sections left (~63%), sticky Order Summary right. */
.checkout-page { padding-bottom: var(--space-6); }
.checkout-page .page-header { padding-bottom: var(--space-4); }

.co-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-6);
  align-items: start;
}

.co-section {
  padding: var(--space-5) 0 var(--space-3);
  border-top: 1px solid var(--k9-line);
}
.co-section:first-of-type { border-top: 0; padding-top: var(--space-2); }

.co-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--k9-ink);
}
.co-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--k9-maroon);
  color: var(--k9-cream);
  font-size: 0.85rem;
  letter-spacing: 0;
}

.checkout-page .form-field { margin-bottom: var(--space-4); }
.checkout-page .form-row { gap: 0 var(--space-4); }
.checkout-page .form-field input[type="text"],
.checkout-page .form-field input[type="email"] {
  min-height: 48px;
  border: 1.5px solid #d9c9bf;
  background: var(--k9-paper);
  transition: border-color 0.15s ease;
}
.checkout-page .form-field input[type="text"]:hover,
.checkout-page .form-field input[type="email"]:hover { border-color: var(--k9-ink-soft); }
.checkout-page .form-field input[type="text"]:focus,
.checkout-page .form-field input[type="email"]:focus { border-color: var(--k9-maroon); }

/* Billing: "Same as shipping" as a clear, tappable option. */
.co-same { margin-bottom: var(--space-2); }
.checkout-page .co-same__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-4);
  background: var(--k9-paper);
  border: 1.5px solid #d9c9bf;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--k9-ink);
  cursor: pointer;
}
.co-same__option:has(input:checked) { border-color: var(--k9-maroon); background: #fdf8f7; }
.co-same__option input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--k9-maroon); }
.checkout-page .co-optin { margin: var(--space-3) 0 0; }
.checkout-page .co-optin__option { align-items: flex-start; font-weight: 400; font-size: 0.95rem; line-height: 1.45; }
.checkout-page .co-optin__option input { margin-top: 1px; }
.co-help { margin: 0 0 var(--space-4); font-size: 0.88rem; line-height: 1.5; color: var(--k9-ink-soft); }
.co-billing-fields {
  padding-left: var(--space-4);
  border-left: 2px solid var(--k9-line);
}

/* Shipping method options */
.co-methods { display: grid; gap: var(--space-3); }
.co-method {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  background: var(--k9-paper);
  border: 1.5px solid #d9c9bf;
  border-radius: var(--radius);
  cursor: pointer;
}
.co-method:has(input:checked) { border-color: var(--k9-maroon); box-shadow: inset 0 0 0 1px var(--k9-maroon); }
.co-method input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--k9-maroon); }
.co-method__label { font-weight: 600; color: var(--k9-ink); }
.co-method__price {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--k9-maroon);
}

/* Pre-launch shipping: State select, fixed U.S. country, shipping notes. */
.checkout-page .form-field select {
  min-height: 48px;
  border: 1.5px solid #d9c9bf;
  background-color: var(--k9-paper);
}
.checkout-page .form-field select:focus { border-color: var(--k9-maroon); }
.co-field-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: var(--k9-ink-soft);
}
.co-fixed-value {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 1.5px dashed #d9c9bf;
  border-radius: var(--radius);
  color: var(--k9-ink);
}
.co-ship-hint,
.co-method__note { margin: var(--space-2) 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--k9-ink-soft); }
.co-quote-notice { font-weight: 600; }
.co-summary__row--credit { border-bottom: 0; padding-bottom: 0; }
.co-summary__row--credit dt { font-weight: 600; color: var(--k9-success-ink); }
.co-summary__row--credit dd { font-size: 1.05rem; color: var(--k9-success-ink); }
.co-summary__gross { color: var(--k9-ink-soft) !important; font-size: 1.05rem !important; }
.co-summary__row--net dt { font-weight: 700; }
.co-summary__renewals { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--k9-line); }
.co-summary__renewals-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k9-maroon);
}
.co-summary__renewals .co-summary__note { margin-top: 4px; }

/* Order Summary - same card language as the Cart's Order Summary. */
.co-summary {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-top: 3px solid var(--k9-gold);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(36, 19, 21, 0.05), 0 16px 36px -22px rgba(36, 19, 21, 0.35);
}
.co-summary__title { margin: 0 0 var(--space-4); font-size: 1.15rem; letter-spacing: 0.06em; color: var(--k9-ink); }
.co-summary__items { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-4); }
.co-summary__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}
.co-summary__thumb { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; }
.co-summary__thumb img { width: 100%; height: auto; display: block; }
.co-summary__info { display: grid; gap: 4px; min-width: 0; }
.co-summary__name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--k9-ink); }
.co-summary__type {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--k9-cream);
  border: 1px solid var(--k9-line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--k9-ink-soft);
}
.co-summary__type--autoship { background: var(--k9-maroon-tint); border-color: #ecd6d3; color: var(--k9-maroon); }
.co-summary__qty { font-size: 0.88rem; color: var(--k9-ink-soft); }
.co-summary__line { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--k9-ink); }
.co-summary__rows { margin: 0; border-top: 1px solid var(--k9-line); }
.co-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--k9-line);
}
.co-summary__row dt,
.co-summary__row dd { margin: 0; }
.co-summary__row dt { font-weight: 600; color: var(--k9-ink); }
.co-summary__row dd { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--k9-maroon); }
.co-summary__ship-label { display: block; margin-top: 2px; font-weight: 400; font-size: 0.85rem; color: var(--k9-ink-soft); }
.co-summary__pending { font-family: var(--font-body) !important; font-weight: 400 !important; font-size: 0.92rem !important; color: var(--k9-ink-soft) !important; }
.co-summary__row--total {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-bottom: 0;
}
.co-summary__row--total dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.co-summary__row--total dd { font-size: 1.7rem; }
.co-summary__note { margin: var(--space-3) 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--k9-ink-soft); }

/* Primary CTA */
.co-submit { margin-top: var(--space-5); }
.co-submit__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(122, 27, 43, 0.7);
}
.co-submit__note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: var(--space-3) 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--k9-ink-soft);
  text-align: center;
}
.co-submit__autoship {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--k9-gold);
  background: var(--k9-cream, #faf5ee);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--k9-ink, inherit);
}
.co-submit__autoship a { color: var(--k9-maroon); text-decoration: underline; }
.co-submit__icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--k9-maroon); }

@media (min-width: 1024px) {
  .co-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .co-layout > .co-section,
  .co-layout > .co-submit { grid-column: 1; }
  .co-summary {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: start;
    position: sticky;
    top: var(--space-5);
    margin-top: var(--space-2);
  }
}

/* ---------------------------------------------------------------------
   Phase 5B: Order Confirmation - same card language as Cart/Checkout.
   Scoped to .oc-*; the shared .cart-summary is left untouched.
   --------------------------------------------------------------------- */
.oc-page { max-width: 880px; padding-top: var(--space-6); padding-bottom: var(--space-6); }
.oc-hero { text-align: center; margin-bottom: var(--space-5); }
.oc-hero__logo { display: block; width: 220px; max-width: 60%; height: auto; margin: 0 auto var(--space-5); }
.oc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 auto var(--space-4);
  padding: 10px 20px 10px 10px;
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(36, 19, 21, 0.05);
  text-align: left;
}
.oc-status__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--k9-success-ink);
  color: var(--k9-paper);
}
.oc-status__text { display: grid; gap: 1px; }
.oc-status__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k9-success-ink);
}
.oc-status__sub { font-size: 0.92rem; color: var(--k9-ink-soft); }
.oc-hero__title { margin: 0 0 var(--space-3); font-size: clamp(1.7rem, 4.5vw, 2.5rem); color: var(--k9-maroon); }
.oc-hero__lede { margin: 0 0 var(--space-3); font-size: 1.05rem; color: var(--k9-ink); overflow-wrap: anywhere; }
.oc-hero__meta { margin: 0 0 4px; font-size: 0.88rem; color: var(--k9-ink-soft); }
.oc-hero__ref { margin: 0; font-size: 0.75rem; color: var(--k9-ink-soft); opacity: 0.85; overflow-wrap: anywhere; }
.oc-hero__ref code { font-size: inherit; background: none; padding: 0; color: inherit; }
.oc-hero__alert { margin: var(--space-4) auto 0; max-width: 640px; text-align: left; }

.oc-card {
  padding: var(--space-5);
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-top: 3px solid var(--k9-gold);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(36, 19, 21, 0.05), 0 16px 36px -22px rgba(36, 19, 21, 0.35);
}
.oc-card__title { margin: 0 0 var(--space-4); font-size: 1.15rem; letter-spacing: 0.06em; color: var(--k9-ink); }
.oc-items { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-4); }
.oc-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.oc-item__thumb { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; }
.oc-item__thumb img { width: 100%; height: auto; display: block; }
.oc-item__info { display: grid; gap: 4px; min-width: 0; }
.oc-item__name { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--k9-ink); }
.oc-item__type {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--k9-cream);
  border: 1px solid var(--k9-line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--k9-ink-soft);
}
.oc-item__type--autoship { background: var(--k9-maroon-tint); border-color: #ecd6d3; color: var(--k9-maroon); }
.oc-item__qty { font-size: 0.88rem; color: var(--k9-ink-soft); }
.oc-item__line { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--k9-ink); }
.oc-rows { margin: 0; border-top: 1px solid var(--k9-line); }
.oc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--k9-line);
}
.oc-row dt, .oc-row dd { margin: 0; }
.oc-row dt { font-weight: 600; color: var(--k9-ink); }
.oc-row dd { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--k9-maroon); }
.oc-row__label { display: block; margin-top: 2px; font-weight: 400; font-size: 0.85rem; color: var(--k9-ink-soft); }
.oc-row--total { margin-top: var(--space-2); padding-top: var(--space-4); border-bottom: 0; }
.oc-row--total dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.oc-row--total dd { font-size: 1.7rem; }

.oc-addresses { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.oc-address { border-top-width: 1px; border-top-color: var(--k9-line); box-shadow: 0 1px 2px rgba(36, 19, 21, 0.05); }
.oc-address .oc-card__title { margin-bottom: var(--space-3); font-size: 1rem; }
.oc-address address { display: grid; gap: 2px; font-style: normal; line-height: 1.5; color: var(--k9-ink); overflow-wrap: anywhere; }
.oc-address address span:first-child { font-weight: 600; }

.oc-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.oc-actions__btn { display: flex; align-items: center; justify-content: center; text-align: center; }

@media (min-width: 640px) {
  .oc-addresses { grid-template-columns: 1fr 1fr; }
  .oc-actions { flex-direction: row; justify-content: center; }
  .oc-actions__btn { min-width: 220px; }
}
@media (max-width: 480px) {
  .oc-page { padding-top: var(--space-5); }
  .oc-card { padding: var(--space-4); }
  .oc-item { grid-template-columns: 60px minmax(0, 1fr) auto; gap: var(--space-3); }
  .oc-item__thumb { width: 60px; height: 60px; }
}

/* ---------------------------------------------------------------------
   Customer-facing policies (/terms, /privacy, /shipping-policy,
   /refund-policy). Same card language as Cart/Checkout/Confirmation.
   --------------------------------------------------------------------- */
.policy-page { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.policy-hero { max-width: 760px; margin: 0 auto var(--space-5); text-align: center; }
.policy-hero__eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k9-gold);
}
.policy-hero__title { margin: 0 0 var(--space-2); font-size: clamp(2rem, 5vw, 2.9rem); color: var(--k9-ink); }
.policy-hero__updated { margin: 0 0 var(--space-4); font-size: 0.92rem; color: var(--k9-ink-soft); }
.policy-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.policy-tabs__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--k9-line);
  border-radius: 999px;
  background: var(--k9-paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--k9-ink);
}
.policy-tabs__link:hover { border-color: var(--k9-maroon); color: var(--k9-maroon); }
.policy-tabs__link.is-current { background: var(--k9-maroon); border-color: var(--k9-maroon); color: var(--k9-paper); }

.policy-layout { display: grid; gap: var(--space-5); max-width: 1040px; margin: 0 auto; }
.policy-toc { display: none; }
.policy-card {
  padding: var(--space-6) clamp(20px, 5vw, 48px);
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-top: 3px solid var(--k9-gold);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(36, 19, 21, 0.05), 0 16px 36px -22px rgba(36, 19, 21, 0.35);
  line-height: 1.7;
  color: var(--k9-ink);
  overflow-wrap: anywhere;
}
.policy-card__intro { margin: 0 0 var(--space-5); font-size: 1.08rem; }
.policy-section { scroll-margin-top: 96px; }
.policy-section + .policy-section { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--k9-line); }
.policy-section__title { margin: 0 0 var(--space-3); font-size: 1.3rem; letter-spacing: 0.04em; color: var(--k9-maroon); }
.policy-section p { margin: 0 0 var(--space-3); }
.policy-section p:last-child { margin-bottom: 0; }
.policy-list { margin: 0 0 var(--space-3); padding-left: 1.3em; }
.policy-list li { margin-bottom: 4px; }
.policy-list li::marker { color: var(--k9-gold); }
.policy-card a { color: var(--k9-maroon); font-weight: 600; }
.policy-contact {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--k9-cream);
  border: 1px solid var(--k9-line);
  border-radius: 10px;
}
.policy-contact__title {
  margin: 0 0 4px !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k9-ink);
}
.policy-contact p { margin: 0; }

@media (min-width: 960px) {
  .policy-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .policy-toc { display: block; position: sticky; top: var(--space-5); }
  .policy-toc__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--k9-ink-soft);
  }
  .policy-toc__list { list-style: none; margin: 0; padding: 0 0 0 var(--space-3); border-left: 2px solid var(--k9-line); }
  .policy-toc__list li { margin-bottom: 8px; line-height: 1.35; }
  .policy-toc__list a { font-size: 0.9rem; color: var(--k9-ink-soft); text-decoration: none; }
  .policy-toc__list a:hover { color: var(--k9-maroon); }
}
@media (max-width: 480px) {
  .policy-tabs__link { font-size: 0.74rem; padding: 0 12px; }
  .policy-card { padding: var(--space-5) var(--space-4); }
}

/* Error page */
.error-page { padding: 80px 0; text-align: center; }
.error-page h1 { font-size: 4rem; color: var(--k9-maroon); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------------------------------------------------------------
   Phase 5B-1: customer-facing component foundations.
   New, currently-unused-by-any-template building blocks for later
   Phase 5B sub-phases (cart, order confirmation, account) to adopt when
   they replace their current .admin-table-based layouts. Defining them
   now, without wiring any template to them yet, keeps this phase to
   "global shell" scope. None of this touches .admin-table, which stays
   exactly as-is for the actual admin screens.
   ------------------------------------------------------------------- */

/* A plain bordered block that .summary-card__row lines stack inside -
   for a future order/subscription summary in place of a two-column
   admin-table. */
.summary-card {
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.summary-card__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--k9-line);
}
.summary-card__row:last-child { border-bottom: none; }
.summary-card__label {
  color: var(--k9-ink-soft);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.summary-card__value { text-align: right; font-weight: 600; }

/* A single postal address, for future use wherever a shipping or
   billing address is shown (order confirmation, account, subscription
   shipping address) instead of today's .product-layout address grid,
   which is shared verbatim with the admin order-detail screen. */
.address-card {
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  line-height: 1.6;
}
.address-card__label {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--k9-ink-soft);
  margin-bottom: var(--space-2);
}

/* Responsive list-of-cards pattern for a future replacement of
   .admin-table on cart/order/subscription line-item lists. Meant for a
   <ul>/<ol> (or a container of repeated .list-card-row children) rather
   than a <table>, so no row loses meaning on narrow screens and nothing
   needs an overflow-x scroller. */
.list-card { display: flex; flex-direction: column; gap: var(--space-3); }
.list-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* Generic status badge, sharing the existing .status-pill color
   vocabulary rather than introducing a second palette. */
.badge {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid var(--k9-line);
  background: var(--k9-cream);
  color: var(--k9-ink-soft);
}
.badge--accent {
  background: var(--k9-maroon-tint);
  color: var(--k9-maroon);
  border-color: var(--k9-maroon-tint);
}

/* Screen-reader-only utility, for labeling an icon-only control without
   adding visible text. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Comfortable minimum tap target for text-style inputs, selects and
   number steppers - additive only; does not touch any screen's own
   layout/spacing, and deliberately excludes .form-field textarea, which
   already has its own larger, intentional min-height. */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field select,
.cart-qty-form input[type="number"] {
  min-height: var(--tap-target);
}

.btn { min-height: var(--tap-target); }

/* Phase 5B-6B: Benefits cinematic hero — /benefits only. New, additive
   classes; nothing here is referenced by any other page/template, so this
   cannot affect the homepage, Science, Nutrition, Compare, Testimonials,
   About or Product.

   Source: DogCar.mp4 (opaque, 672x448, 3:2, 24fps, ~6s loop), inspected
   frame-by-frame before writing any of this. Across every sampled frame
   the dog's head sits left-of-center to center-right (roughly the 14%-79%
   horizontal band of the frame) with clear, quiet sky/bokeh in the
   remaining left margin - opposite the homepage hero's own left-dog/
   right-copy composition, so this section is deliberately mirrored:
   copy on the LEFT, scrim originating from the LEFT, on desktop/tablet.

   Architecture mirrors .bg-video above: poster underneath, opaque video on
   top (paints over the poster once a frame is ready, no JS), CSS scrim,
   reduced-motion hides the video and leaves the poster - see that block's
   own comments for the full reasoning, not repeated here. */
.benefits-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  height: clamp(320px, 52vh, 420px);
  background: var(--k9-ink);
  border-bottom: 1px solid var(--k9-line);
}

@media (min-width: 768px) {
  .benefits-hero {
    height: clamp(440px, 68vh, 640px);
  }
}

.benefits-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.benefits-hero__poster,
.benefits-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mobile (base) crop: the container here is taller relative to its
     width than the source's own 3:2 ratio, so object-fit:cover crops
     horizontally as well as vertically - checked against real rendered
     crops at 390x360 through 390x420 (the realistic mobile height range
     for the clamp() above). 38% keeps the whole head - both ears, both
     eyes, nose and mouth - inside frame at every one of those heights
     while trimming the emptiest slice of left background and the busiest
     part of the window-pillar on the right, rather than a naive center
     crop, which would clip the right ear. 30% down from the top keeps the
     ears fully in frame (they sit close to the top of the source frame)
     while not pushing the mouth/chin into the bottom crop. */
  object-position: 38% 30%;
}

@media (min-width: 768px) {
  .benefits-hero__poster,
  .benefits-hero__video {
    /* Desktop/tablet: at every hero width in this range, the container is
       wider relative to its height than the source's 3:2 ratio, so cover
       scales to fill the width exactly and crops only vertically - the
       full left-to-right composition (dog and quiet left margin alike)
       stays visible regardless of the X value (checked against real
       rendered crops at 1440x630 down to 768x460, the realistic desktop/
       tablet height range for the clamp() above), which is why X is left
       at a neutral, inert 50% rather than a value tuned for a crop that
       isn't happening at these widths. Y at 35% keeps both ears and the
       full mouth/tongue in frame at every one of those heights - checked
       against the tallest (630px, least cropping) and shortest (460px,
       most cropping) of the tested range. */
    object-position: 50% 35%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefits-hero__video { display: none; }
  .benefits-hero__poster { display: block; }
}

/* Mobile (base) scrim: bottom-up, since the copy sits in a bottom band on
   mobile rather than beside the dog (see .benefits-hero__inner below) -
   there is no reliable quiet side margin left once the dog fills nearly
   the full mobile crop width, so the text moves to sit under it instead.
   Dark enough at the very bottom for the title/lede to read, fully clear
   by the point the dog's face is on screen. */
.benefits-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(36, 19, 21, 0.8) 0%,
    rgba(36, 19, 21, 0.55) 30%,
    rgba(36, 19, 21, 0.16) 55%,
    rgba(36, 19, 21, 0) 74%
  );
}

@media (min-width: 768px) {
  /* Desktop/tablet scrim: left-originating (copy sits on the left here -
     see the composition note above the .benefits-hero__media rule),
     strongest directly behind the copy and fading out by 62% across so
     the dog stays visibly "alive" rather than washed under a dark
     gradient - checked against frames throughout the loop so the fade
     point consistently lands clear of the dog at every sampled frame. */
  .benefits-hero__scrim {
    background: linear-gradient(
      90deg,
      rgba(36, 19, 21, 0.72) 0%,
      rgba(36, 19, 21, 0.52) 26%,
      rgba(36, 19, 21, 0.16) 46%,
      rgba(36, 19, 21, 0) 62%
    );
  }
}

.benefits-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
  /* Mobile (base): copy sits in a bottom band over the scrim above,
     rather than vertically centered like desktop - .benefits-hero itself
     is display:flex/align-items:center, so this pushes its own content
     down to the bottom of that flex box instead of overriding the parent. */
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding-bottom: var(--space-5);
}

@media (min-width: 768px) {
  .benefits-hero__inner {
    padding: 0 24px;
    align-items: center;
  }
}

.benefits-hero__copy {
  max-width: 46ch;
}

@media (min-width: 768px) {
  .benefits-hero__copy {
    max-width: 560px;
  }
}

/* Cream text over a scrimmed photographic video - same reasoning as
   .hero__headline/.hero__lede above, values matched to those for visual
   consistency across the two cinematic heroes on the site. */
.benefits-hero__title {
  font-family: var(--font-display);
  color: var(--k9-cream);
  font-size: clamp(2rem, 8vw, 3.25rem);
  line-height: 1.05;
  margin: 0 0 var(--space-3);
  text-shadow: 0 1px 3px rgba(36, 19, 21, 0.55);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .benefits-hero__title {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
  }
}

.benefits-hero__lede {
  font-size: 1.05rem;
  color: rgba(251, 246, 239, 0.9);
  text-shadow: 0 1px 3px rgba(36, 19, 21, 0.45);
}

.benefits-hero__lede p {
  margin: 0;
}

@media (min-width: 768px) {
  .benefits-hero__lede {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   Phase 5B-6C: Science cinematic video hero
   ==========================================================================
   Scoped entirely to .science-hero* classes - none of these selectors touch
   .benefits-hero, .bg-video, or any homepage/Benefits rule above. Same
   proven poster-under/opaque-video-over/no-JS architecture as the Benefits
   hero, but the design itself is driven by K9rxScience.mp4's own
   composition, not copied from DogCar.

   Revision: the hero carries no overlay content whatsoever now - no title,
   no scrim, no vignette, no blur - just the poster/video media layer, so
   K9rxScience.mp4 (a busy, near-symmetric CG animation with baked-in
   labels in all four corners) displays completely unobstructed from top
   to bottom. The page heading lives below the hero instead - see
   .science-heading further down, styled to match the site's normal black
   Oswald page-title treatment rather than sitting on top of the video. */

/* Phase 5B framing fix: the hero used to have a fixed height
   (clamp(380px, 52vh, 480px) on mobile, clamp(480px, 63vh, 640px) from
   768px) with the media set to object-fit: cover, so on most viewports the
   ~2.1:1 animation (1376x656) was zoomed to fill a shallower box and its
   top/bottom - including the four corner nutrient labels - were cut off.
   The hero's height now comes from the media's own aspect ratio, so the
   complete frame is always shown edge to edge at every width. */
.science-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 1376 / 656;
  background: var(--k9-ink);
  border-bottom: 1px solid var(--k9-line);
}

/* Phase 5B scale refinement: a contained cinematic feature rather than a
   full-bleed hero. From 1200px up the animation is capped at 1200px wide
   and centered (height still follows the aspect ratio - ~1200x572 at a
   1440px viewport), with the cream page background showing either side
   and a small top gap so it sits in the page instead of under the header.
   Below 1200px it stays full width, exactly as before. */
@media (min-width: 1200px) {
  .science-hero {
    max-width: 1200px;
    margin: var(--space-6) auto 0;
    border-bottom: 0;
    border-radius: var(--radius);
  }
}

.science-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.science-hero__poster,
.science-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* The box already matches the media's aspect ratio; contain guarantees
     nothing is ever cropped even if a browser rounds a pixel. */
  object-fit: contain;
  object-position: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .science-hero__video { display: none; }
  .science-hero__poster { display: block; }
}

/* Science page heading - lives in the cream content area below the hero
   now (not overlaid on the animation). Uses the site's normal black
   Oswald page-title treatment (inherits color/font-family/weight from the
   global "h1, h2, h3, h4" rule) with just alignment, spacing, and the
   selective-uppercase override added. */
.science-heading {
  text-align: center;
  margin: var(--space-7) 0 var(--space-4);
  /* Overrides the site-wide "h1, h2, h3, h4 { text-transform: uppercase }"
     base rule so "K9-Rx" keeps its authored case - only the nested
     .science-heading__caps span (wrapping "Science") is uppercased. */
  text-transform: none;
}

@media (min-width: 768px) {
  .science-heading {
    margin: var(--space-8) 0 var(--space-5);
  }
}

/* The heading reads "K9-Rx Science" but must display as "K9-Rx SCIENCE" -
   the brand mark keeps its authored case (lowercase "x" in "Rx") while
   only the second word is visually capitalized. A single
   text-transform: uppercase on the whole heading would incorrectly turn
   "Rx" into "RX", so only this inner span is uppercased. */
.science-heading__caps {
  text-transform: uppercase;
}

/* ==========================================================================
   Phase 5B-6D: About - K9-Rx brand history (src/views/public/about.ejs)

   An editorial/documentary page, not a cinematic hero. Every rule below
   is scoped to .about / .about-* so nothing here can reach the locked
   Homepage, Benefits or Science styles.

   The page background carries the story's journey through time:
     cream (today) -> near-black (MET-Rx) -> three progressively deeper
     "archive paper" tones -> dark screening room (the infomercial) ->
     deepest archive paper (the original K9-Rx) -> THEN/NOW gradient back
     up to cream -> standard maroon/gold/cream for the close.

   Archival artifacts are never recolored; they're "mounted" on a warm
   paper mat (.about-print) with a soft shadow and, at most, a ~1.5deg
   tilt - restrained depth rather than a scrapbook.

   Headings here are authored in their final case (e.g. "MET-Rx",
   "K9-Rx") and opt out of the global h1-h4 uppercase transform, which
   would otherwise turn "Rx" into "RX" (same issue Science solved with
   its heading split). The same applies to the .btn labels.
   ========================================================================== */

.about {
  --about-paper-1: #f5eee3;
  --about-paper-2: #eee4d4;
  --about-paper-3: #e6d9c4;
  --about-night: #161012;
  --about-night-ink: #efe6dc;
  --about-night-soft: #b9aca4;
  --about-mat: #fffdf8;
  --about-shadow-print: 0 1px 2px rgba(36, 19, 21, 0.12), 0 22px 44px -18px rgba(36, 19, 21, 0.45);
  --about-shadow-soft: 0 1px 2px rgba(36, 19, 21, 0.08), 0 14px 30px -16px rgba(36, 19, 21, 0.35);

  /* main has a 64px bottom padding site-wide; the About page ends on a
     full-bleed band, so close that gap above the footer. */
  margin-bottom: -64px;
  overflow-x: clip;
}

/* ...and the footer's own top margin, on this page only. */
main:has(> .about) + .site-footer { margin-top: 0; }

.about h1,
.about h2,
.about h3,
.about .btn {
  text-transform: none;
}

.about-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.about-wrap--narrow { max-width: 760px; }

.about-chapter { padding: 72px 0; }

@media (min-width: 1024px) {
  .about-chapter { padding: 112px 0; }
}

/* --- Shared type ------------------------------------------------------- */

.about-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--k9-gold);
}

.about-eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.about-eyebrow--center { justify-content: center; }
.about-eyebrow--center::after {
  content: "";
  width: 32px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.about-h2 {
  margin: 0 0 var(--space-5);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--k9-maroon);
}

.about-h3 {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  letter-spacing: 0.06em;
  color: var(--k9-ink);
}

.about-copy p {
  font-size: 1.06rem;
  line-height: 1.75;
  max-width: 36em;
  margin: 0 0 1.1em;
}

.about-copy p:last-child { margin-bottom: 0; }

.about-copy--center { text-align: center; }
.about-copy--center p { margin-left: auto; margin-right: auto; }

/* A short, set-apart line in the story ("I did.", "This time, Scott was
   in.") - a quiet beat, not a headline. */
.about-copy .about-beat {
  margin: 1.4em 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--k9-maroon);
}

/* --- Archival print mount ---------------------------------------------- */

.about-print {
  margin: 0;
  padding: 10px;
  background: var(--about-mat);
  box-shadow: var(--about-shadow-print);
}

.about-print img { width: 100%; }

@media (min-width: 768px) {
  .about-print { padding: 14px; }
  .about-print--tilt-left { transform: rotate(-1.4deg); }
  .about-print--tilt-right { transform: rotate(1.2deg); }
}

.about-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k9-ink-soft);
}

/* --- 1. The K9-Rx story ------------------------------------------------ */

.about-intro {
  padding: 56px 0 72px;
  background: var(--k9-cream);
}

.about-intro__grid {
  display: grid;
  gap: 56px;
  align-items: center;
}

.about-intro__title {
  margin: 0 0 var(--space-6);
  font-size: clamp(2.3rem, 5.6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--k9-ink);
}

.about-intro__title-line { display: block; }
.about-intro__title-line--accent { color: var(--k9-maroon); }

.about-copy .about-intro__answer {
  margin: 1.3em 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--k9-gold);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--k9-maroon);
}

/* Opening products, stacked: the original tub pair (THEN) above today's
   pouch, each centered in the right-hand column with its label centered
   directly beneath it. No overlap, no connecting graphic.
   The tubs' transparent canvas has empty space above (~7.5%) and below
   (~13%) the products, so small negative margins (percentages of the
   figure width) pull the label and the next product up to the visible
   tubs rather than to the canvas edge. */
.about-intro__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.about-intro__then,
.about-intro__now {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 87.5% = a 12.5% reduction of the visible tub pair; its image margins
   are percentages of this figure, so they scale with it. */
.about-intro__then { width: 87.5%; }

.about-intro__then img,
.about-intro__now img { width: 100%; }

.about-intro__then img {
  margin: -5% 0 -8%;
}

.about-intro__now {
  width: 78%;
  margin-top: 56px;
}

.about-intro__now img {
  filter: drop-shadow(0 18px 24px rgba(36, 19, 21, 0.28));
}

.about-intro__then .about-tag,
.about-intro__now .about-tag {
  display: block;
  text-align: center;
  padding-top: 14px;
}

.about-intro__now .about-tag { color: var(--k9-maroon); }

/* The opening eyebrow only: ~22% larger (0.82rem -> 1rem) with slightly
   tighter tracking so it holds its own above the headline. Same gold,
   weight and rule as the page's other eyebrows. */
.about-intro .about-eyebrow {
  font-size: 1rem;
  letter-spacing: 0.16em;
}

@media (min-width: 1024px) {
  .about-intro__now { margin-top: 64px; }
}

@media (min-width: 1024px) {
  .about-intro { padding: 88px 0 120px; }
  .about-intro__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 72px;
  }
}

/* --- 2. MET-Rx (near-black; the logo artwork's own black background
   melts into the band) --------------------------------------------------- */

.about-metrx {
  background: var(--about-night);
  color: var(--about-night-ink);
}

.about-metrx .about-h2 { color: var(--k9-paper); }

.about-metrx__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.about-metrx__media { margin: 0; }

.about-quote {
  margin: 64px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid rgba(239, 230, 220, 0.18);
}

.about-quote p {
  max-width: 24em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.55rem, 3.3vw, 2.5rem);
  line-height: 1.22;
  color: var(--k9-gold);
}

@media (min-width: 1024px) {
  .about-metrx__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 72px;
  }
  .about-metrx__media { margin-left: -24px; }
  .about-quote { margin-top: 88px; }
  .about-quote p { margin-left: auto; text-align: right; }
}

/* --- 3. From PET-Rx to K9-Rx (first archive paper) --------------------- */

.about-petrx { background: var(--about-paper-1); }

.about-petrx__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

.about-petrx__media {
  max-width: 460px;
  width: 100%;
  justify-self: center;
}

.about-built {
  display: grid;
  gap: 40px;
  margin-top: 88px;
}

.about-built__copy { max-width: 760px; }

.about-built__stage {
  position: relative;
}

.about-built__media { max-width: 860px; }

.about-note {
  position: relative;
  margin: -32px 12px 0;
  padding: 28px 28px 24px;
  background: #fff8ea;
  border-top: 4px solid var(--k9-maroon);
  box-shadow: var(--about-shadow-soft);
}

.about-note__title {
  margin: 0 0 var(--space-3);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--k9-maroon);
}

.about-note p {
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 0.9em;
}

.about-note .about-note__quote {
  margin: 1em 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--k9-ink);
}

@media (min-width: 1024px) {
  .about-petrx__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 80px;
  }
  .about-built { margin-top: 128px; }
  .about-built__stage { padding-bottom: 40px; }
  .about-built__media { width: 74%; }
  .about-note {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 36%;
    margin: 0;
  }
}

/* --- 4. A year of R&D (second archive paper) --------------------------- */

.about-rnd { background: var(--about-paper-2); }

.about-rnd__turn {
  margin: 56px 0 0;
  padding-top: 28px;
  border-top: 2px solid var(--k9-maroon);
  max-width: 14em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--k9-ink);
}

/* --- 5. Connelly joins K9-Rx (second archive paper, continued) ---------- */

.about-connelly {
  background: var(--about-paper-2);
  border-top: 1px solid rgba(36, 19, 21, 0.08);
}

.about-connelly__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .about-connelly__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 72px;
  }
}

/* --- 6. Taking K9-Rx to television (screening room) --------------------- */

.about-tv {
  padding: 80px 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 72%, rgba(122, 27, 43, 0.28), transparent 70%),
    var(--about-night);
  color: var(--about-night-ink);
}

.about-tv__header {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}

.about-tv__title {
  margin: 0 0 var(--space-6);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.04;
  color: var(--k9-paper);
}

.about-tv__title span { display: block; }
.about-tv__title-accent { color: var(--k9-gold); }

.about-tv .about-copy p { color: var(--about-night-ink); }

.about-film {
  max-width: 1080px;
  margin: 0 auto;
}

.about-film__label {
  margin: 0 0 var(--space-4);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: var(--about-night-soft);
}

.about-film__screen {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(239, 230, 220, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}

.about-film__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-film__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(22, 16, 18, 0.72);
  border: 2px solid var(--k9-gold);
  color: var(--k9-gold);
  transition: background-color 0.15s ease, color 0.15s ease;
}

a.about-film__screen:hover .about-film__play {
  background: var(--k9-gold);
  color: var(--about-night);
}

.about-film__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  text-align: center;
}

.about-film__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border-color: var(--k9-gold);
  color: var(--k9-gold);
}

a.about-film__cta:hover {
  background: var(--k9-gold);
  color: var(--about-night);
}

/* No YouTube URL yet (see ABOUT_INFOMERCIAL_YOUTUBE_URL) - the CTA is
   visible for review but inert. */
.about-film__cta--pending {
  opacity: 0.5;
  cursor: default;
}

.about-film__caption {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--about-night-soft);
}

@media (min-width: 1024px) {
  .about-tv { padding: 128px 0 120px; }
  .about-tv__header { margin-bottom: 72px; }
}

/* --- 7. The original K9-Rx (deepest archive paper) --------------------- */

.about-archive { background: var(--about-paper-3); }

.about-archive__header {
  max-width: 760px;
  margin: 0 0 56px;
}

.about-archive__lede {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--k9-ink);
}

.about-archive__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 24px;
  align-items: start;
}

.about-archive__item { margin: 0; }
.about-archive__item--manual,
.about-archive__item--feature { grid-column: span 2; }
.about-archive__item--manual .about-print { max-width: 380px; margin: 0 auto; }
.about-archive__item--feature .about-print { max-width: 460px; margin: 0 auto; }

.about-archive__caption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k9-ink-soft);
}

.about-archive__note {
  max-width: 42em;
  margin: 56px auto 0;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--k9-ink-soft);
}

@media (min-width: 768px) {
  .about-archive__grid {
    grid-template-columns: 1.15fr 1fr 0.8fr;
    grid-template-rows: auto auto;
    gap: 48px 40px;
  }
  .about-archive__item--manual {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .about-archive__item--feature {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .about-archive__item--manual .about-print,
  .about-archive__item--feature .about-print { max-width: none; }
  .about-archive__item--ad-a { grid-column: 3; grid-row: 1; }
  .about-archive__item--ad-b { grid-column: 3; grid-row: 2; }
}

/* --- 8. THEN -> NOW ------------------------------------------------------ */

.about-thennow {
  padding: 80px 0 88px;
  background: linear-gradient(to bottom, var(--about-paper-3) 0%, var(--k9-cream) 55%);
}

.about-thennow__title {
  margin: 0 0 56px;
  text-align: center;
  font-size: clamp(2.2rem, 5.6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.02;
  color: var(--k9-ink);
}

.about-thennow__title span { display: block; }
.about-thennow__title-accent { color: var(--k9-maroon); }

.about-thennow__pair {
  display: grid;
  gap: 24px;
  justify-items: center;
  max-width: 1060px;
  margin: 0 auto;
}

.about-thennow__panel {
  margin: 0;
  width: 100%;
  max-width: 480px;
}

.about-thennow__label {
  margin-bottom: var(--space-3);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  color: var(--k9-ink-soft);
}

.about-thennow__label--now { color: var(--k9-maroon); }

.about-thennow__frame {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--k9-paper);
  box-shadow: var(--about-shadow-soft);
}

.about-thennow__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The original tub pair only fills ~76% x 80% of its canvas (and is two
   objects with open space around the handles), while the pouch nearly
   fills its own - so at the same frame size the tubs read much smaller.
   Scale the tubs up inside their frame so both products carry roughly
   equal visual weight. Transparency and the soft cutout shadow are
   unchanged. */
.about-thennow__panel--then .about-thennow__frame img {
  transform: scale(1.28);
}

.about-thennow__arrow {
  color: var(--k9-gold);
  transform: rotate(90deg);
}

/* Left-aligned like the rest of the page's body copy, in the same
   narrow editorial column (760px, centered on the page). */
.about-thennow__copy {
  max-width: 760px;
  margin: 64px auto 0;
}

.about-thennow__tagline {
  max-width: 34em;
  margin: 36px auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k9-maroon);
}

@media (min-width: 768px) {
  .about-thennow__pair {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
  }
  .about-thennow__panel { max-width: none; align-self: start; }
  .about-thennow__arrow { transform: none; margin-top: 36px; }
}

@media (min-width: 1024px) {
  .about-thennow { padding: 120px 0 128px; }
}

/* --- 9. The long road (cream) ------------------------------------------ */

.about-longroad { background: var(--k9-cream); }

.about-longroad__beat {
  margin: 44px 0 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--k9-maroon);
}

.about-longroad__beat::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 24px;
  background: var(--k9-gold);
}

/* --- 10. The next chapter + closing CTA -------------------------------- */

.about-next {
  background: var(--k9-paper);
  padding-bottom: 72px;
}

.about-next .about-h2 { color: var(--k9-ink); }

.about-copy .about-next__closer {
  margin-top: 1.5em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--k9-maroon);
}

/* Closing band - the page's final beat, directly after THE NEXT CHAPTER. */
.about-closing {
  padding: 64px 0 72px;
  background: var(--k9-maroon-dark);
  color: var(--k9-cream);
  text-align: center;
}

.about-closing__title {
  margin: 0 auto;
  max-width: 18em;
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--k9-paper);
}

.about-closing__actions {
  justify-content: center;
  margin-top: var(--space-6);
}

.about-closing .btn--primary {
  background: var(--k9-cream);
  border-color: var(--k9-cream);
  color: var(--k9-maroon);
}

.about-closing .btn--primary:hover {
  background: var(--k9-gold);
  border-color: var(--k9-gold);
  color: var(--k9-maroon-dark);
}

@media (min-width: 1024px) {
  .about-next { padding-bottom: 96px; }
  .about-closing { padding: 88px 0 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-film__play,
  .about-film__cta { transition: none; }
}

/* Keep brand marks ("K9-Rx", "MET-Rx", "PET-Rx") from breaking at their
   hyphen in large display type. */
.about-nowrap { white-space: nowrap; }

/* Transparent-background archival cutouts (the original K9-Rx tubs):
   no paper mat or white frame, so the tubs sit directly on the section
   background. Padding, size and tilt are unchanged; a soft drop shadow
   (following the tubs' own outline) grounds them instead. */
.about .about-cutout {
  background: transparent;
  box-shadow: none;
}

.about .about-cutout img {
  filter: drop-shadow(0 16px 22px rgba(36, 19, 21, 0.22));
}

/* Lab photo beside FROM PET-Rx TO K9-Rx: the mat moves to an inner
   wrapper so the archival caption can sit below it, as in the archive. */
.about-petrx__media { margin: 0; }

/* Brand marks inside otherwise-uppercased captions keep their "Rx". */
.about-nocaps { text-transform: none; }

/* ==========================================================================
   Phase 5B-6E: Nutrition (src/views/public/nutrition.ejs)

   "What's actually in it": a clean, information-first page. Two primary
   visuals only - the comparison video and the real published Nutrition
   Label - on a calm cream / paper rhythm, with no cinematic hero, cards
   or decorative graphics. Every rule is scoped to .nutrition so the
   locked Homepage, Benefits, Science and About styles are untouched.
   ========================================================================== */

/* Section headings are authored in their final case ("K9-Rx" keeps its
   lowercase x); the NUTRITION title keeps the site's uppercase style. */
.nutrition h2 {
  text-transform: none;
}

.nutrition-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.nutrition-wrap--narrow { max-width: 820px; }

.nutrition-nowrap { white-space: nowrap; }

/* --- 1. Opening ------------------------------------------------------- */

.nutrition-intro {
  padding: 56px 0 64px;
  background: var(--k9-cream);
}

.nutrition-intro__title {
  margin: 0 0 var(--space-6);
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--k9-ink);
}

.nutrition-intro__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-5);
  background: var(--k9-gold);
}

.nutrition-intro__copy p {
  max-width: 38em;
  margin: 0 0 1.1em;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--k9-ink-soft);
}

/* The first paragraph reads as the page's lede. */
.nutrition-intro__copy p:first-child {
  font-size: clamp(1.15rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: var(--k9-ink);
}

/* The closing "See the Feeding Guide..." line is set apart as a pointer. */
.nutrition-intro__copy p:last-child {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--k9-line);
  font-size: 1rem;
}

.nutrition-intro__copy a {
  font-weight: 600;
  color: var(--k9-maroon);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.nutrition-intro__copy a:hover { color: var(--k9-maroon-dark); }

@media (min-width: 1024px) {
  .nutrition-intro { padding: 96px 0 88px; }
}

/* --- 2. Comparison video ---------------------------------------------- */

.nutrition-film {
  padding: 72px 0 80px;
  background: var(--k9-paper);
  border-top: 1px solid var(--k9-line);
  border-bottom: 1px solid var(--k9-line);
}

.nutrition-film__header {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.nutrition-film__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--k9-maroon);
}

.nutrition-film__lede {
  max-width: 34em;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--k9-ink-soft);
}

.nutrition-film__frame {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 1px 2px rgba(36, 19, 21, 0.1), 0 28px 60px -28px rgba(36, 19, 21, 0.55);
}

.nutrition-film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Large play button over the poster (only revealed by
   public/js/nutritionVideo.js; hidden once playback starts). */
.nutrition-film__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  display: grid;
  place-items: center;
  padding: 0 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: var(--k9-maroon);
  color: var(--k9-cream);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.nutrition-film__play[hidden] { display: none; }

.nutrition-film__play:hover {
  background: var(--k9-maroon-dark);
  transform: scale(1.05);
}

.nutrition-film__play:focus-visible {
  outline: 3px solid var(--k9-gold);
  outline-offset: 3px;
}

@media (max-width: 479px) {
  .nutrition-film__play {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
  }
}

@media (min-width: 1024px) {
  .nutrition-film { padding: 104px 0 112px; }
  .nutrition-film__header { margin-bottom: 56px; }
}

/* --- 3. The data: Nutrition Label ------------------------------------- */

.nutrition-data {
  padding: 72px 0 24px;
  background: var(--k9-cream);
}

.nutrition-data__header {
  margin: 0 auto 32px;
  text-align: center;
}

.nutrition-data__title {
  margin: 0 0 var(--space-5);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--k9-ink);
}

.nutrition-data__label-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--k9-maroon);
}

.nutrition-data__label-title::before,
.nutrition-data__label-title::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--k9-gold);
}

/* The published panel is a white image with its own margins, so it sits
   on a plain white sheet with only a thin edge - no extra card padding.
   It is shown as large as the content width allows (up to 1000px), never
   cropped, aspect ratio preserved. Tap/click opens the full-size file. */
.nutrition-label {
  max-width: 1000px;
  margin: 0 auto;
  padding: 4px;
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.nutrition-label__link {
  display: block;
  cursor: zoom-in;
}

.nutrition-label img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .nutrition-label { padding: 12px; }
}

@media (min-width: 1024px) {
  .nutrition-data { padding: 104px 0 32px; }
  .nutrition-data__header { margin-bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .nutrition-film__play { transition: none; }
  .nutrition-film__play:hover { transform: none; }
}

/* ==========================================================================
   Phase 5B-6F: Nutrition & Your Dog (src/views/public/nutrition-and-your-dog.ejs)

   An educational, typography-led editorial page: no video hero, no
   cards; three editorial photographs act as visual pauses. The argument is carried by display type, gold
   rules, oversized outline numerals and a cream / white / maroon rhythm.
   Every rule is scoped to .nyd, so the locked Homepage, Benefits, Science,
   About and Nutrition styles are untouched. Headings are authored in their
   final case, so "K9-Rx" keeps its lowercase x.

   Layout (refined after staging review): each section reads top to
   bottom - heading, then copy in a centered reading column (.nyd-read,
   880px) - with full-width typographic "moments" between blocks of copy.
   .nyd-media holds the three editorial photographs (MEDIA SLOT 1-3 in
   the template).
   ========================================================================== */

.nyd h1,
.nyd h2,
.nyd h3,
.nyd .btn {
  text-transform: none;
}

.nyd-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.nyd-copy p {
  max-width: 38em;
  margin: 0 0 1.1em;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--k9-ink);
}

/* Centered reading column: headings and copy stacked vertically. */
.nyd-read { max-width: 928px; } /* 880px text + 2 x 24px gutter */

.nyd-read .nyd-copy p { max-width: none; }

/* Plain body paragraphs only - styled lines (lead, turn, close, goal)
   keep their own sizes. */
@media (min-width: 1024px) {
  .nyd-read .nyd-copy p:not([class]) { font-size: 1.1rem; }
}

/* Editorial photographs (MEDIA SLOT 1-3): a wide, centered figure shown
   at its native ~16:9 ratio - no cropping, no overlay, no card. Below
   768px the image bleeds edge to edge so it keeps real presence on a
   phone without having to crop the subjects. */
.nyd-media {
  max-width: 1180px;
  margin: 40px auto;
  padding: 0;
}

.nyd-media img,
.nyd-media video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--k9-paper);
}

@media (min-width: 768px) {
  .nyd-media { margin: 56px auto; padding: 0 24px; }
  .nyd-media img,
  .nyd-media video { border-radius: var(--radius); }
}

@media (min-width: 1024px) {
  .nyd-media { margin: 72px auto; }
}

/* Opening: sits between the title block and the opening question. */
.nyd-media--open { margin-bottom: 0; }

/* Bridge: the product photograph on maroon. */
.nyd-media--bridge img { background: var(--k9-maroon); }

.nyd-copy p:last-child { margin-bottom: 0; }

.nyd-copy .nyd-lead {
  font-size: clamp(1.15rem, 2vw, 1.3rem);
  line-height: 1.55;
  font-weight: 500;
}

.nyd-h2 {
  margin: 0 0 var(--space-5);
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--k9-maroon);
}

.nyd-section {
  padding: 72px 0;
  background: var(--k9-cream);
}

.nyd-section--paper {
  background: var(--k9-paper);
  border-top: 1px solid var(--k9-line);
  border-bottom: 1px solid var(--k9-line);
}

@media (min-width: 1024px) {
  .nyd-section { padding: 104px 0; }
}

/* --- Opening --------------------------------------------------------- */

.nyd-open {
  padding: 56px 0 64px;
  background: var(--k9-cream);
}

.nyd-open__title {
  margin: 0;
  font-size: clamp(2.8rem, 7.6vw, 5.8rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--k9-ink);
}

.nyd-open__sub {
  margin: var(--space-5) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.9vw, 1.3rem);
  letter-spacing: 0.14em;
  color: var(--k9-gold);
}

.nyd-open__sub::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: var(--space-4);
  background: var(--k9-gold);
}

.nyd-open__body { margin-top: 48px; }

.nyd-open__question {
  margin: 0 0 var(--space-5);
  padding-top: var(--space-5);
  border-top: 2px solid var(--k9-maroon);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  color: var(--k9-maroon);
}

.nyd-open__feel {
  font-style: italic;
  font-weight: 600;
  color: var(--k9-maroon);
}

.nyd-copy .nyd-open__close {
  margin-top: 1.6em;
  padding-top: var(--space-5);
  border-top: 1px solid var(--k9-line);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.35;
}

@media (min-width: 1024px) {
  .nyd-open { padding: 88px 0 96px; }
  .nyd-open__body { margin-top: 64px; }
}

/* --- The link ------------------------------------------------------------ */

.nyd-cadence {
  margin: 48px auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.2;
}

.nyd-cadence::before,
.nyd-cadence::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 24px;
  background: var(--k9-gold);
}

.nyd-cadence::after { margin: 24px auto 0; }

.nyd-cadence span { display: block; color: var(--k9-ink); }
.nyd-cadence span:nth-child(2) { color: var(--k9-ink-soft); }
.nyd-cadence span:nth-child(3) { color: var(--k9-maroon); }

.nyd-ask {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var(--k9-line);
  text-align: center;
}

.nyd-ask__kicker,
.nyd-idea__kicker,
.nyd-bridge__kicker {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k9-gold);
}

.nyd-ask__question {
  max-width: 17em;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.08;
  color: var(--k9-maroon);
}

@media (min-width: 1024px) {
  .nyd-ask { margin-top: 96px; padding-top: 80px; }
}

/* --- Built on the way dogs eat --------------------------------------- */

.nyd-copy .nyd-turn {
  margin: 1.6em 0 0.8em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.3;
}

.nyd-idea {
  max-width: 880px;
  margin: 56px auto;
}

.nyd-idea__statement {
  margin: 0;
  padding-left: var(--space-5);
  border-left: 4px solid var(--k9-gold);
}

.nyd-idea__statement p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  line-height: 1.1;
  color: var(--k9-ink);
}

@media (min-width: 1024px) {
  .nyd-idea { margin: 88px auto 72px; }
  .nyd-idea__statement { padding-left: 36px; }
}

/* --- The challenge + 01-04 ------------------------------------------- */

.nyd-challenge__header { margin: 0 auto; padding: 0; }

.nyd-aisle {
  max-width: 44em;
  margin: 28px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.65;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--k9-ink-soft);
}

.nyd-points {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
}

.nyd-point {
  padding: 28px 0 36px;
  border-top: 1px solid rgba(36, 19, 21, 0.18);
}

.nyd-point__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.8rem, 7vw, 5.6rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--k9-gold);
}

@supports (-webkit-text-stroke: 1px black) {
  .nyd-point__num {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--k9-gold);
  }
}

.nyd-point__title {
  margin: var(--space-4) 0 var(--space-4);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--k9-ink);
}

.nyd-copy .nyd-point__k9 {
  margin-top: 1.2em;
  font-weight: 500;
  color: var(--k9-maroon);
}

@media (min-width: 768px) {
  .nyd-points {
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
  }
}

@media (min-width: 1024px) {
  .nyd-points { margin-top: 68px; column-gap: 88px; }
  .nyd-point { padding: 36px 0 48px; }
}

/* --- Bridging the nutrition gap (maroon: the argument resolves) -------- */

.nyd-bridge {
  position: relative;
  overflow: visible;
  padding: 80px 0;
  background: var(--k9-maroon-dark);
  color: var(--k9-cream);
}

.nyd-bridge .nyd-bridge__kicker { text-align: center; }

/* Line-height 1.12 plus a small top pad keeps the tall display caps
   entirely inside the heading box, so no glyph can be cut at the top edge
   of the maroon section whichever display face (Oswald or fallback)
   renders. */
.nyd-bridge__title {
  position: relative;
  margin: 0 0 40px;
  padding-top: 0.08em;
  text-align: center;
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--k9-paper);
}

.nyd-bridge__question {
  max-width: 24em;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.22;
  color: var(--k9-cream);
}

.nyd-bridge__led {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: 1.08rem;
  color: var(--k9-maroon-tint);
}

.nyd-bridge__body {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid rgba(251, 246, 239, 0.2);
}

.nyd-copy--light p { color: var(--k9-maroon-tint); }

.nyd-copy--light .nyd-bridge__goal {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  color: var(--k9-paper);
}

.nyd-bridge__list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.nyd-bridge__list li {
  position: relative;
  padding: 14px 0 14px 36px;
  border-bottom: 1px solid rgba(251, 246, 239, 0.14);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.3;
  color: var(--k9-paper);
}

.nyd-bridge__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 20px;
  height: 2px;
  background: var(--k9-gold);
}

.nyd-bridge__list .nyd-bridge__just {
  border-bottom: 0;
  color: var(--k9-gold);
}

@media (min-width: 1024px) {
  .nyd-bridge { padding: 112px 0; }
  .nyd-bridge__body { margin-top: 72px; padding-top: 64px; }
}

/* --- Next steps ------------------------------------------------------ */

.nyd-next {
  padding: 72px 0 32px;
  background: var(--k9-cream);
  text-align: center;
}

.nyd-next__title {
  max-width: 20em;
  margin: 0 auto 48px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--k9-ink);
}

.nyd-next__grid {
  display: grid;
  gap: 40px;
  max-width: 920px;
  margin: 0 auto;
}

.nyd-next__item {
  padding-top: var(--space-5);
  border-top: 2px solid var(--k9-gold);
}

.nyd-next__item p {
  max-width: 26em;
  margin: 0 auto var(--space-5);
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--k9-ink-soft);
}

@media (min-width: 768px) {
  .nyd-next__grid { grid-template-columns: 1fr 1fr; gap: 56px; }
}

@media (min-width: 1024px) {
  .nyd-next { padding: 104px 0 48px; }
}

/* Brand mark inside uppercased kickers keeps its "Rx"; long hyphenated
   phrases don't break at their hyphens. */
.nyd-nocaps { text-transform: none; }
.nyd-nowrap { white-space: nowrap; }

/* ==========================================================================
   Phase 5B: Feeding Guide (src/views/public/feeding-guide.ejs)

   Practical, information-first page in the same cream / white rhythm and
   Oswald + Libre Franklin system as Nutrition and Nutrition & Your Dog:
   serving size by weight -> one wide feeding photograph (native ratio, no
   crop, no overlay) -> MORE WAYS TO SERVE K9-Rx as four numbered, ruled
   options in a 2 x 2 grid (no cards, no icons). Scoped under .fg.
   ========================================================================== */

.fg h1,
.fg h2,
.fg h3 { text-transform: none; }

.fg-nocaps { text-transform: none; }
.fg-nowrap { white-space: nowrap; }

.fg-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.fg-read { max-width: 928px; }

.fg-h2 {
  margin: 0 0 var(--space-5);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--k9-maroon);
}

/* --- Opening + serving size by weight -------------------------------- */

.fg-open {
  padding: 56px 0 8px;
  background: var(--k9-cream);
}

.fg .fg-open__title {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6.4vw, 4.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--k9-ink);
}

.fg-open__lead {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: 3px solid var(--k9-gold);
  max-width: 34em;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--k9-ink);
}

.fg-open .fg-h2 { margin-top: 56px; scroll-margin-top: 24px; }

.fg-serving {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--k9-maroon);
}

.fg-serving tr { border-bottom: 1px solid var(--k9-line); }

.fg-serving th,
.fg-serving td {
  padding: 18px 0;
  text-align: left;
  vertical-align: baseline;
}

.fg-serving th {
  width: 38%;
  padding-right: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  letter-spacing: 0.02em;
  color: var(--k9-maroon);
  white-space: nowrap;
}

.fg-serving__scoop {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: var(--k9-ink);
}

.fg-serving__alt {
  display: block;
  margin-top: 2px;
  font-size: 1rem;
  color: var(--k9-ink-soft);
}

.fg-note {
  margin: 32px 0 0;
  padding-left: var(--space-5);
  border-left: 4px solid var(--k9-gold);
  max-width: 44em;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--k9-ink);
}

/* Feeding photographs: same treatment as the Nutrition & Your Dog
   images - wide, centered, native ratio; edge to edge below 768px. */
.fg-media {
  max-width: 1180px;
  margin: 48px auto 0;
  padding: 0;
  position: relative;
  z-index: 1;
  margin-bottom: -72px;
}

.fg-media img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--k9-paper);
}

@media (min-width: 768px) {
  .fg-media { padding: 0 24px; }
  .fg-media img { border-radius: var(--radius); }
}

/* Opening hero (dog eating): sits between the intro and the serving
   table with no overlap; the second photograph (.fg-media--bridge) keeps
   the overlap into the white MORE WAYS section. */
.fg-media.fg-media--hero { margin: 40px auto 0; }

@media (min-width: 1024px) {
  .fg-media.fg-media--hero { margin: 56px auto 0; }
}

@media (min-width: 1024px) {
  .fg-open { padding-top: 72px; }
  .fg-open .fg-h2 { margin-top: 72px; }
  .fg-serving th, .fg-serving td { padding: 20px 0; }
  .fg-serving__scoop { display: inline; }
  .fg-serving__alt { display: inline; margin: 0 0 0 0.6em; }
  .fg-media { margin-top: 72px; margin-bottom: -120px; }
}

/* --- More ways to serve ---------------------------------------------- */

.fg-ways {
  padding: 120px 0 72px;
  background: var(--k9-paper);
  border-bottom: 1px solid var(--k9-line);
}

.fg-ways__header { margin: 0 auto; }

.fg-ways__intro {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--k9-ink);
}

.fg-methods {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
}

.fg-method {
  padding: 28px 0 32px;
  border-top: 1px solid rgba(36, 19, 21, 0.18);
}

.fg-method__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--k9-gold);
}

.fg-method__title {
  margin: var(--space-3) 0 var(--space-3);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  letter-spacing: 0.04em;
  color: var(--k9-ink);
}

.fg-method p {
  margin: 0;
  max-width: 34em;
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--k9-ink);
}

.fg-ways__close {
  margin: 40px auto 0;
  padding-top: 32px;
  border-top: 2px solid var(--k9-maroon);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--k9-maroon);
}

.fg-ways__close a {
  color: inherit;
  text-decoration-color: var(--k9-gold);
  text-underline-offset: 0.18em;
}

@media (min-width: 768px) {
  .fg-methods {
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
  }
}

@media (min-width: 1024px) {
  .fg-ways { padding: 184px 0 104px; }
  .fg-methods { margin-top: 64px; column-gap: 88px; }
  .fg-method { padding: 32px 0 40px; }
  .fg-ways__close { margin-top: 48px; }
}

/* ==========================================================================
   Admin -> Testimonials (src/views/admin/testimonials.ejs,
   testimonial-form.ejs, testimonial-delete-confirm.ejs). Admin-only
   classes; no public page uses any of these.
   ========================================================================== */

.status-pill--published { background: var(--k9-success-bg); color: var(--k9-success-ink); border-color: #d3e3ca; }
.status-pill--unpublished { background: #f1ecec; color: var(--k9-ink-soft); border-color: var(--k9-line); }
.status-pill--homepage { background: #fbf1de; color: #7a5a17; border-color: #ecdcb2; }

.admin-testimonials__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 8px 0 4px;
}
.admin-testimonials__homepage { margin: 0; font-size: 0.92rem; color: var(--k9-ink-soft); }

.admin-testimonials .admin-table td { vertical-align: top; }
.admin-testimonials__who { display: flex; align-items: center; gap: 10px; }
.admin-testimonials__who img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.admin-testimonials .admin-table td.admin-testimonials__quote,
.admin-table td.admin-testimonials__quote {
  white-space: normal;
  min-width: 260px;
  max-width: 460px;
  font-size: 0.9rem;
  color: var(--k9-ink-soft);
}
.admin-testimonials__status .status-pill { margin: 0 4px 4px 0; }
.admin-testimonials__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.admin-testimonials__actions form { margin: 0; }
.admin-testimonials__delete { color: var(--k9-danger); }

/* Phones: each testimonial becomes a stacked, labeled block instead of a
   wide table row, so the list never scrolls sideways. */
@media (max-width: 760px) {
  .admin-testimonials__table thead { display: none; }
  .admin-testimonials__table,
  .admin-testimonials__table tbody,
  .admin-testimonials__table tr,
  .admin-testimonials__table td { display: block; width: 100%; }
  .admin-testimonials__table tr {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--k9-line);
    border-radius: var(--radius);
    background: var(--k9-paper);
  }
  .admin-testimonials__table td,
  .admin-testimonials .admin-table td.admin-testimonials__quote {
    padding: 4px 0;
    border: 0;
    white-space: normal;
    min-width: 0;
    max-width: none;
  }
  .admin-testimonials__table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--k9-ink-soft);
  }
  .admin-testimonials__table td.admin-testimonials__actions::before { width: 100%; }
}

/* ---------------------------------------------------------------------
   Admin Customers (directory + detail). Read-only screens built from the
   existing admin vocabulary: .admin-table, .status-pill, .badge,
   .ops-summary-card and .address-card.
   ------------------------------------------------------------------- */
.admin-muted { color: var(--k9-ink-soft); font-size: 0.85rem; }

.admin-customers__search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 8px 0 4px;
}
.admin-customers__search input[type="search"] {
  flex: 1 1 280px;
  max-width: 460px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  background: var(--k9-paper);
  font: inherit;
}
.admin-customers__search .btn { min-height: 44px; }
.admin-customers__clear { font-size: 0.9rem; }
.admin-customers__count { margin: 14px 0 0; color: var(--k9-ink-soft); font-size: 0.9rem; }
.admin-customers__empty {
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px dashed var(--k9-line);
  border-radius: var(--radius);
  background: var(--k9-paper);
}
.admin-customers__empty p { margin: 0 0 8px; }
.admin-customers__empty p:last-child { margin-bottom: 0; }
.admin-customers__table td { vertical-align: top; }
.admin-customers__who strong { display: block; }
.admin-customers__email { display: block; color: var(--k9-ink-soft); font-size: 0.85rem; overflow-wrap: anywhere; }
.admin-customers__who .badge { margin-top: 4px; }
.admin-customers__note { display: block; }
.admin-customers__table .status-pill { margin: 0 4px 4px 0; }
.admin-customers__action { text-align: right; white-space: nowrap; }

.admin-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}
.admin-pager__info { color: var(--k9-ink-soft); font-size: 0.85rem; }

.admin-customer__crumbs { margin: 0 0 6px; font-size: 0.85rem; color: var(--k9-ink-soft); }
.admin-customer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; overflow-wrap: anywhere; }
.admin-customer__stats .ops-summary-card__count { color: var(--k9-maroon); }
.admin-customer__section { margin-top: 40px; }
.admin-customer__heading {
  font-size: 1.15rem;
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--k9-gold);
  color: var(--k9-maroon);
}
.admin-customer__footnote { margin: 10px 0 0; color: var(--k9-ink-soft); font-size: 0.82rem; }
.admin-customer__orders td, .admin-customer__subs td { vertical-align: top; }
.admin-customer__orders .badge, .admin-customer__subs .badge { margin-left: 4px; }

.admin-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 32px;
  margin: 12px 0 0;
}
.admin-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--k9-line);
}
.admin-facts dt {
  flex-shrink: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--k9-ink-soft);
  padding-top: 2px;
}
.admin-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.admin-facts dd .status-pill { margin: 0 0 4px 4px; }

.admin-customer__addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.admin-customer__source { display: block; margin-top: 8px; }
.admin-customer__cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.admin-customer__cards li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 16px;
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  background: var(--k9-paper);
}
.admin-customer__technical { margin-top: 20px; }
.admin-customer__technical summary { cursor: pointer; color: var(--k9-ink-soft); font-size: 0.9rem; }
.admin-customer__technical code { font-size: 0.85rem; overflow-wrap: anywhere; }

/* Tablets and phones: stacked, labeled rows instead of a wide table, so
   no admin list ever scrolls sideways (same pattern as testimonials). */
@media (max-width: 900px) {
  .admin-table--stack thead { display: none; }
  .admin-table--stack,
  .admin-table--stack tbody,
  .admin-table--stack tr,
  .admin-table--stack td { display: block; width: 100%; }
  .admin-table--stack tr {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--k9-line);
    border-radius: var(--radius);
    background: var(--k9-paper);
  }
  .admin-table--stack td {
    padding: 6px 0;
    border: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .admin-table--stack td::after { content: ""; display: table; clear: both; }
  .admin-table--stack td::before {
    content: attr(data-label);
    float: left;
    margin-right: 12px;
    padding-top: 3px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--k9-ink-soft);
    text-align: left;
  }
  .admin-table--stack td.admin-customers__who {
    display: block;
    text-align: left;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--k9-line);
    margin-bottom: 4px;
  }
  .admin-table--stack td.admin-customers__who::before { content: none; }
  .admin-table--stack td.admin-customers__action { display: block; text-align: left; padding-top: 10px; }
  .admin-table--stack td.admin-customers__action::before { content: none; }
  .admin-table--stack td.admin-customers__action .btn { width: 100%; text-align: center; min-height: 44px; }
  .admin-customers__note { display: inline; margin-left: 6px; }
}
@media (max-width: 480px) {
  .admin-facts > div { flex-direction: column; gap: 2px; }
  .admin-facts dd { text-align: left; }
  .admin-facts dd .status-pill { margin: 0 4px 4px 0; }
  .admin-customers__search .btn { flex: 1 1 auto; }
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--k9-maroon);
  text-decoration: underline;
  cursor: pointer;
}

.form-help { margin: 6px 0 0; font-size: 0.86rem; color: var(--k9-ink-soft); }

.form-check {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-target);
  cursor: pointer;
}
.form-check input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--k9-maroon); }
.form-check span { font-size: 0.95rem; }

.admin-testimonial-form .admin-testimonial-form__quote {
  min-height: 200px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

/* Admin testimonial photo: current preview, upload, explicit removal. */
.testimonial-photo { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.testimonial-photo legend {
  padding: 0;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--k9-ink-soft);
}
.testimonial-photo__current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 10px 0 14px;
}
.testimonial-photo__thumb { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--k9-line); }
.testimonial-photo__full { width: auto; height: auto; max-width: 240px; max-height: 160px; border-radius: var(--radius); border: 1px solid var(--k9-line); }
.testimonial-photo__current .form-help { flex-basis: 100%; }
.testimonial-photo .testimonial-photo__label { margin-top: 6px; }
.testimonial-photo input[type="file"] { display: block; max-width: 100%; margin: 4px 0 0; font-size: 0.95rem; }
.testimonial-photo .testimonial-photo__remove { margin-top: 12px; color: var(--k9-danger); }

/* ==========================================================================
   Testimonial Full Story (Phase 5B) - src/views/public/testimonial-story.ejs
   One testimonial, verbatim. Photo layouts:
     --landscape: confirmed original, wide, above the text
     --portrait:  confirmed original beside the text on desktop
     --small:     legacy small image only, a modest portrait at the
                  attribution (never enlarged)
     --text:      no photo
   Images keep their natural aspect ratio (width/height attributes +
   max-width: 100%; height: auto) - never cropped, never upscaled.
   ========================================================================== */

.testimonial-story { padding: 32px 0 72px; }

.testimonial-story__back { margin: 0 0 24px; font-size: 0.92rem; }
.testimonial-story__back a { color: var(--k9-maroon); }

.testimonial-story__article { max-width: 1040px; margin: 0 auto; }

.testimonial-story__figure { margin: 0 0 32px; text-align: center; }
.testimonial-story__figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  max-height: 72vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: var(--k9-paper);
}

.testimonial-story__body { max-width: 720px; margin: 0 auto; }

.testimonial-story__kicker {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k9-gold);
}

.testimonial-story__title {
  margin: 0 0 24px;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  color: var(--k9-ink);
}

.testimonial-story__quote {
  margin: 0;
  padding-left: var(--space-5);
  border-left: 4px solid var(--k9-gold);
}
.testimonial-story__quote p {
  margin: 0;
  font-size: clamp(1.08rem, 1.6vw, 1.22rem);
  line-height: 1.75;
  color: var(--k9-ink);
  white-space: pre-line;
}

.testimonial-story__attribution {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 0;
}
.testimonial-story__attribution cite {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k9-maroon);
}

/* Small legacy image: shown at most 140px wide and never beyond its own
   size (no width/height attributes, max-width only). */
.testimonial-story__small-photo {
  display: block;
  max-width: 140px;
  max-height: 180px;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--k9-line);
  flex-shrink: 0;
}

.testimonial-story__more { margin: 40px 0 0; }

@media (min-width: 900px) {
  .testimonial-story { padding: 48px 0 104px; }
  .testimonial-story--portrait .testimonial-story__article {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 56px;
    align-items: center;
  }
  .testimonial-story--portrait .testimonial-story__figure { margin: 0; }
  .testimonial-story--portrait .testimonial-story__figure img { max-height: 78vh; }
  .testimonial-story--portrait .testimonial-story__body { margin: 0; }
  .testimonial-story--landscape .testimonial-story__figure { margin-bottom: 48px; }
}

/* ==========================================================================
   Phase 5B: Product page (/product - src/views/public/product.ejs)

   A premium two-column product presentation: the transparent K9-Rx pouch
   (the same asset Home and About already use) as the visual hero, and a
   purchase panel built around the unchanged commerce form (single
   variant_id <select>, quantity, CSRF, POST /cart/items). Below it,
   condensed value / how-to-use sections that link out to the deeper
   content pages, the legacy product copy, and the homepage's closing CTA
   band (.closing-cta, reused as-is).

   Every rule is scoped to .pdp / .pdp-* so nothing here can reach the
   locked Homepage/Benefits styles or the shared .product-layout / .price
   / .variant-list classes that Admin, Account, Checkout and Order
   Confirmation still use. Mobile-first on the shared 480/768/1024 scale.
   ========================================================================== */

.pdp {
  /* main has a 64px bottom padding site-wide; this page ends on a
     full-bleed band, so close that gap above the footer (as About does). */
  margin-bottom: -64px;
  overflow-x: clip;
}

main:has(> .pdp) + .site-footer { margin-top: 0; }

.pdp-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.pdp-wrap--narrow { max-width: 760px; }

@media (min-width: 480px) {
  .pdp-wrap { padding: 0 24px; }
}

/* "K9-Rx" keeps its lowercase x inside uppercased headings/eyebrows. */
.pdp-mark,
.pdp-nowrap { text-transform: none; }
.pdp-nowrap { white-space: nowrap; }

.pdp-kicker {
  font-family: var(--font-display);
  color: var(--k9-gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 var(--space-2);
}

.pdp-h2 {
  color: var(--k9-ink);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  text-align: center;
  margin: 0 auto var(--space-4);
  max-width: 820px;
}

.pdp-accent { color: var(--k9-maroon); }

.pdp-intro {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  text-align: center;
  color: var(--k9-ink-soft);
  font-size: 1.05rem;
  text-wrap: pretty;
}

.pdp-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-6) 0 0;
}

.pdp-links a {
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-2) 0;
}

.pdp-links a:hover { text-decoration: underline; }

/* --- 1. Product + purchase ----------------------------------------------- */

.pdp-hero {
  padding: var(--space-5) 0 var(--space-7);
  background:
    radial-gradient(ellipse 70% 60% at 28% 42%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),
    var(--k9-cream);
  scroll-margin-top: var(--space-4);
}

/* Mobile: title + price first, then the pouch, then the controls - so the
   name and price are visible without scrolling past a large image. */
.pdp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "media"
    "buy";
  gap: var(--space-4);
}

.pdp-head { grid-area: head; }
.pdp-media { grid-area: media; }
.pdp-buy { grid-area: buy; min-width: 0; }

.pdp-eyebrow {
  font-family: var(--font-display);
  color: var(--k9-gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

.pdp-eyebrow .pdp-mark { letter-spacing: 0.06em; }

.pdp-title {
  /* Authored case: "K9-Rx 2.51lb Pouch", not "K9-RX 2.51LB POUCH". */
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: clamp(2.1rem, 7vw, 3.3rem);
  line-height: 1.05;
  color: var(--k9-ink);
  margin: 0 0 var(--space-2);
}

.pdp-supply {
  margin: 0;
  color: var(--k9-ink-soft);
  font-size: 1rem;
}

.pdp-supply strong {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--k9-ink);
  margin-right: 4px;
}

.pdp-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--k9-maroon);
  margin: var(--space-3) 0 0;
}

/* The pouch: no box, no border - a soft light pool and a floor shadow. */
.pdp-media { margin: 0; }

.pdp-media__stage {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
  padding: 0 var(--space-2) var(--space-4);
}

.pdp-media__stage::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 6px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(36, 19, 21, 0.22) 0%, rgba(36, 19, 21, 0) 70%);
  z-index: 0;
}

.pdp-media__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(36, 19, 21, 0.16));
}

/* Purchase panel */
.pdp-buy .alert { margin: 0 0 var(--space-4); }

.pdp-form {
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(36, 19, 21, 0.05), 0 16px 36px -22px rgba(36, 19, 21, 0.35);
  padding: var(--space-5) var(--space-4);
}

.pdp-field { margin: 0 0 var(--space-4); }

.pdp-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--k9-ink-soft);
  margin: 0 0 var(--space-2);
}

.pdp-select { position: relative; }

.pdp-select select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 46px 0 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--k9-ink);
  background: var(--k9-paper);
  border: 1.5px solid #d9c9bf;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.pdp-select select:hover { border-color: var(--k9-ink-soft); }
.pdp-select select:focus { border-color: var(--k9-maroon); }

.pdp-select__chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--k9-maroon);
  pointer-events: none;
}

.pdp-mode-note {
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--k9-ink-soft);
}

/* Autoship value panel - static facts, highlighted (JS) when an Autoship
   option is the selected one. */
.pdp-autoship {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: #fbf3f1;
  border: 1px solid #ecd6d3;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.pdp-autoship.is-selected {
  background: var(--k9-maroon-tint);
  border-color: var(--k9-maroon);
  box-shadow: inset 0 0 0 1px var(--k9-maroon);
}

.pdp-autoship__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.88rem;
  color: var(--k9-maroon);
}

.pdp-autoship__icon { width: 20px; height: 20px; flex-shrink: 0; }

.pdp-autoship__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--k9-ink);
}

.pdp-autoship__list li {
  position: relative;
  padding-left: 22px;
}

.pdp-autoship__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.38em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--k9-gold);
  border-bottom: 2px solid var(--k9-gold);
  transform: rotate(-45deg);
}

/* Quantity + per-pouch price, then the CTA. */
.pdp-order {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
}

.pdp-qty { margin: 0; }

.pdp-qty input {
  width: 96px;
  min-height: 52px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  color: var(--k9-ink);
  background: var(--k9-paper);
  border: 1.5px solid #d9c9bf;
  border-radius: var(--radius);
}

.pdp-qty input:focus { border-color: var(--k9-maroon); }

.pdp-each {
  margin: 0 0 12px;
  text-align: right;
  font-size: 0.85rem;
  color: var(--k9-ink-soft);
}

.pdp .variant-price-display {
  display: block;
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--k9-maroon);
}

.pdp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(122, 27, 43, 0.7);
}

@media (prefers-reduced-motion: no-preference) {
  .pdp-cta { transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
  .pdp-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -12px rgba(122, 27, 43, 0.75); }
}

/* Reassurance directly under the purchase panel. */
.pdp-assure {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--k9-ink);
}

.pdp-assure li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pdp-assure svg {
  width: 24px;
  height: 24px;
  color: var(--k9-maroon);
}

.pdp-sku {
  margin: var(--space-4) 0 0;
  font-size: 0.8rem;
  color: var(--k9-ink-soft);
  text-align: center;
}

/* Tablet and up: pouch left (spanning both rows), head + panel right. */
@media (min-width: 768px) {
  .pdp-hero { padding: var(--space-7) 0 var(--space-8); }

  .pdp-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "media head"
      "media buy";
    column-gap: var(--space-6);
    row-gap: var(--space-5);
  }

  .pdp-media {
    align-self: start;
    position: sticky;
    top: var(--space-6);
    padding-top: var(--space-6);
  }

  .pdp-media__stage { max-width: 620px; padding: 0 0 var(--space-5); }
  .pdp-media__stage::after { bottom: 10px; height: 30px; }

  .pdp-form { padding: var(--space-5); }
}

@media (min-width: 1024px) {
  .pdp-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    column-gap: 72px;
  }

  .pdp-media { padding-top: var(--space-7); }
  .pdp-price { font-size: 2.6rem; margin-top: var(--space-4); }
}

/* --- 2. Inside every serving --------------------------------------------- */

.pdp-value {
  background: var(--k9-paper);
  border-top: 1px solid var(--k9-line);
  border-bottom: 1px solid var(--k9-line);
  padding: var(--space-7) 0;
}

.pdp-value__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.pdp-value__item {
  padding-top: var(--space-4);
  border-top: 2px solid var(--k9-gold);
}

.pdp-value__title {
  color: var(--k9-ink);
  font-size: 1.08rem;
  margin: 0 0 var(--space-2);
}

.pdp-value__item p {
  margin: 0;
  color: var(--k9-ink-soft);
  font-size: 0.98rem;
}

@media (min-width: 600px) {
  .pdp-value__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
}

@media (min-width: 1024px) {
  .pdp-value { padding: 96px 0; }
  .pdp-value__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) 48px; }
}

/* --- 3. How to use -------------------------------------------------------- */

.pdp-use { padding: var(--space-7) 0; }

.pdp-steps {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  text-align: center;
}

.pdp-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--k9-maroon);
  color: var(--k9-cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 var(--space-3);
}

.pdp-step__title {
  color: var(--k9-ink);
  margin: 0 0 var(--space-2);
}

.pdp-step p {
  margin: 0 auto;
  max-width: 320px;
  color: var(--k9-ink-soft);
  font-size: 0.98rem;
}

@media (min-width: 768px) {
  .pdp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}

@media (min-width: 1024px) {
  .pdp-use { padding: 96px 0; }
}

/* --- 4. About K9-Rx (legacy product copy, verbatim) ---------------------- */

.pdp-story {
  background: var(--k9-paper);
  border-top: 1px solid var(--k9-line);
  padding: var(--space-7) 0;
}

.pdp-story__body {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--k9-ink);
  text-wrap: pretty;
}

.pdp-story__body p { margin: 0 0 var(--space-4); }

/* The copy's own closing line reads as a sign-off. */
.pdp-story__body p:last-child:not(:first-child) {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--k9-line);
  font-style: italic;
  font-size: 1rem;
  color: var(--k9-ink-soft);
}

@media (min-width: 1024px) {
  .pdp-story { padding: 88px 0; }
  .pdp-story__body { font-size: 1.18rem; }
}

/* --- Supporting imagery (Phase 5B final polish) ------------------------
   Transparent cutouts (public/images/product/, backgrounds removed from
   K9Bowlpour.jpg, K9ScoopPour.jpg and Dog-Group.jpg). All three sections
   share one hierarchy: label -> heading -> centered image -> content. */
.pdp-value__media,
.pdp-use__media,
.pdp-story__dogs { margin: 0 auto; }

.pdp-value__media img,
.pdp-use__media img,
.pdp-story__dogs img {
  display: block;
  width: 100%;
  height: auto;
}

.pdp-value__media { width: 220px; margin: var(--space-2) auto var(--space-5); }
.pdp-use__media { width: 108px; margin: var(--space-2) auto 0; }

.pdp-story__dogs {
  max-width: 640px;
  margin: var(--space-2) auto var(--space-6);
}

@media (min-width: 1024px) {
  .pdp-value__media { width: 270px; margin: var(--space-4) auto var(--space-6); }
  .pdp-use__media { width: 132px; margin: var(--space-4) auto var(--space-2); }
  .pdp-story__dogs { margin: var(--space-4) auto var(--space-7); }
}

/* --- 5. Learn more -------------------------------------------------------- */

.pdp-explore {
  border-top: 1px solid var(--k9-line);
  padding: var(--space-7) 0;
}

.pdp-explore__title {
  color: var(--k9-ink);
  text-align: center;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin: 0 0 var(--space-5);
}

.pdp-explore__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.pdp-explore__list a {
  position: relative;
  display: block;
  height: 100%;
  padding: var(--space-4) 44px var(--space-4) var(--space-4);
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pdp-explore__list a::after {
  content: "\2192";
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--k9-maroon);
  font-weight: 600;
}

.pdp-explore__list a:hover {
  border-color: var(--k9-maroon);
  box-shadow: var(--shadow-card);
}

.pdp-explore__list span {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  color: var(--k9-ink);
}

.pdp-explore__list small {
  display: block;
  margin-top: 2px;
  font-size: 0.86rem;
  color: var(--k9-ink-soft);
}

@media (min-width: 600px) {
  .pdp-explore__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pdp-explore__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}

/* ==========================================================================
   Phase 5B: educational-page heading icons (Feeding Guide, Nutrition,
   Nutrition & Your Dog, Science). One small custom illustration sits on
   the main heading's baseline, right after its last word
   (src/views/partials/edu-icons/*.ejs). Sized to stay secondary to the
   heading; line-height is unaffected, so no page moves. The anchor keeps
   the last word and the icon together so the icon never wraps alone.
   ========================================================================== */

.k9-edu-icon-anchor { white-space: nowrap; }

.k9-edu-icon {
  display: inline-block;
  width: 46px;
  height: 31px;
  margin-left: 12px;
  vertical-align: baseline;
  /* Negative top margin: the icon may rise above a heading's own line box
     (e.g. Science at tablet width) without making that line taller. The
     icon's position is unchanged - it still sits on the baseline. */
  margin-top: -12px;
}

@media (min-width: 768px) {
  .k9-edu-icon {
    width: 60px;
    height: 40px;
    margin-left: 20px;
  }
}

/* Product Catalog: product temporarily not offered (no purchase controls). */
.pdp-unavailable { max-width: 640px; padding: 40px 0 64px; }
.pdp-unavailable__note { font-size: 1.15rem; font-weight: 600; color: var(--k9-maroon); margin: 12px 0; }

/* Admin Product Catalog */
.catalog-list { display: grid; gap: 16px; margin-top: 20px; }
.catalog-card { display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items: center; padding: 18px 20px; background: var(--k9-paper); border: 1px solid var(--k9-line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.catalog-card__img { width: 120px; height: 90px; object-fit: contain; }
.catalog-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 4px; font-size: 1.25rem; color: var(--k9-maroon); }
.catalog-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 20px; margin: 12px 0 0; }
.catalog-card__facts dt { font-family: var(--font-display); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--k9-ink-soft); }
.catalog-card__facts dd { margin: 2px 0 0; font-weight: 600; }
.product-edit__grid { display: grid; grid-template-columns: 1fr 260px; gap: 28px; margin-top: 16px; align-items: start; }
.product-edit__image { margin: 0; padding: 14px; background: var(--k9-paper); border: 1px solid var(--k9-line); border-radius: var(--radius); text-align: center; }
.product-edit__image img { max-width: 100%; height: auto; }
.product-edit__toggle { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; max-width: 560px; }
.product-edit__toggle input, .product-variants__check { width: 20px; height: 20px; accent-color: var(--k9-maroon); flex-shrink: 0; margin-top: 2px; }
.product-edit__facts { grid-template-columns: 1fr; max-width: 560px; }
.product-variants td { vertical-align: top; }
.product-variants__note { display: block; color: var(--k9-ink-soft); font-size: 0.82rem; margin-top: 2px; max-width: 320px; }
.price-input { display: inline-flex; align-items: center; gap: 4px; }
.price-input input { width: 110px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--k9-line); border-radius: var(--radius); font: inherit; background: var(--k9-paper); }
.field--error input { border-color: var(--k9-danger); }
.review-effect { font-size: 0.9rem; max-width: 380px; }
@media (max-width: 760px) {
  .catalog-card { grid-template-columns: 1fr; }
  .catalog-card__img { width: 100px; height: 75px; }
  .product-edit__grid { grid-template-columns: 1fr; }
  .product-edit__image { max-width: 260px; }
  .product-variants__note { max-width: none; text-align: left; }
}

/* ===== Admin Shipping sub-navigation + Packaging (Multi-Product Foundation) ===== */
.admin-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 24px;
  border-bottom: 2px solid var(--k9-line);
}
.admin-subnav a {
  padding: 10px 16px;
  margin-bottom: -2px;
  border-bottom: 3px solid transparent;
  color: var(--k9-ink-soft);
  font-family: 'Oswald', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.admin-subnav a:hover { color: var(--k9-maroon); }
.admin-subnav a[aria-current="page"] { color: var(--k9-maroon); border-bottom-color: var(--k9-gold); }
.packaging-table code { font-size: 0.8rem; }

/* ===== Product Catalog: primary product image (Product Media) ===== */
.product-image { text-align: left; }
.product-image__title { margin: 0 0 10px; font-family: 'Oswald', sans-serif; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--k9-maroon); }
.product-image__figure { margin: 0; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--k9-cream); border: 1px solid var(--k9-line); border-radius: var(--radius); overflow: hidden; }
.product-image__figure img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-image__source { margin: 10px 0 12px; }
.product-image__source .status-pill { margin: 0; }
.product-image__label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.product-image__file { width: 100%; font-size: 0.85rem; }
.product-image__hint { font-size: 0.8rem; margin: 6px 0 0; }
.product-image__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ===== Phase 4: Shop (/products) ===== */
.shop-hero {
  padding: var(--space-7) 0 var(--space-5);
  background:
    radial-gradient(ellipse 70% 60% at 28% 42%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),
    var(--k9-cream);
  text-align: center;
}
.shop-hero__eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k9-gold);
}
.shop-hero__title { margin: 0; }
.shop-hero__lede { max-width: 560px; margin: var(--space-3) auto 0; color: var(--k9-ink-soft); }
.shop-body { padding: var(--space-6) 0 var(--space-8); }
.shop-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}
.shop-card {
  display: flex;
  flex-direction: column;
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.shop-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-4);
  background: radial-gradient(ellipse 70% 60% at 50% 45%, #fff 0%, var(--k9-cream) 75%);
}
.shop-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(36, 19, 21, 0.14)); }
.shop-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-4) var(--space-5) var(--space-5); }
.shop-card__name { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.shop-card__name a { color: var(--k9-ink); text-decoration: none; }
.shop-card__name a:hover { color: var(--k9-maroon); text-decoration: underline; }
.shop-card__summary { margin: var(--space-2) 0 0; color: var(--k9-ink-soft); font-size: 0.95rem; }
.shop-card__price { margin: var(--space-3) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--k9-maroon); }
.shop-card__purchase { margin: var(--space-1) 0 var(--space-4); font-size: 0.9rem; color: var(--k9-ink-soft); }
.shop-card__cta { margin-top: auto; align-self: flex-start; min-height: 44px; }

/* One product: a featured card, image beside the details, not a lonely grid tile. */
.shop-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 920px; margin: 0 auto; }
@media (min-width: 760px) {
  .shop-grid--single .shop-card { flex-direction: row; }
  .shop-grid--single .shop-card__media { flex: 0 0 48%; aspect-ratio: auto; min-height: 320px; padding: var(--space-6); }
  .shop-grid--single .shop-card__body { justify-content: center; padding: var(--space-6); }
  .shop-grid--single .shop-card__name { font-size: 2rem; }
  .shop-grid--single .shop-card__price { font-size: 2.2rem; }
}

.shop-empty {
  max-width: 620px;
  margin: 0 auto;
  padding: var(--space-6);
  text-align: center;
  background: var(--k9-paper);
  border: 1px solid var(--k9-line);
  border-radius: var(--radius);
}
.shop-empty__title { margin-top: 0; }

/* ===== Phase 4: generic product page (/products/:slug) ===== */
.pdp-crumb { color: inherit; text-decoration: none; }
.pdp-crumb:hover { text-decoration: underline; }
.pdp--generic .pdp-media__stage { max-width: 440px; }
.pdp-options { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.pdp-options__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pdp-option { position: relative; cursor: pointer; }
.pdp-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pdp-option__box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 48px;
  padding: 6px 14px;
  background: var(--k9-paper);
  border: 1.5px solid var(--k9-line);
  border-radius: var(--radius);
  font-weight: 600;
}
.pdp-option__price { font-size: 0.78rem; font-weight: 400; color: var(--k9-ink-soft); }
.pdp-option:hover .pdp-option__box { border-color: var(--k9-ink-soft); }
.pdp-option input:checked + .pdp-option__box { border-color: var(--k9-maroon); box-shadow: inset 0 0 0 1.5px var(--k9-maroon); background: var(--k9-maroon-tint); }
.pdp-option input:focus-visible + .pdp-option__box { outline: 3px solid var(--k9-gold); outline-offset: 2px; }
.pdp-purchase-type { margin: 0 0 var(--space-4); font-weight: 600; }
.pdp-description { padding: var(--space-7) 0; background: var(--k9-paper); }
.pdp-description__title { margin-top: 0; }

/* ===== Phase 5: Admin Add Product / product management ===== */
.catalog-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.catalog-header__add { flex-shrink: 0; margin-top: 8px; }
.status-pill--ready { background: #e9eef8; color: #2c4a7a; border-color: #ccd8ee; }
.product-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 0; }
.product-status-line .status-pill { margin: 0; }
.section-lede { margin: 8px 0 16px; max-width: 760px; }
.product-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.product-form textarea, .product-new textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--k9-line); border-radius: var(--radius); background: var(--k9-paper); }
.form-hint { font-size: 0.82rem; margin: 6px 0 0; }
.product-new { max-width: 820px; }
.product-edit__grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.variant-edit summary { cursor: pointer; color: var(--k9-maroon); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.variant-edit__form { display: grid; gap: 8px; margin-top: 10px; min-width: 180px; }
.variant-edit__form label { display: grid; gap: 2px; font-size: 0.8rem; font-weight: 600; }
.variant-edit__form input { min-height: 36px; padding: 4px 8px; border: 1px solid var(--k9-line); border-radius: var(--radius); font: inherit; }
.add-variant { margin-top: 28px; padding: 20px; background: var(--k9-paper); border: 1px solid var(--k9-line); border-radius: var(--radius); }
.add-variant__title { margin: 0 0 4px; font-size: 1.1rem; color: var(--k9-maroon); }
.add-variant__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 16px; margin-top: 14px; }
.add-variant__cadence { border: 0; padding: 0; margin: 4px 0 8px; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.add-variant__cadence legend { font-weight: 700; font-size: 0.85rem; margin-bottom: 8px; padding: 0; }
.check-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--k9-line); border-radius: 999px; background: var(--k9-cream); font-size: 0.88rem; cursor: pointer; }
.check-chip input { width: 18px; height: 18px; accent-color: var(--k9-maroon); }
.field-help { margin: 8px 0 14px; padding: 10px 14px; background: var(--k9-cream); border-left: 3px solid var(--k9-gold); font-size: 0.85rem; }
.field-help p { margin: 4px 0; }
.readiness-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.readiness-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; background: var(--k9-paper); border: 1px solid var(--k9-line); border-radius: var(--radius); }
.readiness-item__mark { flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.readiness-item--ok .readiness-item__mark { background: var(--k9-success-bg); color: var(--k9-success-ink); }
.readiness-item--fail .readiness-item__mark { background: var(--k9-maroon-tint); color: var(--k9-maroon); }
.readiness-item__body { display: grid; gap: 2px; }
.readiness-item__label { font-weight: 600; }
.readiness-item--fail { border-color: #e9c9c9; }
.readiness-item__detail { font-size: 0.86rem; color: var(--k9-ink-soft); }
.status-panel { padding: 20px; background: var(--k9-paper); border: 1px solid var(--k9-line); border-radius: var(--radius); max-width: 760px; }
.status-panel__state { margin: 0 0 14px; }
.status-panel .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.status-confirm__facts { max-width: 760px; }
.status-confirm__effect { max-width: 760px; margin-top: 20px; padding: 14px 18px; background: var(--k9-cream); border-left: 3px solid var(--k9-gold); }
@media (max-width: 760px) {
  .product-edit__grid--even { grid-template-columns: 1fr; }
  .catalog-header__add { width: 100%; text-align: center; }
}
.status-pill--attention { background: var(--k9-maroon-tint); color: var(--k9-maroon); border-color: #e9c9c9; }