/* NOSEWORTHY — "Sticker Park": playful premium pet brand. Sky + butter + tangerine colour blocks,
   chunky rounded type, die-cut sticker cards that tilt toward the cursor, squiggle underlines. */
:root { --sticker-edge: 0 0 0 5px #fff, 0 22px 40px -22px rgba(43, 29, 20, 0.45); }
body { font-weight: 500; }
.announce { background: var(--accent); color: var(--ink); font-weight: 700; }
.header { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.header__logo span { font-size: 1.85rem; font-weight: 700; color: var(--ink); }
.header__logo span::first-letter { color: var(--accent); }
.header__nav a { font-weight: 700; font-size: 0.95rem; }
.btn { font-weight: 800; letter-spacing: 0; box-shadow: 0 4px 0 color-mix(in srgb, var(--btn-bg) 60%, #000); }
.btn:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 7px 0 color-mix(in srgb, var(--btn-bg) 60%, #000); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--btn-bg) 60%, #000); }
.btn--ghost { box-shadow: none; background: #fff; border-width: 2px; border-color: var(--ink); }
.btn--ghost:hover { box-shadow: 0 5px 0 var(--ink); }

.hero--sticker { --hero-bg: var(--bg); min-height: min(90svh, 920px); align-items: center; overflow: hidden; }
.hero--sticker .hero__deco::before { content: ''; position: absolute; width: 58vmax; height: 58vmax; right: -14vmax; top: 50%; translate: 0 -50%; border-radius: 42% 58% 61% 39% / 45% 42% 58% 55%; background: var(--accent-soft); animation: blob 16s ease-in-out infinite alternate; }
.hero--sticker .hero__deco::after { content: ''; position: absolute; width: 22vmax; height: 22vmax; left: -6vmax; bottom: -8vmax; border-radius: 50%; background: var(--accent-3); opacity: 0.55; }
@keyframes blob { to { border-radius: 58% 42% 39% 61% / 55% 58% 42% 45%; rotate: 12deg; } }
.hero--sticker .hero__title { font-size: clamp(3.2rem, 1.5rem + 7vw, 8.4rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.035em; }
.hero--sticker .hero__title em { font-style: normal; color: var(--accent); position: relative; white-space: nowrap; }
.squiggle, .hero--sticker .hero__title em::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 0.18em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4 T30 4 T40 4' fill='none' stroke='%232B1D14' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0 / 0.9em 100%; }
.hero--sticker .hero__content { padding-block: 5rem 4rem; }
.hero--sticker .hero__text { color: var(--muted); font-weight: 500; }
.hero--sticker .hero__trust li { background: #fff; padding: 0.45rem 0.85rem; border-radius: 999px; box-shadow: 0 2px 0 rgba(43, 29, 20, 0.12); font-weight: 700; }
.sticker { border-radius: 26px; box-shadow: var(--sticker-edge); }
.sticker__media { background: var(--surface-2); border-radius: 18px; }
.sticker--1 .sticker__media { background: #FFE9B8; } .sticker--2 .sticker__media { background: #D9EEFF; } .sticker--3 .sticker__media { background: #FFD9C7; } .sticker--4 .sticker__media { background: #DDF3E6; }
.sticker__label b { color: var(--accent); }
.sticker .art__mark { font-weight: 700; }

.eyebrow { color: var(--accent); font-weight: 800; letter-spacing: 0.12em; }
.h2 { font-weight: 700; }
.h2 em { font-style: normal; color: var(--accent); }
.ticker { background: var(--accent-soft); border: 0; }
.ticker__item { font-family: var(--font-display); font-size: var(--step-1); text-transform: none; letter-spacing: 0; font-weight: 600; }
.ticker__item::after { content: '●'; color: var(--accent); opacity: 1; font-size: 0.6em; }
.ctile { box-shadow: var(--sticker-edge); transition: transform 0.5s var(--ease-spring); }
.ctile:nth-child(odd) { transform: rotate(-1.5deg); } .ctile:nth-child(even) { transform: rotate(1.5deg); }
.ctile:hover { transform: rotate(0) translateY(-6px); }
.ctile__label { background: none; color: var(--ink); top: auto; }
.ctile__label strong { background: #fff; padding: 0.35rem 0.8rem; border-radius: 14px; font-size: var(--step-1); }
.ctile__label span { background: var(--accent); padding: 0.35rem 0.75rem; border-radius: 999px; font-weight: 800; }
.card__media { box-shadow: var(--sticker-edge); }
.card:nth-child(4n+1) .card__media { background: #FFE9B8; } .card:nth-child(4n+2) .card__media { background: #D9EEFF; } .card:nth-child(4n+3) .card__media { background: #FFD9C7; } .card:nth-child(4n+4) .card__media { background: #DDF3E6; }
.card:hover .card__media { animation: wiggle 0.5s var(--ease-spring); }
@keyframes wiggle { 30% { rotate: -2deg; } 60% { rotate: 1.5deg; } }
.card__badge { background: var(--ink); color: var(--accent-soft); }
.card__title { font-weight: 800; }
.card__price { color: var(--accent); font-size: var(--step-0); font-weight: 800; }
.tile { border: 0; box-shadow: var(--sticker-edge); }
.tile:nth-child(3n) { background: #DDF3E6; } .tile:nth-child(3n+2) { background: #D9EEFF; }
.tile--accent { background: var(--accent); } .tile--dark { background: var(--ink); }
.tile__kicker { font-weight: 700; }
.section--alt { background: var(--accent-3); }
.section--surface { background: #fff; }
.section--accent { background: var(--accent); color: var(--ink); --ink: #2B1D14; --muted: #5A3A22; }
.section--accent .btn--light { --btn-bg: #2B1D14; --btn-fg: #FFF7EC; }
.seal__center { color: var(--ink); font-weight: 700; }
.reel { box-shadow: var(--sticker-edge); }
.faq summary { font-weight: 800; }
.faq details { background: #fff; border: 0; border-radius: 20px; margin-bottom: 10px; padding-inline: 1.2rem; box-shadow: 0 2px 0 rgba(43, 29, 20, 0.08); }
.faq { border: 0; }
.footer { background: var(--ink); }
.footer__word { color: var(--accent); text-transform: lowercase; }
.pill input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 800; }
.gallery__slide { border-radius: 26px; background: #D9EEFF; }
.chip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 800; }
.hero--sticker { --shader-a: #FFD45C; --shader-b: #FF6B2C; --shader-c: #F3F8FF; }
