/* ============================================================
   Primal Privilege™ — PRIVATE PREVIEW STYLESHEET
   Homepage redesign (shop-first, brighter, western-premium)
   ------------------------------------------------------------
   Scope: this file ONLY affects markup carrying the "phr-"
   prefix, which only exists on /preview/homepage-redesign.php.
   It is not linked from, and does not touch, the live homepage
   or any other page on the site.

   Color / spacing come from the site's official brand token
   system (/assets/css/brand-tokens.css, [data-brand="primal-privilege"]).
   This file re-declares the same @font-face rules already used
   sitewide (pointing at the same real font files) so this page
   does not need to load main.css.
============================================================ */

/* ── Brand fonts (same files as main.css, kept self-contained) ── */
@font-face {
  font-family: 'CS Mantis';
  src: url('/assets/fonts/CSMantis-Regular.woff2') format('woff2'),
       url('/assets/fonts/CSMantis-Regular.woff')  format('woff'),
       url('/assets/fonts/CSMantis-Regular.ttf')   format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CS Mantis';
  src: url('/assets/fonts/CSMantis-Italic.woff2') format('woff2'),
       url('/assets/fonts/CSMantis-Italic.woff')  format('woff'),
       url('/assets/fonts/CSMantis-Italic.ttf')   format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Neue Helvena';
  src: url('/assets/fonts/NeueHelvena-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Helvena';
  src: url('/assets/fonts/NeueHelvena-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Helvena';
  src: url('/assets/fonts/NeueHelvena-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Helvena';
  src: url('/assets/fonts/NeueHelvena-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Local scope tokens ────────────────────────────────────── */
.phr {
  --phr-serif: 'CS Mantis', Georgia, 'Times New Roman', serif;
  --phr-sans: 'Neue Helvena', 'Helvetica Neue', Arial, sans-serif;
  --phr-max: 1280px;
  --phr-gutter: clamp(20px, 4vw, 48px);
  --phr-radius: 10px;
  --phr-radius-sm: 6px;
  --phr-ease: cubic-bezier(.22,.61,.36,1);

  /* ══════════════════════════════════════════════════════════════
     PREVIEW-ONLY FULL PALETTE OVERRIDE — Jodi's Aug 2026 "Hammered
     Copper" color decision. She reviewed 5 button-texture options
     (scratch/button-texture-options.html) and picked Option B
     (Hammered Copper), then sent the exact 7-color palette below
     with role mappings and asked for it site-wide.

     This re-declares the semantic --brand-* custom properties ONLY
     inside .phr (i.e. only on these preview pages), replacing the
     earlier near-white-background-only override. It deliberately
     does NOT touch assets/css/brand-tokens.css itself, because that
     file is shared, LIVE production infrastructure (loaded by
     cooler-club.php and includes/raw-beef-recipe-section.php outside
     of /preview/, and by the Ida Ranch Reserve brand too) — editing
     it would change colors on the real live site. If/when Jodi wants
     this to become the real site's palette, that needs its own
     deliberate, attended change to brand-tokens.css — not something
     to bundle into a preview-only patch.

     Jodi's 7 exact colors, as given:
       Copper       #AE6038 — primary buttons, active nav, links,
                              icons, pricing highlights, subscription
                              messaging, small branded details
       Dark brown   #312420 — headings, body text, footer, outlines,
                              (adjusted from Jodi's original #2E2218 per her
                              Aug 2026 follow-up — same role, slightly lighter/
                              warmer ink)
                              secondary buttons
       Ivory        #FCF8F2 — main page background
       Warm white   #FEFBF7 — cards and product panels
       Warm cream   #F5F1EA — alternating sections
       Muted sage   #DDE3CF — trust points, feeding guidance, success
                              messaging
       Border gray  #E4DED6 — borders, form fields, dividers

     Everything else below (hover shades, gradient stops, muted-text
     tones, the sage "ink" used for text/icons on a sage chip) is a
     tint/shade DERIVED from those 7 exact values (HSL lighten/
     darken), not a new color choice — needed because the token
     system requires a few more steps than 7 flat colors (hover
     states, dark-on-dark surfaces, de-emphasized text). Flagged here
     so the derivation is visible and easy to adjust. */

  /* Copper scale (derived from #AE6038) */
  --jodi-copper:          #AE6038;
  --jodi-copper-hover:    #8f4f2e;  /* darkened, for :hover / pressed states */
  --jodi-copper-dark:     #784124;  /* deep copper, gradient/shadow stops */
  --jodi-copper-light:    #c78d70;  /* lightened, muted accent tint */
  --jodi-copper-lighter:  #d5b2a0;  /* further lightened, gradient highlight stop */

  /* Dark brown scale (derived from #312420, Jodi's Aug 2026 follow-up
     adjustment from the original #2E2218 — same role, slightly lighter) */
  --jodi-brown:           #312420;
  --jodi-brown-darkest:   #1e1614;  /* darkest surface — footer, sidebar, dark bands */
  --jodi-brown-mid:       #4b3833;  /* mid-dark brown surface (dark cards, hover) */
  --jodi-brown-muted:     #8c766f;  /* de-emphasized / secondary text */
  --jodi-brown-subtle:    #b5aaa7;  /* further de-emphasized / tertiary text */

  /* Sage scale (derived from #DDE3CF) — reserved for trust points,
     feeding guidance and success/confirmation messaging only */
  --jodi-sage:            #DDE3CF;
  --jodi-sage-text:       #566b24;  /* deep sage-green ink, readable on both ivory and sage */
  --jodi-sage-border:     #bbc99b;

  /* Neutral scale (exact values from Jodi) */
  --jodi-ivory:           #FCF8F2;
  --jodi-warm-white:      #FEFBF7;
  --jodi-warm-cream:      #F5F1EA;
  --jodi-border-gray:     #E4DED6;
  --jodi-bg-warm-deep:    #d6d1c9;  /* derived — a 4th, deepest neutral tier for the rare
                                       "extra warm" band; the site's token system has one
                                       more background tier (--brand-bg-warm) than Jodi's
                                       3 background colors, so this fills that gap rather
                                       than reusing a color she assigned a different job to */

  /* ── Semantic token overrides (this is what everything else in
     the file actually reads — 746 rules use var(--brand-*), so this
     block is what makes the new palette flow through the whole site) ── */

  /* Primary surfaces */
  --brand-primary:          var(--jodi-brown);
  --brand-primary-dark:     var(--jodi-brown-darkest);
  --brand-secondary:        var(--jodi-copper);
  --brand-accent:           var(--jodi-copper);
  --brand-accent-muted:     var(--jodi-copper-light);

  /* Backgrounds */
  --brand-bg:               var(--jodi-ivory);
  --brand-bg-alt:           var(--jodi-warm-cream);
  --brand-bg-warm:          var(--jodi-bg-warm-deep);
  --brand-surface:          var(--jodi-warm-white);
  --brand-surface-dark:     var(--jodi-brown-mid);
  --brand-surface-darker:   var(--jodi-brown-darkest);
  --brand-surface-mid:      var(--jodi-brown);

  /* Text */
  --brand-text:             var(--jodi-brown);
  --brand-text-muted:       var(--jodi-brown-muted);
  --brand-text-subtle:      var(--jodi-brown-subtle);
  --brand-text-on-dark:     var(--jodi-ivory);
  --brand-text-on-dark-dim: rgba(252,248,242,.65);
  --brand-eyebrow:          var(--jodi-copper);

  /* Borders */
  --brand-border:           var(--jodi-border-gray);
  --brand-border-strong:    rgba(174,96,56,.55);   /* copper-tinted, for active/selected borders */
  --brand-border-on-dark:   rgba(252,248,242,.12);
  --brand-border-accent:    rgba(174,96,56,.35);

  /* Buttons */
  --brand-btn-primary-bg:    var(--jodi-copper);
  --brand-btn-primary-text:  var(--jodi-warm-white);
  --brand-btn-primary-hover: var(--jodi-copper-hover);

  --brand-btn-secondary-bg:      transparent;
  --brand-btn-secondary-text:    var(--jodi-brown);
  --brand-btn-secondary-border:  rgba(49,36,32,.35);
  --brand-btn-secondary-hover-bg:rgba(49,36,32,.06);

  --brand-btn-ghost-bg:     transparent;
  --brand-btn-ghost-text:   var(--jodi-ivory);
  --brand-btn-ghost-border: rgba(252,248,242,.35);
  --brand-btn-ghost-hover:  rgba(252,248,242,.1);

  /* Shadows (re-based on the new dark-brown ink instead of the old one) */
  --brand-shadow-sm:   0 4px 16px rgba(49,36,32,.1);
  --brand-shadow:      0 18px 50px rgba(49,36,32,.14);
  --brand-shadow-lg:   0 32px 80px rgba(30,22,20,.22);
  --brand-shadow-card: 0 2px 12px rgba(49,36,32,.08), 0 8px 32px rgba(49,36,32,.06);

  /* Gradients */
  --brand-gradient-dark:
    linear-gradient(135deg, var(--jodi-brown-darkest) 0%, var(--jodi-brown) 55%, var(--jodi-brown-mid) 100%);
  --brand-gradient-accent:
    linear-gradient(135deg, var(--jodi-copper-dark) 0%, var(--jodi-copper) 52%, var(--jodi-copper-lighter) 100%);
  --brand-gradient-hero:
    linear-gradient(160deg, rgba(30,22,20,.92) 0%, rgba(49,36,32,.75) 55%, rgba(75,56,51,.55) 100%);

  /* Divider / accent bar */
  --brand-accent-bar:
    linear-gradient(90deg, transparent 0%, var(--jodi-copper-hover) 30%, var(--jodi-copper-light) 55%, var(--jodi-copper-hover) 80%, transparent 100%);

  font-family: var(--phr-sans);
  background: var(--brand-bg);
  color: var(--brand-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.phr, .phr *, .phr *::before, .phr *::after { box-sizing: border-box; }

.phr img { max-width: 100%; display: block; }
/* :where(a) strips the element's specificity contribution, so this
   rule sits at ".phr"-only specificity (0,1,0) instead of (0,1,1).
   Without that, this rule was silently beating every single-class
   button/link color rule in the file (.phr-btn--primary, .phr-icon-btn,
   .phr-join-pill, etc.) whenever their specificity was also just one
   class — which is most of them. It only became visible where the
   "wrong" inherited color diverged sharply from the intended one (the
   dark header, the light hero scrim); elsewhere the two colors
   happened to coincide, so it silently didn't matter. This one change
   fixes the whole class of bug at once instead of chasing it rule by
   rule. */
.phr :where(a) { color: inherit; text-decoration: none; }
.phr button { font-family: inherit; cursor: pointer; }
.phr ul { list-style: none; margin: 0; padding: 0; }
.phr h1, .phr h2, .phr h3, .phr h4 {
  font-family: var(--phr-serif);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
}
.phr p { margin: 0; line-height: 1.65; }

/* Visible keyboard focus everywhere on this page */
.phr a:focus-visible,
.phr button:focus-visible,
.phr input:focus-visible,
.phr select:focus-visible,
.phr summary:focus-visible {
  outline: 3px solid var(--brand-eyebrow);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ==========================================================================
   MOTION SYSTEM
   Added per Emil Kowalski's "Animations on the Web" principles:
   - ease-out for things entering/exiting
   - ease-in-out for on-screen movement
   - ease for hover/color changes
   - only transform + opacity are animated (GPU-friendly, no layout thrash)
   - every rule here has a matching prefers-reduced-motion override below
   ========================================================================== */
.phr {
  --phr-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --phr-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --phr-ease-hover: ease;
  --phr-dur-micro: 140ms;
  --phr-dur-sm: 200ms;
  --phr-dur-md: 260ms;
}

/* Press feedback — every clickable control gets a quick, tactile squeeze.
   Buttons are seen constantly, so the effect is small (0.97) and fast. */
.phr-btn,
.phr-icon-btn,
.phr-join-pill,
.phr-toggle {
  transition:
    transform var(--phr-dur-micro) var(--phr-ease-out),
    background var(--phr-dur-sm) var(--phr-ease-hover),
    background-color var(--phr-dur-sm) var(--phr-ease-hover),
    border-color var(--phr-dur-sm) var(--phr-ease-hover),
    color var(--phr-dur-sm) var(--phr-ease-hover),
    box-shadow var(--phr-dur-sm) var(--phr-ease-hover);
}
.phr-btn:active,
.phr-icon-btn:active,
.phr-join-pill:active {
  transform: scale(0.97);
}
.phr-btn:disabled:active,
.phr-btn[aria-disabled="true"]:active {
  transform: none;
}

/* Card hover-lift — subtle, only on devices that actually hover, so it
   never fires as a "stuck" state on touch. */
@media (hover: hover) and (pointer: fine) {
  .phr-meal-card,
  .phr-product-card,
  .phr-value-card,
  .phr-testimonial-card,
  .phr-plan-card,
  .phr-story-card,
  .phr-fp-serving {
    transition:
      transform var(--phr-dur-sm) var(--phr-ease-out),
      box-shadow var(--phr-dur-sm) var(--phr-ease-out);
  }
  .phr-meal-card:hover,
  .phr-product-card:hover,
  .phr-value-card:hover,
  .phr-testimonial-card:hover,
  .phr-plan-card:hover,
  .phr-story-card:hover,
  .phr-fp-serving:hover {
    transform: translateY(-4px);
    box-shadow: var(--brand-shadow-lg);
  }
}

/* Accordion expand/collapse — the trigger's sibling panel is wrapped in
   .phr-pdp-accordion__inner (added by JS) so we can animate grid-template-rows
   instead of the `hidden` attribute snapping instantly. ease-in-out because
   the content is moving/resizing on screen, not entering fresh. */
.phr-pdp-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--phr-dur-md) var(--phr-ease-in-out);
}
.phr-pdp-accordion__panel.is-open {
  grid-template-rows: 1fr;
}
.phr-pdp-accordion__inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 2px 16px;
}
.phr-pdp-accordion__trigger .phr-pdp-accordion__icon {
  display: inline-block;
  transition: transform var(--phr-dur-sm) var(--phr-ease-in-out);
}
.phr-pdp-accordion__trigger[aria-expanded="true"] .phr-pdp-accordion__icon {
  transform: rotate(180deg);
}

/* Mobile nav — slide/fade instead of an instant display swap.
   FIXED 2026-08-31: previously relied on shared JS injecting a
   ".phr-mobile-nav__inner" wrapper div at page load, which the CSS
   grid-template-rows:0fr collapse trick needed to actually reach zero
   height. That JS file has repeatedly gone stale on the live server
   (deployed pages showing the old JS without the wrapper logic),
   which left the closed mobile nav still occupying ~370px of layout
   space (an oversized header). Rebuilt as a pure CSS max-height
   collapse that needs NO JS-injected markup at all — it collapses
   correctly whether or not the wrapper div is present, so a stale JS
   upload can no longer reproduce this bug. */
.phr-mobile-nav {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  padding: 0 var(--phr-gutter);
  transition:
    max-height var(--phr-dur-md) var(--phr-ease-in-out),
    opacity var(--phr-dur-sm) var(--phr-ease-out),
    padding var(--phr-dur-md) var(--phr-ease-in-out),
    visibility 0s linear var(--phr-dur-md);
}
.phr-mobile-nav__inner {
  /* Neutralized — no longer load-bearing for the collapse (see note
     above). Left in place, harmless, in case the old JS ever does run
     and still injects this wrapper; it must not add its own padding
     on top of .phr-mobile-nav's own padding below. */
  padding: 0;
}
.phr-mobile-nav.is-open {
  max-height: 480px;
  opacity: 1;
  visibility: visible;
  padding: 8px var(--phr-gutter) 20px;
  transition:
    max-height var(--phr-dur-md) var(--phr-ease-in-out),
    opacity var(--phr-dur-sm) var(--phr-ease-out),
    padding var(--phr-dur-md) var(--phr-ease-in-out),
    visibility 0s linear 0s;
}

/* Hamburger icon morph */
.phr-hamburger span {
  transition: transform var(--phr-dur-sm) var(--phr-ease-in-out), opacity var(--phr-dur-micro) var(--phr-ease-out);
}

/* Toggle switch — background color now eases along with the thumb instead
   of snapping the instant the thumb finishes moving. */
.phr-toggle {
  transition: background-color var(--phr-dur-sm) var(--phr-ease-hover);
}

/* Scroll-reveal utility — applied via IntersectionObserver in JS.
   Starts from a gentle offset/scale, never `scale(0)` or a large translate,
   so it reads as a settle-in rather than a pop. */
.phr-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--phr-dur-md) var(--phr-ease-out),
    transform var(--phr-dur-md) var(--phr-ease-out);
}
.phr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger for siblings within the same grid (e.g. a row of product cards)
   is set as an inline transition-delay by the shared JS, not here — it
   needs to count actual DOM siblings per page, which varies. */

/* Reduced motion — disable every transition/animation added above. No
   exceptions for opacity or color, per the animation guidelines this
   system follows. Content stays fully visible/usable, just without motion. */
@media (prefers-reduced-motion: reduce) {
  .phr-btn,
  .phr-icon-btn,
  .phr-join-pill,
  .phr-toggle,
  .phr-meal-card,
  .phr-product-card,
  .phr-value-card,
  .phr-testimonial-card,
  .phr-plan-card,
  .phr-story-card,
  .phr-fp-serving,
  .phr-pdp-accordion__panel,
  .phr-pdp-accordion__trigger .phr-pdp-accordion__icon,
  .phr-mobile-nav,
  .phr-hamburger span,
  .phr-reveal {
    transition: none !important;
  }
  .phr-btn:active,
  .phr-icon-btn:active,
  .phr-join-pill:active {
    transform: none;
  }
  .phr-meal-card:hover,
  .phr-product-card:hover,
  .phr-value-card:hover,
  .phr-testimonial-card:hover,
  .phr-plan-card:hover,
  .phr-story-card:hover,
  .phr-fp-serving:hover {
    transform: none;
  }
  .phr-pdp-accordion__panel {
    grid-template-rows: 0fr;
  }
  .phr-pdp-accordion__panel.is-open {
    grid-template-rows: 1fr;
  }
  .phr-mobile-nav {
    grid-template-rows: 0fr;
    opacity: 1;
  }
  .phr-mobile-nav.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .phr-reveal,
  .phr-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition-delay: 0ms !important;
  }
}

.phr-container {
  max-width: var(--phr-max);
  margin: 0 auto;
  padding: 0 var(--phr-gutter);
}
.phr-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;
}

.phr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-eyebrow);
}

/* ── Buttons ───────────────────────────────────────────────── */
.phr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 30px;
  border-radius: 7px; /* UPDATED per Jodi's Aug 2026 mockups — rounded corners, reversing the earlier "true rectangle" direction (was 0). Flagged to Jodi in the progress note. */
  font-family: var(--phr-sans);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 2px solid transparent;
  transition: transform .15s var(--phr-ease), background .15s var(--phr-ease), border-color .15s var(--phr-ease), color .15s var(--phr-ease);
  white-space: nowrap;
}
/* Flat copper — Jodi's Aug 31 call to drop the "Hammered Copper"
   texture (gradients/inset shadows) sitewide and go back to a plain
   solid copper fill. Kept simple to match .phr-btn--dark's flat
   pattern below: solid background + hover shade + a small lift, no
   gradient/inset-shadow texture. */
.phr-btn--primary {
  background: var(--brand-btn-primary-bg);
  color: var(--brand-btn-primary-text);
  border-color: var(--brand-btn-primary-bg);
}
.phr-btn--primary:hover {
  background: var(--brand-btn-primary-hover);
  border-color: var(--brand-btn-primary-hover);
  transform: translateY(-1px);
}
.phr-btn--dark {
  background: var(--brand-primary-dark);
  color: var(--brand-text-on-dark);
  border-color: var(--brand-primary-dark);
}
.phr-btn--dark:hover { background: var(--brand-surface-mid); border-color: var(--brand-surface-mid); transform: translateY(-1px); }
.phr-btn--outline {
  background: transparent;
  color: var(--brand-btn-secondary-text);
  border-color: var(--brand-btn-secondary-border);
}
.phr-btn--outline:hover { background: var(--brand-btn-secondary-hover-bg); }
.phr-btn--ghost-dark {
  background: transparent;
  color: var(--brand-text-on-dark);
  border-color: var(--brand-border-on-dark);
}
.phr-btn--ghost-dark:hover { background: rgba(252,244,229,.08); border-color: var(--brand-border-accent); }
.phr-btn--block { width: 100%; }
.phr-btn[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }

