/* The FurryPack store. Brand Guide v2.0: Lato (text) + Chewy (display), pastel pink, khaki, moss, beige, taupe, black. */

@font-face { font-family: Lato; src: url(/assets/Lato-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Lato; src: url(/assets/Lato-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Lato; src: url(/assets/Lato-Black.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: Chewy; src: url(/assets/Chewy-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --paper: #fff8f5;
  --beige: #fdece5;
  --pink: #dca3a2;
  --pink-deep: #cc8483;
  --pink-ink: #a2494a;
  --moss: #99aa97;
  --moss-deep: #6e806c;
  --moss-ink: #475a46;
  --khaki: #c6bd6e;
  --taupe: #b28d7d;
  --ink: #1d1d1b;
  --ink-soft: #4b4742;
  --line: rgb(29 29 27 / 0.14);
  --blob-a: 58% 42% 55% 45% / 48% 55% 45% 52%;
  --blob-b: 44% 56% 40% 60% / 56% 42% 58% 44%;
  --blob-c: 62% 38% 50% 50% / 42% 58% 42% 58%;
  --radius: 28px;
  --gutter: 20px;
  --max: 1240px;
  --display: Chewy, 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --text: Lato, 'Helvetica Neue', Arial, sans-serif;
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
body.menu-open, body.drawer-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--display); line-height: 1.02; letter-spacing: 0.005em; text-wrap: balance; }
h3 { font-family: var(--text); font-weight: 900; font-size: 1.15rem; line-height: 1.25; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nojs { display: none; }
.icon { flex: none; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
@media (min-width: 900px) { :root { --gutter: 40px; --header-h: 80px; } }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 6px var(--paper); }
.site-footer :focus-visible, .section-moss :focus-visible, .band-moss :focus-visible { box-shadow: 0 0 0 6px var(--moss); }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px; font-weight: 700; }
.skip-link:focus { top: 12px; }

/* ---------- Type helpers ---------- */
.lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--ink-soft); max-width: 40em; }
.muted { color: var(--ink-soft); }
.tag {
  display: inline-block; margin: 0 0 10px; padding: 3px 12px; border-radius: 999px; background: var(--beige);
  border: 1.5px solid var(--ink); font-size: 0.82rem; font-weight: 700; line-height: 1.5;
}
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--pink-deep); }
.text-link:hover { text-decoration-color: var(--ink); }
.art { pointer-events: none; user-select: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: 999px;
  border: 2px solid var(--ink); font-weight: 900; font-size: 1.02rem; line-height: 1; text-decoration: none; text-align: center; white-space: nowrap;
  transition: background-color .18s, color .18s, transform .18s; cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover:not(:disabled) { background: var(--pink-deep); color: var(--ink); }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--ink); color: var(--paper); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 1; background: transparent; color: var(--ink-soft); border-color: var(--line); cursor: not-allowed; }
.btn-small { min-height: 44px; padding: 0 20px; font-size: 0.95rem; }
.btn-block { width: 100%; }
.btn.just-added { animation: pulse .5s ease; }
@keyframes pulse { 40% { transform: scale(0.97); } }
.icon-button { width: 48px; height: 48px; display: inline-grid; place-items: center; border-radius: 50%; border: 0; background: transparent; }
.icon-button:hover { background: var(--beige); }

