/* ============== Base ============== */
* { box-sizing: border-box; }
html, body { height: 100%; }

:root{
  --ink: #0f172a;
  --ink-soft: rgba(15, 23, 42, 0.92);
  --paper: rgba(255,255,255,0.90);
  --paper-soft: rgba(255,255,255,0.82);
  --glass-dark: rgba(5, 15, 28, 0.75);
  --border-light: rgba(255, 255, 255, 0.12);
  --accent1: #ffd34d;
  --accent2: #ffb400;

  --shadow-lg: 0 18px 45px rgba(0,0,0,0.18);
  --shadow-md: 0 12px 30px rgba(0,0,0,0.12);
  --radius-lg: 20px;
  --radius-md: 14px;

  /* ================================
     GLOBAL WIDTH SYSTEM (NEW)
     Desktop = extra wide, consistent across ALL pages.
     ================================ */
  --container-max: 1320px;     /* <- “extra wide” desktop */
  --container-pad: 22px;       /* default side padding */
  --readable-max: 860px;       /* long-text max width */
  --narrow-max: 520px;         /* small widgets like the wheel card */
}

/* Fluid container helpers (no HTML changes needed) */
:root{
  --container: min(var(--container-max), calc(100vw - (var(--container-pad) * 2)));
  --readable:  min(var(--readable-max),  calc(100vw - (var(--container-pad) * 2)));
  --narrow:    min(var(--narrow-max),    calc(100vw - (var(--container-pad) * 2)));
}

body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial,
    sans-serif;
  color: var(--ink);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  background: #0b1a2b;
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  z-index: 20;
}
.skip-link:focus { left: 16px; }

/* ============== Background ============== */
.background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}
.layer {
  position: absolute;
  width: 200%;
  height: 200%;
  top: 0;
  left: 0;
  animation: move 60s linear infinite;
}
.layer.sky { background: linear-gradient(to bottom, #7ad3ff 0%, #9ef0c8 100%); }
.layer.clouds {
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.85) 18%, transparent 19%),
    radial-gradient(circle at 60% 18%, rgba(255,255,255,0.75) 14%, transparent 15%),
    radial-gradient(circle at 80% 55%, rgba(255,255,255,0.65) 22%, transparent 23%);
  opacity: 0.85;
  animation-duration: 90s;
}
.layer.trees {
  background: linear-gradient(to top, rgba(18,110,46,0.95) 0%, transparent 75%);
  bottom: 0;
  width: 200%;
  height: 160%;
  animation-duration: 120s;
}
.layer.grass {
  background: linear-gradient(to top, rgba(0,90,40,0.98) 0%, transparent 78%);
  bottom: 0;
  width: 200%;
  height: 110%;
  animation-duration: 30s;
}
@keyframes move {
  from { transform: translate(0, 0); }
  to   { transform: translate(-50%, -50%); }
}

/* ============== Layout ============== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: var(--glass-dark);
  border-bottom: 1px solid var(--border-light);
  color: rgba(255,255,255,0.92);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  /* keep the header aligned with the rest of the page */
  width: var(--container);
  margin: 0 auto;
  padding: 16px 0;
}

/* ===== Header Logo CTA (CSS-only, no HTML changes) ===== */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.4px;
  color: #fff;
  text-decoration: none;
  position: relative;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

.site-logo::before{
  content:"";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: 0 0 22px;
  background:
    conic-gradient(from 0deg,
      #ffd34d 0 12.5%,
      rgba(255,255,255,0.18) 12.5% 25%,
      #ffb400 25% 37.5%,
      rgba(255,255,255,0.18) 37.5% 50%,
      #ffd34d 50% 62.5%,
      rgba(255,255,255,0.18) 62.5% 75%,
      #ffb400 75% 87.5%,
      rgba(255,255,255,0.18) 87.5% 100%);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.28),
    inset 0 0 0 2px rgba(0,0,0,0.12);
}

.site-logo::after{
  content:"\2192  Let your pup pick!";
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2px;
  margin-left: 2px;
  white-space: nowrap;
  opacity: 0.95;
  animation: logo-nudge 1.9s ease-in-out infinite;
}
@keyframes logo-nudge{
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

.site-logo:hover{
  text-decoration: none;
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
}
.site-logo:focus-visible{
  outline: 3px solid rgba(255,255,255,0.55);
  outline-offset: 3px;
}
@media (max-width: 520px){
  .site-logo::after{ content:""; }
}

/* ===== Nav ===== */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
}
.site-nav__link {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}
.site-nav__link:hover { background: rgba(255,255,255,0.14); text-decoration: none; }
.site-nav__link.is-active {
  border-color: rgba(255, 255, 255, 0.70);
  background: rgba(255, 255, 255, 0.20);
  font-weight: 700;
  color: #fff;
}

.site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0 60px;
  gap: 24px;
}

/* ============== Generic typography helpers ============== */
.hero {
  position: relative;
  isolation: isolate;
  text-align: center;
  margin-bottom: 14px;
  width: var(--container);
}

.hero::before,
.hero-section::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: -10px -18px auto;
  height: clamp(160px, 42vh, 280px);
  border-radius: 20px;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 30, 0.68) 0%,
      rgba(10, 17, 30, 0.48) 26%,
      rgba(10, 17, 30, 0.24) 56%,
      rgba(10, 17, 30, 0) 100%
    );
}