/* NOTE: ".phr a { color: inherit; }" (below) is class+element, which
   out-specifies a bare single class like ".phr-link-arrow". Scoping
   these under ".phr" (two classes) is what makes the intended color
   actually win instead of silently falling back to inherited text
   color — this is what was making the onDark variant unreadable on
   the hero photo. */
.phr .phr-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--brand-text);
  border-bottom: 1px solid var(--brand-border-strong);
  padding-bottom: 2px;
  transition: color .15s var(--phr-ease), border-color .15s var(--phr-ease);
}
.phr-link-arrow:hover { color: var(--brand-eyebrow); border-color: var(--brand-eyebrow); }
.phr .phr-link-arrow--onDark { color: var(--brand-text-on-dark); border-color: var(--brand-border-on-dark); }
.phr-link-arrow--onDark:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
.phr-link-arrow svg { transition: transform .15s var(--phr-ease); }
.phr-link-arrow:hover svg { transform: translateX(3px); }

/* ── Announcement bar (ONE, compact) ──────────────────────── */
.phr-announce {
  background: var(--brand-primary-dark);
  color: var(--brand-text-on-dark-dim);
  border-bottom: 1px solid var(--brand-border-on-dark);
}
.phr-announce__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 44px);
  padding: 9px var(--phr-gutter);
  max-width: var(--phr-max);
  margin: 0 auto;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  flex-wrap: wrap;
  text-align: center;
}
.phr-announce__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.phr-announce__item svg { flex-shrink: 0; color: var(--brand-accent); }

/* ── Scrolling service-area ticker (replaces the static .phr-announce
   bar at the very top of the page, per Jodi's reference — Aug 31) ── */
.phr-ticker {
  background: var(--brand-primary-dark);
  border-bottom: 1px solid var(--brand-border-on-dark);
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.phr-ticker__track {
  display: inline-flex;
  align-items: center;
  animation: phr-ticker-scroll 32s linear infinite;
  will-change: transform;
}
.phr-ticker:hover .phr-ticker__track { animation-play-state: paused; }
.phr-ticker__group { display: inline-flex; align-items: center; }
.phr-ticker__item {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brand-text-on-dark-dim);
  padding: 9px 22px;
  line-height: 1;
}
.phr-ticker__item svg { color: var(--brand-accent); vertical-align: -2px; margin-right: 6px; }
.phr-ticker__dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--brand-accent);
  flex-shrink: 0;
}
@keyframes phr-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .phr-ticker__item { font-size: .62rem; padding: 8px 15px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .phr-ticker__track { animation: none; }
  .phr-ticker { overflow-x: auto; }
}

/* ── Header / nav ──────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   HEADER v2 — brand-refresh header matching Jodi's real mockups
   (cream bar, mountain-icon lockup, "Shop Raw" filled CTA) instead
   of the original dark sticky header. Per Jodi's explicit go-ahead,
   this replaces .phr-header sitewide — all 19 preview pages use it.
════════════════════════════════════════════════════════════════ */
.phr-header {
  background: var(--jodi-brown);
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid var(--brand-border-on-dark);
}
.phr-header__inner {
  max-width: var(--phr-max);
  margin: 0 auto;
  padding: 0 var(--phr-gutter);
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.phr-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex-shrink: 0; padding: 10px 0; }
.phr-logo img { height: 50px; width: auto; display: block; }
.phr-logo__mark { color: var(--brand-text-on-dark); margin-bottom: 2px; }
.phr-logo__word {
  font-family: var(--phr-serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--brand-text-on-dark);
}
.phr-logo__place {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-eyebrow);
  margin-top: 2px;
}
.phr-logo__place::before, .phr-logo__place::after { content: ''; width: 14px; height: 1px; background: var(--brand-eyebrow); }
.phr-logo--compact .phr-logo__word { font-size: 1.05rem; }
.phr-logo--compact .phr-logo__mark { display: none; }

.phr-nav { display: flex; align-items: center; gap: 30px; }
.phr-nav a {
  font-size: .85rem;
  font-weight: 600;
  color: var(--brand-text-on-dark);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--phr-ease), border-color .15s var(--phr-ease);
}
.phr-nav a:hover, .phr-nav a[aria-current="page"] { color: var(--brand-text-on-dark); border-color: var(--brand-eyebrow); }
.phr-nav__shop {
  color: var(--brand-text-on-dark) !important;
  font-weight: 600 !important;
}
.phr-header__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.phr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--brand-text-on-dark);
  position: relative;
  transition: background .15s var(--phr-ease), color .15s var(--phr-ease);
}
.phr-icon-btn:hover { background: rgba(252,248,242,.12); }
.phr-cart-count {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--brand-btn-primary-bg);
  color: #fff;
  font-size: .625rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.phr-join-pill {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  margin-left: 8px;
  border-radius: 7px;
  border: none;
  background: var(--brand-btn-primary-bg);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s var(--phr-ease), transform .15s var(--phr-ease);
}
.phr-join-pill:hover { background: var(--brand-btn-primary-hover); transform: translateY(-1px); }

.phr-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--brand-text-on-dark);
  background: transparent;
  border: none;
}
.phr-hamburger span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.phr-hamburger span::before, .phr-hamburger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.phr-hamburger span::before { top: -6px; }
.phr-hamburger span::after { top: 6px; }

/* Mobile dropdown nav panel
   NOTE: display/open-close is handled entirely by the MOTION SYSTEM block
   near the top of this file (grid-template-rows + opacity + visibility) —
   this rule only supplies the panel's own visual styling. Padding lives on
   .phr-mobile-nav__inner (a wrapper the shared JS injects) rather than here,
   so the collapsed (0fr) state doesn't leave a residual visible sliver. */
.phr-mobile-nav {
  background: var(--brand-bg);
  border-top: 1px solid var(--brand-border);
}
.phr-mobile-nav a {
  display: block;
  padding: 13px 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--brand-text);
  border-bottom: 1px solid var(--brand-border);
  min-height: 44px;
}
.phr-mobile-nav a:last-child { border-bottom: none; }
.phr-mobile-nav a.phr-nav__shop { color: var(--brand-eyebrow); }

/* ── Hero ── full-bleed image with copy overlaid on a warm dark
   scrim (was a 2-column split with the photo boxed on the right;
   now the photo fills the entire hero edge to edge). ──────────── */
.phr-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(440px, 62vh, 620px);
  display: flex;
  align-items: center;
}
.phr-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.phr-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Light cream scrim (rgb of --brand-bg, #fcf4e5 — custom properties
   can't be composed inside rgba(), so the triplet is restated here),
   not a dark one: per the mockup, headline copy sits directly on a
   bright/light part of the photo (mountain sky) in dark espresso
   text, not light text on a dark overlay. The gradient guarantees
   that contrast even before the real "light sky" hero photo (see
   the hero-main placeholder note above) is dropped in. */
.phr-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(252,244,229,.92) 0%, rgba(252,244,229,.8) 32%, rgba(252,244,229,.5) 58%, rgba(252,244,229,.18) 78%, rgba(252,244,229,.02) 100%);
}

/* width:100% matters here: .phr-hero__inner is a flex item of .phr-hero
   (display:flex), and .phr-container's own "margin:0 auto" centering
   trick only works when the box is free to size itself — as a flex
   item it was shrinking to content width and then centering ITSELF
   in the hero via those auto margins, dragging the whole copy block
   (headline included) toward the middle of the section instead of
   pinning it left like every other section. Forcing full width here
   lets the max-width/margin:auto centering happen the normal way
   (a full-bleed row with a centered 1280px reading column), so the
   left-aligned copy inside actually sits at the column's left edge. */
.phr-hero__inner { position: relative; z-index: 1; width: 100%; padding: clamp(48px, 8vw, 88px) 0; }
.phr-hero__copy { max-width: 560px; }
.phr-hero__heading {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  color: var(--brand-text);
  margin-bottom: 20px;
}
.phr-hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--brand-text-muted);
  max-width: 46ch;
  margin-bottom: 30px;
}
.phr-hero__ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.phr-hero__ctas .phr-btn { min-width: 220px; }
.phr-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background:
    repeating-linear-gradient(135deg, var(--brand-bg-alt), var(--brand-bg-alt) 14px, var(--brand-bg-warm) 14px, var(--brand-bg-warm) 28px);
  color: var(--brand-text-muted);
}
.phr-placeholder__icon { color: var(--brand-eyebrow); opacity: .8; }
.phr-placeholder__label {
  font-family: var(--phr-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-text);
}
.phr-placeholder__dims { font-size: .74rem; color: var(--brand-text-subtle); }
.phr-placeholder__note { font-size: .72rem; color: var(--brand-text-subtle); max-width: 34ch; }

/* Small on-image name tag — sits on top of a REAL (even if temporary/
   stand-in) photo to label which file belongs in that slot, without
   replacing the image with a full striped placeholder box. Every
   image slot on this preview page carries one of these; see the
   image/icon checklist delivered alongside this file for the full
   list with suggested filenames and dimensions. */
.phr-placeholder__tag {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(26,20,16,.78);
  color: var(--jodi-ivory);
  font-family: var(--phr-sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 5px 10px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
}

/* ── Trust strip ───────────────────────────────────────────── */
.phr-trust-strip {
  background: var(--brand-surface);
  border-top: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
}
.phr-trust-strip__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 22px var(--phr-gutter);
  max-width: var(--phr-max);
  margin: 0 auto;
}
.phr-trust-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand-text);
  text-align: center;
}
.phr-trust-strip__item svg { flex-shrink: 0; color: var(--brand-eyebrow); }

/* ── Real icon images (Aug 31) — sizing/alignment for <img> icons from
   site_icon(), replacing inline SVG placeholders one spot at a time as
   Jodi supplies real artwork. Each rule mirrors the svg-selector rule
   it's replacing (same size/gap the placeholder used). ────────────── */
.phr-announce__icon { flex-shrink: 0; display: block; }
.phr-trust-strip__img { flex-shrink: 0; display: block; }
.phr-trust-point__img { display: block; }
.phr-quiz__img { display: block; }
.phr-highlights__img { display: block; }


/* ── Section shell helpers ─────────────────────────────────── */
.phr-section { padding: clamp(52px, 7vw, 100px) 0; }
.phr-section--alt { background: var(--brand-bg-alt); }
.phr-section--dark { background: var(--brand-primary-dark); color: var(--brand-text-on-dark); }
.phr-section-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}
.phr-section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin: 14px 0 12px;
  color: inherit;
}
.phr-section-head p { color: var(--brand-text-muted); font-size: 1.02rem; }
.phr-section--dark .phr-section-head p { color: var(--brand-text-on-dark-dim); }
/* Wider variant for headings too long to sit on one line at the
   default 640px max-width (e.g. "From Answers to a Ready-to-Order
   Plan") — a slightly smaller clamp keeps it to one line on normal
   screens while still wrapping cleanly on narrow phones instead of
   overflowing. */
.phr-section-head--wide { max-width: 760px; }
.phr-section-head--wide h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* ── Meals (Beef / Chicken) ── no card chrome — plain on the page
   background, image left / details right within each column, with a
   single thin vertical divider down the middle (same technique as
   the highlights strip further down the page). ─────────────────── */
.phr-meals__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.phr-meal-card {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.6vw, 30px);
  padding: 0 clamp(20px, 3vw, 40px);
}
.phr-meal-card:first-child { padding-left: 0; }
.phr-meal-card:last-child { padding-right: 0; }
.phr-meal-card + .phr-meal-card { border-left: 1px solid var(--brand-border); }
.phr-meal-card__media {
  position: relative;
  flex: 0 0 42%;
  max-width: 42%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brand-bg-alt);
}
.phr-meal-card__media img { width: 100%; height: 100%; object-fit: cover; }
.phr-meal-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding-top: 4px; }
.phr-meal-card__name { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.25; color: var(--brand-text); }
.phr-meal-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.phr-meal-card__price { font-size: 1.15rem; font-weight: 700; color: var(--brand-text); font-family: var(--phr-serif); }
.phr-meal-card__price-note { font-size: .78rem; color: var(--brand-text-subtle); }

/* Box-size dropdown — replaces the old pill-button group per the
   mockup's plain <select>. Arrow color is hardcoded to match
   --brand-text (#241810); a background-image can't reference a CSS
   custom property. */
.phr-qty-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 210px;
  min-height: 44px;
  padding: 10px 34px 10px 14px;
  border-radius: 0; /* matches the rectangular button shape */
  border: 1px solid var(--brand-border-strong);
  background:
    var(--brand-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23241810' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  font-family: var(--phr-sans);
  font-size: .85rem;
  font-weight: 600;
  color: var(--brand-text);
  cursor: pointer;
}
.phr-qty-select:disabled { opacity: .6; cursor: default; }

.phr-meal-card__actions { margin-top: 4px; }
.phr-meal-card__body > .phr-link-arrow { align-self: flex-start; margin-top: 2px; }

/* ── Subscription (dark espresso) ── plain two-up layout divided by
   one vertical rule, no boxed cards on the right (was two separate
   bordered "cards" — now two plain icon+text rows). ──────────────── */
/* Shorter top/bottom padding than the standard .phr-section rhythm —
   now that the illustration sits beside the heading instead of above
   it, the section is much shorter, so the generic section padding
   (52–100px) reads as too much air above/below a single compact row. */
.phr-section--sub {
  padding: clamp(60px, 8vw, 112px) 0;
  position: relative;
  background: var(--brand-primary-dark) url('/assets/images/subscription-section-bg.png') center top / cover no-repeat;
  overflow: hidden;
}
/* Dark scrim over the landscape photo so the white/copper text, the
   divider line, and the two offer rows all stay legible on top of it —
   photo is already quite dark, so this is a light touch, not a heavy
   overlay. */
.phr-section--sub::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,12,.42) 0%, rgba(20,14,12,.6) 100%);
  pointer-events: none;
}
.phr-section--sub > .phr-sub { position: relative; z-index: 1; }

.phr-sub {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 46px);
  align-items: center;
  /* Narrower than the standard 1280px content column (per direction: this
     section should feel tighter/more focused) — .phr-sub already carries
     .phr-container, so this just tightens that container's own max-width
     for this one section while the dark section background stays full-bleed.
     Pulled in further (980px → 840px) plus a smaller column gap, since on
     wide screens the wider version still left too much dead space on both
     sides and around the divider. */
  max-width: 840px;
}
/* Illustration sits to the LEFT of the heading/copy (not stacked above
   it) so the whole section reads as one compact horizontal banner
   instead of a tall block — this is what actually makes it "smaller". */
.phr-sub__content {
  display: flex;
  /* stretch (not center) so the illustration fills the full height of
     the row, matching the text block next to it, instead of floating
     as a small fixed-size box within extra vertical space. */
  align-items: stretch;
  gap: clamp(18px, 2.6vw, 28px);
  border-right: 1px solid var(--brand-border-on-dark);
  padding-right: clamp(24px, 4vw, 46px);
}
.phr-sub__illustration {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  width: clamp(160px, 20vw, 240px);
  min-height: 130px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brand-surface-mid);
}
.phr-sub__text h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.12; color: var(--brand-text-on-dark); margin: 0 0 12px; }
.phr-sub__text .phr-lead { color: var(--brand-text-on-dark-dim); font-size: 1.06rem; margin-bottom: 20px; max-width: 44ch; }

.phr-sub__offers { display: flex; flex-direction: column; gap: 22px; }
.phr-sub__offer { display: flex; align-items: flex-start; gap: 14px; }
.phr-sub__offer + .phr-sub__offer { border-top: 1px solid var(--brand-border-on-dark); padding-top: 22px; }
.phr-sub__offer-icon {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 8px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 55%, rgba(0,0,0,.14)),
    rgba(252,244,229,.07);
  color: var(--brand-accent);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 2px rgba(0,0,0,.35),
    0 2px 5px rgba(0,0,0,.35);
}
.phr-sub__offer-title { font-size: .92rem; font-weight: 700; color: var(--brand-text-on-dark); margin-bottom: 4px; }
.phr-sub__offer-pct { color: var(--brand-accent); }
.phr-sub__offer-desc { font-size: .82rem; color: var(--brand-text-on-dark-dim); margin-bottom: 2px; }
/* Honest scarcity line — only renders when $foundingSpotsLeft is a real
   number (see the PHP block near the top of homepage-redesign.php /
   subscription-redesign.php). Never shown with a fabricated count. */
.phr-sub__offer-scarcity {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--brand-primary-dark);
  background: var(--brand-accent);
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 14px;
}
.phr-sub__offer-scarcity strong { font-weight: 700; }
.phr-sub__disclosure {
  font-size: .72rem;
  line-height: 1.6;
  color: var(--brand-text-on-dark-dim);
  opacity: .8;
  margin-top: 4px;
}

/* ── Ingredient trust section ─────────────────────────────── */
.phr-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.phr-trust-grid__media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
}
.phr-trust-grid__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phr-trust-points { display: flex; flex-direction: column; gap: 18px; margin: 26px 0 30px; }
.phr-trust-point { display: flex; align-items: flex-start; gap: 14px; }
.phr-trust-point__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--jodi-sage);
  color: var(--jodi-sage-text);
  display: flex; align-items: center; justify-content: center;
}
.phr-trust-point__title { font-size: .95rem; font-weight: 700; color: var(--brand-text); margin-bottom: 3px; }
.phr-trust-point__desc { font-size: .85rem; color: var(--brand-text-muted); }

/* ── Quiz callout ──────────────────────────────────────────────
   One short horizontal process strip, edge-to-edge on the page
   background: [Intro + CTA] | Step 1 → Step 2 → Step 3.
   No card, no rounded rectangle, no drop shadow — just two thin
   divider lines top/bottom of the section, and one thin vertical
   divider between the intro zone and the steps. ~230px tall on
   desktop by design (content-driven, not a fixed box height). ── */
.phr-quiz {
  padding: clamp(26px, 3vw, 34px) 0;
  border-top: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
  background: var(--brand-bg);
}

.phr-quiz__row {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

/* Intro zone — ~34% of the row, left-aligned, divider on its right */
.phr-quiz__intro {
  flex: 0 0 clamp(240px, 33%, 360px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-right: clamp(28px, 4vw, 56px);
  border-right: 1px solid var(--brand-border);
  text-align: left;
}
.phr-quiz__heading {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.16;
  color: var(--brand-text);
  margin: 0;
}
.phr-quiz__copy { font-size: .87rem; line-height: 1.45; color: var(--brand-text-muted); margin: 0; }
.phr-quiz__btn { margin-top: 2px; }

/* Steps zone — remaining width, three equal columns + two arrow gaps */
.phr-quiz__steps {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.phr-quiz__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
/* Icon + number badge: number sits off to the left, slightly
   overlapping the icon's top-left corner (per reference). */
.phr-quiz__icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  margin-left: 12px; /* room for the badge to hang off the left edge */
}
.phr-quiz__num {
  position: absolute;
  top: -8px;
  left: -14px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-eyebrow); color: var(--brand-text-on-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--phr-serif); font-size: .78rem; font-weight: 600; flex-shrink: 0;
  z-index: 1;
}
.phr-quiz__icon { color: var(--brand-text); display: flex; align-items: center; justify-content: center; }
.phr-quiz__title { font-size: .88rem; font-weight: 700; color: var(--brand-text); line-height: 1.3; }
.phr-quiz__desc { font-size: .76rem; color: var(--brand-text-muted); line-height: 1.4; }
.phr-quiz__arrow { color: var(--brand-text); display: flex; align-items: center; justify-content: center; opacity: .55; }

/* Small tablet — intro spans full width above, steps stay in a row
   when there's room */
@media (max-width: 1024px) {
  .phr-quiz__row { flex-direction: column; align-items: stretch; gap: 26px; }
  .phr-quiz__intro {
    flex: none;
    padding-right: 0;
    padding-bottom: 22px;
    border-right: none;
    border-bottom: 1px solid var(--brand-border);
    max-width: none;
  }
  .phr-quiz__steps { width: 100%; }
}

/* Mobile — intro first, steps stacked vertically beneath, arrows
   rotate to point down between each step */
@media (max-width: 640px) {
  .phr-quiz__intro { align-items: flex-start; }
  .phr-quiz__btn { align-self: stretch; text-align: center; }
  .phr-quiz__steps {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
  }
  .phr-quiz__arrow { transform: rotate(90deg); }
}

/* ── Highlights strip (Treats / Reviews / Fulfillment, consolidated) ─
   Compact 3-column strip on the page background — not cards. Thin
   vertical dividers separate the columns; stacks to 1 column on mobile
   with a horizontal divider between stacked items instead.        ── */
.phr-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.phr-highlights__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0 36px;
  text-align: left;
}
.phr-highlights__col:first-child { padding-left: 0; }
.phr-highlights__col:last-child { padding-right: 0; }
.phr-highlights__col + .phr-highlights__col {
  border-left: 1px solid var(--brand-border);
}
.phr-highlights__title {
  font-size: 1.05rem;
  font-family: var(--phr-serif);
  color: var(--brand-text);
  line-height: 1.3;
}
.phr-highlights__desc { font-size: .84rem; color: var(--brand-text-muted); line-height: 1.5; }