/* ---------- Header ---------- */
.announce { background: var(--moss); color: var(--ink); text-align: center; font-weight: 700; font-size: 0.9rem; }
.announce p { margin: 0; padding: 9px var(--gutter); }
.site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; min-height: 44px; line-height: 0; }
.brand img { width: 108px; height: auto; }
.site-nav { display: none; }
.site-nav a { text-decoration: none; font-weight: 700; padding: 8px 2px; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--pink-deep); }
.site-nav a[aria-current] { border-bottom-color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 4px; margin-right: -10px; }
.cart-link { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; text-decoration: none; }
.cart-link:hover { background: var(--beige); }
.cart-count {
  position: absolute; top: 2px; right: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-size: 0.78rem; font-weight: 900; line-height: 22px; text-align: center;
}
.menu-toggle { width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 50%; }
.menu-toggle .i-close, .menu-toggle[aria-expanded='true'] .i-open { display: none; }
.menu-toggle[aria-expanded='true'] .i-close { display: block; }
.menu-toggle .i-open, .menu-toggle .i-close { grid-area: 1 / 1; }
@media (max-width: 899px) {
  .site-nav {
    position: fixed; inset: calc(var(--header-h) + 37px) 0 0 0; background: var(--paper); padding: 28px var(--gutter) 40px; flex-direction: column; gap: 4px;
    display: none; overflow: auto; z-index: 29;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { font-family: var(--display); font-size: 2.1rem; font-weight: 400; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-nav a[aria-current] { color: var(--pink-deep); border-bottom-color: var(--line); }
}
@media (min-width: 900px) {
  .brand img { width: 128px; }
  .site-nav { display: flex; gap: 34px; }
  .menu-toggle { display: none; }
  .header-actions { margin-right: -12px; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(56px, 8vw, 112px); }
.section-flush { padding-top: 0; padding-bottom: clamp(48px, 6vw, 80px); }
.section-tint { background: var(--beige); }
.section-moss { background: var(--moss); }
.section-head { margin-bottom: clamp(28px, 4vw, 52px); }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.section-head .lead { margin: 14px 0 0; }
.section-head.split { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.section-head.split .text-link { flex: none; margin-bottom: 8px; }

/* ---------- Photo hero ---------- */
.hero { position: relative; background: var(--paper); }
.hero-photo { display: block; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-inner { position: relative; }
.hero-copy { padding-block: 28px 40px; }
.hero h1 { font-size: clamp(3.1rem, 11vw, 6.2rem); line-height: 0.94; max-width: 9em; }
.hero-sub { font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: 16px 0 12px; color: var(--pink-ink); line-height: 1.1; }
.hero .lead { margin-bottom: 26px; }
.hero h1 + .lead { margin-top: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .hero-actions .btn { flex: 0 0 auto; min-width: 190px; } }
.hero-photo img { aspect-ratio: 4 / 3.4; object-position: 78% 50%; }
@media (min-width: 900px) {
  .hero { min-height: min(720px, 62vw); display: grid; align-items: center; }
  .hero-photo { position: absolute; inset: 0; }
  .hero-photo img { aspect-ratio: auto; object-position: right center; }
  .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 248 245 / 0.78) 0%, rgb(255 248 245 / 0.5) 34%, rgb(255 248 245 / 0) 58%); pointer-events: none; }
  .hero-inner { z-index: 1; width: 100%; }
  .hero-copy { max-width: 560px; padding-block: 80px; }
  .hero-sm { min-height: 460px; }
  .hero-sm::after { background: linear-gradient(90deg, rgb(255 248 245 / 0.9) 0%, rgb(255 248 245 / 0.66) 36%, rgb(255 248 245 / 0) 62%); }
  .hero-sm .hero-copy { padding-block: 56px; }
  .hero-sm h1 { font-size: clamp(3.4rem, 6vw, 5.2rem); }
}
.hero-sm .hero-photo img { aspect-ratio: 16 / 10; }

/* ---------- Assurance strip ---------- */
.strip { border-block: 1px solid var(--line); background: var(--paper); }
.assure { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.assure li { display: flex; gap: 14px; align-items: center; padding: 18px 0; }
.assure li + li { border-top: 1px solid var(--line); }
.assure strong { display: block; font-weight: 900; line-height: 1.2; }
.assure span { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.3; display: block; }
.assure .icon { color: var(--moss-deep); width: 30px; height: 30px; }
@media (min-width: 800px) {
  .assure { grid-template-columns: repeat(3, 1fr); }
  .assure li { padding: 26px 24px; justify-content: center; }
  .assure li + li { border-top: 0; border-left: 1px solid var(--line); }
}

/* ---------- Shop by need ---------- */
.head-with-art { max-width: 40em; }
.head-with-art .lead { margin-top: 12px; }
.head-doodle { width: 90px; flex: none; margin-bottom: 8px; display: none; }
@media (min-width: 700px) { .head-doodle { display: block; } }
.need-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.need { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--beige); text-decoration: none; color: #fff; isolation: isolate; }
.need picture, .need img { display: block; width: 100%; height: 100%; }
.need img { object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.need:hover img { transform: scale(1.04); }
.need::after { content: ''; position: absolute; inset: 40% 0 0 0; background: linear-gradient(180deg, rgb(29 29 27 / 0) 0%, rgb(29 29 27 / 0.72) 100%); z-index: 1; }
.need-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 2px; padding: 16px; }
.need-title { font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.02; text-wrap: balance; }
.need-sub { font-weight: 700; font-size: 0.9rem; opacity: 0.92; }
@media (min-width: 800px) { .need-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } .need-text { padding: 22px; } }

/* ---------- Family row and home mosaic ---------- */
.family { background: var(--beige); }
.family-inner { display: grid; gap: 28px; align-items: center; padding-block: clamp(48px, 7vw, 96px); }
.family-copy h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 14px; }
.family-copy .lead { margin-bottom: 24px; }
.family-photo { border-radius: var(--radius); overflow: hidden; }
.family-photo img { width: 100%; height: auto; }
@media (min-width: 900px) { .family-inner { grid-template-columns: 0.8fr 1.7fr; gap: 56px; } }
.home-strip { padding-block: 0 72px; }
.photo-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo-strip a { display: block; border-radius: var(--radius); overflow: hidden; }
.photo-strip img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.photo-strip a:hover img { transform: scale(1.03); }
@media (min-width: 900px) { .photo-strip { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.mosaic { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mosaic a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; background: var(--beige); }
.mosaic a { display: grid; }
.mosaic a picture { height: 100%; }
.mosaic a img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mosaic a:hover img { transform: scale(1.03); }
.mosaic-a { grid-column: 1 / -1; }
.mosaic .mosaic-a img { aspect-ratio: 16 / 10; object-position: center 60%; }
.mosaic-cap { position: absolute; left: 14px; bottom: 14px; padding: 5px 14px; border-radius: 999px; background: var(--paper); font-weight: 900; font-size: 0.92rem; line-height: 1.4; }
.mosaic .mosaic-doodle { position: absolute; right: -6px; top: -26px; width: 56px; height: auto; aspect-ratio: auto; pointer-events: none; }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
  .mosaic-a { grid-column: auto; }
  .mosaic .mosaic-a img { aspect-ratio: auto; }
  .mosaic .mosaic-b img, .mosaic .mosaic-c img { aspect-ratio: 4 / 5; }
  .mosaic-doodle { right: 4px; top: -40px; width: 72px; }
}
.wide-photo { position: relative; border-radius: var(--radius); overflow: hidden; max-width: 640px; margin-inline: auto; }
.wide-photo img { width: 100%; height: auto; }
.wide-photo .photo-doodle { position: absolute; right: 18px; top: 18px; width: 56px; }
.approach-photo { border-radius: var(--radius); overflow: hidden; }
.approach-photo img { width: 100%; height: auto; }
.head-photo { border-radius: var(--radius); overflow: hidden; margin-top: 8px; width: 100%; }
@media (min-width: 800px) { .page-head-inner:has(.head-photo) { grid-template-columns: 1fr 1fr; } }
.head-photo img { width: 100%; height: auto; }

/* ---------- Product cards and grid ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 36px 24px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; gap: 36px 32px; } }
.card { display: flex; flex-direction: column; min-width: 0; }
.card[hidden] { display: none; }
.stage { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, var(--stage-wall, var(--beige)) 0 80%, var(--stage-floor, #f3d9cf) 80% 100%); }
.stage::before { content: ''; position: absolute; left: 28%; width: 44%; bottom: 10.2%; height: 4.6%; border-radius: 50%; background: rgb(70 50 35 / 0.34); filter: blur(7px); }
.stage-product { position: absolute; left: 5%; bottom: 7%; width: 90%; height: 90%; max-width: none; object-fit: contain; object-position: center bottom; transition: opacity .35s; }
.card-stage { position: relative; display: block; }
.card-pack, .card-pack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.card:hover .card-pack, .card:focus-within .card-pack { opacity: 0; }
@media (hover: none) { .card:hover .card-pack { opacity: 1; } }
.card-alt { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.card-alt img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card-alt, .card:focus-within .card-alt { opacity: 1; }
.card:hover .stage-product, .card:focus-within .stage-product { opacity: 0; }
@media (hover: none) { .card:hover .card-alt { opacity: 0; } .card:hover .stage-product { opacity: 1; } }
.tone-khaki { --stage: var(--khaki); --stage-wall: #f4f0d4; --stage-floor: #e6dea1; }
.tone-pink { --stage: var(--pink); --stage-wall: #fbe6e1; --stage-floor: #f0c8c4; }
.tone-moss { --stage: var(--moss); --stage-wall: #e4ebe2; --stage-floor: #c9d6c6; }
.rating {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  background: var(--paper); border-radius: 999px; font-size: 0.82rem; font-weight: 900; line-height: 1.5;
}
.rating[hidden] { display: none; }
.card-body { display: flex; flex-direction: column; flex: 1; padding-top: 14px; }
.card-title { font-size: 1.12rem; }
.card-title a { display: block; padding-block: 11px; margin-block: -11px; text-decoration: none; }
.card-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.card-meta { text-wrap: balance; margin: 2px 0 12px; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.4; }
.card .buy { margin-top: auto; }
.card .tag { align-self: flex-start; margin-bottom: 8px; }

/* ---------- Buy block ---------- */
.buy-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.price { margin: 0; font-weight: 900; font-size: 1.3rem; line-height: 1.2; min-height: 1.6rem; }
.price.is-loading { min-width: 4.5em; border-radius: 8px; background: linear-gradient(100deg, var(--beige) 30%, var(--paper) 50%, var(--beige) 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.price.is-muted { color: var(--ink-soft); font-size: 1rem; }
@keyframes shimmer { to { background-position-x: -200%; } }
@media (prefers-reduced-motion: reduce) { .price.is-loading { animation: none; } }
.stock { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--moss-ink); display: inline-flex; align-items: center; gap: 6px; }
.stock::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.stock.is-low { color: #8a4f1d; }
.stock.is-out { color: var(--ink-soft); }
.stock[hidden] { display: none; }
.buy-row { display: flex; gap: 10px; }
.buy-row .btn { flex: 1; width: 100%; white-space: nowrap; padding-inline: 16px; }
.card .buy-row .btn { min-height: 48px; padding-inline: 14px; }
.buy-status { margin: 8px 0 0; font-size: 0.9rem; min-height: 0; }
.buy-status:empty { display: none; }
.buy-note { margin: 10px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.buy-note a { font-weight: 700; }
.buy-note[hidden] { display: none; }
.stepper { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 999px; flex: none; background: var(--paper); }
.stepper button { width: 48px; height: 48px; border: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; }
.stepper button:hover:not(:disabled) { background: var(--beige); }
.stepper button:disabled { color: rgb(29 29 27 / 0.3); cursor: not-allowed; }
.stepper input, .stepper output { display: grid; place-items: center; height: 48px; width: 36px; text-align: center; border: 0; background: transparent; font-weight: 900; font-size: 1.05rem; padding: 0; min-width: 0; }
.stepper input:focus-visible { outline-offset: 6px; }
.stepper-sm button { width: 44px; height: 44px; }
.stepper-sm output { height: 44px; }
.stepper-sm { border-width: 1.5px; }
.is-sold-out .btn { background: transparent; color: var(--ink-soft); border-color: var(--line); }

/* ---------- Pillars / steps ---------- */
.pillars { display: grid; gap: 28px; }
.pillar { display: grid; grid-template-columns: 88px 1fr; gap: 4px 18px; align-items: start; }
.pillar-art { grid-row: 1 / span 2; width: 88px; aspect-ratio: 1; border-radius: var(--blob-a); display: grid; place-items: center; background: var(--stage); }
.pillar-art .art { width: 52%; }
.pillar h3 { font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; align-self: end; }
.pillar p { color: var(--ink-soft); max-width: 24em; margin: 0; }
@media (min-width: 800px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .pillar { display: block; }
  .pillar-art { width: 100%; max-width: 360px; aspect-ratio: 1.6; margin-bottom: 20px; }
  .pillar-art .art { width: 38%; }
  .pillar h3 { font-size: 1.9rem; margin-bottom: 8px; }
}
.steps { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.steps article { padding: 26px 0; border-bottom: 1px solid var(--line); }
.steps h3 { font-family: var(--display); font-weight: 400; font-size: 1.8rem; margin-bottom: 6px; }
.steps p { margin: 0; color: var(--ink-soft); max-width: 36em; }
@media (min-width: 800px) { .steps article { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: baseline; } }

/* ---------- Label feature ---------- */
.label-feature { display: grid; gap: 36px; align-items: center; }
.label-feature h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 14px; }
.label-feature .lead { color: var(--ink); margin-bottom: 24px; }
.label-list { list-style: none; padding: 0; margin: 0 0 30px; border-top: 2px solid var(--ink); }
.label-list li { display: grid; padding: 14px 0; border-bottom: 1px solid rgb(29 29 27 / 0.3); }
.label-list strong { font-weight: 900; }
.label-list span { color: var(--ink); }
.label-visual { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; margin-inline: auto; background: var(--beige); border-radius: var(--radius); overflow: hidden; }
.label-visual img { position: relative; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .label-feature { grid-template-columns: 1fr 1fr; gap: 72px; } .label-list li { grid-template-columns: 11em 1fr; gap: 20px; } }

.approach-tease { display: grid; gap: 28px; align-items: center; }
.approach-tease h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 16px; }
.approach-art { max-width: 420px; }
@media (min-width: 800px) { .approach-tease { grid-template-columns: 1fr 1.1fr; gap: 80px; } .approach-art { justify-self: center; } }

/* ---------- FAQ accordion ---------- */
.faq-list { border-top: 2px solid var(--ink); }
.faq-list details, .acc details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-weight: 900; font-size: 1.08rem; line-height: 1.35; min-height: 56px; }
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--pink-deep); }
.chev { transition: transform .2s; }
details[open] > summary .chev { transform: rotate(180deg); }
.faq-answer, .acc-body { padding: 0 0 22px; max-width: 42em; color: var(--ink-soft); }
.faq-answer p, .acc-body p { margin: 0 0 0.8em; }
.faq-answer a, .acc-body a { font-weight: 700; }
.note-card { margin-top: 56px; padding: 36px; background: var(--beige); border-radius: var(--radius); }
.note-card h2 { font-size: 2.2rem; margin-bottom: 8px; }

/* ---------- Bands ---------- */
.band { padding-block: clamp(48px, 7vw, 88px); }
.band-moss { background: var(--moss); }
.band-inner { display: grid; gap: 28px; align-items: center; }
.band h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 8px; }
.band p { margin: 0; max-width: 32em; }
.band-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 800px) { .band-inner { grid-template-columns: 1fr auto; gap: 60px; } }

