@layer reset, base, blocks, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  button { font: inherit; color: inherit; }
}

@layer base {
  :root {
    --blush: #FCA8B4;
    --blush-soft: #FDD3DA;
    --petal: #FFF2F4;
    --rose: #F84078;
    --rose-deep: #E0306A;
    --berry: #901058;
    --plum: #4A0A30;
    --lime: #B4D814;
    --lime-soft: #E6F3A6;
    --teal: #089088;
    --teal-deep: #067870;
    --cream: #FFFDFB;
    --ink: #3B1028;
    --muted: #7A4A62;
    --serif: "Corben", Georgia, serif;
    --round: "M PLUS Rounded 1c", "Trebuchet MS", system-ui, sans-serif;
    --shell: min(1180px, 100% - 32px);
    --r-xl: 44px;
    --r-lg: 28px;
  }
  body { font-family: var(--round); font-size: 1rem; line-height: 1.65; color: var(--ink); background: var(--cream); overflow-x: hidden; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; color: var(--rose); letter-spacing: -.01em; }
  h4 { font-weight: 800; }
  a { color: var(--berry); }
  a:hover { color: var(--rose); }
  strong { font-weight: 800; }
  .shell { inline-size: var(--shell); margin-inline: auto; }
  .sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kicker { display: inline-block; font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--berry);
    background: var(--lime-soft); border-radius: 99px; padding: .25em 1em; }
  .pill-link { display: inline-flex; align-items: center; gap: .5em; font-weight: 800; text-decoration: none; border-radius: 99px;
    padding: .7em 1.5em; background: var(--rose); color: #fff; box-shadow: 0 4px 0 var(--berry); transition: transform .15s; }
  .pill-link:hover { color: #fff; transform: translateY(-2px); }
  .pill-link--ghost { background: #fff; color: var(--rose); box-shadow: 0 4px 0 var(--blush); }
  .pill-link--ghost:hover { color: var(--berry); }
  .stars { --p: 90%; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 2px;
    background: linear-gradient(90deg, #F5A30B var(--p), #EBD3DA var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .stars::before { content: "★★★★★"; }
}

@layer blocks {
  /* ---------- buy stamp ---------- */
  .stamp { display: block; padding: 0; border: 0; background: none; cursor: pointer; inline-size: 100%; max-inline-size: 330px; transition: transform .15s, filter .15s; }
  .stamp img { inline-size: 100%; }
  .stamp:hover { transform: translateY(-2px); filter: saturate(1.15); }
  .stamp:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 99px; }
  .stamp--bar { max-inline-size: 200px; }
  .stamp--card { max-inline-size: none; margin-block-start: auto; }

  /* ---------- floating pill header (leader: moosetoys gui-gui) ---------- */
  .vanity-top { background: var(--blush); padding-block: 22px 0; position: relative; z-index: 20; }
  .vanity-bar { inline-size: var(--shell); margin-inline: auto; background: #fff; border-radius: 99px; display: flex; align-items: center;
    gap: 22px; padding: 10px 14px 10px 30px; box-shadow: 0 10px 30px rgba(144,16,88,.12); }
  .vanity-bar__logo img { inline-size: 132px; }
  .vanity-bar__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-inline-end: auto; }
  .vanity-bar__nav a { text-decoration: none; color: var(--ink); font-weight: 700; font-size: .95rem; white-space: nowrap; }
  .vanity-bar__nav a:hover, .vanity-bar__nav a[aria-current] { color: var(--rose); }
  .vanity-bar__burger { display: none; }
  .vanity-bar__toggle { display: none; }
  @media (max-width: 1080px) {
    .vanity-bar { flex-wrap: wrap; padding: 10px 12px 10px 22px; border-radius: 34px; gap: 10px; }
    .vanity-bar__logo img { inline-size: 104px; }
    .vanity-bar__burger { display: grid; place-items: center; order: 3; inline-size: 46px; block-size: 46px; border-radius: 50%; background: var(--petal); cursor: pointer; }
    .vanity-bar__burger span, .vanity-bar__burger span::before, .vanity-bar__burger span::after { display: block; inline-size: 20px; block-size: 3px; border-radius: 3px; background: var(--rose); position: relative; content: ""; }
    .vanity-bar__burger span::before { position: absolute; inset-block-start: -7px; }
    .vanity-bar__burger span::after { position: absolute; inset-block-start: 7px; }
    .vanity-bar .stamp--bar { order: 2; margin-inline-start: auto; max-inline-size: 170px; }
    .vanity-bar__nav { order: 4; inline-size: 100%; display: none; flex-direction: column; gap: 0; padding: 6px 4px 10px; }
    .vanity-bar__nav a { padding: 9px 4px; border-block-start: 1px dashed var(--blush); }
    .vanity-bar__toggle:checked ~ .vanity-bar__nav { display: flex; }
  }
  @media (max-width: 420px) { .vanity-bar .stamp--bar { max-inline-size: 165px; } .vanity-bar__logo img { inline-size: 88px; } }

  /* ---------- wave edges ---------- */
  .wave { display: block; inline-size: 100%; block-size: 60px; }
  .wave--sm { block-size: 36px; }

  /* ---------- hero: gradient blush -> lime, white logo + product scene (leader) ---------- */
  .glow-hero { background: linear-gradient(180deg, var(--blush) 0%, #F7BFA6 55%, var(--lime) 100%); position: relative; padding-block: 34px 0; }
  .glow-hero__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 34px; align-items: center; padding-block-end: 30px; }
  .glow-hero__logo { inline-size: min(420px, 90%); filter: drop-shadow(0 6px 18px rgba(144,16,88,.18)); }
  .glow-hero h1 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.7rem); margin-block: 18px 12px; text-shadow: 0 2px 14px rgba(144,16,88,.35); }
  .glow-hero__lede { color: var(--plum); font-size: 1.08rem; max-inline-size: 34em; }
  .glow-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 22px; align-items: center; }
  .glow-hero__scene { border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 24px 50px rgba(144,16,88,.25); border: 6px solid #fff; transform: rotate(1.2deg); }
  .glow-hero__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-block-start: 22px; color: var(--plum); font-weight: 700; font-size: .9rem; }
  .glow-hero__trust span::before { content: "✦ "; color: #fff; }
  .glow-hero .wave { margin-block-start: -1px; }
  @media (max-width: 860px) { .glow-hero__grid { grid-template-columns: 1fr; } .glow-hero__scene { transform: none; } }

  /* ---------- intro: pink serif (leader) ---------- */
  .mirror-note { text-align: center; padding-block: 56px 40px; }
  .mirror-note h2 { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--blush); -webkit-text-stroke: 1px var(--rose); paint-order: stroke fill; }
  .mirror-note p { max-inline-size: 46em; margin: 18px auto 0; color: var(--muted); font-size: 1.05rem; }

  /* ---------- circle shelf (kawaii slime co) ---------- */
  .compacts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; padding-block: 10px 50px; }
  .compacts a { text-decoration: none; text-align: center; color: var(--ink); }
  .compacts__ring { aspect-ratio: 1; border-radius: 50%; padding: 7px; background: conic-gradient(var(--blush), var(--lime), var(--teal), var(--blush)); transition: transform .2s; }
  .compacts__ring img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 50%; border: 4px solid #fff; }
  .compacts a:hover .compacts__ring { transform: translateY(-4px) rotate(-4deg); }
  .compacts b { display: block; margin-block-start: 10px; font-weight: 800; color: var(--rose); }
  .compacts small { color: var(--muted); font-size: .82rem; }
  @media (max-width: 860px) { .compacts { grid-template-columns: repeat(3, 1fr); } }

  /* ---------- 3 tiles on blush (leader: select / decorate / complete) ---------- */
  .counter { background: var(--blush); padding-block: 60px; }
  .counter__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
  .counter__tile { background: #fff; border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
  .counter__tile--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.5fr; }
  .counter__tile--wide img { aspect-ratio: 2/1; block-size: 100%; }
  .counter__tile h3 { font-size: 1.6rem; padding: 26px 30px 6px; }
  .counter__tile p { padding: 0 30px 26px; color: var(--muted); }
  .counter__tile img { inline-size: 100%; object-fit: cover; aspect-ratio: 16/9; margin-block-start: auto; }
  .counter__tile--wide .counter__copy { display: flex; flex-direction: column; justify-content: center; }
  .counter__tile:nth-child(3) { border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 120px; }
  .counter__tile:hover h3 { color: var(--berry); }
  @media (max-width: 760px) { .counter__grid { grid-template-columns: 1fr; } .counter__tile--wide { grid-template-columns: 1fr; } }

  /* ---------- ritual steps ---------- */
  .ritual { padding-block: 64px; }
  .ritual__head { text-align: center; margin-block-end: 26px; }
  .ritual__head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
  .ritual__banner { border-radius: var(--r-lg); overflow: hidden; margin-block-end: 26px; }
  .ritual__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: st; }
  .ritual__steps li { background: var(--petal); border: 2px solid var(--blush); border-radius: 26px; padding: 22px 16px 18px; text-align: center; counter-increment: st; position: relative; }
  .ritual__steps li::before { content: counter(st); display: grid; place-items: center; inline-size: 50px; block-size: 50px; margin: -46px auto 10px; border-radius: 50%;
    background: var(--rose); color: #fff; font-family: var(--serif); font-size: 1.4rem; box-shadow: 0 4px 0 var(--berry); }
  .ritual__steps b { display: block; color: var(--berry); font-size: 1.02rem; }
  .ritual__steps span { font-size: .9rem; color: var(--muted); }
  .ritual__steps { margin-block-start: 40px; row-gap: 46px; }
  @media (max-width: 860px) { .ritual__steps { grid-template-columns: 1fr 1fr; } }

  /* ---------- scallop edge + range grid (kawaii scallop, leader cards) ---------- */
  .range { background: var(--petal); padding-block: 20px 70px; position: relative; }
  .scallop { block-size: 34px; background: radial-gradient(circle at 25px 0, var(--cream) 24px, transparent 25px) 0 0 / 50px 34px repeat-x; background-color: var(--petal); }
  .range__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; margin-block: 30px 30px; }
  .range__head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
  .range__head p { color: var(--muted); max-inline-size: 36em; }
  .jars { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
  .jar-card { background: #fff; border: 3px solid var(--blush); border-radius: 34px; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, transform .2s; }
  .jar-card:hover { border-color: var(--rose); transform: translateY(-3px); }
  .jar-card__pic { display: block; aspect-ratio: 1; border-radius: 24px; background: #fff; overflow: hidden; }
  .jar-card__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .jar-card__line { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
  .jar-card h3 { font-size: 1.08rem; line-height: 1.3; color: var(--ink); }
  .jar-card h3 a { color: inherit; text-decoration: none; }
  .jar-card h3 a:hover { color: var(--rose); }
  .jar-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted); }
  .jar-card__price { font-family: var(--serif); font-size: 1.3rem; color: var(--berry); }
  .jar-card__tex { display: flex; flex-wrap: wrap; gap: 5px; }
  .jar-card__tex span { font-size: .72rem; font-weight: 800; border-radius: 99px; padding: .15em .7em; background: var(--lime-soft); color: var(--plum); }

  /* ---------- texture swatches (moose product page: amazing feels) ---------- */
  .swatches { padding-block: 70px; }
  .swatches__head { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; margin-block-end: 30px; }
  .swatches__head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
  .swatches__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .swatch { background: var(--blush); border-radius: 30px; overflow: hidden; display: grid; grid-template-columns: 44% 1fr; align-items: center; }
  .swatch img { aspect-ratio: 1; object-fit: cover; block-size: 100%; }
  .swatch div { padding: 16px 18px; }
  .swatch h3 { font-size: 1.3rem; color: #fff; text-shadow: 0 1px 6px rgba(144,16,88,.4); }
  .swatch p { font-size: .88rem; color: var(--plum); line-height: 1.5; margin-block-start: 4px; }
  @media (max-width: 960px) { .swatches__grid { grid-template-columns: 1fr 1fr; } .swatches__head { grid-template-columns: 1fr; } }
  @media (max-width: 600px) { .swatches__grid { grid-template-columns: 1fr; } }

  /* ---------- comparison ledger (agorara review table) — stacks, no h-scroll ---------- */
  .ledger { padding-block: 10px 70px; }
  .ledger h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); text-align: center; }
  .ledger > .shell > p { text-align: center; color: var(--muted); margin: 10px auto 26px; max-inline-size: 40em; }
  .ledger__rows { border: 3px solid var(--blush); border-radius: 30px; overflow: hidden; background: #fff; }
  .ledger__row { display: grid; grid-template-columns: 60px 92px 1.6fr 1fr 110px 90px 220px; gap: 14px; align-items: center; padding: 12px 18px; border-block-end: 2px dashed var(--blush-soft); }
  .ledger__row:last-child { border-block-end: 0; }
  .ledger__row--head { background: var(--rose); color: #fff; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; border: 0; }
  .ledger__rank { font-family: var(--serif); font-size: 1.6rem; color: var(--blush); text-align: center; }
  .ledger__row > img { inline-size: 84px; aspect-ratio: 1; object-fit: contain; border-radius: 14px; }
  .ledger__name a { font-weight: 800; color: var(--ink); text-decoration: none; }
  .ledger__name a:hover { color: var(--rose); }
  .ledger__score { display: inline-grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--lime-soft); font-family: var(--serif); color: var(--berry); }
  .ledger__price { font-family: var(--serif); color: var(--berry); }
  @media (max-width: 1000px) {
    .ledger__row--head { display: none; }
    .ledger__row { grid-template-columns: 50px 84px 1fr; grid-template-areas: "r i n" "r i t" "s p b"; }
    .ledger__rank { grid-area: r; } .ledger__row > img { grid-area: i; } .ledger__name { grid-area: n; } .ledger__tex { grid-area: t; font-size: .86rem; color: var(--muted); }
    .ledger__sc { grid-area: s; } .ledger__price { grid-area: p; } .ledger__row .stamp { grid-area: b; }
  }
  @media (max-width: 560px) {
    .ledger__row { grid-template-columns: 44px 1fr; grid-template-areas: "r n" "i i" "t t" "s p" "b b"; }
    .ledger__row > img { inline-size: 120px; justify-self: center; }
    .ledger__row .stamp { justify-self: center; }
  }

  /* ---------- reviews (slime kitchen purple band + toysmith cards) ---------- */
  .voices { background: var(--berry); padding-block: 74px; color: #fff; }
  .voices h2 { color: #fff; text-align: center; font-size: clamp(1.9rem, 4vw, 2.7rem); }
  .voices > .shell > p { text-align: center; color: var(--blush-soft); margin-block: 8px 34px; }
  .voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .voice { background: #fff; color: var(--ink); border-radius: 26px; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 8px; }
  .voice .stars { --p: 100%; font-size: 1.15rem; }
  .voice h3 { font-family: var(--round); font-weight: 800; font-size: 1.02rem; color: var(--ink); }
  .voice p { font-size: .94rem; color: #5a3448; }
  .voice footer { margin-block-start: auto; padding-block-start: 10px; border-block-start: 2px dotted var(--blush); font-size: .82rem; color: var(--muted); }
  .voice footer a { font-weight: 800; }
  @media (max-width: 900px) { .voices__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .voices__grid { grid-template-columns: 1fr; } }

  /* ---------- collab banners ---------- */
  .collabs { padding-block: 70px 20px; }
  .collabs h2 { text-align: center; font-size: clamp(1.8rem, 4vw, 2.5rem); margin-block-end: 26px; }
  .collabs__list { display: grid; gap: 16px; }
  .collabs__list a { display: block; border-radius: 26px; overflow: hidden; transition: transform .2s; }
  .collabs__list a:hover { transform: scale(1.01); }

  /* ---------- guide (SEO text) ---------- */
  .guide { padding-block: 60px; }
  .guide__wrap { background: var(--petal); border-radius: var(--r-xl); padding: clamp(26px, 5vw, 56px); }
  .guide h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-block-end: 14px; }
  .guide__cols { columns: 2 320px; column-gap: 46px; }
  .guide__cols p { margin-block-end: 1em; break-inside: avoid; }
  .guide__cols h3 { font-size: 1.15rem; color: var(--berry); margin-block: 0 .4em; break-after: avoid; }
  .guide__steps { counter-reset: g; list-style: none; padding: 0; display: grid; gap: 10px; margin-block: 0 1em; }
  .guide__steps li { counter-increment: g; padding-inline-start: 46px; position: relative; break-inside: avoid; }
  .guide__steps li::before { content: counter(g); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--plum); font-weight: 800; }

  /* ---------- people also ask ---------- */
  .asks { padding-block: 10px 70px; }
  .asks h2 { text-align: center; font-size: clamp(1.8rem, 4vw, 2.5rem); margin-block-end: 22px; }
  .asks__list { max-inline-size: 860px; margin-inline: auto; display: grid; gap: 12px; }
  .asks details { background: #fff; border: 2px solid var(--blush); border-radius: 22px; padding: 0 22px; }
  .asks summary { cursor: pointer; list-style: none; font-weight: 800; padding: 16px 30px 16px 0; position: relative; }
  .asks summary::-webkit-details-marker { display: none; }
  .asks summary::after { content: "+"; position: absolute; inset-inline-end: 0; inset-block-start: 10px; font-size: 1.6rem; color: var(--rose); }
  .asks details[open] summary::after { content: "–"; }
  .asks details p { padding-block-end: 16px; color: var(--muted); }

  /* ---------- prefooter hub (leader: support hub box) ---------- */
  .hub { padding-block: 20px 80px; }
  .hub__box { background: var(--blush); border-radius: 60px; text-align: center; padding: clamp(34px, 6vw, 70px) 24px; }
  .hub__box img { inline-size: min(300px, 70%); margin-inline: auto; }
  .hub__box h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); margin-block: 10px; }
  .hub__box p { color: var(--plum); max-inline-size: 36em; margin: 0 auto 22px; }
  .hub__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

  /* ---------- footer: teal with wave + rainbow strip (leader) ---------- */
  .tray { background: var(--teal); color: #E6FFFB; position: relative; }
  .tray__wave { display: block; inline-size: 100%; block-size: 70px; background: var(--cream); }
  .tray__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1.3fr; gap: 30px; padding-block: 40px 40px; }
  .tray h4 { color: #fff; font-size: 1.05rem; margin-block-end: 12px; }
  .tray ul { list-style: none; padding: 0; display: grid; gap: 7px; }
  .tray a { color: #E6FFFB; text-decoration: none; font-size: .93rem; }
  .tray a:hover { color: var(--lime); }
  .tray__brand img { inline-size: 170px; }
  .tray__brand p { font-size: .9rem; margin-block-start: 12px; color: #CFF5F0; }
  .tray address { font-style: normal; font-size: .9rem; line-height: 1.6; }
  .tray__base { border-block-start: 1px solid rgba(255,255,255,.25); padding-block: 18px; font-size: .84rem; color: #CFF5F0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
  .tray__rainbow { display: grid; grid-template-columns: repeat(7, 1fr); block-size: 12px; }
  .tray__rainbow i:nth-child(1) { background: var(--teal-deep); } .tray__rainbow i:nth-child(2) { background: #2A7DE1; }
  .tray__rainbow i:nth-child(3) { background: #8E44C9; } .tray__rainbow i:nth-child(4) { background: var(--rose); }
  .tray__rainbow i:nth-child(5) { background: #F7931E; } .tray__rainbow i:nth-child(6) { background: var(--blush); }
  .tray__rainbow i:nth-child(7) { background: var(--lime); }
  @media (max-width: 960px) { .tray__grid { grid-template-columns: 1fr 1fr; } .tray__brand { grid-column: 1 / -1; } }
  @media (max-width: 520px) { .tray__grid { grid-template-columns: 1fr; } }

  /* ---------- crumbs ---------- */
  .crumbs { font-size: .86rem; color: var(--muted); padding-block: 22px 6px; }
  .crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .crumbs li + li::before { content: "›"; margin-inline-end: 6px; color: var(--rose); }
  .crumbs a { color: var(--muted); text-decoration: none; }
  .crumbs a:hover { color: var(--rose); }
}

@layer pages {
  /* ---------- category ---------- */
  .drawer-hero { background: var(--blush); padding-block: 10px 0; }
  .drawer-hero__banner { border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; margin-block-start: 26px; }
  .drawer-hero__copy { background: #fff; border-radius: 0 0 var(--r-xl) var(--r-xl); padding: 28px clamp(22px, 4vw, 44px) 34px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; }
  .drawer-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-block: 10px 8px; }
  .drawer-hero__copy p { color: var(--muted); }
  .drawer-hero__facts { list-style: none; padding: 0; display: grid; gap: 10px; align-content: center; }
  .drawer-hero__facts li { background: var(--petal); border-radius: 18px; padding: 10px 16px; font-size: .92rem; }
  .drawer-hero__facts b { color: var(--berry); }
  @media (max-width: 800px) { .drawer-hero__copy { grid-template-columns: 1fr; } }
  .drawer-more { padding-block: 50px 10px; }
  .drawer-more__box { display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px; align-items: center; }
  .drawer-more__box img { border-radius: var(--r-lg); }
  .drawer-more h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-block-end: 10px; }
  @media (max-width: 760px) { .drawer-more__box { grid-template-columns: 1fr; } }
  .siblings { padding-block: 30px 40px; }
  .siblings h2 { font-size: 1.6rem; margin-block-end: 16px; }
  .siblings__list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }

  /* ---------- product page (toysmith layout + moose product sections) ---------- */
  .look { padding-block: 10px 50px; }
  .look__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; }
  .gallery { display: grid; grid-template-columns: 78px 1fr; gap: 14px; }
  .gallery__thumbs { display: grid; gap: 10px; align-content: start; }
  .gallery__thumbs label { cursor: pointer; border: 2px solid var(--blush-soft); border-radius: 14px; overflow: hidden; aspect-ratio: 1; background: #fff; }
  .gallery__thumbs img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .gallery__stage { border: 3px solid var(--blush); border-radius: 34px; background: #fff; aspect-ratio: 1; position: relative; overflow: hidden; }
  .gallery__stage img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; padding: 18px; opacity: 0; transition: opacity .25s; }
  .gallery input { position: absolute; opacity: 0; pointer-events: none; }
  @media (max-width: 900px) { .look__grid { grid-template-columns: 1fr; } }
  @media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } .gallery__thumbs { grid-template-columns: repeat(6, 1fr); order: 2; } }
  .look__badge { display: inline-block; background: var(--teal); color: #fff; font-weight: 800; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; border-radius: 99px; padding: .3em 1em; text-decoration: none; }
  .look__badge:hover { color: #fff; background: var(--teal-deep); }
  .look h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--ink); margin-block: 12px 10px; }
  .look__rate { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .92rem; }
  .look__price { font-family: var(--serif); font-size: 2rem; color: var(--berry); margin-block: 10px 2px; }
  .look__price small { font-family: var(--round); font-size: .78rem; color: var(--muted); margin-inline-start: 8px; }
  .look__lede { font-size: 1.05rem; margin-block: 12px 18px; }
  .look__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 18px; }
  .look__chips span { border: 2px solid var(--ink); border-radius: 99px; padding: .2em 1em; font-size: .86rem; font-weight: 700; }
  .look__chips span:first-child { background: var(--ink); color: #fff; }
  .look .stamp { max-inline-size: 380px; }
  .look__perks { list-style: none; padding: 0; margin-block-start: 18px; display: grid; gap: 6px; font-size: .9rem; color: var(--muted); }
  .look__perks li::before { content: "✦ "; color: var(--rose); }
  .folds { margin-block-start: 22px; border-block-start: 2px solid var(--blush-soft); }
  .folds details { border-block-end: 2px solid var(--blush-soft); }
  .folds summary { list-style: none; cursor: pointer; font-weight: 800; padding: 14px 30px 14px 0; position: relative; }
  .folds summary::-webkit-details-marker { display: none; }
  .folds summary::after { content: "+"; position: absolute; inset-inline-end: 4px; inset-block-start: 8px; font-size: 1.5rem; color: var(--ink); }
  .folds details[open] summary::after { content: "–"; }
  .folds ul { padding-inline-start: 1.2em; padding-block-end: 14px; }
  .folds p { padding-block-end: 14px; color: var(--muted); }

  .alt-rows { padding-block: 40px; display: grid; gap: 50px; }
  .alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
  .alt-row:nth-child(even) > :first-child { order: 2; }
  .alt-row h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--blush); -webkit-text-stroke: .6px var(--rose); margin-block-end: 12px; }
  .alt-row img { border-radius: 30px; }
  .alt-row__pic { background: var(--blush); border-radius: 30px; }
  @media (max-width: 800px) { .alt-row { grid-template-columns: 1fr; gap: 20px; } .alt-row:nth-child(even) > :first-child { order: 0; } }

  .included { padding-block: 20px 50px; }
  .included__box { border: 4px solid var(--blush); border-radius: 60px; padding: clamp(28px, 5vw, 60px); display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; }
  .included h2 { font-size: clamp(2rem, 5vw, 3.2rem); color: var(--blush); -webkit-text-stroke: .8px var(--rose); }
  .included ul { list-style: none; padding: 0; display: grid; gap: 6px; }
  .included li::before { content: "1 ×"; display: none; }
  @media (max-width: 760px) { .included__box { grid-template-columns: 1fr; border-radius: 40px; } }

  .pdp-voices { padding-block: 30px 40px; }
  .pdp-voices h2 { text-align: center; color: #6A2C9C; color: var(--berry); font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
  .pdp-voices__sum { display: flex; justify-content: center; align-items: center; gap: 10px; margin-block: 8px 24px; color: var(--muted); }
  .pdp-voices .voices__grid .voice { border: 2px solid var(--blush-soft); }

  .keep-going { padding-block: 0 60px; }
  .keep-going__band { background: var(--lime); border-radius: 0 0 40px 40px; padding: 10px clamp(18px, 4vw, 40px) 40px; }
  .keep-going .wave { block-size: 40px; }
  .keep-going h2 { color: #fff; text-align: center; font-size: clamp(1.7rem, 3.6vw, 2.3rem); text-shadow: 0 2px 10px rgba(74,10,48,.25); margin-block: 8px 24px; }
  .keep-going .jar-card { border-color: #fff; }

  /* ---------- text pages ---------- */
  .page-head { background: var(--blush); padding-block: 10px 0; }
  .page-head__inner { padding-block: 34px 40px; }
  .page-head h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); text-shadow: 0 2px 14px rgba(144,16,88,.3); }
  .page-head p { color: var(--plum); max-inline-size: 40em; margin-block-start: 10px; font-size: 1.05rem; }
  .prose { padding-block: 50px 30px; max-inline-size: 820px; }
  .prose h2 { font-size: 1.6rem; margin-block: 1.6em .5em; }
  .prose h3 { font-size: 1.2rem; color: var(--berry); margin-block: 1.2em .4em; }
  .prose p, .prose ul, .prose ol { margin-block-end: 1em; }
  .prose li { margin-block-end: .3em; }

  .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block: 30px; }
  .trio > div { background: var(--petal); border-radius: 26px; padding: 22px; }
  .trio b { display: block; font-family: var(--serif); font-size: 2rem; color: var(--rose); }
  @media (max-width: 700px) { .trio { grid-template-columns: 1fr; } }
  .doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-block: 24px 30px; }
  .doors a, .doors > div { display: block; text-decoration: none; background: #fff; border: 3px solid var(--blush); border-radius: 26px; padding: 20px; color: var(--ink); }
  .doors a:hover { border-color: var(--rose); }
  .doors b { display: block; color: var(--rose); font-size: 1.1rem; margin-block-end: 4px; }
  .note-card { background: var(--lime-soft); border-radius: 26px; padding: 22px 26px; margin-block: 20px; }
  .toc { background: var(--petal); border-radius: 22px; padding: 18px 24px; margin-block: 10px 30px; }
  .toc ol { margin: 0; padding-inline-start: 1.3em; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block: 20px; }
  .two-col > div { border-radius: 22px; padding: 20px; }
  .two-col > div:first-child { background: var(--lime-soft); }
  .two-col > div:last-child { background: var(--blush-soft); }
  @media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
  .rules { counter-reset: r; list-style: none; padding: 0; display: grid; gap: 14px; }
  .rules li { counter-increment: r; background: #fff; border: 2px solid var(--blush); border-radius: 22px; padding: 18px 20px 18px 74px; position: relative; }
  .rules li::before { content: counter(r, decimal-leading-zero); position: absolute; inset-inline-start: 18px; inset-block-start: 14px; font-family: var(--serif); font-size: 1.6rem; color: var(--rose); }
  .who { inline-size: 100%; border-collapse: collapse; margin-block: 20px; font-size: .95rem; }
  .who th, .who td { text-align: start; padding: 12px 14px; border-block-end: 2px dashed var(--blush-soft); vertical-align: top; }
  .who th { background: var(--rose); color: #fff; }
  @media (max-width: 640px) { .who thead { display: none; } .who tr { display: grid; padding-block: 8px; } .who td { border: 0; padding: 4px 6px; } .who td:first-child { font-weight: 800; color: var(--berry); } }

  /* ---------- guides ---------- */
  .notes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; padding-block: 40px 60px; }
  .notes-list a { display: block; text-decoration: none; color: var(--ink); background: #fff; border: 3px solid var(--blush); border-radius: 30px; overflow: hidden; }
  .notes-list img { aspect-ratio: 5/3; object-fit: cover; inline-size: 100%; }
  .notes-list div { padding: 18px 20px 22px; }
  .notes-list h2 { font-size: 1.3rem; }
  .notes-list p { color: var(--muted); font-size: .92rem; margin-block-start: 6px; }
  .guide-figure { border-radius: 30px; overflow: hidden; margin-block: 24px; }
  .pick { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; background: var(--petal); border-radius: 24px; padding: 14px; margin-block: 16px; }
  .pick img { aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 18px; }
  .pick .stamp { max-inline-size: 240px; margin-block-start: 8px; }
  @media (max-width: 520px) { .pick { grid-template-columns: 1fr; } .pick img { inline-size: 140px; } }
}

@layer pages{.gallery #v1:checked~.gallery__stage .gallery__s1{opacity:1}.gallery #v1:checked~.gallery__thumbs label[for=v1]{border-color:var(--rose)}.gallery #v2:checked~.gallery__stage .gallery__s2{opacity:1}.gallery #v2:checked~.gallery__thumbs label[for=v2]{border-color:var(--rose)}.gallery #v3:checked~.gallery__stage .gallery__s3{opacity:1}.gallery #v3:checked~.gallery__thumbs label[for=v3]{border-color:var(--rose)}.gallery #v4:checked~.gallery__stage .gallery__s4{opacity:1}.gallery #v4:checked~.gallery__thumbs label[for=v4]{border-color:var(--rose)}.gallery #v5:checked~.gallery__stage .gallery__s5{opacity:1}.gallery #v5:checked~.gallery__thumbs label[for=v5]{border-color:var(--rose)}.gallery #v6:checked~.gallery__stage .gallery__s6{opacity:1}.gallery #v6:checked~.gallery__thumbs label[for=v6]{border-color:var(--rose)}}