/* Col 1: treat thumbnails */
.phr-highlights__thumbs { display: flex; gap: 10px; margin-top: 2px; }
.phr-highlights__thumb {
  width: 128px; height: 128px; border-radius: 14px;
  overflow: hidden;
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
  flex-shrink: 0;
  display: block;
}
.phr-highlights__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phr-highlights__thumb-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-text-subtle);
}

/* Col 2: review */
.phr-highlights__stars { color: var(--brand-eyebrow); font-size: .85rem; letter-spacing: 2px; }
.phr-highlights__review { display: flex; align-items: flex-start; gap: 12px; margin-top: 2px; }
.phr-highlights__review-photo {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--brand-bg-alt);
}
.phr-highlights__review-photo img { width: 100%; height: 100%; object-fit: cover; }
.phr-highlights__review-photo .phr-placeholder { padding: 0; gap: 0; }
.phr-highlights__quote { font-size: .86rem; color: var(--brand-text); line-height: 1.5; font-style: italic; }
.phr-highlights__cite { font-size: .78rem; font-weight: 600; color: var(--brand-text-muted); margin: 0; }

/* Col 3: fulfillment icons */
.phr-highlights__icons { display: flex; gap: 22px; margin-top: 2px; }
.phr-highlights__icon-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 600; color: var(--brand-text-muted);
  text-align: center;
}
.phr-highlights__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-bg-alt); color: var(--brand-eyebrow);
  display: flex; align-items: center; justify-content: center;
}

/* ── Community ─────────────────────────────────────────────── */
.phr-community__gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.phr-community__tile {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-text-subtle);
  overflow: hidden;
}
.phr-community__tile img { width: 100%; height: 100%; object-fit: cover; }
.phr-community__links { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }

.phr-community__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.phr-community__step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 14px 20px;
  min-width: 220px;
  transition: border-color .15s var(--phr-ease), box-shadow .15s var(--phr-ease), transform .15s var(--phr-ease);
}
.phr-community__step:hover {
  border-color: var(--brand-border-accent);
  box-shadow: var(--brand-shadow-sm);
  transform: translateY(-1px);
}
.phr-community__step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-bg-alt);
  color: var(--brand-eyebrow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--phr-serif);
  font-size: 1rem;
}
.phr-community__step-body { display: flex; flex-direction: column; gap: 2px; }
.phr-community__step-title { font-size: .88rem; font-weight: 700; color: var(--brand-text); }
.phr-community__step-desc { font-size: .76rem; color: var(--brand-text-muted); }
.phr-community__step-arrow { color: var(--brand-text-subtle); flex-shrink: 0; }

@media (max-width: 640px) {
  .phr-community__steps { flex-direction: column; align-items: stretch; }
  .phr-community__step { min-width: 0; }
  .phr-community__step-arrow { transform: rotate(90deg); align-self: center; }
}

/* ── Footer spacing reset (real footer.php is included as-is) ── */
.phr-footer-wrap { background: var(--brand-primary-dark); }

/* ── Motion respect ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .phr * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .phr-nav { display: none; }
  .phr-header__actions .phr-join-pill { display: none; }
  .phr-hamburger { display: inline-flex; }

  .phr-trust-grid { grid-template-columns: 1fr; }
  .phr-trust-grid__media { order: -1; }

  .phr-community__gallery { grid-template-columns: repeat(4, 1fr); }

  .phr-highlights { grid-template-columns: 1fr; gap: 28px; }
  .phr-highlights__col {
    padding: 0;
    border-left: none !important;
    padding-top: 28px;
  }
  .phr-highlights__col:first-child { padding-top: 0; }
  .phr-highlights__col + .phr-highlights__col { border-top: 1px solid var(--brand-border); }
}

@media (max-width: 860px) {
  .phr-meals__grid { grid-template-columns: 1fr; gap: 40px; }
  .phr-meal-card { padding: 0 !important; }
  .phr-meal-card + .phr-meal-card { border-left: none; border-top: 1px solid var(--brand-border); padding-top: 32px !important; }
  .phr-sub { grid-template-columns: 1fr; }
  .phr-sub__content {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--brand-border-on-dark);
    padding-bottom: 28px;
    margin-bottom: 28px;
    /* Side-by-side works at desktop widths, but the illustration and
       text block start crowding each other below ~860px — stack them
       instead, same as before this section went horizontal. */
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .phr-sub__illustration { width: 100%; max-width: 220px; }
}

@media (max-width: 640px) {
  .phr-trust-strip__row { grid-template-columns: repeat(2, 1fr); }
  .phr-announce__row { gap: 14px 22px; }
  .phr-community__gallery { grid-template-columns: repeat(3, 1fr); }
  .phr-highlights__thumbs { gap: 8px; }
  .phr-highlights__thumb { width: 112px; height: 112px; }
  .phr-highlights__icons { gap: 16px; }
  .phr-meal-card { flex-direction: column; align-items: stretch; }
  /* flex-basis (42%, set for the row layout) is read as a HEIGHT once
     .phr-meal-card switches to flex-direction:column above — same bug
     class as the quiz section fix earlier. Reset it here. */
  .phr-meal-card__media { flex: none; max-width: 220px; }

  /* Text now spans the full photo width on narrow screens. Anchor the
     copy to the TOP of the frame (where the light sky portion of the
     photo crops to) instead of the bottom, and switch the scrim to a
     top-down light fade so it still reads as "dark text on the sky",
     not a banner glued to the bottom of the image. */
  .phr-hero { min-height: clamp(420px, 78vh, 560px); }
  .phr-hero__scrim {
    background:
      linear-gradient(180deg, rgba(252,244,229,.94) 0%, rgba(252,244,229,.7) 45%, rgba(252,244,229,.15) 75%, rgba(252,244,229,.02) 100%);
  }
  .phr-hero__inner { display: flex; align-items: flex-start; min-height: 100%; }
  .phr-hero__copy { max-width: none; }
  .phr-hero__ctas { flex-direction: column; align-items: stretch; }
  .phr-hero__ctas .phr-btn { width: 100%; }
  .phr-header__inner { height: 66px; }
  .phr-logo img { height: 28px; }

  /* Keep the Scout chat launcher (from the real footer include) from
     overlapping product CTAs / the sticky header on small screens. */
  .phr :is(#scout-launcher, .scout-launcher, .scout-fab, .scout-widget-button) {
    transform: scale(.78);
    transform-origin: bottom right;
    right: 10px !important;
    bottom: 10px !important;
  }
}

@media (max-width: 420px) {
  .phr-community__gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   SHOP PAGE (preview/shop-redesign.php) — new components below.
   Shares every rule above (buttons, .phr-container, .phr-section,
   .phr-placeholder, .phr-meal-card, .phr-sub__offer-pct, header/nav,
   etc.) with the homepage preview; only shop-specific pieces live here.
══════════════════════════════════════════════════════════════════ */

/* ── Page title + category tabs ──────────────────────────────── */
.phr-shop-title { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.phr-shop-title h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); color: var(--brand-text); margin-bottom: 12px; }
.phr-shop-title p { color: var(--brand-text-muted); font-size: 1.02rem; }
.phr-shop-title-section { padding-bottom: 0; }

.phr-shop-tabs {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 52px);
  border-bottom: 1px solid var(--brand-border);
  margin: 0 auto;
  padding: 0 var(--phr-gutter);
  max-width: var(--phr-max);
}
.phr-shop-tabs__tab {
  padding: 16px 2px 18px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--brand-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.phr-shop-tabs__tab:hover { color: var(--brand-text); }
.phr-shop-tabs__tab[aria-current="page"] { color: var(--brand-eyebrow); border-bottom-color: var(--brand-eyebrow); }

/* ── "Not sure what to order?" CTA under the meal cards ──────── */
.phr-shop-mains__cta { text-align: center; margin-top: clamp(28px, 4vw, 44px); }
.phr-shop-mains__cta p { color: var(--brand-text-muted); font-size: .92rem; margin-bottom: 8px; }

/* ── "Subscribe & Save" link inside each meal card ───────────── */
.phr-meal-card__subscribe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand-eyebrow);
  margin-top: 4px;
}
.phr-meal-card__subscribe svg { flex-shrink: 0; }

/* ── "Never Run Out of Raw" banner ───────────────────────────── */
.phr-shop-banner {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3vw, 36px);
  max-width: 900px;
}
.phr-shop-banner__illustration {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  width: clamp(150px, 18vw, 210px);
  min-height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brand-surface-mid);
}
.phr-shop-banner__illustration img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phr-shop-banner__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.phr-shop-banner__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.phr-shop-banner__row h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--brand-text-on-dark); margin: 0; }
.phr-shop-banner__row .phr-btn { flex-shrink: 0; }
.phr-shop-banner__body > .phr-lead { color: var(--brand-text-on-dark-dim); font-size: .92rem; margin: 0; }
.phr-shop-banner__divider { border-top: 1px solid var(--brand-border-on-dark); margin: 2px 0; }
.phr-shop-banner__member { font-size: .82rem; color: var(--brand-text-on-dark-dim); margin: 0; }
.phr-shop-banner__member a { color: var(--brand-accent); text-decoration: underline; font-weight: 600; }

/* ── "The Complete Pack Box" (treats + bones + raw meat bundle) ─ */
.phr-boxclub {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
}
.phr-boxclub__media {
  flex: 0 0 auto;
  width: clamp(220px, 32vw, 380px);
  aspect-ratio: 4 / 3.2;
  border-radius: 14px;
  overflow: hidden;
  background: var(--brand-surface-mid);
  position: relative;
}
.phr-boxclub__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phr-boxclub__body { flex: 1; min-width: 0; }
.phr-boxclub__body h2 { margin: 6px 0 12px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--brand-text); }
.phr-boxclub__body > .phr-lead { color: var(--brand-text-muted); margin: 0 0 20px; max-width: 520px; }
.phr-boxclub__whatsinside { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.phr-boxclub__whatsinside li { display: flex; align-items: flex-start; gap: 12px; }
.phr-boxclub__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--brand-bg-alt);
  color: var(--brand-eyebrow);
  display: flex; align-items: center; justify-content: center;
}
.phr-boxclub__whatsinside strong { display: block; font-size: .9rem; color: var(--brand-text); margin-bottom: 2px; }
.phr-boxclub__whatsinside span { font-size: .82rem; color: var(--brand-text-muted); }
.phr-boxclub__price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.phr-boxclub__price { font-family: var(--phr-serif); font-size: 1.5rem; color: var(--brand-text); }
.phr-boxclub__price-sub { font-size: .78rem; color: var(--brand-text-muted); }
.phr-boxclub__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.phr-boxclub__soon { font-size: .85rem; font-style: italic; color: var(--brand-text-muted); line-height: 1.6; margin-bottom: 16px; max-width: 480px; }

/* ── Treats toolbar (heading + search / filter / sort) ───────── */
.phr-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.phr-shop-toolbar__title { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--brand-text); margin: 0; }
.phr-shop-toolbar__controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.phr-shop-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--brand-border-strong);
  border-radius: 0;
  padding: 9px 14px;
  background: var(--brand-bg);
  color: var(--brand-text-subtle);
}
.phr-shop-search input {
  border: none;
  background: transparent;
  font-family: var(--phr-sans);
  font-size: .85rem;
  color: var(--brand-text);
  outline: none;
  width: 160px;
}
.phr-shop-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--brand-border-strong);
  border-radius: 0;
  padding: 9px 16px;
  background: var(--brand-bg);
  color: var(--brand-text);
  font-family: var(--phr-sans);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.phr-shop-filter:hover { background: var(--brand-bg-alt); }
.phr-shop-sort { width: auto; max-width: none; min-height: 0; padding: 9px 34px 9px 14px; }

/* ── Product grid ─────────────────────────────────────────────── */
.phr-product-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.phr-product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--brand-bg);
}
.phr-product-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--brand-bg-alt); }
.phr-product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phr-product-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px; }
.phr-product-card__name { font-size: .9rem; line-height: 1.3; color: var(--brand-text); }
.phr-product-card__desc { font-size: .78rem; color: var(--brand-text-muted); flex: 1; }
.phr-product-card__price { font-family: var(--phr-serif); font-size: .95rem; font-weight: 700; color: var(--brand-text); margin-top: 2px; }
.phr-product-card .phr-btn { margin-top: 8px; min-height: 40px; padding: 9px 14px; font-size: .78rem; }

/* ── Choose How You Get It — compact row, icon beside text (not a
   full-width 3-column grid with icons centered above the text) ──── */
.phr-fulfillment-section .phr-section-head { margin-bottom: 24px; }
.phr-fulfillment-section .phr-section-head h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-top: 0; }
.phr-fulfillment-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  text-align: left;
  margin-bottom: 24px;
}
.phr-fulfillment-item { display: flex; align-items: flex-start; gap: 10px; max-width: 230px; }
.phr-fulfillment-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--brand-text);
  margin-top: 2px;
}
.phr-fulfillment-item h3 { font-size: .92rem; color: var(--brand-text); margin: 0 0 3px; }
.phr-fulfillment-item p { font-size: .78rem; line-height: 1.4; color: var(--brand-text-muted); margin: 0; }
.phr-fulfillment-cta { text-align: center; }

@media (max-width: 960px) {
  .phr-product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .phr-shop-banner { flex-direction: column; max-width: none; }
  .phr-shop-banner__illustration { width: 100%; max-width: 320px; min-height: 140px; }
  .phr-fulfillment-grid { flex-direction: column; align-items: center; gap: 20px; }
  .phr-fulfillment-item { max-width: 320px; }
  .phr-boxclub { flex-direction: column; align-items: flex-start; }
  .phr-boxclub__media { width: 100%; max-width: 380px; }
}

@media (max-width: 768px) {
  .phr-shop-toolbar { flex-direction: column; align-items: flex-start; }
  .phr-shop-toolbar__controls { width: 100%; }
  .phr-shop-search { flex: 1; }
  .phr-shop-search input { width: 100%; }
}

@media (max-width: 640px) {
  .phr-shop-tabs { gap: 20px; overflow-x: auto; justify-content: flex-start; }
  .phr-product-grid { grid-template-columns: repeat(2, 1fr); }
  .phr-shop-banner__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .phr-shop-banner__row .phr-btn { width: 100%; }
  /* Search/Filter/Sort were cramming onto one row and truncating the
     search placeholder ("Search Products" → "Search P") — stack them
     full-width instead of letting flex-wrap squeeze all three in. */
  .phr-shop-toolbar__controls { flex-direction: column; align-items: stretch; }
  .phr-shop-search, .phr-shop-filter, .phr-shop-sort { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT PAGE (preview/product-redesign.php) — new components below.
   Shares everything above (buttons, .phr-container, .phr-placeholder,
   .phr-fulfillment-*, .phr-product-card, .phr-shop-toolbar, header/
   nav, .phr-sub__offer-pct, etc.) with the homepage + shop previews.
══════════════════════════════════════════════════════════════════ */

.phr-pdp-breadcrumb { padding: 18px var(--phr-gutter) 0; font-size: .8rem; color: var(--brand-text-subtle); }
.phr-pdp-breadcrumb a { color: var(--brand-text-subtle); }
.phr-pdp-breadcrumb a:hover { color: var(--brand-text); }
.phr-pdp-breadcrumb span[aria-current] { color: var(--brand-text); }

.phr-pdp {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding: 20px var(--phr-gutter) clamp(48px, 6vw, 80px);
  align-items: start;
}

/* ── Gallery ──────────────────────────────────────────────────── */
.phr-pdp-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brand-bg-alt);
}
.phr-pdp-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phr-pdp-zoom {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  color: var(--brand-text);
  cursor: not-allowed;
}
.phr-pdp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.phr-pdp-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--brand-bg-alt);
  padding: 0;
  cursor: pointer;
}
.phr-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phr-pdp-thumb.is-active { border-color: var(--brand-eyebrow); }
.phr-pdp-thumb--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  text-align: center;
  color: var(--brand-text-subtle);
  background:
    repeating-linear-gradient(135deg, var(--brand-bg-alt), var(--brand-bg-alt) 8px, var(--brand-bg-warm) 8px, var(--brand-bg-warm) 16px);
  cursor: default;
}
.phr-pdp-thumb__label { font-size: .58rem; font-weight: 700; line-height: 1.2; color: var(--brand-text-subtle); }

/* ── Buy box ──────────────────────────────────────────────────── */
.phr-pdp-protein { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.phr-pdp-protein__label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--brand-text-subtle); text-transform: uppercase; }
.phr-pdp-protein__tabs { display: flex; }
.phr-pdp-protein__tab {
  padding: 8px 22px;
  font-size: .85rem;
  font-weight: 700;
  border: 1px solid var(--brand-border-strong);
  color: var(--brand-text);
  background: var(--brand-bg);
}
.phr-pdp-protein__tab + .phr-pdp-protein__tab { border-left: none; }
.phr-pdp-protein__tab.is-active { background: var(--brand-btn-primary-bg); border-color: var(--brand-btn-primary-bg); color: var(--brand-btn-primary-text); }

.phr-pdp-title { font-size: clamp(1.7rem, 2.8vw, 2.3rem); color: var(--brand-text); margin-bottom: 8px; }
.phr-pdp-subtitle { font-size: .96rem; color: var(--brand-text-muted); margin-bottom: 12px; }

.phr-pdp-rating { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--brand-text-muted); margin-bottom: 16px; }
.phr-pdp-rating__placeholder { font-size: .78rem; color: var(--brand-text-subtle); }

.phr-pdp-badges { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--brand-border); }
.phr-pdp-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--brand-text-muted); }
.phr-pdp-badge svg { color: var(--brand-eyebrow); flex-shrink: 0; }

.phr-pdp-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.phr-pdp-price__amount { font-family: var(--phr-serif); font-size: 1.7rem; font-weight: 700; color: var(--brand-text); }
.phr-pdp-price__note { font-size: .85rem; color: var(--brand-text-subtle); }

.phr-pdp-step { margin-bottom: 20px; }
.phr-pdp-step__label { display: block; font-size: .85rem; font-weight: 700; color: var(--brand-text); margin-bottom: 10px; }

.phr-pdp-qty { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.phr-pdp-qty__option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1.5px solid var(--brand-border-strong);
  cursor: pointer;
}
.phr-pdp-qty__option input { position: absolute; opacity: 0; pointer-events: none; }
.phr-pdp-qty__option.is-selected { border-color: var(--brand-eyebrow); background: var(--brand-bg-alt); }
.phr-pdp-qty__name { font-size: .88rem; font-weight: 700; color: var(--brand-text); }
.phr-pdp-qty__note { font-size: .74rem; color: var(--brand-text-subtle); }

.phr-pdp-purchase { display: flex; flex-direction: column; gap: 10px; border: 1.5px solid var(--brand-border-strong); padding: 4px; }
.phr-pdp-purchase__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--brand-text);
  cursor: pointer;
}
.phr-pdp-purchase__option input { accent-color: var(--brand-eyebrow); width: 16px; height: 16px; flex-shrink: 0; }
.phr-pdp-purchase__option.is-selected { background: var(--brand-bg-alt); }
.phr-pdp-purchase__option.is-disabled { color: var(--brand-text-subtle); cursor: default; }
.phr-pdp-purchase__option.is-disabled a { pointer-events: auto; color: var(--brand-accent); text-decoration: underline; font-weight: 700; }

.phr-pdp-buybox > .phr-btn { margin-top: 4px; margin-bottom: 14px; }
.phr-pdp-calc-link { display: inline-flex; margin-bottom: 22px; }