.hero > *,
.hero-section > *,
.page-hero > * {
  position: relative;
  z-index: 1;
}

#title {
  margin: 0;
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.98);
  text-shadow:
    0 2px 4px rgba(0,0,0,0.45),
    0 10px 26px rgba(0,0,0,0.38),
    0 20px 36px rgba(0,0,0,0.22);
}

.subtitle {
  margin: 10px 0 0;
  opacity: 0.95;
  font-size: clamp(14px, 2.2vw, 18px);
  color: rgba(255,255,255,0.96);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.46),
    0 8px 18px rgba(0,0,0,0.34),
    0 16px 30px rgba(0,0,0,0.18);
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  opacity: 0.9;
  color: rgba(255,255,255,0.96);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.52),
    0 6px 16px rgba(0,0,0,0.34),
    0 14px 24px rgba(0,0,0,0.20);
}

.page-hero {
  position: relative;
  isolation: isolate;
  width: var(--readable);
  text-align: center;
  padding: 12px 12px 0;
  color: var(--ink);
}
.page-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--ink);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.45),
    0 6px 18px rgba(0,0,0,0.16);
}
.page-subtitle {
  margin: 0;
  font-size: clamp(15px, 2.4vw, 18px);
  color: var(--ink-soft);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.35),
    0 5px 14px rgba(0,0,0,0.13);
}

/* ============== Blog actions ============== */
.blog-actions {
  width: var(--container);
  display: flex;
  justify-content: center;
  margin: 18px 0 4px;
}
.blog-actions__link { text-decoration: none; }

/* ============== Readable content containers ============== */
.content-card {
  width: var(--readable);
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  color: var(--ink);
}
.content-card h1, .content-card h2, .content-card h3 { color: var(--ink); }
.content-card p, .content-card li { color: var(--ink-soft); }

.bullet-list {
  margin: 12px 0 0;
  padding-left: 18px;
  line-height: 1.55;
}

.section-heading {
  width: var(--container);
  margin: 8px 0 0;
  text-align: left;
  background: var(--paper-soft);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
}
.section-heading h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--ink);
}
.section-heading p { margin: 0; color: var(--ink-soft); }

/* ============== Blog Archive (All Posts) polish ============== */
#all-posts.content-card { width: var(--container); }

#all-posts .archive-intro {
  margin: 0 0 6px;
  color: rgba(15,23,42,0.78);
}

#all-posts .archive-list {
  list-style: none;
  padding-left: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

#all-posts .archive-item {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.82);
}

#all-posts .archive-item:hover { background: rgba(255,255,255,0.92); }

#all-posts .archive-link {
  font-weight: 800;
  text-decoration: none;
}

#all-posts .archive-link:hover { text-decoration: underline; }

#all-posts .archive-meta {
  margin-top: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(15,23,42,0.62);
}

#all-posts .archive-excerpt {
  margin-top: 6px;
  color: var(--ink-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-meta {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.85;
  color: rgba(15,23,42,0.65);
}

/* ============== Product Grid ============== */
.product-grid {
  width: var(--container);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.product-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--paper-soft);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 18px 45px rgba(0,0,0,0.16);
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--ink);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.22);
}

.product-card__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: rgba(15,23,42,0.05);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }

.product-card__body h2 { margin: 0 0 8px; font-size: 20px; color: var(--ink); }
.product-card__body p { margin: 0; line-height: 1.55; color: var(--ink-soft); }
.product-card__cta { margin-top: 14px; text-decoration: none; text-align: center; }

/* ============== Wheel Card + Game Area ============== */
.game-area {
  display: grid;
  place-items: center;
  width: 100%;
  gap: 18px;
}

.wheel-card {
  width: var(--narrow);
  padding: 18px 16px 16px;
  border-radius: 22px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 55px rgba(0,0,0,0.30);
  backdrop-filter: blur(8px);
  color: #fff;
}

/* ============== Wheel Area ============== */
#wheel-container {
  position: relative;
  width: min(420px, calc(100vw - (var(--container-pad) * 2)));
  aspect-ratio: 1 / 1;
  margin: 8px auto 14px;
  display: grid;
  place-items: center;
}

.wheel-tap-zone {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wheel-tap-zone:focus { outline: none; }
.wheel-tap-zone:focus-visible {
  outline: 3px solid rgba(255,255,255,0.65);
  outline-offset: 6px;
  border-radius: 24px;
}

#wheel {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  box-shadow:
    0 18px 38px rgba(0,0,0,0.35),
    inset 0 0 0 10px rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  transform: rotate(0rad);
  transform-origin: 50% 50%;
}

.paw-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.20;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.18));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 92% 92%;
  transform: rotate(-10deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23ffffff' d='M40 54c-8 0-15-10-15-22S32 10 40 10s15 10 15 22-7 22-15 22Zm48 0c-8 0-15-10-15-22S80 10 88 10s15 10 15 22-7 22-15 22ZM22 78c-7 0-12-7-12-15s5-15 12-15 12 7 12 15-5 15-12 15Zm84 0c-7 0-12-7-12-15s5-15 12-15 12 7 12 15-5 15-12 15ZM64 118c-16 0-34-10-34-26 0-14 12-22 22-26 4-2 8-3 12-3s8 1 12 3c10 4 22 12 22 26 0 16-18 26-34 26Z'/%3E%3C/svg%3E");
}