/* ---------- Page head ---------- */
.page-head { background: var(--beige); overflow: hidden; }
.head-pink { background: var(--pink); } .head-moss { background: var(--moss); } .head-khaki { background: var(--khaki); } .head-plain { background: var(--beige); }
.head-all { background: var(--beige); } .head-dogs { background: var(--khaki); } .head-cats { background: var(--pink); }
.page-head-inner { display: grid; gap: 18px; padding-block: clamp(32px, 5vw, 60px); align-items: center; }
.page-head h1 { font-size: clamp(2.8rem, 7vw, 4.8rem); max-width: 12em; }
.page-head .lead { margin: 16px 0 0; color: var(--ink); }
.head-art { width: min(46%, 190px); justify-self: end; margin-top: 12px; }
.head-art.wide { width: min(70%, 300px); }
@media (min-width: 800px) { .page-head-inner { grid-template-columns: 1fr auto; gap: 40px; } .head-art { width: 230px; margin-top: 0; } .head-art.wide { width: 340px; } }

/* ---------- Collection toolbar ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 26px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--ink); font-weight: 900; text-decoration: none; transition: background-color .15s; }
.chip:hover { background: var(--beige); }
.chip[aria-current] { background: var(--ink); color: var(--paper); }
.result-count { margin: 0; font-size: 0.92rem; color: var(--ink-soft); font-weight: 700; }

/* ---------- Product page ---------- */
.pdp-top { padding-top: 18px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--ink-soft); }
.breadcrumbs a { text-decoration: none; padding: 13px 2px; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 700; }
.pdp { display: grid; gap: 28px; padding-block: 14px 56px; align-items: start; }
.gallery { position: relative; min-width: 0; }
.slides { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); background: var(--beige); aspect-ratio: 1; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; position: relative; display: grid; place-items: center; overflow: hidden; }
.slide.stage { border-radius: 0; aspect-ratio: auto; }
.slide.stage::before { bottom: 10.2%; }
.slide-photo picture, .slide-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slide-label { background: var(--beige); }
.slide-label img { width: 100%; height: 100%; object-fit: contain; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.thumb { flex: none; }
.thumb { position: relative; width: 72px; height: 72px; border-radius: 16px; background: var(--beige); border: 2px solid transparent; display: block; overflow: hidden; }
.thumb picture, .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb .thumb-product { object-fit: contain; }
.thumb[aria-current] { border-color: var(--ink); }
.pdp-info h1 { font-size: clamp(2.5rem, 6.5vw, 4rem); margin-bottom: 10px; }
.rating-line { display: flex; align-items: center; gap: 6px; font-weight: 700; margin: 0 0 8px; }
.rating-line[hidden] { display: none; }
.pdp-lede { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 20px; max-width: 30em; }
.quick-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 24px; padding: 16px 0; border-block: 1px solid var(--line); }
.quick-facts dt { font-size: 0.82rem; color: var(--ink-soft); font-weight: 700; }
.quick-facts dd { margin: 0; font-weight: 900; line-height: 1.3; }
@media (min-width: 560px) { .quick-facts { gap: 8px 36px; } }
.pdp-buy { margin-bottom: 20px; }
.buy-big .price { font-size: 2rem; }
.buy-big .buy-top { margin-bottom: 16px; }
.buy-big .btn { min-height: 58px; font-size: 1.1rem; }
.btn-price { display: none; }
.buy-big .btn-price { display: inline; padding-left: 14px; margin-left: 4px; border-left: 2px solid currentColor; }
.price-sub { margin: 4px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.price-sub[hidden] { display: none; }
.mini-assure { list-style: none; margin: 0 0 14px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-weight: 700; font-size: 0.95rem; }
.mini-assure li { display: flex; align-items: center; gap: 10px; }
.mini-assure .icon { color: var(--moss-deep); }
.amazon-line { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }
@media (min-width: 980px) {
  .pdp { grid-template-columns: 1.05fr 1fr; gap: 64px; padding-block: 20px 88px; }
  .gallery { position: sticky; top: calc(var(--header-h) + 24px); }
  .mini-assure { grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 28px; }
}
.details { padding-block: clamp(40px, 6vw, 80px); background: var(--beige); }
.details h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 20px; }
.details-grid { display: grid; gap: 40px; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.acc { border-top: 2px solid var(--ink); }
.facts { background: var(--paper); border: 2px solid var(--ink); border-radius: 22px; padding: 22px 24px; }
.facts h3 { font-family: var(--display); font-weight: 400; font-size: 1.7rem; padding-bottom: 8px; border-bottom: 6px solid var(--ink); margin-bottom: 8px; }
.facts-serving { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.facts table { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: 0.95rem; }
.facts caption { text-align: left; font-weight: 900; padding-bottom: 6px; }
.facts th, .facts td { padding: 8px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.facts td { text-align: right; font-weight: 900; white-space: nowrap; padding-left: 14px; }
.facts-other { font-size: 0.88rem; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.5; }
@media (min-width: 900px) { .details-grid { grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: start; } .facts { position: sticky; top: calc(var(--header-h) + 24px); } }

.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--paper); border-top: 2px solid var(--ink); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.sticky-atc[hidden] { display: none; }
.sticky-inner { display: flex; align-items: center; gap: 14px; }
.sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sticky-info strong { font-weight: 900; font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-info span { font-weight: 700; color: var(--ink-soft); }
.sticky-inner .btn { flex: none; min-height: 50px; padding-inline: 24px; }
@media (min-width: 900px) { .sticky-atc { display: none !important; } }
body.has-sticky { padding-bottom: 76px; }

/* ---------- Editorial ---------- */
.prose-wrap { display: grid; gap: 40px; align-items: start; }
.prose { max-width: 38em; }
.prose h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.prose p { font-size: 1.12rem; color: var(--ink-soft); }
.prose-side blockquote { margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; padding-left: 22px; border-left: 6px solid var(--pink); }
.prose-side .art { max-width: 340px; }
.ticks { list-style: none; padding: 0; margin: 0 0 28px; }
.ticks li { position: relative; padding: 12px 0 12px 38px; border-bottom: 1px solid var(--line); font-weight: 700; }
.ticks li::before { content: ''; position: absolute; left: 4px; top: 17px; width: 18px; height: 10px; border-left: 3px solid var(--moss-deep); border-bottom: 3px solid var(--moss-deep); transform: rotate(-45deg) scale(.9); }
@media (min-width: 900px) { .prose-wrap { grid-template-columns: 1.3fr 1fr; gap: 80px; } }

.contact-grid { display: grid; gap: 20px; }
.contact-card { padding: 30px; background: var(--beige); border-radius: var(--radius); }
.contact-card h2 { font-size: 2rem; margin: 10px 0 12px; }
.contact-card p { margin: 0 0 8px; }
.contact-mail { font-weight: 900; font-size: 1.15rem; word-break: break-word; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; } }

/* ---------- Policy ---------- */
.policy-wrap { display: grid; gap: 28px; }
.toc { display: flex; flex-direction: column; gap: 2px; font-size: 0.95rem; }
.toc-title { margin: 0 0 6px; font-weight: 900; }
.toc a { text-decoration: none; padding: 6px 0; color: var(--ink-soft); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.policy-copy { max-width: 42em; }
.policy-copy section { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.policy-copy section:last-child { border-bottom: 0; }
.policy-copy h2 { font-size: 2rem; margin-bottom: 10px; }
.policy-copy p { color: var(--ink-soft); }
.policy-copy a { font-weight: 700; }
@media (max-width: 899px) { .toc { display: none; } }
@media (min-width: 900px) { .policy-wrap { grid-template-columns: 240px 1fr; gap: 80px; } .toc { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; } }

/* ---------- Cart (drawer and page) ---------- */
.drawer { border: 0; padding: 0; margin: 0 0 0 auto; width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--paper); color: var(--ink); overflow: hidden; }
.drawer::backdrop { background: rgb(29 29 27 / 0.45); }
.drawer[open] { display: block; animation: slide .3s cubic-bezier(.2,.7,.2,1); }
.drawer[open]::backdrop { animation: fade .3s; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.drawer-panel { display: flex; flex-direction: column; height: 100%; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 2rem; }
.drawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.drawer-body[data-mode='drawer'] .cart-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 16px; overscroll-behavior: contain; }
.drawer-body[data-mode='drawer'] .cart-summary { flex: none; padding: 18px 24px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 20px -12px rgb(29 29 27 / 0.2); }
.drawer-body .cart-empty { padding-inline: 24px; }
[data-mode='page'] .cart-scroll { display: contents; }
.cart-lines { list-style: none; padding: 0; margin: 0; }
.cart-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.cart-thumb { display: block; width: 72px; height: 72px; border-radius: 18px; background: var(--beige); position: relative; overflow: hidden; flex: none; }
.cart-thumb::before { content: ''; position: absolute; inset: 12%; background: var(--stage); border-radius: var(--blob-a); }
.cart-thumb img { position: relative; width: 100%; height: 100%; }
.cart-line-name { font-weight: 900; text-decoration: none; line-height: 1.25; display: block; padding-block: 12px; margin-block: -12px 0; }
.cart-line-name:hover { text-decoration: underline; }
.cart-line-size { margin: 2px 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.cart-line-warn { margin: 6px 0 0; font-size: 0.9rem; font-weight: 700; color: #8a2d2d; }
.cart-line-controls { display: flex; align-items: center; gap: 0 6px; margin-top: 12px; flex-wrap: wrap; }
.cart-remove { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); }
.cart-remove span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cart-remove:hover { color: var(--ink); background: var(--beige); }
.cart-line-price { margin: 0; font-weight: 900; white-space: nowrap; }
.cart-line.is-unavailable { opacity: 0.8; }
.cart-suggest { margin-top: 22px; padding: 18px; background: var(--beige); border-radius: 22px; }
.cart-suggest-title { font-family: var(--display); font-size: 1.4rem; margin: 0 0 10px; line-height: 1; }
.cart-suggest-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; }
.cart-suggest .cart-thumb { width: 72px; height: 72px; background: var(--paper); }
.cart-summary { background: var(--paper); border-top: 2px solid var(--ink); padding: 20px 0; }
.cart-totals { margin: 0 0 16px; display: grid; gap: 6px; }
.cart-totals div { display: flex; justify-content: space-between; font-weight: 700; }
.cart-totals div:first-child { font-size: 1.2rem; font-weight: 900; }
.cart-totals dd { margin: 0; }
.cart-totals .is-free { color: var(--moss-ink); font-weight: 900; }
.cart-note { font-size: 0.85rem; color: var(--ink-soft); margin: 14px 0 6px; line-height: 1.45; }
.cart-status { margin: 10px 0 0; font-size: 0.92rem; font-weight: 700; }
.cart-status:empty { display: none; }
.cart-assure { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); }
.cart-empty { margin: auto; text-align: center; padding: 40px 0; display: grid; justify-items: center; gap: 4px; }
.cart-empty-art img { width: 200px; height: auto; margin-bottom: 10px; }
.cart-empty-title { font-family: var(--display); font-size: 2.2rem; margin: 0; line-height: 1.1; }
.cart-empty p { color: var(--ink-soft); margin: 0 0 14px; }
.cart-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.cart-wrap { padding-block: 40px 88px; }
.cart-wrap [data-cart-root] { min-height: 560px; }
.cart-wrap h1 { font-size: clamp(2.8rem, 8vw, 4.6rem); margin-bottom: 28px; }
[data-cart-root][data-mode='page'] { display: grid; gap: 32px; align-items: start; }
[data-cart-root][data-mode='page'] .cart-summary { position: static; background: var(--beige); border: 0; border-radius: var(--radius); padding: 26px; }
[data-cart-root][data-mode='page'] .cart-empty { grid-column: 1 / -1; margin: 0 auto; }
@media (min-width: 560px) { .cart-line { grid-template-columns: 84px 1fr auto; } .cart-thumb { width: 84px; height: 84px; } }
@media (min-width: 900px) {
  [data-cart-root][data-mode='page'] { grid-template-columns: 1.6fr 1fr; gap: 56px; }
  [data-cart-root][data-mode='page'] .cart-lines { grid-column: 1; border-top: 2px solid var(--ink); }
  [data-cart-root][data-mode='page'] .cart-suggest { grid-column: 1; margin-top: 0; }
  [data-cart-root][data-mode='page'] .cart-summary { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------- State pages ---------- */
.state { padding-block: clamp(56px, 10vw, 120px); }
.state-inner { display: grid; justify-items: start; gap: 12px; }
.state-inner > * { max-width: 40em; }
.state h1 { font-size: clamp(3rem, 9vw, 5.6rem); }
.state-art { width: 150px; aspect-ratio: 1; display: grid; place-items: center; background: var(--stage, transparent); border-radius: var(--blob-a); margin-bottom: 10px; }
.state-art .art { width: 56%; }
.state-art.wide { width: min(100%, 360px); aspect-ratio: auto; border-radius: 0; }
.state-art.wide .art { width: 100%; }
.state .lead { margin: 8px 0 18px; }
.state-card { padding: 24px 28px; background: var(--beige); border-radius: var(--radius); margin: 14px 0 22px; }
.state-card h2 { font-size: 1.8rem; margin-bottom: 6px; }
.state-card p { margin: 0; color: var(--ink-soft); }
.order-detail { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 2px solid var(--ink); }
.order-detail[hidden] { display: none; }
.order-detail li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.order-detail .order-total { font-weight: 900; font-size: 1.1rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding-top: clamp(48px, 7vw, 88px); }
.site-footer :focus-visible { outline-color: var(--paper); box-shadow: 0 0 0 6px var(--ink); }
.footer-top { display: grid; gap: 36px 24px; grid-template-columns: 1fr 1fr; padding-bottom: 48px; }
.footer-brand { grid-column: 1 / -1; }
.footer-line { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; max-width: 14em; margin: 18px 0 0; color: var(--pink); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col h2 { font-family: var(--text); font-weight: 900; font-size: 1rem; margin-bottom: 8px; color: var(--moss); }
.footer-col a { display: inline-flex; align-items: center; text-decoration: none; padding: 4px 0; min-height: 44px; }
.footer-col a:hover, .footer-legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-block: 22px 28px; border-top: 1px solid rgb(255 248 245 / 0.25); font-size: 0.88rem; color: rgb(255 248 245 / 0.8); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) {
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
}

/* ---------- Two-column heading + content ---------- */
.split-2 { display: grid; gap: 28px; align-items: start; }
.split-head h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-bottom: 14px; }
.split-head p { color: var(--ink-soft); max-width: 22em; }
@media (min-width: 900px) { .split-2 { grid-template-columns: 1fr 1.7fr; gap: 80px; } .split-head { position: sticky; top: calc(var(--header-h) + 28px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Tiers: buy more, save ---------- */
.was { margin-left: 10px; font-size: 0.62em; font-weight: 700; color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 2px; }
.tier-teaser { margin: 0 0 10px; font-size: 0.86rem; font-weight: 700; color: var(--moss-ink); min-height: 1.4em; line-height: 1.4; }
.tier-teaser:empty { visibility: hidden; }
.tiers { min-height: 164px; margin-bottom: 16px; }
.tiers:empty { min-height: 0; margin: 0; }
.tiers-title { margin: 0 0 8px; font-family: var(--display); font-size: 1.4rem; line-height: 1; }
.tier-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tier { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; min-height: 84px; border: 2px solid var(--line); border-radius: 18px; background: var(--paper); text-align: center; transition: border-color .15s, background-color .15s; }
.tier:hover { border-color: var(--ink); }
.tier[aria-checked='true'] { border-color: var(--ink); background: var(--beige); box-shadow: inset 0 0 0 1px var(--ink); }
.tier-qty { font-weight: 900; font-size: 0.9rem; color: var(--ink-soft); }
.tier-price { font-weight: 900; font-size: 1.12rem; line-height: 1.2; }
.tier-save { font-size: 0.78rem; font-weight: 900; color: var(--moss-ink); white-space: nowrap; line-height: 1.5; }
.tier[aria-checked='true'] .tier-save { background: var(--moss); color: var(--ink); border-radius: 999px; padding: 0 6px; }
.tiers-note { margin: 8px 0 0; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.45; }
.cart-nudge { margin: 16px 0 4px; padding: 14px 16px 16px; background: var(--beige); border-radius: 20px; }
.cart-nudge p { margin: 0 0 10px; font-weight: 700; font-size: 0.95rem; line-height: 1.4; }
.nudge-bar { height: 10px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.nudge-bar span { display: block; height: 100%; background: var(--moss); border-radius: 999px; transition: width .4s cubic-bezier(.2,.7,.2,1); }
.cart-line-price .was { display: block; margin: 0 0 2px; font-size: 0.82rem; text-align: right; }
.cart-line-price { text-align: right; }
.cart-totals .is-save { color: var(--moss-ink); }
.price .was { font-size: 1rem; }
.rating-line a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.rating-line a:hover span { text-decoration: underline; }

/* ---------- Best value badge ---------- */
.tiers { padding-top: 10px; }
.tier { position: relative; }
.tier-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 1px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.72rem; font-weight: 900; line-height: 1.6; white-space: nowrap; }
.tiers-title { margin-top: 4px; }