/* ============================================================
   DiGGiPRINT3D — theme.css
   Shared design system for the site rebuild.
   New, clean codebase. Does NOT touch the old css/style.css.

   HOW PER-PAGE THEMING WORKS
   --------------------------
   Every page inherits these "bones". To give a page its own
   personality, override just the --accent* and --hero* variables
   inside a page-scoped block, e.g.:

     <body class="theme-dragons"> ... </body>

   and in the page's own <style> (or a small per-page block below):

     .theme-dragons {
       --accent-start: #FF7A3D;
       --accent-end:   #FF5277;
       --hero-tint:    #FFEDE4;
     }

   Nothing else needs to change — tiles, buttons, swirl, motion
   all read from these variables.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand palette (from the rebuild brief) */
  --bg:            #EEF4FC;   /* page background, light blue-white */
  --blue:          #2B5FCC;   /* primary blue */
  --sky:           #36C5F0;   /* bright/sky blue */
  --yellow:        #FFD60A;   /* signature accent */
  --ink:           #11203B;   /* dark text */
  --ink-soft:      #5E76A6;   /* secondary text */
  --teal:          #5DE0C0;   /* teal accent */
  --white:         #FFFFFF;
  --tile-bg:       #FFFFFF;
  --tile-border:   #DCE6F5;

  /* Per-page accent (defaults = home yellow/blue).
     Category pages override these three. */
  --accent-start:  var(--yellow);
  --accent-end:    var(--blue);
  --hero-tint:     #FFF7D6;   /* soft wash behind hero */

  /* Type */
  --font-display: 'Poppins', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape */
  --radius-tile:   16px;
  --radius-pod:    18px;
  --radius-pill:   26px;
  --radius-lg:     24px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(17, 32, 59, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(17, 32, 59, 0.22);
  --shadow-lg: 0 22px 50px -20px rgba(17, 32, 59, 0.30);

  /* Rhythm */
  --container: 1200px;
  --gap:       clamp(1rem, 2.5vw, 2rem);
  --section-y: clamp(2.5rem, 6vw, 5rem);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 .4em;
  color: var(--ink);
}

h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Utility */
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.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;
}

/* ---------- 3. BUTTONS (pills) ---------- */
.btn {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  padding: .7rem 1.25rem;
  border: 2px solid var(--tile-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* Solid blue call-to-action */
.btn.solid {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  border-color: var(--blue);
}
.btn.solid:hover { background: #234ea8; border-color: #234ea8; }

/* Yellow accent button — the "spark" */
.btn.accent {
  --btn-bg: var(--yellow);
  --btn-fg: var(--ink);
  border-color: var(--yellow);
}
.btn.accent:hover { background: #ffcf00; border-color: #ffcf00; }

/* ---------- 4. HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--tile-border);
}
.site-header .flex-between { padding-block: .6rem; }

/* Logo (your Photoshop PNG) */
.brand-logo img {
  height: 62px;
  width: auto;
}
@media (min-width: 700px) { .brand-logo img { height: 84px; } }

/* Nav */
.main-nav ul {
  list-style: none;
  display: flex;
  gap: clamp(.75rem, 2vw, 1.75rem);
  margin: 0; padding: 0;
}
.main-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink);
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.main-nav a:hover { color: var(--blue); border-color: var(--yellow); }

.header-actions { display: flex; align-items: center; gap: .6rem; }

.cart-btn {
  position: relative;
  padding: .55rem .8rem;
}
.cart-count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 700;
  color: var(--ink);
  background: var(--yellow);
  border-radius: 999px;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  font-size: 1.4rem;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}

/* ---------- 5. ANNOUNCEMENT BAR ---------- */
.announcement-bar {
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .9rem;
}
.announcement-bar .container {
  display: flex; align-items: center; gap: 1rem;
  padding-block: .5rem;
}
.thisweek-pill {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  border-color: var(--ink);
  padding: .4rem .9rem;
  font-size: .8rem;
  flex: 0 0 auto;
}
.ticker { overflow: hidden; white-space: nowrap; flex: 1 1 auto; }
.ticker__track { display: inline-block; }

/* ---------- 6. THE SWIRL HERO (signature) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(150deg, var(--hero-tint) 0%, var(--bg) 58%);
  isolation: isolate;
  transition: background .6s ease;
}
/* bold color wash + dot-grid texture, à la playful toy-aisle heroes */
.hero-pattern {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(17, 32, 59, 0.14) 1.6px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(150deg, black 0%, black 55%, transparent 88%);
  mask-image: linear-gradient(150deg, black 0%, black 55%, transparent 88%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(125deg, var(--accent-start) 0%, var(--accent-start) 40%, transparent 58%);
  opacity: .5;
  transition: background .6s ease;
}
/* the diagonal swirl-band sits behind content */
.hero-swirl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: center;
  padding-block: clamp(1.4rem, 4vw, 2.5rem) clamp(2rem, 6vw, 4.5rem);
}
/* Mobile/narrow: show the visual scene above the copy, higher up on the page.
   Extra bottom clearance accounts for content (e.g. the farm ground) that
   intentionally bleeds past the box edge and would otherwise graze the copy below. */
.hero-product { order: -1; margin-bottom: clamp(2rem, 10vw, 4.5rem); }
.hero-product--farm { margin-bottom: clamp(3rem, 14vw, 7rem); }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; }
  .hero-product, .hero-product--farm { order: 0; margin-bottom: 0; }
  /* Farm scene: align to the top of the row so the barn sits level with the
     "Build-your-own" badge instead of vertically centering against the copy. */
  .hero-product--farm { align-self: start; }
}