/* ============== Dog Nose Pointer (3 o'clock) ============== */
.pointer {
  position: absolute;
  top: 50%;
  right: -26px;
  left: auto;
  transform: translateY(-50%) rotate(-270deg);
  width: 86px;
  height: 86px;
  z-index: 4;
  pointer-events: none;
  animation: pointer-bob 2.2s ease-in-out infinite;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='0' dy='6' stdDeviation='6' flood-color='rgba(0,0,0,0.35)'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cpath d='M24 62c0-22 16-40 46-40s46 18 46 40c0 32-18 56-46 56S24 94 24 62Z' fill='%23F4C28B'/%3E%3Cpath d='M34 54c-10-8-14-20-6-30 10-12 26 0 30 8' fill='%23C9925C'/%3E%3Cpath d='M106 54c10-8 14-20 6-30-10-12-26 0-30 8' fill='%23C9925C'/%3E%3Ccircle cx='54' cy='66' r='6' fill='%232B1B00' opacity='0.55'/%3E%3Ccircle cx='86' cy='66' r='6' fill='%232B1B00' opacity='0.55'/%3E%3Cpath d='M58 84c6 6 18 6 24 0' stroke='%232B1B00' stroke-width='6' stroke-linecap='round' opacity='0.35'/%3E%3Cpath d='M70 96l-14 16h28l-14-16Z' fill='%232B1B00'/%3E%3Ccircle cx='70' cy='92' r='10' fill='%232B1B00'/%3E%3Ccircle cx='67' cy='89' r='3' fill='white' opacity='0.25'/%3E%3C/g%3E%3C/svg%3E");
}
@keyframes pointer-bob {
  0%, 100% { transform: translateY(-50%) translateX(0) rotate(-270deg); }
  50% { transform: translateY(-50%) translateX(2px) rotate(-270deg); }
}

/* ============== Paw Button (game) ============== */
.paw-btn {
  width: 100%;
  margin-top: 10px;
  padding: 14px 14px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #2b1b00;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.2px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}
.paw-btn svg { fill: #2b1b00; }
.paw-btn:hover { filter: brightness(1.05); transform: translateY(-1px); text-decoration: none; }
.paw-btn:active { transform: translateY(1px) scale(0.99); }
.paw-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; filter: none; }
.paw-btn__text { line-height: 1.1; }

/* ============== Message / Result (game) ============== */
#message {
  margin-top: 14px;
  text-align: center;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 6px 16px rgba(0,0,0,0.32);
}

/* ============== Disclosure (game) ============== */
.disclosure {
  margin-top: 14px;
  padding: 10px 10px 8px;
  border-radius: 14px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}
.disclosure__headline {
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.92;
}
.disclosure__text {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.88;
}
.disclosure__fine { font-size: 11px; opacity: 0.78; }

/* ============== Footer ============== */
.site-footer {
  border-top: 1px solid var(--border-light);
  background: var(--glass-dark);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.92);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  /* keep footer aligned with the rest of the page */
  width: var(--container);
  margin: 0 auto;
  padding: 18px 0;
  font-size: 13px;
}
.site-footer__links { display: flex; gap: 16px; }

/* ===== Focus styles ===== */
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(255,255,255,0.55);
  outline-offset: 3px;
}

/* =========================================================
   Guide Pages System
   ========================================================= */

.hero-section {
  position: relative;
  isolation: isolate;
  text-align: center;
  width: var(--container);
  margin: 0 auto 18px;
  padding: 10px 8px 0;
  color: #fff;
}
.hero-section h1{
  margin: 12px 0 10px;
  font-size: clamp(32px, 4vw, 52px);
  color: rgba(255,255,255,0.98);
  text-shadow:
    0 2px 4px rgba(0,0,0,0.48),
    0 10px 28px rgba(0,0,0,0.36),
    0 20px 38px rgba(0,0,0,0.22);
}
.hero-section .subtitle{
  margin: 0 auto;
  max-width: 62ch;
  font-size: clamp(16px, 2.4vw, 20px);
  color: rgba(255,255,255,0.96);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.46),
    0 8px 20px rgba(0,0,0,0.34),
    0 16px 30px rgba(0,0,0,0.20);
}

@media (max-width: 640px) {
  :root{ --container-pad: 16px; }

  .hero::before,
  .hero-section::before,
  .page-hero::before {
    inset: -8px -12px auto;
    height: clamp(150px, 48vh, 240px);
  }
}

/* primary CTA style */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd700, #ff8800);
  color: #1a1a1a;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0,0,0,0.20);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.cta-btn:hover { text-decoration: none; filter: brightness(1.03); transform: translateY(-1px); }
.cta-btn:active { transform: translateY(1px); }

.jump-nav {
  width: var(--container);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 14px 0 14px;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.14));
  border: 1px solid rgba(255,255,255,0.36);
  box-shadow: 0 14px 36px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
}

.jump-nav a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(15,23,42,0.14);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(0,0,0,0.11);
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.jump-nav a::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  opacity: 0.75;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
  background-image: var(--jump-icon);
}