.phr-pdp-zip { border-top: 1px solid var(--brand-border); padding-top: 18px; }
.phr-pdp-zip__label { display: block; font-size: .85rem; font-weight: 700; color: var(--brand-text); margin-bottom: 10px; }
.phr-pdp-zip__row { display: flex; gap: 10px; margin-bottom: 14px; }
.phr-pdp-zip__row input {
  flex: 1;
  border: 1px solid var(--brand-border-strong);
  padding: 0 14px;
  font-family: var(--phr-sans);
  font-size: .85rem;
  color: var(--brand-text);
  background: var(--brand-bg);
}
.phr-pdp-zip__row .phr-btn { min-height: 0; padding: 10px 22px; }
.phr-pdp-zip__icons { display: flex; gap: 22px; flex-wrap: wrap; }
.phr-pdp-zip__icons span { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--brand-text-muted); line-height: 1.4; }
.phr-pdp-zip__icons svg { color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-pdp-zip__icons em { font-style: normal; font-weight: 700; color: var(--brand-text); }

/* ── Real {Protein}. Purposeful Nutrition. ───────────────────── */
.phr-pdp-nutrition { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.phr-pdp-nutrition__media { position: relative; aspect-ratio: 4 / 3.4; border-radius: 10px; overflow: hidden; background: var(--brand-bg-alt); }
.phr-pdp-nutrition__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phr-pdp-nutrition__body h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--brand-text); margin-bottom: 12px; }
.phr-pdp-nutrition__body > p { color: var(--brand-text-muted); font-size: .94rem; margin-bottom: 22px; }

.phr-pdp-accordion__item { border-top: 1px solid var(--brand-border); }
.phr-pdp-accordion__item:last-child { border-bottom: 1px solid var(--brand-border); }
.phr-pdp-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px;
  background: none;
  border: none;
  font-family: var(--phr-sans);
  font-size: .9rem;
  font-weight: 700;
  color: var(--brand-text);
  cursor: pointer;
  text-align: left;
}
.phr-pdp-accordion__icon { color: var(--brand-eyebrow); font-size: 1.1rem; font-weight: 700; flex-shrink: 0; }
.phr-pdp-accordion__panel { font-size: .86rem; color: var(--brand-text-muted); line-height: 1.6; }
/* padding lives on .phr-pdp-accordion__inner (a wrapper the shared JS injects
   around this panel's content) instead of on this element directly — this
   element's height is animated via grid-template-rows for the expand/collapse
   effect (see the MOTION SYSTEM block near the top of this file), and padding
   on the row-track element itself would leave a residual visible sliver even
   when collapsed to 0fr. */
.phr-pdp-accordion__panel p + p { margin-top: 8px; }
.phr-pdp-accordion__placeholder { font-size: .76rem; font-style: italic; color: var(--brand-text-subtle); }
.phr-pdp-analysis { border-collapse: collapse; width: 100%; max-width: 340px; margin-bottom: 10px; }
.phr-pdp-analysis td { padding: 6px 0; border-bottom: 1px solid var(--brand-border); font-size: .84rem; color: var(--brand-text); }
.phr-pdp-analysis td:last-child { text-align: right; color: var(--brand-text-muted); }

/* ── Feeding calculator ───────────────────────────────────────── */
.phr-pdp-calc { display: flex; align-items: stretch; gap: clamp(24px, 3.5vw, 40px); }
.phr-pdp-calc__illustration {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  width: clamp(150px, 18vw, 210px);
  min-height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brand-surface-mid);
}
.phr-pdp-calc__body { flex: 1; min-width: 0; }
.phr-pdp-calc__body h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: var(--brand-text-on-dark); margin: 0 0 6px; }
.phr-pdp-calc__body > .phr-lead { color: var(--brand-text-on-dark-dim); font-size: .92rem; margin-bottom: 18px; }
.phr-pdp-calc__controls { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.phr-pdp-calc__field { display: flex; flex-direction: column; gap: 6px; }
.phr-pdp-calc__field span:first-child { font-size: .78rem; font-weight: 700; color: var(--brand-text-on-dark-dim); }
.phr-pdp-calc__field-input { display: flex; align-items: center; gap: 8px; border: 1px solid var(--brand-border-on-dark); background: rgba(252,244,229,.05); padding: 0 12px; height: 42px; }
.phr-pdp-calc__field-input input { width: 70px; border: none; background: none; color: var(--brand-text-on-dark); font-family: var(--phr-sans); font-size: .9rem; }
.phr-pdp-calc__field-input span { font-size: .78rem; color: var(--brand-text-on-dark-dim); }
.phr-pdp-calc__field .phr-qty-select { background-color: transparent; border-color: var(--brand-border-on-dark); color: var(--brand-text-on-dark); min-height: 42px; max-width: none; }
.phr-pdp-calc__result { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border: 1px solid var(--brand-border-on-dark); padding: 14px 18px; margin-bottom: 20px; }
.phr-pdp-calc__result-title { font-size: .78rem; font-weight: 700; color: var(--brand-text-on-dark-dim); flex-shrink: 0; }
.phr-pdp-calc__result-grid { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.phr-pdp-calc__result-grid div { display: flex; flex-direction: column; gap: 2px; }
.phr-pdp-calc__result-grid span { font-size: .68rem; color: var(--brand-text-on-dark-dim); text-transform: uppercase; letter-spacing: .03em; }
.phr-pdp-calc__result-grid strong { font-size: .92rem; color: var(--brand-text-on-dark); }
.phr-pdp-calc__disclaimer { font-size: .72rem; color: var(--brand-text-on-dark-dim); opacity: .85; margin-top: 12px; max-width: 60ch; }

/* ── Reviews ──────────────────────────────────────────────────── */
.phr-pdp-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.phr-pdp-review { display: flex; gap: 14px; }
.phr-pdp-review__photo { position: relative; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; }
.phr-pdp-review__photo img { width: 100%; height: 100%; object-fit: cover; }
.phr-pdp-review__photo .phr-placeholder { padding: 0; gap: 0; }
.phr-pdp-review__body blockquote { font-size: .86rem; color: var(--brand-text); font-style: italic; margin: 6px 0 8px; line-height: 1.5; }
.phr-pdp-review__name { font-size: .84rem; font-weight: 700; color: var(--brand-text); }
.phr-pdp-review__meta { font-size: .76rem; color: var(--brand-text-muted); margin-bottom: 4px; }
.phr-pdp-review__verified { font-size: .72rem; font-weight: 600; color: var(--brand-eyebrow); }

.phr-product-grid--4 { grid-template-columns: repeat(4, 1fr); }

.phr-fulfillment-section--plain { padding-top: clamp(32px, 4vw, 48px); }

@media (max-width: 960px) {
  .phr-pdp-reviews { grid-template-columns: 1fr; gap: 20px; }
  .phr-product-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .phr-pdp { grid-template-columns: 1fr; }
  .phr-pdp-nutrition { grid-template-columns: 1fr; }
  .phr-pdp-nutrition__media { max-width: 420px; }
  .phr-pdp-calc { flex-direction: column; }
  .phr-pdp-calc__illustration { width: 100%; max-width: 320px; min-height: 140px; }
}

@media (max-width: 640px) {
  .phr-pdp-thumbs { grid-template-columns: repeat(3, 1fr); }
  .phr-pdp-qty { grid-template-columns: 1fr; }
  .phr-pdp-badges { flex-direction: column; gap: 8px; }
  .phr-pdp-calc__result { flex-direction: column; align-items: flex-start; }
  .phr-product-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════
   SUBSCRIPTION PAGE (preview/subscription-redesign.php) — new
   components below. Shares .phr-btn, .phr-section, .phr-section-head,
   .phr-placeholder, .phr-pdp-accordion (reused as-is for the FAQ)
   with the other three preview pages.
════════════════════════════════════════════════════════════════ */

/* ── 1. Hero: text-left, edge-to-edge photo right ─────────────── */
.phr-plan-hero {
  display: grid;
  grid-template-columns: minmax(320px, 640px) 1fr;
  align-items: stretch;
  min-height: clamp(420px, 56vh, 580px);
  background: var(--brand-bg);
}
.phr-plan-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px) clamp(40px, 6vw, 72px) var(--phr-gutter);
}
.phr-plan-hero__content > .phr-eyebrow { margin-bottom: 12px; }
.phr-plan-hero__title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  color: var(--brand-text);
  margin-bottom: 16px;
}
.phr-plan-hero__title span { color: var(--brand-eyebrow); }
.phr-plan-hero__lead { font-size: 1rem; color: var(--brand-text-muted); max-width: 42ch; margin-bottom: 26px; }
.phr-plan-hero__ctas { margin-bottom: 14px; }
.phr-plan-hero__ctas .phr-btn { min-width: 220px; }
.phr-plan-hero__manage { font-size: .84rem; color: var(--brand-text-muted); }
.phr-plan-hero__manage a { color: var(--brand-eyebrow); font-weight: 700; text-decoration: none; }
.phr-plan-hero__manage a:hover { text-decoration: underline; }
.phr-plan-hero__media { position: relative; overflow: hidden; background: var(--brand-bg-alt); min-height: 260px; }
.phr-plan-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .phr-plan-hero { grid-template-columns: 1fr; }
  .phr-plan-hero__media { min-height: 280px; }
  .phr-plan-hero__content { padding: clamp(32px, 6vw, 48px) var(--phr-gutter); }
}

/* ── 2. How-it-works icon row ──────────────────────────────────── */
.phr-plan-steps {
  border-top: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
  background: var(--brand-surface);
}
/* ul.phr-plan-steps__list (element + class): the sitewide ".phr ul"
   reset a few lines up resolves to the same specificity as a bare
   ".phr-plan-steps__list" class selector, and being a descendant
   selector it was winning that tie and silently zeroing out this
   list's padding/margin-inline:auto centering. Adding the element
   type here matches that specificity and wins on source order. */
ul.phr-plan-steps__list {
  list-style: none;
  margin: 0;
  padding: 22px var(--phr-gutter);
  max-width: var(--phr-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 4vw, 44px);
}
.phr-plan-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand-text);
  text-align: center;
  white-space: nowrap;
}
.phr-plan-steps__item svg { color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-plan-steps__sep { color: var(--brand-border-strong); font-size: .7rem; }
@media (max-width: 640px) {
  .phr-plan-steps__list { justify-content: center; }
  .phr-plan-steps__sep { display: none; }
}

/* ── 3. Savings cards ──────────────────────────────────────────── */
.phr-plan-savings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  max-width: 920px;
  margin: 0 auto;
}
.phr-plan-card {
  position: relative;
  border-radius: 12px;
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
}
.phr-plan-card--light { background: var(--brand-surface); border: 1px solid var(--brand-border); }
.phr-plan-card--dark {
  background: var(--brand-primary-dark) url('/assets/images/founding-pack-card-bg.jpg') center / cover no-repeat;
  color: var(--brand-text-on-dark);
  border: 1px solid var(--brand-border-on-dark);
}
.phr-plan-card--dark::before {
  /* Scrim over the mountain-cabin texture so the pricing/list/button text
     on top stays legible — the illustration itself is low-contrast
     copper-on-black, but this keeps it safe at every viewport. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(20,14,10,.55) 0%, rgba(20,14,10,.78) 55%, rgba(20,14,10,.88) 100%);
  pointer-events: none;
  z-index: 0;
}
.phr-plan-card--dark > *:not(.phr-plan-card__badge) { position: relative; z-index: 1; }
.phr-plan-card--dark > .phr-plan-card__badge { z-index: 2; }
.phr-plan-card__title { font-size: 1.2rem; margin: 0 0 4px; }
.phr-plan-card--dark .phr-plan-card__title { color: var(--brand-text-on-dark); }
.phr-plan-card__pct {
  font-family: var(--phr-serif);
  font-size: clamp(2.1rem, 3.4vw, 2.7rem);
  color: var(--brand-eyebrow);
  margin-bottom: 16px;
}
.phr-plan-card__list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.phr-plan-card__list li {
  position: relative;
  padding-left: 22px;
  font-size: .88rem;
  line-height: 1.4;
}
.phr-plan-card--light .phr-plan-card__list li { color: var(--brand-text-muted); }
.phr-plan-card--dark .phr-plan-card__list li { color: var(--brand-text-on-dark-dim); }
.phr-plan-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brand-eyebrow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
  background-color: var(--brand-eyebrow);
}
.phr-plan-card__note { font-size: .74rem; font-style: italic; color: var(--brand-text-on-dark-dim); margin: -8px 0 18px; line-height: 1.5; }
/* Honest scarcity line — only renders when $foundingSpotsLeft is a real
   number (see the PHP block near the top of subscription-redesign.php /
   homepage-redesign.php). Never shown with a fabricated count. */
.phr-plan-card__scarcity {
  display: inline-block;
  align-self: flex-start;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--brand-primary-dark);
  background: var(--brand-eyebrow);
  padding: 4px 10px;
  border-radius: 999px;
  margin: -8px 0 16px;
}
.phr-plan-card__scarcity strong { font-weight: 700; }
.phr-plan-card__badge {
  position: absolute;
  top: -16px; right: 22px;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--brand-eyebrow);
  color: var(--brand-primary-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  transform: rotate(8deg);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  border: 3px solid var(--brand-primary-dark);
}
.phr-plan-card__badge img { width: 20px; height: 20px; object-fit: contain; }
.phr-plan-card__badge span { font-size: .48rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; max-width: 54px; }
/* Real coin graphic: fill the badge circle edge-to-edge instead of
   the small-logo-plus-text placeholder layout above. */
.phr-plan-card__badge--coin { padding: 0; overflow: hidden; }
.phr-plan-card__badge--coin img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.phr-plan-card .phr-btn { margin-top: auto; }

@media (max-width: 700px) {
  .phr-plan-savings { grid-template-columns: 1fr; }
}

/* ── 4. Plan builder: dog card + numbered steps ────────────────── */
.phr-plan-builder {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(28px, 4vw, 56px);
  max-width: 980px;
  margin: 0 auto;
  align-items: start;
}
.phr-dogcard {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  overflow: hidden;
}
.phr-dogcard__progress { display: flex; align-items: center; gap: 6px; padding: 14px 18px 0; }
.phr-dogcard__progress span { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-border); }
.phr-dogcard__progress span.is-done {
  width: 16px; height: 16px; background: var(--brand-eyebrow); color: var(--brand-surface);
  display: flex; align-items: center; justify-content: center; margin-left: auto;
}
.phr-dogcard__profile { display: flex; align-items: center; gap: 12px; padding: 14px 18px 16px; }
.phr-dogcard__avatar {
  position: relative;
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-bg-alt);
}
.phr-dogcard__avatar .phr-placeholder { padding: 0; gap: 0; }
.phr-dogcard__avatar .phr-placeholder__icon { width: 16px; height: 16px; }
.phr-dogcard__name { font-family: var(--phr-serif); font-size: 1.05rem; color: var(--brand-text); }
.phr-dogcard__breed { font-size: .78rem; color: var(--brand-text-muted); }
.phr-dogcard__rows { padding: 0 18px; display: flex; flex-direction: column; }
.phr-dogcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--brand-border);
  font-size: .82rem;
}
.phr-dogcard__row-label { display: flex; align-items: center; gap: 8px; color: var(--brand-text-muted); }
.phr-dogcard__row-label svg { color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-dogcard__row-value { font-weight: 700; color: var(--brand-text); text-align: right; }
.phr-dogcard__footer {
  margin-top: 14px;
  background: var(--brand-primary-dark);
  color: var(--brand-text-on-dark);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .78rem;
}
.phr-dogcard__footer strong { font-size: 1rem; color: var(--brand-accent); }
.phr-dogcard__footer strong em { font-style: normal; font-size: .74rem; color: var(--brand-text-on-dark-dim); font-weight: 400; }

.phr-plan-orderedlist { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.phr-plan-orderedlist li { display: flex; align-items: center; gap: 12px; font-size: .95rem; font-weight: 600; color: var(--brand-text); }
.phr-plan-orderedlist__num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand-bg-alt);
  color: var(--brand-eyebrow);
  display: flex; align-items: center; justify-content: center;
  font-size: .84rem;
  font-weight: 800;
}
.phr-plan-builder__ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.phr-plan-builder__manual { font-size: .84rem; font-weight: 700; color: var(--brand-eyebrow); text-decoration: none; }
.phr-plan-builder__manual:hover { text-decoration: underline; }
.phr-plan-microrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 14px;
  border-top: 1px solid var(--brand-border);
}
.phr-plan-microrow span { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--brand-text-subtle); }
.phr-plan-microrow svg { color: var(--brand-eyebrow); flex-shrink: 0; }

@media (max-width: 860px) {
  .phr-plan-builder { grid-template-columns: 1fr; }
  .phr-dogcard { max-width: 420px; margin: 0 auto; }
}

/* ── Subtle dark-section mountain texture (decorative only) ────── */
.phr-plan-dark-texture {
  position: relative;
  background-image:
    linear-gradient(var(--brand-primary-dark), var(--brand-primary-dark)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='220' viewBox='0 0 600 220'%3E%3Cg fill='none' stroke='%23FCF8F2' stroke-opacity='0.06' stroke-width='2'%3E%3Cpath d='M0 200 L60 120 L110 170 L170 90 L230 180 L300 60 L360 170 L420 110 L480 190 L540 130 L600 200'/%3E%3Cpath d='M-20 220 L40 150 L80 190 L150 130 L190 200'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat-x;
  background-position: center, bottom;
  background-size: cover, 600px 220px;
}

/* ── 5. Ready-to-order summary card (on dark section) ───────────── */
.phr-plan-summary {
  background: var(--brand-surface);
  color: var(--brand-text);
  border-radius: 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 32px);
}
.phr-plan-summary__profile { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--brand-border); }
.phr-plan-summary__avatar { width: 44px; height: 44px; }
.phr-plan-summary__meta { font-size: .78rem; color: var(--brand-text-muted); }
.phr-plan-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--brand-border);
  font-size: .84rem;
}
.phr-plan-summary__label { display: flex; align-items: center; gap: 8px; color: var(--brand-text-muted); }
.phr-plan-summary__label svg { color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-plan-summary__value { font-weight: 700; color: var(--brand-text); }
.phr-plan-summary__value.is-accent { color: var(--brand-eyebrow); }
.phr-plan-summary__ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 18px; }
.phr-plan-summary__buyonce { font-size: .84rem; font-weight: 700; color: var(--brand-eyebrow); text-decoration: none; }
.phr-plan-summary__buyonce:hover { text-decoration: underline; }

/* ── 6. "You're Always in Control" dashboard mockup ─────────────── */
.phr-plan-dashboard {
  display: grid;
  grid-template-columns: 190px 1fr;
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  overflow: hidden;
}
.phr-plan-dashboard__nav {
  background: var(--brand-bg-alt);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--brand-border);
}
.phr-plan-dashboard__nav span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand-text-muted);
}
.phr-plan-dashboard__nav span svg { flex-shrink: 0; color: var(--brand-text-subtle); }
.phr-plan-dashboard__nav span.is-active { background: var(--brand-surface); color: var(--brand-text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.phr-plan-dashboard__nav span.is-active svg { color: var(--brand-eyebrow); }
.phr-plan-dashboard__main { padding: clamp(20px, 3vw, 30px); background: var(--brand-surface); }
.phr-plan-dashboard__order {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--brand-border);
}
.phr-plan-dashboard__order-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text-subtle); margin-bottom: 3px; }
.phr-plan-dashboard__order-value { display: block; font-size: .92rem; font-weight: 700; color: var(--brand-text); }
.phr-plan-dashboard__order-sub { display: block; font-size: .78rem; color: var(--brand-text-muted); margin-top: 1px; }
.phr-plan-dashboard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.phr-plan-dashboard__actions button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  font-family: var(--phr-sans);
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand-text);
  cursor: not-allowed;
}
.phr-plan-dashboard__actions button svg { color: var(--brand-eyebrow); flex-shrink: 0; }

@media (max-width: 640px) {
  .phr-plan-dashboard { grid-template-columns: 1fr; }
  .phr-plan-dashboard__nav { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--brand-border); }
  .phr-plan-dashboard__order { grid-template-columns: 1fr; }
  .phr-plan-dashboard__actions { grid-template-columns: 1fr; }
}

