/** Shopify CDN: Minification failed

Line 8301:0 Unexpected "}"

**/
/* ============================================================
   Schnerds Theme — Global Styles
   ============================================================ */

:root {
  --paper: #FBF3E4;
  --ink: #1A1614;
  --pink: #FF2E92;
  --blue: #22A7E0;
  --yellow: #FFD21E;
  --green: #3DBB4E;
  --red: #ED2225;
  --shadow: rgba(26, 22, 20, 0.16);
  --font-display: 'Fredoka', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Dot grid texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .04;
  background-image: radial-gradient(var(--ink) 1px, transparent 1px);
  background-size: 7px 7px;
}

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

/* ============================================================
   Layout utility
   ============================================================ */
.sn-wrap {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.sn-section { padding: 60px 0; }

.sn-sec-head { text-align: center; margin-bottom: 14px; }
.sn-sec-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: -1px;
}
.sn-sec-head p { color: #4a423d; font-size: 17px; margin-top: 22px; }

/* ============================================================
   Buttons
   ============================================================ */
.sn-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  padding: 15px 30px;
  border-radius: 50px;
  border: 3px solid var(--ink);
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
  display: inline-block;
  background: #fff;
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.sn-btn-primary { background: var(--pink); color: #fff; }
.sn-btn:hover,
.sn-btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
  outline: none;
}

/* ============================================================
   Announcement bar
   ============================================================ */
.sn-announce {
  background: var(--ink);
  color: rgba(255,255,255,0.85);
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 16px;
  letter-spacing: .2px;
}
.sn-announce a { color: var(--pink); text-decoration: none; }
.sn-announce a:hover { text-decoration: underline; }

/* ============================================================
   Header / Nav
   ============================================================ */
.sn-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 2px solid rgba(26, 22, 20, 0.08);
}
.sn-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
.sn-nav-logo img { height: 44px; display: block; }
.sn-nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
}
.sn-nav-links a {
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s;
}
.sn-nav-links a:hover { border-color: var(--pink); }
.sn-nav-right {
  display: flex;
  gap: 16px;
  align-items: center;
}
.sn-nav-social {
  display: flex;
  gap: 12px;
  align-items: center;
}
.sn-nav-social a {
  color: var(--ink);
  opacity: .75;
  transition: opacity .15s;
  display: flex;
  align-items: center;
}
.sn-nav-social a:hover { opacity: 1; }
.sn-cart-btn {
  background: none;
  color: var(--ink);
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s;
  position: relative;
  display: flex;
  align-items: center;
}
.sn-cart-btn:hover { opacity: .85; }
.sn-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--pink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-family: var(--font-body);
  line-height: 1;
}

.sn-search-btn {
  background: none;
  border: none;
  color: var(--ink);
  opacity: .75;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: opacity .15s;
}
.sn-search-btn:hover { opacity: 1; }
.sn-search-panel {
  position: absolute;
  top: 100%;
  right: 20px;
  z-index: 30;
  max-width: calc(100% - 40px);
  width: 340px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 4px 5px 0 rgba(26,22,20,0.12);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.sn-search-panel.sn-search-open { opacity: 1; visibility: visible; transform: translateY(0); }
.sn-search-form { display: flex; align-items: center; gap: 8px; }
.sn-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: none;
  padding: 8px 4px;
}
.sn-search-input::placeholder { color: #a89e90; }
.sn-search-submit {
  background: var(--pink);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s;
}
.sn-search-submit:hover { transform: scale(1.06); }

.sn-mnav-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(26,22,20,0.05);
  border: 1.5px solid rgba(26,22,20,0.1);
  border-radius: 999px;
  padding: 11px 16px;
  margin: 4px 24px 14px;
  color: var(--ink);
}
.sn-mnav-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
}
.sn-mnav-search-input::placeholder { color: #a89e90; }

@media (max-width: 820px) {
  .sn-nav-links { display: none; }
}
@media (max-width: 500px) {
  .sn-nav-social { display: none; }
  .sn-search-panel { right: 12px; width: calc(100% - 24px); }
}

/* ============================================================
   Hero
   ============================================================ */

/* Break out of Shopify's center-column grid */
.full-width { grid-column: 1 / -1 !important; width: 100%; }

/* 3-column grid: [chars] [text] [chars] */
.sn-hero {
  display: grid;
  grid-template-columns: clamp(150px, 16vw, 260px) 1fr clamp(150px, 16vw, 260px);
  align-items: center;
  min-height: calc(50vh - 74px);
  padding: 28px 0 32px;
  position: relative;
}

/* Center text column */
.sn-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
}

/* Left / right character columns */
.sn-hero-chars-left,
.sn-hero-chars-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  height: 100%;
  min-height: 340px;
}

/* Individual character images */
.sn-hc-img {
  width: 90%;
  height: auto;
  max-width: none !important;
  display: block;
  flex: 1;
  object-fit: contain;
}

/* Character animations — applied directly, no JS needed */
.sn-float-darlene { animation: sn-darlene 4.5s ease-in-out infinite; }
.sn-float-jimbob  { animation: sn-jimbob  3.8s ease-in-out infinite; }
.sn-float-hobart  { animation: sn-hobart  5.5s ease-in-out infinite; animation-delay: -.8s; }
.sn-float-juniper { animation: sn-juniper 5.0s ease-in-out infinite; animation-delay: -1.2s; }
.sn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 40px;
  border: 2.5px solid var(--ink);
  transform: rotate(-1.5deg);
  margin-bottom: 22px;
  box-shadow: 3px 3px 0 var(--ink);
}
.sn-hero h1 {
  align-self: stretch;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.sn-hl {
  position: relative;
  color: var(--pink);
  white-space: nowrap;
}
.sn-hl::after {
  content: "";
  position: absolute;
  left: -3%; right: -3%;
  bottom: 10%; height: 30%;
  background: var(--yellow);
  z-index: -1;
  transform: rotate(-1.2deg);
  border-radius: 4px;
}
.sn-hero .sub {
  font-size: clamp(17px, 2.4vw, 22px);
  max-width: 42ch;
  margin: 22px auto 0;
  color: #4a423d;
  line-height: 1.5;
}
.sn-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.sn-hero-cta { min-width: 190px; justify-content: center; }

/* Trust strip below CTAs */
.sn-hero-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
  font-size: 12px;
  color: #8a8178;
  font-weight: 600;
  flex-wrap: wrap;
}
.sn-trust-dot { color: rgba(26,22,20,0.2); }

/* Social proof below eyebrow */
.sn-hero-proof {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin: -10px 0 16px;
}
.sn-hero-proof-stars { color: var(--pink); font-size: 13px; letter-spacing: 1px; }
.sn-hero-proof-label { font-size: 12px; color: #8a8178; font-weight: 600; }

/* Hero headline — viewport units bypass flex inheritance issues */
.sn-hero-headline {
  display: block;
  width: clamp(300px, 38vw, 720px);
  height: auto;
  mix-blend-mode: multiply;
  margin: 0 auto;
}

/* Schnerd wordmark */
.sn-hero-wordmark {
  height: 1.25em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-top: .08em;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.22)) drop-shadow(2px 2px 0 rgba(0,0,0,.07));
}

/* Mobile character */
.sn-hero-mobile-char { display: none; }
@media (max-width: 480px) {
  .sn-hero-mobile-char {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
  .sn-hero-mobile-char img { width: 130px; height: auto; }
}

.sn-scrollcue {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 13px;
  color: #8a8178;
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: sn-scrollbounce 2.2s ease-in-out infinite;
}
@keyframes sn-scrollbounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* Pause character animations on hover */
.sn-float-darlene:hover,
.sn-float-jimbob:hover,
.sn-float-hobart:hover,
.sn-float-juniper:hover,
.sn-float-loveyourself:hover { animation-play-state: paused; }

/* Keep all hero text above the floating characters */
.sn-hero .sn-eyebrow,
.sn-hero h1,
.sn-hero .sub,
.sn-hero .sn-cta-row,
.sn-hero .sn-scrollcue {
  position: relative;
  z-index: 2;
}

/* Float animations — applied to .sn-hc-img via JS adding .sn-float class */

@keyframes sn-darlene { 0%{transform:rotate(-7deg) translateY(0) scale(1)}20%{transform:rotate(-18deg) translateY(-22px) scale(1.08)}40%{transform:rotate(-2deg) translateY(-10px) scale(0.96)}60%{transform:rotate(-20deg) translateY(-28px) scale(1.1)}80%{transform:rotate(-5deg) translateY(-14px) scale(0.98)}100%{transform:rotate(-7deg) translateY(0) scale(1)} }
@keyframes sn-jimbob  { 0%{transform:rotate(7deg) translateY(0) scale(1)}15%{transform:rotate(20deg) translateY(-15px) scale(1.12)}35%{transform:rotate(-4deg) translateY(-30px) scale(0.94)}55%{transform:rotate(18deg) translateY(-12px) scale(1.08)}75%{transform:rotate(0deg) translateY(-24px) scale(1.05)}100%{transform:rotate(7deg) translateY(0) scale(1)} }
@keyframes sn-hobart  { 0%,100%{transform:rotate(-4deg) translateY(0)}30%{transform:rotate(6deg) translateY(-18px) scale(1.04)}60%{transform:rotate(-10deg) translateY(-8px) scale(0.97)}80%{transform:rotate(3deg) translateY(-22px)} }
@keyframes sn-juniper { 0%{transform:rotate(5deg) translate(0,0)}25%{transform:rotate(12deg) translate(10px,-18px) scale(1.06)}50%{transform:rotate(2deg) translate(0,-28px) scale(0.96)}75%{transform:rotate(10deg) translate(-8px,-14px) scale(1.04)}100%{transform:rotate(5deg) translate(0,0)} }

/* One-time hero "peek" microinteraction — a tiny, single glance, layered on
   the standalone `translate` property so it composes with the infinite
   `transform` float above instead of fighting it. Runs once on load. */
@keyframes sn-hero-peek { 0%,100%{ translate: 0 0; } 50%{ translate: 4px -3px; } }

.sn-hc-left.sn-float  { animation: sn-darlene 4.5s ease-in-out infinite; }
.sn-hc-right.sn-float { animation: sn-jimbob 3.8s ease-in-out infinite; }
.sn-hc-left2.sn-float { animation: sn-hobart 5.5s ease-in-out infinite; animation-delay: -.8s; }
.sn-hc-right2.sn-float{ animation: sn-juniper 5.0s ease-in-out infinite; animation-delay: -1.2s; }

@media (max-width: 780px) {
  .sn-hero { grid-template-columns: clamp(80px, 10vw, 130px) 1fr clamp(80px, 10vw, 130px); }
  .sn-hero-chars-left, .sn-hero-chars-right { opacity: .5; min-height: 260px; }
}
@media (max-width: 480px) {
  .sn-hero-chars-left, .sn-hero-chars-right { display: none; }
}

/* Override Skeleton critical.css which forces height:auto on all images */
.sn-char-card img,
.sn-prod-pic img,
.sn-acc-link img,
.sn-story-photo img,
.sn-book-cover img,
.sn-ph img {
  height: auto;
  width: auto;
  max-width: 100%;
}

/* Hero headline image */
.sn-hero h1 img,
.sn-hero-headline {
  display: block !important;
  width: clamp(280px, 40vw, 700px) !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 auto;
  mix-blend-mode: multiply;
}

/* ============================================================
   Values — colored editorial cards, alternating sides
   ============================================================ */
.sn-values-headv2 { position: relative; }
.sn-values-doodles { position: absolute; inset: 0; pointer-events: none; }
.sn-vd { position: absolute; }

.sn-values-editorial {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sn-value-row {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 36px 44px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--val-c, var(--pink)) 12%, #fff);
  transition: transform .15s, box-shadow .15s;
}
.sn-value-row:nth-child(even) { flex-direction: row-reverse; }
.sn-value-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--val-c, var(--pink)) 22%, transparent);
}

.sn-val-char-wrap {
  position: relative;
  flex: 0 0 auto;
  width: clamp(110px, 14vw, 170px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sn-val-blob {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--val-c, var(--pink)) 22%, #fff);
}
.sn-val-accent { position: absolute; width: 18px; height: 18px; opacity: .85; }
.sn-val-acc-a { top: -6px; right: 6%; }
.sn-val-acc-b { bottom: 2%; left: -8px; width: 12px; height: 12px; }

.sn-val-num { display: none; } /* superseded by .sn-val-eyebrow */

.sn-val-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--val-c, var(--pink));
  margin-bottom: 6px;
}
.sn-val-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--val-c, var(--pink));
  margin: 0 0 10px;
}

.sn-val-desc {
  font-size: 15px;
  color: #4a423d;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0;
}

.sn-val-char {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  object-fit: contain;
  transition: transform .2s ease;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
}
.sn-value-row:hover .sn-val-char { transform: scale(1.08) rotate(4deg); }

/* CTA below editorial list */
.sn-values-cta {
  text-align: center;
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sn-values-cta > p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 30px);
  color: var(--ink);
  margin: 0;
  letter-spacing: -.5px;
}

@media (max-width: 700px) {
  .sn-value-row, .sn-value-row:nth-child(even) {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
    gap: 16px;
  }
  .sn-val-char-wrap { width: clamp(120px, 40vw, 160px); }
  .sn-val-desc { max-width: 42ch; margin: 0 auto; }
}

/* ============================================================
   Meet the Herd
   ============================================================ */
.sn-meet-sub { font-size: 20px; font-weight: 600; color: #4a423d; margin-top: 10px; }

.sn-herd {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 42px;
}
@media (max-width: 1000px) { .sn-herd { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .sn-herd { grid-template-columns: 1fr; } }

.sn-char-card {
  background: #fff;
  border: 2px solid rgba(26,22,20,0.1);
  border-top: 4px solid var(--char-c, var(--pink));
  border-radius: 22px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  box-shadow: 4px 4px 0 rgba(26,22,20,0.08);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
}
.sn-char-card:hover {
  transform: translate(-3px, -3px) rotate(-0.5deg);
  box-shadow: 7px 7px 0 var(--char-c, var(--ink));
  border-color: var(--char-c, var(--ink));
}

/* Image area */
.sn-char-card .sn-ph {
  height: 170px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 0 0;
}
.sn-char-card .sn-ph img { max-height: 158px; width: auto; }

/* Body */
.sn-char-body {
  padding: 14px 15px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Name logo or text */
.sn-char-name-wrap { margin-bottom: 4px; }
.sn-char-name-img {
  height: 38px;
  width: auto;
  max-width: 100%;
  display: block;
  mix-blend-mode: multiply;
}
.sn-char-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--char-c, var(--ink));
  margin: 0;
  letter-spacing: -0.5px;
}

/* Feeling tag */
.sn-char-card .sn-feel {
  color: var(--char-c, var(--pink));
  font-weight: 700;
  font-size: 11px;
  font-style: italic;
  margin: 0 0 8px;
  letter-spacing: 0;
}

/* Description */
.sn-char-card p { font-size: 12.5px; color: #4a423d; line-height: 1.45; margin: 0 0 8px; }

/* Review quote */
.sn-char-quote {
  font-size: 11px;
  color: #8a8178;
  font-style: italic;
  border-left: 2px solid rgba(26,22,20,0.1);
  padding-left: 8px;
  margin: 0 0 10px;
  line-height: 1.4;
}

/* Price + Adopt button */
.sn-char-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
}
.sn-char-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.sn-char-adopt-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  border-radius: 30px;
  padding: 6px 14px;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
  border: none;
}
.sn-char-adopt-btn:hover { opacity: .85; transform: translateY(-1px); }

.sn-char-coming {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #FF2E92;
  background: rgba(255,46,146,0.08);
  border: 1.5px solid rgba(255,46,146,0.25);
  border-radius: 20px;
  padding: 5px 14px;
  margin-top: auto;
  font-weight: 700;
  width: fit-content;
  align-self: center;
}

/* Love Yourself float */
.sn-float-loveyourself { animation: sn-loveyourself 5.8s ease-in-out infinite; animation-delay: -.5s; }
@keyframes sn-loveyourself { 0%,100%{transform:translateY(0) rotate(-1.5deg)}45%{transform:translateY(-16px) rotate(1.5deg) scale(1.04)}75%{transform:translateY(-7px) rotate(-.8deg)} }

/* Bridge to quiz */
.sn-meet-bridge {
  text-align: center;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.sn-meet-bridge > p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 28px);
  color: var(--ink);
  margin: 0;
  letter-spacing: -.5px;
}

/* ============================================================
   Quiz — dark ink theme
   ============================================================ */
.sn-quiz {
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 30px;
  padding: clamp(34px, 6vw, 64px);
  color: #fff;
  text-align: center;
  box-shadow: 7px 7px 0 rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Corner characters — peek in from edges, glow on dark bg */
.sn-qc { position: absolute; width: 130px; height: auto; opacity: 0.7; pointer-events: none; mix-blend-mode: screen; }
.sn-qc-tl { top: -35px;    left: -30px;   transform: rotate(-18deg); }
.sn-qc-tr { top: -35px;    right: -30px;  transform: rotate(18deg); }
.sn-qc-bl { bottom: -35px; left: -30px;   transform: rotate(12deg); }
.sn-qc-br { bottom: -35px; right: -30px;  transform: rotate(-12deg); }

.sn-quiz h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 46px);
  letter-spacing: -1px;
  color: #fff;
  transition: font-size .4s ease, opacity .4s ease;
}
.sn-quiz .sn-qlead { color: rgba(255,255,255,0.55); font-size: 17px; margin: 10px 0 8px; transition: opacity .4s ease, height .4s ease; }

/* Heading shrinks once quiz is in progress */
.sn-quiz-started h2 { font-size: clamp(14px, 2vw, 18px); opacity: 0.35; }
.sn-quiz-started .sn-qlead { opacity: 0; height: 0; margin: 0; overflow: hidden; pointer-events: none; }

.sn-qbody { max-width: 580px; margin: 20px auto 0; }

/* Progress dots */
.sn-qdots { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
.sn-qdot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background .3s, transform .3s;
}
.sn-qdot.sn-qdot-active { background: #fff; transform: scale(1.3); }
.sn-qdot.sn-qdot-done   { background: rgba(255,255,255,0.5); }

/* Progress bar — only shows after first answer */
.sn-qprogbar-wrap { height: 3px; background: transparent; border-radius: 3px; margin: 10px 0 24px; overflow: hidden; transition: background .3s; }
.sn-quiz-started .sn-qprogbar-wrap { background: rgba(255,255,255,0.1); }
.sn-qprogbar { height: 100%; background: var(--pink); border-radius: 3px; width: 0%; transition: width 0.35s ease; }

.sn-qq {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.5vw, 32px);
  margin-bottom: 24px;
  min-height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  color: #fff;
}

/* Question + option animations */
@keyframes sn-qslide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
.sn-q-enter { animation: sn-qslide 0.22s ease; }
@keyframes sn-qopt-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.sn-qopt-enter { animation: sn-qopt-fade 0.28s ease both; }

.sn-qopts { display: grid; gap: 10px; }
.sn-qopt {
  background: rgba(255,255,255,0.09);
  border: 1.5px solid rgba(255,255,255,0.16);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 18px;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: transform .15s, background .15s, box-shadow .15s;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sn-qopt:hover,
.sn-qopt:focus-visible {
  background: rgba(255,255,255,0.16);
  box-shadow: inset 4px 0 0 var(--pink);
  transform: translateX(5px);
  outline: none;
}
.sn-qopt.sn-qopt-selected {
  background: rgba(255,46,146,0.22);
  box-shadow: inset 4px 0 0 var(--pink);
  transform: scale(0.98);
}
.sn-qopt:disabled { pointer-events: none; }
.sn-qemoji { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }

/* Result */
.sn-qresult { display: none; }
.sn-qresult.sn-show { display: block; animation: sn-pop .5s ease; }
@keyframes sn-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.sn-rchar-img { max-height: 200px; width: auto; margin: 0 auto 4px; display: block; }
.sn-rname-img { height: 60px; width: auto; max-width: 280px; display: block; margin: 8px auto 6px; mix-blend-mode: screen; }
.sn-rfeel { color: var(--pink); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; margin: 4px 0 10px; }
.sn-rdesc { color: rgba(255,255,255,0.78); max-width: 46ch; margin: 0 auto 4px; line-height: 1.55; }
.sn-rrunnerup { font-size: 12px; color: rgba(255,255,255,0.38); font-style: italic; margin: 8px auto 0; max-width: 36ch; }
.sn-result-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 20px 0 16px; }

.sn-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.32);
  border-radius: 50px;
  padding: 13px 22px;
  transition: background .12s, border-color .12s;
  background: transparent;
}
.sn-share-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }

.sn-emailcap {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 16px auto 0;
  flex-wrap: wrap;
  justify-content: center;
}
.sn-emailcap input {
  flex: 1;
  min-width: 200px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 15px;
  font-family: var(--font-body);
}
.sn-emailcap input::placeholder { color: rgba(255,255,255,0.38); }
.sn-again {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  cursor: pointer;
  margin-top: 16px;
  text-decoration: underline;
  transition: color .15s;
}
.sn-again:hover { color: rgba(255,255,255,0.8); }

@media (max-width: 600px) {
  .sn-qopt { padding: 16px 14px; font-size: 14px; }
}

/* ============================================================
   Motion (YouTube)
   ============================================================ */
.sn-motion { text-align: center; }

.sn-motion-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 40px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  box-shadow: 3px 3px 0 var(--shadow);
}

.sn-motion-sub {
  color: #4a423d;
  font-size: 17px;
  margin-top: 6px;
  font-weight: 500;
}

.sn-motion-stage {
  position: relative;
  max-width: 820px;
  margin: 18px auto 0;
}

.sn-motion-pretitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8a8178;
  margin-bottom: 8px;
}

.sn-player {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 7px 7px 0 var(--shadow);
  overflow: hidden;
}

/* Branded loading placeholder */
.sn-player-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  z-index: 0;
  gap: 16px;
}
.sn-player-placeholder img { height: 100px; width: auto; opacity: 0.5; }
.sn-player-play-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.sn-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  z-index: 1;
}

/* Character peeking beside video */
.sn-motion-char {
  position: absolute;
  width: 120px;
  right: -44px;
  bottom: -24px;
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}
@media (max-width: 960px) { .sn-motion-char { display: none; } }

/* Footer below video */
.sn-motion-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.sn-motion-caption {
  font-size: 16px;
  color: #4a423d;
  max-width: 46ch;
  line-height: 1.55;
  font-style: italic;
  margin: 0;
}
.sn-motion-cta { font-size: 16px; }

.sn-motion-socials {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.sn-motion-social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 40px;
  padding: 8px 18px;
  transition: background .12s, color .12s;
  box-shadow: 3px 3px 0 var(--shadow);
}
.sn-motion-social-link:hover { background: var(--ink); color: #fff; }

/* ============================================================
   Story
   ============================================================ */
.sn-story {
  border-radius: 30px;
  padding: clamp(48px, 7vw, 80px) clamp(34px, 6vw, 64px) 260px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: start;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
  background-color: #1a1614;
  position: relative;
  overflow: hidden;
}

/* Dark overlay covers content area, always stops 220px from bottom leaving mural clear */
.sn-story::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 220px;
  background: rgba(0, 0, 0, 0.72);
  z-index: 0;
  border-radius: 27px 27px 0 0;
}

.sn-story-content,
.sn-story-photo { position: relative; z-index: 1; }
.sn-story-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.2) 100%);
  pointer-events: none;
}
.sn-story-content { position: relative; z-index: 1; }
.sn-story-photo  { position: relative; z-index: 1; }
.sn-story h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1.06;
  letter-spacing: -1px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.sn-story p {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  max-width: 46ch;
}
.sn-story .sn-btn { margin-top: 24px; }
.sn-story-photo img {
  width: 100%;
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  display: block;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.sn-story-photo-caption {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  text-align: center;
  margin-top: 8px;
}
.sn-story-press {
  display: block;
  text-align: center;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pink);
  text-decoration: none;
}
.sn-story-press:hover { text-decoration: underline; }
.sn-story-mission {
  border-left: 3px solid var(--pink);
  padding-left: 16px;
  margin: 18px 0 10px;
  font-size: 17px;
  color: rgba(255,255,255,0.92);
  font-style: italic;
  line-height: 1.55;
  font-weight: 500;
}
.sn-story-mantra {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--pink);
  margin: 0 0 18px;
  letter-spacing: .2px;
}
@media (max-width: 760px) {
  .sn-story { grid-template-columns: 1fr; }
  .sn-story-photo { display: none; }
}

/* ============================================================
   Shop / Adopt
   ============================================================ */
.sn-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 42px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 820px) { .sn-shop-grid { grid-template-columns: 1fr; } }

.sn-prod {
  background: #fff;
  border: 1.5px solid rgba(26,22,20,0.1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(26,22,20,0.08);
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.sn-prod:hover {
  transform: translate(-4px, -4px);
  box-shadow: 7px 7px 0 var(--char-color, rgba(26,22,20,0.2));
}
.sn-prod-pic {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fff;
  overflow: hidden;
  transition: background .3s;
}

.sn-prod-pic img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.sn-prod-pic video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}
.sn-prod-body {
  padding: 22px 22px 20px;
  border-top: 2px solid rgba(26,22,20,0.12);
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff; /* overridden per-card via inline style */
}
.sn-cert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 30px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 11px;
  width: fit-content;
}
/* Top row: cert + urgency badge */
.sn-prod-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }

/* Urgency badge */
.sn-urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff3cd;
  border: 1.5px solid #e6b800;
  color: #7a5c00;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
}
.sn-urgency-badge::before { content: '⏱'; font-size: 10px; }

/* Star rating */
.sn-prod-stars { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.sn-stars { color: var(--pink); font-size: 16px; letter-spacing: 2px; line-height: 1; }
.sn-stars-label { font-size: 11px; font-weight: 500; color: #8a8178; }

/* Pull quote — border-left-color set per-character via inline style */
.sn-pull-quote {
  font-size: 14px;
  font-style: italic;
  color: var(--ink);
  font-weight: 600;
  border-left: 4px solid var(--ink);
  padding-left: 10px;
  margin: 10px 0;
  line-height: 1.4;
}

/* Certificate strip — compact pill, shrinks to content width */
.sn-cert-strip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  background: rgba(255,251,235,.9);
  border: 1.5px solid rgba(214,170,0,.55);
  border-radius: 20px;
  padding: 4px 12px 4px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b4f00;
  margin: 8px 0 14px;
}

/* Clickable product image */
.sn-prod-pic-link { display: block; text-decoration: none; }

/* Buy row right-side actions */
.sn-prod-buy-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Price + dimension stacked */
.sn-prod-price-block { display: flex; flex-direction: column; gap: 2px; }
.sn-prod-dim { font-size: 10.5px; color: #8a8178; font-weight: 500; letter-spacing: .2px; }

.sn-prod-name {
  margin-bottom: 10px;
}
.sn-char-name-img {
  height: 58px;
  width: auto;
  max-width: 100%;
  display: block;
  mix-blend-mode: multiply;
}
.sn-prod-hook {
  color: #6a5f58;
  font-weight: 600;
  font-size: 12.5px;
  font-style: italic;
  margin: 3px 0 10px;
}
.sn-prod-desc {
  font-size: 13.5px;
  color: #4a423d;
  line-height: 1.45;
  flex: 1;
}
.sn-prod-buy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}
.sn-prod-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sn-prod-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
}
.sn-add-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  background: var(--pink);
  color: #fff;
  border: 2px solid rgba(26,22,20,0.15);
  border-radius: 14px;
  padding: 14px 20px;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
  width: 100%;
  display: block;
}
.sn-add-btn:hover { opacity: .88; transform: translateY(-1px); }
.sn-add-btn:disabled { opacity: .55; cursor: default; }

.sn-cert-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: #7a6a50;
  font-weight: 600;
  margin: 0;
  text-align: center;
}
.sn-backorder {
  font-size: 11px;
  color: #8a8178;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ============================================================
   Reviews marquee
   ============================================================ */
.sn-reviews-marquee {
  overflow: hidden;
  padding: 0 0 16px;
  grid-column: 1 / -1 !important;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.sn-rv-track {
  display: flex;
  gap: 18px;
  width: auto;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 8px 10px;
}
.sn-rv-track::-webkit-scrollbar { display: none; }
/* Reviews no longer auto-scroll — visitors drag/swipe (or use the arrows)
   at their own pace. */

/* Each column stacks 2 cards. Cards keep their natural content height, so
   columns land at different total heights next to each other — a scattered,
   staggered look while everything still sits edge-to-edge and connected. */
.sn-rv-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* Prev/next nav arrows */
.sn-rv-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.sn-rv-arrow svg { width: 18px; height: 18px; }
.sn-rv-arrow:hover { transform: translateY(-50%) translate(-1px,-1px); box-shadow: 4px 4px 0 var(--shadow); }
.sn-rv-arrow-prev { left: 18px; }
.sn-rv-arrow-next { right: 18px; }
@media (max-width: 700px) {
  .sn-rv-arrow { display: none; }
}

/* Scorecard — simplified, confident */
.sn-rv-scorecard {
  text-align: center;
  max-width: 340px;
  margin: 0 auto 52px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 24px;
  padding: 32px 40px;
  box-shadow: 6px 6px 0 var(--shadow);
}
.sn-rv-score-num { font-family: var(--font-display); font-size: 72px; font-weight: 700; line-height: 1; color: var(--ink); }
.sn-rv-score-stars { color: var(--pink); font-size: 22px; letter-spacing: 3px; margin: 10px 0 8px; }
.sn-rv-score-perfect { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.sn-rv-score-count { font-size: 12px; color: #8a8178; font-weight: 500; }

/* Review card — natural height (varies with content, that's what
   creates the staggered look between columns) */
.sn-rv {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 20px 22px;
  width: 300px;
  flex-shrink: 0;
  box-shadow: 4px 4px 0 var(--shadow);
  display: flex;
  flex-direction: column;
}

/* Reviewer header: avatar + name + stars */
.sn-rv-header { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.sn-rv-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Rotate avatar colors */
.sn-rv:nth-child(6n+1) .sn-rv-avatar { background: #4A8FD4; }
.sn-rv:nth-child(6n+2) .sn-rv-avatar { background: #E8920E; }
.sn-rv:nth-child(6n+3) .sn-rv-avatar { background: #3DBB4E; }
.sn-rv:nth-child(6n+4) .sn-rv-avatar { background: #FF2E92; }
.sn-rv:nth-child(6n+5) .sn-rv-avatar { background: #D4A017; }
.sn-rv:nth-child(6n+6) .sn-rv-avatar { background: var(--ink); }

.sn-rv-name  { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.2; }
.sn-rv-badge {
  background: var(--pink);
  color: #fff;
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}
.sn-rv-stars { color: var(--pink); font-size: 12px; margin-top: 2px; letter-spacing: 1px; }

/* Character chip */
.sn-rv-char-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  border-radius: 20px; padding: 3px 10px;
  margin-bottom: 8px; width: fit-content;
}
.sn-rv-chip-darlene { background: #C8E4F8; color: #1A5A8A; }
.sn-rv-chip-hobart  { background: #FADDBE; color: #7A4200; }
.sn-rv-chip-juniper { background: #FAF0B0; color: #6A5200; }
.sn-rv-chip-jimbob  { background: #C0F0C8; color: #1A5A2A; }

.sn-rv-title  { font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 6px; }
.sn-rv-body {
  font-size: 13px; color: #4a423d; line-height: 1.55; flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.sn-rv-date   { font-size: 11px; color: #8a8178; margin-top: 10px; flex-shrink: 0; }

/* CTA below reviews — dark container */
.sn-rv-bottom {
  text-align: center;
  padding: 52px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--ink);
  border-radius: 28px;
  margin-top: 52px;
}
.sn-rv-bottom-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.5vw, 36px);
  letter-spacing: -1px;
  margin: 0;
  color: #fff;
}
.sn-rv-cta-btn {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
  font-size: 17px;
}
.sn-rv-leave {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sn-rv-leave:hover { color: rgba(255,255,255,0.8); }

@media (max-width: 600px) {
  .sn-rv-track { animation-duration: 28s !important; }
  .sn-rv { width: 260px; }
  .sn-rv-scorecard { gap: 20px; padding: 18px 20px; }
  .sn-rv-score-num { font-size: 40px; }
}

/* ============================================================
   Book Pre-Order — dark space theme
   ============================================================ */
.sn-book-heading { margin-bottom: 28px; }

.sn-book-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 52px;
  align-items: center;
  background-color: #0E1630;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.2) 1.5px, transparent 1.5px);
  background-size: 90px 90px, 55px 55px, 130px 130px;
  background-position: 8px 8px, 32px 22px, 65px 50px;
  border: 3px solid #0E1630;
  border-radius: 28px;
  padding: clamp(28px, 5vw, 52px);
  box-shadow: 7px 7px 0 rgba(14,22,48,0.35);
  position: relative;
  overflow: hidden;
}

.sn-book-cover {
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  transition: transform .25s ease, box-shadow .25s ease;
  transform: perspective(1200px) rotateY(-4deg);
  position: relative;
  z-index: 1;
}
.sn-book-cover:hover {
  transform: perspective(1200px) rotateY(0deg) scale(1.02);
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}
.sn-book-cover img { width: 100%; display: block; }

.sn-book-content { display: flex; flex-direction: column; position: relative; z-index: 1; }

/* Badges row */
.sn-book-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sn-preorder-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  padding: 5px 14px;
  border-radius: 40px;
  border: none;
}
.sn-book-format-tag { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: .3px; }

/* Toy Fair award badge */
.sn-book-award {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212,160,23,0.14);
  border: 1.5px solid rgba(212,160,23,0.4);
  color: #D4A017;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
  width: fit-content;
}

.sn-book-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -.5px;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 6px;
}
.sn-book-author { font-size: 12px; color: rgba(255,255,255,0.38); font-weight: 500; margin-bottom: 10px; }
.sn-book-desc { font-size: 14.5px; color: rgba(255,255,255,0.72); line-height: 1.6; margin-bottom: 10px; }

/* What's inside spec list */
.sn-book-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sn-book-specs li {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}
.sn-book-specs li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--pink);
  font-size: 9px;
  top: 3px;
}

.sn-book-xsell { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 600; margin-bottom: 14px; font-style: italic; }

.sn-book-meta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sn-book-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
}

.sn-book-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.sn-book-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  color: #fff;
  line-height: 1;
}

.sn-book-cta-btn {
  background: var(--pink);
  color: #fff;
  border: none;
  font-size: 15px;
  padding: 14px 26px;
  box-shadow: 0 4px 24px rgba(255,46,146,0.45);
  transition: opacity .15s, transform .12s, box-shadow .15s;
}
.sn-book-cta-btn:hover {
  opacity: .92;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,46,146,0.55);
}

/* Trust line */
.sn-book-trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.3);
  font-weight: 500;
  margin: 0;
}

@media (max-width: 760px) {
  .sn-book-grid { grid-template-columns: 1fr; gap: 28px; }
  .sn-book-cover { transform: none; }
}

/* ============================================================
   Accessories
   ============================================================ */
.sn-acc-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.sn-acc-tab {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 9px 20px;
  border-radius: 50px;
  border: 2.5px solid var(--ink);
  background: #fff;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, background .12s, color .12s;
}
.sn-acc-tab:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.sn-acc-tab.is-active { background: var(--pink); color: #fff; }
@media (max-width: 600px) { .sn-acc-tab { font-size: 12.5px; padding: 8px 15px; } }

.sn-acc-category { margin-bottom: 44px; }

.sn-acc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(26,22,20,0.08);
}
.sn-acc-header-left { display: flex; flex-direction: column; gap: 3px; }
.sn-acc-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
}
.sn-acc-cat-desc {
  font-size: 12px;
  color: #8a8178;
  font-weight: 500;
}
.sn-acc-price {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--pink);
  font-weight: 700;
  white-space: nowrap;
  padding-top: 4px;
}