.jump-nav a:hover {
  text-decoration: none;
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.jump-nav a:active {
  transform: translateY(0);
  box-shadow: 0 7px 14px rgba(0,0,0,0.12);
}

.jump-nav a:focus-visible {
  outline: 3px solid rgba(255, 196, 0, 0.92);
  outline-offset: 2px;
  border-color: rgba(15,23,42,0.4);
}

/* Dog Training icon mapping */
body.dog-training-page .jump-nav a[href="#training-foundations"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
body.dog-training-page .jump-nav a[href="#reward-systems"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 16.8 6.7 19l1-5.8L3.5 9.2l5.9-.9z'/%3E%3C/svg%3E"); }
body.dog-training-page .jump-nav a[href="#puppy-plan"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='16' rx='2.5'/%3E%3Cpath d='M8 2.8v3.2M16 2.8v3.2M7 11h10M7 15h6'/%3E%3C/svg%3E"); }
body.dog-training-page .jump-nav a[href="#common-problems"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.9 19.5h18.2z'/%3E%3Cpath d='M12 9v5M12 17h.01'/%3E%3C/svg%3E"); }
body.dog-training-page .jump-nav a[href="#training-toolkit"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2.2'/%3E%3Cpath d='M9 7V5.4A1.4 1.4 0 0 1 10.4 4h3.2A1.4 1.4 0 0 1 15 5.4V7M3 12h18'/%3E%3C/svg%3E"); }
body.dog-training-page .jump-nav a[href="#sources-trust"],
body.dog-health-page .jump-nav a[href="#sources-trust"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3.2V11c0 4.6-2.8 8.3-7 10-4.2-1.7-7-5.4-7-10V6.2z'/%3E%3Cpath d='m8.7 12.3 2.1 2.1 4.5-4.5'/%3E%3C/svg%3E"); }

/* Dog Health icon mapping (actual IDs) */
body.dog-health-page .jump-nav a[href="#feeding-calculator"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17' rx='2.2'/%3E%3Cpath d='M8.5 8h7M8.5 12h2M12.2 12h3.3M8.5 16h7'/%3E%3C/svg%3E"); }
body.dog-health-page .jump-nav a[href="#preventive-care"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.8' width='16' height='16.4' rx='2.2'/%3E%3Cpath d='M8 8.3h8M8 12h5M8 15.7h8M7 12.1l1.1 1.2 1.7-2'/%3E%3C/svg%3E"); }
body.dog-health-page .jump-nav a[href="#nutrition-tips"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 14c0-4.2 3.4-7.5 7.5-7.5S20 9.8 20 14c0 3.2-2.3 5.8-5.4 6.4'/%3E%3Cpath d='M8 14c1.8 1.3 4.2 2.2 6.8 2.7M10.7 10.5c.9 2.6.9 5.5.1 8.2'/%3E%3C/svg%3E"); }
body.dog-health-page .jump-nav a[href="#warning-signs"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.9 19.5h18.2z'/%3E%3Cpath d='M12 9v5M12 17h.01'/%3E%3C/svg%3E"); }
body.dog-health-page .jump-nav a[href="#parasite-safety"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v10M7 12h10M8.2 8.2l7.6 7.6M15.8 8.2l-7.6 7.6'/%3E%3Cellipse cx='12' cy='12' rx='7.5' ry='5.5'/%3E%3C/svg%3E"); }
body.dog-health-page .jump-nav a[href="#health-toolkit"] { --jump-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2.2'/%3E%3Cpath d='M9 7V5.4A1.4 1.4 0 0 1 10.4 4h3.2A1.4 1.4 0 0 1 15 5.4V7M3 12h18'/%3E%3C/svg%3E"); }

@media (max-width: 900px) {
  .jump-nav {
    justify-content: center;
    gap: 10px;
    padding: 10px;
  }

  .jump-nav a {
    flex: 1 1 calc(50% - 10px);
    min-width: 220px;
  }
}

@media (max-width: 640px) {
  .jump-nav a {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
  }
}

/* section wrapper used by guide pages */
.calculator,
.checklist,
.nutrition-cards,
.accordion,
.safety-cards,
.toolkit,
.sources-section,
.guide-panel{
  width: var(--container);
  margin: 32px auto;
  padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 28px);
  background: var(--paper-soft);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  display: grid;
  gap: 18px;
  scroll-margin-top: 110px;
}

/* “card group” is the GRID WRAPPER */
.card-group{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 18px auto;
}

/* the actual card */
.card{
  padding: 18px 16px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
  text-align: center;
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.card:hover,
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.16);
  text-decoration: none;
}
.card h3{ margin: 0 0 8px; color: var(--ink); }
.card p{ margin: 0; color: var(--ink-soft); line-height: 1.5; }

/* headings inside light sections */
.calculator h2,
.checklist h2,
.nutrition-cards h2,
.accordion h2,
.safety-cards h2,
.toolkit h2,
.sources-section h2,
.guide-panel h2{
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--ink);
  text-shadow: none;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
}

/* generic calculator form */
.calculator form{
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
}

.calculator label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.calculator label small{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(15,23,42,0.70);
}

.calculator input,
.calculator select{
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.18);
  font-size: 14px;
}

.calculator .cta-btn{
  width: 100%;
  border-radius: 12px;
}

/* result box for calculator (light, readable) */
#calorie-result.disclosure{
  width: 100%;
  margin: 14px auto 0;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.10);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}
#calorie-result .disclosure__headline{
  color: rgba(15,23,42,0.85);
  opacity: 1;
}
#calorie-result .disclosure__text{
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  opacity: 1;
}
#calorie-result .disclosure__fine{
  color: rgba(15,23,42,0.70);
  opacity: 1;
}

/* ===================================== */
/* Feeding Calculator V2 (dog-health)    */
/* FIX: stop results from overlaying UI  */
/* ===================================== */

/* Kill any inherited “grid” from the generic calculator form for this tool */
#feeding-calculator form.calculator-tool{
  grid-template-columns: none;
  align-items: stretch;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

/* Outer 2-col layout (content + tool) */
#feeding-calculator .feeding-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 18px;
  align-items: start;
}
#feeding-calculator .feeding-layout__tool{ min-width: 0; }

/* Tool card */
#feeding-calculator .calculator-tool{
  width: 100%;
  display: grid;
  gap: 18px;
  padding: clamp(16px, 2.5vw, 22px);
  border-radius: calc(var(--radius-lg) + 6px);
  border: 1px solid rgba(15,23,42,0.12);
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(236,245,255,0.9));
  box-shadow: 0 18px 40px rgba(15,23,42,0.12);
  position: relative;
  overflow: hidden;
}

#feeding-calculator .calculator-tool::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
  pointer-events: none;
}
#feeding-calculator .calculator-tool > *{
  position: relative;
  z-index: 1;
}