/* ── 7. "Protect Your Founding Pack Benefit" — inset rounded card ── */
.phr-plan-protect__card {
  background: var(--brand-primary-dark);
  color: var(--brand-text-on-dark);
  border-radius: 18px;
  overflow: hidden;
  padding: clamp(22px, 3vw, 32px) clamp(24px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.phr-plan-protect__copy { display: flex; align-items: center; gap: 20px; }
.phr-plan-protect__copy h3 { font-size: 1.1rem; color: var(--brand-text-on-dark); margin: 0 0 4px; }
.phr-plan-protect__copy p { font-size: .82rem; color: var(--brand-text-on-dark-dim); max-width: 46ch; margin: 0; line-height: 1.5; }
.phr-plan-protect__badge { flex-shrink: 0; width: 96px; height: 96px; }
.phr-plan-protect__badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.phr-plan-protect__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 10px;
}
.phr-plan-protect__actions button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--brand-border-accent);
  border-radius: 7px;
  background: transparent;
  color: var(--brand-text-on-dark);
  font-family: var(--phr-sans);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: not-allowed;
}
.phr-plan-protect__actions button svg { color: var(--brand-accent); flex-shrink: 0; }

@media (max-width: 700px) {
  .phr-plan-protect__card { flex-direction: column; align-items: flex-start; }
  .phr-plan-protect__actions { width: 100%; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .phr-plan-protect__actions { grid-template-columns: 1fr; }
}

/* ── 8. FAQ accordion — leading-icon label (adds to the shared
   .phr-pdp-accordion component used by the product page too) ──── */
.phr-pdp-accordion__label { display: flex; align-items: center; gap: 10px; }
.phr-pdp-accordion__label svg { color: var(--brand-eyebrow); flex-shrink: 0; }

/* ── 9. Closing CTA ──────────────────────────────────────────────── */
.phr-plan-closing {
  display: grid;
  grid-template-columns: minmax(320px, 620px) 1fr;
  align-items: stretch;
  min-height: clamp(220px, 30vh, 320px);
  background: var(--brand-bg-alt);
}
.phr-plan-closing__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 56px) clamp(32px, 5vw, 56px) var(--phr-gutter);
}
.phr-plan-closing__title { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.12; color: var(--brand-text); }
.phr-plan-closing__title span { color: var(--brand-eyebrow); }
.phr-plan-closing__ctas,
.phr-plan-closing__content .phr-btn { align-self: flex-start; }
.phr-plan-closing__media { position: relative; overflow: hidden; background: var(--brand-bg-warm); min-height: 220px; }
.phr-plan-closing__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .phr-plan-closing { grid-template-columns: 1fr; }
  .phr-plan-closing__media { min-height: 220px; }
  .phr-plan-closing__content { padding: clamp(32px, 6vw, 48px) var(--phr-gutter); }
}

/* ══════════════════════════════════════════════════════════════
   SHARED COMPONENTS — added for the second batch of pages
   (Raw 101, Our Story, Delivery, FAQ/Contact, Feeding Plan, Cart/
   Checkout, Confirmation, and the full account-area cluster:
   Customer Dashboard, Manage Subscription, My Dogs, Orders &
   Tracking, Pickup & Delivery, Payment Methods, Communication
   Preferences, Account Settings).

   These pages weren't built against a specific reference mockup —
   see each file's own top-of-file note — so this CSS favors reusing
   components already proven on the homepage/shop/product/subscription
   pages (.phr-section, .phr-btn, .phr-plan-dashboard, .phr-dogcard,
   .phr-pdp-accordion, etc.) over inventing new patterns, so the whole
   site reads as one consistent system once real mockups are matched.
════════════════════════════════════════════════════════════════ */

/* ── Simple page header (used by content pages: Raw 101, Our Story,
   Delivery — a compact title band instead of a full photo hero) ── */
.phr-page-head {
  background: var(--brand-bg-alt);
  border-bottom: 1px solid var(--brand-border);
  padding: clamp(40px, 6vw, 64px) 0 clamp(32px, 5vw, 48px);
  text-align: center;
}
.phr-page-head__eyebrow {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-eyebrow);
  margin-bottom: 10px;
}
.phr-page-head h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 0 0 12px; }
.phr-page-head p { max-width: 620px; margin: 0 auto; color: var(--brand-text-muted); font-size: 1.02rem; }

/* ── Forms (FAQ/Contact, Checkout, Pickup & Delivery, Payment
   Methods, Account Settings) ─────────────────────────────────── */
.phr-form { max-width: 100%; }
.phr-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.phr-form__row--single { grid-template-columns: 1fr; }
.phr-form__field { display: flex; flex-direction: column; gap: 6px; }
.phr-form__field label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--brand-text);
  letter-spacing: .01em;
}
.phr-form__field .phr-form__hint { font-weight: 400; color: var(--brand-text-subtle); font-size: .72rem; }
.phr-form__field input[type="text"],
.phr-form__field input[type="email"],
.phr-form__field input[type="tel"],
.phr-form__field select,
.phr-form__field textarea {
  font: inherit;
  font-size: .92rem;
  padding: 11px 13px;
  border: 1px solid var(--brand-border-strong);
  border-radius: 0;
  background: var(--brand-surface);
  color: var(--brand-text);
  width: 100%;
}
.phr-form__field input:focus,
.phr-form__field select:focus,
.phr-form__field textarea:focus {
  outline: 2px solid var(--brand-eyebrow);
  outline-offset: 1px;
}
.phr-form__field input:disabled,
.phr-form__field select:disabled,
.phr-form__field textarea:disabled {
  background: var(--brand-bg-alt);
  color: var(--brand-text-muted);
  cursor: not-allowed;
}
.phr-form__field textarea { resize: vertical; min-height: 110px; }
.phr-form__note {
  font-size: .78rem;
  color: var(--brand-text-subtle);
  font-style: italic;
  margin-top: -4px;
  margin-bottom: 18px;
}
@media (max-width: 640px) {
  .phr-form__row { grid-template-columns: 1fr; }
}

/* ── Toggle switch (Communication Preferences) ────────────────── */
.phr-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--brand-border);
}
.phr-toggle-row:first-child { padding-top: 0; }
.phr-toggle-row:last-child { border-bottom: none; }
.phr-toggle-row__text strong { display: block; font-size: .94rem; color: var(--brand-text); margin-bottom: 2px; }
.phr-toggle-row__text span { font-size: .8rem; color: var(--brand-text-muted); }
.phr-toggle {
  display: inline-block; /* fix: a bare <span> toggle used outside a flex
    container (e.g. inside a <td>) is inline by default and ignores
    width/height — same class of bug as the .phr-alloc-bar fix above. */
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--brand-border-strong);
  border: none;
  cursor: not-allowed;
  padding: 0;
  vertical-align: middle;
}
.phr-toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand-surface);
  transition: transform .15s ease;
}
.phr-toggle[aria-checked="true"] { background: var(--brand-eyebrow); }
.phr-toggle[aria-checked="true"]::after { transform: translateX(18px); }

/* ── Cart line-item table (Cart/Checkout) ─────────────────────── */
.phr-cart-table { width: 100%; border-collapse: collapse; }
.phr-cart-table th {
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-text-subtle);
  padding: 0 0 12px;
  border-bottom: 1px solid var(--brand-border-strong);
}
.phr-cart-table td { padding: 18px 0; border-bottom: 1px solid var(--brand-border); vertical-align: top; }
.phr-cart-item { display: flex; align-items: center; gap: 14px; }
.phr-cart-item__thumb { position: relative; width: 64px; height: 64px; flex-shrink: 0; background: var(--brand-bg-alt); }
.phr-cart-item__thumb .phr-placeholder { padding: 0; }
.phr-cart-item__thumb .phr-placeholder__icon { width: 18px; height: 18px; }
.phr-cart-item__name { font-weight: 700; color: var(--brand-text); font-size: .92rem; }
.phr-cart-item__meta { font-size: .78rem; color: var(--brand-text-muted); margin-top: 2px; }
.phr-cart-table .phr-qty-select { width: auto; min-width: 90px; }
.phr-cart-table td.is-price { font-weight: 700; color: var(--brand-text); text-align: right; white-space: nowrap; }
.phr-cart-remove {
  background: none; border: none; padding: 0; margin-top: 6px;
  font-size: .74rem; font-weight: 700; color: var(--brand-text-subtle);
  text-decoration: underline; cursor: not-allowed;
}
@media (max-width: 640px) {
  .phr-cart-table thead { display: none; }
  .phr-cart-table, .phr-cart-table tbody, .phr-cart-table tr, .phr-cart-table td { display: block; width: 100%; }
  .phr-cart-table td.is-price { text-align: left; padding-top: 4px; border-bottom: none; }
}

/* ── Order summary sidebar (Checkout, Confirmation) ───────────── */
.phr-order-summary {
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
  padding: 22px;
}
.phr-order-summary h3 { font-size: 1.05rem; margin: 0 0 16px; }
.phr-order-summary__row { display: flex; justify-content: space-between; font-size: .88rem; color: var(--brand-text-muted); padding: 7px 0; }
.phr-order-summary__row.is-total {
  border-top: 1px solid var(--brand-border-strong);
  margin-top: 6px; padding-top: 14px;
  font-size: 1.05rem; font-weight: 700; color: var(--brand-text);
}
.phr-order-summary__promo { display: flex; gap: 8px; margin: 16px 0; }
.phr-order-summary__promo input { flex: 1; }

/* ── Checkout two-column layout ────────────────────────────────── */
.phr-checkout { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.phr-checkout__step { margin-bottom: 34px; }
.phr-checkout__step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-primary-dark); color: var(--brand-text-on-dark);
  font-size: .78rem; font-weight: 700; margin-right: 8px;
}
.phr-checkout__step h2 { display: inline-flex; align-items: center; font-size: 1.15rem; margin: 0 0 16px; }
.phr-checkout__sidebar { position: sticky; top: 20px; }
@media (max-width: 900px) {
  .phr-checkout { grid-template-columns: 1fr; }
  .phr-checkout__sidebar { position: static; }
}

/* ── Confirmation banner ──────────────────────────────────────── */
.phr-confirm-banner { text-align: center; padding: clamp(48px, 7vw, 72px) 0 clamp(28px, 4vw, 40px); }
.phr-confirm-banner__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--brand-eyebrow); color: var(--brand-primary-dark);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.phr-confirm-banner h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 0 0 8px; }
.phr-confirm-banner p { color: var(--brand-text-muted); }
.phr-confirm-banner__order-num { font-weight: 700; color: var(--brand-text); }

/* ── Order tracking stepper (Orders & Tracking) ───────────────── */
.phr-tracker { display: flex; align-items: flex-start; padding: 8px 0 4px; }
.phr-tracker__step { flex: 1; text-align: center; position: relative; }
.phr-tracker__dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-surface); border: 2px solid var(--brand-border-strong);
  color: var(--brand-text-subtle);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px; font-size: .7rem; font-weight: 700;
  position: relative; z-index: 1;
}
.phr-tracker__step.is-done .phr-tracker__dot { background: var(--brand-eyebrow); border-color: var(--brand-eyebrow); color: var(--brand-primary-dark); }
.phr-tracker__step.is-current .phr-tracker__dot { border-color: var(--brand-eyebrow); color: var(--brand-eyebrow); }
.phr-tracker__step::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px;
  background: var(--brand-border-strong); z-index: 0;
}
.phr-tracker__step:first-child::before { display: none; }
.phr-tracker__step.is-done::before { background: var(--brand-eyebrow); }
.phr-tracker__label { font-size: .74rem; font-weight: 700; color: var(--brand-text-muted); }
.phr-tracker__step.is-current .phr-tracker__label,
.phr-tracker__step.is-done .phr-tracker__label { color: var(--brand-text); }

/* ── Order history card (Orders & Tracking, Manage Subscription) ─ */
.phr-order-card {
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.phr-order-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.phr-order-card__id { font-weight: 700; color: var(--brand-text); font-size: .95rem; }
.phr-order-card__date { font-size: .78rem; color: var(--brand-text-muted); }
.phr-order-card__status {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; background: var(--brand-bg-alt); color: var(--brand-text-muted);
}
.phr-order-card__status--active { background: var(--brand-eyebrow); color: var(--brand-primary-dark); }
.phr-order-card__items { font-size: .84rem; color: var(--brand-text-muted); margin-bottom: 12px; }
.phr-order-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Myth vs. Fact comparison (Raw 101) ───────────────────────── */
.phr-compare { display: flex; flex-direction: column; gap: 14px; }
.phr-compare__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--brand-border);
}
.phr-compare__cell { padding: 18px 22px; font-size: .9rem; line-height: 1.55; }
.phr-compare__cell--myth { background: var(--brand-bg-alt); color: var(--brand-text-muted); border-right: 1px solid var(--brand-border); }
.phr-compare__cell--fact { background: var(--brand-surface); color: var(--brand-text); }
.phr-compare__tag { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.phr-compare__cell--myth .phr-compare__tag { color: var(--brand-text-subtle); }
.phr-compare__cell--fact .phr-compare__tag { color: var(--brand-eyebrow); }
@media (max-width: 640px) {
  .phr-compare__row { grid-template-columns: 1fr; }
  .phr-compare__cell--myth { border-right: none; border-bottom: 1px solid var(--brand-border); }
}

/* ── Timeline (Our Story) ─────────────────────────────────────── */
.phr-timeline { position: relative; max-width: 640px; margin: 0 auto; padding-left: 28px; }
.phr-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--brand-border-strong); }
.phr-timeline__item { position: relative; padding-bottom: 32px; }
.phr-timeline__item:last-child { padding-bottom: 0; }
.phr-timeline__dot {
  position: absolute; left: -28px; top: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-eyebrow); border: 2px solid var(--brand-surface);
  box-shadow: 0 0 0 2px var(--brand-border-strong);
}
.phr-timeline__year { font-size: .74rem; font-weight: 800; letter-spacing: .05em; color: var(--brand-eyebrow); margin-bottom: 3px; }
.phr-timeline__item h3 { font-size: 1.05rem; margin: 0 0 4px; }
.phr-timeline__item p { font-size: .88rem; color: var(--brand-text-muted); margin: 0; }

/* ── Delivery zone list (Delivery page) ───────────────────────── */
.phr-zone-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.phr-zone-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--brand-border);
  font-size: .92rem; color: var(--brand-text);
}
.phr-zone-list li:last-child { border-bottom: none; }
.phr-zone-list .phr-zone-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; background: var(--brand-bg-alt); color: var(--brand-text-muted); flex-shrink: 0;
}
.phr-zone-list .phr-zone-tag--free { background: var(--brand-eyebrow); color: var(--brand-primary-dark); }

/* ── Account area page-head (Customer Dashboard + the whole account
   cluster) — a compact greeting bar that sits above the shared
   .phr-plan-dashboard sidebar/main shell already built for the
   subscription page, reused as-is for every account page. ──────── */
.phr-account-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.phr-account-head h1 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 0; }
.phr-account-head p { font-size: .86rem; color: var(--brand-text-muted); margin: 4px 0 0; }

/* ── Danger zone (Account Settings) ───────────────────────────── */
.phr-danger-zone {
  border: 1px solid rgba(180,60,40,.35);
  background: rgba(180,60,40,.05);
  padding: 20px 22px;
  margin-top: 30px;
}
.phr-danger-zone h3 { font-size: .98rem; color: #8a2f1f; margin: 0 0 6px; }
.phr-danger-zone p { font-size: .84rem; color: var(--brand-text-muted); margin: 0 0 14px; }
.phr-danger-zone .phr-btn {
  border-color: rgba(180,60,40,.5); color: #8a2f1f; background: transparent;
}
.phr-danger-zone .phr-btn[disabled], .phr-danger-zone .phr-btn[aria-disabled="true"] { opacity: .6; }

/* ── Quiz (Feeding Plan) ───────────────────────────────────────── */
.phr-quiz { max-width: 640px; margin: 0 auto; }
.phr-quiz__progress { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; }
.phr-quiz__progress-track { flex: 1; height: 4px; background: var(--brand-border); position: relative; overflow: hidden; }
.phr-quiz__progress-fill { position: absolute; inset: 0; width: 40%; background: var(--brand-eyebrow); }
.phr-quiz__progress-text { font-size: .72rem; font-weight: 700; color: var(--brand-text-subtle); white-space: nowrap; }
.phr-quiz__question { text-align: center; margin-bottom: 26px; }
.phr-quiz__question h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0 0 6px; }
.phr-quiz__question p { color: var(--brand-text-muted); font-size: .9rem; }
ul.phr-quiz__options { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.phr-quiz__option {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 14px; text-align: center;
  border: 1.5px solid var(--brand-border-strong);
  background: var(--brand-surface); cursor: pointer;
  font-size: .88rem; font-weight: 700; color: var(--brand-text);
}
.phr-quiz__option svg { color: var(--brand-eyebrow); }
.phr-quiz__option.is-selected { border-color: var(--brand-eyebrow); background: var(--brand-bg-alt); box-shadow: 0 0 0 1px var(--brand-eyebrow) inset; }
.phr-quiz__nav { display: flex; align-items: center; justify-content: space-between; }
.phr-quiz__back { background: none; border: none; font-size: .84rem; font-weight: 700; color: var(--brand-text-muted); cursor: pointer; }
@media (max-width: 480px) {
  ul.phr-quiz__options { grid-template-columns: 1fr; }
}

/* ============================================================
   ACCOUNT SHELL v2 — dark sidebar app-shell, matches Jodi's
   Aug 2026 mockups (Dashboard, My Subscription, My Dogs, Orders,
   Pickup & Delivery, Payment Methods, Comm Prefs, Account Settings).
   Supersedes the older cream .phr-plan-dashboard shell for these
   8 pages — that shell is left in place/unused rather than deleted
   in case any other page still references it.
============================================================ */
.phr-shell { display: flex; align-items: flex-start; min-height: 100vh; background: var(--brand-bg); }

/* ── Sidebar ──────────────────────────────────────────────── */
.phr-shell__sidebar {
  flex: 0 0 240px;
  width: 240px;
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background: var(--brand-surface-darker);
  color: var(--brand-text-on-dark);
  padding: 26px 18px 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.phr-shell__sidebar-scroll { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.phr-shell__watermark {
  position: absolute; left: -30px; bottom: -10px; width: 260px; height: auto;
  color: rgba(252,244,229,.06); pointer-events: none; z-index: 0;
}
.phr-shell .phr-logo { padding: 4px 6px 22px; margin-bottom: 6px; border-bottom: 1px solid var(--brand-border-on-dark); }
.phr-shell .phr-logo__mark, .phr-shell .phr-logo__word { color: var(--brand-text-on-dark); }
.phr-shell .phr-logo__place { color: var(--brand-eyebrow); }
.phr-shell__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.phr-shell__nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  border-radius: 7px;
  font-size: .85rem; font-weight: 600;
  color: var(--brand-text-on-dark-dim);
  transition: background .15s var(--phr-ease), color .15s var(--phr-ease);
}
.phr-shell__nav a svg { flex-shrink: 0; opacity: .85; }
.phr-shell__nav a:hover { background: rgba(252,244,229,.06); color: var(--brand-text-on-dark); }
.phr-shell__nav a[aria-current="page"] {
  background: var(--brand-btn-primary-bg);
  color: #fff;
}
.phr-shell__nav a[aria-current="page"] svg { opacity: 1; }
.phr-shell__signout {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--brand-border-on-dark);
}
.phr-shell__signout a {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 7px;
  font-size: .85rem; font-weight: 600; color: var(--brand-text-on-dark-dim);
}
.phr-shell__signout a:hover { background: rgba(252,244,229,.06); color: var(--brand-text-on-dark); }

/* ── Main column ──────────────────────────────────────────── */
.phr-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.phr-shell__topbar {
  background: var(--brand-bg);
  border-bottom: 1px solid var(--brand-border);
  padding: 0 clamp(20px, 3vw, 34px);
  min-height: 66px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.phr-shell__topbar-nav { display: flex; align-items: center; gap: 26px; }
.phr-shell__topbar-nav a { font-size: .84rem; font-weight: 600; color: var(--brand-text); }
.phr-shell__topbar-nav a:hover { color: var(--brand-eyebrow); }
.phr-shell__topbar-actions { display: flex; align-items: center; gap: 6px; }
.phr-bell { position: relative; }
.phr-bell__count {
  position: absolute; top: 4px; right: 4px; min-width: 15px; height: 15px; border-radius: 8px;
  background: var(--brand-eyebrow); color: #fff; font-size: .6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.phr-bell__dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-eyebrow); border: 1.5px solid var(--brand-surface); }
.phr-account-menu {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 20px;
  color: var(--brand-text); font-size: .82rem; font-weight: 700;
}
.phr-account-menu:hover { background: var(--brand-bg-alt); }
.phr-account-menu__avatar {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--brand-bg-alt); display: flex; align-items: center; justify-content: center;
  color: var(--brand-text-subtle);
}
.phr-shell__content {
  flex: 1; position: relative; padding: clamp(24px, 3vw, 34px) clamp(20px, 3vw, 34px) 60px;
  overflow: hidden;
}
.phr-shell__content-watermark {
  position: absolute; top: -10px; right: -20px; width: min(560px, 60%); height: auto;
  color: var(--brand-border); opacity: .5; pointer-events: none; z-index: 0;
}
.phr-shell__content > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .phr-shell { flex-direction: column; }
  .phr-shell__sidebar { position: static; width: 100%; flex: none; min-height: 0; }
  .phr-shell__topbar-nav { display: none; }
}

/* ── Reusable interior components ────────────────────────── */
.phr-panel {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 22px clamp(18px, 2.4vw, 26px);
  margin-bottom: 20px;
}
.phr-panel__title { font-size: 1.02rem; font-weight: 700; color: var(--brand-text); margin: 0 0 4px; }
.phr-panel__desc { font-size: .82rem; color: var(--brand-text-muted); margin: 0 0 16px; }
.phr-panel--tinted { background: var(--brand-bg-alt); border-color: var(--brand-border); }
.phr-panel--dark { background: var(--brand-surface-darker); border-color: transparent; color: var(--brand-text-on-dark); }
.phr-panel--dark .phr-panel__title { color: var(--brand-text-on-dark); }
.phr-panel--warn { background: #fbeee6; border-color: rgba(192,107,50,.35); }
.phr-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .phr-panel-grid { grid-template-columns: 1fr; } }
.phr-panel-grid--wide { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) { .phr-panel-grid--wide { grid-template-columns: 1fr; } }

.phr-page-head2 { margin-bottom: 22px; }
.phr-page-head2 h1 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 0 0 6px; color: var(--brand-text); }
.phr-page-head2 p { font-size: .86rem; color: var(--brand-text-muted); margin: 0; }
.phr-page-head2--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.phr-stat-strip { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--brand-border); border-radius: 10px; background: var(--brand-surface); margin-bottom: 20px; overflow: hidden; }
.phr-stat-strip__item { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-right: 1px solid var(--brand-border); }
.phr-stat-strip__item:last-child { border-right: none; }
.phr-stat-strip__item svg { color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-stat-strip__label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-text-subtle); }
.phr-stat-strip__value { display: block; font-size: .86rem; font-weight: 700; color: var(--brand-text); }

