/* Clarivelle Divine Gallery: "Peel & Stick". The retro badge logo becomes the page: an arched CLARIVELLE badge, every product a die-cut sticker on a colour-blocked sheet, and each one you peel flies into a paper shopping bag that wears your stickers. */
:root {
  --forest: #223d00;
  --forest-2: #3a5a14;
  --cream: #f5e9d6;
  --paper: #fffaf1;
  --mustard: #e8a82a;
  --mustard-soft: #f6d27a;
  --tomato: #e0533a;
  --tomato-soft: #f6b39f;
  --pink: #f4a6b8;
  --pink-soft: #f9d3dc;
  --kraft: #c9965e;
  --kraft-deep: #9c6b3a;
  --ink: #1f2a12;
  --muted: #5b6148;
  --line: rgba(34, 61, 0, .16);
  --line-strong: rgba(34, 61, 0, .32);
  --error: #a3261b;
  --display: 'Titan One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --text: 'Gabarito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Yellowtail', cursive;
  --sticker-shadow: drop-shadow(0 2px 0 rgba(34, 61, 0, .12)) drop-shadow(0 10px 14px rgba(34, 61, 0, .16));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1.0625rem/1.6 var(--text); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; }
.wrap { width: min(1280px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--forest); color: var(--cream); padding: .7rem 1rem; font-weight: 700; }
.skip-link:focus { top: 12px; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
[hidden] { display: none !important; }

.kicker { font: 700 .8rem/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--tomato); margin-bottom: .8rem; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.04; color: var(--forest); letter-spacing: .005em; }
h2 { font-size: clamp(2.1rem, 4.8vw, 3.5rem); }
h2 em { font-style: normal; color: var(--tomato); }
.lede { font-size: 1.15rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8rem 1.6rem; border-radius: 999px; background: var(--forest); color: var(--cream); border: 3px solid var(--forest); text-decoration: none; font: 700 1rem/1.2 var(--text); box-shadow: 0 4px 0 #0f1c00; transition: transform .15s, box-shadow .15s, background-color .2s; }
.btn:hover { background: var(--forest-2); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0f1c00; }
.btn--line { background: var(--paper); color: var(--forest); }
.btn--line:hover { background: #fff; }

/* Header. Solid and unfiltered so the fixed mobile menu is never trapped. */
.header { position: sticky; top: 0; z-index: 60; background: var(--cream); border-bottom: 3px solid var(--forest); }
.nav { display: flex; align-items: center; gap: 1rem; min-height: 76px; }
.brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; text-decoration: none; }
.brand .mark { width: 48px; height: auto; }
.word { display: flex; flex-direction: column; line-height: 1; }
.word span:first-child { font: 400 1.35rem/1 var(--display); color: var(--forest); letter-spacing: .04em; }
.word span:last-child { font: 700 .7rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--tomato); margin-top: .3rem; }
.nav-list { display: flex; align-items: center; gap: clamp(.4rem, 1.2vw, .9rem); }
.nav-link { display: inline-block; padding: .45rem .8rem; border-radius: 999px; font: 600 .95rem/1 var(--text); text-decoration: none; color: var(--forest); transition: background-color .2s, transform .2s; }
.nav-link:hover { background: var(--mustard-soft); transform: rotate(-2deg); }
.nav-close-li { display: none; }
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: .2rem .4rem .2rem .3rem; background: none; border: 0; color: var(--forest); font: 700 1rem/1 var(--text); }
.bag { position: relative; width: 44px; height: 44px; margin-top: 6px; background: linear-gradient(170deg, var(--kraft) 0 70%, var(--kraft-deep)); border-radius: 3px 3px 6px 6px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); }
.bag::before { content: ''; position: absolute; left: 50%; top: -11px; width: 22px; height: 16px; margin-left: -11px; border: 3px solid var(--kraft-deep); border-bottom: 0; border-radius: 12px 12px 0 0; }
.bag::after { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: rgba(0, 0, 0, .12); }
.bag-stickers { position: absolute; inset: 0; }
.bag-stickers img { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transform: rotate(var(--r)); }
.bag-stickers img:nth-child(1) { left: 3px; top: 10px; }
.bag-stickers img:nth-child(2) { right: 3px; top: 14px; }
.bag-stickers img:nth-child(3) { left: 11px; bottom: 3px; }
.bag-stickers img:nth-child(4) { right: 6px; bottom: 2px; }
.cart-count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .35rem; border-radius: 999px; background: var(--tomato); color: #fff; font-size: .9rem; }
.cart-btn.stuck .bag { animation: thud .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes thud { 30% { transform: translateY(3px) scale(1.06, .94); } }
.nav-toggle, .nav-close { display: none; width: 48px; height: 48px; place-items: center; background: var(--paper); border: 3px solid var(--forest); border-radius: 50%; color: var(--forest); }
.back-link { margin-left: auto; font-weight: 700; color: var(--forest); }
@media (max-width: 979px) {
  .nav-toggle { display: grid; flex: 0 0 auto; }
  .nav-list { display: none; }
  .nav-list.open { display: flex; position: fixed; inset: 0; z-index: 200; height: 100dvh; overflow-y: auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: .6rem; padding: 6rem 1.6rem 3rem; background: var(--forest); }
  .nav-list.open .nav-link { font: 400 2.3rem/1.15 var(--display); color: var(--cream); padding: .3rem .9rem; }
  .nav-list.open .nav-link:hover { background: var(--tomato); }
  .nav-list.open .nav-close-li { display: block; position: absolute; top: 14px; right: 16px; }
  .nav-close { display: grid; }
}
@media (max-width: 460px) { .cart-word { display: none; } .word span:first-child { font-size: 1.15rem; } .brand .mark { width: 40px; } .nav { gap: .5rem; } }

/* Hero: the badge */
.hero { position: relative; padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3.5rem, 7vw, 5.5rem); overflow: clip; background: radial-gradient(circle at 50% 38%, var(--paper) 0 28%, transparent 62%), var(--cream); }
.badge { position: relative; width: min(1000px, 100%); margin-inline: auto; aspect-ratio: 1000 / 600; }
.badge-arch { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; overflow: visible; }
.arch-text { font: 400 132px var(--display); fill: var(--forest); letter-spacing: 6px; }
.badge-photo { position: absolute; left: 25%; width: 50%; top: 30%; bottom: 0; padding: 10px; background: #fff; border-radius: 50% 50% 22px 22px / 34% 34% 22px 22px; filter: var(--sticker-shadow); transform: rotate(-1.5deg); }
.badge-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% 50% 14px 14px / 33% 33% 14px 14px; }
.roundel { position: absolute; display: grid; place-items: center; align-content: center; text-align: center; border-radius: 50%; border: 4px solid var(--forest); background: var(--paper); color: var(--forest); filter: var(--sticker-shadow); }
.roundel--left { left: 5%; bottom: 6%; width: clamp(84px, 15%, 150px); aspect-ratio: 1; transform: rotate(-10deg); font: 700 clamp(.6rem, 1.2vw, .85rem)/1.15 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.roundel--left b { font: 400 clamp(1.2rem, 3vw, 2.2rem)/1 var(--display); letter-spacing: .02em; text-transform: none; }
.roundel--right { right: 4%; bottom: 10%; width: clamp(96px, 18%, 176px); aspect-ratio: 1; transform: rotate(8deg); background: var(--mustard); border-color: var(--forest); }
.roundel--right b { font: 700 clamp(.6rem, 1.3vw, .9rem)/1 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.roundel--right i { font: 400 clamp(1.3rem, 3.2vw, 2.4rem)/1 var(--script); font-style: normal; }
.badge-foot { margin-top: .8rem; text-align: center; font: 400 clamp(1.9rem, 6vw, 4.6rem)/1 var(--display); color: var(--forest); letter-spacing: .06em; }
.hero-copy { max-width: 46rem; margin: 1.6rem auto 0; text-align: center; }
.hero-sub { display: inline-block; padding: .35rem 1rem; border-radius: 999px; background: var(--forest); color: var(--cream); font: 700 .85rem/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.hero-copy p + p { margin-top: .8rem; }
.hero-copy .lede { color: var(--forest); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.6rem; }
.hero-note { font-family: var(--script); font-size: 1.45rem; color: var(--tomato); }

/* Scattered retro stickers */
.deco { position: absolute; z-index: 1; display: grid; place-items: center; filter: var(--sticker-shadow); pointer-events: none; }
.deco--burst { left: 4%; top: 13%; width: 118px; height: 118px; background: var(--tomato); color: #fff; font: 400 1.5rem/1 var(--display); transform: rotate(-14deg); clip-path: polygon(50% 0, 61% 14%, 79% 6%, 81% 24%, 98% 28%, 88% 44%, 100% 58%, 83% 66%, 86% 84%, 67% 82%, 57% 98%, 45% 85%, 28% 96%, 24% 78%, 6% 76%, 13% 59%, 0 47%, 15% 36%, 8% 18%, 27% 18%, 36% 2%); }
.deco--pill { right: 5%; top: 9%; padding: .55rem 1.1rem; border-radius: 999px; background: var(--pink); color: var(--forest); border: 4px solid #fff; font: 700 .85rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; transform: rotate(9deg); }
.deco--heart { left: 12%; bottom: 30%; width: 64px; height: 58px; background: var(--pink); transform: rotate(-12deg); clip-path: path('M32 56 C 6 38 0 22 6 12 C 14 0 28 4 32 14 C 36 4 50 0 58 12 C 64 22 58 38 32 56 Z'); }
.deco--peel { right: 9%; bottom: 34%; width: 92px; height: 92px; border-radius: 50%; background: #fff; color: var(--forest); font: 400 1.05rem/1.05 var(--display); text-align: center; transform: rotate(12deg); background-image: linear-gradient(135deg, transparent 72%, #e3dccd 72% 78%, var(--cream) 78%); }
.deco--star { left: 47%; top: 3%; width: 46px; height: 46px; background: var(--mustard); transform: rotate(18deg); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 98%, 50% 76%, 20% 98%, 30% 60%, 0 38%, 38% 36%); }
@media (max-width: 899px) { .deco--heart, .deco--peel, .deco--star { display: none; } .deco--burst { width: 80px; height: 80px; font-size: 1rem; top: 3%; left: 2%; } .deco--pill { top: 2%; right: 2%; font-size: .7rem; padding: .4rem .7rem; border-width: 3px; } .badge { margin-top: 2.6rem; } }
@media (prefers-reduced-motion: no-preference) {
  .badge-photo { animation: stick-on .9s cubic-bezier(.3, 1.4, .5, 1) .15s backwards; }
  .deco, .roundel { animation: stick-on .8s cubic-bezier(.3, 1.4, .5, 1) backwards; }
  .deco--pill { animation-delay: .35s; } .deco--heart { animation-delay: .5s; } .deco--peel { animation-delay: .6s; } .deco--star { animation-delay: .45s; } .roundel--left { animation-delay: .7s; } .roundel--right { animation-delay: .8s; }
  @keyframes stick-on { from { opacity: 0; scale: 1.25; } }
}

/* Sheets */
.sheets { padding: clamp(4rem, 8vw, 6.5rem) 0; background: var(--paper); border-top: 3px solid var(--forest); }
.sheets-head { display: grid; gap: 1rem; align-items: end; }
.sheets-head > p { color: var(--muted); max-width: 36rem; }
@media (min-width: 900px) { .sheets-head { grid-template-columns: 1.1fr 1fr; gap: 3rem; } }
.tabs { margin-top: 2rem; }
.tabs ul { display: flex; flex-wrap: wrap; gap: .6rem; }
.tab { display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .4rem .5rem .4rem 1.1rem; border-radius: 999px; border: 3px solid var(--forest); text-decoration: none; font: 700 1rem/1 var(--text); color: var(--forest); box-shadow: 0 3px 0 var(--forest); transition: transform .2s; }
.tab span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; background: var(--forest); color: var(--cream); font-size: .85rem; }
.tab:hover { transform: rotate(-3deg) translateY(-2px); }
.tab--pink { background: var(--pink-soft); } .tab--mustard { background: var(--mustard-soft); } .tab--tomato { background: var(--tomato-soft); } .tab--forest { background: var(--forest); color: var(--cream); } .tab--forest span { background: var(--cream); color: var(--forest); }
.sheet-stack { display: grid; gap: 1.8rem; margin-top: 2rem; }
.sheet { position: relative; padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: 22px; border: 3px solid var(--forest); box-shadow: 8px 8px 0 var(--forest); scroll-margin-top: 100px; }
.sheet::before { content: ''; position: absolute; left: 22px; right: 22px; top: 14px; border-top: 2px dashed rgba(34, 61, 0, .35); }
.sheet--pink { background: var(--pink-soft); } .sheet--mustard { background: var(--mustard-soft); } .sheet--tomato { background: var(--tomato-soft); }
.sheet--forest { background: var(--forest); color: var(--cream); box-shadow: 8px 8px 0 var(--mustard); }
.sheet--forest::before { border-top-color: rgba(245, 233, 214, .35); }
.sheet--forest h3, .sheet--forest h4, .sheet--forest .item-price { color: var(--cream); }
.sheet--forest .item-desc, .sheet--forest .stock, .sheet--forest .sheet-head p:last-child { color: #d9dcc6; }
.sheet-head { display: grid; gap: .3rem; margin: .6rem 0 1.6rem; }
.sheet-label { font: 700 .78rem/1.3 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--tomato); }
.sheet--tomato .sheet-label { color: var(--forest); } .sheet--forest .sheet-label { color: var(--mustard); }
.sheet-head h3 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.sheet-head p:last-child { color: var(--muted); }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem .9rem; }
@media (min-width: 700px) { .sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 1.4rem; } }
@media (min-width: 1100px) {
  #sheet-home .sheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sheet-pair { display: grid; grid-template-columns: 3fr 2fr; gap: 1.8rem; align-items: stretch; }
  .sheet-pair .sheet-grid { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
}
@media (max-width: 1099px) { .sheet-pair { display: grid; gap: 1.8rem; } }
@media (max-width: 699px) { .sheet-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 62%; justify-self: center; } }

/* The sticker */
.product-card { display: flex; flex-direction: column; }
.sticker { position: relative; width: min(220px, 100%); margin: 0 auto .9rem; aspect-ratio: 1; filter: var(--sticker-shadow); transform: rotate(var(--r)); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.kiss { position: absolute; inset: -7px; border: 2px dashed rgba(34, 61, 0, .28); border-radius: inherit; pointer-events: none; }
.sheet--forest .kiss { border-color: rgba(245, 233, 214, .3); }
.sticker-face { position: absolute; inset: 0; padding: 9px; background: #fff; overflow: hidden; }
.sticker-face img { width: 100%; height: 100%; object-fit: cover; }
.sticker--circle, .sticker--circle .sticker-face, .sticker--circle .sticker-face img, .sticker--circle .kiss { border-radius: 50%; }
.sticker--squircle, .sticker--squircle .sticker-face, .sticker--squircle .kiss { border-radius: 30%; } .sticker--squircle .sticker-face img { border-radius: 26%; }
.sticker--arch, .sticker--arch .sticker-face, .sticker--arch .kiss { border-radius: 50% 50% 18px 18px; } .sticker--arch .sticker-face img { border-radius: 50% 50% 12px 12px; }
.sticker--oval { aspect-ratio: 5 / 6; } .sticker--oval, .sticker--oval .sticker-face, .sticker--oval .kiss, .sticker--oval .sticker-face img { border-radius: 50%; }
.sticker--scallop .sticker-face { clip-path: polygon(50% 0%, 59% 3%, 67% 1%, 74% 6%, 82% 7%, 86% 14%, 93% 18%, 94% 26%, 99% 33%, 97% 41%, 100% 50%, 97% 59%, 99% 67%, 94% 74%, 93% 82%, 86% 86%, 82% 93%, 74% 94%, 67% 99%, 59% 97%, 50% 100%, 41% 97%, 33% 99%, 26% 94%, 18% 93%, 14% 86%, 7% 82%, 6% 74%, 1% 67%, 3% 59%, 0% 50%, 3% 41%, 1% 33%, 6% 26%, 7% 18%, 14% 14%, 18% 7%, 26% 6%, 33% 1%, 41% 3%); }
.sticker--scallop .sticker-face img { border-radius: 50%; }
.sticker--scallop .kiss { border-radius: 50%; }
.sticker--flower .sticker-face { clip-path: polygon(50% 0, 63% 13%, 82% 9%, 85% 28%, 100% 38%, 90% 53%, 97% 71%, 79% 77%, 73% 95%, 55% 88%, 38% 99%, 30% 81%, 11% 79%, 13% 61%, 0 49%, 13% 37%, 9% 19%, 28% 16%, 37% 0); padding: 11%; }
.sticker--flower .sticker-face img { border-radius: 50%; }
.sticker--flower .kiss { border-radius: 50%; inset: -2px; }
.curl { position: absolute; right: 6%; bottom: 6%; width: 0; height: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0) 49%, #e9e2d2 50%, #fff 74%); border-radius: 0 0 0 100%; box-shadow: -3px -3px 6px rgba(0, 0, 0, .14); transition: width .3s, height .3s; }
.product-card:hover .sticker, .product-card:focus-within .sticker { transform: rotate(0deg) translateY(-4px); }
.product-card:hover .curl, .product-card:focus-within .curl { width: 34px; height: 34px; }
.product-card.peeling .sticker { animation: peel .6s ease; }
@keyframes peel { 30% { transform: rotate(6deg) translateY(-12px) scale(1.04); } }
.flying { position: fixed; z-index: 400; border-radius: 50%; border: 6px solid #fff; object-fit: cover; pointer-events: none; box-shadow: 0 10px 20px rgba(0, 0, 0, .2); transition: transform .75s cubic-bezier(.55, -0.2, .4, 1), opacity .75s; }
.product-card.in-cart .sticker::after { content: '✓'; position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tomato); color: #fff; font-weight: 700; border: 3px solid #fff; }
.item-body { display: flex; flex-direction: column; flex: 1; text-align: center; }
.item-body h4 { font: 400 1.12rem/1.2 var(--display); color: var(--forest); }
.item-desc { margin-top: .3rem; font-size: .92rem; line-height: 1.45; color: var(--muted); }
.buy { margin-top: auto; padding-top: .8rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .8rem; }
.item-price, .price { font: 700 1.2rem/1 var(--text); color: var(--forest); }
.cur { margin-right: .04em; }
.add-btn { min-height: 44px; padding: .5rem 1rem; border-radius: 999px; background: var(--forest); color: var(--cream); border: 3px solid var(--forest); font: 700 .92rem/1 var(--text); box-shadow: 0 3px 0 #0f1c00; transition: transform .15s; }
.add-btn:hover { transform: translateY(-2px) rotate(-2deg); }
.sheet--forest .add-btn { background: var(--mustard); border-color: var(--mustard); color: var(--forest); box-shadow: 0 3px 0 #9a6a10; }
.stepper { display: inline-flex; align-items: center; border-radius: 999px; background: #fff; border: 3px solid var(--forest); color: var(--forest); }
.stepper button, .qty button { display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 0; border-radius: 50%; }
.stepper button:hover, .qty button:hover { background: var(--mustard-soft); }
.stepper button:disabled, .qty button:disabled { opacity: .35; cursor: not-allowed; }
.stepper output { min-width: 2ch; text-align: center; font-weight: 700; }
.stock { margin-top: .45rem; font-size: .82rem; color: var(--muted); }
@media (max-width: 559px) { .item-desc { font-size: .86rem; } .buy { flex-direction: column; } .add-btn { width: 100%; } .stepper { width: 100%; justify-content: space-between; } }

/* Story */
.story { padding: clamp(4.5rem, 9vw, 7rem) 0; }
.story-grid { display: grid; gap: 2.6rem; align-items: center; }
.sticker-photo { padding: 12px; background: #fff; border-radius: 26px; filter: var(--sticker-shadow); }
.sticker-photo img { width: 100%; border-radius: 16px; object-fit: cover; }
.story-photo { transform: rotate(-2deg); }
.story-photo img { aspect-ratio: 4 / 3; }
.story-copy h2 { margin-bottom: 1.2rem; }
.story-copy > p + p { margin-top: .9rem; color: var(--muted); }
.seals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 2rem; }
.seal { display: grid; place-items: center; align-content: center; gap: .3rem; aspect-ratio: 1; padding: 12%; border-radius: 50%; border: 4px solid #fff; text-align: center; filter: var(--sticker-shadow); }
.seal:nth-child(1) { transform: rotate(-6deg); } .seal:nth-child(2) { transform: rotate(4deg); } .seal:nth-child(3) { transform: rotate(-3deg); }
.seal b { font: 400 clamp(.95rem, 1.8vw, 1.2rem)/1.1 var(--display); color: var(--forest); }
.seal span { font-size: clamp(.72rem, 1.2vw, .85rem); line-height: 1.3; color: var(--ink); }
.seal--pink { background: var(--pink); } .seal--mustard { background: var(--mustard); } .seal--tomato { background: var(--tomato-soft); }
.mission { margin-top: 2rem; padding: 1.3rem 1.4rem; border-radius: 18px; background: var(--forest); color: var(--cream); }
.mission-tag { font: 400 1.6rem/1 var(--script); color: var(--mustard); margin-bottom: .4rem; }
@media (max-width: 479px) { .seals { grid-template-columns: 1fr; max-width: 230px; margin-inline: auto; } }
@media (min-width: 900px) { .story-grid { grid-template-columns: 1fr 1.1fr; gap: clamp(3rem, 6vw, 5rem); } }

/* Testimonials: speech-bubble stickers */
.bubbles { padding: clamp(4.5rem, 9vw, 7rem) 0; background: var(--forest); color: var(--cream); }
.bubbles h2 { color: var(--cream); }
.bubbles h2 em { color: var(--mustard); }
.bubbles .kicker { color: var(--pink); }
.bubble-row { display: grid; gap: 3rem 2rem; margin-top: 2.6rem; }
.bubble { position: relative; padding: 1.8rem 1.8rem 1.5rem; border-radius: 34px; border: 6px solid #fff; color: var(--forest); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .3)); }
.bubble::after { content: ''; position: absolute; bottom: -34px; left: 54px; width: 44px; height: 40px; background: inherit; border-right: 6px solid #fff; border-bottom: 6px solid #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bubble--pink { background: var(--pink); transform: rotate(-2deg); }
.bubble--mustard { background: var(--mustard); transform: rotate(2deg); }
.bubble--mustard::after { left: auto; right: 54px; transform: scaleX(-1); }
.bubble blockquote p { font: 400 clamp(1.25rem, 2.3vw, 1.6rem)/1.3 var(--display); }
.bubble figcaption { margin-top: 1rem; font-weight: 700; letter-spacing: .06em; }
@media (min-width: 860px) { .bubble-row { grid-template-columns: 1fr 1fr; } }

/* FAQ: the back of a sheet */
.fine-print { padding: clamp(4.5rem, 9vw, 7rem) 0; background-color: var(--paper); background-image: linear-gradient(rgba(34, 61, 0, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 61, 0, .06) 1px, transparent 1px); background-size: 28px 28px; }
.fp-grid { display: grid; gap: 2.4rem; }
.fp-sub { margin-top: .5rem; font: 400 1.5rem/1.2 var(--script); color: var(--tomato); }
.fp-photo { margin-top: 1.8rem; max-width: 360px; transform: rotate(3deg); }
.fp-photo img { aspect-ratio: 4 / 5; }
.faq-list { display: grid; gap: .8rem; align-content: start; }
.faq-list details { border-radius: 18px; background: #fff; border: 3px solid var(--forest); padding: 0 1.2rem; box-shadow: 4px 4px 0 var(--forest); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 60px; padding: 1rem 0; cursor: pointer; list-style: none; font: 400 1.15rem/1.3 var(--display); color: var(--forest); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { color: var(--tomato); transition: transform .25s; }
.faq-list details[open] summary .icon { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 1.2rem; color: var(--muted); }
@media (min-width: 900px) { .fp-grid { grid-template-columns: 1fr 1.5fr; gap: 4rem; } }

/* Visit: name-tag stickers */
.visit { padding: clamp(4.5rem, 9vw, 7rem) 0; }
.visit-grid { display: grid; gap: 2.6rem; align-items: center; }
.visit h2 { margin-bottom: 1rem; }
.open-now { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; border-radius: 999px; background: #fff; border: 3px solid var(--forest); font-weight: 700; margin-bottom: 1.6rem; }
.open-now::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--tomato); }
.open-now.is-open::before { background: #2f8a3a; }
.open-now:empty { display: none; }
.tags { font-style: normal; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.tag { border-radius: 16px; overflow: hidden; background: #fff; border: 3px solid var(--forest); box-shadow: 4px 4px 0 var(--forest); }
.tag-hello { padding: .45rem 1rem; background: var(--tomato); color: #fff; font: 400 1.05rem/1.2 var(--display); }
.tag:nth-child(2) .tag-hello { background: var(--forest); } .tag:nth-child(3) .tag-hello { background: var(--mustard); color: var(--forest); } .tag:nth-child(4) .tag-hello { background: var(--pink); color: var(--forest); }
.tag > p:not(.tag-hello) { padding: .8rem 1rem 0; overflow-wrap: anywhere; }
.tag > p:last-child { padding-bottom: 1rem; }
.tag > a { display: inline-block; margin: .5rem 1rem 1rem; font-weight: 700; color: var(--forest); }
.tag a { color: var(--forest); font-weight: 700; overflow-wrap: anywhere; text-underline-offset: 3px; }
.policy-dots { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.policy-dots li { flex: 1 1 200px; padding: 1rem 1.1rem; border-radius: 16px; background: var(--paper); border: 2px dashed var(--line-strong); font-size: .9rem; color: var(--muted); }
.policy-dots a { display: block; font: 400 1.1rem/1.2 var(--display); color: var(--forest); margin-bottom: .3rem; }
.visit-photo { transform: rotate(2deg); max-width: 460px; justify-self: center; }
.visit-photo img { aspect-ratio: 4 / 5; }
@media (min-width: 640px) { .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tag--wide { grid-column: 1 / -1; } }
@media (min-width: 980px) { .visit-grid { grid-template-columns: 1.3fr 1fr; gap: 4rem; } }

/* Footer: the backing paper left behind */
.footer { position: relative; padding: 4rem 0 2rem; background: linear-gradient(115deg, #fbf7ef 0 40%, #f1ebde 40% 46%, #fbf7ef 46%); color: var(--ink); border-top: 3px solid var(--forest); }
.footer-top { display: grid; gap: 2.4rem; }
.footer-line { display: flex; flex-direction: column; gap: 1rem; font: 400 1.7rem/1.2 var(--display); color: var(--forest); }
.footer-line em { font-style: normal; color: var(--tomato); }
.ghosts { display: flex; gap: .8rem; }
.ghosts i { display: block; width: 46px; height: 46px; border: 2px dashed rgba(34, 61, 0, .35); background: rgba(34, 61, 0, .04); }
.ghosts .g1 { border-radius: 50%; } .ghosts .g2 { border-radius: 30%; transform: rotate(-8deg); } .ghosts .g3 { border-radius: 50% 50% 8px 8px; } .ghosts .g4 { border-radius: 50%; width: 38px; height: 46px; transform: rotate(10deg); }
.footer h2 { font: 700 .8rem/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--tomato); margin-bottom: .9rem; }
.footer li + li { margin-top: .45rem; }
.footer a { text-decoration: none; overflow-wrap: anywhere; }
.footer a:hover { text-decoration: underline; color: var(--forest); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 2px dashed var(--line-strong); font-size: .88rem; color: var(--muted); }
@media (min-width: 800px) { .footer-top { grid-template-columns: 1.6fr repeat(3, 1fr); } }

/* Cart drawer: the paper shopping bag */
.cart-overlay { position: fixed; inset: 0; z-index: 150; background: rgba(34, 61, 0, .45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.cart-overlay.active { opacity: 1; visibility: visible; }
.cart-sidebar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 160; width: min(430px, 100%); display: flex; flex-direction: column; background: var(--paper); transform: translateX(100%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility .35s; }
.cart-sidebar.open { transform: none; visibility: visible; }
.cart-head { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 2rem 1.3rem 1rem; background: linear-gradient(170deg, var(--kraft), var(--kraft-deep)); color: #fff; }
.cart-head::before { content: ''; position: absolute; left: 50%; top: 8px; width: 70px; height: 24px; margin-left: -35px; border: 5px solid #7b522a; border-bottom: 0; border-radius: 40px 40px 0 0; }
.cart-head h2 { font-size: 1.7rem; color: #fff; }
.cart-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .15); border: 2px solid rgba(255, 255, 255, .6); color: #fff; }
.drawer-stickers { display: none; flex-wrap: wrap; gap: .4rem; padding: .9rem 1.3rem; background: linear-gradient(170deg, var(--kraft-deep), #8a5c30); }
.drawer-stickers.has { display: flex; }
.drawer-stickers img { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; transform: rotate(var(--r)); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.cart-items { flex: 1; overflow-y: auto; padding: .6rem 1.3rem; }
.cart-item { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 2px dashed var(--line); }
.cart-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.cart-item h3 { font: 400 1rem/1.25 var(--display); color: var(--forest); }
.cart-item-row { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; }
.qty { display: inline-flex; align-items: center; border-radius: 999px; border: 2px solid var(--forest); }
.qty button { width: 40px; height: 40px; }
.qty output { min-width: 2ch; text-align: center; font-weight: 700; }
.cart-item-sub { font-weight: 700; color: var(--forest); }
.cart-remove { margin-top: .35rem; padding: .3rem 0; background: none; border: 0; font-size: .84rem; color: var(--muted); text-decoration: underline; }
.cart-empty { padding: 3rem 0; text-align: center; }
.cart-empty p { font: 400 1.4rem/1.3 var(--display); margin-bottom: 1.2rem; color: var(--forest); }
.cart-foot { padding: 1.2rem 1.3rem 1.4rem; border-top: 3px solid var(--forest); background: var(--cream); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.cart-total .price { font-size: 1.35rem; }
.cart-foot .btn { width: 100%; }
.cart-foot p { margin-top: .8rem; font-size: .86rem; color: var(--muted); text-align: center; }

/* Order page */
.order-page { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem); }
.order-intro { max-width: 40rem; margin-bottom: 2.2rem; }
.order-intro h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); margin-bottom: .9rem; }
.order-intro .lede { color: var(--muted); }
.order { display: grid; gap: 2rem; align-items: start; }
.order-form { background: #fff; border-radius: 22px; border: 3px solid var(--forest); box-shadow: 6px 6px 0 var(--forest); padding: 2rem clamp(1.1rem, 4vw, 2.2rem); }
.order-form h2, .summary h2 { font-size: 1.8rem; margin-bottom: 1.3rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; margin-bottom: .4rem; font-weight: 700; }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: .8rem .95rem; font: 400 1rem/1.4 var(--text); color: var(--ink); background: var(--paper); border: 2px solid var(--line-strong); border-radius: 14px; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--tomato); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field-hint { margin-top: .35rem; font-size: .84rem; color: var(--muted); }
.field-error { margin-top: .35rem; font-size: .88rem; font-weight: 700; color: var(--error); }
.field-error:empty { display: none; }
.order-submit { width: 100%; margin-top: .6rem; }
.summary { background: var(--forest); color: var(--cream); border-radius: 22px; padding: 2rem clamp(1.1rem, 4vw, 2rem); box-shadow: 6px 6px 0 var(--mustard); }
.summary h2 { color: var(--cream); }
.summary table { width: 100%; border-collapse: collapse; }
.summary td { padding: .8rem 0; border-bottom: 1px dashed rgba(245, 233, 214, .3); vertical-align: top; }
.summary td small { display: block; margin-top: .2rem; color: #d9dcc6; font-size: .84rem; }
.summary td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 1rem; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.2rem; }
.summary-total .price { font-size: 1.5rem; color: var(--mustard); }
.summary-note { margin-top: 1.2rem; }
.summary-note a { color: var(--pink); text-underline-offset: 4px; }
.sent { max-width: 44rem; background: #fff; border-radius: 22px; border: 3px solid var(--forest); padding: 2.4rem clamp(1.1rem, 4vw, 2.4rem); }
.sent h2 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); margin-bottom: 1rem; }
.sent-copy { margin-top: 2rem; }
.sent-copy pre { margin-top: 1rem; padding: 1rem; background: var(--paper); border: 2px dashed var(--line-strong); border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .86rem; }
@media (min-width: 900px) { .order { grid-template-columns: 1.4fr 1fr; gap: 3rem; } .summary { position: sticky; top: 100px; } }

/* Legal pages */
.legal-head { background: var(--paper); border-bottom: 3px solid var(--forest); padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.4rem, 5vw, 3.5rem); }
.legal-head h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); }
.legal-body { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(4rem, 8vw, 6rem); }
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.6rem; margin: 2.2rem 0 .7rem; }
.legal p + p { margin-top: .9rem; }
.legal ul, .legal ol { padding-left: 1.3rem; list-style: disc; margin-top: .6rem; }
.legal ol { list-style: decimal; }
.legal li + li { margin-top: .45rem; }
.legal a { color: var(--forest); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }

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