/* Tool header */
#feeding-calculator .calculator-tool__header{
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}
#feeding-calculator .calculator-tool__icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(74,144,226,0.2), rgba(97,218,251,0.18));
  border: 1px solid rgba(74,144,226,0.3);
  color: var(--ink);
}
#feeding-calculator .calculator-tool__icon svg{
  width: 26px;
  height: 26px;
  fill: currentColor;
}
#feeding-calculator .calculator-tool__title{
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
#feeding-calculator .calculator-tool__subtitle{
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Inputs vs Results grid INSIDE tool */
#feeding-calculator .calculator-tool__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

/* HARD placement so they can’t overlap even if markup changes */
#feeding-calculator .calculator-tool__grid > .calculator-tool__inputs{
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
#feeding-calculator .calculator-tool__grid > .calculator-tool__results{
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

#feeding-calculator .calculator-tool__inputs{
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: grid;
  gap: 12px;
  box-shadow: 0 16px 32px rgba(15,23,42,0.12);
}

#feeding-calculator .calculator-tool__toggle{
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.16);
  background: rgba(15,23,42,0.04);
  width: fit-content;
  gap: 4px;
}
#feeding-calculator .calculator-tool__toggle-btn{
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.2s ease;
}
#feeding-calculator .calculator-tool__toggle-btn.is-active{
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #fff;
  box-shadow: 0 6px 16px rgba(74,144,226,0.28);
}

#feeding-calculator .calculator-tool__field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
#feeding-calculator .calculator-tool__field:focus-within{
  box-shadow: 0 0 0 3px rgba(74,144,226,0.16);
  border-radius: 12px;
  padding: 6px;
  margin: -6px;
}
#feeding-calculator .calculator-tool__help{
  font-size: 12px;
  font-weight: 500;
  color: rgba(15,23,42,0.7);
}

#feeding-calculator .calculator-tool input,
#feeding-calculator .calculator-tool select{
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.2);
  background: #fff;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#feeding-calculator .calculator-tool input:focus-visible,
#feeding-calculator .calculator-tool select:focus-visible{
  outline: none;
  border-color: rgba(74,144,226,0.7);
  box-shadow: 0 0 0 3px rgba(74,144,226,0.2);
}

#feeding-calculator .calculator-tool__cta{
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(15,23,42,0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#feeding-calculator .calculator-tool__cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15,23,42,0.2);
}
#feeding-calculator .calculator-tool__cta:active{
  transform: translateY(0);
}

#feeding-calculator .calculator-tool__note{
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

/* RESULTS PANEL — FIX: remove sticky to prevent overlay */
#feeding-calculator .calculator-tool__results{
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(236,244,255,0.9));
  border: 1px solid rgba(74,144,226,0.2);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 18px 36px rgba(15,23,42,0.14);

  position: static;
  top: auto;
  z-index: auto;
  overflow: hidden;
}

#feeding-calculator .calculator-tool__results-eyebrow{
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.6);
}
#feeding-calculator .calculator-tool__results-value{
  margin: 0 0 14px;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--ink);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.15;
}

#feeding-calculator .calculator-tool__kpis{
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
#feeding-calculator .calculator-tool__kpi{
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.1);
  background: rgba(255,255,255,0.82);
  min-width: 0;
  overflow-wrap: anywhere;
}
#feeding-calculator .calculator-tool__kpi span{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(15,23,42,0.6);
  min-width: 0;
  overflow-wrap: anywhere;
}
#feeding-calculator .calculator-tool__kpi strong{
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
#feeding-calculator .calculator-tool__kpi small{
  font-size: 11px;
  color: rgba(15,23,42,0.6);
}

#feeding-calculator .calculator-tool__feeding{
  padding: 12px;
  border-radius: 14px;
  background: rgba(74,144,226,0.08);
  border: 1px solid rgba(74,144,226,0.2);
  margin-bottom: 12px;
}
#feeding-calculator .calculator-tool__feeding h4{
  margin: 0 0 6px;
  font-size: 14px;
}
#feeding-calculator .calculator-tool__feeding p{
  margin: 4px 0;
  font-size: 13px;
}
#feeding-calculator .calculator-tool__feeding strong{
  font-size: 16px;
}