.sn-acc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 700px) { .sn-acc-grid { grid-template-columns: repeat(2, 1fr); } }

/* Item container */
.sn-acc-item { text-align: center; position: relative; }

/* Fan Favorite badge */
.sn-acc-fav {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-display);
  padding: 2px 10px;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 2px 2px 0 var(--shadow);
}

/* Product image link */
.sn-acc-link {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(26,22,20,0.12);
  background: #fff;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  box-shadow: 3px 3px 0 var(--shadow);
  position: relative;
}
.sn-acc-link:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--acc-c, var(--ink));
  border-color: var(--acc-c, var(--ink));
}
.sn-acc-link img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }

/* "Shop [Name] →" hover overlay */
.sn-acc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: transparent;
  transition: background .18s, color .18s;
  border-radius: 12px;
}
.sn-acc-link:hover .sn-acc-overlay {
  background: rgba(0,0,0,0.38);
  color: #fff;
}

/* Item label below image */
.sn-acc-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
  color: var(--ink);
}
.sn-acc-trait {
  font-size: 11px;
  color: #8a8178;
  font-weight: 500;
  margin-top: 2px;
}

/* CTA section */
.sn-acc-cta {
  text-align: center;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sn-acc-cta-btn { font-size: 16px; }
.sn-acc-xsell {
  font-size: 14px;
  color: #8a8178;
  margin: 0;
  font-style: italic;
}

/* Newsletter bridge */
.sn-acc-bridge {
  text-align: center;
  font-size: 13px;
  color: #8a8178;
  margin-top: 24px;
  font-weight: 500;
}
.sn-acc-bridge-link {
  color: var(--pink);
  font-weight: 700;
  text-decoration: none;
}
.sn-acc-bridge-link:hover { text-decoration: underline; }

/* ============================================================
   Newsletter
   ============================================================ */
.sn-nl {
  background: var(--ink);
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 12px 12px;
  border-radius: 28px;
  padding: clamp(40px, 6vw, 64px) clamp(34px, 5vw, 72px);
  text-align: center;
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--pink);
  position: relative;
  overflow: visible;
  max-width: 860px;
  margin: 0 auto;
}
.sn-nl-char { position: absolute; width: 100px; height: auto; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
.sn-nl-char-l { bottom: -12px; left: -20px;  transform: rotate(-8deg); }
.sn-nl-char-r { bottom: -12px; right: -20px; transform: rotate(8deg) scaleX(-1); }
@media (max-width: 640px) { .sn-nl-char { display: none; } }

.sn-nl h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 44px);
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: 10px;
}
.sn-nl p { color: rgba(255,255,255,.7); font-size: 16px; margin-bottom: 14px; max-width: 44ch; margin-left: auto; margin-right: auto; }
.sn-nl-proof { font-size: 13px !important; color: rgba(255,255,255,0.4) !important; font-weight: 600; margin-bottom: 22px !important; }
.sn-nl-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto 10px; flex-wrap: wrap; justify-content: center; }
.sn-nl-form input {
  flex: 1;
  min-width: 200px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 15px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color .15s;
}
.sn-nl-form input::placeholder { color: rgba(255,255,255,.5); }
.sn-nl-form input:focus { border-color: var(--pink); }
.sn-nl-btn { font-size: 15px; padding: 14px 26px; white-space: nowrap; }
.sn-nl-privacy { font-size: 12px !important; color: rgba(255,255,255,0.28) !important; margin: 0 !important; }
.sn-nl-success { font-size: 15px !important; color: var(--yellow) !important; font-weight: 700; margin-top: 12px !important; }

/* ============================================================
   Footer
   ============================================================ */
.sn-footer { text-align: center; padding: 52px 0 32px; }

/* Hero: characters + logo */
.sn-footer-hero { display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin-bottom: 14px; }
.sn-footer-char { width: 52px; height: auto; opacity: 0.75; transition: opacity .15s, transform .15s; }
.sn-footer-char:hover { opacity: 1; transform: scale(1.1); }
.sn-footer-char-l { transform: rotate(-8deg); }
.sn-footer-char-r { transform: rotate(8deg); }
.sn-footer-logo { display: inline-block; }
.sn-footer-logo img { height: 52px; display: block; }

/* Tagline */
.sn-footer-tagline {
  font-size: 14px;
  color: #8a8178;
  font-style: italic;
  margin-bottom: 24px;
}

.sn-footer-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.sn-footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--shadow);
  color: var(--ink);
  transition: background .15s, color .15s, border-color .15s, transform .12s, box-shadow .12s;
  text-decoration: none;
}
/* Platform-specific hover colors */
.sn-social-instagram:hover { background: #E1306C; border-color: #E1306C; color: #fff; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 #E1306C; }
.sn-social-tiktok:hover    { background: #000;    border-color: #000;    color: #fff; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 #000; }
.sn-social-youtube:hover   { background: #FF0000; border-color: #FF0000; color: #fff; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 #FF0000; }

.sn-footer-links { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.sn-footer-links a { color: #8a8178; font-size: 13px; text-decoration: none; transition: color .15s; }
.sn-footer-links a:hover { color: var(--ink); }
.sn-footer-link-primary { color: var(--pink) !important; font-weight: 700; }
.sn-footer-link-primary:hover { color: var(--ink) !important; }

.sn-footer-bottom { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.sn-footer-copy { color: #8a8178; font-size: 12px; }
.sn-footer-top { font-size: 12px; color: #8a8178; text-decoration: none; font-weight: 600; transition: color .15s; }
.sn-footer-top:hover { color: var(--ink); }

/* ============================================================
   Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sn-char-card { opacity: 1; transform: none; }
  .sn-float { animation: none !important; }
}

/* ============================================================
   Hero — Speech Bubbles
   ============================================================ */
.sn-hero-chars-left,
.sn-hero-chars-right { position: relative; }

.sn-speech-bubble {
  position: absolute;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  max-width: 124px;
  text-align: center;
  font-family: var(--font-display);
  z-index: 4;
  pointer-events: none;
}
/* Bubbles are centered horizontally on their plush (each plush is centered in
   its column via align-items:center) and placed at a % of the column height,
   so they stay glued to the character at ANY screen width instead of drifting
   off. Each tail points straight down at the face below it. */
.sn-speech-bubble { left: 50%; right: auto; transform: translateX(-50%); }
.sn-sb-w.sn-sb-top { top: 2%;  bottom: auto; }  /* Juniper — center-top, tail down */
.sn-sb-e.sn-sb-top { top: 2%;  bottom: auto; }  /* JimBob  — center-top, tail down */
.sn-sb-w.sn-sb-bot { top: auto; bottom: 4%; }   /* Darlene — center-bottom, tail up */
.sn-sb-e.sn-sb-bot { top: auto; bottom: 4%; }   /* Hobart  — center-bottom, tail up */

/* Default tail — centered under the bubble, pointing straight down (top bubbles) */
.sn-speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -8px; margin-left: -7px;
  width: 15px; height: 15px;
  background: #fff;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  border-bottom-right-radius: 4px;
  transform: rotate(45deg);
}
/* Darlene & Hobart sit below their plush → tail flips to point straight up */
.sn-sb-w.sn-sb-bot::after,
.sn-sb-e.sn-sb-bot::after {
  bottom: auto; top: -8px;
  border-right: none; border-bottom: none;
  border-left: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
  border-bottom-right-radius: 0;
  border-top-left-radius: 4px;
}

@media (max-width: 780px) { .sn-speech-bubble { display: none; } }

/* ============================================================
   Hero — Trust Bar (4-badge strip)
   ============================================================ */
.sn-hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
  border: 2px solid rgba(26,22,20,0.1);
  border-radius: 50px;
  padding: 7px 4px;
  background: rgba(255,255,255,0.65);
  max-width: 700px;
  width: 100%;
  gap: 0;
}
.sn-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  padding: 3px 14px;
  white-space: nowrap;
}
.sn-trust-sep {
  width: 1px;
  height: 16px;
  background: rgba(26,22,20,0.12);
  flex-shrink: 0;
}
.sn-trust-dot { display: none; }

@media (max-width: 760px) {
  .sn-hero-trust { border-radius: 18px; border: none; background: none; gap: 6px; }
  .sn-trust-sep  { display: none; }
  .sn-trust-badge { font-size: 10.5px; padding: 4px 10px; background: rgba(255,255,255,0.75); border: 1.5px solid rgba(26,22,20,0.1); border-radius: 30px; }
}

/* Cart button label */
.sn-cart-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  margin-left: 6px;
  white-space: nowrap;
}
@media (max-width: 900px) { .sn-cart-label { display: none; } }

/* ============================================================
   Choose by Feeling Filter
   ============================================================ */
.sn-feeling-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.sn-feeling-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 2px solid rgba(26,22,20,0.15);
  border-radius: 40px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.sn-feeling-btn:hover { border-color: var(--ink); background: rgba(26,22,20,0.04); }
.sn-feeling-btn.sn-feeling-active { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 600px) { .sn-feeling-btn { font-size: 12px; padding: 6px 12px; } }

/* ============================================================
   Meet the Herd — Redesigned Cards
   ============================================================ */
.sn-char-card {
  background: #fff;
  border: 2px solid rgba(26,22,20,0.1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(26,22,20,0.08);
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.sn-char-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 7px 7px 0 var(--char-c, var(--ink));
}

.sn-card-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  padding: 5px 14px;
  border-radius: 0 0 14px 0;
  width: fit-content;
  margin: 0;
  letter-spacing: -.2px;
}

.sn-card-img-zone {
  height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.sn-card-img-zone img {
  max-height: 174px;
  width: auto;
  object-fit: contain;
  display: block;
}

.sn-card-info {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}
.sn-card-tagline { font-size: 13px; color: #4a423d; line-height: 1.4; margin: 0; font-weight: 500; }
.sn-card-best { font-size: 12px; font-weight: 700; margin: 0; }
.sn-card-adopt {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  text-align: center;
  padding: 10px 12px;
  border-radius: 30px;
  text-decoration: none;
  margin-top: auto;
  transition: opacity .15s, transform .1s;
  border: none;
}
.sn-card-adopt:hover { opacity: .86; transform: translateY(-1px); }
.sn-card-coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  font-size: 12px;
  color: var(--pink);
  font-weight: 700;
  background: rgba(255,46,146,0.08);
  border: 1.5px solid rgba(255,46,146,0.2);
  border-radius: 20px;
  padding: 8px 12px;
}

/* ============================================================
   Lifestyle Band
   ============================================================ */
.sn-lifestyle {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.sn-lifestyle-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.sn-lifestyle-fallback-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.7;
  filter: saturate(1.2);
}
.sn-lifestyle-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(26,22,20,0.78) 0%, rgba(26,22,20,0.4) 55%, rgba(26,22,20,0.05) 100%);
}
.sn-lifestyle-text {
  position: relative;
  z-index: 2;
  padding: 0 clamp(28px,5vw,80px);
  max-width: 480px;
  margin-left: auto;
  text-align: right;
}
.sn-lifestyle-text h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px,4.5vw,52px);
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.15;
  text-shadow: 2px 2px 0 rgba(0,0,0,.3);
  margin: 0;
}
.sn-lifestyle-heart { color: var(--pink); }
@media (max-width: 640px) {
  .sn-lifestyle { height: 280px; justify-content: center; }
  .sn-lifestyle-text { text-align: center; padding: 0 24px; max-width: 100%; }
  .sn-lifestyle-overlay { background: rgba(26,22,20,0.55); }
}

/* ============================================================
   Shop Grid (3-col: Plushes / Accessories / Bundles)
   ============================================================ */
.sn-shopgrid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 36px;
}
@media (max-width: 900px) { .sn-shopgrid { grid-template-columns: 1fr; gap: 44px; } }

.sn-shopgrid-col { display: flex; flex-direction: column; }

.sn-shopgrid-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -.3px;
}
.sn-shopgrid-sub { font-size: 13px; color: #6a5f58; margin: 0 0 16px; line-height: 1.4; }

/* Plush row */
.sn-plush-list { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.sn-plush-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: calc(20% - 5px);
  min-width: 48px;
}
.sn-plush-item img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.sn-plush-name { font-size: 9px; font-weight: 600; text-align: center; color: #4a423d; line-height: 1.2; }
.sn-plush-price { font-size: 10px; font-weight: 700; color: var(--ink); font-family: var(--font-display); }

/* Accessories grid */
.sn-sg-acc-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 16px; }
.sn-sg-acc-item {
  background: rgba(255,255,255,0.75);
  border: 1.5px solid rgba(26,22,20,0.1);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.sn-sg-acc-item img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; border-radius: 8px; }
.sn-sg-acc-name { font-size: 10.5px; color: #4a423d; line-height: 1.3; }
.sn-sg-acc-price { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--ink); }

/* Bundle list */
.sn-bundle-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.sn-bundle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1.5px solid rgba(26,22,20,0.07);
  gap: 8px;
}
.sn-bundle-item:first-child { border-top: 1.5px solid rgba(26,22,20,0.07); }
.sn-bundle-info { display: flex; flex-direction: column; gap: 2px; }
.sn-bundle-name { font-weight: 700; font-size: 13px; color: var(--ink); font-family: var(--font-display); }
.sn-bundle-desc { font-size: 11px; color: #8a8178; }
.sn-bundle-price-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.sn-bundle-price { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.sn-bundle-save {
  font-size: 10px;
  font-weight: 700;
  background: #E8F5E9;
  color: #2E7D32;
  border-radius: 12px;
  padding: 2px 7px;
  border: 1px solid rgba(46,125,50,0.22);
}

.sn-shopgrid-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  display: inline-block;
  margin-top: auto;
  padding-bottom: 2px;
  transition: color .12s, border-color .12s;
}
.sn-shopgrid-link:hover { color: var(--pink); border-color: var(--pink); }

/* ============================================================
   Widgets Row (Shop by feeling / Quiz teaser / Gift Finder)
   ============================================================ */
.sn-widgets {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}
@media (max-width: 860px) { .sn-widgets { grid-template-columns: 1fr; } }

.sn-widget {
  background: #fff;
  border: 2px solid rgba(26,22,20,0.1);
  border-radius: 24px;
  padding: 24px 22px;
  box-shadow: 4px 4px 0 rgba(26,22,20,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sn-widget-dark { background: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 rgba(26,22,20,0.25); }

.sn-widget-heading { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0; letter-spacing: -.3px; }
.sn-widget-dark .sn-widget-heading { color: #fff; }
.sn-widget-sub { font-size: 13px; color: #6a5f58; margin: 0; line-height: 1.4; }
.sn-widget-dark .sn-widget-sub { color: rgba(255,255,255,0.55); }
.sn-widget-link { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--pink); text-decoration: none; margin-top: auto; }
.sn-widget-link:hover { text-decoration: underline; }
.sn-widget-cta { width: 100%; text-align: center; margin-top: auto; font-size: 15px; }

/* Feeling icons */
.sn-fi-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.sn-fi-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--ink);
  font-size: 9.5px;
  font-weight: 600;
  text-align: center;
  transition: transform .12s;
  padding: 4px 2px;
  border-radius: 10px;
}
.sn-fi-btn:hover { transform: scale(1.1); background: rgba(26,22,20,0.04); }
.sn-fi-emoji { font-size: 22px; }

/* Quiz teaser bubble */
.sn-quiz-teaser-bubble {
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px 20px 20px 4px;
  width: fit-content;
  line-height: 1.3;
}
.sn-quiz-preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sn-quiz-preview-list li {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  padding: 8px 12px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
}
.sn-quiz-takes-note { font-size: 11.5px; color: rgba(255,255,255,0.35); text-align: center; margin: 0; font-weight: 600; }

/* Gift Finder */
.sn-gift-icon-wrap { font-size: 32px; line-height: 1; }
.sn-gift-occasions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sn-gift-occasions li { font-size: 13.5px; color: #4a423d; font-weight: 600; }

/* ============================================================
   Hero — Larger Characters
   ============================================================ */
.sn-hero {
  position: relative;
  grid-template-columns: clamp(180px, 22vw, 340px) 1fr clamp(180px, 22vw, 340px);
  min-height: calc(62vh - 74px);
}
.sn-hero-chars-left,
.sn-hero-chars-right { min-height: 460px; }

@media (max-width: 780px) {
  .sn-hero { grid-template-columns: clamp(80px, 11vw, 150px) 1fr clamp(80px, 11vw, 150px); }
  .sn-hero-chars-left, .sn-hero-chars-right { min-height: 280px; }
}

/* ============================================================
   Hero — Doodles
   ============================================================ */
.sn-hero-doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.sn-doodle {
  position: absolute;
  display: block;
  opacity: 0.75;
}
@media (max-width: 600px) { .sn-hero-doodles { display: none; } }

/* ============================================================
   CTA Band (replaces newsletter)
   ============================================================ */
.sn-cta-band {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  text-align: center;
}
.sn-cta-band-doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sn-cta-doodle { position: absolute; display: block; }

/* Peeking characters */
.sn-cta-char {
  position: absolute;
  bottom: 0;
  width: clamp(100px, 12vw, 180px);
  height: auto;
  opacity: 0.65;
  pointer-events: none;
}
.sn-cta-char-l { left: clamp(20px, 4vw, 80px); }
.sn-cta-char-r { right: clamp(20px, 4vw, 80px); transform: scaleX(-1); }
@media (max-width: 680px) { .sn-cta-char { display: none; } }

.sn-cta-band-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
}
.sn-cta-eye-icon {
  opacity: 0.7;
  margin-bottom: 4px;
}
.sn-cta-band-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 52px);
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0;
  max-width: 18ch;
}
.sn-cta-band-sub {
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255,255,255,0.65);
  margin: 0;
  max-width: 38ch;
}
.sn-cta-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  background: #fff;
  border: 3px solid #fff;
  border-radius: 50px;
  padding: 14px 30px;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(255,255,255,0.2);
  transition: transform .12s, box-shadow .12s, background .12s;
  margin-top: 8px;
}
.sn-cta-band-btn:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 rgba(255,255,255,0.25);
  background: var(--yellow);
  border-color: var(--yellow);
}

/* ============================================================
   Reviews — Header Row
   ============================================================ */
.sn-rv-header-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.sn-rv-main-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: -1px;
  margin: 0;
  color: var(--ink);
}
.sn-rv-scorecard-inline {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  padding: 16px 24px;
  box-shadow: 4px 4px 0 rgba(26,22,20,0.1);
  flex-shrink: 0;
}
.sn-rv-scorecard-inline .sn-rv-score-num { font-size: 48px; line-height: 1; }
.sn-rv-scorecard-inline .sn-rv-score-stars { font-size: 18px; letter-spacing: 2px; margin: 0 0 4px; }
.sn-rv-scorecard-inline .sn-rv-score-count { font-size: 11.5px; color: #8a8178; font-weight: 500; white-space: nowrap; }

@media (max-width: 640px) {
  .sn-rv-header-row { flex-direction: column; align-items: center; text-align: center; gap: 6px !important; }
  .sn-rv-main-heading { text-align: center; margin: 0 auto; }
  .sn-rv-scorecard-inline { width: 100%; }
}

/* ============================================================
   Hero — Final scale-up pass
   ============================================================ */

/* Wider character columns, taller hero */
.sn-hero {
  grid-template-columns: clamp(200px, 26vw, 400px) 1fr clamp(200px, 26vw, 400px);
  min-height: calc(74vh - 74px);
}
.sn-hero-chars-left,
.sn-hero-chars-right {
  min-height: 580px;
  gap: 0;
}

/* Fill the column width fully */
.sn-hc-img { width: 100%; object-fit: contain; }

/* Doodles fully opaque */
.sn-doodle { opacity: 1; }

/* Bigger hero headline */
.sn-hero h1 img,
.sn-hero-headline {
  width: clamp(300px, 44vw, 780px) !important;
}

@media (max-width: 780px) {
  .sn-hero {
    grid-template-columns: clamp(90px, 13vw, 170px) 1fr clamp(90px, 13vw, 170px);
    min-height: calc(55vh - 74px);
  }
  .sn-hero-chars-left, .sn-hero-chars-right { min-height: 320px; }
}
@media (max-width: 480px) {
  .sn-hero { grid-template-columns: 0 1fr 0; }
  .sn-hero-chars-left, .sn-hero-chars-right { display: none; }
}

/* ============================================================
   Meet the Herd — Taller card image zones
   ============================================================ */
.sn-card-img-zone {
  height: 220px;
}
.sn-card-img-zone img {
  max-height: 214px;
}

/* ============================================================
   Shop Grid — Taller plush thumbnails
   ============================================================ */
.sn-plush-item img {
  aspect-ratio: 1;
  object-fit: contain;
}

/* ============================================================
   Feeling filter — scrollable on mobile, arrow hint on desktop
   ============================================================ */
.sn-feeling-filter {
  overflow-x: auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sn-feeling-filter::-webkit-scrollbar { display: none; }

/* ============================================================
   Meet the Herd — Full redesign pass (20-item diff)
   ============================================================ */

/* 1 + 9: Two-column header, minimal spacing below */
.sn-meet-section { padding-top: 40px; }

.sn-meet-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}
@media (max-width: 860px) {
  .sn-meet-header { grid-template-columns: 1fr; }
  .sn-meet-heading-col { text-align: left; }
}

/* Filter column */
.sn-meet-filter-col { overflow: hidden; }

/* 2: "Choose by feeling" label */
.sn-feeling-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 2px;
}

/* 3: "›" scroll hint */
.sn-feeling-more {
  font-size: 20px;
  color: rgba(26,22,20,0.35);
  font-weight: 700;
  flex-shrink: 0;
  padding: 0 6px;
  line-height: 1;
}

/* 10: Smaller right-aligned heading */
.sn-meet-heading-col { text-align: right; min-width: 260px; }
.sn-meet-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 34px);
  letter-spacing: -.5px;
  margin: 0 0 4px;
  color: var(--ink);
}

/* 16: Lighter subheading weight */
.sn-meet-sub {
  font-size: 13.5px;
  font-weight: 400;
  color: #6a5f58;
  margin: 0;
  line-height: 1.4;
}

/* 14: More compact filter pills */
.sn-feeling-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 4px;
}
.sn-feeling-filter::-webkit-scrollbar { display: none; }
.sn-feeling-btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 40px;
  white-space: nowrap;
}