.phr-row-list { display: flex; flex-direction: column; }
.phr-row-list__item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--brand-border); }
.phr-row-list__item:last-child { border-bottom: none; }
.phr-row-list__label { font-size: .84rem; color: var(--brand-text-muted); }
.phr-row-list__value { font-size: .86rem; font-weight: 700; color: var(--brand-text); text-align: right; }
.phr-row-list__item.is-total { padding-top: 14px; border-top: 2px solid var(--brand-text); border-bottom: none; }
.phr-row-list__item.is-total .phr-row-list__label,
.phr-row-list__item.is-total .phr-row-list__value { font-size: 1rem; font-weight: 800; color: var(--brand-text); }

.phr-badge2 { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: .68rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.phr-badge2--ok { background: var(--jodi-sage); color: var(--jodi-sage-text); }
.phr-badge2--copper { background: var(--brand-bg-alt); color: var(--brand-eyebrow); border: 1px solid var(--brand-border-strong); }
.phr-badge2--dark { background: var(--brand-surface-darker); color: var(--brand-text-on-dark); }
.phr-badge2--muted { background: var(--brand-bg-alt); color: var(--brand-text-muted); }
.phr-badge2--warn { background: #fbeee6; color: #a04a1f; }

.phr-icon-row { display: flex; align-items: center; gap: 12px; }
.phr-icon-row__icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-bg-alt); color: var(--brand-eyebrow);
}
.phr-icon-row__body { flex: 1; min-width: 0; }
.phr-icon-row__title { font-size: .86rem; font-weight: 700; color: var(--brand-text); }
.phr-icon-row__desc { font-size: .78rem; color: var(--brand-text-muted); }
.phr-icon-row__desc a { color: var(--brand-eyebrow); font-weight: 600; text-decoration: none; }
.phr-icon-row__desc a:hover { text-decoration: underline; }

.phr-quick-actions a, .phr-quick-actions button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 4px; border-bottom: 1px solid var(--brand-border);
  font-size: .84rem; font-weight: 700; color: var(--brand-text); background: none; border-left: none; border-right: none; border-top: none;
}
.phr-quick-actions > *:last-child { border-bottom: none; }
.phr-quick-actions .phr-icon-row__icon { width: 32px; height: 32px; }
.phr-quick-actions .phr-chev { margin-left: auto; color: var(--brand-text-subtle); flex-shrink: 0; }

.phr-data-table2 { width: 100%; border-collapse: collapse; font-size: .82rem; }
.phr-data-table2 th { text-align: left; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-text-subtle); padding: 0 10px 10px; border-bottom: 1px solid var(--brand-border); }
.phr-data-table2 td { padding: 12px 10px; border-bottom: 1px solid var(--brand-border); color: var(--brand-text); vertical-align: middle; }
.phr-data-table2 tr:last-child td { border-bottom: none; }
.phr-data-table2 tr.is-selected td { background: var(--brand-bg-alt); }

.phr-pill-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.phr-pill-tabs button {
  padding: 8px 16px; border-radius: 20px; border: 1px solid var(--brand-border-strong);
  background: var(--brand-surface); font-size: .78rem; font-weight: 700; color: var(--brand-text);
}
.phr-pill-tabs button.is-active { background: var(--brand-surface-darker); color: var(--brand-text-on-dark); border-color: var(--brand-surface-darker); }

.phr-founding-coin {
  display: flex; align-items: center; gap: 10px;
}
.phr-founding-coin__mark {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-gradient-accent, var(--brand-eyebrow));
  color: #fff; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--brand-btn-primary-hover);
}
.phr-founding-coin__title { font-size: .84rem; font-weight: 800; color: var(--brand-eyebrow); }
.phr-founding-coin__sub { font-size: .74rem; color: var(--brand-text-muted); }

.phr-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--brand-border); }
.phr-danger-row:last-child { border-bottom: none; }
.phr-danger-row__title { font-size: .9rem; font-weight: 700; color: var(--brand-text); }
.phr-danger-row__title.is-critical { color: #a02f1f; }
.phr-danger-row__desc { font-size: .78rem; color: var(--brand-text-muted); margin-top: 2px; }

.phr-fulfillment-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .phr-fulfillment-tiles { grid-template-columns: 1fr; } }
.phr-fulfillment-tiles label {
  display: block; padding: 14px 14px; border-radius: 8px; border: 1.5px solid var(--brand-border);
  cursor: not-allowed; background: var(--brand-surface);
}
.phr-fulfillment-tiles label:has(input:checked) { border-color: var(--brand-eyebrow); background: var(--brand-bg-alt); }
.phr-fulfillment-tiles strong { display: block; font-size: .84rem; color: var(--brand-text); margin: 6px 0 2px; }
.phr-fulfillment-tiles span { display: block; font-size: .74rem; color: var(--brand-text-muted); }

/* ============================================================
   FEEDING PLAN QUIZ v2 — matches Jodi's Aug 2026 mockup
============================================================ */
.phr-fp-trustbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--brand-border); margin-bottom: 26px; }
.phr-fp-trustbar__badges { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.phr-fp-trustbar__badge { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--brand-text-muted); }
.phr-fp-trustbar__badge svg { color: var(--jodi-sage-text); flex-shrink: 0; }

.phr-fp-layout { display: grid; grid-template-columns: 210px 1fr 260px; gap: 20px; align-items: start; margin-bottom: 0; }
@media (max-width: 1100px) { .phr-fp-layout { grid-template-columns: 1fr; } }

.phr-fp-steps { display: flex; flex-direction: column; gap: 4px; }
.phr-fp-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px; border-radius: 9px; border: 1.5px solid transparent; }
.phr-fp-step__num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 800; color: var(--brand-text-muted);
  background: var(--brand-bg-alt); margin-top: 1px;
}
.phr-fp-step__label { font-size: .86rem; font-weight: 700; color: var(--brand-text); }
.phr-fp-step__sub { display: block; font-size: .72rem; color: var(--brand-text-subtle); margin-top: 1px; }
.phr-fp-step.is-active { border-color: var(--brand-border-strong); background: var(--brand-bg-alt); }
.phr-fp-step.is-active .phr-fp-step__num { background: var(--brand-btn-primary-bg); color: #fff; }
.phr-fp-step.is-active .phr-fp-step__sub { color: var(--brand-eyebrow); font-weight: 700; }
.phr-fp-step.is-done .phr-fp-step__num { background: var(--jodi-sage); color: var(--jodi-sage-text); }

.phr-fp-question { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 12px; padding: 22px clamp(18px,2.4vw,26px); margin-bottom: 16px; }
.phr-fp-question h2 { font-size: 1.15rem; margin: 0 0 4px; }
.phr-fp-question > p { font-size: .84rem; color: var(--brand-text-muted); margin: 0 0 16px; }
.phr-fp-options { display: flex; flex-direction: column; gap: 10px; }
.phr-fp-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 9px; border: 1.5px solid var(--brand-border);
  cursor: pointer; background: var(--brand-surface);
}
.phr-fp-option svg { color: var(--brand-text-muted); flex-shrink: 0; }
.phr-fp-option__label { flex: 1; font-size: .88rem; font-weight: 700; color: var(--brand-text); }
.phr-fp-option input { accent-color: var(--brand-eyebrow); width: 17px; height: 17px; flex-shrink: 0; }
.phr-fp-option:has(input:checked) { border-color: var(--brand-eyebrow); background: var(--brand-bg-alt); }
.phr-fp-option:has(input:checked) svg { color: var(--brand-eyebrow); }

.phr-fp-photo { position: relative; border-radius: 12px; overflow: hidden; min-height: 220px; background: var(--brand-bg-alt); }
.phr-fp-photo .phr-placeholder { position: absolute; inset: 0; }
.phr-fp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phr-fp-photo__nav { position: absolute; left: 16px; bottom: 16px; right: 16px; display: flex; justify-content: space-between; gap: 10px; z-index: 2; }

.phr-fp-serving { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 12px; padding: 22px 20px; text-align: center; }
.phr-fp-serving h3 { font-size: .98rem; margin: 0 0 16px; }
.phr-fp-serving__photo { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px; position: relative; overflow: hidden; background: var(--brand-bg-alt); }
.phr-fp-serving__photo .phr-placeholder { position: absolute; inset: 0; }
.phr-fp-serving__amount { font-size: 2rem; font-weight: 800; color: var(--brand-text); line-height: 1; }
.phr-fp-serving__amount-label { display: block; font-size: .74rem; font-weight: 700; color: var(--brand-eyebrow); text-transform: uppercase; letter-spacing: .03em; margin: 6px 0 12px; }
.phr-fp-serving__desc { font-size: .78rem; color: var(--brand-text-muted); margin: 0 0 16px; }
.phr-fp-serving__profile { text-align: left; border-top: 1px solid var(--brand-border); padding-top: 14px; }
.phr-fp-serving__profile-title { font-size: .74rem; font-weight: 800; text-transform: uppercase; color: var(--brand-text-subtle); margin-bottom: 8px; }
.phr-fp-serving__profile-row { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--brand-text); padding: 5px 0; }
.phr-fp-serving__profile-row svg { color: var(--brand-eyebrow); flex-shrink: 0; }

/* Dark brand variant — Jodi confirmed #312420 (--jodi-brown) for this card,
   Aug 2026. Mirrors the same on-dark treatment used elsewhere on the site
   (.phr-plan-card--dark, .phr-pdp-calc), so it matches rather than
   introducing a new dark surface. */
.phr-fp-serving--dark { background: var(--jodi-brown); border-color: var(--brand-border-on-dark); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.phr-fp-serving--dark .phr-fp-serving__photo { background: rgba(252,248,242,.1); }
.phr-fp-serving--dark .phr-fp-serving__amount { color: var(--brand-text-on-dark); }
.phr-fp-serving--dark .phr-fp-serving__desc { color: var(--brand-text-on-dark-dim); }
.phr-fp-serving--dark .phr-fp-serving__profile { border-top-color: var(--brand-border-on-dark); }
.phr-fp-serving--dark .phr-fp-serving__profile-title { color: var(--brand-text-on-dark-dim); }
.phr-fp-serving--dark .phr-fp-serving__profile-row { color: var(--brand-text-on-dark); }
.phr-fp-serving--dark .phr-fp-serving__profile-row input,
.phr-fp-serving--dark .phr-fp-serving__profile-row select {
  background: rgba(252,244,229,.05) !important;
  border-color: var(--brand-border-on-dark) !important;
  color: var(--brand-text-on-dark) !important;
}

.phr-fp-divider {
  margin: 26px 0; padding: 12px 20px; border-radius: 8px;
  background: var(--brand-surface-darker); color: var(--brand-eyebrow);
  text-align: center; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

.phr-fp-results h2 { text-align: center; font-size: clamp(1.5rem,2.6vw,2rem); margin: 0 0 24px; }
.phr-fp-results-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; margin-bottom: 30px; }
@media (max-width: 900px) { .phr-fp-results-grid { grid-template-columns: 1fr; } }
.phr-fp-results-photo { border-radius: 12px; overflow: hidden; position: relative; min-height: 320px; background: var(--brand-bg-alt); }
.phr-fp-results-photo .phr-placeholder { position: absolute; inset: 0; }
.phr-fp-results-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phr-fp-results-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.phr-fp-adjust-link { display: block; text-align: center; margin-top: 14px; font-size: .82rem; font-weight: 700; color: var(--brand-text-muted); }
.phr-fp-results-note { text-align: center; font-size: .76rem; color: var(--brand-text-subtle); margin-top: 10px; }

.phr-fp-bottom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .phr-fp-bottom-grid { grid-template-columns: 1fr; } }
.phr-fp-bottom-grid .phr-panel { margin-bottom: 0; text-align: center; }
.phr-fp-bottom-grid .phr-panel__title { font-size: .96rem; }
.phr-fp-calc-list { text-align: left; list-style: none; margin: 12px 0 0; padding: 0; font-size: .8rem; color: var(--brand-text-muted); }
.phr-fp-calc-list li { padding: 4px 0; }
.phr-fp-calc-list strong { color: var(--brand-text); }
.phr-fp-avatar { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 12px; position: relative; overflow: hidden; background: var(--brand-bg-alt); }
.phr-fp-avatar .phr-placeholder { position: absolute; inset: 0; }

/* Feeding Plan wizard — multi-dog additions (Aug 2026 real 5-step build).
   New classes only, scoped under .phr-fp- for consistency; everything
   else in this block reuses .phr-fp-question/.phr-fp-options/.phr-fp-
   option and .phr-panel/.phr-row-list as-is. */
.phr-fp-dogs { display: flex; flex-direction: column; gap: 14px; }
.phr-fp-dog-card { border: 1.5px solid var(--brand-border); border-radius: 10px; padding: 16px 18px; background: var(--brand-surface); }
.phr-fp-dog-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.phr-fp-dog-card__title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-text); }
.phr-fp-dog-card__remove { background: none; border: none; padding: 4px 6px; font: inherit; font-size: .74rem; font-weight: 700; color: var(--brand-text-subtle); cursor: pointer; }
.phr-fp-dog-card__remove:hover { color: #a02f1f; }
.phr-fp-dog-card__row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.phr-fp-dog-card__row:last-child { margin-bottom: 0; }
.phr-fp-dog-card__row label { flex: 0 0 92px; font-size: .76rem; font-weight: 700; color: var(--brand-text-muted); }
.phr-fp-dog-card__row input, .phr-fp-dog-card__row select { flex: 1; min-width: 0; font: inherit; font-size: .84rem; padding: 8px 10px; border: 1px solid var(--brand-border-strong); border-radius: 6px; background: var(--brand-surface); color: var(--brand-text); }
.phr-fp-dogs-error { margin: 12px 0 0; font-size: .8rem; font-weight: 700; color: #a02f1f; }

.phr-fp-dog-question { margin-bottom: 22px; }
.phr-fp-dog-question:last-child { margin-bottom: 0; }
.phr-fp-dog-question__title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-eyebrow); margin: 0 0 10px; }

.phr-fp-results-dogs { display: flex; flex-direction: column; gap: 20px; }

.phr-fp-step.is-done { cursor: pointer; }

/* ============================================================
   MARKETING PAGES v2 — shared by Raw 101, Our Story, Delivery
   (split hero, icon tabs, numbered sections, confidence band)
============================================================ */
.phr-split-hero { padding: clamp(28px,4vw,48px) 0; }
.phr-split-hero__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px,4vw,48px); align-items: center; }
@media (max-width: 900px) { .phr-split-hero__grid { grid-template-columns: 1fr; } }
.phr-split-hero__grid.is-reversed > :first-child { order: 2; }
.phr-split-hero h1 { font-size: clamp(1.9rem,3.4vw,2.6rem); line-height: 1.1; margin: 0 0 14px; }
.phr-split-hero p { font-size: .95rem; color: var(--brand-text-muted); margin: 0 0 20px; max-width: 46ch; }
.phr-split-hero__ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.phr-split-hero__tagline { display: flex; flex-direction: column; gap: 8px; }
.phr-split-hero__tagline svg { color: var(--brand-border-strong); }
.phr-split-hero__tagline span { font-size: .8rem; font-style: italic; color: var(--brand-eyebrow); }
.phr-split-hero__photo { position: relative; border-radius: 14px; overflow: hidden; min-height: 320px; background: var(--brand-bg-alt); }
.phr-split-hero__photo .phr-placeholder { position: absolute; inset: 0; }
.phr-split-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.phr-icon-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px,4vw,46px); padding: 20px 0; border-top: 1px solid var(--brand-border); border-bottom: 1px solid var(--brand-border); }
.phr-icon-tabs__item { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700; color: var(--brand-text-muted); text-align: center; }
.phr-icon-tabs__item svg { color: var(--brand-eyebrow); }

.phr-numbered-head { text-align: center; max-width: 640px; margin: 0 auto 30px; position: relative; }
.phr-numbered-head__eyebrow { display: block; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-eyebrow); margin-bottom: 8px; }
.phr-numbered-head h2 { font-size: clamp(1.3rem,2.4vw,1.7rem); margin: 0; }

.phr-basics-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .phr-basics-cards { grid-template-columns: 1fr; } }
.phr-basics-cards__card { border: 1px solid var(--brand-border); border-radius: 12px; padding: 26px 20px; text-align: center; }
.phr-basics-cards__icon { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--brand-border-strong); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--brand-eyebrow); }
.phr-basics-cards__card h3 { font-size: 1rem; margin: 0 0 6px; }
.phr-basics-cards__card p { font-size: .8rem; color: var(--brand-text-muted); margin: 0; }

.phr-weight-calc { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; justify-content: center; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 12px; padding: 22px 26px; }
.phr-weight-calc__field label { display: block; font-size: .74rem; font-weight: 700; color: var(--brand-text-muted); margin-bottom: 5px; }
.phr-weight-calc__field input, .phr-weight-calc__field select { font: inherit; font-size: .88rem; padding: 10px 12px; border: 1px solid var(--brand-border-strong); border-radius: 6px; background: var(--brand-surface); min-width: 150px; }
.phr-weight-calc__result { text-align: center; padding: 0 10px; }
.phr-weight-calc__result-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--brand-text-subtle); }
.phr-weight-calc__result-value { display: block; font-size: 1.15rem; font-weight: 800; color: var(--brand-text); }
.phr-weight-calc__result-sub { display: block; font-size: .7rem; color: var(--brand-text-subtle); }

.phr-transition-bowls { display: flex; align-items: center; justify-content: center; gap: clamp(8px,2vw,20px); flex-wrap: wrap; }
.phr-transition-bowls__step { text-align: center; }
.phr-transition-bowls__bowl { width: 78px; height: 78px; border-radius: 50%; border: 2.5px solid var(--brand-border-strong); position: relative; overflow: hidden; margin: 0 auto 10px; background: var(--brand-bg-alt); }
.phr-transition-bowls__bowl-fill { position: absolute; left: 0; bottom: 0; width: 100%; background: var(--brand-eyebrow); opacity: .8; }
.phr-transition-bowls__label { font-size: .8rem; font-weight: 700; color: var(--brand-text); }
.phr-transition-bowls__sub { font-size: .72rem; color: var(--brand-text-muted); }
.phr-transition-bowls__arrow { color: var(--brand-border-strong); flex-shrink: 0; }
@media (max-width: 700px) { .phr-transition-bowls__arrow { display: none; } }