#feeding-calculator .calculator-tool__disclaimer{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.82);
}
#feeding-calculator .calculator-tool__disclaimer summary{
  cursor: pointer;
  font-size: 12px;
  color: rgba(15,23,42,0.75);
  list-style: none;
}
#feeding-calculator .calculator-tool__disclaimer summary::-webkit-details-marker{
  display: none;
}
#feeding-calculator .calculator-tool__disclaimer[open] summary{
  margin-bottom: 8px;
}
#feeding-calculator .calculator-tool__disclaimer .disclosure__fine{
  margin: 0;
  font-size: 11px;
  opacity: 0.85;
  color: rgba(15,23,42,0.75);
}

#feeding-calculator .calculator-tool [hidden]{ display: none !important; }

@media (max-width: 920px){
  #feeding-calculator .feeding-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 820px){
  #feeding-calculator .calculator-tool__grid{ grid-template-columns: 1fr; }
}

/* checklist */
.checklist .bullet-list{
  width: 100%;
  margin: 0 auto;
  padding: 16px 26px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
}
.checklist .bullet-list li{ color: var(--ink-soft); }

.nutrition-cards .card-group,
.safety-cards .card-group,
.toolkit .card-group{
  width: 100%;
}

body.dog-health-page .checklist .card-group,
body.dog-health-page .accordion .card-group{
  width: 100%;
}


.content-block{
  width: 100%;
  max-width: 100%;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
  padding: 16px 18px;
}
.content-block p{
  margin: 0 0 12px;
  color: var(--ink-soft);
}
.content-block p:last-child{ margin-bottom: 0; }

.calculator p, .checklist p, .nutrition-cards p, .accordion p, .safety-cards p, .toolkit p {
  line-height: 1.65;
}

.calculator .content-block p, .checklist .content-block p, .nutrition-cards .content-block p,
.accordion .accordion-panel p, .safety-cards .content-block p, .toolkit .content-block p {
  margin: 0 0 10px;
}
.accordion .accordion-panel p:last-child { margin-bottom: 0; }

.warning-flag{
  background: rgba(255, 59, 48, 0.10);
  border-left: 4px solid rgba(255, 59, 48, 0.85);
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink);
  margin: 10px 0 8px;
}

.calculator .bullet-list li, .checklist .bullet-list li, .nutrition-cards .bullet-list li,
.accordion .bullet-list li, .safety-cards .bullet-list li, .toolkit .bullet-list li {
  line-height: 1.6;
}

.accordion .accordion-panel .bullet-list { margin-top: 10px; }

/* accordion */
body.dog-training-page .accordion .card,
body.dog-health-page .accordion .card{
  text-align: left;
  padding: 0;
  overflow: hidden;
}
body.dog-training-page .accordion .accordion-toggle,
body.dog-health-page .accordion .accordion-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  background: rgba(15,23,42,0.06);
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  color: var(--ink);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
body.dog-training-page .accordion .accordion-toggle::after,
body.dog-health-page .accordion .accordion-toggle::after{
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid #0f5239;
  border-bottom: 2px solid #0f5239;
  transform: rotate(45deg);
  margin-right: 6px;
  transition: transform 180ms ease;
}
body.dog-training-page .accordion .accordion-toggle:hover,
body.dog-health-page .accordion .accordion-toggle:hover{
  background: rgba(15, 23, 42, 0.09);
  border-color: rgba(15, 82, 57, 0.3);
}
body.dog-training-page .accordion .accordion-toggle[aria-expanded='true'],
body.dog-health-page .accordion .accordion-toggle[aria-expanded='true']{
  background: rgba(15, 82, 57, 0.12);
  border-color: rgba(15, 82, 57, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.dog-training-page .accordion .accordion-toggle[aria-expanded='true']::after,
body.dog-health-page .accordion .accordion-toggle[aria-expanded='true']::after{
  transform: rotate(225deg);
}
body.dog-training-page .accordion .accordion-toggle:focus-visible,
body.dog-health-page .accordion .accordion-toggle:focus-visible{
  outline: 3px solid rgba(25, 94, 67, 0.58);
  outline-offset: 2px;
}
body.dog-training-page .accordion .accordion-panel,
body.dog-health-page .accordion .accordion-panel{
  display: block;
  padding: 0 18px;
  background: rgba(255,255,255,0.92);
  max-height: 700px;
  opacity: 1;
  transition: max-height 250ms ease, opacity 180ms ease, padding 180ms ease;
}
body.dog-training-page .accordion .accordion-panel[hidden],
body.dog-health-page .accordion .accordion-panel[hidden]{
  display: block;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
body.dog-training-page .accordion .accordion-panel:not([hidden]),
body.dog-health-page .accordion .accordion-panel:not([hidden]){
  padding-top: 12px;
  padding-bottom: 18px;
}
body.dog-training-page .accordion .accordion-panel p,
body.dog-health-page .accordion .accordion-panel p{ color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  body.dog-training-page .accordion .accordion-toggle,
  body.dog-training-page .accordion .accordion-panel,
  body.dog-health-page .accordion .accordion-toggle,
  body.dog-health-page .accordion .accordion-panel {
    transition: none;
  }
}

body.dog-training-page .commands-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  width: 100%;
  margin-inline: auto;
}

body.dog-training-page .commands-grid .card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  body.dog-training-page .commands-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  body.dog-training-page .commands-grid{
    grid-template-columns: 1fr;
  }
}

/* affiliate disclosure */
.affiliate-disclosure{
  width: 100%;
  margin: 14px auto 0;
  background: rgba(255,255,255,0.90);
  border-left: 4px solid #3366ff;
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
}
.affiliate-disclosure strong{
  display: block;
  margin-bottom: 6px;
}

.affiliate-disclosure--compact{
  width: var(--container);
  margin: 10px auto 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  background: rgba(255,255,255,0.84);
  border-left: 3px solid rgba(51,102,255,0.55);
  box-shadow: none;
}
.affiliate-disclosure--compact strong{
  font-size: 12px;
  margin-bottom: 4px;
}
.affiliate-disclosure--compact p{
  margin: 0;
}
.product-grid .affiliate-disclosure{
  grid-column: 1 / -1;
}

/* Keep health toolkit internals aligned to section shell */
#health-toolkit {
  overflow-x: hidden;
}