/* Quick-select pill tabs above the rotator (jump straight to a panel) */
.hero-tabs {
  display: inline-flex;
  gap: .3rem;
  padding: .3rem;
  margin-top: clamp(1.2rem, 3vw, 2rem);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(17, 32, 59, .08);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-tabs button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8rem;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.hero-tabs button:hover { color: var(--ink); }
.hero-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.hero-title { margin-top: .8rem; }
.hero-text p { color: var(--ink-soft); max-width: 46ch; font-size: 1.02rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }

/* the floating cutout scene that "breaks out" of the frame */
.hero-product {
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.hero-product .hero-subject {
  position: relative;
  z-index: 2;
  width: min(85%, 360px);
  filter: drop-shadow(0 24px 30px rgba(17, 32, 59, 0.28));
  animation: floaty 6s ease-in-out infinite;
  transition: opacity .45s var(--ease);
}
/* used by the multi-image rotator (dragons/dogs panels) to cross-fade between subjects */
.hero-product .hero-subject.is-swapping { opacity: 0; }
@media (min-width: 900px) {
  .hero-product .hero-subject { margin-inline-end: -7%; }
}
/* Per-panel size tweaks */
/* fixed aspect-ratio box for panels that cross-fade between several photos (dragons/dogs) —
   each source photo has a different natural shape, so without a locked box the layout would
   reflow (and visibly jump) every time the image swaps. object-fit lets each photo scale to
   fit the same box instead of resizing it. */
.hero-panel[data-panel="dragons"] .hero-subject { width: min(170%, 720px); aspect-ratio: 1.8 / 1; object-fit: contain; }
.hero-panel[data-panel="dogs"] .hero-subject { width: min(68%, 288px); aspect-ratio: .65 / 1; object-fit: contain; object-position: center bottom; }
/* secondary "scene" layer (e.g. the barn) sitting behind the main subject */
.hero-product .hero-scene {
  position: absolute;
  z-index: 1;
  width: min(58%, 250px);
  left: -4%;
  bottom: -4%;
  opacity: .95;
  transform: rotate(-4deg);
  filter: drop-shadow(0 16px 22px rgba(17, 32, 59, 0.2));
  animation: floaty 7s ease-in-out infinite;
  animation-delay: -2s;
}
.hero-product--farm .hero-subject { margin-inline-end: 0; transform: translateX(8%); }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-14px) rotate(1deg); }
}
.hero-product .hero-scene { animation-name: floatyScene; }
@keyframes floatyScene {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50%      { transform: translateY(-8px) rotate(1.5deg); }
}