.phr-confidence-band { background: var(--brand-surface-darker); color: var(--brand-text-on-dark); padding: clamp(30px,4vw,44px) 0; }
.phr-confidence-band__head { text-align: center; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-eyebrow); margin-bottom: 26px; }
.phr-confidence-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.phr-confidence-band__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .phr-confidence-band__grid { grid-template-columns: 1fr 1fr; } .phr-confidence-band__grid--3 { grid-template-columns: 1fr; } }
.phr-confidence-band__item { text-align: center; padding: 0 10px; }
.phr-confidence-band__item svg { color: var(--brand-eyebrow); margin-bottom: 10px; }
.phr-confidence-band__item strong { display: block; font-size: .88rem; margin-bottom: 4px; }
.phr-confidence-band__item span { display: block; font-size: .76rem; color: var(--brand-text-on-dark-dim); }

.phr-photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,44px); align-items: center; }
@media (max-width: 800px) { .phr-photo-row { grid-template-columns: 1fr; } }
.phr-photo-row__photo { position: relative; border-radius: 12px; overflow: hidden; min-height: 260px; background: var(--brand-bg-alt); }
.phr-photo-row__photo .phr-placeholder { position: absolute; inset: 0; }
.phr-photo-row__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.phr-ready-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--brand-bg-alt); border-radius: 14px; padding: clamp(20px,3vw,30px); }
.phr-ready-row h2 { font-size: clamp(1.3rem,2.2vw,1.6rem); margin: 0 0 4px; }
.phr-ready-row p { font-size: .82rem; color: var(--brand-text-muted); margin: 0; }
.phr-ready-row__products { display: flex; gap: 14px; }
.phr-ready-row__product { width: 130px; text-align: center; }
.phr-ready-row__product-photo { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 3/4; background: var(--brand-surface); margin-bottom: 8px; }
.phr-ready-row__product-photo .phr-placeholder { position: absolute; inset: 0; padding: 10px; }
.phr-ready-row__product-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phr-ready-row__product span { display: block; font-size: .74rem; font-weight: 700; margin-bottom: 6px; }

/* ============================================================
   OUR STORY v2 — extra section types
============================================================ */
.phr-photo-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .phr-photo-card-grid { grid-template-columns: 1fr; } }
.phr-photo-card-grid.is-6up { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .phr-photo-card-grid.is-6up { grid-template-columns: repeat(3, 1fr); } }
.phr-photo-card { text-align: center; }
.phr-photo-card__photo { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4/5; background: var(--brand-bg-alt); margin-bottom: 10px; }
.phr-photo-card__photo .phr-placeholder { position: absolute; inset: 0; padding: 10px; }
.phr-photo-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phr-photo-card__name { font-size: .92rem; font-weight: 700; color: var(--brand-text); }
.phr-photo-card__desc { font-size: .76rem; color: var(--brand-text-muted); margin-top: 2px; }

.phr-made-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px,4vw,44px); align-items: center; }
@media (max-width: 900px) { .phr-made-row { grid-template-columns: 1fr; } }
.phr-made-row__photo { position: relative; border-radius: 12px; overflow: hidden; min-height: 280px; background: var(--brand-bg-alt); }
.phr-made-row__photo .phr-placeholder { position: absolute; inset: 0; }
.phr-made-row__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phr-made-row__icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.phr-made-row__icons > div { text-align: left; }
.phr-made-row__icons svg { color: var(--brand-eyebrow); margin-bottom: 8px; }
.phr-made-row__icons strong { display: block; font-size: .84rem; margin-bottom: 3px; }
.phr-made-row__icons span { display: block; font-size: .74rem; color: var(--brand-text-muted); }

.phr-standfor-band { background: var(--brand-surface-darker); color: var(--brand-text-on-dark); padding: clamp(30px,4vw,44px) 0; }
.phr-standfor-band h2 { text-align: center; font-size: clamp(1.3rem,2.2vw,1.6rem); margin: 0 0 28px; }
.phr-standfor-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .phr-standfor-band__grid { grid-template-columns: 1fr 1fr; } }
.phr-standfor-band__item { text-align: center; padding: 0 18px; border-left: 1px solid var(--brand-border-on-dark); }
.phr-standfor-band__item:first-child { border-left: none; }
@media (max-width: 800px) { .phr-standfor-band__item:nth-child(odd) { border-left: none; } }
.phr-standfor-band__item svg { color: var(--brand-eyebrow); margin-bottom: 10px; }
.phr-standfor-band__item strong { display: block; font-size: .84rem; color: var(--brand-eyebrow); margin-bottom: 6px; }
.phr-standfor-band__item span { display: block; font-size: .76rem; color: var(--brand-text-on-dark-dim); }

.phr-journey-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 800px) { .phr-journey-row { grid-template-columns: 1fr 1fr; } }
.phr-journey-row__photo { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: var(--brand-bg-alt); margin-bottom: 10px; }
.phr-journey-row__photo .phr-placeholder { position: absolute; inset: 0; padding: 8px; }
.phr-journey-row__item h3 { font-size: .84rem; margin: 0 0 3px; }
.phr-journey-row__item p { font-size: .74rem; color: var(--brand-text-muted); margin: 0; }

.phr-meetpack { position: relative; border-radius: 12px; overflow: hidden; }
.phr-meetpack__cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; }
.phr-plan-closing--centered { grid-template-columns: 1fr; }
.phr-plan-closing--centered .phr-plan-closing__content { max-width: 560px; margin: 0 auto; }

/* ============================================================
   DELIVERY v2 — extra section types
============================================================ */
.phr-zip-check { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 12px; padding: 22px 26px; }
.phr-zip-check__field label { display: block; font-size: .78rem; font-weight: 700; color: var(--brand-text-muted); margin-bottom: 6px; }
.phr-zip-check__field { display: flex; gap: 10px; }
.phr-zip-check__field input { font: inherit; font-size: .9rem; padding: 10px 12px; border: 1px solid var(--brand-border-strong); border-radius: 6px; min-width: 140px; }
.phr-zip-check__status { display: flex; gap: 22px; flex-wrap: wrap; }
.phr-zip-check__status-item { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--brand-text); }
.phr-zip-check__status-item svg { color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-zip-check__status-item span { display: block; }
.phr-zip-check__status-item em { display: block; font-style: normal; font-size: .68rem; font-weight: 700; color: var(--jodi-sage-text); }

.phr-fulfill-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .phr-fulfill-cards { grid-template-columns: 1fr; } }
.phr-fulfill-cards__card { border: 1px solid var(--brand-border); border-radius: 12px; padding: 24px 20px; text-align: center; }
.phr-fulfill-cards__icon { width: 54px; height: 54px; border-radius: 50%; background: var(--brand-surface-darker); color: var(--brand-eyebrow); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.phr-fulfill-cards__card h3 { font-size: .96rem; margin: 0 0 4px; }
.phr-fulfill-cards__price { font-size: .8rem; font-weight: 700; color: var(--brand-eyebrow); margin-bottom: 10px; }
.phr-fulfill-cards__card p { font-size: .8rem; color: var(--brand-text-muted); margin: 0 0 16px; }

.phr-map-block { position: relative; border-radius: 12px; overflow: hidden; min-height: 220px; background: var(--brand-bg-alt); }
.phr-map-block .phr-placeholder { position: absolute; inset: 0; }
.phr-map-block .phr-pickup-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-iw-inner { font-family: inherit; padding: 2px 0; }
.map-iw-inner .map-popup__title { font-weight: 700; margin-bottom: 4px; }
.map-iw-inner .map-popup__meta { font-size: .82rem; color: #5a4f3e; margin-bottom: 2px; }
.map-iw-inner .map-popup__dir { display: inline-block; margin-top: 6px; font-size: .82rem; font-weight: 600; color: #7a1f1f; text-decoration: none; }
.map-iw-inner .map-popup__dir:hover { text-decoration: underline; }

.phr-pickup-list { display: flex; flex-direction: column; }
.phr-pickup-list__item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--brand-border); }
.phr-pickup-list__item:last-child { border-bottom: none; }
.phr-pickup-list__date { flex-shrink: 0; width: 54px; text-align: center; font-size: .72rem; font-weight: 800; color: var(--brand-eyebrow); text-transform: uppercase; }
.phr-pickup-list__body { flex: 1; }
.phr-pickup-list__body strong { display: block; font-size: .86rem; color: var(--brand-text); }
.phr-pickup-list__body span { display: block; font-size: .76rem; color: var(--brand-text-muted); }

.phr-step-row { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.phr-step-row__item { flex: 1; min-width: 150px; text-align: center; }
.phr-step-row__num { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-surface-darker); color: var(--brand-text-on-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .84rem; margin: 0 auto 10px; }
.phr-step-row__item h4 { font-size: .84rem; margin: 0 0 3px; }
.phr-step-row__item p { font-size: .74rem; color: var(--brand-text-muted); margin: 0; }

.phr-zone-pricing { display: flex; flex-direction: column; gap: 6px; }
.phr-zone-pricing li { display: flex; gap: 10px; font-size: .84rem; color: var(--brand-text-muted); padding: 4px 0; }
.phr-zone-pricing svg { color: var(--brand-eyebrow); flex-shrink: 0; margin-top: 2px; }
.phr-zone-pricing strong { color: var(--brand-text); }

/* ── FAQ / CONTACT v2 (rebuilt against Jodi's real mockup, Aug 2026) ──
   New components for faq-contact-redesign.php: a search-style split
   hero, an icon category row, a two-column FAQ layout (topic sidebar +
   accordion), and a two-column contact section (form + photo card).
   Reuses .phr-split-hero, .phr-pdp-accordion, .phr-form, .phr-btn,
   .phr-confidence-band, .phr-ready-row rather than inventing parallel
   patterns. ──────────────────────────────────────────────────────── */

.phr-search-row { display: flex; gap: 10px; max-width: 420px; }
.phr-search-row input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--brand-border); background: var(--brand-surface);
  font: inherit; font-size: .86rem; color: var(--brand-text);
}
.phr-search-row input:focus { outline: 2px solid var(--brand-eyebrow); outline-offset: 1px; }

.phr-cat-row {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 20px; padding: 22px 0; border-top: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
}
.phr-cat-row__item { display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: .82rem; font-weight: 700; color: var(--brand-text); text-align: center; flex: 1; min-width: 110px; }
.phr-cat-row__item svg { color: var(--brand-eyebrow); }

.phr-faq-layout { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px,4vw,44px); align-items: start; }
@media (max-width: 800px) { .phr-faq-layout { grid-template-columns: 1fr; } }
.phr-faq-sidebar__label {
  display: block; font-size: .74rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-eyebrow); margin: 0 0 10px;
}
.phr-faq-sidebar__label svg { color: var(--brand-eyebrow); vertical-align: -2px; margin-right: 6px; }
.phr-faq-sidebar__topics { list-style: none; margin: 0 0 30px; padding: 0; }
.phr-faq-sidebar__topics a {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 9px 4px 9px 14px; border-left: 3px solid transparent;
  font-size: .86rem; color: var(--brand-text-muted); text-decoration: none;
}
.phr-faq-sidebar__topics a svg { color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-faq-sidebar__topics a.is-active { border-left-color: var(--brand-eyebrow); color: var(--brand-text); font-weight: 700; }
.phr-faq-sidebar__topics a:hover { color: var(--brand-text); }
.phr-faq-sidebar__popular { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.phr-faq-sidebar__popular a { font-size: .82rem; color: var(--brand-text-muted); text-decoration: none; line-height: 1.4; }
.phr-faq-sidebar__popular a:hover { color: var(--brand-eyebrow); text-decoration: underline; }

.phr-contact-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px,4vw,40px); align-items: start; }
@media (max-width: 860px) { .phr-contact-layout { grid-template-columns: 1fr; } }
.phr-contact-card__photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: var(--brand-bg-alt); }
.phr-contact-card__photo .phr-placeholder { position: absolute; inset: 0; }
.phr-contact-card__rows { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; padding: 16px 18px; background: var(--brand-bg-alt); border-radius: 12px; }
.phr-contact-card__note { margin-top: 16px; font-size: .84rem; color: var(--brand-text-muted); }
.phr-contact-card__note strong { display: block; color: var(--brand-text); margin-bottom: 2px; }

.phr-form__checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.phr-form__checkbox-row input[type="checkbox"] { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-form__checkbox-row label { font-size: .78rem; font-weight: 700; color: var(--brand-text); display: block; margin-bottom: 2px; }
.phr-form__checkbox-row p { font-size: .72rem; color: var(--brand-text-muted); line-height: 1.5; margin: 0; }
.phr-form__legal-links { font-size: .76rem; margin: 2px 0 16px; }
.phr-form__legal-links a { color: var(--brand-text); text-decoration: underline; }
.phr-form__legal-links span { color: var(--brand-text-subtle); padding: 0 6px; }

/* ── CART / CHECKOUT v2 (rebuilt against Jodi's real mockup, Aug 2026) ──
   New components for cart-checkout-redesign.php. Reuses .phr-checkout,
   .phr-checkout__sidebar, .phr-order-summary, .phr-form,
   .phr-form__checkbox-row (from the FAQ rebuild), .phr-btn,
   .phr-icon-row, .phr-confidence-band, and the #2c6b3a green already
   established for "Available" status text on the Delivery page. ────── */

.phr-checkout-header .phr-header__actions { gap: 18px; font-size: .82rem; font-weight: 700; }
.phr-checkout-header__lock { display: flex; align-items: center; gap: 6px; color: var(--brand-text-muted); }
.phr-checkout-header__lock svg { color: var(--brand-eyebrow); }
.phr-checkout-header__return { color: var(--brand-eyebrow); text-decoration: underline; }

.phr-stepper { display: flex; align-items: flex-start; justify-content: center; padding: 22px 0 6px; }
.phr-stepper__step { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 90px; }
.phr-stepper__circle {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: .84rem; border: 2px solid var(--brand-border-strong);
  background: var(--brand-surface); color: var(--brand-text-muted); flex-shrink: 0;
}
.phr-stepper__step.is-done .phr-stepper__circle,
.phr-stepper__step.is-active .phr-stepper__circle { background: var(--brand-eyebrow); border-color: var(--brand-eyebrow); color: #fff; }
.phr-stepper__label { font-size: .78rem; font-weight: 700; color: var(--brand-text-muted); }
.phr-stepper__step.is-active .phr-stepper__label, .phr-stepper__step.is-done .phr-stepper__label { color: var(--brand-text); }
.phr-stepper__line { width: 56px; height: 2px; background: var(--brand-border-strong); margin-top: 15px; }
.phr-stepper__line.is-done { background: var(--brand-eyebrow); }

.phr-cart-line { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--brand-border); }
.phr-cart-line:first-child { padding-top: 0; }
.phr-cart-line__photo { width: 96px; flex-shrink: 0; position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--brand-bg-alt); }
.phr-cart-line__photo .phr-placeholder { position: absolute; inset: 0; padding: 6px; }
.phr-cart-line__body { flex: 1; min-width: 0; }
.phr-cart-line__top { display: flex; justify-content: space-between; gap: 12px; }
.phr-cart-line__name { font-weight: 700; font-size: .98rem; color: var(--brand-text); }
.phr-cart-line__meta { font-size: .8rem; color: var(--brand-text-muted); margin-top: 2px; }
.phr-cart-line__unit { font-size: .8rem; color: var(--brand-text-muted); text-align: right; white-space: nowrap; }
.phr-cart-line__row2 { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 12px; gap: 12px; }
.phr-cart-line__price { font-weight: 700; font-size: 1.02rem; text-align: right; white-space: nowrap; }
.phr-cart-line__price small { display: block; font-weight: 400; font-size: .72rem; color: var(--brand-text-muted); }
.phr-cart-line__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 12px; flex-wrap: wrap; }
.phr-cart-line__hint { font-size: .76rem; color: var(--brand-text-muted); display: flex; align-items: center; gap: 5px; }
.phr-cart-line__hint svg { color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-cart-line__remove { font-size: .78rem; color: var(--brand-eyebrow); text-decoration: underline; background: none; border: none; cursor: not-allowed; padding: 0; font: inherit; }

.phr-qty-stepper { display: inline-flex; align-items: center; gap: 12px; }
.phr-qty-stepper button {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--brand-border-strong);
  background: var(--brand-surface); color: var(--brand-text); font-size: 1rem; line-height: 1;
  cursor: not-allowed; display: flex; align-items: center; justify-content: center;
}
.phr-qty-stepper span { min-width: 16px; text-align: center; font-weight: 700; font-size: .9rem; }

.phr-purchase-toggle { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.phr-purchase-toggle__opt { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--brand-text-muted); cursor: not-allowed; }
.phr-purchase-toggle__opt input[type="radio"] { width: 16px; height: 16px; accent-color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-purchase-toggle__opt.is-selected { color: var(--brand-text); font-weight: 700; }
.phr-purchase-toggle select { margin: 6px 0 0 24px; max-width: 220px; }

.phr-info-banner { display: flex; align-items: flex-start; gap: 12px; background: var(--brand-bg-alt); border: 1px solid var(--brand-border); border-radius: 10px; padding: 14px 16px; margin: 22px 0; font-size: .84rem; color: var(--brand-text-muted); line-height: 1.5; }
.phr-info-banner svg { color: var(--brand-eyebrow); flex-shrink: 0; margin-top: 2px; }
.phr-info-banner strong { color: var(--brand-text); }
.phr-info-banner a { color: var(--brand-eyebrow); text-decoration: underline; }

.phr-addon-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 2px; border-top: 1px solid var(--brand-border); border-bottom: 1px solid var(--brand-border);
  cursor: not-allowed; margin-bottom: 32px; background: none; width: 100%; font: inherit;
}
.phr-addon-row__label { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; color: var(--brand-text); }
.phr-addon-row__label svg { color: var(--brand-eyebrow); }
.phr-addon-row__chevron { color: var(--brand-text-muted); }

.phr-zip-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 18px; }
.phr-zip-row .phr-form__field { flex: 1; margin: 0; }
.phr-fulfill-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.phr-fulfill-opt { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--brand-border); border-radius: 10px; padding: 14px 16px; cursor: not-allowed; }
.phr-fulfill-opt.is-selected { border-color: var(--brand-eyebrow); background: var(--brand-bg-alt); }
.phr-fulfill-opt input[type="radio"] { margin-top: 3px; accent-color: var(--brand-eyebrow); width: 16px; height: 16px; flex-shrink: 0; }
.phr-fulfill-opt__icon { color: var(--brand-eyebrow); flex-shrink: 0; margin-top: 1px; }
.phr-fulfill-opt__body { flex: 1; min-width: 0; }
.phr-fulfill-opt__title { font-weight: 700; font-size: .9rem; color: var(--brand-text); }
.phr-fulfill-opt__desc { font-size: .78rem; color: var(--brand-text-muted); margin-top: 2px; }
.phr-fulfill-opt__timing { font-size: .74rem; color: var(--brand-text-subtle); white-space: nowrap; flex-shrink: 0; text-align: right; }

.phr-order-summary__item { display: flex; gap: 10px; margin-bottom: 14px; }
.phr-order-summary__item-photo { width: 44px; height: 44px; flex-shrink: 0; position: relative; border-radius: 8px; overflow: hidden; background: var(--brand-bg-alt); }
.phr-order-summary__item-photo .phr-placeholder { position: absolute; inset: 0; padding: 2px; }
.phr-order-summary__item-body { flex: 1; min-width: 0; }
.phr-order-summary__item-name { font-weight: 700; font-size: .82rem; color: var(--brand-text); }
.phr-order-summary__item-meta { font-size: .72rem; color: var(--brand-text-muted); margin-top: 1px; }
.phr-order-summary__item-meta .is-ok { color: var(--jodi-sage-text); font-weight: 700; }
.phr-order-summary__item-price { font-size: .82rem; font-weight: 700; white-space: nowrap; color: var(--brand-text); }
.phr-order-summary__row .is-savings { color: var(--jodi-sage-text); }
.phr-order-summary__row .is-info svg { color: var(--brand-text-subtle); vertical-align: -2px; margin-left: 3px; }

.phr-founding-box { border: 1px solid var(--brand-border); border-radius: 10px; padding: 16px; margin-top: 18px; display: flex; gap: 10px; }
.phr-founding-box svg { color: var(--brand-eyebrow); flex-shrink: 0; margin-top: 2px; }
.phr-founding-box strong { display: block; font-size: .86rem; color: var(--brand-text); margin-bottom: 6px; }
.phr-founding-box ul { margin: 0 0 8px; padding-left: 16px; font-size: .76rem; color: var(--brand-text-muted); line-height: 1.6; }
.phr-founding-box a { font-size: .78rem; color: var(--brand-eyebrow); text-decoration: underline; }