#health-toolkit > h3,
#health-toolkit .content-block,
#health-toolkit .affiliate-disclosure--compact,
#health-toolkit .card-group {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* toolkit CTA at bottom (only the section-level browse link) */
#health-toolkit > .toolkit-bottom-cta{
  display: flex;
  width: min(420px, calc(100vw - (var(--container-pad) * 2)));
  margin: 12px auto 0;
}

/* Force wellness toolkit products to 2 rows x 3 cards on wide screens */
#health-toolkit .card-group{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1180px) {
  #health-toolkit .card-group{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #health-toolkit .card-group{
    grid-template-columns: 1fr;
  }
}

/* Keep wellness toolkit product cards equal-height with compact CTA chips */
#health-toolkit .card-group > a.card{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#health-toolkit .card-group > a.card p{
  margin-bottom: 0;
}

#health-toolkit .card-group > a.card .toolkit-card-cta{
  margin-top: auto;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
  display: inline-flex;
  align-self: center;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0,0,0,0.14);
  pointer-events: none;
}

@media (max-width: 600px) {
  #health-toolkit .card-group > a.card .toolkit-card-cta{
    font-size: 13px;
    padding: 9px 12px;
  }
}

/* ============== Responsive refinements ============== */
@media (min-width: 900px) {
  .wheel-card { padding: 22px 20px 18px; }
  #message { font-size: 17px; }
  .pointer { right: -28px; width: 92px; height: 92px; }
}

@media (min-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card { padding: 18px; }
}

/* =========================================================
   Contact Page Polish (scoped, does not affect calculators)
   ========================================================= */
body.contact-page .contact-card{
  width: min(900px, calc(100vw - (var(--container-pad) * 2)));
}

body.contact-page .contact-header h1{
  margin-top: 0;
  margin-bottom: 10px;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: 0.2px;
}

body.contact-page .contact-header p{
  margin: 0 0 14px;
  line-height: 1.65;
}

body.contact-page .contact-body h2{
  margin: 14px 0 8px;
}

body.contact-page .contact-lead{
  margin: 0 0 14px;
  line-height: 1.65;
}

body.contact-page .contact-form{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: calc(var(--radius-lg) + 6px);
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  backdrop-filter: blur(8px);
}

body.contact-page .contact-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.contact-page .contact-field label{
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

body.contact-page .contact-field input,
body.contact-page .contact-field textarea{
  width: 100%;
  max-width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.20);
  background: rgba(255,255,255,0.97);
  color: #111;
  font-size: 14px;
  line-height: 1.35;
  box-sizing: border-box;
}

body.contact-page .contact-field textarea{
  resize: vertical;
  min-height: 160px;
}

body.contact-page .contact-field input:focus-visible,
body.contact-page .contact-field textarea:focus-visible{
  outline: none;
  border-color: rgba(74,144,226,0.70);
  box-shadow: 0 0 0 3px rgba(74,144,226,0.18);
}