/* ---------- 6b. FARM SCENE: barn-on-grass + fenced animal showcase ---------- */
.hero-product--farm { aspect-ratio: 3 / 2; }
.farm-ground {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -16%;
  height: 64%;
  z-index: 0;
  border-radius: 30% 30% 6% 6% / 55% 55% 10% 10%;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(180deg, #8ed968 0%, #5fb83f 55%, #4a9c30 100%);
  box-shadow: 0 -1px 0 rgba(255,255,255,.4) inset, 0 14px 26px rgba(17,32,59,.18);
}
.hero-product--farm .farm-barn {
  position: absolute;
  z-index: 1;
  left: 0%;
  top: 10%;
  width: min(66%, 285px);
  transform: none;
  animation: none;
  filter: drop-shadow(0 14px 18px rgba(17,32,59,.22));
}
/* Scattered, not a lineup: each animal gets its own spot on the grass */
.farm-lineup {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.farm-lineup img {
  position: absolute;
  width: clamp(36px, 7.5vw, 54px);
  opacity: 0;
  transform: scale(.25);
  transform-origin: bottom center;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  filter: drop-shadow(0 6px 8px rgba(17,32,59,.25));
}
.farm-lineup img.is-visible { opacity: 1; transform: scale(1); }
/* hand-placed scatter positions across the grass, inside the fenced area right of the barn.
   Sizes: cow/horse/longhorn ~2x, pig ~1.75x, chicken ~1.5x the original mini size. */
/* Cow + pig stand in front of the barn (same horizontal footprint, higher z-index);
   horse/longhorn/chicken spread out to the right. All kept apart, none touching. */
.farm-lineup img:nth-child(1) { left: 8%;  bottom: -6%;  width: clamp(68px, 14vw, 100px); z-index: 3; transform: scale(.25) rotate(-7deg); }
.farm-lineup img:nth-child(1).is-visible { transform: scale(1) rotate(-7deg); }
.farm-lineup img:nth-child(2) { left: 62%; bottom: 22%; width: clamp(76px, 16vw, 116px); z-index: 1; transform: scale(.25) rotate(4deg); }
.farm-lineup img:nth-child(2).is-visible { transform: scale(1) rotate(4deg); }
.farm-lineup img:nth-child(3) { left: 30%; bottom: -16%; width: clamp(59px, 12.25vw, 88px); z-index: 3; transform: scale(.25) rotate(8deg); }
.farm-lineup img:nth-child(3).is-visible { transform: scale(1) rotate(8deg); }
.farm-lineup img:nth-child(4) { left: 80%; bottom: 0%;  width: clamp(104px, 22vw, 160px); z-index: 2; transform: scale(.25) rotate(-5deg); }
.farm-lineup img:nth-child(4).is-visible { transform: scale(1) rotate(-5deg); }
.farm-lineup img:nth-child(5) { left: 48%; bottom: 6%;  width: clamp(45px, 9vw, 66px); z-index: 5; transform: scale(.25) rotate(9deg); }
.farm-lineup img:nth-child(5).is-visible { transform: scale(1) rotate(9deg); }

.hero-product--farm .farm-star {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 20%;
  transform: translateX(-46%) scale(1) translateY(0);
  width: min(58%, 250px);
  margin: 0;
  opacity: 1;
  animation: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.hero-product--farm .farm-star.is-hidden {
  opacity: 0;
  transform: translateX(-10%) translateY(70px) scale(.28);
}
@media (prefers-reduced-motion: reduce) {
  .farm-lineup img, .hero-product--farm .farm-star { transition: none; }
}

/* ---------- 7. SECTIONS ---------- */
.section { padding-block: var(--section-y); }
.section.alt { background: #E4EEFB; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap;
}
.view-all {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--blue);
}
.view-all:hover { text-decoration: underline; }

/* ---------- 8. CATEGORY PODS — playful sticker-style badges ---------- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--gap);
}
.category-card {
  --accent: var(--blue);
  --accent-soft: #EEF4FC;
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  background: linear-gradient(165deg, #fff 0%, var(--accent-soft) 145%);
  border: 3px solid #fff;
  border-radius: 26px;
  padding: 1.1rem .6rem 1.15rem;
  box-shadow: 0 10px 22px -12px rgba(17, 32, 59, .28), 0 0 0 1px rgba(17, 32, 59, .05);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* gentle alternating tilt, like scattered stickers */
.category-card:nth-child(4n+1) { --tilt: -2deg; }
.category-card:nth-child(4n+2) { --tilt: 1.5deg; }
.category-card:nth-child(4n+3) { --tilt: -1.5deg; }
.category-card:nth-child(4n+4) { --tilt: 2deg; }
.category-card:hover {
  z-index: 20;
  transform: rotate(0deg) translateY(-7px) scale(1.04);
  box-shadow: 0 22px 36px -16px var(--accent), 0 0 0 1px rgba(17, 32, 59, .06);
}
/* per-category color coding, matched to each page's own theme accent */
.category-card:nth-child(1) { --accent: #FF7A3D; --accent-soft: #FFE7DD; } /* dragons */
.category-card:nth-child(2) { --accent: #1E9E7F; --accent-soft: #DDF6EF; } /* dinos */
.category-card:nth-child(3) { --accent: #2B5FCC; --accent-soft: #DCF2FC; } /* small animals */
.category-card:nth-child(4) { --accent: #3B5BDB; --accent-soft: #E1E9FD; } /* dogs */
.category-card:nth-child(5) { --accent: #7A5CFF; --accent-soft: #ECE6FF; } /* seasonal */
.category-card:nth-child(6) { --accent: #9B5DE5; --accent-soft: #EDE1FA; } /* dummy13 */
.category-card:nth-child(7) { --accent: #E0A400; --accent-soft: #FFF7D6; } /* specialty */
.category-card:nth-child(8) { --accent: #64748B; --accent-soft: #E7ECF3; } /* mechanical */

.category-card .thumb {
  position: relative;
  width: 92%;
  aspect-ratio: 1 / 1;
  margin: 0 auto .85rem;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(150deg, var(--accent-soft), var(--accent));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .65), 0 10px 18px -8px rgba(17, 32, 59, .3);
}
/* on hover, let the photo escape its circular frame so the whole animal is visible */
.category-card:hover .thumb { overflow: visible; }
.category-card .thumb img:not(.thumb-pop) {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: width .4s var(--ease), height .4s var(--ease),
              left .4s var(--ease), top .4s var(--ease),
              filter .4s var(--ease);
}
/* plain single-image cards (Dino) escape toward the corner; excluded here so it doesn't
   out-specificity the centered thumb-photo/thumb-pop rules below on the dual-image cards */
.category-card:hover .thumb img:not(.thumb-photo):not(.thumb-pop) {
  left: -35%; top: -35%;
  width: 170%; height: 170%;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(17, 32, 59, .4));
}
/* cards with a background-free "pop" cutout: photo fades out, cutout grows straight out of the circle */
.category-card .thumb-photo { transition: width .4s var(--ease), height .4s var(--ease), left .4s var(--ease), top .4s var(--ease), opacity .35s var(--ease); }
.category-card:hover .thumb-photo { opacity: 0; }
.category-card .thumb-pop {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  width: 68%; height: 68%;
  max-width: none;
  transform: translate(-50%, -50%) scale(.82);
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 16px 22px rgba(17, 32, 59, .4));
  transition: opacity .4s var(--ease), transform .4s var(--ease), width .4s var(--ease), height .4s var(--ease);
}
.category-card:hover .thumb-pop {
  opacity: 1;
  width: 148%; height: 148%;
  transform: translate(-50%, -50%) scale(1);
}
/* Dragons pop 2x bigger, Dogs pop 2.5x bigger than the standard hover size */
.category-card:nth-child(1):hover .thumb-pop { width: 296%; height: 296%; }
.category-card:nth-child(4):hover .thumb-pop { width: 370%; height: 370%; }
.category-card .emoji-badge {
  position: absolute;
  z-index: 2;
  top: .35rem; right: .3rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: #fff;
  border-radius: 50%;
  font-size: 1.05rem;
  box-shadow: 0 6px 12px rgba(17, 32, 59, .22), 0 0 0 3px #fff;
  transform: rotate(12deg);
  transition: transform .3s var(--ease);
}
.category-card:hover .emoji-badge { transform: rotate(-6deg) scale(1.12); }
.category-card .info h3 { margin-bottom: .2rem; font-size: 1.05rem; }
.category-card .info p { margin: 0; color: var(--ink-soft); font-size: .82rem; }

.category-card.simple .thumb {
  display: grid;
  place-items: center;
}
.category-card.simple .icon {
  font-size: 2.3rem;
  display: inline-block;
  animation: gearSpin 7s linear infinite;
}
.category-card.simple .info p {
  display: inline-flex;
  margin-top: .3rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
@keyframes gearSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .category-card.simple .icon { animation: none; }
}

/* ---------- 9. PRODUCT TILES ---------- */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}
.product-tile {
  position: relative;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-tile);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.product-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-tile .tile-img {
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: .8rem;
}
.product-tile .tile-img img { width: 100%; height: 100%; object-fit: contain; }
.product-tile h3 { font-size: 1rem; }
.product-tile .price { color: var(--blue); font-weight: 700; font-family: var(--font-display); }
.product-tile .badge-hot {
  position: absolute; top: .8rem; left: .8rem;
  background: var(--yellow); color: var(--ink);
  font-family: var(--font-display); font-weight: 700;
  font-size: .65rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 999px;
}
.product-tile .btn { width: 100%; margin-top: .8rem; }

/* ---------- 10. PROMO BANDS ---------- */
.band {
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-md);
}
.band.farm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  background:
    linear-gradient(120deg, var(--yellow) 0%, var(--yellow) 42%, var(--blue) 42%, var(--blue) 100%);
  color: var(--ink);
}
.band.h2c {
  background: linear-gradient(135deg, var(--blue), var(--sky));
}
.band h2 { color: inherit; }
.band p { color: inherit; opacity: .92; }

.band-text { flex: 1 1 260px; min-width: 240px; }
/* barn + the full farm-set lineup (cow, pig, chicken, horse, longhorn), scattered
   the same way as the hero's farm scene, just scaled down for the band */
.band-art {
  position: relative;
  flex: 1 1 320px;
  width: clamp(260px, 34vw, 420px);
  aspect-ratio: 16 / 10;
}
.band-barn {
  position: absolute;
  z-index: 1;
  left: 0%;
  bottom: 6%;
  width: 42%;
  filter: drop-shadow(0 14px 20px rgba(17, 32, 59, .3));
  animation: floaty 6s ease-in-out infinite;
}
.band-critter {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 8px 12px rgba(17, 32, 59, .25));
  animation: floaty 7s ease-in-out infinite;
}
.band-critter--cow      { width: 20%; left: 6%;  bottom: -8%;  animation-delay: -1s; }
.band-critter--pig      { width: 15%; left: 27%; bottom: -14%; animation-delay: -3s; }
.band-critter--chicken  { width: 13%; left: 44%; bottom: 4%;   animation-delay: -5s; }
.band-critter--horse    { width: 20%; left: 58%; bottom: 16%;  animation-delay: -2s; }
.band-critter--longhorn { width: 24%; left: 76%; bottom: 2%;   animation-delay: -4s; }
@media (max-width: 640px) {
  .band.farm { flex-direction: column; text-align: center; }
  .band-art { order: -1; width: 100%; max-width: 380px; margin: 0 auto 2.5rem; }
}

/* ---------- 11. VIDEO / HOW-IT'S-MADE GRID ---------- */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 860px) { .videos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .videos-grid { grid-template-columns: 1fr; } }
.video-card {
  --accent: var(--blue);
  --accent-soft: #EEF4FC;
  position: relative;
  background: linear-gradient(165deg, #fff 0%, var(--accent-soft) 145%);
  border: 3px solid #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 22px -12px rgba(17, 32, 59, .28), 0 0 0 1px rgba(17, 32, 59, .05);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.video-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 20px 32px -16px var(--accent), 0 0 0 1px rgba(17, 32, 59, .06); }
.video-card:nth-child(6n+1) { --accent: #2B5FCC; --accent-soft: #DCF2FC; }
.video-card:nth-child(6n+2) { --accent: #FF7A3D; --accent-soft: #FFE7DD; }
.video-card:nth-child(6n+3) { --accent: #1E9E7F; --accent-soft: #DDF6EF; }
.video-card:nth-child(6n+4) { --accent: #9B5DE5; --accent-soft: #EDE1FA; }
.video-card:nth-child(6n+5) { --accent: #E0A400; --accent-soft: #FFF7D6; }
.video-card:nth-child(6n+6) { --accent: #3B5BDB; --accent-soft: #E1E9FD; }
.video-card .frame { position: relative; }
.video-card video, .video-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #0b1020; }
.video-card .badge {
  position: absolute;
  z-index: 2;
  top: .6rem; left: .6rem;
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(11, 16, 32, .72);
  color: #fff;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.video-card .badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.video-card .cap { padding: .7rem .9rem; font-weight: 600; font-size: .88rem; color: var(--ink); }

/* ---------- 12. FOOTER ---------- */
.site-footer {
  background: var(--white);
  border-top: 1px solid var(--tile-border);
  margin-top: var(--section-y);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
  padding-block: 2.4rem;
}
.site-footer h4 { font-size: .95rem; margin-bottom: .6rem; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.foot-links a { color: var(--ink-soft); font-size: .9rem; }
.foot-links a:hover { color: var(--blue); }
.legal-bar { border-top: 1px solid var(--tile-border); }
.legal-bar .legal {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1rem; flex-wrap: wrap;
  color: var(--ink-soft); font-size: .82rem;
}
.inline-links { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }

/* ---------- 13. SCROLL ANIMATIONS ---------- */
/* Add .reveal to any element; JS toggles .is-visible when it enters view.
   Stagger children with inline style="--i:0", "--i:1", ... */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.07s);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-product img, .hero-product .hero-subject, .hero-product .hero-scene { animation: none; transition: none; }
  .band-barn, .band-critter { animation: none; }
  .video-card .badge .dot { animation: none; }
}

/* ---------- 14. RESPONSIVE NAV ---------- */
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .main-nav ul {
    position: absolute; top: 100%; right: 0;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--tile-border);
    border-radius: 0 0 var(--radius-tile) var(--radius-tile);
    padding: 1rem 1.4rem;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .main-nav ul.open { display: flex; }
  .header-search { display: none; }
}

/* ---------- 16. CATEGORY SUBNAV (slim type bar, Scout-style) ----------
   Sits directly under the sticky header on category/sub-pages so every
   sibling page is one click away. Horizontal-scrolls on small screens. */
.subnav {
  background: #0b0f17;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.subnav .container {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.subnav .container::-webkit-scrollbar { display: none; }
.subnav .subnav-label {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5b6778;
  padding-block: .85rem;
}
.subnav a {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #96a2b8;
  padding: .85rem 0 calc(.85rem - 2px);
  border-bottom: 2px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.subnav a:hover { color: #fff; }
.subnav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.subnav .sep {
  flex: 0 0 auto;
  width: 1px;
  height: 1.05em;
  background: rgba(255, 255, 255, .25);
}

/* ---------- 17. FLOATING CART TOAST ---------- */
.cart-toast-float {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%) translateY(16px);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 300;
}
.cart-toast-float.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   15. PER-PAGE THEME PRESETS
   Apply the matching class to <body>. Each overrides only the
   accent + hero wash; everything else inherits.
   ============================================================ */
.theme-home    { --accent-start: var(--yellow); --accent-end: var(--blue);  --hero-tint: #FFF7D6; }
.theme-dragons { --accent-start: #FF7A3D; --accent-end: #FF5277; --hero-tint: #FFE7DD; }
.theme-dinos   { --accent-start: #2BC4A8; --accent-end: #1E9E7F; --hero-tint: #DDF6EF; }
.theme-animals { --accent-start: #36C5F0; --accent-end: #2B5FCC; --hero-tint: #DCF2FC; }
.theme-dogs    { --accent-start: #5B8DEF; --accent-end: #3B5BDB; --hero-tint: #E1E9FD; }
.theme-dummy13 { --accent-start: #9B5DE5; --accent-end: #6A3CC4; --hero-tint: #EDE1FA; }

/* ── Site-wide Search (theme.css pages) ───────────────────────────────────── */
.search-wrap { position:relative; }
.site-search {
  width:180px;
  background:#fff;
  border:1.5px solid var(--tile-border);
  border-radius:8px;
  color:var(--ink);
  padding:.38rem .75rem .38rem 2rem;
  font-size:.875rem;
  outline:none;
  transition:border-color .2s, width .25s, box-shadow .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%235E76A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:8px center;
}
.site-search::placeholder { color:var(--ink-soft); }
.site-search:focus { border-color:var(--blue); width:230px; box-shadow:0 0 0 3px rgba(43,95,204,.12); }
.site-search::-webkit-search-cancel-button { display:none; }
.search-drop {
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:290px;
  background:var(--white);
  border:1.5px solid var(--tile-border);
  border-radius:12px;
  box-shadow:var(--shadow-md);
  list-style:none;
  margin:0;
  padding:.4rem 0;
  z-index:200;
}
.search-drop.open { display:block; }
.search-drop li[role=option] a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.48rem 1rem;
  text-decoration:none;
  color:var(--ink);
}
.search-drop li[role=option]:hover a,
.search-drop li.sr-active a { background:var(--bg); }
.sr-left { display:flex; flex-direction:column; }
.sr-name { font-size:.875rem; font-weight:500; }
.sr-cat { font-size:.75rem; color:var(--ink-soft); }
.sr-price { font-size:.8rem; font-weight:700; color:var(--blue); white-space:nowrap; }
.sr-none { padding:.55rem 1rem; color:var(--ink-soft); font-size:.875rem; }

@media (max-width:640px){
  .site-search { width:110px; font-size:.8rem; }
  .site-search:focus { width:155px; }
  .search-drop { min-width:240px; right:-10px; }
}
.theme-seasonal{ --accent-start: #7A5Cff; --accent-end: #FF7A3D; --hero-tint: #ECE6FF; }