/* 13 + 11: Card grid gap wider, lighter shadow */
.sn-herd {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 0;
}
@media (max-width: 1000px) { .sn-herd { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .sn-herd { grid-template-columns: 1fr; } }

/* 7 + 12 + 11: Card with char-color border, rounder corners, lighter shadow */
.sn-char-card {
  border: 2px solid var(--char-c, rgba(26,22,20,0.12));
  border-radius: 26px;
  box-shadow: 2px 2px 0 rgba(26,22,20,0.05);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.sn-char-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 6px 6px 0 var(--char-c, rgba(26,22,20,0.15));
}

/* 4 + 17 + 18: Badge centered in image zone, zone with padding, char floats */
.sn-card-img-zone {
  position: relative;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 40px 20px 0;
  overflow: hidden;
}
.sn-card-badge-row {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 2;
}
.sn-card-badge {
  position: static;
  transform: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  display: inline-block;
  white-space: nowrap;
}
.sn-card-img-zone img {
  max-height: 160px;
  width: auto;
  max-width: 85%;
  object-fit: contain;
  display: block;
}

/* 15: "Best for" slightly larger */
.sn-card-best { font-size: 13px; font-weight: 700; margin: 0; }

/* 6: Outlined adopt button using card's --char-c variable */
.sn-card-adopt {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  text-align: center;
  padding: 9px 12px;
  border-radius: 30px;
  text-decoration: none;
  margin-top: auto;
  transition: background .15s, color .15s;
  background: #fff;
  border: 2px solid var(--char-c, var(--ink));
  color: var(--char-c, var(--ink));
}
.sn-card-adopt:hover {
  background: var(--char-c, var(--ink));
  color: #fff;
}

.sn-card-info {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}
.sn-card-tagline { font-size: 12.5px; color: #4a423d; line-height: 1.4; margin: 0; font-weight: 400; }

/* ============================================================
   Meet the Herd — 20-item precision pass
   ============================================================ */

/* 20: Less section top padding */
.sn-meet-section { padding-top: 20px; }

/* 19: Filter pills more compact */
.sn-feeling-filter { gap: 5px; }
.sn-feeling-btn { font-size: 11.5px; padding: 4px 10px; }

/* 12: More space between label and first pill */
.sn-feeling-label { margin-right: 6px; }

/* 1 + 6: Image zone taller, more portrait card */
.sn-card-img-zone {
  height: 280px;
  padding: 10px 8px 0;
  align-items: center;
}

/* 2 + 3: Characters larger, fill zone width */
.sn-card-img-zone img {
  max-height: 245px;
  max-width: 96%;
  object-fit: contain;
}

/* 14 + 15: Badge overlays with minimal clearance */
.sn-card-badge-row {
  top: 8px;
  justify-content: flex-start;
  padding-left: 10px;
}

/* 11: Card info section more breathing room at top */
.sn-card-info { padding: 14px 14px 14px; gap: 6px; }

/* 8: Tagline larger */
.sn-card-tagline { font-size: 14px; line-height: 1.35; }

/* 9 + 16: "Best for" larger and bolder */
.sn-card-best { font-size: 13.5px; font-weight: 800; }

/* 10: Adopt button smaller font so "Love Yourself" fits one line */
.sn-card-adopt {
  font-size: 12.5px;
  padding: 8px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 13: Card grid gap tighter */
.sn-herd { gap: 10px; }

/* 18: Card border slightly more defined */
.sn-char-card {
  border-width: 2.5px;
}

/* 17: Tighter tagline line height already set above */
/* 7: Character alignment — center vertically in zone */
.sn-card-img-zone { justify-content: center; }

/* ============================================================
   Meet the Herd — Full-bleed + centering + badge fix pass
   ============================================================ */

/* Full-bleed outer wrapper */
.sn-meet-full { width: 100%; }

/* Card grid outer — edge-to-edge with small breathing room */
.sn-herd-outer {
  width: 100%;
  padding: 16px 20px 0;
  box-sizing: border-box;
}
.sn-herd {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 100%;
  margin: 0;
}
@media (max-width: 1000px) { .sn-herd { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px)  { .sn-herd { grid-template-columns: 1fr; } }

/* Image zone: flex column so badge never overlaps image */
.sn-card-img-zone {
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}
/* Badge row: static, sits at top of zone, centered */
.sn-card-badge-row {
  position: static;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 10px 6px;
  flex-shrink: 0;
}
/* Character image fills remaining height below badge */
.sn-card-img-zone img {
  flex: 1;
  min-height: 0;
  width: auto;
  max-width: 88%;
  object-fit: contain;
  display: block;
}

/* Center all card info content */
.sn-card-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 14px 14px;
  gap: 6px;
}
.sn-card-tagline { text-align: center; }
.sn-card-best    { text-align: center; }
.sn-card-adopt   { text-align: center; }

/* Filter: wrap so all 5 pills always show */
.sn-feeling-filter {
  flex-wrap: wrap;
  overflow-x: visible;
  overflow: visible;
}
/* SVG icon inside pill */
.sn-feeling-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sn-feeling-btn svg { flex-shrink: 0; }

/* ============================================================
   Filter — single line, no wrap
   ============================================================ */
.sn-feeling-filter {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sn-feeling-filter::-webkit-scrollbar { display: none; }
.sn-feeling-btn { flex-shrink: 0; white-space: nowrap; }

/* ============================================================
   Hero character animations — still by default, personality on hover
   ============================================================ */

/* Kill all constant float animations */
.sn-hc-img {
  animation: none !important;
  cursor: pointer;
  transition: filter .2s;
}
.sn-hc-img:hover { filter: drop-shadow(0 8px 20px rgba(0,0,0,0.18)); }

/* Darlene — bouncy jump */
@keyframes sn-hover-darlene {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  20%  { transform: translateY(-44px) rotate(-4deg) scale(1.07); }
  40%  { transform: translateY(-28px) rotate(2deg) scale(1.04); }
  60%  { transform: translateY(-38px) rotate(-3deg) scale(1.06); }
  80%  { transform: translateY(-8px) rotate(1deg) scale(1.01); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
.sn-float-darlene:hover { animation: sn-hover-darlene 0.75s ease forwards !important; }

/* Hobart — slow sway left and right */
@keyframes sn-hover-hobart {
  0%,100% { transform: rotate(0deg); }
  20%     { transform: rotate(-12deg) translateX(-6px); }
  50%     { transform: rotate(12deg) translateX(6px); }
  75%     { transform: rotate(-8deg) translateX(-4px); }
}
.sn-float-hobart:hover { animation: sn-hover-hobart 1.1s ease-in-out infinite !important; }

/* Juniper — submarine swim (horizontal glide with gentle tilt) */
@keyframes sn-hover-juniper {
  0%,100% { transform: translateX(0) rotate(0deg); }
  25%     { transform: translateX(-22px) rotate(-6deg); }
  50%     { transform: translateX(0) rotate(2deg); }
  75%     { transform: translateX(22px) rotate(6deg); }
}
.sn-float-juniper:hover { animation: sn-hover-juniper 1.2s ease-in-out infinite !important; }

/* JimBob — swims + grows, mouth-snapping energy */
@keyframes sn-hover-jimbob {
  0%,100% { transform: translateX(0) scale(1) rotate(0deg); }
  20%     { transform: translateX(18px) scale(1.12) rotate(4deg); }
  50%     { transform: translateX(-14px) scale(1.08) rotate(-3deg); }
  70%     { transform: translateX(20px) scale(1.14) rotate(5deg); }
}
.sn-float-jimbob:hover { animation: sn-hover-jimbob 1.0s ease-in-out infinite !important; }

/* ============================================================
   Hero — 30-diff implementation pass
   ============================================================ */

/* 3+4+5: Two-line CTAs — taller, flex column layout */
.sn-hero-cta {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 28px;
  min-height: 64px;
  justify-content: center;
}
.sn-cta-line1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
}
.sn-cta-line2 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  opacity: 0.75;
  line-height: 1.2;
}
.sn-btn-primary .sn-cta-line2 { opacity: 0.85; }

/* 6: Trust bar — flat white strip, not a pill */
.sn-hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: nowrap;
  border: none;
  border-radius: 0;
  padding: 14px 0;
  background: rgba(255,255,255,0.82);
  max-width: 760px;
  width: 100%;
  border-top: 1.5px solid rgba(26,22,20,0.08);
  border-bottom: 1.5px solid rgba(26,22,20,0.08);
  gap: 0;
}
.sn-trust-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 0 18px;
  gap: 7px;
  white-space: nowrap;
}
.sn-trust-badge svg { width: 15px; height: 15px; flex-shrink: 0; }
.sn-trust-sep {
  width: 1px;
  height: 20px;
  background: rgba(26,22,20,0.14);
}
@media (max-width: 700px) {
  .sn-hero-trust { flex-wrap: wrap; border: none; background: none; gap: 6px; }
  .sn-trust-sep { display: none; }
  .sn-trust-badge { background: rgba(255,255,255,0.8); border: 1.5px solid rgba(26,22,20,0.1); border-radius: 30px; padding: 4px 10px; }
}

/* 8: Hero less tall */
.sn-hero {
  min-height: calc(58vh - 74px);
}
.sn-hero-chars-left,
.sn-hero-chars-right { min-height: 500px; }

/* 11: Subheading 3 shorter lines, lighter */
.sn-hero .sub {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  max-width: 36ch;
  white-space: pre-line;
}

/* 20: Eyebrow badge thicker border + more padding */
.sn-eyebrow {
  border: 3px solid var(--ink);
  padding: 9px 22px;
  font-size: 14px;
  box-shadow: 4px 4px 0 var(--ink);
}

/* 29: Speech bubbles larger */
.sn-speech-bubble {
  max-width: 148px;
  padding: 9px 13px;
  font-size: 13px;
  box-shadow: 4px 4px 0 var(--ink);
}

/* 25: Sub-headline font lighter weight */
.sn-hero .sub { font-weight: 400; }

/* 24: Scroll cue subtler */
.sn-scrollcue {
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0.5;
  margin-top: 16px;
}

/* 19: Characters even more prominent */
.sn-hero {
  grid-template-columns: clamp(210px, 28vw, 420px) 1fr clamp(210px, 28vw, 420px);
}

/* 10: Announcement bar bold black */
.sn-announce {
  background: #000;
  font-size: 13px;
  padding: 10px 16px;
  font-weight: 600;
}
.sn-announce a { color: var(--yellow); }

/* 30: Less vertical spacing between hero inner elements */
.sn-hero-inner { gap: 0; }
.sn-hero-proof { margin: 2px 0 10px; }
.sn-hero h1 { margin: 0; }
.sn-hero .sub { margin-top: 16px; }
.sn-cta-row { margin-top: 22px; gap: 12px; }

/* ============================================================
   Lifestyle Section — Responsive fix
   ============================================================ */

/* Responsive height that scales with viewport */
.sn-lifestyle {
  height: clamp(260px, 30vw, 520px);
  justify-content: flex-end;
  align-items: center;
}

/* Remove opacity darkening — let overlay handle it */
.sn-lifestyle-fallback-img {
  opacity: 1;
  object-position: 30% center;
}

/* Overlay: light on left (show plushes), dark on right (text readable) */
.sn-lifestyle-overlay {
  background: linear-gradient(
    to left,
    rgba(10,8,6,0.88) 0%,
    rgba(10,8,6,0.65) 38%,
    rgba(10,8,6,0.15) 65%,
    rgba(10,8,6,0) 100%
  );
}

/* Text: right side, vertically centered */
.sn-lifestyle-text {
  position: relative;
  z-index: 2;
  padding: 0 clamp(24px, 5vw, 72px);
  max-width: 440px;
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}
.sn-lifestyle-text h2 {
  font-size: clamp(22px, 3.5vw, 48px);
  line-height: 1.15;
}

/* Medium screens — keep right alignment but tighter */
@media (max-width: 900px) {
  .sn-lifestyle {
    height: clamp(240px, 42vw, 400px);
  }
  .sn-lifestyle-text {
    max-width: 340px;
    padding: 0 clamp(16px, 4vw, 40px);
  }
}

/* Mobile — center text at bottom, gradient from bottom up */
@media (max-width: 600px) {
  .sn-lifestyle {
    height: clamp(220px, 56vw, 320px);
    justify-content: center;
    align-items: flex-end;
  }
  .sn-lifestyle-overlay {
    background: linear-gradient(
      to top,
      rgba(10,8,6,0.82) 0%,
      rgba(10,8,6,0.5) 40%,
      rgba(10,8,6,0.05) 100%
    );
  }
  .sn-lifestyle-text {
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 20px 20px;
  }
  .sn-lifestyle-text h2 {
    font-size: clamp(18px, 5.5vw, 26px);
  }
}

/* ============================================================
   Lifestyle Band — Split layout v2 (photo left / text right)
   No overlay. Full photo visible. Text on cream background.
   ============================================================ */
.sn-lifestyle {
  display: grid !important;
  grid-template-columns: 62fr 38fr;
  align-items: stretch;
  height: clamp(280px, 28vw, 500px);
  overflow: hidden;
  background: var(--paper);
  /* kill old positioning */
  position: static !important;
  justify-content: unset !important;
}

.sn-lifestyle-photo {
  overflow: hidden;
  position: relative;
}
.sn-lifestyle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
  display: block;
  /* kill old overlay styles */
  opacity: 1 !important;
  filter: none !important;
}

/* Hide old overlay + bg elements if they somehow render */
.sn-lifestyle-bg,
.sn-lifestyle-overlay,
.sn-lifestyle-fallback,
.sn-lifestyle-fallback-img { display: none !important; }

/* Text panel — cream background, dark ink */
.sn-lifestyle-panel {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 5vw, 72px);
  gap: 6px;
}

.sn-lifestyle-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 50px);
  color: var(--ink);
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0;
}

.sn-lifestyle-heart {
  font-size: clamp(22px, 3vw, 44px);
  color: var(--pink);
  line-height: 1;
  display: block;
}

/* Tablet — narrower, keep split but tighten */
@media (max-width: 860px) {
  .sn-lifestyle {
    grid-template-columns: 58fr 42fr;
    height: clamp(240px, 40vw, 380px);
  }
  .sn-lifestyle-panel {
    padding: clamp(20px, 4vw, 40px);
  }
}

/* Mobile — stack: photo on top, text below */
@media (max-width: 580px) {
  .sn-lifestyle {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
    height: auto !important;
  }
  .sn-lifestyle-photo {
    height: clamp(200px, 56vw, 300px);
  }
  .sn-lifestyle-photo img {
    object-position: center 40%;
  }
  .sn-lifestyle-panel {
    padding: 24px 20px 28px;
    align-items: center;
    text-align: center;
  }
  .sn-lifestyle-heading {
    font-size: clamp(20px, 6vw, 28px);
    text-align: center;
  }
}

/* ============================================================
   Lifestyle Band v3 — Rounded photo frame, text below
   ============================================================ */

/* Kill all previous lifestyle rules */
.sn-lifestyle,
.sn-lifestyle-photo,
.sn-lifestyle-panel,
.sn-lifestyle-bg,
.sn-lifestyle-overlay,
.sn-lifestyle-fallback,
.sn-lifestyle-text { display: none !important; }

/* New layout */
.sn-lifestyle-v3 { padding: 0 0 52px; }

/* Rounded photo container — full content width */
.sn-lifestyle-frame {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(26,22,20,0.12);
}
.sn-lifestyle-frame img {
  display: block;
  width: 100%;
  height: clamp(220px, 32vw, 520px);
  object-fit: cover;
  object-position: center 40%;
}

/* Caption below the photo */
.sn-lifestyle-caption {
  padding: 22px 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sn-lifestyle-caption-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 44px);
  color: var(--ink);
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0;
}
.sn-lifestyle-caption-heart {
  font-size: clamp(22px, 3vw, 40px);
  color: var(--pink);
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .sn-lifestyle-frame { border-radius: 18px; }
  .sn-lifestyle-frame img { height: clamp(180px, 52vw, 280px); }
  .sn-lifestyle-caption { padding: 16px 4px 0; gap: 6px; }
  .sn-lifestyle-caption-heading { font-size: clamp(18px, 5.5vw, 26px); }
}

/* ============================================================
   Lifestyle v4 — Full bleed, no rounded corners, centered text
   ============================================================ */
.sn-lifestyle-v4 {
  position: relative;
  width: 100%;
  display: block;
}
.sn-lifestyle-img {
  display: block;
  width: 100%;
  height: clamp(260px, 30vw, 500px);
  object-fit: cover;
  object-position: center 45%;
  max-width: 100% !important;
}
.sn-lifestyle-v4-caption {
  padding: 20px 24px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}
.sn-lifestyle-v4-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 44px);
  color: var(--ink);
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0;
  text-align: center;
}
.sn-lifestyle-v4-heart {
  font-size: clamp(22px, 3vw, 40px);
  color: var(--pink);
  line-height: 1;
}
@media (max-width: 600px) {
  .sn-lifestyle-img { height: clamp(180px, 55vw, 280px); }
  .sn-lifestyle-v4-heading { font-size: clamp(18px, 5.5vw, 26px); }
}

/* Spacing between meet-the-herd and lifestyle photo */
.sn-lifestyle-v4 { margin-top: 48px; }
@media (max-width: 600px) { .sn-lifestyle-v4 { margin-top: 32px; } }

/* ============================================================
   Lifestyle v5 — All 10 enhancements
   ============================================================ */
.sn-ls { width: 100%; margin-top: 52px; }

/* 8: Doodle separator row */
.sn-ls-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 24px 18px;
  flex-wrap: wrap;
}
.sn-ls-sep svg { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.sn-ls-sep svg:nth-child(1),
.sn-ls-sep svg:nth-child(3),
.sn-ls-sep svg:nth-child(9),
.sn-ls-sep svg:nth-child(11) { width: 20px; height: 20px; }

/* 1+4+6+7+10: Photo container */
.sn-ls-photo-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.sn-ls-img {
  display: block;
  width: 100%;
  height: clamp(320px, 38vw, 580px);
  object-fit: cover;
  object-position: center 30%;
  max-width: 100% !important;
}

/* 6: Subtle warm vignette — barely-there, just adds warmth */
.sn-ls-vignette {
  position: absolute;
  inset: 0;
  background: rgba(251,240,210,0.18);
  pointer-events: none;
}

/* 7: Floating heart pinned to bottom-right of photo */
.sn-ls-float-heart {
  position: absolute;
  bottom: 20px;
  right: 28px;
  font-size: clamp(28px, 4vw, 52px);
  color: var(--pink);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* 10: Subtle shadow on photo */
.sn-ls-photo-wrap {
  box-shadow: 0 10px 40px rgba(26,22,20,0.1);
}

/* 2+9: Two-line heading, larger on desktop */
.sn-ls-caption {
  padding: 28px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.sn-ls-heading-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sn-ls-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.sn-ls-line1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 58px);
  color: var(--ink);
  letter-spacing: -1px;
  line-height: 1.05;
  display: block;
}
.sn-ls-line2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 3vw, 44px);
  color: var(--ink);
  letter-spacing: -.5px;
  line-height: 1.05;
  display: block;
  opacity: 0.8;
}
.sn-ls-heart {
  font-size: clamp(28px, 4vw, 52px);
  color: var(--pink);
  line-height: 1;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 4px;
}

/* 5: Character name pills */
.sn-ls-names {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.sn-ls-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 20px;
}
.sn-ls-dot {
  color: rgba(26,22,20,0.3);
  font-weight: 700;
  font-size: 16px;
}

/* 3: CTA */
.sn-ls-cta {
  font-size: 16px;
  padding: 14px 32px;
}

/* Bundle cards — Sea Schnerd (sold out) + Land & Space (available) */
.sn-ls-bundle-intro {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: #6a5f58;
  margin: 2px 0 0;
  text-align: center;
}
.sn-ls-bundles {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}
.sn-ls-bundle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  padding: 18px 24px 20px;
  box-shadow: 4px 4px 0 rgba(26,22,20,0.1);
  min-width: 200px;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.sn-ls-bundle-card:not(.sn-ls-bundle-soldout):hover {
  transform: translateY(-3px);
  box-shadow: 6px 8px 0 rgba(26,22,20,0.12);
}
.sn-ls-bundle-img-wrap {
  position: relative;
  width: 170px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.sn-ls-bundle-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sn-ls-bundle-soldout-badge {
  position: absolute;
  top: -32px;
  left: -16px;
  transform: rotate(-12deg);
  width: 55%;
  max-width: 190px;
  height: auto;
  z-index: 3;
  filter: none;
  opacity: 1;
}
.sn-ls-bundle-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); text-align: center; }
.sn-ls-bundle-chars { font-size: 13px; color: #6a5f58; }
.sn-ls-bundle-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.sn-ls-bundle-price { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); }
.sn-ls-bundle-save {
  font-size: 12px;
  font-weight: 700;
  color: #1A5A2A;
  background: #DFF3E2;
  border-radius: 20px;
  padding: 3px 10px;
}
.sn-ls-bundle-save-muted { color: #8a8178; background: rgba(26,22,20,0.06); }
.sn-ls-bundle-notify {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #6a5f58;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sn-ls-bundle-notify:hover { color: var(--ink); }
.sn-ls-bundle-soldout { overflow: visible; }
.sn-ls-bundle-soldout > *:not(.sn-ls-bundle-soldout-badge) { opacity: 0.72; filter: grayscale(0.3); }
.sn-ls-bundle-cta { margin-top: 8px; font-size: 14px; padding: 10px 22px; white-space: nowrap; }
@media (max-width: 460px) {
  .sn-ls-bundles { flex-wrap: nowrap; gap: 10px; }
  .sn-ls-bundle-card { min-width: 0; flex: 1 1 0; width: auto; max-width: none; padding: 14px 10px 16px; }
  .sn-ls-bundle-img-wrap { width: 100%; height: 100px; }
  .sn-ls-bundle-soldout-badge { width: 55%; max-width: 105px; top: -18px; left: -8px; }
  .sn-ls-bundle-name { font-size: 13px; }
  .sn-ls-bundle-chars { font-size: 11px; }
  .sn-ls-bundle-price { font-size: 18px; }
  .sn-ls-bundle-save { font-size: 10.5px; padding: 2px 8px; }
  .sn-ls-bundle-notify { font-size: 11px; }
  .sn-ls-bundle-cta { font-size: 12px; padding: 8px 14px; }
}

@media (max-width: 640px) {
  .sn-ls { margin-top: 36px; }
  .sn-ls-img { height: clamp(200px, 56vw, 300px); }
  .sn-ls-float-heart { font-size: 28px; bottom: 12px; right: 16px; }
  .sn-ls-caption { padding: 20px 16px 32px; gap: 12px; }
  .sn-ls-sep { gap: 10px; padding-bottom: 12px; }
  .sn-ls-sep svg { width: 13px; height: 13px; }
}

/* ============================================================
   Product Detail Page (PDP)
   ============================================================ */
.sn-pdp { max-width: 1180px; margin: 0 auto; padding: 0 24px 80px; }

/* Breadcrumb */
.sn-pdp-breadcrumb {
  font-size: 13px;
  color: #8a8178;
  font-weight: 500;
  padding: 14px 0 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sn-pdp-breadcrumb a { color: #8a8178; text-decoration: none; }
.sn-pdp-breadcrumb a:hover { color: var(--ink); }
.sn-pdp-breadcrumb span:last-child { color: var(--ink); font-weight: 600; }

/* Hero grid */
.sn-pdp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 60px;
}
@media (max-width: 860px) { .sn-pdp-hero { grid-template-columns: 1fr; gap: 28px; } }

/* Gallery */
.sn-pdp-gallery { position: relative; }
.sn-pdp-badge-wrap { margin-bottom: 10px; }
.sn-pdp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  padding: 5px 14px;
  border-radius: 20px;
}
.sn-pdp-main-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: 2.5px solid rgba(26,22,20,0.08);
}
.sn-pdp-main-img img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  display: block;
}
/* Decorative doodles on gallery */
.sn-pdp-doodle { position: absolute; pointer-events: none; width: 22px; height: 22px; }
.sn-pdp-doodle-tl { top: 12px; left: 12px; }
.sn-pdp-doodle-tr { top: 12px; right: 12px; }
.sn-pdp-doodle-bl { bottom: 12px; left: 12px; width: 16px; height: 16px; }
.sn-pdp-doodle-br { bottom: 12px; right: 12px; width: 16px; height: 16px; }

/* Thumbnails */
.sn-pdp-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.sn-pdp-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 2px solid rgba(26,22,20,0.1);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sn-pdp-thumb img { width: 90%; height: 90%; object-fit: contain; display: block; }
.sn-pdp-thumb-active { border-width: 3px !important; }
.sn-pdp-thumb:hover { border-color: rgba(26,22,20,0.4); }
.sn-pdp-thumb-video { position: relative; }
.sn-pdp-thumb-video img { width: 100%; height: 100%; object-fit: cover; }
.sn-pdp-thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  background: rgba(26,22,20,0.25); pointer-events: none;
}

/* Product info */
.sn-pdp-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -1.5px;
  line-height: 1.0;
  margin: 0 0 8px;
  color: var(--ink);
}
.sn-pdp-tagline { font-size: 16px; color: #6a5f58; margin: 0 0 16px; }

.sn-pdp-price-row { margin-bottom: 8px; }
.sn-pdp-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
}
.sn-pdp-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.sn-pdp-star-icons { color: var(--pink); font-size: 16px; letter-spacing: 1px; }
.sn-pdp-star-label { font-size: 13px; color: #8a8178; font-weight: 600; }

.sn-pdp-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.sn-pdp-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid;
}

/* Add to cart */
.sn-pdp-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.sn-pdp-adopt-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 17px 32px;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
  display: block;
  width: 100%;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(26,22,20,0.15);
}
.sn-pdp-adopt-btn:hover { opacity: .88; transform: translateY(-2px); }
.shopify-payment-button { margin-top: 4px; }

/* Trust badges */
.sn-pdp-trust {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  padding: 16px;
  background: rgba(255,255,255,0.7);
  border: 1.5px solid rgba(26,22,20,0.08);
  border-radius: 16px;
  margin-bottom: 14px;
}
.sn-pdp-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #4a423d;
  line-height: 1.3;
}
.sn-pdp-material { font-size: 13px; color: #8a8178; font-weight: 600; margin: 0; }

/* Section heading shared style */
.sn-pdp-section-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -.5px;
  margin: 0 0 16px;
  color: var(--ink);
}

/* About: meet + schnerd if */
.sn-pdp-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 48px 0;
  border-top: 2px solid rgba(26,22,20,0.07);
}
@media (max-width: 700px) { .sn-pdp-about { grid-template-columns: 1fr; } }
.sn-pdp-meet p { font-size: 15px; color: #4a423d; line-height: 1.7; margin: 0; }
.sn-pdp-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sn-pdp-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: #4a423d; line-height: 1.45; }
.sn-pdp-checklist svg { flex-shrink: 0; margin-top: 2px; }

/* Specs row: included + details */
.sn-pdp-specs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 48px 0;
  border-top: 2px solid rgba(26,22,20,0.07);
}
@media (max-width: 700px) { .sn-pdp-specs-row { grid-template-columns: 1fr; } }

.sn-pdp-included-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
@media (max-width: 500px) { .sn-pdp-included-grid { grid-template-columns: repeat(2,1fr); } }
.sn-pdp-included-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 12px; color: #4a423d; font-weight: 600; }
.sn-pdp-included-icon {
  width: 72px; height: 72px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sn-pdp-included-icon img { width: 80%; height: 80%; object-fit: contain; }
.sn-pdp-included-icon svg { width: 36px; height: 36px; }

.sn-pdp-details-grid { display: flex; flex-direction: column; gap: 0; }
.sn-pdp-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1.5px solid rgba(26,22,20,0.07);
  font-size: 14px;
}
.sn-pdp-detail:first-child { border-top: 1.5px solid rgba(26,22,20,0.07); }
.sn-pdp-detail-label { color: #8a8178; font-weight: 600; }
.sn-pdp-detail-val { font-weight: 700; color: var(--ink); }

/* Reviews */
.sn-pdp-reviews { padding: 48px 0; border-top: 2px solid rgba(26,22,20,0.07); }
.sn-pdp-reviews-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .sn-pdp-reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sn-pdp-reviews-grid { grid-template-columns: 1fr; } }