body.contact-page .contact-actions{
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

body.contact-page .contact-btn{
  width: min(520px, 100%);
  margin-top: 4px;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 16px;
  min-height: 44px;
}

body.contact-page .contact-note{
  margin: 2px 0 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
  color: rgba(15,23,42,0.70);
  text-align: center;
}

@media (max-width: 520px){
  body.contact-page .contact-form{ padding: 14px; }
  body.contact-page .contact-btn{ font-size: 15px; }
}

/* =========================================================
   Amazon Picks (blog cards)
   ========================================================= */
.amazon-picks {
  margin-top: 16px;
  padding: 16px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.amazon-picks__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.amazon-picks__title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.amazon-picks__note {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(15, 23, 42, 0.7);
}

.amazon-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.amazon-mini-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.amazon-mini-card__media {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(11, 26, 43, 0.03);
}

.amazon-mini-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  display: block;
}

.amazon-mini-card__title {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.amazon-mini-card__meta {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(15, 23, 42, 0.68);
}

.amazon-mini-card__cta {
  margin-top: auto;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: 0.84rem;
  border-radius: 999px;
  padding: 8px 12px;
  color: #0b1a2b;
  background: linear-gradient(180deg, #ffe089 0%, #ffd34d 100%);
  border: 1px solid rgba(11, 26, 43, 0.18);
  box-shadow: 0 6px 14px rgba(11, 26, 43, 0.12);
}

.amazon-mini-card__cta:hover,
.amazon-mini-card__cta:focus-visible {
  filter: brightness(0.98);
}

.amazon-picks__fineprint {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: rgba(15, 23, 42, 0.62);
}

@media (max-width: 880px) {
  .amazon-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Dog Training page width normalization
   Fixes mixed-width sections + overly thin cards on desktop
   ========================================================= */
body.dog-training-page {
  --guide-shell-max: 1180px;
  --guide-read-max: 980px;
}

body.dog-training-page .hero-section,
body.dog-training-page .jump-nav,
body.dog-training-page .accordion,
body.dog-training-page .toolkit,
body.dog-training-page .sources-section,
body.dog-training-page #training-foundations,
body.dog-training-page #reward-systems,
body.dog-training-page #puppy-plan,
body.dog-training-page #basic-commands {
  width: min(var(--guide-shell-max), calc(100vw - (var(--container-pad) * 2)));
  margin-left: auto;
  margin-right: auto;
}

body.dog-training-page .content-card {
  width: min(var(--guide-read-max), calc(100vw - (var(--container-pad) * 2)));
}

/* Larger desktop readability for training page */
body.dog-training-page .content-block,
body.dog-training-page .card {
  font-size: 16px;
}

body.dog-training-page .content-block {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 20px 22px;
}

body.dog-training-page .bullet-list li {
  line-height: 1.7;
}

/* Section card groups should stay comfortably wide */
body.dog-training-page .card-group {
  width: 100%;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
}

/* Toolkit cards: stable 2-up desktop to avoid ultra-thin cards */
body.dog-training-page .toolkit .card-group {
  width: 100%;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 18px;
}

/* Prevent right-edge overflow artifacts inside toolkit */
body.dog-training-page #training-toolkit {
  overflow-x: hidden;
}

body.dog-training-page #training-toolkit .content-block,
body.dog-training-page #training-toolkit .affiliate-disclosure--compact,
body.dog-training-page #training-toolkit > h3 {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

body.dog-training-page #training-toolkit .card-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 18px;
  width: 100%;
  max-width: 100%;
}

body.dog-training-page #training-toolkit h3 {
  margin: 14px 0 8px;
}

body.dog-training-page #training-toolkit .card-group > a.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  max-width: 100%;
}

body.dog-training-page #training-toolkit .card-group > a.card .toolkit-card-cta {
  margin-top: auto;
}

body.dog-training-page .training-session-planner {
  border: 1px solid rgba(15, 82, 57, 0.2);
  background: linear-gradient(180deg, rgba(237, 247, 241, 0.9), rgba(255,255,255,0.9));
}

body.dog-training-page .training-session-planner .planner-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

body.dog-training-page .training-session-planner .planner-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(15, 82, 57, 0.12);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

body.dog-training-page .training-session-planner .planner-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #0f5239;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.dog-training-page .training-session-planner .planner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.dog-training-page .training-session-planner .planner-item {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 82, 57, 0.18);
  background: rgba(255,255,255,0.82);
}

body.dog-training-page .training-session-planner .planner-item h4,
body.dog-training-page .training-session-planner .planner-item p,
body.dog-training-page .training-session-planner .planner-note {
  margin: 0;
}

body.dog-training-page .training-session-planner .planner-note {
  margin-top: 12px;
}

body.dog-training-page #training-toolkit .card-group > :is(a.card, .card--placeholder) {
  min-width: 0;
  max-width: 100%;
  position: relative;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

body.dog-training-page #training-toolkit .card-group > a.card {
  cursor: pointer;
}

body.dog-training-page #training-toolkit .card-group > a.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

body.dog-training-page #training-toolkit .card-group > a.card:focus-visible {
  outline: 3px solid rgba(255, 200, 0, 0.9);
  outline-offset: 3px;
}

body.dog-training-page #training-toolkit .card-group > a.card h4 {
  position: relative;
  padding-right: 26px;
}

body.dog-training-page #training-toolkit .card-group > a.card h4::after {
  content: "↗";
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.8;
  font-weight: 700;
}

body.dog-training-page #training-toolkit .card--placeholder {
  opacity: 0.8;
  border-style: dashed;
}

body.dog-training-page #training-toolkit .card--placeholder .toolkit-card-cta {
  opacity: 0.75;
  filter: grayscale(0.2);
}

body.dog-training-page #training-toolkit .toolkit-bottom-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 12px 0 0;
}

body.dog-training-page .card {
  text-align: left;
}

/* Improve section rhythm */
body.dog-training-page section[id] {
  scroll-margin-top: 110px;
}

body.dog-training-page .accordion,
body.dog-training-page .toolkit,
body.dog-training-page .sources-section {
  margin-top: 26px;
  margin-bottom: 26px;
}

@media (max-width: 1200px) {
  body.dog-training-page .card-group {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 900px) {
  body.dog-training-page .card-group,
  body.dog-training-page .toolkit .card-group,
  body.dog-training-page #training-toolkit .card-group {
    grid-template-columns: 1fr;
  }

  body.dog-training-page .training-session-planner .planner-grid {
    grid-template-columns: 1fr;
  }

  body.dog-training-page .content-block,
  body.dog-training-page .card {
    font-size: 15px;
  }
}

/* FIX: dog-toys page uses a narrower .product-grid (inline). 
   Prevent the compact affiliate disclosure from overflowing that container. */
.product-grid .affiliate-disclosure--compact{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}