.phr-trust-panel { background: var(--brand-bg-alt); border-radius: 12px; padding: 22px; margin-top: 18px; }
.phr-trust-panel h3 { font-size: 1.05rem; margin: 0 0 16px; }
.phr-trust-panel .phr-icon-row { margin-bottom: 16px; }
.phr-trust-panel .phr-icon-row:last-child { margin-bottom: 0; }
.phr-trust-panel .phr-icon-row__icon { background: var(--brand-surface); }

/* ── ORDER CONFIRMATION v2 (rebuilt against Jodi's real mockup, Aug 2026) ──
   Reuses .phr-checkout-header, .phr-checkout grid, .phr-panel,
   .phr-row-list, .phr-badge2, .phr-icon-row, .phr-confidence-band,
   .phr-form, .phr-form__checkbox-row. New: hero band, dark order
   tracker, and a vertical numbered step list. ─────────────────────── */

.phr-confirm-hero { position: relative; overflow: hidden; }
.phr-confirm-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 20px; min-height: 300px; }
@media (max-width: 800px) { .phr-confirm-hero__grid { grid-template-columns: 1fr; } }
.phr-confirm-hero__text { text-align: center; padding: 40px 24px; }
.phr-confirm-hero__check { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--jodi-sage-border); background: var(--jodi-sage); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--jodi-sage-text); }
.phr-confirm-hero__text h1 { font-size: clamp(1.7rem,3vw,2.3rem); margin: 0 0 10px; }
.phr-confirm-hero__text p { font-size: .92rem; color: var(--brand-text-muted); margin: 0; }
.phr-confirm-hero__order { color: var(--brand-eyebrow); font-weight: 700; margin-top: 16px; font-size: .92rem; }
.phr-confirm-hero__photo { position: relative; min-height: 260px; }
.phr-confirm-hero__photo .phr-placeholder { position: absolute; inset: 0; }

.phr-order-tracker { background: var(--brand-surface-darker); padding: clamp(24px,3vw,34px) 0; }
.phr-order-tracker__row { display: flex; align-items: flex-start; justify-content: center; }
.phr-order-tracker__step { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 160px; flex-shrink: 0; }
.phr-order-tracker__circle {
  width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--brand-border-on-dark);
  display: flex; align-items: center; justify-content: center; color: var(--brand-text-on-dark-dim); flex-shrink: 0;
}
.phr-order-tracker__step.is-active .phr-order-tracker__circle { background: var(--jodi-sage); border-color: var(--jodi-sage); color: var(--jodi-sage-text); }
.phr-order-tracker__label { font-size: .8rem; font-weight: 700; color: var(--brand-text-on-dark-dim); text-align: center; }
.phr-order-tracker__step.is-active .phr-order-tracker__label { color: var(--brand-text-on-dark); }
.phr-order-tracker__line { flex: 1; max-width: 70px; height: 2px; background: var(--brand-border-on-dark); margin-top: 25px; }
@media (max-width: 700px) { .phr-order-tracker__row { flex-wrap: wrap; gap: 14px; } .phr-order-tracker__line { display: none; } }

.phr-vstep { display: flex; flex-direction: column; }
.phr-vstep__item { display: flex; gap: 14px; padding-bottom: 22px; position: relative; }
.phr-vstep__item:not(:last-child)::before { content: ''; position: absolute; left: 20px; top: 42px; bottom: 0; width: 1px; background: var(--brand-border); }
.phr-vstep__icon {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--brand-border-strong); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--brand-eyebrow); background: var(--brand-surface);
}
.phr-vstep__body h4 { font-size: .9rem; margin: 0 0 3px; color: var(--brand-text); }
.phr-vstep__body p { font-size: .8rem; color: var(--brand-text-muted); margin: 0; }

.phr-fulfill-card { display: flex; gap: 16px; align-items: flex-start; }
.phr-fulfill-card__icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--brand-bg-alt); color: var(--brand-eyebrow);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.phr-fulfill-card__body { flex: 1; min-width: 0; }
.phr-fulfill-card__body h4 { font-size: 1rem; margin: 0 0 10px; }

/* ── ACCOUNT PAGES v2 — Dashboard-specific pieces (Aug 2026) ──────────
   Layered on top of "ACCOUNT SHELL v2". Reuses .phr-panel, .phr-panel-
   grid, .phr-row-list, .phr-icon-row, .phr-quick-actions, .phr-data-
   table2, .phr-founding-coin, .phr-danger-row, .phr-badge2, .phr-cart-
   line/.phr-qty-stepper (checkout), .phr-ready-row (marketing pages).
   New: a light "subscription at a glance" step strip, a dog profile
   card, and a recipe-allocation bar list. ─────────────────────────── */

.phr-glance { display: flex; align-items: flex-start; gap: 2px; }
.phr-glance__step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 90px; text-align: center; }
.phr-glance__circle { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--brand-border-strong); display: flex; align-items: center; justify-content: center; color: var(--brand-text-muted); background: var(--brand-surface); flex-shrink: 0; }
.phr-glance__step.is-done .phr-glance__circle { background: var(--brand-surface-darker); border-color: var(--brand-surface-darker); color: #fff; }
.phr-glance__label { font-size: .8rem; font-weight: 700; color: var(--brand-text); }
.phr-glance__value { font-size: .7rem; color: var(--brand-text-subtle); }
.phr-glance__chev { color: var(--brand-border-strong); flex-shrink: 0; margin-top: 14px; }
@media (max-width: 700px) { .phr-glance { flex-wrap: wrap; } .phr-glance__chev { display: none; } }

.phr-dog-card { display: flex; gap: 18px; flex-wrap: wrap; }
.phr-dog-card__photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; position: relative; background: var(--brand-bg-alt); flex-shrink: 0; }
.phr-dog-card__photo .phr-placeholder { position: absolute; inset: 0; padding: 4px; }
.phr-dog-card__body { flex: 1; min-width: 180px; }
.phr-dog-card__body h3 { font-size: 1.15rem; margin: 0 0 8px; }
.phr-dog-card__body .phr-row-list { margin: 6px 0 14px; max-width: 280px; }
.phr-dog-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.phr-dog-card__add {
  border: 1.5px dashed var(--brand-border-strong); border-radius: 12px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; color: var(--brand-text-muted); font-size: .84rem;
  font-weight: 700; min-height: 160px; cursor: not-allowed; background: none; width: 100%; font-family: inherit;
}
.phr-dog-card__add-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-bg-alt); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--brand-eyebrow); }

.phr-alloc-bar { display: flex; flex-direction: column; gap: 14px; }
.phr-alloc-bar__row { display: grid; grid-template-columns: 64px 1fr 38px; align-items: center; gap: 10px; font-size: .82rem; color: var(--brand-text); }
.phr-alloc-bar__track { display: block; height: 8px; border-radius: 6px; background: var(--brand-bg-alt); overflow: hidden; }
.phr-alloc-bar__fill { display: block; height: 100%; border-radius: 6px; background: var(--brand-eyebrow); }

/* ── PICKUP & DELIVERY v2 (rebuilt against Jodi's real mockup, Aug 2026) ──
   Layered on the account shell. Reuses .phr-panel, .phr-panel-grid--wide,
   .phr-page-head2, .phr-fulfill-opt/.phr-fulfill-options, .phr-zip-row,
   .phr-form (+.phr-form__note), .phr-addon-row, .phr-row-list, .phr-badge2,
   .phr-toggle-row/.phr-toggle (pre-existing switch component), .phr-btn,
   .phr-panel--dark + .phr-confidence-band__grid--3/__item (reused inside a
   boxed panel instead of full-bleed), .phr-panel--tinted. New pieces below
   are small and purpose-built: a 2-up "change scope" row, a pickup-event
   map card, a saved-address grid, a collapsed fulfillment-option box, and
   a Current→Proposed compare grid. ─────────────────────────────────────── */

.phr-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 10px; }
@media (max-width: 640px) { .phr-choice-row { grid-template-columns: 1fr; } }
.phr-choice-row .phr-fulfill-opt { flex-direction: column; gap: 6px; }
.phr-choice-row .phr-fulfill-opt input[type="radio"] { margin: 0 0 4px; }

.phr-map-card { border: 1px solid var(--brand-border); border-radius: 10px; padding: 16px; }
.phr-map-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.phr-map-card__head h4 { font-size: .94rem; margin: 0; color: var(--brand-text); }
.phr-map-card__photo { position: relative; aspect-ratio: 16/11; border-radius: 8px; overflow: hidden; background: var(--brand-bg-alt); margin-bottom: 14px; }
.phr-map-card__photo .phr-placeholder { position: absolute; inset: 0; }
.phr-map-card__filters { display: flex; gap: 10px; margin-bottom: 12px; }
.phr-map-card__filters .phr-form__field { flex: 1; margin: 0; }
.phr-map-card__events { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.phr-map-card__event-avail { font-size: .7rem; font-weight: 700; color: var(--jodi-sage-text); white-space: nowrap; }
.phr-map-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.phr-map-card__footer a { font-size: .82rem; color: var(--brand-eyebrow); text-decoration: underline; }

.phr-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .phr-address-grid { grid-template-columns: 1fr; } }
.phr-address-card { border: 1px solid var(--brand-border); border-radius: 10px; padding: 16px; display: flex; gap: 14px; position: relative; }
.phr-address-card__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-bg-alt); color: var(--brand-eyebrow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.phr-address-card__body { flex: 1; min-width: 0; padding-right: 66px; }
.phr-address-card__body strong { display: block; font-size: .9rem; color: var(--brand-text); margin-bottom: 4px; }
.phr-address-card__body p { margin: 0; font-size: .8rem; color: var(--brand-text-muted); line-height: 1.5; }
.phr-address-card__badge { position: absolute; top: 16px; right: 16px; }
.phr-address-card__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.phr-address-card__actions button { display: flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; background: none; border: none; padding: 0; cursor: not-allowed; font-family: inherit; }
.phr-address-card__actions button.is-edit { color: var(--brand-eyebrow); }
.phr-address-card__actions button.is-remove { color: #a02f1f; }
.phr-address-card__actions button.is-default { color: var(--brand-text-muted); }
.phr-add-tile { border: 1.5px dashed var(--brand-border-strong); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--brand-text-muted); font-size: .84rem; font-weight: 700; min-height: 170px; cursor: not-allowed; background: none; width: 100%; font-family: inherit; }
.phr-add-tile__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-bg-alt); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--brand-eyebrow); }

.phr-fulfill-collapse { border: 1px solid var(--brand-border); border-radius: 10px; padding: 4px 14px; margin-bottom: 12px; }
.phr-fulfill-collapse .phr-addon-row { border: none; margin-bottom: 0; padding: 14px 2px; }

.phr-status-ok { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--brand-text); line-height: 1.4; }
.phr-status-ok svg { color: var(--jodi-sage-text); flex-shrink: 0; margin-top: 1px; }

.phr-compare__grid { display: grid; grid-template-columns: 1fr 30px 1fr; gap: 10px; align-items: start; margin-bottom: 18px; }
@media (max-width: 520px) { .phr-compare__grid { grid-template-columns: 1fr; } .phr-compare__arrow { display: none; } }
.phr-compare__col-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-text-subtle); margin-bottom: 8px; }
.phr-compare__col strong { display: block; font-size: .88rem; color: var(--brand-text); margin-bottom: 4px; }
.phr-compare__col span { display: block; font-size: .78rem; color: var(--brand-text-muted); line-height: 1.5; }
.phr-compare__col .phr-compare__cost { margin-top: 6px; font-weight: 700; color: var(--brand-text); font-size: .8rem; }
.phr-compare__arrow { display: flex; align-items: center; justify-content: center; color: var(--brand-text-subtle); margin-top: 26px; }

/* ── PAYMENT METHODS v2 (rebuilt against Jodi's real mockup, Aug 2026) ──
   Reuses .phr-panel/.phr-panel-grid--wide, .phr-form(+__row/__field),
   .phr-info-banner, .phr-badge2, .phr-row-list, .phr-compare__grid (from
   Pickup & Delivery), .phr-btn, .phr-panel--warn, .phr-confidence-band__
   grid--3/__item. New: a saved-card row, an assignment row-with-button,
   a small inline warning banner, and a compact radio billing-address
   list. ─────────────────────────────────────────────────────────────── */

.phr-form__row--4 { grid-template-columns: 1fr 1.5fr .8fr .8fr; }
@media (max-width: 820px) { .phr-form__row--4 { grid-template-columns: 1fr 1fr; } }

.phr-pay-card { border: 1px solid var(--brand-border); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.phr-pay-card__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.phr-pay-card__left { display: flex; align-items: center; gap: 14px; }
.phr-pay-card__icon { color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-pay-card__number { font-weight: 700; font-size: .92rem; color: var(--brand-text); letter-spacing: .02em; }
.phr-pay-card__meta { font-size: .78rem; color: var(--brand-text-muted); margin-top: 2px; }
.phr-pay-card__badges { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.phr-pay-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--brand-border); }
.phr-pay-card__foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.phr-pay-card__foot-links button { font-weight: 700; color: var(--brand-eyebrow); background: none; border: none; padding: 0; cursor: not-allowed; font: inherit; font-size: .8rem; }
.phr-pay-card__foot-links button.is-remove { color: #a02f1f; }
.phr-pay-card__foot-note { color: var(--brand-text-subtle); font-style: italic; font-size: .76rem; text-align: right; }

.phr-assign-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--brand-border); }
.phr-assign-row:last-child { border-bottom: none; }
.phr-assign-row__label { font-size: .84rem; color: var(--brand-text-muted); }
.phr-assign-row__value { font-size: .88rem; font-weight: 700; color: var(--brand-text); margin-top: 2px; letter-spacing: .02em; }

.phr-warn-banner { display: flex; gap: 10px; align-items: flex-start; background: #fbeee6; border: 1px solid rgba(174,96,56,.35); border-radius: 8px; padding: 12px 14px; font-size: .78rem; color: var(--brand-text-muted); line-height: 1.5; }
.phr-warn-banner svg { color: var(--jodi-copper); flex-shrink: 0; margin-top: 1px; }

.phr-billing-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--brand-border); }
.phr-billing-row:last-child { border-bottom: none; }
.phr-billing-row input[type="radio"] { margin-top: 3px; accent-color: var(--brand-eyebrow); width: 15px; height: 15px; flex-shrink: 0; }
.phr-billing-row__body { flex: 1; min-width: 0; font-size: .82rem; color: var(--brand-text); line-height: 1.5; }
.phr-billing-row__actions { display: flex; gap: 12px; margin-top: 4px; font-size: .76rem; }
.phr-billing-row__actions a { color: var(--brand-eyebrow); text-decoration: underline; }
.phr-billing-row__actions span { color: var(--brand-border-strong); }

/* ── COMMUNICATION PREFERENCES v2 (rebuilt against Jodi's real mockup,
   Aug 2026) — reuses .phr-panel/.phr-panel-grid, .phr-data-table2,
   .phr-toggle (pre-existing switch), .phr-badge2, .phr-icon-row,
   .phr-form__checkbox-row/__legal-links, .phr-btn, .phr-panel--tinted.
   New: a channel row, a bordered "consent box" with meta rows, a table
   toggle-cell helper, and an unsaved-changes action bar. ───────────── */

.phr-channel-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.phr-channel-row__text { margin-right: auto; }
.phr-channel-row__text strong { display: block; font-size: .86rem; color: var(--brand-text); }
.phr-channel-row__text span { display: block; font-size: .82rem; color: var(--brand-text-muted); margin-top: 1px; }

.phr-data-table2 td.is-toggle, .phr-data-table2 th.is-toggle { text-align: center; }
.phr-data-table2 td .phr-toggle { margin: 0 auto; }
.phr-data-table2 .phr-lock-note { display: block; font-size: .68rem; color: var(--brand-text-subtle); font-weight: 400; text-transform: none; margin-top: 2px; }

.phr-consent-box { border: 1px solid var(--brand-border); border-radius: 10px; padding: 18px; }
.phr-consent-box__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.phr-consent-box__head h4 { font-size: .96rem; margin: 0; color: var(--brand-text); }

.phr-meta-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.phr-meta-row:last-child { margin-bottom: 0; }
.phr-meta-row svg { color: var(--brand-eyebrow); flex-shrink: 0; margin-top: 2px; }
.phr-meta-row__label { display: block; font-size: .68rem; color: var(--brand-text-subtle); text-transform: uppercase; letter-spacing: .02em; }
.phr-meta-row__value { display: block; font-size: .82rem; font-weight: 700; color: var(--brand-text); margin-top: 1px; }

.phr-help-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .phr-help-grid { grid-template-columns: 1fr; } }
.phr-help-grid ul { margin: 0; padding-left: 18px; font-size: .82rem; color: var(--brand-text-muted); line-height: 1.8; }
.phr-help-grid__links { display: flex; flex-direction: column; gap: 10px; }
.phr-help-grid__links a { font-size: .84rem; font-weight: 700; color: var(--brand-eyebrow); text-decoration: none; display: flex; align-items: center; gap: 4px; }

.phr-unsaved-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--brand-bg-alt); border: 1px solid var(--brand-border); border-radius: 10px; padding: 16px 20px; }
.phr-unsaved-bar__text { display: flex; align-items: flex-start; gap: 10px; }
.phr-unsaved-bar__text svg { color: #c06b32; flex-shrink: 0; margin-top: 2px; }
.phr-unsaved-bar__text strong { display: block; font-size: .88rem; color: #a04a1f; }
.phr-unsaved-bar__text span { display: block; font-size: .78rem; color: var(--brand-text-muted); margin-top: 2px; }
.phr-unsaved-bar__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── ACCOUNT SETTINGS v2 (rebuilt against Jodi's real mockup, Aug 2026) ──
   The mockup for this page shows an earlier light-sidebar/serif-header
   chrome, out of step with the dark-shell system used on the other 7
   account pages this segment (Dashboard, My Dogs, Orders & Tracking,
   Manage Subscription, Pickup & Delivery, Payment Methods, Comm Prefs).
   Content/copy below follows the mockup closely; the surrounding shell
   was standardized to the dark sidebar for consistency across the
   cluster — flagged to Jodi. Reuses .phr-panel/.phr-panel-grid--wide,
   .phr-quick-actions, .phr-panel--warn, .phr-form__field, .phr-badge2,
   .phr-btn. New: a numbered section head, a label-left field row, and
   a session row. ─────────────────────────────────────────────────── */

.phr-set-head { font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-eyebrow); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--brand-border); }
.phr-set-head--spaced { margin-top: 30px; }

.phr-field-row { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--brand-border); flex-wrap: wrap; }
.phr-field-row:last-of-type { border-bottom: none; }
.phr-field-row__label { width: 150px; flex-shrink: 0; font-size: .86rem; font-weight: 700; color: var(--brand-text); }
.phr-field-row__control { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phr-field-row__control input[type="text"], .phr-field-row__control input[type="email"], .phr-field-row__control input[type="tel"] {
  flex: 1; min-width: 180px; font: inherit; font-size: .9rem; padding: 11px 14px; border: 1px solid var(--brand-border-strong); border-radius: 7px; background: var(--brand-surface); color: var(--brand-text);
}
.phr-field-row__control input:disabled { background: var(--brand-bg-alt); color: var(--brand-text-muted); }
.phr-field-row__value { font-size: .9rem; color: var(--brand-text); letter-spacing: .03em; }
.phr-field-row__action { font-size: .82rem; font-weight: 700; color: var(--brand-eyebrow); background: none; border: none; padding: 0; cursor: not-allowed; font: inherit; white-space: nowrap; }

.phr-session-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--brand-border); flex-wrap: wrap; }
.phr-session-row:last-of-type { border-bottom: none; }
.phr-session-row__icon { color: var(--brand-eyebrow); flex-shrink: 0; }
.phr-session-row__label { font-weight: 700; font-size: .88rem; color: var(--brand-text); margin-right: auto; }
.phr-session-row__meta { font-size: .8rem; color: var(--brand-text-muted); white-space: nowrap; }
.phr-session-row__action { font-size: .82rem; font-weight: 700; color: var(--brand-eyebrow); background: none; border: none; cursor: not-allowed; font: inherit; white-space: nowrap; }
.phr-alloc-bar__pct { text-align: right; font-weight: 700; }