.sn-pdp-review-featured {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 4px 4px 0 rgba(26,22,20,0.08);
}
.sn-pdp-review-img { border-radius: 12px; overflow: hidden; height: 120px; display: flex; align-items: center; justify-content: center; }
.sn-pdp-review-img img { max-height: 100%; width: auto; object-fit: contain; }
.sn-pdp-rv-stars { font-size: 12px; color: var(--pink); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sn-pdp-rv-badge { font-size: 10px; font-weight: 700; background: var(--pink); color: #fff; padding: 2px 7px; border-radius: 4px; font-family: var(--font-body); }
.sn-pdp-rv-quote { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); margin: 0 0 8px; line-height: 1.3; }
.sn-pdp-review-featured p { font-size: 13px; color: #4a423d; margin: 0; line-height: 1.5; }
.sn-pdp-rv-author { font-weight: 700; font-size: 13px; color: var(--ink); margin-top: 4px !important; }
.sn-pdp-review-card {
  background: #fff;
  border: 1.5px solid rgba(26,22,20,0.1);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 3px 3px 0 rgba(26,22,20,0.06);
}
.sn-pdp-review-card blockquote { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 8px; line-height: 1.4; font-style: normal; }
.sn-pdp-review-card p { font-size: 12.5px; color: #4a423d; margin: 0 0 6px; }

/* Accessories */
.sn-pdp-accessories { padding: 48px 0; border-top: 2px solid rgba(26,22,20,0.07); }
.sn-pdp-acc-row { display: grid; grid-template-columns: repeat(3,1fr) 1.4fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .sn-pdp-acc-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .sn-pdp-acc-row { grid-template-columns: 1fr; } }

.sn-pdp-acc-item {
  background: #fff;
  border: 1.5px solid rgba(26,22,20,0.1);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  box-shadow: 3px 3px 0 rgba(26,22,20,0.06);
}
.sn-pdp-acc-img { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #f8f5ef; display: flex; align-items: center; justify-content: center; }
.sn-pdp-acc-img img { width: 85%; height: 85%; object-fit: contain; }
.sn-pdp-acc-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.sn-pdp-acc-price { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.sn-pdp-acc-cart {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.sn-pdp-acc-cart:hover { background: currentColor; color: #fff !important; }
.sn-pdp-acc-cart:hover svg { stroke: #fff; }

.sn-pdp-bundle {
  background: #fff;
  border: 2.5px solid;
  border-radius: 18px;
  padding: 16px;
  position: relative;
  box-shadow: 4px 4px 0 rgba(26,22,20,0.1);
}
.sn-pdp-bundle-badge {
  position: absolute;
  top: -12px;
  left: 16px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
}
.sn-pdp-bundle-imgs { display: flex; gap: 6px; margin-bottom: 10px; margin-top: 6px; }
.sn-pdp-bundle-imgs img { width: 44%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #f8f5ef; }
.sn-pdp-bundle-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 2px; }
.sn-pdp-bundle-desc { font-size: 12px; color: #8a8178; margin: 0 0 6px; }
.sn-pdp-bundle-price { font-size: 14px; margin: 0 0 10px; color: #8a8178; }
.sn-pdp-bundle-price s { margin-right: 6px; }
.sn-pdp-bundle-price strong { font-family: var(--font-display); font-size: 18px; }
.sn-pdp-bundle-btn {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  text-align: center;
  padding: 10px 14px;
  border-radius: 30px;
  text-decoration: none;
  transition: opacity .15s;
}
.sn-pdp-bundle-btn:hover { opacity: .85; }

/* Quiz band */
.sn-pdp-quiz-band {
  border-radius: 20px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 48px 0;
  border: 2px solid rgba(26,22,20,0.08);
  flex-wrap: wrap;
}
.sn-pdp-qb-char { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; }
.sn-pdp-qb-text { flex: 1; min-width: 200px; }
.sn-pdp-qb-text h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 4px; }
.sn-pdp-qb-text p { font-size: 13px; color: #6a5f58; margin: 0; }
.sn-pdp-qb-btn { flex-shrink: 0; white-space: nowrap; }

/* Meet the herd cross-sell */
.sn-pdp-herd { padding: 0 0 48px; border-top: 2px solid rgba(26,22,20,0.07); padding-top: 48px; }
.sn-pdp-herd-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width: 760px) { .sn-pdp-herd-grid { grid-template-columns: repeat(2,1fr); } }
.sn-pdp-herd-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid rgba(26,22,20,0.1);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 3px 3px 0 rgba(26,22,20,0.05);
}
.sn-pdp-herd-card img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.sn-pdp-herd-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sn-pdp-herd-info strong { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.sn-pdp-herd-info span { font-size: 11.5px; color: #6a5f58; }
.sn-pdp-herd-tag { font-size: 11px; font-weight: 700; }
.sn-pdp-herd-info a { font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: none; font-family: var(--font-display); }
.sn-pdp-herd-info a:hover { text-decoration: underline; }

/* Creator section */
.sn-pdp-creator {
  background: #fff;
  border: 2px solid rgba(26,22,20,0.08);
  border-radius: 24px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.sn-pdp-creator-photo img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sn-pdp-creator-text { flex: 1; min-width: 200px; }
.sn-pdp-creator-text h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); margin: 0 0 3px; }
.sn-pdp-creator-text p { font-size: 13.5px; color: #6a5f58; margin: 0; }
.sn-pdp-creator-thanks { font-style: italic; margin-top: 4px !important; font-size: 12.5px !important; color: #8a8178 !important; }
.sn-pdp-creator-doodles { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sn-pdp-creator-doodles svg { width: 24px; height: 24px; display: block; }
.sn-pdp-creator-doodles svg:first-child { width: 48px; }

/* ============================================================
   PDP — 20-feature additions
   ============================================================ */

/* 20: Subtle character color wash on hero */
.sn-pdp-hero-wrap { padding: 0 24px 32px; margin: 0 -24px; border-radius: 0 0 24px 24px; }

/* 12: Jump nav */
.sn-pdp-jumpnav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(26,22,20,0.08);
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sn-pdp-jumpnav::-webkit-scrollbar { display: none; }
.sn-pdp-jump {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: #8a8178;
  text-decoration: none;
  padding: 10px 20px;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.sn-pdp-jump:hover { color: var(--ink); }
.sn-pdp-jump-active { color: var(--ink); border-bottom-color: var(--pdp-c, var(--pink)); }

/* 1: Sticky buy bar */
.sn-pdp-sticky {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 2px solid rgba(26,22,20,0.1);
  box-shadow: 0 4px 20px rgba(26,22,20,0.12);
  transform: translateY(-100%);
  transition: transform .25s ease;
  padding: 10px 24px;
}
.sn-pdp-sticky-visible { transform: translateY(0); }
.sn-pdp-sticky-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.sn-pdp-sticky-img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.sn-pdp-sticky-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; flex: 1; }
.sn-pdp-sticky-price { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--sticky-c, var(--pink)); flex-shrink: 0; }
.sn-pdp-sticky-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 10px 22px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s;
}
.sn-pdp-sticky-btn:hover { opacity: .85; }

/* 2: Lightbox */
.sn-pdp-lightbox {
  position: fixed;
  inset: 0;
  /* body has `overflow: clip` elsewhere in this stylesheet, which makes
     fixed-position descendants compute height against the full document
     instead of the viewport in this engine — pins it to the page's real
     scroll height (thousands of px) and pushes the centered image far
     below the visible screen, leaving just the dark overlay on screen.
     Same fix as .sn-mobile-nav: state the height explicitly. */
  height: 100vh;
  z-index: 1000;
  background: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sn-pdp-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 12px; }
.sn-pdp-lb-close {
  position: absolute;
  top: 20px; right: 24px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sn-pdp-zoom-hint {
  position: absolute;
  bottom: 10px; right: 12px;
  font-size: 10px;
  color: rgba(26,22,20,0.4);
  font-weight: 600;
  pointer-events: none;
}

/* 5: Stock badges */
.sn-pdp-stock-low {
  font-size: 12px;
  font-weight: 700;
  background: #FFF3CD;
  color: #7A5C00;
  border: 1.5px solid #E6B800;
  border-radius: 20px;
  padding: 3px 10px;
  align-self: center;
}
.sn-pdp-sold-out {
  font-size: 12px;
  font-weight: 700;
  background: #FFE4E4;
  color: #C0392B;
  border: 1.5px solid #E74C3C;
  border-radius: 20px;
  padding: 3px 10px;
}

/* 4: Quantity stepper */
.sn-pdp-qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sn-pdp-qty-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.sn-pdp-stepper { display: flex; align-items: center; border: 2px solid rgba(26,22,20,0.15); border-radius: 30px; overflow: hidden; }
.sn-pdp-step {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
  font-family: var(--font-display);
}
.sn-pdp-step:hover { background: rgba(26,22,20,0.06); }
.sn-pdp-qty-input {
  width: 40px;
  text-align: center;
  border: none;
  background: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  outline: none;
}

/* 16: Wishlist */
.sn-pdp-wish {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  transition: transform .15s;
  display: flex;
  align-items: center;
}
.sn-pdp-wish:hover { transform: scale(1.2); }
.sn-pdp-wish-active svg { fill: var(--pdp-c, var(--pink)); }

/* 9: Gift option */
.sn-pdp-gift { margin-top: 10px; }
.sn-pdp-gift-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #4a423d;
  cursor: pointer;
  font-weight: 600;
}
.sn-pdp-gift-toggle input { cursor: pointer; accent-color: var(--pdp-c, var(--pink)); }
.sn-pdp-gift-note { margin-top: 10px; }
.sn-pdp-gift-textarea {
  width: 100%;
  border: 2px solid rgba(26,22,20,0.15);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color .15s;
}
.sn-pdp-gift-textarea:focus { border-color: var(--pdp-c, var(--pink)); }

/* 18: Back in stock */
.sn-pdp-oos { background: rgba(26,22,20,0.04); border-radius: 16px; padding: 20px; }
.sn-pdp-oos-msg { font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.sn-pdp-oos-form { display: flex; gap: 8px; flex-wrap: wrap; }
.sn-pdp-oos-email { flex: 1; min-width: 180px; padding: 12px 16px; border: 2px solid rgba(26,22,20,0.15); border-radius: 30px; font-size: 14px; outline: none; }
.sn-pdp-oos-btn { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; border: none; border-radius: 30px; padding: 12px 20px; cursor: pointer; white-space: nowrap; }

/* 10: Social share */
.sn-pdp-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.sn-pdp-share-label { font-size: 12px; font-weight: 700; color: #8a8178; }
.sn-pdp-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border: 1.5px solid rgba(26,22,20,0.15);
  border-radius: 20px;
  padding: 5px 12px;
  transition: background .12s, border-color .12s;
}
.sn-pdp-share-btn:hover { background: rgba(26,22,20,0.06); border-color: var(--ink); }

/* 11: Toast */
.sn-pdp-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 300;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  white-space: nowrap;
  pointer-events: none;
}
.sn-pdp-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 8: Personality bars */
.sn-pdp-bars {
  padding: 48px 0;
  border-top: 2px solid rgba(26,22,20,0.07);
}
.sn-pdp-bars-grid { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.sn-pdp-bar-row { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 12px; }
.sn-pdp-bar-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sn-pdp-bar-track { height: 10px; background: rgba(26,22,20,0.08); border-radius: 5px; overflow: hidden; }
.sn-pdp-bar-fill { height: 100%; border-radius: 5px; transition: width 1s ease; }
.sn-pdp-bar-val { font-size: 12px; font-weight: 700; color: #8a8178; text-align: right; }

/* 7: Video */
.sn-pdp-video { padding: 48px 0; border-top: 2px solid rgba(26,22,20,0.07); }
.sn-pdp-video-wrap { max-width: 720px; }
.sn-pdp-video-placeholder {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sn-pdp-vid-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.5; }
.sn-pdp-vid-play {
  position: relative;
  z-index: 2;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.sn-pdp-video-placeholder:hover .sn-pdp-vid-play { transform: scale(1.1); }
.sn-pdp-vid-label { position: absolute; bottom: 16px; color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 600; z-index: 2; }

/* 15: Comparison table */
.sn-pdp-compare { padding: 48px 0; border-top: 2px solid rgba(26,22,20,0.07); }
.sn-pdp-compare-details summary { cursor: pointer; }
/* Button-like disclosure trigger — thick outline + drop shadow, matching
   the site's standard button/card language (was a near-invisible thin
   translucent box before, easy to miss as tappable). */
.sn-pdp-compare-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  padding: 16px 20px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 4px 0 rgba(26,22,20,0.9);
  cursor: pointer;
  user-select: none;
  transition: transform .12s, box-shadow .12s;
}
.sn-pdp-compare-summary:hover { transform: translate(-1px,-1px); box-shadow: 4px 5px 0 rgba(26,22,20,0.9); }
.sn-pdp-compare-chev { flex: 0 0 auto; transition: transform .2s ease; }
.sn-pdp-compare-details[open] .sn-pdp-compare-summary { border-radius: 14px 14px 0 0; box-shadow: none; transform: none; }
.sn-pdp-compare-details[open] .sn-pdp-compare-chev { transform: rotate(180deg); }
.sn-pdp-compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 2px solid var(--ink); border-top: none; border-radius: 0 0 14px 14px; }
.sn-pdp-compare-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sn-pdp-compare-table th, .sn-pdp-compare-table td { padding: 12px 16px; text-align: left; border-bottom: 1.5px solid rgba(26,22,20,0.07); }
.sn-pdp-compare-table thead tr { background: rgba(26,22,20,0.03); }
.sn-pdp-compare-table th { font-weight: 700; }
.sn-pdp-compare-table td:first-child { font-weight: 600; color: #8a8178; }

/* Mobile — the 5-column table doesn't fit a phone screen even with
   horizontal scroll (users couldn't tell it was scrollable and it read as
   "opens too big to view"). Reflow to a stacked list instead: each row
   becomes its own block, each character's value gets its name as a label
   via the data-label attribute set in the markup. No more sideways
   scrolling needed at all. */
@media (max-width: 600px) {
  .sn-pdp-compare-table-wrap { overflow-x: visible; }
  .sn-pdp-compare-table, .sn-pdp-compare-table thead, .sn-pdp-compare-table tbody,
  .sn-pdp-compare-table th, .sn-pdp-compare-table tr, .sn-pdp-compare-table td { display: block; }
  .sn-pdp-compare-table thead { display: none; }
  .sn-pdp-compare-table tr {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    padding: 14px 16px; border-bottom: 1.5px solid rgba(26,22,20,0.07);
  }
  .sn-pdp-compare-table tr:last-child { border-bottom: none; }
  .sn-pdp-compare-table td { padding: 0; border: 0; font-size: 13.5px; }
  .sn-pdp-compare-table td.sn-pdp-compare-attr {
    flex: 1 1 100%; font-weight: 800; color: var(--ink); font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px;
  }
  .sn-pdp-compare-table td[data-label] { flex: 1 1 auto; min-width: 40%; }
  .sn-pdp-compare-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: #8a8178; }
}

/* 6: FAQ accordion */
.sn-pdp-faq { padding: 48px 0; border-top: 2px solid rgba(26,22,20,0.07); }
.sn-pdp-faq-list { display: flex; flex-direction: column; gap: 0; }
.sn-pdp-faq-item {
  border-bottom: 1.5px solid rgba(26,22,20,0.08);
}
.sn-pdp-faq-item:first-child { border-top: 1.5px solid rgba(26,22,20,0.08); }
.sn-pdp-faq-item summary {
  padding: 16px 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.sn-pdp-faq-item summary::after { content: '+'; font-size: 20px; color: #8a8178; transition: transform .2s; }
.sn-pdp-faq-item[open] summary::after { content: '−'; }
.sn-pdp-faq-ans { font-size: 14.5px; color: #4a423d; line-height: 1.7; padding: 0 0 16px; }

/* Bundle save pill */
.sn-bundle-save-pill { font-size: 10px; font-weight: 700; background: #E8F5E9; color: #2E7D32; border-radius: 12px; padding: 2px 7px; margin-left: 4px; }

/* PDP hero wrap — fix spacing + background */
.sn-pdp-hero-wrap {
  margin: 0 -24px;
  padding: 20px 24px 28px;
  border-radius: 0 0 20px 20px;
}
.sn-pdp-hero { margin-bottom: 0; }

/* ============================================================
   Adoption Bag (Cart)
   ============================================================ */
.sn-cart { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; }

/* Empty state */
.sn-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  gap: 16px;
}
.sn-cart-empty-doodles { display: flex; gap: 14px; align-items: center; }
.sn-cart-empty-doodles svg { width: 22px; height: 22px; display: block; }
.sn-cart-empty-char { width: 140px; height: auto; object-fit: contain; opacity: 0.8; }
.sn-cart-empty-heading { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,5vw,48px); letter-spacing: -1px; margin: 0; color: var(--ink); }
.sn-cart-empty-sub { font-size: 16px; color: #6a5f58; margin: 0; }

/* Header */
.sn-cart-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(26,22,20,0.08);
}
.sn-cart-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,4vw,44px); letter-spacing: -1px; margin: 0; color: var(--ink); }
.sn-cart-count { font-size: 14px; color: #8a8178; font-weight: 600; }

/* Two-column layout */
.sn-cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 860px) { .sn-cart-layout { grid-template-columns: 1fr; } }

/* Cart item card */
.sn-cart-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 2px solid rgba(26,22,20,0.08);
  border-left: 4px solid var(--item-c, var(--pink));
  border-radius: 16px;
  margin-bottom: 12px;
  box-shadow: 3px 3px 0 rgba(26,22,20,0.05);
}
@media (max-width: 500px) { .sn-cart-item { grid-template-columns: 80px 1fr; gap: 12px; padding: 14px; } }

.sn-cart-item-img-link {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  flex-shrink: 0;
}
.sn-cart-item-img-link img { width: 85%; height: 85%; object-fit: contain; display: block; }

.sn-cart-item-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sn-cart-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sn-cart-item-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  display: block;
  line-height: 1.2;
}
.sn-cart-item-name:hover { text-decoration: underline; }
.sn-cart-item-tag { font-size: 11.5px; font-weight: 700; display: block; margin-top: 3px; }
.sn-cart-item-prop { font-size: 12px; color: #6a5f58; display: block; margin-top: 2px; }
.sn-cart-item-price { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); flex-shrink: 0; }

.sn-cart-item-bottom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.sn-cart-stepper {
  display: flex;
  align-items: center;
  border: 1.5px solid;
  border-radius: 30px;
  overflow: hidden;
  border-color: rgba(26,22,20,0.15);
}
.sn-cart-step {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  transition: background .12s;
}
.sn-cart-step:hover { background: rgba(26,22,20,0.06); }
.sn-cart-qty {
  width: 32px;
  text-align: center;
  border: none;
  background: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  -moz-appearance: textfield;
}
.sn-cart-qty::-webkit-outer-spin-button,
.sn-cart-qty::-webkit-inner-spin-button { -webkit-appearance: none; }

.sn-cart-unit-price { font-size: 12.5px; color: #8a8178; font-weight: 600; }
.sn-cart-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #c0392b;
  text-decoration: none;
  margin-left: auto;
  transition: opacity .15s;
}
.sn-cart-remove:hover { opacity: .7; }

/* Certificate note */
.sn-cart-cert-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #8a8178;
  font-weight: 600;
  padding: 12px 16px;
  background: rgba(200,168,0,0.08);
  border-radius: 12px;
  margin-top: 8px;
  border: 1px solid rgba(200,168,0,0.2);
}

/* Order summary */
.sn-cart-summary { position: sticky; top: 80px; }
.sn-cart-summary-inner {
  background: #fff;
  border: 2px solid rgba(26,22,20,0.1);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 4px 4px 0 rgba(26,22,20,0.06);
  margin-bottom: 16px;
}
.sn-cart-summary-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); margin: 0 0 16px; }

.sn-cart-summary-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.sn-cart-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #4a423d; }
.sn-cart-shipping-note { font-size: 12px; color: #8a8178; font-style: italic; }

/* Free shipping bar */
.sn-cart-free-ship {
  background: rgba(74,143,212,0.08);
  border: 1.5px solid rgba(74,143,212,0.2);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: #1a5a8a;
}
.sn-cart-ship-bar-track { height: 6px; background: rgba(74,143,212,0.2); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.sn-cart-ship-bar-fill { height: 100%; background: #4A8FD4; border-radius: 3px; transition: width .5s ease; }
.sn-cart-free-ship-done { display: flex; align-items: center; gap: 8px; background: rgba(46,125,50,0.08); border-color: rgba(46,125,50,0.2); color: #2E7D32; font-weight: 700; }

.sn-cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  padding: 14px 0;
  border-top: 2px solid rgba(26,22,20,0.08);
  margin-bottom: 16px;
}

.sn-cart-checkout-btn {
  width: 100%;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  border: none;
  border-radius: 50px;
  padding: 16px 24px;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(255,46,146,0.25);
  transition: opacity .15s, transform .12s;
  display: block;
}
.sn-cart-checkout-btn:hover { opacity: .88; transform: translateY(-2px); }

.sn-cart-continue {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #8a8178;
  font-weight: 600;
  text-decoration: none;
  margin-top: 12px;
  transition: color .15s;
}
.sn-cart-continue:hover { color: var(--ink); }

/* Trust */
.sn-cart-trust { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1.5px solid rgba(26,22,20,0.07); }
.sn-cart-trust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6a5f58; font-weight: 600; }

/* Upsell */
.sn-cart-upsell {
  background: #fff;
  border: 2px solid rgba(26,22,20,0.08);
  border-radius: 20px;
  padding: 20px;
}
.sn-cart-upsell-label { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 12px; }
.sn-cart-upsell-chars { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.sn-cart-upsell-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.sn-cart-upsell-char div {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .15s;
}
.sn-cart-upsell-char:hover div { transform: scale(1.05); }
.sn-cart-upsell-char img { width: 80%; height: 80%; object-fit: contain; display: block; }
.sn-cart-upsell-char strong { font-family: var(--font-display); font-size: 12px; }

/* Bundle single image (full-width product shot) */
.sn-pdp-bundle-img-single {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  margin-top: 6px;
}
.sn-pdp-bundle-img-single img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Accessory item images — white background */
.sn-pdp-acc-img { background: #fff !important; }

/* Bundle single image — 1:1 ratio */
.sn-pdp-bundle-img-single img {
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}

/* Accessories section — consistent card sizing */
.sn-pdp-acc-row {
  align-items: stretch;
}
.sn-pdp-acc-item {
  justify-content: flex-start;
}
.sn-pdp-acc-img {
  height: 200px;
  width: 100%;
  aspect-ratio: unset;
  flex-shrink: 0;
}
.sn-pdp-acc-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bundle single image — match height of individual cards */
.sn-pdp-bundle-img-single img {
  height: 200px !important;
  width: 100%;
  aspect-ratio: unset !important;
  object-fit: contain;
}

/* ============================================================
   PDP Reviews — Redesigned to match target
   ============================================================ */

/* Grid: featured wide card + 3 equal cards */
.sn-pdp-reviews-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) { .sn-pdp-reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .sn-pdp-reviews-grid { grid-template-columns: 1fr; } }

/* Featured card — horizontal layout */
.sn-pdp-review-featured {
  display: flex;
  flex-direction: row;
  gap: 0;
  background: #fff;
  border: 1.5px solid rgba(26,22,20,0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 3px 3px 0 rgba(26,22,20,0.05);
}
.sn-pdp-review-feat-img {
  width: 42%;
  flex-shrink: 0;
  background: var(--pdp-bg, #f0f0f0);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  padding: 12px 8px 0;
}
.sn-pdp-review-feat-img img {
  width: 90%;
  max-height: 200px;
  object-fit: contain;
  display: block;
}
.sn-pdp-review-feat-body {
  flex: 1;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Large quote in featured */
.sn-pdp-rv-quote-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--ink);
  line-height: 1.25;
  margin: 0;
  font-style: normal;
}

/* Smaller review cards */
.sn-pdp-review-card {
  background: #fff;
  border: 1.5px solid rgba(26,22,20,0.08);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 2px 2px 0 rgba(26,22,20,0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sn-pdp-review-card blockquote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
  font-style: normal;
}
.sn-pdp-review-card p {
  font-size: 13px;
  color: #6a5f58;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

/* Stars row — shared */
.sn-pdp-rv-stars {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--pink);
}
.sn-pdp-rv-check { display: flex; align-items: center; }
.sn-pdp-rv-verified { font-size: 11.5px; font-weight: 600; color: #8a8178; font-family: var(--font-body); }

/* Footer: author + heart */
.sn-pdp-rv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.sn-pdp-rv-author { font-size: 13px; font-weight: 700; color: var(--ink); }
.sn-pdp-rv-heart { font-size: 18px; line-height: 1; }

/* Body text in featured */
.sn-pdp-rv-body { font-size: 13px; color: #6a5f58; line-height: 1.55; margin: 0; flex: 1; }

/* Remove old badge styles for PDP */
.sn-pdp-rv-badge { display: none; }

/* Reviews — fix featured card layout */
.sn-pdp-reviews-grid {
  align-items: stretch;
}
.sn-pdp-review-featured {
  height: 260px;
  min-height: 0;
}
.sn-pdp-review-feat-img {
  width: 36%;
  flex-shrink: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.sn-pdp-review-feat-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  max-height: none !important;
  padding: 12px;
  box-sizing: border-box;
}
.sn-pdp-review-feat-body {
  padding: 16px 14px;
  overflow: hidden;
  justify-content: space-between;
}
.sn-pdp-rv-quote-lg {
  font-size: clamp(14px, 1.6vw, 18px);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.sn-pdp-rv-body {
  font-size: 12px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.sn-pdp-review-card {
  min-height: 0;
  justify-content: space-between;
}
.sn-pdp-review-card blockquote {
  font-size: 14px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.sn-pdp-review-card p {
  font-size: 12px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

/* Reviews — precision fixes */

/* 1. Image fills the left column edge-to-edge, character sits bottom */
.sn-pdp-review-feat-img {
  width: 40%;
  padding: 0 !important;
  align-items: flex-end !important;
  overflow: hidden;
}
.sn-pdp-review-feat-img img {
  width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  padding: 0 !important;
}

/* 2. Verified Adopter stays on one line */
.sn-pdp-rv-stars {
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
}
.sn-pdp-rv-verified { white-space: nowrap; flex-shrink: 0; }

/* 3. Featured card taller so image has room */
.sn-pdp-review-featured { height: 300px; }

/* 4. Featured body: less padding, tighter */
.sn-pdp-review-feat-body { padding: 14px 12px; gap: 6px; }

/* 5. Quote slightly smaller so it fits */
.sn-pdp-rv-quote-lg { font-size: clamp(13px, 1.4vw, 16px); }

/* Reviews — clean uniform card design */
.sn-pdp-reviews-grid {
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  align-items: stretch;
}
@media (max-width: 900px) { .sn-pdp-reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .sn-pdp-reviews-grid { grid-template-columns: 1fr; } }

/* All cards same design */
.sn-pdp-review-featured,
.sn-pdp-review-card {
  height: auto !important;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #fff;
  border: 1.5px solid rgba(26,22,20,0.09);
  border-radius: 20px;
  box-shadow: 2px 2px 0 rgba(26,22,20,0.04);
}

/* Featured card quote — bigger */
.sn-pdp-rv-quote-feat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--ink);
  line-height: 1.25;
  margin: 0;
  font-style: normal;
}
.sn-pdp-review-featured p {
  font-size: 13.5px;
  color: #6a5f58;
  font-style: italic;
  line-height: 1.55;
  flex: 1;
  margin: 0;
  overflow: visible;
  -webkit-line-clamp: unset;
  display: block;
}

/* Shared card styles */
.sn-pdp-review-card blockquote {
  font-size: 15px;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.sn-pdp-review-card p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* Hide old featured img elements */
.sn-pdp-review-feat-img,
.sn-pdp-review-feat-body { display: none !important; }

/* Creator section — larger photo */
.sn-pdp-creator {
  gap: 28px;
  padding: 24px 28px;
}
.sn-pdp-creator-photo img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  border: 3px solid rgba(26,22,20,0.08);
}
.sn-pdp-creator-doodles { display: none; }
.sn-pdp-creator-text h3 { font-size: 18px; }
.sn-pdp-creator-text p { font-size: 14.5px; }

/* Creator section — banner style matching target */
.sn-pdp-creator {
  background: rgba(255,255,255,0.55);
  border: 1.5px solid rgba(26,22,20,0.08);
  border-radius: 20px;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

/* Heart doodle — left */
.sn-pdp-creator-heart-doodle {
  width: 36px;
  height: 34px;
  flex-shrink: 0;
}

/* Photo — natural shape, no circle */
.sn-pdp-creator-photo img {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border: none !important;
  flex-shrink: 0;
}

/* Text */
.sn-pdp-creator-text { flex: 1; min-width: 0; }
.sn-pdp-creator-text h3 { font-size: 15px; font-family: var(--font-display); font-weight: 700; margin: 0 0 2px; }
.sn-pdp-creator-text p { font-size: 13px; margin: 0; color: #6a5f58; }
.sn-pdp-creator-thanks { font-style: italic; margin-top: 3px !important; }

/* Signature */
.sn-pdp-creator-sig {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.sn-pdp-sig-text {
  font-family: 'Caveat', 'Dancing Script', cursive;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

/* Flower */
.sn-pdp-creator-flower {
  width: 52px;
  height: 65px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .sn-pdp-creator { flex-wrap: wrap; }
  .sn-pdp-creator-heart-doodle,
  .sn-pdp-creator-flower,
  .sn-pdp-creator-sig { display: none; }
}

/* Creator — larger photo, no flower */
.sn-pdp-creator-photo img {
  width: 130px !important;
  height: 130px !important;
}
.sn-pdp-creator-flower { display: none !important; }

/* Creator — no circle, bottom-aligned, larger */
.sn-pdp-creator { align-items: flex-end; padding-top: 16px; padding-bottom: 0; overflow: hidden; }
.sn-pdp-creator-text,
.sn-pdp-creator-sig { align-self: center; padding-bottom: 20px; }
.sn-pdp-creator-heart-doodle { align-self: center; margin-bottom: 20px; }
.sn-pdp-creator-photo { align-self: flex-end; line-height: 0; }
.sn-pdp-creator-photo img {
  border-radius: 0 !important;
  width: 140px !important;
  height: 170px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block;
  border: none !important;
}

/* Creator photo — full image, no crop */
.sn-pdp-creator-photo img {
  width: auto !important;
  height: 180px !important;
  object-fit: contain !important;
  object-position: bottom !important;
}

/* Creator — no heart, photo flush left */
.sn-pdp-creator { padding-left: 0; }
.sn-pdp-creator-photo { margin-left: 0; }
.sn-pdp-creator-heart-doodle { display: none !important; }

/* Creator — large, photo-first */
.sn-pdp-creator {
  min-height: 280px;
  padding: 0 32px 0 0;
  gap: 32px;
}
.sn-pdp-creator-photo img {
  height: 280px !important;
  width: auto !important;
}
.sn-pdp-creator-text { padding-bottom: 28px; }
.sn-pdp-creator-text h3 { font-size: 20px; margin-bottom: 6px; }
.sn-pdp-creator-text p { font-size: 15px; }
.sn-pdp-creator-sig { padding-bottom: 28px; }
.sn-pdp-sig-text { font-size: 38px; }

/* Creator text — fills section height better */
.sn-pdp-creator-text {
  padding: 32px 0 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  flex: 1;
}
.sn-pdp-creator-text h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.sn-pdp-creator-text p {
  font-size: clamp(14px, 1.5vw, 17px);
  color: #4a423d;
  margin: 0;
  line-height: 1.6;
}
.sn-pdp-creator-thanks {
  font-size: clamp(13px, 1.2vw, 15px) !important;
  color: #8a8178 !important;
  font-style: italic;
}
.sn-pdp-creator-sig {
  padding: 32px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}
.sn-pdp-sig-text { font-size: 44px; }

/* ============================================================
   Creator Section v2 — Full redesign (all 20 suggestions)
   ============================================================ */
.sn-pdp-creator-v2 {
  display: grid;
  grid-template-columns: 340px 1fr;
  background: var(--ink);
  border-radius: 24px;
  overflow: hidden;
  min-height: 380px;
  position: relative;
  margin-top: 60px;
}
@media (max-width: 780px) { .sn-pdp-creator-v2 { grid-template-columns: 1fr; } }

/* Photo — flush left, full height, no crop */
.sn-pdpc-photo {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sn-pdpc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: none;
}

/* Content right */
.sn-pdpc-content {
  padding: 36px 40px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

/* Watermark character */
.sn-pdpc-watermark {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 180px;
  opacity: 0.06;
  pointer-events: none;
  filter: invert(1);
}

/* Badge */
.sn-pdpc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 30px;
  width: fit-content;
}

/* Name — large Fredoka */
.sn-pdpc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  color: #fff;
  letter-spacing: -1.5px;
  line-height: 1;
  margin: 0;
}

/* Two columns */
.sn-pdpc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  flex: 1;
}
@media (max-width: 900px) { .sn-pdpc-cols { grid-template-columns: 1fr; } }

/* Quote column */
.sn-pdpc-quote-col { display: flex; flex-direction: column; gap: 14px; }
.sn-pdpc-star { width: 20px; height: 20px; }
.sn-pdpc-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 22px);
  color: #fff;
  line-height: 1.3;
  margin: 0;
  font-style: italic;
}
.sn-pdpc-stat {
  font-size: 13px;
  font-weight: 700;
  color: var(--yellow);
  margin: 0;
  margin-top: auto;
}

/* Bio column */
.sn-pdpc-bio-col { display: flex; flex-direction: column; gap: 10px; }
.sn-pdpc-cred { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.45); letter-spacing: .3px; margin: 0; text-transform: uppercase; }
.sn-pdpc-bio { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.6; margin: 0; }
.sn-pdpc-mural { font-size: 13px; color: rgba(255,255,255,0.5); font-style: italic; margin: 0; }

/* Social */
.sn-pdpc-social { display: flex; gap: 8px; flex-wrap: wrap; }
.sn-pdpc-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 5px 12px;
  transition: background .12s, color .12s;
}
.sn-pdpc-social-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Links */
.sn-pdpc-links { display: flex; flex-direction: column; gap: 4px; }
.sn-pdpc-link { font-size: 13px; font-weight: 700; color: var(--pink); text-decoration: none; }
.sn-pdpc-link:hover { text-decoration: underline; }

/* Heart accent */
.sn-pdpc-heart-accent { width: 36px; height: 28px; margin-top: auto; }

@media (max-width: 780px) {
  .sn-pdpc-photo { height: 260px; }
  .sn-pdpc-content { padding: 24px; }
  .sn-pdpc-watermark { display: none; }
}

/* ============================================================
   Creator v2 — 10 enhancements
   ============================================================ */

/* 1: Photo bleeds to top edge */
.sn-pdpc-photo { overflow: visible; }
.sn-pdpc-photo img {
  margin-top: -24px;
  height: calc(100% + 24px) !important;
  object-position: center top;
}

/* 2: Warm radial glow behind Chris */
.sn-pdpc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 55% 35%, rgba(180,100,0,0.28) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}
.sn-pdpc-photo { position: relative; overflow: hidden; }

/* 4: Doodle row */
.sn-pdpc-doodle-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sn-pdpc-star { display: none; } /* replaced by row */

/* 5: Bigger name */
.sn-pdpc-name { font-size: clamp(40px, 5vw, 68px); }

/* 6: Dot-grid texture on dark bg */
.sn-pdp-creator-v2 { position: relative; overflow: hidden; }
.sn-pdp-creator-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: .04;
  pointer-events: none;
  z-index: 0;
}
.sn-pdpc-content { position: relative; z-index: 1; }

/* 7: Pink accent line on quote */
.sn-pdpc-quote {
  border-left: 3px solid var(--pink);
  padding-left: 16px;
  margin-left: 0;
}

/* 8: Mission line updated in HTML — style it bolder */
.sn-pdpc-mural {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  letter-spacing: .2px;
}

/* 9: Larger social buttons */
.sn-pdpc-social-btn {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 30px;
  border: 1.5px solid rgba(255,255,255,0.25);
}

/* 10: Warm gold border on card */
.sn-pdp-creator-v2 { border: 1px solid rgba(255,210,30,0.18); }

/* Creator v2 — photo as background, full image, no crop */
.sn-pdp-creator-v2 {
  display: block !important;
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: 24px;
}

/* Photo: absolute, fills card, contain so full image shows */
.sn-pdpc-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block !important;
}
.sn-pdpc-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block;
  margin-top: 0 !important;
}

/* Gradient overlay: left transparent → right dark */
.sn-pdpc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(26,22,20,0) 0%,
    rgba(26,22,20,0.15) 30%,
    rgba(26,22,20,0.82) 52%,
    rgba(26,22,20,0.96) 100%
  );
  z-index: 1;
}

/* Content: floats on the right over the overlay */
.sn-pdpc-content {
  position: relative;
  z-index: 2;
  margin-left: 45%;
  padding: 36px 40px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 420px;
  justify-content: center;
}

/* Warm glow — now behind overlay */
.sn-pdpc-photo::after { z-index: 1; }

@media (max-width: 780px) {
  .sn-pdp-creator-v2 { min-height: 500px; }
  .sn-pdpc-photo img { object-position: center top !important; }
  .sn-pdpc-overlay {
    background: linear-gradient(to bottom, rgba(26,22,20,0) 0%, rgba(26,22,20,0.9) 50%, rgba(26,22,20,0.97) 100%);
  }
  .sn-pdpc-content { margin-left: 0; padding: 24px; margin-top: auto; min-height: auto; }
}

/* ============================================================
   Hero — 40-diff implementation pass
   ============================================================ */

/* 1: Hero less tall */
.sn-hero {
  min-height: calc(57vh - 74px);
  grid-template-columns: clamp(180px, 24vw, 360px) 1fr clamp(180px, 24vw, 360px);
}

/* 3: More dramatic top/bottom size difference */
.sn-hero-chars-left,
.sn-hero-chars-right { min-height: 460px; gap: 0; }

/* 4+12: Less vertical spacing in center */
.sn-hero-inner { gap: 0; }
.sn-hero h1 { margin: 4px 0 0; }
.sn-hero .sub { margin-top: 12px; }
.sn-cta-row { margin-top: 18px; gap: 12px; }

/* 6: Remove eyebrow badge entirely */
.sn-eyebrow { display: none !important; }

/* 7: Remove proof row */
.sn-hero-proof { display: none !important; }

/* 8: Headline more prominent */
.sn-hero h1 img, .sn-hero-headline {
  width: clamp(300px, 46vw, 800px) !important;
}

/* 11: Subheading slightly larger */
.sn-hero .sub {
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 400;
  max-width: 38ch;
}

/* 13-15: CTA more compact */
.sn-hero-cta { padding: 12px 24px; min-height: 58px; }
.sn-cta-line1 { font-size: 17px; }
.sn-cta-line2 { font-size: 11px; opacity: 0.8; }

/* 16-21: Trust bar — flat strip, no border/pill */
.sn-hero-trust {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-top: 1.5px solid rgba(26,22,20,0.1) !important;
  border-bottom: 1.5px solid rgba(26,22,20,0.1) !important;
  padding: 10px 0 !important;
  max-width: 680px;
  margin-top: 16px;
}
.sn-trust-badge {
  font-size: 11.5px;
  padding: 0 16px;
  gap: 6px;
}
.sn-trust-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.sn-trust-sep {
  width: 1px;
  height: 18px;
  background: rgba(26,22,20,0.15);
}

/* 25+29: Doodles more visible */
.sn-doodle { opacity: 1; }

/* 31-35: Speech bubbles slightly larger and more prominent */
.sn-speech-bubble {
  max-width: 140px;
  font-size: 12.5px;
  padding: 8px 11px;
  box-shadow: 3px 3px 0 rgba(26,22,20,0.18);
}

/* 36: Characters more saturated */
.sn-hc-img { filter: saturate(1.1); }

/* 39: Scroll cue very subtle */
.sn-scrollcue {
  font-size: 10px;
  opacity: 0.35;
  letter-spacing: 2.5px;
  margin-top: 14px;
}

/* 40: Announcement bar less prominent */
.sn-announce {
  font-size: 12px;
  padding: 7px 16px;
  background: var(--ink);
}

@media (max-width: 780px) {
  .sn-hero {
    grid-template-columns: clamp(80px, 11vw, 150px) 1fr clamp(80px, 11vw, 150px);
    min-height: calc(52vh - 74px);
  }
  .sn-hero-chars-left, .sn-hero-chars-right { min-height: 300px; }
}

/* ============================================================
   MOBILE — All 40 improvements
   ============================================================ */

/* ── 11: Hamburger button ── */
.sn-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
}
.sn-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
@media (max-width: 820px) {
  .sn-hamburger { display: flex; }
  .sn-nav-links  { display: none !important; }
  .sn-nav-social { display: none; }
  .sn-cart-label { display: none; }
}
@media (max-width: 400px) {
  .sn-nav-social { display: none !important; }
}

/* ── 11: Mobile nav overlay ──
   Explicit height (not just inset:0) because body has overflow:clip
   elsewhere on the site, which makes fixed-position descendants size
   against the document's scroll height instead of the viewport unless
   height is stated directly. Without this the drawer silently stretches
   to full page length and anything pinned to its bottom renders off-screen. */
.sn-mobile-nav {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 999;
  background: rgba(26,22,20,0.5);
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.sn-mobile-nav.sn-mnav-open { opacity: 1; pointer-events: all; }
.sn-mobile-nav-inner {
  position: relative;
  width: min(320px, 88vw);
  background: var(--paper);
  height: 100%;
  padding: 22px 22px 58px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,.68,.34,1);
  overflow-y: auto;
  overflow-x: hidden;
}
.sn-mobile-nav.sn-mnav-open .sn-mobile-nav-inner { transform: translateX(0); }
.sn-mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .32s ease .08s, transform .32s ease .08s;
}
.sn-mobile-nav.sn-mnav-open .sn-mobile-nav-top { opacity: 1; transform: translateY(0); }
.sn-mobile-nav-logo { height: 34px; width: auto; }
.sn-mobile-nav-close {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: transform .18s ease;
}
.sn-mobile-nav-close:active { transform: scale(0.88) rotate(-8deg); }
.sn-mobile-nav-links { display: flex; flex-direction: column; gap: 2px; }
.sn-mobile-nav-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 4px;
  letter-spacing: -.5px;
  transition: color .12s, transform .15s ease;
  display: flex;
  align-items: center;
  gap: 11px;
  opacity: 0;
  transform: translateY(8px);
}
.sn-mobile-nav.sn-mnav-open .sn-mobile-nav-link,
.sn-mobile-nav.sn-mnav-open .sn-mnav-bottom {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .34s ease calc(.12s + var(--i, 0) * 45ms), transform .34s ease calc(.12s + var(--i, 0) * 45ms);
}
.sn-mobile-nav-link:hover { color: var(--pink); }
.sn-mobile-nav-link:active { transform: scale(0.97); }
.sn-mobile-nav.sn-mnav-open .sn-mobile-nav-link:active { transform: scale(0.97); }

/* Every icon — character photo, bag, or eye SVG — sits in the same fixed
   box so they read as equal visual weight regardless of their own asset's
   native proportions; the asset inside just scales to fit, never stretches. */
.sn-mnav-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sn-mnav-icon img,
.sn-mnav-icon svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.sn-mnav-link-highlight {
  background: var(--pink);
  color: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 12px 20px;
  margin: 8px 0 6px;
  box-shadow: 3px 4px 0 var(--ink);
  transition: color .12s, transform .18s ease, box-shadow .18s ease;
}
.sn-mnav-link-highlight:hover { color: #fff; opacity: .94; }
.sn-mnav-link-highlight:active { transform: scale(0.97); box-shadow: 1px 2px 0 var(--ink); }
.sn-mnav-sparkle { margin-left: auto; font-size: 15px; }

.sn-mnav-wave { margin: 14px 0 0; opacity: .8; }
.sn-mnav-wave svg { width: 100%; height: 9px; display: block; }

.sn-mnav-bottom {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(8px);
}
.sn-mnav-fallback { text-align: center; }
.sn-mnav-fallback-label { font-size: 12.5px; color: #6a5f58; margin: 0 0 8px; }
.sn-mnav-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--pink);
  background: #fff;
  border: 2.5px solid var(--pink);
  border-radius: 999px;
  padding: 10px 22px;
  text-decoration: none;
  transition: transform .18s ease, background .15s ease, color .15s ease;
}
.sn-mnav-cta-secondary:hover { background: var(--pink); color: #fff; }
.sn-mnav-cta-secondary:active { transform: scale(0.96); }

.sn-mnav-cta-tertiary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 12px 20px;
  text-decoration: none;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sn-mnav-cta-tertiary:hover { color: var(--ink); }
.sn-mnav-cta-tertiary:active { transform: scale(0.97); box-shadow: 1px 2px 0 var(--ink); }

.sn-mobile-nav-utility {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.sn-mobile-nav-utility a { color: var(--ink); text-decoration: none; opacity: .85; transition: opacity .12s; }
.sn-mobile-nav-utility a:hover { color: var(--pink); opacity: 1; }
.sn-mnav-utility-link { font-size: 12.5px; font-weight: 700; }

/* Peeking Juniper — clipped to a shallow window so only the top of the
   character shows (a deliberate peek, not the full plush), pinned to the
   bottom of the panel without adding to its scrollable height. */
.sn-mnav-peek-wrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 96px;
  height: 44px;
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.sn-mnav-peek-char {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-6deg) translateY(20px);
  opacity: 0;
  transition: transform .4s cubic-bezier(.22,.68,.34,1) .3s, opacity .4s ease .3s;
}
.sn-mobile-nav.sn-mnav-open .sn-mnav-peek-char { transform: rotate(-6deg) translateY(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sn-mobile-nav-inner,
  .sn-mobile-nav-top,
  .sn-mobile-nav-link,
  .sn-mnav-bottom,
  .sn-mnav-peek-char {
    transition: none !important;
  }
  .sn-mobile-nav-top,
  .sn-mobile-nav-link,
  .sn-mnav-bottom { opacity: 1 !important; transform: none !important; }
  .sn-mnav-peek-char { opacity: 1 !important; transform: rotate(-6deg) !important; }
}

/* Narrow phones (iPhone SE class, ~320px) — the highlighted quiz pill has the
   most content packed on one line (icon + text + sparkle) and is the one row
   at real risk of overflow at the smallest common width. Trim it back. */
@media (max-width: 340px) {
  .sn-mobile-nav-link { font-size: 17px; gap: 9px; }
  .sn-mnav-link-highlight { padding: 10px 14px; }
  .sn-mnav-icon { width: 26px; height: 26px; }
  .sn-mnav-sparkle { font-size: 13px; }
}

/* ── 12: Logo smaller on mobile ── */
@media (max-width: 480px) {
  .sn-nav-logo img { height: 36px !important; }
}

/* ── 14: Announcement bar mobile ── */
@media (max-width: 600px) {
  .sn-announce { font-size: 11px; padding: 6px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sn-announce span { display: block; overflow: hidden; text-overflow: ellipsis; }
  .sn-nav { padding: 8px 0; }
}

/* Hero characters — no float/bob animation, unlike the same 4 plush images
   reused elsewhere (Values section, Newsletter band), which keep moving. */
.sn-hero .sn-float-darlene,
.sn-hero .sn-float-hobart,
.sn-hero .sn-float-juniper,
.sn-hero .sn-float-jimbob { animation: none !important; }

/* ── 1+2+8+9: Hero — collapse to single column, auto height ── */
@media (max-width: 480px) {
  .sn-hero {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px 0 0;
  }
  /* 9: Hide character side columns entirely */
  .sn-hero-chars-left,
  .sn-hero-chars-right { display: none !important; }

  /* Hero inner full width */
  .sn-hero-inner {
    width: 100%;
    padding: 0 16px;
    text-align: center;
  }

  /* 7+15: Headline larger on mobile */
  .sn-hero h1 img, .sn-hero-headline {
    width: 92vw !important;
    max-width: 420px !important;
  }

  /* 16: Subheading readable */
  .sn-hero .sub {
    font-size: 16px !important;
    max-width: 32ch;
    margin: 10px auto 0;
  }

  /* 5: CTAs side by side on mobile */
  .sn-cta-row {
    flex-direction: row !important;
    gap: 8px;
    margin-top: 16px;
  }
  .sn-hero-cta {
    flex: 1;
    min-width: 0;
    padding: 11px 12px !important;
    min-height: 52px;
  }
  .sn-cta-line1 { font-size: 14px !important; }
  /* 17: Hide subtitle on very small screens */
  .sn-cta-line2 { display: none; }

  /* 21: Scroll cue hidden on mobile */
  .sn-scrollcue { display: none !important; }

  /* 39: Doodles hidden on mobile */
  .sn-hero-doodles { display: none !important; }

  /* 10: Speech bubbles hidden cleanly */
  .sn-speech-bubble { display: none !important; }

  /* 4+3: Mobile characters row below CTAs */
  .sn-hero-mobile-chars {
    display: flex !important;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin-top: 10px;
  }
  .sn-hero-mobile-chars img {
    width: 46%;
    max-width: 180px;
    height: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
  }
}

/* Hide old single mobile char */
.sn-hero-mobile-char { display: none !important; }
.sn-hero-mobile-chars { display: none; }

/* 6: Trust bar 2x2 grid on mobile */
@media (max-width: 600px) {
  .sn-hero-trust {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 0;
    padding: 10px 8px !important;
    border: none !important;
    background: rgba(255,255,255,0.5) !important;
    border-radius: 16px !important;
    max-width: 100%;
  }
  .sn-trust-sep { display: none !important; }
  .sn-trust-badge {
    font-size: 10.5px;
    padding: 4px 8px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }
  /* 37: dot separator on mobile */
  .sn-trust-badge::before { content: ""; }
}

/* ── 18+20+40: Global mobile section spacing ── */
@media (max-width: 600px) {
  .sn-section { padding: 36px 0 !important; }
  .sn-wrap { padding: 0 16px; }
  .sn-pdp { padding: 0 16px 48px; }
}

/* ── 19: Remove gap between hero and Meet the Herd ── */
@media (max-width: 480px) {
  .sn-meet-section { padding-top: 8px !important; }
  .sn-meet-full { margin-top: 0 !important; }
}

/* ── 22+23: Filter on mobile — label stacks, pills scroll ── */
@media (max-width: 600px) {
  .sn-meet-header {
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-bottom: 12px;
  }
  .sn-meeting-heading-col { text-align: left; }
  .sn-feeling-label {
    display: block;
    width: 100%;
    font-size: 13px;
    margin-bottom: 6px;
    margin-right: 0;
  }
  .sn-feeling-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    gap: 6px;
  }
}

/* ── 24: Character cards 1-per-row on narrow mobile ── */
@media (max-width: 480px) {
  .sn-herd { grid-template-columns: 1fr !important; gap: 12px; }
  .sn-herd-outer { padding: 12px 12px 0; }
  .sn-card-img-zone { height: 220px; }
}

/* ── 26+27: Card button wrapping fix ── */
@media (max-width: 600px) {
  .sn-card-adopt { font-size: 12px; padding: 8px 10px; }
}

/* ── 28: Lifestyle correct height ── */
@media (max-width: 600px) {
  .sn-ls-img { height: clamp(160px, 48vw, 260px) !important; }
  .sn-ls-caption { padding: 14px 16px 40px; }
  .sn-ls-line1 { font-size: clamp(16px, 5.5vw, 22px); }
  .sn-ls-line2 { font-size: clamp(13px, 4vw, 18px); }
}

/* ── 29+30+31+32: Shop/Reviews/Accessories single column ── */
@media (max-width: 600px) {
  .sn-shopgrid { grid-template-columns: 1fr !important; }
  .sn-pdp-reviews-grid { grid-template-columns: 1fr !important; }
  .sn-pdp-acc-row { grid-template-columns: 1fr 1fr !important; }
  .sn-pdp-bundle { grid-column: 1 / -1; }
}

/* ── 33: Quiz band stacks ── */
@media (max-width: 600px) {
  .sn-pdp-quiz-band { flex-direction: column; text-align: center; gap: 14px; padding: 24px 20px; }
  .sn-pdp-qb-char { width: 70px; height: 70px; }
}

/* ── 34: Cart on mobile ── */
@media (max-width: 600px) {
  .sn-cart { padding: 16px 16px 60px; }
  .sn-cart-layout { grid-template-columns: 1fr !important; }
  .sn-cart-item { grid-template-columns: 72px 1fr; gap: 10px; padding: 14px; }
  .sn-cart-item-img-link { width: 72px; height: 72px; }
  .sn-cart-summary { position: static; }
}

/* ── 35: Product page hero on mobile ── */
@media (max-width: 600px) {
  .sn-pdp-hero { grid-template-columns: 1fr !important; gap: 20px; }
  .sn-pdp-about { grid-template-columns: 1fr !important; }
  .sn-pdp-specs-row { grid-template-columns: 1fr !important; }
  .sn-pdp-jumpnav { display: none; }
  .sn-pdp-creator-v2 { min-height: 260px; }
}

/* ── 36: Touch targets min 44px ── */
@media (max-width: 820px) {
  .sn-btn, .sn-cart-btn, .sn-feeling-btn,
  .sn-pdp-adopt-btn, .sn-cart-checkout-btn { min-height: 44px; }
  .sn-mobile-nav-link { min-height: 48px; display: flex; align-items: center; }
}

/* ── 38: Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sn-hc-img, .sn-float-darlene, .sn-float-hobart,
  .sn-float-juniper, .sn-float-jimbob,
  .sn-rv-track, .sn-scrollcue { animation: none !important; transition: none !important; }
}

/* ── Widgets row mobile ── */
@media (max-width: 600px) {
  .sn-widgets { grid-template-columns: 1fr !important; }
  .sn-pdp-herd-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Meet the Herd heading col mobile ── */
@media (max-width: 860px) {
  .sn-meet-heading-col { text-align: left; min-width: 0; }
  .sn-meet-h2 { font-size: clamp(18px, 4vw, 28px); }
}

/* ============================================================
   Quiz v2 — All 30 changes
   ============================================================ */

/* Section wrapper — cream page background (#5, #23) */
.sn-qv2-section {
  position: relative;
  text-align: center;
  padding-bottom: 60px;
}

/* Page doodles (#26) */
.sn-qv2-doodles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sn-qv2-doodle  { position: absolute; display: block; opacity: 0.85; }

/* Outer heading (#1-4) */
.sn-qv2-header {
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sn-qv2-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 52px);
  color: var(--ink);
  letter-spacing: -1.5px;
  line-height: 1.05;
  margin: 0;
}
.sn-qv2-sub {
  font-size: clamp(14px, 1.8vw, 17px);
  color: #6a5f58;
  max-width: 52ch;
  margin: 0;
}
/* "It's weirdly accurate." pill (#4) */
.sn-qv2-accurate-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 40px;
  padding: 7px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

/* Card wrapper — holds card + peeking characters (#18) */
.sn-qv2-wrap {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  z-index: 1;
}

/* Peeking corner characters (#17-18) */
.sn-qv2-char {
  position: absolute;
  width: clamp(80px, 10vw, 150px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
.sn-qv2-tl { top: -30px;  left: -60px;  transform: rotate(-10deg); }
.sn-qv2-tr { top: -20px;  right: -60px; transform: rotate(8deg) scaleX(-1); }
.sn-qv2-bl { bottom: -20px; left: -50px;  transform: rotate(10deg); }
.sn-qv2-br { bottom: -15px; right: -55px; transform: rotate(-8deg) scaleX(-1); }
@media (max-width: 820px) { .sn-qv2-char { display: none; } }

/* Quiz card — light blue gradient (#6-10) */
.sn-qv2-card {
  background: linear-gradient(160deg, #d0ecff 0%, #e8f6ff 45%, #fff8f0 100%);
  border: 2px solid rgba(26,22,20,0.14);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 6px 6px 0 rgba(26,22,20,0.08);
  text-align: left;
  position: relative;
  z-index: 1;
}

/* Progress row (#11-14) */
.sn-qv2-prog-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  background: #fff;
  border: 1.5px solid rgba(26,22,20,0.1);
  border-radius: 40px;
  padding: 8px 14px;
}
.sn-qv2-prog-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-body);
}
.sn-qv2-prog-track {
  flex: 1;
  height: 8px;
  background: rgba(26,22,20,0.1);
  border-radius: 4px;
  overflow: hidden;
}
.sn-qv2-prog-fill {
  height: 100%;
  background: var(--pink);
  border-radius: 4px;
  width: 0%;
  transition: width .4s ease;
}
.sn-qv2-prog-emoji {
  font-size: 18px;
  flex-shrink: 0;
}

/* Question text — dark, large (#11, #15, #16) */
.sn-qv2-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 28px);
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -.3px;
}
.sn-q-sparkle {
  color: var(--pink);
  font-size: 0.75em;
}

/* Answer options — light bg, dark text (#13-16, #19-22) */
.sn-qv2-opts {
  display: grid;
  gap: 10px;
}
.sn-qv2-opts .sn-qopt {
  background: #fff !important;
  border: 1.5px solid rgba(26,22,20,0.12) !important;
  color: var(--ink) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  font-family: var(--font-body) !important;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, background .12s;
}
.sn-qv2-opts .sn-qopt:hover,
.sn-qv2-opts .sn-qopt:focus-visible {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(255,46,146,0.12) !important;
  background: #fff !important;
  transform: none !important;
}
.sn-qv2-opts .sn-qopt.sn-qopt-selected {
  border-color: var(--pink) !important;
  background: rgba(255,46,146,0.05) !important;
  box-shadow: 0 0 0 3px rgba(255,46,146,0.18) !important;
  transform: none !important;
}
.sn-qv2-opts .sn-qemoji { font-size: 22px !important; }

/* Result section — dark-themed inside the light card (override) */
.sn-qv2-card .sn-qresult {
  color: var(--ink);
}
.sn-qv2-card .sn-rfeel { color: var(--pink) !important; }
.sn-qv2-card .sn-rdesc { color: #4a423d !important; }
.sn-qv2-card .sn-rrunnerup { color: #8a8178 !important; }
.sn-qv2-card .sn-again { color: #8a8178 !important; }

/* "You might be matched with..." (#28-29) */
.sn-qv2-preview {
  max-width: 720px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1.5px solid rgba(26,22,20,0.08);
  position: relative;
  z-index: 1;
}
.sn-qv2-preview-label {
  font-size: 13px;
  font-weight: 700;
  color: #8a8178;
  margin: 0 0 14px;
  text-align: center;
}
.sn-qv2-preview-chars {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 8px;
}
.sn-qv2-pchar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-right: 1.5px solid rgba(26,22,20,0.08);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}
.sn-qv2-pchar:last-child { border-right: none; }
.sn-qv2-pchar-img {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(26,22,20,0.05);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sn-qv2-pchar-img img { width: 85%; height: 85%; object-fit: contain; }

@media (max-width: 600px) {
  .sn-qv2-preview-chars { grid-template-columns: repeat(5,1fr); gap: 4px; }
  .sn-qv2-pchar { font-size: 10px; padding: 8px 2px; }
  .sn-qv2-pchar-img { width: 44px; height: 44px; }
  .sn-qv2-card { padding: 18px; }
  .sn-qv2-prog-label { font-size: 11px; }
}

/* Quiz v2 — 3 fixes */

/* 1: Characters behind the card, not covering content */
.sn-qv2-char { z-index: 0; }
.sn-qv2-card { z-index: 3; position: relative; }

/* 2: Centering — prevent char overflow from shifting layout */
.sn-qv2-section { overflow: hidden; }
.sn-qv2-wrap { text-align: left; }
.sn-qv2-header { text-align: center; }

/* 3: Share button readable on light card */
.sn-qv2-card .sn-share-btn {
  color: var(--ink) !important;
  border-color: rgba(26,22,20,0.2) !important;
}
.sn-qv2-card .sn-share-btn:hover {
  background: rgba(26,22,20,0.06) !important;
  border-color: var(--ink) !important;
}
.sn-qv2-card .sn-share-btn svg { fill: var(--ink) !important; }

/* Quiz result — centered */
.sn-qv2-card .sn-qresult {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sn-qv2-card .sn-rfeel { text-align: center; }
.sn-qv2-card .sn-rdesc { text-align: center; max-width: 46ch; }
.sn-qv2-card .sn-rrunnerup { text-align: center; }
.sn-qv2-card .sn-result-actions { justify-content: center; }

/* Quiz v2 — name + result visibility fixes */

/* 1: Result hidden during quiz (display:flex was overriding display:none) */
.sn-qv2-card .sn-qresult:not(.sn-show) { display: none !important; }
.sn-qv2-card .sn-qresult.sn-show {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

/* 2: Character name image visible on light card (was mix-blend-mode:screen) */
.sn-qv2-card .sn-rname-img {
  mix-blend-mode: multiply !important;
  height: 52px !important;
}

/* 3: ✦ sparkles inline with question, not wrapping awkwardly */
.sn-qv2-q { display: flex; align-items: flex-start; gap: 6px; flex-wrap: nowrap; }
.sn-q-sparkle { flex-shrink: 0; font-size: 14px; margin-top: 4px; }

/* Quiz question text — centered */
.sn-qv2-q {
  display: block !important;
  text-align: center;
}
.sn-q-sparkle { display: inline; }

/* ============================================================
   Review photos — customer shots
   ============================================================ */

/* Homepage marquee photo strip */
.sn-rv-photos {
  display: flex;
  gap: 5px;
  margin: 8px 0 6px;
  flex-wrap: wrap;
}
.sn-rv-photos img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid rgba(26,22,20,0.1);
  display: block;
  flex-shrink: 0;
}
/* Let photo cards be taller than the fixed 290px */
.sn-rv:has(.sn-rv-photos) { height: auto; min-height: 290px; }

/* Product page featured review photo grid */
.sn-pdp-rv-real-photos {
  display: flex;
  gap: 6px;
  margin: 10px 0 6px;
  flex-wrap: wrap;
}
.sn-pdp-rv-real-photos img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid rgba(26,22,20,0.1);
  display: block;
}

/* ============================================================
   Reviews — All 20 improvements
   ============================================================ */

/* 1: Photos larger */
.sn-rv-photos img { width: 100px !important; height: 100px !important; }

/* 2: Photo grid — 3-col for 3 photos, 2-col for 2, 1-col for 1 */
.sn-rv-photos { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 6px; }
.sn-rv-photos img { width: 100% !important; height: 80px !important; }

/* 3: Avatar color matches their Schnerd */
.sn-rv:has(.sn-rv-chip-darlene) .sn-rv-avatar { background: #4A8FD4 !important; }
.sn-rv:has(.sn-rv-chip-hobart)  .sn-rv-avatar { background: #E8920E !important; }
.sn-rv:has(.sn-rv-chip-juniper) .sn-rv-avatar { background: #C8A800 !important; }
.sn-rv:has(.sn-rv-chip-jimbob)  .sn-rv-avatar { background: #3DBB4E !important; }

/* 4: Verified Adopter → green checkmark style */
.sn-rv-badge {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
  border: 1px solid rgba(46,125,50,0.25) !important;
}
.sn-rv-badge::before { content: "✓ "; font-weight: 800; }

/* 5: Card left border matches character */
.sn-rv:has(.sn-rv-chip-darlene) { border-left: 4px solid #4A8FD4 !important; }
.sn-rv:has(.sn-rv-chip-hobart)  { border-left: 4px solid #E8920E !important; }
.sn-rv:has(.sn-rv-chip-juniper) { border-left: 4px solid #C8A800 !important; }
.sn-rv:has(.sn-rv-chip-jimbob)  { border-left: 4px solid #3DBB4E !important; }

/* 6: Photo border matches character */
.sn-rv:has(.sn-rv-chip-darlene) .sn-rv-photos img { border-color: #4A8FD4 !important; }
.sn-rv:has(.sn-rv-chip-hobart)  .sn-rv-photos img { border-color: #E8920E !important; }
.sn-rv:has(.sn-rv-chip-juniper) .sn-rv-photos img { border-color: #C8A800 !important; }
.sn-rv:has(.sn-rv-chip-jimbob)  .sn-rv-photos img { border-color: #3DBB4E !important; }

/* 7: Review title bolder/larger */
.sn-rv-title { font-size: 14.5px; font-weight: 800; margin-bottom: 7px; }

/* 9: Scorecard — larger number, warmer treatment */
.sn-rv-score-num { font-size: 80px; letter-spacing: -3px; color: var(--ink); }
.sn-rv-score-stars { color: var(--pink); font-size: 24px; letter-spacing: 4px; }
.sn-rv-scorecard-inline { box-shadow: 4px 4px 0 rgba(26,22,20,0.08); }

/* 10: Header row centered — heading on its own line, rating box under it */
.sn-rv-header-row { flex-direction: column; justify-content: center; gap: 16px; }
.sn-rv-main-heading { text-align: center; }

/* 11: Body text clamped to 3 lines */
.sn-rv-body { -webkit-line-clamp: 3 !important; }

/* 12: Photos show FIRST via CSS order */
.sn-rv { display: flex; flex-direction: column; }
.sn-rv-header    { order: 0; }
.sn-rv-char-chip { order: 1; }
.sn-rv-photos    { order: 2; margin: 6px 0; }
.sn-rv-title     { order: 3; }
.sn-rv-body      { order: 4; }
.sn-rv-date      { order: 10; }

/* 13: Date as subtle pill tag */
.sn-rv-date {
  display: inline-block;
  background: rgba(26,22,20,0.06);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  color: #8a8178;
  width: fit-content;
}

/* 14: Character chip more prominent */
.sn-rv-char-chip {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
}
.sn-rv-chip-darlene { background: #CCE3F5 !important; color: #1A5A8A !important; }
.sn-rv-chip-hobart  { background: #FAD8B0 !important; color: #7A4200 !important; }
.sn-rv-chip-juniper { background: #F5ECA0 !important; color: #6A5200 !important; }
.sn-rv-chip-jimbob  { background: #C0F0C8 !important; color: #1A5A2A !important; }

/* 18: Star color matches character */
.sn-rv:has(.sn-rv-chip-darlene) .sn-rv-stars { color: #4A8FD4 !important; }
.sn-rv:has(.sn-rv-chip-hobart)  .sn-rv-stars { color: #E8920E !important; }
.sn-rv:has(.sn-rv-chip-juniper) .sn-rv-stars { color: #C8A800 !important; }
.sn-rv:has(.sn-rv-chip-jimbob)  .sn-rv-stars { color: #3DBB4E !important; }

/* 19: Fade effect at bottom of long review bodies */
.sn-rv-body {
  position: relative;
  overflow: hidden;
}

/* 20: Leave a review footer link — styled in HTML below */
.sn-rv-leave-cta {
  text-align: center;
  padding: 28px 0 8px;
}
.sn-rv-leave-cta a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  transition: color .12s, border-color .12s;
}
.sn-rv-leave-cta a:hover { color: var(--pink); border-color: var(--pink); }

/* ============================================================
   Mobile hero & meet — target mockup match
   ============================================================ */

/* Star rating row (hidden on desktop, shown on mobile) */
.sn-hero-stars-row { display: none; }
@media (max-width: 480px) {
  .sn-hero-stars-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin: 12px 0 4px;
  }
  .sn-hero-stars-gold { color: #E8920E; font-size: 18px; letter-spacing: 2px; }
  .sn-hero-stars-label { font-size: 14px; font-weight: 600; color: var(--ink); }
}

/* Mobile hero — restore characters on sides */
@media (max-width: 480px) {
  .sn-hero {
    display: grid !important;
    grid-template-columns: 26vw 1fr 26vw !important;
    min-height: auto !important;
    padding: 8px 0 0 !important;
    align-items: center;
  }
  .sn-hero-chars-left,
  .sn-hero-chars-right {
    display: flex !important;
    min-height: 200px !important;
    opacity: 1 !important;
  }
  .sn-hero-inner { padding: 0 8px; }

  /* CTAs: stacked full width */
  .sn-cta-row {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }
  .sn-hero-cta {
    width: 100% !important;
    flex: none !important;
    padding: 14px 20px !important;
    min-height: 52px !important;
    justify-content: center;
  }
  .sn-cta-line1 { font-size: 16px !important; }
  .sn-cta-line2 { display: none !important; }

  /* Trust bar: horizontal scroll row of pills */
  .sn-hero-trust {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 8px !important;
    padding: 8px 0 4px !important;
    border: none !important;
    background: none !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    scrollbar-width: none;
  }
  .sn-hero-trust::-webkit-scrollbar { display: none; }
  .sn-trust-badge {
    flex-shrink: 0 !important;
    background: #fff !important;
    border: 1.5px solid rgba(26,22,20,0.12) !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .sn-trust-sep { display: none !important; }

  /* Hide mobile chars row (no longer needed) */
  .sn-hero-mobile-chars { display: none !important; }
  .sn-scrollcue { display: none !important; }
}

/* Meet the Herd — View all link */
.sn-meet-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.sn-meet-view-all {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.sn-meet-view-all:hover { color: var(--pink); }

/* Card price */
.sn-card-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin: 0;
}

/* Meet the Herd — horizontal scroll on mobile (#7-10) */
@media (max-width: 560px) {
  .sn-herd-outer { padding: 12px 0 0 !important; overflow: visible; }
  .sn-herd {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 4px 16px 16px !important;
    margin: 0 !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sn-herd::-webkit-scrollbar { display: none; }

  /* Landscape card (#8) */
  .sn-char-card {
    min-width: 80vw !important;
    max-width: 80vw !important;
    flex-shrink: 0;
    scroll-snap-align: start;
    flex-direction: row !important;
    height: 180px !important;
    border-radius: 18px !important;
  }

  /* Image left in landscape */
  .sn-card-img-zone {
    width: 42% !important;
    height: 100% !important;
    flex-shrink: 0;
    border-radius: 16px 0 0 16px !important;
    padding: 30px 8px 0 !important;
  }
  .sn-card-badge-row { top: 6px; }
  .sn-card-img-zone img { max-height: 140px !important; max-width: 100% !important; }

  /* Text right */
  .sn-card-info {
    flex: 1;
    padding: 14px 12px !important;
    justify-content: center;
    gap: 4px !important;
    overflow: hidden;
  }
  .sn-card-tagline { font-size: 12px !important; }
  .sn-card-best { font-size: 11px !important; }
  .sn-card-price { font-size: 18px !important; }
  .sn-card-adopt { font-size: 11px !important; padding: 7px 10px !important; }

  /* Pagination dots (#10) */
  .sn-meet-full::after {
    content: "";
    display: block;
    height: 0;
  }
  .sn-herd-outer::after {
    content: "● ○ ○ ○ ○";
    display: block;
    text-align: center;
    color: rgba(26,22,20,0.25);
    font-size: 10px;
    letter-spacing: 6px;
    padding: 8px 0 0;
  }
}

/* ============================================================
   Hero mobile — PROPER restructure (fix horrible layout)
   ============================================================ */
@media (max-width: 480px) {

  /* Grid: narrow char cols, wide center */
  .sn-hero {
    display: grid !important;
    grid-template-columns: 22vw 1fr 22vw !important;
    grid-template-rows: auto !important;
    min-height: auto !important;
    height: auto !important;
    padding: 24px 0 0 !important;
    align-items: start !important;
  }

  /* Char columns: row 1 only, one char each. Min-height trimmed down to
     just what the character art needs — it was the tallest thing in row 1
     and was forcing dead space above the headline/subheading below it. */
  .sn-hero-chars-left  { grid-column: 1; grid-row: 1; min-height: 70px !important; height: auto !important; justify-content: flex-end; padding: 0; }
  .sn-hero-chars-right { grid-column: 3; grid-row: 1; min-height: 70px !important; height: auto !important; justify-content: flex-end; padding: 0; }

  /* Hide top characters — only show bottom (Darlene left, JimBob right) */
  .sn-hero-chars-left  .sn-float-juniper { display: none !important; }
  .sn-hero-chars-right .sn-float-hobart  { display: none !important; }
  .sn-hero-chars-left  .sn-float-darlene { flex: 1 !important; }
  .sn-hero-chars-right .sn-float-jimbob  { flex: 1 !important; }

  /* Make hero inner transparent so children become grid items */
  .sn-hero-inner {
    display: contents !important;
    padding: 0 !important;
  }

  /* h1: center column, row 1 — alongside characters. Top-aligned, and row 1
     itself is now trimmed to content height (see char columns above) so
     there's no leftover dead space either above the headline or between
     the headline and the subheading. */
  .sn-hero h1 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
  }
  /* Headline width is set once, below, by the "Headline logo larger on
     mobile" rule (68vw) — a duplicate 56vw rule used to live here and
     silently lose the cascade to it; removed so there's one source of
     truth (the subheading's gap math below depends on this exact value). */

  /* Subheading: shares row 1 with the headline instead of owning row 2.
     Row 1's height is set by the two stacked side characters (208px
     fixed) — the headline (h1, top-aligned) only needs ~100-130px of
     that, which used to leave dead space below it before row 2 started.
     A negative margin was used to pull the subheading up into that dead
     space, but negative margins don't shrink a grid track's own
     auto-computed size, so row 2 stayed just as tall — the pulled-up text
     moved, row 3 (the CTAs) didn't, and the gap reappeared below the
     subheading instead of above it. Putting the subheading directly in
     row 1, bottom-aligned against the headline, removes row 2 (and that
     phantom track height) entirely — the leftover row-1 space becomes the
     visible gap on its own, no margin math needed. */
  .sn-hero .sub {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    align-self: end !important;
    padding: 0 24px 0 !important;
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    white-space: pre-line !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* CTAs: full width */
  .sn-cta-row {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 24px 0 !important;
    margin: 0 !important;
  }
  .sn-hero-cta {
    width: 100% !important;
    flex: none !important;
    padding: 14px 20px !important;
    min-height: 66px !important;
    justify-content: center !important;
  }
  .sn-cta-line1 { font-size: 16px !important; }
  .sn-cta-line2 { display: none !important; }

  /* Stars row: full width */
  .sn-hero-stars-row {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 20px 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .sn-hero-stars-label { white-space: nowrap !important; font-size: 14px; }

  /* Trust bar: full width horizontal scroll */
  .sn-hero-trust {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 10px 20px 8px !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }
  .sn-hero-trust::-webkit-scrollbar { display: none; }
  .sn-trust-sep { display: none !important; }
  .sn-trust-badge {
    flex-shrink: 0 !important;
    background: #fff !important;
    border: 1.5px solid rgba(26,22,20,0.12) !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Scroll cue, eyebrow, mobile chars: hidden */
  .sn-scrollcue { display: none !important; }
  .sn-eyebrow { display: none !important; }
  .sn-hero-mobile-chars { display: none !important; }
  .sn-hero-proof { display: none !important; }
  .sn-speech-bubble { display: none !important; }
}

/* ============================================================
   Mobile fixes — 6 issues
   ============================================================ */

/* 1: Characters peek from screen edges */
@media (max-width: 480px) {
  .sn-hero { overflow: hidden; }
  .sn-hero-chars-left,
  .sn-hero-chars-right { overflow: visible !important; }

  /* Darlene peeks from left — partially off screen */
  .sn-hero-chars-left .sn-float-darlene {
    width: 32vw !important;
    transform: translateX(-28%) !important;
    flex: 1 !important;
    object-position: right center;
  }
  /* JimBob peeks from right — partially off screen */
  .sn-hero-chars-right .sn-float-jimbob {
    width: 32vw !important;
    transform: translateX(28%) !important;
    flex: 1 !important;
    object-position: left center;
  }
}

/* 2: Headline logo larger on mobile */
@media (max-width: 480px) {
  .sn-hero h1 img, .sn-hero-headline {
    width: 68vw !important;
    max-width: 68vw !important;
  }
}

/* 3: Choose by feeling visible on mobile */
@media (max-width: 600px) {
  .sn-meet-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .sn-meet-filter-col { width: 100%; }
  .sn-feeling-filter {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  .sn-feeling-filter::-webkit-scrollbar { display: none; }
  .sn-feeling-btn {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    font-size: 12px !important;
    padding: 5px 11px !important;
  }
  .sn-feeling-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
}

/* 4+5: Working dots + card padding on mobile */
.sn-herd-dots { display: none; }
@media (max-width: 560px) {
  .sn-herd-dots {
    display: flex !important;
    justify-content: center;
    gap: 7px;
    padding: 10px 0 4px;
  }
  .sn-herd-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(26,22,20,0.2);
    transition: background .2s, transform .2s;
    cursor: pointer;
  }
  .sn-herd-dot-active {
    background: var(--ink);
    transform: scale(1.3);
  }

  /* Remove old CSS-content dots */
  .sn-herd-outer::after { content: none !important; }

  /* Card padding from screen edges */
  .sn-herd {
    padding: 4px 16px 12px !important;
    scroll-padding-left: 16px !important;
  }
  .sn-char-card:first-child { margin-left: 0; }
  .sn-char-card:last-child  { margin-right: 16px; }
}

/* 6: Love Yourself coming soon — hide price on this card specifically */
.sn-char-card[data-feeling="self-kindness"] .sn-card-price { display: none; }

/* ============================================================
   Four fixes
   ============================================================ */

/* 1: Center headline image on mobile */
@media (max-width: 480px) {
  .sn-hero h1 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* 2: Hide Choose by feeling on mobile */
@media (max-width: 600px) {
  .sn-meet-filter-col { display: none !important; }
  .sn-feeling-label   { display: none !important; }
  .sn-feeling-more    { display: none !important; }
}

/* 3: Shop section — 2x2 on mobile, 4-in-a-row on desktop */
.sn-shop-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  max-width: 100% !important;
}
@media (max-width: 820px) {
  .sn-shop-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 400px) {
  .sn-shop-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Shop cards — plush photos, compact layout */
.sn-prod-pic img {
  object-fit: contain;
  padding: 8px;
  background: #fff;
}
.sn-prod-name { margin-bottom: 10px; }
.sn-char-name-img { height: 80px !important; }
.sn-pull-quote { font-size: 13px; -webkit-line-clamp: 3; }
.sn-add-btn { border-radius: 30px !important; font-size: 15px; }

/* Mobile meet card (landscape) — tighter spacing */
@media (max-width: 560px) {
  .sn-card-info {
    justify-content: flex-start !important;
    padding: 10px 10px 10px !important;
    gap: 4px !important;
  }
  .sn-card-tagline { font-size: 11.5px !important; line-height: 1.3 !important; }
  .sn-card-best    { font-size: 10.5px !important; }
  .sn-card-price   { font-size: 16px !important; margin: 2px 0 !important; }
  .sn-card-adopt   { font-size: 10.5px !important; padding: 6px 8px !important; margin-top: 4px !important; }
  /* Badge sits cleanly at top of image */
  .sn-card-badge-row { top: 6px !important; }
  .sn-card-badge { font-size: 11px !important; padding: 3px 10px !important; }
}

/* ============================================================
   Shop Section v2 — All 20 improvements
   ============================================================ */

/* 17: Section heading larger */
.sn-shop-head h2 { font-size: clamp(26px, 4vw, 44px); }

/* 15: Thinner top border */
.sn-prod-v2 { border-top: 3px solid var(--char-color) !important; }

/* 14: Softer shadow */
.sn-prod-v2 { box-shadow: 0 4px 20px rgba(26,22,20,0.07) !important; border-radius: 20px; overflow: hidden; }

/* 4: Image zone colored background, contain so full plush shows */
.sn-prod-pic-colored {
  background-size: cover;
  aspect-ratio: 4 / 3 !important;
}
.sn-prod-pic-colored img {
  object-fit: contain !important;
  object-position: center bottom !important;
  padding: 8px !important;
  background: transparent !important;
}

/* 10: Card body white */
.sn-prod-body-white { background: #fff !important; }

/* 19+7: Stars inline, compact, no wrap */
.sn-prod-stars-row {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  margin-bottom: 6px;
}
.sn-prod-stars-row .sn-stars { font-size: 13px; letter-spacing: 1px; }
.sn-prod-stars-row .sn-stars-label { font-size: 12px; color: #8a8178; white-space: nowrap; }

/* 3: Name logo — big, matches card width */
.sn-char-name-img { height: 80px !important; max-width: 100%; display: block; mix-blend-mode: multiply; }

/* 11: Best for tag */
.sn-prod-best-tag { font-size: 11.5px; font-weight: 700; display: block; margin: 2px 0 4px; }

/* 5+6: Pull quote smaller, thinner border */
.sn-pull-quote-v2 {
  font-size: 12.5px !important;
  border-left-width: 3px !important;
  padding-left: 8px !important;
  -webkit-line-clamp: 3 !important;
  margin: 4px 0 8px !important;
  font-style: italic;
  color: #4a423d;
}

/* 1: Price no trailing zeros + larger */
.sn-prod-price-v2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
  display: block;
  margin-bottom: 8px;
}

/* 13: Hide dimension text */
.sn-prod-dim { display: none !important; }

/* 2+16: Button — wraps cleanly instead of clipping, 16px radius.
   Full product titles ("Hobart aka Trash Schnerd") are too long for one
   line, so allow wrapping and hold a consistent height across all cards. */
.sn-add-btn-v2 {
  border-radius: 16px !important;
  white-space: normal !important;
  overflow-wrap: break-word;
  hyphens: none;
  font-size: 14px !important;
  line-height: 1.2 !important;
  padding: 12px 16px !important;
  min-height: 46px;
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  border: none !important;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  transition: opacity .15s, transform .12s;
}
.sn-add-btn-v2:hover { opacity: .88; transform: translateY(-1px); }

/* 20: View details link */
.sn-prod-view-link {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--char-color);
  text-decoration: none;
  margin-top: 6px;
  font-family: var(--font-display);
}
.sn-prod-view-link:hover { text-decoration: underline; }

/* 9: Certificate note better icon */
.sn-cert-note-v2 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #8a8178;
  font-weight: 600;
  text-align: center;
  justify-content: center;
  margin-top: 8px;
}

/* 12: Gap between cards */
.sn-shop-grid { gap: 16px !important; }

/* ============================================================
   Interactive Design — All Animations & Effects
   ============================================================ */

/* ---- Page transition ---- */
body.sn-page-ready { animation: sn-page-in 0.3s ease both; }
body.sn-page-leaving { animation: sn-page-out 0.28s ease both; }
@keyframes sn-page-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sn-page-out { to   { opacity: 0; transform: translateY(-6px); } }

/* ---- Scroll reveal — initial state + revealed state ---- */
.sn-will-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
/* Alternate directions for visual variety */
.sn-will-reveal:nth-child(even)  { transform: translateY(28px) translateX(12px); }
.sn-will-reveal:nth-child(3n)    { transform: translateY(28px) translateX(-12px); }
.sn-will-reveal:nth-child(5n)    { transform: translateY(32px) scale(0.96); }
.sn-will-reveal.sn-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Idle breathing on hero characters — removed per request (no movement on
   the hero characters). Keyframe left in place in case it's wanted again. */
@keyframes sn-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.018) translateY(-3px); }
}
.sn-hero-chars-left  .sn-hc-img,
.sn-hero-chars-right .sn-hc-img {
  animation: none !important;
}
/* Hover overrides breathing */
.sn-hero-chars-left  .sn-hc-img:hover,
.sn-hero-chars-right .sn-hc-img:hover { animation-play-state: paused !important; }
.sn-float-darlene:hover { animation: sn-hover-darlene 0.75s ease forwards !important; }
.sn-float-hobart:hover  { animation: sn-hover-hobart  1.1s ease-in-out infinite !important; }
.sn-float-juniper:hover { animation: sn-hover-juniper 1.2s ease-in-out infinite !important; }
.sn-float-jimbob:hover  { animation: sn-hover-jimbob  1.0s ease-in-out infinite !important; }

/* Stagger breathing timing so they don't all breathe together */
.sn-float-juniper { animation-delay: 0s !important; }
.sn-float-darlene { animation-delay: -1.5s !important; }
.sn-float-jimbob  { animation-delay: -0.8s !important; }
.sn-float-hobart  { animation-delay: -2.2s !important; }

/* ---- Ken Burns on lifestyle photo ---- */
.sn-ls-img {
  transform-origin: center center;
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ---- Cart bounce keyframe ---- */
@keyframes sn-cart-bounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.25) rotate(-8deg); }
  50%  { transform: scale(0.92) rotate(5deg); }
  75%  { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
.sn-cart-bounce { animation: sn-cart-bounce 0.55s cubic-bezier(0.36,0.07,0.19,0.97) both !important; }

/* ---- 3D card tilt — ensure perspective works ---- */
.sn-char-card,
.sn-prod-v2,
.sn-qv2-card,
.sn-pdp-review-card,
.sn-pdp-review-featured {
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ---- Hero parallax — smooth transitions ---- */
.sn-hero-chars-left,
.sn-hero-chars-right {
  transition: transform 0.08s linear;
  will-change: transform;
}
.sn-hero-headline {
  transition: transform 0.1s ease;
  will-change: transform;
}
.sn-doodle {
  transition: transform 0.12s ease;
  will-change: transform;
}

/* ---- Personality bars — start at 0, animated via JS ---- */
.sn-pdp-bar-fill { will-change: width; }

/* ---- Quiz answer snap feedback ---- */
.sn-qv2-opts .sn-qopt:active {
  transform: scale(0.97) !important;
  transition: transform 0.08s ease !important;
}
.sn-qv2-opts .sn-qopt.sn-qopt-selected {
  animation: sn-answer-snap 0.25s cubic-bezier(0.36,0.07,0.19,0.97) both;
}
@keyframes sn-answer-snap {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.96); }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ---- Adopt button pulse (subtle heartbeat) ---- */
@keyframes sn-heartbeat {
  0%, 100% { box-shadow: 0 4px 14px rgba(255,46,146,0.25); }
  50%       { box-shadow: 0 4px 24px rgba(255,46,146,0.45), 0 0 0 4px rgba(255,46,146,0.1); }
}
.sn-pdp-adopt-btn { animation: sn-heartbeat 2.5s ease-in-out infinite; }
.sn-pdp-adopt-btn:hover { animation: none; }

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  .sn-will-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sn-hc-img, .sn-pdp-adopt-btn { animation: none !important; }
  body.sn-page-ready, body.sn-page-leaving { animation: none !important; }
  .sn-doodle, .sn-hero-chars-left, .sn-hero-chars-right, .sn-hero-headline { transition: none !important; }
}

/* Undo: parallax, 3D tilt, hero mouse parallax */
.sn-hero-chars-left,
.sn-hero-chars-right,
.sn-hero-headline,
.sn-doodle {
  transition: none !important;
  will-change: auto !important;
}
.sn-char-card,
.sn-prod-v2,
.sn-qv2-card,
.sn-pdp-review-card,
.sn-pdp-review-featured {
  will-change: auto !important;
  transform-style: flat !important;
}
.sn-ls-img { transition: none !important; will-change: auto !important; }

/* ============================================================
   Top 5 Movement Features — CSS
   ============================================================ */

/* 1: Confetti burst */
@keyframes sn-confetti-fly {
  0%   { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(0.4) rotate(var(--rot,360deg)); }
}
.sn-confetti-piece {
  animation: sn-confetti-fly 0.85s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
  transform-origin: center;
  will-change: transform, opacity;
  line-height: 1;
  user-select: none;
}

/* 2: Floating particles in hero */
.sn-hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.sn-hero-particle {
  position: absolute;
  bottom: -20px;
  animation: sn-particle-rise linear infinite;
  font-weight: 700;
  user-select: none;
  pointer-events: none;
}
@keyframes sn-particle-rise {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); }
  25%  { transform: translateY(-25vh) translateX(15px) rotate(90deg); }
  50%  { transform: translateY(-50vh) translateX(-10px) rotate(180deg); }
  75%  { transform: translateY(-75vh) translateX(12px) rotate(270deg); }
  100% { transform: translateY(-105vh) translateX(0) rotate(360deg); opacity: 0; }
}

/* 3: Schnerd page runner */
.sn-page-runner {
  position: fixed;
  bottom: 16px;
  left: -100px;
  width: 72px;
  height: auto;
  z-index: 99999;
  pointer-events: none;
  transform: scaleX(-1);
  animation: sn-runner-sprint 0.55s cubic-bezier(0.4,0,0.6,1) forwards;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
@keyframes sn-runner-sprint {
  0%   { left: -100px; }
  100% { left: calc(100vw + 100px); }
}

/* 4: Hero curtain reveal (clip-path left→right wipe) */
.sn-curtain-pending {
  clip-path: inset(0 100% 0 0) !important;
}
.sn-curtain-reveal {
  clip-path: inset(0 0% 0 0) !important;
  transition: clip-path 1.1s cubic-bezier(0.4,0,0.2,1) 0.2s !important;
}

/* 5: Score counter — smooth font rendering */
.sn-rv-score-num {
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}

/* Reduced motion — disable particles and runner */
@media (prefers-reduced-motion: reduce) {
  .sn-hero-particle { display: none; }
  .sn-page-runner { display: none; }
  .sn-confetti-piece { display: none; }
  .sn-curtain-pending, .sn-curtain-reveal { clip-path: none !important; transition: none !important; }
}

/* Undo curtain reveal (#4) */
.sn-curtain-pending,
.sn-curtain-reveal {
  clip-path: none !important;
  transition: none !important;
}

/* Particle motion — gentle drift/pulse in place, not rising */
.sn-hero-particle {
  position: absolute !important;
  bottom: auto !important;
  animation: sn-particle-drift ease-in-out infinite !important;
}
@keyframes sn-particle-drift {
  0%   { transform: translate(0,0) scale(1); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translate(var(--drift-x,10px), var(--drift-y,-10px)) scale(1.15); opacity: 0.7; }
  85%  { opacity: 1; }
  100% { transform: translate(0,0) scale(1); opacity: 0; }
}

/* Runner faster sprint */
.sn-page-runner { animation-duration: 0.46s !important; }

/* ============================================================
   SECTION COLOR VIBES — each homepage section gets its own
   candy-pastel band so the page reads playful, not flat.
   Targets stable inner section IDs via :has() (additive; if a
   browser lacks :has() support the page just shows paper bg).
   ============================================================ */
.shopify-section:has(#quiz){      background:#E7E3FB; }  /* soft lilac  */
.shopify-section:has(#reviews){   background:#E3F1FB; }  /* soft sky blue */
.shopify-section:has(#education){ background:#FFF2C6; }  /* soft yellow — matches Juniper */
.shopify-section:has(#book){      background:#CFE8F7; }  /* soft blue   */

/* Lifestyle paints its own full-width bg — give it a soft peach. */
.sn-ls{ background:#FFE7D0 !important; }

/* Breathing room so each color band feels like its own block */
.shopify-section:has(#quiz),
.shopify-section:has(#reviews),
.shopify-section:has(#education),
.shopify-section:has(#book){ padding-top:10px; padding-bottom:10px; }

/* Hero subheading: keep each sentence on its own single line (desktop).
   pre = respect the line breaks + never wrap; mobile keeps pre-line wrap. */
@media (min-width: 601px){
  .sn-hero .sub{ white-space:pre; max-width:none; text-align:center; }
}

/* ============================================================
   MOBILE FIXES (round 2) — hero video placement + shop buttons
   ============================================================ */
@media (max-width: 600px){
  /* Hero video was auto-placed into a tiny leftover grid cell because
     .sn-hero-inner is display:contents and every sibling has an explicit
     grid-row. Give the video its own full-width row, and put the CTA
     buttons right after the subtext (above the video) so the primary
     action is visible without scrolling past the video first. */
  .sn-hero .sn-cta-row{
    grid-row: 3 !important;
  }
  .sn-hero .sn-hero-video{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 24px !important;
    margin: 30px 0 0 !important;
  }
  .sn-hero .sn-hero-stars-row { grid-row: 5 !important; }
  .sn-hero .sn-hero-trust   { grid-row: 6 !important; }

  /* Shop "Adopt <Name> →" on the narrow 2-up cards — text now wraps, so
     just tighten padding/size a touch to keep the pill compact. */
  .sn-add-btn-v2{
    font-size: 13px !important;
    padding: 11px 12px !important;
  }
}

/* ============================================================
   Hero trust bar v2 — title + subtitle cards in one white card
   (ChatGPT-mockup style). Overrides earlier .sn-hero-trust rules.
   ============================================================ */
.sn-hero-trust {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 0 !important;
  margin: 0 auto !important;
  transform: none !important;
  max-width: 1080px !important;
  width: 100% !important;
  background: #fff !important;
  border: 1.5px solid rgba(26,22,20,0.08) !important;
  border-top: 1.5px solid rgba(26,22,20,0.08) !important;
  border-bottom: 1.5px solid rgba(26,22,20,0.08) !important;
  border-radius: 20px !important;
  padding: 15px 8px !important;
  box-shadow: 0 6px 24px rgba(26,22,20,0.06);
  flex-wrap: initial !important;
}
.sn-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 20px;
  text-align: left;
  border-right: 1.5px solid rgba(26,22,20,0.08);
}
.sn-trust-item:last-child { border-right: none; }
.sn-trust-item svg { width: 24px; height: 24px; flex-shrink: 0; }
.sn-trust-text { display: flex; flex-direction: column; line-height: 1.3; }
.sn-trust-title { font-size: 14px; font-weight: 800; color: var(--ink); font-family: var(--font-display); white-space: nowrap; }
.sn-trust-sub { font-size: 11.5px; font-weight: 500; color: #8a8178; }

@media (max-width: 760px) {
  .sn-hero-trust {
    grid-template-columns: 1fr 1fr;
    row-gap: 4px !important;
    padding: 12px 4px !important;
    border-radius: 16px !important;
    max-width: 440px !important;
  }
  .sn-trust-item { padding: 6px 10px; border-right: none; }
  .sn-trust-item:nth-child(odd) { border-right: 1.5px solid rgba(26,22,20,0.08); }
  .sn-trust-item svg { width: 18px; height: 18px; }
  .sn-trust-title { font-size: 12px; }
  .sn-trust-sub { font-size: 10px; }
}

/* Hide the hero background decorations (particles: hearts/stars/sparkles/dots).
   Doodles were removed from the hero markup; this hides the JS particle layer.
   To restore, delete this rule. */
.sn-hero-particles { display: none !important; }

/* Full-width strip that centers the hero trust card on the page (moved out of
   the narrow hero center column so it can be wider than the CTAs). */
.sn-trust-strip {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 4px 16px 14px;
  box-sizing: border-box;
}
@media (max-width: 760px) { .sn-trust-strip { padding: 4px 10px 10px; } }

/* ============================================================
   Meet the Herd v2 — centered heading + tinted character cards
   ============================================================ */
.sn-meet-headv2 { text-align: center; position: relative; padding-top: 34px; }
.sn-meet-headv2 .sn-meet-h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 5vw, 56px); color: var(--ink);
  margin: 0; display: flex; justify-content: center; align-items: center; gap: 12px; line-height: 1.05;
}
.sn-meet-heart { color: var(--pink); font-size: 0.66em; }
.sn-meet-script {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(18px, 2.4vw, 26px); color: var(--ink);
  margin: 6px 0 0; display: inline-block; position: relative;
}
.sn-meet-script::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -3px; height: 3px;
  background: var(--pink); border-radius: 3px;
}
.sn-meet-headv2 .sn-meet-sub {
  font-size: 14px; color: #8a8178; margin: 14px auto 0; font-weight: 500; max-width: 520px;
}
.sn-meet-doodles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sn-meet-doodles .sn-md { position: absolute; }
.sn-meet-headv2 > :not(.sn-meet-doodles) { position: relative; z-index: 1; }

/* Feeling chips — centered pill row */
.sn-feeling-filter-v2 {
  display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 24px auto 0 !important; max-width: 880px; padding: 0 !important; overflow: visible !important;
}
.sn-feeling-filter-v2 .sn-feeling-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid rgba(26,22,20,0.12) !important;
  border-radius: 999px; padding: 9px 16px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  font-family: var(--font-display); cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(26,22,20,0.05);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.sn-feeling-filter-v2 .sn-feeling-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,22,20,0.09); }
.sn-feeling-filter-v2 .sn-feeling-btn.sn-feeling-active { border-color: var(--ink) !important; box-shadow: 0 3px 0 var(--ink); }

/* Card grid v2 */
.sn-herd-v2 { gap: 16px; align-items: stretch; }
.sn-hcard {
  background: var(--char-tint) !important;
  border: none !important;
  border-radius: 22px !important;
  overflow: visible;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--char-c, #1A1614) 22%, transparent) !important;
  transition: transform .15s, box-shadow .2s !important;
  position: relative;
}
.sn-hcard:hover { transform: translateY(-5px) !important; box-shadow: 0 20px 40px color-mix(in srgb, var(--char-c, #1A1614) 50%, transparent) !important; }
.sn-hcard-img {
  aspect-ratio: 1 / 1; display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 16px 0; border-radius: 22px 22px 0 0; overflow: hidden;
}
.sn-hcard-img img { max-height: 100%; max-width: 92%; width: auto; object-fit: contain; display: block; }
.sn-hcard-body { padding: 8px 16px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; flex: 1; }
.sn-hcard-name {
  font-family: var(--font-display); font-weight: 800; font-size: 25px; color: var(--ink);
  margin: 4px 0 0; display: inline-flex; align-items: center; gap: 6px;
}
.sn-hcard-heart { color: var(--char-c); font-size: 0.62em; }
.sn-hcard-tag { font-size: 13px; color: #6a6259; margin: 9px 0 0; line-height: 1.35; max-width: 190px; min-height: 36px; }
.sn-hcard-price { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--ink); margin: 12px 0 0; }
.sn-hcard-adopt, .sn-hcard-soon {
  margin-top: 14px; display: block; width: 100%; box-sizing: border-box;
  background: #fff; border-radius: 999px; padding: 11px 12px; font-size: 14px; font-weight: 800;
  font-family: var(--font-display); text-decoration: none; text-align: center;
}
.sn-hcard-adopt { border: 2px solid var(--char-c); color: var(--char-c); transition: background .15s, color .15s; }
.sn-hcard-adopt:hover { background: var(--char-c); color: #fff; }
.sn-hcard-soon { border: 2px dashed var(--char-c); color: var(--char-c); }
.sn-hcard-notify {
  display: block; margin-top: 8px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: var(--char-c);
  text-decoration: underline; text-underline-offset: 2px;
}
.sn-hcard-notify:hover { opacity: .8; }

/* Love Yourself poster */
.sn-hcard-poster { background: #fff !important; border: 2px solid var(--char-c) !important; transform: rotate(-1.5deg); }
.sn-hcard-poster:hover { transform: rotate(-1.5deg) translateY(-5px) !important; }
.sn-hcard-poster .sn-hcard-img { background: var(--char-tint); border-radius: 14px; margin: 14px 14px 0; padding: 12px; aspect-ratio: 1 / 1; }
.sn-hcard-tape { position: absolute; top: -8px; width: 46px; height: 20px; background: rgba(255,46,146,0.22); border: 1px solid rgba(255,46,146,0.3); z-index: 3; }
.sn-hcard-tape-l { left: 16px; transform: rotate(-8deg); }
.sn-hcard-tape-r { right: 16px; transform: rotate(7deg); }

@media (max-width: 1000px) {
  .sn-hcard-name { font-size: 22px; }
  .sn-hcard-price { font-size: 19px; }
  .sn-hcard-tag { min-height: 0; }
}

/* Meet v2 polish — seamless (no reveal/tilt jump), bigger images, taller cards, accents */
.sn-hcard, .sn-hcard.sn-will-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: transform .16s ease, box-shadow .2s ease !important;
}
.sn-hcard:hover { transform: translateY(-5px) !important; }
.sn-hcard-poster { transform: rotate(-1.6deg) !important; }
.sn-hcard-poster:hover { transform: rotate(-1.6deg) translateY(-5px) !important; }

.sn-hcard-img { aspect-ratio: 1 / 1.08 !important; padding: 22px 10px 0 !important; position: relative; }
.sn-hcard-img img { max-height: 100% !important; max-width: 100% !important; }
.sn-hcard-poster .sn-hcard-img { aspect-ratio: 1 / 1 !important; }
.sn-hcard-name { font-size: 27px !important; }
.sn-hcard-body { padding: 10px 16px 20px !important; }

.sn-hcard-accent { position: absolute; width: 20px; height: 20px; z-index: 2; opacity: .85; pointer-events: none; }
.sn-acc-tr { top: 18px; right: 16px; }
.sn-acc-tl { top: 18px; left: 16px; }

/* Meet v2 — card strokes, plush popping above the card, fade-focus filter */
.sn-hcard {
  border: 1.5px solid color-mix(in srgb, var(--char-c) 22%, #fff) !important;
  transition: opacity .3s ease, filter .3s ease, transform .16s ease, box-shadow .2s ease !important;
}
.sn-hcard-poster { border: 1.5px solid color-mix(in srgb, var(--char-c) 35%, #fff) !important; }

/* Plush pops above the top edge of the card */
.sn-hcard-img { overflow: visible !important; }
.sn-hcard-img img { transform: translateY(-20px); }
.sn-hcard-poster .sn-hcard-img img { transform: none; }

/* Feeling filter: dim non-matches, keep the match in focus (no removal) */
.sn-hcard.sn-dim { opacity: .34 !important; filter: saturate(0.5); }
.sn-hcard.sn-focus { box-shadow: 0 16px 38px rgba(26,22,20,0.17) !important; }
.sn-hcard.sn-focus.sn-hcard-poster { box-shadow: 0 16px 38px rgba(255,46,146,0.22) !important; }

/* FIX: cap Meet card image heights so a large image (esp. Love Yourself, 2742x3355)
   can never balloon its box and stretch the whole equal-height row on hover. */
.sn-hcard-img { height: 300px !important; aspect-ratio: auto !important; }
.sn-hcard-img img { max-height: 300px !important; max-width: 100% !important; height: auto !important; width: auto !important; }
.sn-hcard-poster .sn-hcard-img { height: 300px !important; overflow: hidden !important; aspect-ratio: auto !important; }
.sn-hcard-poster .sn-hcard-img img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; transform: none !important; }

/* Plushes POP ABOVE the cards: short image zone + taller image + overflow visible
   so the plush spills above the card's top edge (poster stays contained/capped). */
.sn-herd-outer { padding-top: 64px !important; }
.sn-hcard-img { height: 200px !important; overflow: visible !important; padding: 0 10px !important; aspect-ratio: auto !important; align-items: flex-end; }
.sn-hcard-img img { max-height: 290px !important; max-width: 100% !important; height: auto !important; width: auto !important; transform: none !important; }
.sn-hcard-poster .sn-hcard-img { height: 300px !important; overflow: hidden !important; padding: 12px !important; align-items: center; }
.sn-hcard-poster .sn-hcard-img img { width: 100% !important; height: 100% !important; max-height: 100% !important; max-width: 100% !important; object-fit: contain !important; transform: none !important; }

/* Pop scales with card width (consistent at any viewport): zone height = 62% of
   width, plush renders full-width (taller than zone) so it spills above. */
.sn-hcard-img { aspect-ratio: 1 / 0.62 !important; height: auto !important; overflow: visible !important; padding: 0 !important; align-items: flex-end !important; }
.sn-hcard-img img { width: 104% !important; max-width: 104% !important; max-height: none !important; height: auto !important; margin-left: -2% !important; transform: none !important; }
.sn-hcard-poster .sn-hcard-img { aspect-ratio: 1 / 0.95 !important; height: auto !important; overflow: hidden !important; padding: 12px !important; align-items: center !important; }
.sn-hcard-poster .sn-hcard-img img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin-left: 0 !important; object-fit: contain !important; }

/* Let the image zone stay at its aspect-ratio height (flex items default to
   min-height:auto which was growing it to fit the tall plush → no overflow). */
.sn-hcard-img { min-height: 0 !important; }
.sn-hcard-poster .sn-hcard-img { min-height: 0 !important; }

/* Tune pop amount + scale the clearance above the cards so plushes never hit the chips */
.sn-hcard-img { aspect-ratio: 1 / 0.70 !important; }
.sn-herd-outer { padding-top: clamp(72px, 8vw, 160px) !important; }

/* Room for the card drop shadow to actually show: box-shadow paints outside
   the layout box without adding to it, so with zero bottom padding here the
   very next section's opaque background starts flush against the cards and
   paints straight over any shadow bleeding past the boundary — it wasn't
   being clipped, it was being covered. */
.sn-herd-outer { padding-bottom: 48px !important; }

/* SAFARI FIX: Love Yourself poster looped/grew nonstop because the img used
   height:100% inside an aspect-ratio (auto-height) zone — a Safari resolution
   loop. Use a FIXED pixel height + max-height sizing (deterministic, no loop). */
.sn-hcard-poster .sn-hcard-img {
  height: 280px !important;
  max-height: 280px !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px !important;
  align-items: center !important;
}
.sn-hcard-poster .sn-hcard-img img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  transform: none !important;
}

/* Remove the little hearts after each character name (keep the heading heart) */
.sn-hcard-heart { display: none !important; }

/* Fix the gap under the button: size cards to their content instead of
   force-stretching to equal height with a growing body. */
.sn-herd-v2 { align-items: start !important; }
.sn-hcard-body { flex: 0 1 auto !important; }

/* MOBILE: stop horizontal overflow. Force chips to wrap, remove the 104% image
   side-spill, and clip any stray horizontal overflow within the section. */
.sn-feeling-filter-v2 { flex-wrap: wrap !important; overflow-x: visible !important; }
.sn-hcard-img img { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; }
/* Scoped to mobile only — overflow-x here forces overflow-y to stop being
   "visible" too (per spec), which was clipping the card drop shadows on
   desktop where there's no horizontal-scroll problem to guard against. */
@media (max-width: 780px) {
  .sn-meet-full { overflow-x: clip; }
}

@media (max-width: 560px) {
  /* single-column: smaller pop + enough clearance so plush clears the chips */
  .sn-hcard-img { aspect-ratio: 1 / 0.82 !important; }
  .sn-herd-outer { padding-top: 70px !important; }
}

/* Kill page-level horizontal scroll on mobile (off-screen mobile-nav drawer +
   any stray overflow). overflow-x: clip is sticky-safe (unlike overflow:hidden). */
html, body { overflow-x: clip; }

/* DESKTOP: Love Yourself card same size as the others (no big empty space).
   Give the poster the same aspect-ratio zone as the plush cards, sized with
   max-height (NOT height:100% → avoids the Safari loop). Equal card heights,
   CTA pinned to the card bottom so there's no dead gap. */
.sn-herd-v2 { align-items: stretch !important; }
.sn-hcard-body { flex: 1 1 auto !important; }
.sn-hcard-adopt, .sn-hcard-soon { margin-top: auto !important; }
.sn-hcard-poster .sn-hcard-img {
  aspect-ratio: 1 / 0.70 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px !important;
  align-items: center !important;
}
.sn-hcard-poster .sn-hcard-img img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}

/* MOBILE/TABLET (multi-row grid): smaller pop + generous row-gap so a card's
   popping plush never overlaps the card in the row above it. */
@media (max-width: 1000px) {
  .sn-hcard-img { aspect-ratio: 1 / 0.85 !important; }
  .sn-herd { row-gap: clamp(60px, 16vw, 130px) !important; }
  .sn-herd-outer { padding-top: clamp(56px, 16vw, 130px) !important; }
}

/* ============================================================
   PERMANENT Love Yourself fix — kill the Safari enlarge-on-hover loop for good.
   Root cause: the poster <img> sizing fed back into the zone height (object-fit
   + height resolution), which Safari re-evaluates forever on hover repaint.
   Fix: absolutely position the image so it is OUT of layout flow and can never
   affect the zone height. Zone height comes purely from aspect-ratio (matches
   the plush cards). No hover transform on the poster => nothing to trigger it.
   ============================================================ */
.sn-hcard-poster .sn-hcard-img {
  position: relative !important;
  aspect-ratio: 1 / 0.70 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.sn-hcard-poster .sn-hcard-img img {
  position: absolute !important;
  inset: 12px !important;
  width: calc(100% - 24px) !important;
  height: calc(100% - 24px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  transform: none !important;
  margin: 0 !important;
}
/* Poster does NOT change on hover (no enlarge, no lift) — static, glitch-proof */
.sn-hcard-poster:hover { transform: rotate(-1.6deg) !important; }

/* ROOT CAUSE of the Love Yourself nonstop-enlarge: the card images inherit
   `transition: all`, so any hover-triggered sub-pixel size recalc gets ANIMATED,
   which triggers another recalc → it grows forever. Kill ALL transitions on the
   card images so their size can never animate. This is the real fix. */
.sn-hcard-img img,
.sn-hcard-poster .sn-hcard-img img {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}
/* Poster is fully static on hover — no transform, no shadow change, nothing */
.sn-hcard-poster:hover {
  transform: rotate(-1.6deg) !important;
  box-shadow: 0 6px 20px rgba(26,22,20,0.06) !important;
}

/* THE missed piece: the image ZONE (.sn-hcard-img) also had `transition: all`,
   so the zone's size animated on hover and the absolutely-sized image grew with
   it. Kill transitions/animations on the zones AND the whole poster subtree so
   NOTHING can animate size. The poster is now 100% static on hover. */
.sn-hcard-img,
.sn-hcard-img *,
.sn-hcard-poster,
.sn-hcard-poster * {
  transition: none !important;
  animation: none !important;
}
.sn-hcard-poster, .sn-hcard-poster:hover { transform: rotate(-1.6deg) !important; }
.sn-hcard-poster:hover { box-shadow: 0 6px 20px rgba(26,22,20,0.06) !important; }

/* ============================================================
   Remove ALL hover motion on the Meet cards. No lift, no scale, no transition,
   no animation — the schnerds physically cannot change size on hover, any
   browser. (3D tilt also disabled in schnerds.js.)
   ============================================================ */
.sn-hcard, .sn-hcard *,
.sn-char-card.sn-hcard, .sn-char-card.sn-hcard * {
  transition: none !important;
  animation: none !important;
}
.sn-hcard:hover, .sn-hcard:hover *,
.sn-hcard-img:hover, .sn-hcard-img:hover * {
  transform: none !important;
}
/* keep the poster's slight tilt (static, identical on hover) */
.sn-hcard-poster, .sn-hcard-poster:hover { transform: rotate(-1.6deg) !important; }

/* Re-enable a shadow-only transition so the character-colored hover glow eases
   in smoothly (no transform/size change — that stays disabled above). */
.sn-hcard { transition: box-shadow .2s ease !important; }

/* THE cross-hover bug: `align-items: stretch` made all cards share one row
   height, so hovering a plush card restretched the row and dragged the Love
   Yourself card (+ its absolutely-sized image) along, growing it. DECOUPLE the
   cards — each sizes independently, so hovering one can NEVER affect another.
   Also freeze the poster zone so its height can't be pulled by anything. */
.sn-herd-v2 { align-items: start !important; }
.sn-hcard { align-self: start !important; }
.sn-hcard-poster .sn-hcard-img { flex: 0 0 auto !important; }

/* Underline only the word "today" (not the whole "Who gets you today?") */
.sn-meet-script::after { display: none !important; }
.sn-meet-u {
  position: relative;
  display: inline-block;
}
.sn-meet-u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--pink); border-radius: 3px;
}
/* Nudge Love Yourself card to match the plush card height (it lacks a price line) */
.sn-hcard-poster .sn-hcard-img { aspect-ratio: 1 / 0.80 !important; }

/* ============================================================
   FINAL Safari-proof Love Yourself poster. Everything about its image is now
   FIXED PIXELS — no aspect-ratio, no % of an auto height, no absolute+calc.
   There is literally no relative value for Safari to resolve into a growing
   loop. Combined with align-items:start (cards decoupled), it cannot enlarge.
   ============================================================ */
.sn-hcard-poster .sn-hcard-img {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  aspect-ratio: auto !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  contain: layout paint !important;
}
.sn-hcard-poster .sn-hcard-img img {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  inset: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   Values v2 — alternating tinted bands, eyebrow labels, blobs, doodles.
   Character images are STATIC (no transition/animation/transform, fixed max
   size, object-fit contain) so this section can never enlarge on hover.
   ============================================================ */
.sn-vhead { position: relative; }
.sn-vhead-doodle { position: absolute; pointer-events: none; line-height: 1; }
.sn-vd-1 { left: 9%; top: 4px; color: #8B5CF6; font-size: 20px; }
.sn-vd-2 { right: 13%; top: 34px; color: #FFC400; font-size: 24px; }
.sn-vd-3 { left: 16%; bottom: -6px; color: #FF2E92; font-size: 18px; }

.sn-values-bands { display: flex; flex-direction: column; gap: 18px; margin-top: 36px; }

.sn-vband {
  background: var(--val-tint);
  border-radius: 30px;
  padding: 24px 44px;
  display: flex; align-items: center; gap: 34px;
  position: relative; overflow: hidden;
}
.sn-vband:nth-child(even) { flex-direction: row-reverse; }

.sn-vband-char {
  flex: 0 0 auto; width: 208px; height: 188px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.sn-vband-blob {
  position: absolute; width: 178px; height: 148px;
  background: color-mix(in srgb, var(--val-c) 26%, #fff);
  border-radius: 50% 50% 48% 52% / 56% 56% 44% 44%;
}
.sn-vband-img {
  position: relative; z-index: 1;
  width: auto !important; height: auto !important;
  max-width: 172px !important; max-height: 172px !important;
  min-width: 0 !important; min-height: 0 !important;
  object-fit: contain; display: block;
  transition: none !important; animation: none !important; transform: none !important;
}
.sn-vd { position: absolute; width: 18px; height: 18px; fill: var(--val-c); stroke-width: 0; color: var(--val-c); z-index: 2; opacity: .85; pointer-events: none; }
.sn-vd[fill="none"] { fill: none; }
.sn-vd-a { top: 8%; right: 12%; }
.sn-vd-b { bottom: 14%; left: 8%; width: 14px; height: 14px; }

.sn-vband-text { flex: 1; min-width: 0; }
.sn-vband-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--val-c);
}
.sn-vband-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.02;
  color: var(--val-c); margin: 8px 0 12px;
}
.sn-vband-desc { font-size: 15px; line-height: 1.55; color: #4a423d; max-width: 480px; margin: 0; }

.sn-values-cta-v2 { position: relative; text-align: center; margin-top: 44px; }
.sn-values-cta-v2 p { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px,3vw,30px); color: var(--ink); margin: 0 0 16px; }
.sn-vcta-doodle { position: absolute; top: 2px; font-size: 24px; line-height: 1; }
.sn-vcta-l { left: 26%; color: var(--ink); opacity: .5; transform: scaleX(-1); }
.sn-vcta-r { right: 26%; color: #FFC400; }

@media (max-width: 820px) {
  .sn-vband, .sn-vband:nth-child(even) {
    flex-direction: column; text-align: center; gap: 12px; padding: 24px 20px;
  }
  .sn-vband-char { width: 160px; height: 148px; }
  .sn-vband-blob { width: 148px; height: 122px; }
  .sn-vband-img { max-width: 138px !important; max-height: 138px !important; }
  .sn-vband-desc { margin: 0 auto; }
  .sn-vband-eyebrow { justify-content: center; }
  .sn-vcta-l, .sn-vcta-r { display: none; }
}

/* Accessories lifestyle hero banner */
.sn-acc-hero { margin: 0 auto 44px; border-radius: 26px; overflow: hidden; box-shadow: 0 10px 30px rgba(26,22,20,0.12); max-width: 1100px; }
.sn-acc-hero img { width: 100%; height: auto; display: block; }

/* Values blob — organic/lopsided shape (not an even oval) */
.sn-vband-blob { border-radius: 63% 37% 58% 42% / 52% 66% 34% 48% !important; }

/* ============================================================
   Book section v2 — responsive: 2-col on desktop (book left / text right),
   centered stack on mobile. Static images (no enlarge risk).
   ============================================================ */
.sn-book-v2 {
  position: relative; background: #0d1430; border-radius: 30px;
  padding: 44px 28px 40px; overflow: hidden; color: #fff; margin: 8px 0;
  display: grid; grid-template-columns: 1fr; gap: 4px 46px;
  grid-template-areas: "head" "figure" "body";
  text-align: center;
}
@media (min-width: 900px) {
  .sn-book-v2 {
    grid-template-columns: minmax(300px, 46%) 1fr;
    grid-template-areas: "figure head" "figure body";
    align-items: center; text-align: left; padding: 54px 56px;
  }
}
.sn-book-v2::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: radial-gradient(1.5px 1.5px at 20% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 55%, #fff, transparent), radial-gradient(1.5px 1.5px at 12% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 82%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 90%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 88%, #fff, transparent);
}
.sn-book-v2 > * { position: relative; z-index: 2; }
.sn-book-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sn-bd { position: absolute; }
.sn-bd-shoot { width: 40px; right: 3%; top: 3%; }
.sn-bd-star1 { width: 26px; left: 6%; top: 16%; }
.sn-bd-heart { width: 22px; right: 2%; top: 3%; }
.sn-bd-star2 { width: 22px; left: 8%; bottom: 14%; }
.sn-bd-squig { width: 34px; left: 46%; top: 6%; }
@media (min-width: 900px) {
  .sn-bd-shoot { right: 2%; top: 2%; }
  .sn-bd-heart { right: 8%; top: 2%; }
}

.sn-book-head { grid-area: head; }
.sn-book-figure { grid-area: figure; }
.sn-book-body { grid-area: body; }

/* responsive show/hide */
.sn-book-desktop { display: none; }
@media (min-width: 900px) {
  .sn-book-mobile { display: none !important; }
  .sn-book-desktop { display: revert; }
  span.sn-book-desktop, svg.sn-book-desktop { display: inline; }
}

.sn-book-heading-v2 { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.04; margin: 0; }
.sn-book-u { position: relative; white-space: nowrap; }
.sn-book-u::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -4px; height: 4px; background: #FFC400; border-radius: 3px; }

.sn-book-badges-v2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; }
@media (min-width: 900px) { .sn-book-badges-v2 { justify-content: flex-start; margin-top: 20px; } }
.sn-preorder-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--pink); color: #fff; border-radius: 999px; padding: 8px 18px; font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.sn-book-award-pill { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: #E8B84B; border: 1.5px solid rgba(232,184,75,0.6); border-radius: 999px; padding: 7px 16px; font-family: var(--font-display); font-weight: 800; font-size: 13.5px; }
.sn-book-format-pill { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: #5AB0E0; border: 1.5px solid rgba(90,176,224,0.5); border-radius: 999px; padding: 7px 16px; font-family: var(--font-display); font-weight: 800; font-size: 13.5px; }

.sn-book-figure { display: flex; justify-content: center; align-items: center; margin: 22px 0 4px; }
@media (min-width: 900px) { .sn-book-figure { margin: 0; } }
.sn-book-3d { position: relative; display: inline-block; transform: perspective(1600px) rotateY(-17deg) rotateX(3deg); border-radius: 3px 9px 9px 3px; box-shadow: 28px 36px 64px rgba(0,0,0,0.55); }
.sn-book-3d img { display: block; width: 100%; max-width: 260px; border-radius: 3px 9px 9px 3px; }
@media (min-width: 900px) { .sn-book-3d img { max-width: 430px; } }
.sn-book-3d::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 22px; background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0)); border-radius: 3px 0 0 3px; z-index: 2; }
.sn-book-3d::after { content: ""; position: absolute; top: -5px; left: 8px; right: 8px; height: 6px; background: linear-gradient(#f3efe6, #cfc9bd); border-radius: 3px 3px 0 0; transform: skewX(-2deg); }

.sn-book-title-v2 { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: clamp(22px, 3.2vw, 32px); margin: 18px 0 0; }
@media (min-width: 900px) { .sn-book-title-v2 { margin-top: 0; } }
.sn-book-sub-v2, .sn-book-desc-v2 { color: rgba(255,255,255,0.68); font-size: 15px; line-height: 1.55; margin: 8px auto 0; max-width: 400px; }
@media (min-width: 900px) { .sn-book-desc-v2 { margin: 12px 0 0; max-width: 540px; } }

.sn-book-features { display: flex; align-items: flex-start; justify-content: center; margin: 24px auto 4px; max-width: 420px; }
.sn-book-feat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; }
.sn-book-feat-icon { font-size: 30px; line-height: 1; }
.sn-book-feat-txt { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: rgba(255,255,255,0.82); line-height: 1.25; }
.sn-book-feat-div { width: 1px; align-self: stretch; background: rgba(255,255,255,0.14); margin: 6px 0; }

.sn-book-bullets { list-style: none; padding: 0; margin: 22px 0 0; max-width: 540px; }
.sn-book-bullets li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.09); font-size: 15px; color: rgba(255,255,255,0.85); }
.sn-book-bullets li:last-child { border-bottom: none; }
.sn-book-bi { font-size: 21px; flex-shrink: 0; }

.sn-book-ctas { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 28px auto 0; }
@media (min-width: 900px) { .sn-book-ctas { margin: 28px 0 0; align-items: flex-start; max-width: 480px; } }
.sn-book-preorder-btn { display: block; width: 100%; box-sizing: border-box; background: var(--pink); color: #fff; border: none; border-radius: 999px; padding: 16px 20px; font-family: var(--font-display); font-weight: 800; font-size: 17px; text-decoration: none; text-align: center; transition: transform .12s, box-shadow .2s; }
@media (min-width: 900px) { .sn-book-preorder-btn { width: auto; padding: 16px 44px; } }
.sn-book-preorder-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,46,146,0.35); }
.sn-book-peek-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; background: transparent; color: #B47CFF; border: 1.5px solid rgba(180,124,255,0.55); border-radius: 999px; padding: 14px 20px; font-family: var(--font-display); font-weight: 800; font-size: 15px; text-decoration: none; text-align: center; transition: background .15s; }
@media (min-width: 900px) { .sn-book-peek-btn { width: auto; border: none; background: transparent; color: #5AB0E0; padding: 4px 4px; justify-content: flex-start; } }
.sn-book-peek-btn:hover { background: rgba(180,124,255,0.12); }
@media (min-width: 900px) { .sn-book-peek-btn:hover { background: transparent; text-decoration: underline; } }

.sn-book-trust-v2 { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.5); font-size: 12.5px; margin: 22px auto 0; }
@media (min-width: 900px) { .sn-book-trust-v2 { margin: 20px 0 0; } }

/* ============================================================
   Drippy "melt" divider — each section's top edge has the color
   of the section ABOVE it dripping down into it, so sections melt
   into one another. Invisible where colors match (cream on cream),
   visible at every color change.
   ============================================================ */
.shopify-section + .shopify-section { position: relative; }
.shopify-section + .shopify-section::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0;
  height: 60px; z-index: 4; pointer-events: none;
  --melt-c: #FBF3E4; /* default = cream page color */
  background-color: var(--melt-c);
  filter: drop-shadow(0 3px 2px rgba(120, 90, 40, 0.06));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='60'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H1200%20V26%20C1000,54%201000,-2%20800,26%20C600,54%20600,-2%20400,26%20C200,54%20200,-2%200,26%20Z'%20fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='60'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H1200%20V26%20C1000,54%201000,-2%20800,26%20C600,54%20600,-2%20400,26%20C200,54%20200,-2%200,26%20Z'%20fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: left top; mask-position: left top;
}
/* per-boundary melt colors = the visible color of the section ABOVE */
.shopify-section:has(#shop)::before      { --melt-c: #FFE7D0; } /* from lifestyle (peach) */
.shopify-section:has(#reviews)::before   { --melt-c: #E7E3FB; } /* from quiz (lavender)   */
.shopify-section:has(#education)::before { --melt-c: #E3F1FB; } /* from reviews (sky blue) */
.shopify-section:has(#story)::before     { --melt-c: #FFF2C6; } /* from education (yellow) */
/* no drip right under the nav (header -> hero) or on the hero itself */
#shopify-section-header + .shopify-section::before,
.shopify-section:has(> .sn-hero)::before,
.shopify-section:has(#hero)::before { content: none; }

}


/* Meet the Herd (popping cards) — cartoon name lettering in place of the text name */
.sn-hcard-name .sn-hcard-nameart {
  height: 30px; width: auto; max-width: 100%;
  object-fit: contain; display: block;
  transition: none !important; animation: none !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12));
}
@media (max-width: 600px) {
  .sn-hcard-name .sn-hcard-nameart { height: 26px; }
}

/* ============================================================
   MOBILE POLISH LAYER — phone-first refinements (<= 600px).
   Appended last so it overrides the scattered mobile rules
   WITHOUT touching desktop. Desktop-safe toggles sit outside
   the media query. (Schnerds mobile pass — 2026-08-15)
   ============================================================ */

/* Trust: mobile-only text variants stay hidden on desktop */
.sn-trust-txt, .sn-trust-head { display: inline; }
.sn-tm { display: none; }

/* ============================================================
   DESKTOP (>=601px) — trust bar as a single row of 4 cells
   (icon + bold heading + supporting line, divided), and
   equal-height Meet cards. Scoped so mobile is unaffected.
   ============================================================ */
@media (min-width: 601px) {
  .sn-hero-trust {
    grid-column: 1 / -1 !important;   /* full hero width → centers on the page */
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
    width: min(1060px, 92vw) !important; max-width: none !important; gap: 0 !important;
    margin: 4px auto 0 !important; align-items: stretch !important;
    justify-self: center !important;
    position: static !important; left: auto !important; transform: none !important;
    background: #fff !important; border: 1.5px solid rgba(26,22,20,0.08) !important;
    border-radius: 22px !important; padding: 16px 6px !important;
    box-shadow: 0 6px 24px rgba(26,22,20,0.07) !important;
  }
  .sn-trust-sep { display: none !important; }
  .sn-trust-badge {
    display: flex !important; align-items: flex-start; gap: 11px;
    text-align: left; padding: 3px 22px !important; min-width: 0;
    background: none !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; border-right: 1.5px solid rgba(26,22,20,0.10) !important;
  }
  .sn-trust-badge:last-of-type { border-right: none !important; }
  .sn-trust-badge > svg { width: 24px !important; height: 24px !important; flex: 0 0 auto; margin-top: 1px; }
  .sn-trust-txt { display: flex !important; flex-direction: column; gap: 2px; min-width: 0; }
  .sn-trust-head { display: block; }
  .sn-td { display: inline; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); line-height: 1.15; }
  .sn-trust-sub { display: block !important; font-size: 12.5px; font-weight: 500; color: #8a8178; line-height: 1.3; }
  .sn-trust-stars { color: #F5B301; letter-spacing: 1px; }

  /* Meet the Herd — equal-height cards, content bottom-aligned */
  .sn-herd-v2 { align-items: stretch !important; }
  .sn-char-card.sn-hcard { align-self: stretch !important; height: auto !important; }
  .sn-char-card.sn-hcard .sn-hcard-body { flex: 1 1 auto !important; display: flex; flex-direction: column; }
  .sn-char-card.sn-hcard .sn-hcard-adopt,
  .sn-char-card.sn-hcard .sn-hcard-soon { margin-top: auto !important; }
}

@media (max-width: 600px) {

  /* ---------- 1 · overflow safety ---------- */
  .sn-ls-caption, .sn-lifestyle-v4, .sn-ls-inner { max-width: 100%; box-sizing: border-box; }

  /* ---------- 3 · trust benefits → clean 2×2 cards ---------- */
  .sn-hero-trust {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px;
    max-width: 340px; margin: 16px auto 0; padding: 0; border: 0; background: none; box-shadow: none;
  }
  .sn-trust-sep { display: none !important; }
  .sn-trust-badge {
    display: flex; align-items: flex-start; gap: 8px; text-align: left;
    background: #fff; border: 1.5px solid rgba(26,22,20,0.08); border-radius: 14px;
    padding: 10px 11px; box-shadow: 0 2px 7px rgba(0,0,0,0.05); min-width: 0; white-space: normal;
  }
  .sn-trust-badge > svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
  .sn-trust-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .sn-trust-head { display: block; }
  .sn-td { display: none; }
  .sn-tm { display: block; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; line-height: 1.08; color: var(--ink); }
  .sn-trust-sub { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.15; color: rgba(26,22,20,0.5); }

  /* ---------- 2 · hero: tighten vertical rhythm, contain headline ---------- */
  .sn-hero-headline { max-width: 330px; width: 100%; height: auto; margin: 0 auto 4px; }
  .sn-hero-inner > p { margin-top: 6px; margin-bottom: 0; }
  .sn-hero-stars-row { margin: 10px 0 4px; }
  .sn-hero-video { margin: 12px auto; }
  .sn-cta-row { gap: 10px; margin-top: 12px; }
}

/* Meet CTA: mobile-only "Meet" verb hidden on desktop */
.sn-hc-m { display: none; }

@media (max-width: 600px) {

  /* ---------- 6 · Adopt a Schnerd → compact horizontal cards ---------- */
  .sn-shop-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .sn-prod-v2 {
    display: grid !important; grid-template-columns: 118px 1fr; align-items: stretch;
    gap: 0 !important; overflow: hidden; border-radius: 20px; min-height: 0;
  }
  .sn-prod-v2 .sn-prod-pic-link { display: block; height: 100%; }
  .sn-prod-v2 .sn-prod-pic { height: 100%; min-height: 100%; margin: 0; border-radius: 0;
    display: flex; align-items: center; justify-content: center; padding: 8px; }
  .sn-prod-v2 .sn-prod-pic img { max-height: 128px; width: auto; max-width: 100%; }
  .sn-prod-v2 .sn-prod-body { padding: 12px 13px !important; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .sn-prod-v2 .sn-pull-quote,
  .sn-prod-v2 .sn-cert-note { display: none !important; }   /* drop emotional para + cert line */
  .sn-prod-v2 .sn-prod-stars-row { white-space: nowrap; font-size: 12px; margin: 0; }
  .sn-prod-v2 .sn-prod-name { margin: 0; }
  .sn-prod-v2 .sn-prod-name img, .sn-prod-v2 .sn-char-name-img { height: 24px !important; }
  .sn-prod-v2 .sn-prod-best-tag { font-size: 12px; }
  .sn-prod-v2 .sn-prod-buy { margin-top: auto; gap: 6px; display: flex; flex-direction: column; align-items: flex-start; }
  .sn-prod-v2 .sn-prod-price-v2 { font-size: 20px; margin: 2px 0; }
  .sn-prod-v2 .sn-add-btn-v2 { width: 100%; padding: 11px 12px !important; font-size: 13px !important;
    line-height: 1.15; min-height: 0; box-sizing: border-box; }
  .sn-prod-v2 .sn-prod-view-link { font-size: 12px; }

  /* ---------- 4 · Meet the Herd → personality-discovery cards (no shopping) ---------- */
  .sn-hcard-price { display: none !important; }          /* remove price from Meet */
  .sn-hc-d { display: none; }
  .sn-hc-m { display: inline; }                           /* "Meet {name}" on mobile */
  .sn-hcard-body { padding: 8px 14px 16px !important; gap: 3px; }
  .sn-hcard-tag { margin: 2px 0 6px !important; }
}

@media (max-width: 600px) {
  /* 6 · Adopt cards — enlarge plush to fill the colored panel, trim height */
  .sn-prod-v2 .sn-prod-pic img { max-height: 168px !important; }
  .sn-prod-v2 .sn-prod-body { gap: 4px !important; padding: 12px 13px !important; }
  .sn-prod-v2 .sn-add-btn-v2 { padding: 10px 12px !important; }

  /* 4 · Meet cards — clean VERTICAL card (art on top, no text overlap).
        The stale landscape rules targeted the old .sn-card-* structure;
        override for the current .sn-hcard structure. */
  .sn-char-card.sn-hcard {
    flex-direction: column !important;
    height: auto !important;
    min-width: 76vw !important; max-width: 76vw !important;
    align-self: start !important; padding-bottom: 0 !important;
  }
  .sn-char-card.sn-hcard .sn-hcard-img {
    width: auto !important; height: 186px !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 14px 12px 0 !important; overflow: visible;
    display: flex; align-items: flex-end; justify-content: center;
  }
  .sn-char-card.sn-hcard .sn-hcard-img img {
    max-height: 210px !important; max-width: 86% !important; width: auto !important;
  }
  .sn-char-card.sn-hcard .sn-hcard-body {
    text-align: center; padding: 12px 14px 18px !important;
    gap: 5px !important; align-items: center;
  }
  .sn-char-card.sn-hcard .sn-hcard-name { justify-content: center; }
  .sn-hcard-name .sn-hcard-nameart { height: 26px !important; }
  .sn-char-card.sn-hcard .sn-hcard-tag {
    font-size: 13px !important; line-height: 1.35; margin: 2px 0 8px !important;
    overflow: visible !important; display: block; max-width: 100%;
  }
  .sn-char-card.sn-hcard .sn-hcard-adopt {
    display: inline-block; width: auto; margin: 0 auto;
    padding: 10px 22px !important; border-radius: 999px !important;
    font-size: 14px !important; white-space: nowrap;
  }
  .sn-char-card.sn-hcard .sn-hcard-soon { margin: 4px auto 0; }
}

@media (max-width: 600px) {

  /* ---------- 7 · Quiz ---------- */
  .sn-qopt { padding: 13px 15px !important; }             /* ~19% less vertical padding → more answers per screen */
  .sn-qopts { gap: 9px !important; }
  .sn-qv2-preview { display: none !important; }            /* remove "You might be matched with…" row on mobile */
  .sn-qopt.sn-qopt-selected {                              /* clearer selected state */
    background: rgba(255,46,146,0.28) !important;
    border-color: var(--pink) !important;
    box-shadow: inset 5px 0 0 var(--pink), 0 0 0 2px rgba(255,46,146,0.30) !important;
    transform: none !important;
  }

  /* ---------- 8 · Reviews → swipeable columns ---------- */
  .sn-reviews-marquee {
    -webkit-mask-image: none !important; mask-image: none !important;
    overflow: visible !important; position: relative;
  }
  .sn-rv-track {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; scroll-snap-type: x mandatory;
    gap: 14px !important; padding: 4px 16px 6px !important; width: auto !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sn-rv-track::-webkit-scrollbar { display: none; }
  .sn-rv-col {
    flex: 0 0 84vw !important; width: 84vw !important; max-width: 84vw !important;
    scroll-snap-align: center; box-sizing: border-box;
  }
  .sn-rv {
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; margin: 0 !important; opacity: 1 !important;
    box-sizing: border-box;
  }
  .sn-rv-body { -webkit-line-clamp: 4 !important; }
  .sn-reviews-marquee::after {
    content: "← swipe to read more →"; display: block; text-align: center;
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    color: rgba(26,22,20,0.38); padding: 12px 0 0;
  }
}

/* Story: desktop shows the full story only; brief + disclosure are mobile-only */
.sn-story-brief, .sn-story-more { display: none; }
.sn-story-full { display: block; }

@media (max-width: 600px) {
  /* ---------- 9 · Origin Story → concise, mural-forward ---------- */
  .sn-story-brief { display: block; }
  .sn-story-brief-lead { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0 0 16px; }
  .sn-story-brief-big {
    font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1.16;
    color: #fff; margin: 0; border-left: 4px solid var(--pink); padding-left: 14px;
  }
  .sn-story-full { display: none; }
  .sn-story-toggle:checked ~ .sn-story-content .sn-story-brief { display: none; }
  .sn-story-toggle:checked ~ .sn-story-content .sn-story-full { display: block; margin-top: 4px; }
  .sn-story-more {
    display: inline-block; margin: 16px 0 4px; color: #fff; cursor: pointer;
    font-family: var(--font-display); font-weight: 800; font-size: 14.5px;
    border-bottom: 2px solid var(--pink); padding-bottom: 2px;
  }
  .sn-story-more .sn-more-b { display: none; }
  .sn-story-toggle:checked ~ .sn-story-content .sn-story-more .sn-more-a { display: none; }
  .sn-story-toggle:checked ~ .sn-story-content .sn-story-more .sn-more-b { display: inline; }

  /* mural = visual hero */
  .sn-story-photo { margin-top: 4px; }
  .sn-story-photo img { width: 100%; height: auto; border-radius: 16px; display: block; }
  .sn-story-mantra { font-size: 15px; }
}

@media (max-width: 600px) {

  /* ---------- Accessories: square-crop the lifestyle banner (per request) ---------- */
  .sn-acc-hero { aspect-ratio: 1 / 1 !important; max-width: 100%; margin: 0 auto 28px !important; }
  .sn-acc-hero img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; }

  /* ---------- 11 · pacing: tighten Values bands ---------- */
  .sn-values-bands { gap: 14px !important; margin-top: 24px !important; }
  .sn-vband { padding: 20px 18px !important; gap: 8px !important; }
  .sn-vband-char { width: 150px !important; height: 138px !important; }
  .sn-vband-blob { width: 140px !important; height: 116px !important; }
  .sn-vband-img { max-width: 132px !important; max-height: 132px !important; }
  .sn-vband-name { font-size: 26px !important; margin: 6px 0 8px !important; }
  .sn-vband-desc { font-size: 14px !important; }

  /* ---------- 11 · pacing: tighten Accessories ---------- */
  .sn-acc-category { margin-bottom: 30px !important; }

  /* ---------- 10 · typography: comfortable body, no ultra-narrow lines ---------- */
  .sn-hero-inner > p { font-size: 15.5px !important; line-height: 1.5 !important; }
  .sn-story-content { max-width: 100% !important; }
  .sn-story-brief-lead, .sn-story-full p, .sn-story-mission { max-width: 100% !important; }
}

/* Desktop — enlarge the hero video without widening the rest of the hero column */
@media (min-width: 601px) {
  .sn-hero-inner { width: min(880px, 92vw) !important; max-width: 880px !important; justify-self: center !important; }
  .sn-hero-inner > h1,
  .sn-hero-inner > p,
  .sn-hero-inner .sn-cta-row,
  .sn-hero-inner .sn-hero-stars-row { max-width: 750px !important; margin-left: auto !important; margin-right: auto !important; width: 100%; }
  .sn-hero-video { max-width: 840px !important; }
}

/* Desktop — pin hero grid children so the full-width trust row can't
   displace the peeking characters (JimBob/Hobart on the right). */
@media (min-width: 601px) {
  .sn-hero-chars-left  { grid-column: 1 !important; grid-row: 1 !important; }
  .sn-hero-inner       { grid-column: 2 !important; grid-row: 1 !important; }
  .sn-hero-chars-right { grid-column: 3 !important; grid-row: 1 !important; }
  .sn-hero-trust       { grid-row: 2 !important; }
}

/* Desktop — center the hero grid so the enlarged video keeps left/right symmetry
   (side character columns are content-width; centering makes any overflow even). */
@media (min-width: 601px) {
  .sn-hero { justify-content: center !important; }
}

/* ============================================================
   MOBILE + RESPONSIVE FIX BATCH (2026-08-15, late night)
   ============================================================ */
.sn-ts-m { display: none; }   /* mobile-short trust sublines hidden on desktop */

/* A. Desktop — keep the side characters visible as the window narrows */
@media (min-width: 601px) {
  .sn-hero-inner { width: min(840px, calc(100vw - 340px)) !important; }
  .sn-hero-video { max-width: min(820px, 100%) !important; }
}
@media (min-width: 601px) and (max-width: 1080px) {
  .sn-hc-img { max-width: 150px !important; }
}

@media (max-width: 600px) {
  /* B. Mobile trust — remove the white card background, clean white pills, short sublines fit */
  .sn-hero-trust { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; gap: 8px !important; }
  .sn-trust-badge { background: #fff !important; border: 1.5px solid rgba(26,22,20,0.07) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; padding: 10px 11px !important; }
  .sn-ts-d { display: none !important; }
  .sn-ts-m { display: inline !important; }
  .sn-trust-sub { font-size: 10.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sn-tm { font-size: 12px !important; }

  /* C. Mobile Meet cards — bigger plush + bigger name, show price, "Adopt" CTA (match mockup) */
  .sn-hcard-price { display: block !important; font-size: 18px !important; margin: 2px 0 8px !important; }
  .sn-char-card.sn-hcard .sn-hc-d { display: inline !important; }
  .sn-char-card.sn-hcard .sn-hc-m { display: none !important; }
  .sn-char-card.sn-hcard .sn-hcard-img { height: 224px !important; }
  .sn-char-card.sn-hcard .sn-hcard-img img { max-height: 250px !important; max-width: 90% !important; }
  .sn-hcard-name .sn-hcard-nameart { height: 40px !important; }
  .sn-char-card.sn-hcard { min-width: 80vw !important; max-width: 80vw !important; }

  /* E. Adopt a Schnerd cards — bigger product image + bigger name lettering */
  .sn-prod-v2 { grid-template-columns: 136px 1fr !important; }
  .sn-prod-v2 .sn-prod-pic img { max-height: 210px !important; }
  .sn-prod-v2 .sn-prod-name img, .sn-prod-v2 .sn-char-name-img { height: 34px !important; }

  /* F. Reviews — tighten the gap between the 5.0 summary and the review carousel */
  .sn-rv-scorecard-inline, .sn-rv-header-row { margin-bottom: 14px !important; }
  .sn-reviews-marquee { margin-top: 8px !important; }
  .sn-rv-track { padding-top: 2px !important; }
}

/* D + G. Section melt dividers — smaller intrusion + below interactive content
   so they don't cut into sections or cover buttons. */
.shopify-section + .shopify-section::before { height: 34px !important; z-index: 1 !important; }
/* keep CTAs/nav above the divider */
.sn-btn, .sn-cta-row, .sn-hcard-adopt, .sn-prod-buy, .sn-add-btn, .sn-add-btn-v2, .sn-book-preorder-btn, .sn-book-peek-btn, .sn-herd-btn, .sn-card-adopt, .sn-lifestyle-cta, .sn-ls-cta { position: relative; z-index: 2; }
/* the dark Book section: no melt cutting into the navy */
.shopify-section:has(#book)::before { content: none !important; }

/* ---- Follow-up fixes (2026-08-16) ---- */
/* Remove the hero scroll cue ("↓ MEET THE HERD") */
.sn-scrollcue { display: none !important; }

@media (max-width: 600px) {
  /* Meet card — contain the (bigger) plush so it isn't clipped, much larger name */
  .sn-char-card.sn-hcard { overflow: visible !important; }
  .sn-char-card.sn-hcard .sn-hcard-img {
    height: 270px !important; overflow: visible !important;
    padding: 24px 12px 0 !important; align-items: center !important;
  }
  .sn-char-card.sn-hcard .sn-hcard-img img { max-height: 252px !important; max-width: 92% !important; }
  .sn-hcard-name .sn-hcard-nameart { height: 50px !important; }
  .sn-char-card.sn-hcard .sn-hcard-name { margin-top: 6px !important; }
}

/* Desktop trust — fit heading + subline within each cell (no cross-cell/overlap) */
@media (min-width: 601px) {
  .sn-trust-badge { padding: 3px 16px !important; }
  .sn-td { font-size: 13.5px !important; }
  .sn-trust-sub { font-size: 11.5px !important; }
  .sn-trust-badge > svg { width: 22px !important; height: 22px !important; }
}

@media (max-width: 600px) {
  /* Adopt a Schnerd — much larger character images + names */
  .sn-prod-v2 { grid-template-columns: 46% 1fr !important; }
  .sn-prod-v2 .sn-prod-pic { padding: 6px !important; align-items: center; }
  .sn-prod-v2 .sn-prod-pic img { max-height: 260px !important; max-width: 100% !important; width: auto; }
  .sn-prod-v2 .sn-prod-name img, .sn-prod-v2 .sn-char-name-img { height: 44px !important; }
  .sn-prod-v2 .sn-add-btn-v2 { font-size: 12px !important; padding: 9px 10px !important; }
  .sn-prod-v2 .sn-prod-body { padding: 12px 12px !important; }
}

/* ---- Meet pop-out + Adopt vertical (2026-08-16) ---- */
@media (max-width: 600px) {
  /* Meet — plush pops ABOVE the card again (room in the carousel padding so it isn't clipped),
     bigger name, and space so the card shadow clears the scroll dots */
  .sn-herd { padding-top: 90px !important; padding-bottom: 30px !important; overflow-x: auto; }
  .sn-char-card.sn-hcard { overflow: visible !important; }
  .sn-char-card.sn-hcard .sn-hcard-img {
    height: 150px !important; overflow: visible !important;
    align-items: flex-end !important; padding: 0 12px 0 !important;
  }
  .sn-char-card.sn-hcard .sn-hcard-img img { max-height: 238px !important; max-width: 92% !important; }
  .sn-hcard-name .sn-hcard-nameart { height: 58px !important; }
  .sn-herd-dots { margin-top: 16px !important; }
  .sn-herd-outer::after { margin-top: 16px !important; }

  /* Adopt a Schnerd — image ON TOP, full width = much larger character + big name */
  .sn-prod-v2 { display: block !important; border-radius: 22px !important; overflow: hidden !important; }
  .sn-prod-v2 .sn-prod-pic-link { width: 100% !important; height: auto !important; }
  .sn-prod-v2 .sn-prod-pic { width: 100% !important; height: 260px !important; border-radius: 0 !important; padding: 14px !important; }
  .sn-prod-v2 .sn-prod-pic img { max-height: 245px !important; max-width: 74% !important; width: auto !important; }
  .sn-prod-v2 .sn-prod-body { padding: 16px 18px 20px !important; align-items: flex-start; }
  .sn-prod-v2 .sn-prod-name img, .sn-prod-v2 .sn-char-name-img { height: 48px !important; }
  .sn-prod-v2 .sn-add-btn-v2 { font-size: 14px !important; padding: 13px 16px !important; }
}

/* Desktop trust — breathing room from the CTAs + keep sublines clear of the dividers */
@media (min-width: 601px) {
  .sn-hero-trust { margin-top: 30px !important; }
  .sn-trust-sub { font-size: 11px !important; }
  .sn-trust-badge { padding: 3px 20px 3px 16px !important; }
}

@media (max-width: 600px) {
  /* Adopt a Schnerd — condense the vertical cards (shorter image panel + tighter info)
     while keeping the character images large */
  .sn-shop-grid { gap: 12px !important; }
  .sn-prod-v2 .sn-prod-pic { height: 196px !important; padding: 8px !important; }
  .sn-prod-v2 .sn-prod-pic img { max-height: 184px !important; max-width: 74% !important; }
  .sn-prod-v2 .sn-prod-body { padding: 12px 16px 14px !important; gap: 2px !important; }
  .sn-prod-v2 .sn-prod-stars-row { margin: 0 0 2px !important; }
  .sn-prod-v2 .sn-prod-name { margin: 2px 0 !important; }
  .sn-prod-v2 .sn-prod-name img, .sn-prod-v2 .sn-char-name-img { height: 44px !important; }
  .sn-prod-v2 .sn-prod-best-tag { margin: 2px 0 !important; }
  .sn-prod-v2 .sn-prod-buy { gap: 6px !important; margin-top: 4px !important; }
  .sn-prod-v2 .sn-prod-price-v2 { margin: 2px 0 !important; }
  .sn-prod-v2 .sn-add-btn-v2 { padding: 11px 14px !important; }
  .sn-prod-v2 .sn-prod-view-link { margin-top: 2px !important; }
}

@media (max-width: 600px) {
  /* Adopt — condense further: shorter image panel (images still large), tighter body */
  .sn-prod-v2 .sn-prod-pic { height: 172px !important; }
  .sn-prod-v2 .sn-prod-pic img { max-height: 162px !important; max-width: 72% !important; }
  .sn-prod-v2 .sn-prod-body { padding: 10px 16px 12px !important; }
  .sn-prod-v2 .sn-prod-stars-row { font-size: 11px !important; }
}

/* Meet the Herd (mobile) — even larger name lettering */
@media (max-width: 600px) {
  .sn-hcard-name .sn-hcard-nameart { height: 72px !important; }
}

/* Meet — Love Yourself POSTER card: the framed illustration must fit fully,
   not get cropped/popped like the plush cards (overrides the pop-out rules). */
@media (max-width: 600px) {
  .sn-char-card.sn-hcard.sn-hcard-poster .sn-hcard-img {
    height: auto !important; overflow: hidden !important;
    align-items: stretch !important; padding: 0 !important;
  }
  .sn-char-card.sn-hcard.sn-hcard-poster .sn-hcard-img img {
    max-height: none !important; max-width: 100% !important;
    width: 100% !important; height: auto !important; object-fit: contain !important;
  }
}

/* Product page — "About the Artist" (Chris) card: stack cleanly on mobile
   (photo banner on top, text below on the dark card) instead of text over the photo. */
@media (max-width: 600px) {
  .sn-pdp-creator-v2 { display: block !important; grid-template-columns: 1fr !important; background: #17120e !important; overflow: hidden !important; }
  .sn-pdp-creator-v2::before { display: none !important; }
  .sn-pdpc-photo { position: relative !important; height: 300px !important; width: 100% !important; overflow: hidden !important; margin: 0 !important; }
  .sn-pdpc-photo img { position: relative !important; inset: auto !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; border-radius: 0 !important; }
  .sn-pdpc-photo::after { display: none !important; }
  .sn-pdpc-overlay { display: none !important; }
  .sn-pdpc-content { position: relative !important; z-index: 2 !important; padding: 22px 20px 26px !important; }
  .sn-pdpc-watermark { display: none !important; }
  .sn-pdpc-badge { margin-bottom: 10px !important; }
  .sn-pdpc-name { font-size: 34px !important; margin: 2px 0 12px !important; }
  .sn-pdpc-cols { display: block !important; grid-template-columns: 1fr !important; }
  .sn-pdpc-quote { margin-bottom: 16px !important; }
  .sn-pdpc-heart-accent { display: none !important; }
}

/* Meet the Herd — whole card clickable to the product page (Adopt button stays clickable) */
.sn-char-card.sn-hcard { position: relative; }
.sn-char-card.sn-hcard:has(.sn-hcard-cover) { cursor: pointer; }
.sn-hcard-cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; border-radius: 20px; }
.sn-hcard-accent, .sn-hcard-tape, .sn-hcard-heart { pointer-events: none; }

@media (max-width: 600px) {
  /* Adopt a Schnerd — HORIZONTAL again (image left / text right) with a LARGE image + name */
  .sn-prod-v2 { display: grid !important; grid-template-columns: 50% 1fr !important; align-items: stretch !important; border-radius: 20px !important; overflow: hidden !important; }
  .sn-prod-v2 .sn-prod-pic-link { display: block !important; width: 100% !important; height: 100% !important; }
  .sn-prod-v2 .sn-prod-pic { width: 100% !important; height: 100% !important; min-height: 230px !important; border-radius: 0 !important; padding: 10px !important; display: flex !important; align-items: center; justify-content: center; }
  .sn-prod-v2 .sn-prod-pic img { max-height: 220px !important; max-width: 98% !important; width: auto !important; }
  .sn-prod-v2 .sn-prod-body { padding: 12px 14px !important; align-items: flex-start; }
  .sn-prod-v2 .sn-prod-name img, .sn-prod-v2 .sn-char-name-img { height: 44px !important; }
  .sn-prod-v2 .sn-add-btn-v2 { font-size: 11.5px !important; padding: 10px 12px !important; }
  .sn-prod-v2 .sn-prod-stars-row { font-size: 11px !important; }
}

/* ---- Hero + Adopt refinements (2026-08-16) ---- */
/* More space between the hero and the Meet section */
.sn-meet-full { margin-top: 46px; }

@media (max-width: 600px) {
  /* Remove the redundant mobile star row (it's already in the trust bar) */
  .sn-hero-stars-row { display: none !important; }
  /* Hero CTAs: fit to text, centered — not full width */
  .sn-cta-row { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
  .sn-hero-cta, .sn-cta-row .sn-btn { width: auto !important; max-width: 100% !important; align-self: center !important; }

  /* Adopt names ~ the width of their info box */
  .sn-prod-v2 .sn-char-name-img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 58px !important; }
}

/* Adopt a Schnerd (desktop) — product image stays contained inside its
   colored card zone (no pop-out/overlay onto the card below). */
@media (min-width: 601px) {
  .sn-shop-grid { overflow: visible; }
  .sn-prod-v2 { overflow: hidden; }
  .sn-prod-v2 .sn-prod-pic-link { overflow: hidden; }
  .sn-prod-v2 .sn-prod-pic { overflow: hidden; }
  .sn-prod-v2 .sn-prod-pic-colored img { padding: 34px !important; }

  /* Adopt a Schnerd (desktop) — center everything in the white info column */
  .sn-prod-v2 .sn-prod-body { text-align: center; align-items: center; }
  .sn-prod-v2 .sn-prod-stars-row { justify-content: center; }
  .sn-prod-v2 .sn-prod-name { display: flex; justify-content: center; }
  .sn-prod-v2 .sn-pull-quote-v2 { border-left: none !important; padding-left: 0 !important; text-align: center; }
  .sn-prod-v2 .sn-prod-buy { align-items: center; }
  .sn-prod-v2 .sn-cert-note-v2 { justify-content: center; }
}

/* Hero subtext — mobile-specific line breaks */
.sub-mobile { display: none; }

/* Accessories heading — wide single-line art on desktop, stacked 3-line
   art on mobile (same responsive-swap pattern as .sub-desktop/.sub-mobile). */
.sn-heading-img-mobile { display: none !important; }
@media (max-width: 600px) {
  .sn-heading-img-desktop { display: none !important; }
  .sn-heading-img-mobile { display: block !important; }
}

@media (max-width: 600px) {
  .sub-desktop { display: none !important; }
  .sub-mobile { display: block !important; }

  /* Adopt a Schnerd — product image MUCH larger (nearly the full card), image left / text right */
  .sn-prod-v2 { grid-template-columns: 55% 1fr !important; }
  .sn-prod-v2 .sn-prod-pic { min-height: 250px !important; overflow: visible !important; padding: 4px !important; }
  .sn-prod-v2 .sn-prod-pic img { max-height: 262px !important; max-width: 120% !important; width: auto !important; }
}

@media (max-width: 600px) {
  /* Hero CTAs side by side (fit to text) */
  .sn-cta-row { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; }
  .sn-hero-cta, .sn-cta-row .sn-btn { width: auto !important; flex: 0 1 auto !important; }
  /* Adopt image even larger — nearly fills the card */
  .sn-prod-v2 { grid-template-columns: 58% 1fr !important; }
  .sn-prod-v2 .sn-prod-pic { min-height: 262px !important; padding: 2px !important; }
  .sn-prod-v2 .sn-prod-pic img { max-height: 280px !important; max-width: 130% !important; }
}

@media (max-width: 600px) {
  /* Hero CTAs: force side by side (equal width), single line */
  .sn-cta-row { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 12px !important; padding: 0 4px; }
  .sn-hero-cta, .sn-cta-row .sn-btn { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; padding-left: 8px !important; padding-right: 8px !important; }
  .sn-cta-line1 { font-size: 14.5px !important; white-space: nowrap; }
  .sn-cta-line2 { font-size: 10.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Give the primary CTA (Take the quiz) slightly more visual weight than
     the secondary (Shop all Schnerds) — both stay on one row. */
  .sn-hero-cta.sn-btn-primary   { flex: 1.08 1 0 !important; }
  .sn-hero-cta:not(.sn-btn-primary) { flex: 0.92 1 0 !important; }
}

/* Meet the Herd (mobile) — feeling filter HIDES non-matching characters (desktop keeps the fade) */
@media (max-width: 600px) {
  .sn-char-card.sn-dim { display: none !important; }
}

@media (max-width: 600px) {
  /* Adopt a Schnerd — narrow colored panel (more white for text), big product image OVERLAID */
  .sn-prod-v2 { grid-template-columns: 34% 1fr !important; position: relative !important; overflow: visible !important; }
  .sn-prod-v2 .sn-prod-pic-link { position: static !important; }
  .sn-prod-v2 .sn-prod-pic { position: relative !important; overflow: visible !important; min-height: 244px !important; padding: 0 !important; }
  .sn-prod-v2 .sn-prod-pic img {
    position: absolute !important; left: 52% !important; top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 300px !important; max-width: 200px !important; width: auto !important; z-index: 4 !important;
    filter: drop-shadow(3px 6px 8px rgba(0,0,0,0.18));
  }
  .sn-prod-v2 .sn-prod-body { padding: 12px 14px 14px !important; }
}

@media (max-width: 600px) {
  /* Adopt — fix horizontal overflow (grid min-width) + tune the overlaid image */
  .sn-prod-v2 { grid-template-columns: 36% minmax(0, 1fr) !important; overflow: hidden !important; }
  .sn-prod-v2 .sn-prod-body { min-width: 0 !important; }
  .sn-prod-v2 .sn-prod-pic { overflow: visible !important; }
  .sn-prod-v2 .sn-prod-pic img { left: 50% !important; max-height: 290px !important; max-width: 188px !important; }
}

/* Mobile — shorten the announcement bar (drop "Warm Welcome") + more hero spacing */
@media (max-width: 600px) {
  .sn-ann-warm { display: none !important; }
  .sn-hero-trust { margin-top: 26px !important; }        /* buttons ↔ trust bar */
  .sn-meet-full { margin-top: 64px !important; }          /* trust bar ↔ Meet the Herd */
}

@media (max-width: 600px) {
  /* Juniper + Hobart peek lower on the hero (Darlene + JimBob stay up top) */
  .sn-hero { position: relative; }
  .sn-hero-chars-left .sn-float-juniper,
  .sn-hero-chars-right .sn-float-hobart { display: none !important; }
  .sn-hero-mobile-chars { display: block !important; position: static !important; }
  .sn-hero-mobile-chars .sn-hc-mob-link { position: absolute !important; z-index: 1; }
  .sn-hero-mobile-chars img { width: 74px !important; height: auto !important; display: block; }
  .sn-hero-mobile-chars a:first-child { left: -6px; top: 300px; }
  .sn-hero-mobile-chars a:last-child  { right: -6px; top: 322px; }

  /* Trust bar — tighter cells + gap from the page walls */
  .sn-hero-trust { margin-left: 24px !important; margin-right: 24px !important; max-width: none !important; width: auto !important; gap: 12px !important; }
  .sn-trust-badge { padding: 9px 8px !important; }

  /* "Play video" — smaller, bottom center */
  .sn-hv-overlay { align-items: flex-end !important; justify-content: center !important; padding-bottom: 12px !important; }
  .sn-hv-badge { font-size: 10px !important; padding: 4px 9px !important; gap: 4px !important; }
  .sn-hv-badge svg { width: 11px !important; height: 11px !important; }
}

@media (max-width: 600px) {
  /* Adopt — product images much larger (overlaid, hanging off the panel) */
  .sn-prod-v2 { grid-template-columns: 50% minmax(0, 1fr) !important; }
  .sn-prod-v2 .sn-prod-pic { min-height: 250px !important; }
  .sn-prod-v2 .sn-prod-pic img { left: 47% !important; max-height: 340px !important; max-width: 235px !important; }
  /* Fill the white column instead of leaving dead space below the buy block */
  .sn-prod-v2 .sn-prod-buy { margin-top: auto !important; }
}

@media (max-width: 600px) {
  /* Hero side chars — Juniper below Darlene (left), Hobart below JimBob (right),
     all equal size, native float movement (overrides the earlier mobile-chars hack) */
  .sn-hero-mobile-chars { display: none !important; }
  .sn-hero-chars-left .sn-float-juniper,
  .sn-hero-chars-right .sn-float-hobart { display: block !important; }
  .sn-hero-chars-left { flex-direction: column-reverse !important; }   /* Darlene on top, Juniper below */
  .sn-hero-chars-left, .sn-hero-chars-right { gap: 12px !important; justify-content: flex-start !important; }
  .sn-hero-chars-left .sn-hc-img,
  .sn-hero-chars-right .sn-hc-img { flex: 0 0 auto !important; width: 74px !important; height: auto !important; }
}

@media (max-width: 600px) {
  /* Hero side chars — larger + a little more off-screen */
  .sn-hero-chars-left .sn-hc-img,
  .sn-hero-chars-right .sn-hc-img { width: 98px !important; }
  .sn-hero-chars-left  { transform: translateX(-22px) !important; }
  .sn-hero-chars-right { transform: translateX(22px) !important; }
  /* Trust bar — shorter cell padding (tighter) + a touch more wall gap */
  .sn-hero-trust { margin-left: 24px !important; margin-right: 24px !important; }
  .sn-trust-badge { padding: 9px 6px !important; }
  /* Play video — bottom center */
  .sn-hv-overlay { justify-content: center !important; align-items: flex-end !important; }
}

@media (max-width: 600px) {
  /* Hero — vertical rhythm: sub ↔ buttons ↔ video ↔ trust bar */
  .sn-hero-video { margin-bottom: 0 !important; }
  .sn-cta-row { margin-top: 38px !important; margin-bottom: 0 !important; }
  .sn-hero-trust { margin-top: 38px !important; }
}

@media (max-width: 600px) {
  /* Bring Darlene (top-left) and JimBob (top-right) in a bit; Juniper/Hobart stay peeking */
  .sn-hero-chars-left  .sn-float-darlene { margin-left: 26px !important; }
  .sn-hero-chars-right .sn-float-jimbob  { margin-right: 26px !important; }
}

@media (max-width: 600px) {
  /* Meet — tighten space: categories → products, and products → scroll dots.
     .sn-herd scrolls (overflow-x/y: auto), so unlike the desktop grid its
     own padding-bottom has to cover the card's box-shadow bleed (8px offset
     + 22px blur = ~30px) or the scroll container clips it. Give that room
     here instead of on .sn-herd-outer, which just needs a small gap now. */
  .sn-feeling-filter { margin-bottom: 0 !important; }
  .sn-herd-outer { padding-top: 0 !important; padding-bottom: 8px !important; margin-top: -26px !important; }
  .sn-herd { padding-bottom: 36px !important; }
  .sn-herd-dots { margin-top: 4px !important; }
  .sn-herd-outer::after { margin-top: 4px !important; }
}

@media (max-width: 600px) {
  /* Meet — correct the chips→carousel gap (no overlap, just tighter) */
  .sn-herd-outer { margin-top: 0 !important; padding-top: 0 !important; }
  .sn-feeling-filter { margin-bottom: 10px !important; }
  .sn-meet-headv2 { padding-bottom: 0 !important; }
}

@media (max-width: 600px) {
  /* Meet — a bit more space back between categories and products */
  .sn-feeling-filter { margin-bottom: 18px !important; }
}

/* Lifestyle (mobile) — remove "The whole herd. Emotionally available." heading */
@media (max-width: 600px) {
  .sn-ls-heading-wrap { display: none !important; }
}

@media (max-width: 600px) {
  /* Adopt — product image overflows its boxes, sits over everything */
  .sn-prod-v2 { overflow: visible !important; }
  .sn-prod-v2 .sn-prod-pic { overflow: visible !important; border-radius: 20px 0 0 20px !important; }
  .sn-prod-v2 .sn-prod-body { border-radius: 0 20px 20px 0 !important; }
  .sn-prod-v2 .sn-prod-pic img { z-index: 6 !important; }
}

@media (max-width: 600px) {
  /* Adopt — image spills over its boxes without expanding layout (clip + clip-margin) */
  .sn-prod-v2 { overflow: clip !important; overflow-clip-margin: 70px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .sn-prod-v2 .sn-prod-pic { overflow: visible !important; }
  .sn-prod-v2 .sn-prod-pic img { z-index: 6 !important; }

  /* Hero — bring Darlene + JimBob in more */
  .sn-hero-chars-left  .sn-float-darlene { margin-left: 44px !important; }
  .sn-hero-chars-right .sn-float-jimbob  { margin-right: 44px !important; }
  /* a drop of space between subheading and video */
  .sn-hero-video { margin-top: 24px !important; }
}

@media (max-width: 600px) {
  /* Adopt — card overlay restored: this used to clip here ("keeps layout
     ~viewport width"), but that undid the "OVERLAID" pop built into the
     blocks above. The grid's minmax(0, 1fr) column already guards against
     the horizontal blowout this was working around, so overflow can stay
     visible and the plush actually hangs off the card like it's meant to. */
  .sn-prod-v2 { overflow: visible !important; width: 100% !important; max-width: 100% !important; }
  .sn-prod-v2 .sn-prod-pic { overflow: visible !important; }
  .sn-prod-v2 .sn-prod-pic img { z-index: 6 !important; max-width: 210px !important; }
}

/* All image-based section headings — sized so the LETTERS read as the same
   size everywhere, not the same file width. Each source PNG has a different
   amount of transparent padding/line-count around its text, so matching
   width alone made some look bigger than others. --h-scale corrects each
   image's actual ink-height back to a shared baseline (measured against
   reviews-heading.png, --h-scale: 1). */
:root { --heading-base-h: clamp(40px, 6vw, 60px); }
.sn-heading-img {
  height: calc(var(--heading-base-h) * var(--h-scale, 1));
  width: auto;
  max-width: 92%;
  display: block;
  margin: 0 auto;
}
/* Mobile — wide/short heading images (e.g. --h-scale on very low-aspect-ratio
   art) can want a rendered width beyond 92% of a narrow screen. Since height
   above is a fixed value, letting max-width clip the auto width would squish
   the image instead of scaling it. Switch to width-driven sizing here so
   every heading always renders at its full, undistorted width. */
@media (max-width: 600px) {
  .sn-heading-img {
    height: auto;
    width: 92%;
    max-width: 92%;
  }
}
.sn-shop-head-h2 { margin: 0 auto; text-align: center; }
.sn-shop-head { margin-bottom: 40px; }

/* Header cart — custom Schnerds shopping-bag icon */
.sn-cart-icon { width: 24px; height: auto; display: block; }

/* ============================================================
   Judge.me reviews widget — themed to match the site instead of
   the app's generic default look.
   ============================================================ */
.jdgm-testimonials-carousel { font-family: inherit !important; padding: 8px 0; }
.jdgm-header { text-align: center; margin-bottom: 28px; }
.jdgm-title {
  font-family: inherit !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  color: var(--ink, #1A1614) !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
}
.jdgm-header-info { display: flex !important; align-items: center; justify-content: center; gap: 8px; }
.jdgm-average-rating { display: flex; align-items: center; gap: 8px; }
.jdgm-star.jdgm--on { color: var(--pink, #ff2e92) !important; }
.jdgm-rating-text { color: var(--ink, #1A1614) !important; font-weight: 700 !important; font-family: inherit !important; }
.jdgm-verified-badge svg { fill: var(--pink, #ff2e92) !important; }

.jdgm-carousel-item {
  background: #fff !important;
  border: 2.5px solid var(--ink, #1A1614) !important;
  border-radius: 22px !important;
  box-shadow: 4px 5px 0 rgba(26, 22, 20, .9) !important;
  padding: 22px 24px !important;
  font-family: inherit !important;
}
.jdgm-carousel-item__review-title {
  font-weight: 800 !important;
  color: var(--ink, #1A1614) !important;
  font-size: 16px !important;
  font-family: inherit !important;
}
.jdgm-carousel-item__review-body,
.jdgm-carousel-item__review-body p {
  color: #3a332e !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  font-family: inherit !important;
}
.jdgm-carousel-item__reviewer-name {
  font-weight: 700 !important;
  color: var(--ink, #1A1614) !important;
  font-family: inherit !important;
}
.jdgm-carousel-item__timestamp { color: #8a8078 !important; font-family: inherit !important; }
.jdgm-carousel-item__product-image {
  border-radius: 10px !important;
  border: 1.5px solid var(--ink, #1A1614) !important;
}