/* Päkapiku Abipakk — soe paber, kuuseroheline ja jõuluootus.
   Avalik veeb ja tellimisvoog kasutavad sama kujunduskeelt. */
:root {
  --green: #193e32;
  --green-soft: #2d5444;
  --green-tint: #eaf0e9;
  --red: #b33b2e;
  --red-soft: #972d23;
  --cream: #f9f5ec;
  --cream-band: #f2ecdf;
  --paper: #fffcf6;
  --ink: #263b31;
  --ink-soft: #686b5e;
  --line: #dedbce;
  --gold: #b88b46;
  --gold-ink: #85612d;
  --gold-tint: #f5ecda;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 5px 20px rgba(30,49,36,.035);
  --shadow-lift: 0 14px 35px rgba(30,49,36,.10);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
h1, h2, h3, .brand strong, .price, .summary-total { font-family: var(--serif); font-optical-sizing: auto; }
h1, h2, h3 { margin: 0 0 .6em; line-height: 1.12; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: var(--green); }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 5px; }
::selection { color: var(--paper); background: var(--green); }
.muted { color: var(--ink-soft); }
.small { font-size: .88rem; }
.lead { font-size: 1.1rem; }
.wrap { width: 100%; max-width: 64rem; min-width: 0; margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.wrap-wide { max-width: 84rem; }
.narrow { max-width: 48rem; }
section.wrap { margin-block: clamp(3.5rem, 7vw, 6rem); }
.eyebrow { display: block; margin-bottom: 1.15rem; color: var(--gold-ink); font-size: .7rem; font-weight: 700; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: .8rem; padding-block: .6rem; font-size: .84rem; font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.text-link span { font-size: 1.15rem; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .8rem 1.2rem; background: var(--paper); color: var(--green); border: 2px solid var(--green); }
.skip-link:focus { top: 1rem; }

/* Päis ja nupud */
.site-head { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: 88px; padding: 1rem max(1.25rem, calc((100vw - 78rem) / 2)); background: rgba(249,245,236,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); color: var(--green); }
.brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-ink); }
.brand strong { display: block; font-size: 1.3rem; letter-spacing: -.035em; line-height: 1.4; }
.brand small { display: block; font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.site-head nav { display: flex; align-items: center; gap: 2rem; }
.site-head nav a { text-decoration: none; font-size: .8rem; font-weight: 600; }
.site-head nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-mobile, .site-head .mobile-head-cta { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 50px; padding: .8rem 1.6rem; border: 1px solid transparent; border-radius: 6px; background: var(--red); color: #fff; font: 700 .85rem/1.4 var(--sans); text-decoration: none; cursor: pointer; transition: background .18s, transform .18s; }
.btn:hover { background: var(--red-soft); transform: translateY(-2px); }
.btn span[aria-hidden] { font-size: 1.25rem; font-weight: 400; }
.btn-sm { min-height: 43px; padding: .6rem 1.1rem; font-size: .78rem; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--green-tint); border-color: var(--green-soft); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Avalöök: suur kiri ja raamitud jõuluõhtu */
.hero { position: relative; isolation: isolate; margin: 0; min-height: min(760px, calc(100svh - 88px)); padding-block: 3.8rem 5rem; overflow: hidden; background: radial-gradient(circle at 78% 18%, rgba(184,139,70,.18), transparent 28%), linear-gradient(115deg, #173a2f 0%, #21483a 55%, #17382e 100%); color: var(--cream); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,22,16,.12), transparent 48%, rgba(5,22,16,.08)), radial-gradient(circle at 14% 120%, rgba(184,139,70,.13), transparent 30%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; gap: clamp(2.5rem, 5vw, 5.5rem); }
.hero-copy { min-width: 0; padding-block: 1rem; }
.hero h1 { margin-bottom: 1.5rem; font-size: clamp(2.65rem, 4.9vw, 4.4rem); line-height: 1.04; letter-spacing: -.06em; }
.hero h1 span { display: block; }
.hero h1 span:last-child { color: #e1bd81; font-style: italic; font-weight: 600; }
.hero .lead { max-width: 41ch; margin-bottom: 1.7rem; font-size: 1rem; line-height: 1.85; color: rgba(249,245,236,.74); }
.hero-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.btn-hero { min-width: 10.5rem; min-height: 48px; padding-inline: 1.25rem; }
.btn-hero-secondary { border-color: rgba(249,245,236,.48); background: rgba(249,245,236,.06); color: var(--cream); }
.btn-hero-secondary:hover { border-color: rgba(249,245,236,.8); background: rgba(249,245,236,.13); }
.hero-note { display: block; margin-top: 1.4rem; padding-left: .8rem; border-left: 2px solid var(--gold); font-size: .75rem; line-height: 1.65; color: rgba(249,245,236,.68); max-width: 47ch; }
.hero-visual { position: relative; margin: -.75rem 0 .75rem; min-width: 0; aspect-ratio: 1.16 / 1; background: var(--green); border: 1px solid rgba(249,245,236,.16); border-radius: 46% 46% 8px 8px; isolation: isolate; box-shadow: 0 30px 65px rgba(4,20,14,.25); }
.hero-visual picture { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.hero-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 82% center; }
.hero-visual::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 25%, rgba(12,31,22,.75)); pointer-events: none; }
.hero-visual figcaption { position: absolute; z-index: 1; bottom: 4.9rem; left: 2.5rem; right: 1.5rem; color: var(--cream); }
.hero-visual figcaption > span { display: block; margin-bottom: .65rem; font-size: .68rem; letter-spacing: .07em; color: #eee0c4; }
.hero-visual figcaption strong { font: 600 clamp(1.7rem, 2.7vw, 2.5rem)/1.15 var(--serif); letter-spacing: -.025em; }
.hero-seal { position: absolute; z-index: 3; top: 1.2rem; right: -1rem; width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--gold); outline: 5px solid var(--green-soft); border-radius: 50%; background: var(--cream); color: var(--green); transform: rotate(9deg); }
.hero-seal span { font-size: .53rem; line-height: 1.8; letter-spacing: .045em; }
.hero-seal strong { font: 600 2.8rem/1.1 var(--serif); }
.advent-countdown { position: absolute; z-index: 3; bottom: -1.2rem; left: 50%; width: max-content; min-width: 0; max-width: calc(100% - 3rem); display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: center; gap: .65rem .85rem; min-height: 66px; padding: .85rem 1.35rem; border: 1px solid var(--line); background: var(--paper); color: var(--green); border-radius: 5px; box-shadow: var(--shadow); transform: translateX(-50%); }
.countdown-kicker { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.advent-countdown strong { font: 600 2.1rem/1 var(--serif); color: var(--gold-ink); }
.countdown-label { max-width: 9rem; font-size: .62rem; line-height: 1.35; color: var(--ink-soft); }
.advent-countdown.is-resting { grid-template-columns: auto auto auto; }
.advent-countdown.is-resting .countdown-label { max-width: 11rem; }
.hero-sky { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-snow { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; pointer-events: none; }
.cursor-snow { position: fixed; inset: 0; z-index: 45; width: 100vw; height: 100vh; pointer-events: none; }

/* Kollektsioon */
.trust-strip { border-block: 1px solid var(--line); background: var(--cream-band); }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 1.5rem; }
.trust-grid > span { padding-inline: 1rem; text-align: center; border-right: 1px solid #d5d2c5; }
.trust-grid > span:last-child { border: 0; }
.trust-grid strong, .trust-grid small { display: block; }
.trust-grid strong { font: 600 1.04rem/1.5 var(--serif); }
.trust-grid small { margin-top: .15rem; color: var(--ink-soft); font-size: .65rem; }
.preorder-ribbon {
  margin-block: 0 !important;
  padding-block: 1.75rem 0;
}
.preorder-ribbon-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.preorder-ribbon .eyebrow { margin-bottom: .5rem; color: var(--ink-soft); font-size: .65rem; letter-spacing: .12em; }
.preorder-ribbon h2 { margin-bottom: .55rem; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.3; text-wrap: pretty; }
.preorder-date { white-space: nowrap; }
.preorder-bonus { max-width: 66ch; margin: 0; color: var(--ink-soft); font-size: .875rem; line-height: 1.7; }
.preorder-bonus strong { color: var(--gold-ink); font-weight: 500; }
.preorder-countdown {
  display: grid;
  justify-items: center;
  min-width: 10.5rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(184,139,70,.48);
  border-radius: 10px;
  background: rgba(255,252,246,.86);
  color: var(--green);
  text-align: center;
  box-shadow: 0 8px 22px rgba(60,43,20,.07);
}
.preorder-countdown strong, .preorder-countdown [data-preorder-countdown-value] {
  font: 600 1.55rem/1.2 var(--serif);
  color: var(--gold-ink);
}
.preorder-countdown span:last-child { font-size: .68rem; color: var(--ink-soft); }
.preorder-countdown--inline {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-items: start;
  gap: .25rem;
  min-width: 0;
  margin-left: .45rem;
  padding: .15rem .45rem;
  vertical-align: baseline;
}
.preorder-countdown--inline [data-preorder-countdown-value] { font-size: 1rem; }
.preorder-countdown--ribbon {
  min-width: 0;
  gap: .4rem;
  padding: .5rem 0 .5rem 2rem;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.preorder-countdown--ribbon [data-preorder-countdown-value] { color: var(--green); font: 600 1.125rem/1.4 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.preorder-countdown--ribbon [data-preorder-countdown-label] { font-size: .75rem; }
.home-band { position: relative; isolation: isolate; margin-block: 0 !important; padding-block: clamp(4rem, 7vw, 6rem); }
.home-band::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--band-bg, var(--cream)); box-shadow: 0 0 0 100vmax var(--band-bg, var(--cream)); clip-path: inset(0 -100vmax); }
.home-band--paper { --band-bg: var(--paper); }
.home-band--cream { --band-bg: var(--cream); }
.section-heading { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 3rem; margin-bottom: 2.5rem; }
.section-heading h2 { margin: 0; }
.section-intro { min-width: 0; font-size: .9rem; color: var(--ink-soft); text-wrap: pretty; }
.section-intro em { white-space: nowrap; }
.section-intro em { color: var(--green); font-style: normal; font-weight: 600; }
.pack-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.1rem; }
.pack { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
a.pack:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--pack-accent); }
.pack--mix { --pack-accent: #ba8b3d; --pack-accent-ink: #85612d; --pack-wash: #f6edd9; }
.pack--soko { --pack-accent: #79513b; --pack-wash: #f3e9df; }
.pack--nosoko { --pack-accent: #a34c68; --pack-wash: #f6e9ed; }
.pack--segasumma { --pack-accent: #426a80; --pack-wash: #e9f0f3; }
.pack-art { position: relative; aspect-ratio: 1.25; flex: none; background: var(--pack-wash); overflow: hidden; border-bottom: 3px solid var(--pack-accent); }
.pack-art picture { display: block; width: 100%; height: 100%; }
.pack-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
a.pack:hover .pack-art img { transform: scale(1.025); }
.pack-body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.15rem 1.2rem; }
.pack h3 { margin-bottom: .6rem; font-size: 1.28rem; line-height: 1.2; letter-spacing: -.04em; }
.pack .tagline { color: var(--pack-accent-ink, var(--pack-accent)); font-size: .73rem; font-weight: 700; min-height: 2.5em; margin-bottom: .8rem; }
.pack-traits { list-style: none; margin: 0 0 .9rem; padding: 0; }
.pack-traits li { display: inline-block; padding: .25rem .5rem; border-radius: 3px; background: var(--pack-wash); color: var(--ink); font-size: .63rem; }
.pack-desc { flex: 1; margin-bottom: 1.4rem; color: var(--ink-soft); font-size: .76rem; line-height: 1.75; }
.pack-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.pack .price { font-size: 1.65rem; font-weight: 600; line-height: 1.3; letter-spacing: -.04em; }
.pack .price s { display: block; margin-bottom: .1rem; color: var(--ink-soft); font: .72rem/1.3 var(--sans); }
.pack-cta { display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem; font-size: .72rem; line-height: 1.4; font-weight: 600; color: var(--green); white-space: nowrap; }
.pack-cta-arrow { display: block; flex: 0 0 18px; width: 18px; height: 18px; transition: transform .18s; }
@media (hover: hover) {
  a.pack:hover .pack-cta-arrow { transform: translateX(3px); }
}
.pack .stock { margin: .7rem 0 0; font-size: .72rem; color: var(--ink-soft); }
.pack.sold-out { opacity: .6; }
.badge-out { display: inline-block; padding: .2rem .6rem; background: var(--ink-soft); color: #fff; border-radius: 3px; font-size: .7rem; }

/* Tooteleht */
.product-page { --product-accent: var(--pack-accent, var(--gold)); }
.product-breadcrumb { padding-top: 1.5rem; }
.product-breadcrumb a { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink-soft); font-size: .75rem; font-weight: 700; text-decoration: none; }
.product-breadcrumb a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
.product-hero { display: grid; grid-template-columns: minmax(0,1.42fr) minmax(20rem,.72fr); align-items: start; gap: clamp(2.2rem,5vw,5.5rem); margin-block: 1.5rem 0 !important; }
.product-photo { min-width: 0; margin: 0; padding: .65rem; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.product-photo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.product-photo figcaption { padding: .65rem .25rem 0; color: var(--ink-soft); font-size: .62rem; line-height: 1.5; text-align: center; }
.product-copy h1 { margin-bottom: .25rem; font-size: clamp(2.5rem,4.3vw,4.25rem); color: var(--green); }
.product-tagline { margin-bottom: 1.4rem; color: var(--pack-accent-ink, var(--product-accent)); font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.product-intro { color: var(--ink-soft); font-size: .94rem; line-height: 1.8; }
.product-highlight { display: grid; gap: .15rem; margin: 1.5rem 0; padding: .9rem 1rem; background: var(--pack-wash, var(--gold-tint)); border-left: 3px solid var(--product-accent); }
.product-highlight span { color: var(--ink-soft); font-size: .61rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.product-highlight strong { font: 600 1.08rem/1.4 var(--serif); }
.product-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.product-price { display: grid; flex: 1 0 11rem; gap: .2rem; line-height: 1.25; }
.product-price s { color: var(--ink-soft); font-size: .72rem; }
.product-price strong { font: 600 2rem/1.2 var(--serif); }
.product-price small { color: var(--ink-soft); font-size: .72rem; line-height: 1.5; text-wrap: pretty; }
.product-buy .btn { flex: 1 0 auto; }
.product-unavailable { display: inline-block; padding: .65rem .8rem; font-size: .72rem; font-weight: 700; }
.product-stock { margin-top: .7rem; color: var(--red-soft); font-size: .7rem; font-weight: 700; text-align: right; }
.product-preorder-note {
  margin-top: .9rem;
  padding: .8rem .95rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  background: var(--gold-tint);
  color: var(--ink);
  font-size: .8rem;
  line-height: 1.6;
}
.product-contents-band { padding-block: clamp(4rem,7vw,6rem); background: var(--green); color: var(--cream); }
.product-contents { display: grid; grid-template-columns: minmax(17rem,.62fr) minmax(0,1.38fr); gap: clamp(3rem,7vw,7rem); }
.product-contents-heading { max-width: 29rem; }
.product-contents-heading .eyebrow { color: #d8b47d; }
.product-contents-heading h2 { font-size: clamp(2.3rem,4vw,3.6rem); }
.product-contents-heading p { color: #ccd5cb; font-size: .84rem; }
.candy-list { counter-reset: candy; display: grid; grid-auto-flow: column; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(12,auto); gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
.candy-list li { counter-increment: candy; display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; padding: .48rem 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .76rem; }
.candy-list li::before { content: counter(candy, decimal-leading-zero); color: #d8b47d; font: 600 .72rem var(--serif); }
.possible-items { display: grid; gap: .8rem; align-content: center; margin: 0; padding: 0; list-style: none; }
.possible-items li { display: grid; gap: .15rem; padding: 1.15rem 1.25rem; border: 1px solid rgba(255,255,255,.2); border-left: 3px solid #d8b47d; border-radius: 5px; }
.possible-items span { color: #adbcb0; font-size: .59rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.possible-items strong { font: 600 1.2rem/1.4 var(--serif); }
.other-products { margin-block: 0 !important; padding-block: clamp(4rem,7vw,6rem); }
.other-products .section-heading { margin-bottom: 1.5rem; }
.other-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.other-product { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .18s, transform .18s; }
.other-product:hover { border-color: var(--pack-accent); transform: translateY(-2px); }
.other-product strong, .other-product small { display: block; }
.other-product strong { font: 600 .92rem/1.35 var(--serif); }
.other-product small { margin-top: .15rem; color: var(--ink-soft); font-size: .62rem; }

/* Lugu, pere ja Pärteli kirjad */
.showcase, .how-section, .letters-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.showcase-text > p, .how-text > p, .letters-text > p { font-size: .91rem; color: var(--ink-soft); }
.showcase-photo { position: relative; padding: 0 1.2rem 1.4rem 0; }
.showcase-photo::before { content: ""; position: absolute; z-index: -1; inset: 1.5rem 0 0 1.5rem; border: 1px solid var(--gold); border-radius: 8px; }
.showcase-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1.07; object-fit: cover; border-radius: 8px; }
.simple-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; list-style: none; margin: 1.8rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--line); }
.simple-steps li > * { display: block; }
.simple-steps li > span { margin-bottom: .6rem; font: 600 1.2rem var(--serif); color: var(--gold-ink); }
.simple-steps strong { font-size: .75rem; margin-bottom: .35rem; }
.simple-steps small { font-size: .67rem; line-height: 1.65; color: var(--ink-soft); }
.how-section { grid-template-columns: 1.1fr .9fr; padding-block: 4rem; }
.how-text { max-width: 32rem; }
.how-photo { margin: 0; }
.how-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1.45; object-fit: cover; object-position: center 45%; border-radius: 8px 8px 60px 8px; }
.letters-section { --band-bg: var(--green); color: var(--cream); padding-block: 5.5rem; }
.letters-section .eyebrow { color: #d8b47d; }
.letters-section h2 { font-size: clamp(2.2rem,3.8vw,3.5rem); }
.letters-text > p { color: #d1d8c9; }
.letter-options { display: flex; gap: .65rem; margin: 1.5rem 0; }
.letter-options > span { padding: .5rem .85rem; border: 1px solid #708374; border-radius: 4px; color: #e6e4d5; font-size: .72rem; }
.letter-options strong { margin-right: .2rem; color: #edce98; font: 600 1.5rem var(--serif); }
.letter-bonus { color: #edce98 !important; font-weight: 700; }
.letters-photo { position: relative; margin: 0; padding: 1rem 1rem 1.2rem; background: var(--cream); box-shadow: 0 15px 35px rgba(0,0,0,.15); transform: rotate(3deg); }
.letters-photo::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #e7decc; transform: rotate(-6deg); }
.letters-photo img { display: block; width: 100%; height: auto; }
.letters-text .text-link, .letters-text p a:not(.btn) { color: inherit; }
.letters-purchase-note { margin-top: 1rem; }
.letter-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.letter-mode { padding: clamp(1.3rem, 3vw, 2rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.letter-mode p { color: var(--ink-soft); margin-bottom: 0; }
.letters-questions details { padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.letters-questions summary { font-weight: 700; cursor: pointer; }
.letters-questions details p { margin: 1rem 0 0; }
.letters-bottom-cta { margin-top: 2rem; }
.fb-letters-page { padding-block: 2rem; }
.fb-letter-form { margin-top: 2rem; }
.fb-series-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-block: 1.2rem; }
.fb-letter-form .step { padding: clamp(1rem, 3vw, 2rem); }
.fb-letter-form .step + .step { margin-top: 1rem; }
.fb-letter-form .field > span, .fb-link-field > span { display: block; margin-bottom: .4rem; }
.fb-letter-form .letter-series { padding: clamp(.8rem, 2vw, 1.4rem); }
.fb-export { margin-top: 1rem; }
@media (max-width: 45rem) { .letter-mode-grid { grid-template-columns: 1fr; } }
.letters-photo figcaption { padding-top: 1rem; text-align: center; font-size: .62rem; color: var(--ink-soft); }
.letter-signature { display: block; margin-bottom: .3rem; font: italic 600 1.4rem var(--serif); color: var(--green); }
.final-cta-inner { position: relative; padding: 1rem 2rem; text-align: center; }
.final-cta-inner::before { content: "✧"; display: block; margin-bottom: 1rem; font-size: 2.7rem; line-height: 1; color: var(--gold-ink); }
.final-cta h2 { font-size: clamp(2.5rem, 4.5vw, 4rem); }
.final-cta p { max-width: 44ch; margin: 0 auto 1.4rem; color: var(--ink-soft); font-size: .92rem; }
.final-cta .final-cta-emphasis { font-size: .78rem; }
.final-cta .btn { margin-top: .3rem; }

/* Jalus */
.site-foot { margin-top: 0; background: var(--green); color: var(--cream); padding-block: 3.5rem 1.5rem; font-size: .8rem; }
.foot-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 4rem; max-width: 84rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.foot-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: #d8b47d; }
.foot-brand strong { font: 600 1.35rem var(--serif); color: var(--cream); }
.foot-col h3 { margin-bottom: 1rem; color: #d8b47d; font: 600 .65rem var(--sans); text-transform: uppercase; letter-spacing: .15em; }
.foot-col p { max-width: 32ch; color: #c7d1c3; }
.foot-col a { color: var(--cream); text-underline-offset: 5px; }
.foot-base { max-width: 78rem; margin: 2rem auto 0; padding-top: 1.1rem; border-top: 1px solid #446050; font-size: .65rem; color: #b7c5b2; }
.mobile-order-bar, .mobile-checkout-bar { display: none; }

/* --- teated ------------------------------------------------------------- */
.notice {
  padding: 1rem 1.25rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--paper); margin-bottom: 1.5rem;
}
.notice-gold  { border-color: var(--gold); background: var(--gold-tint); }
.notice-error { border-color: var(--red);  background: #fdeceb; }

/* --- vorm --------------------------------------------------------------- */
.order-progress {
  position: sticky; top: 4.75rem; z-index: 35;
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  list-style: none; margin: 1.3rem 0 1.5rem; padding: .45rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,253,248,.94); box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.order-progress li { position: relative; }
.order-progress li:not(:last-child)::after { content: ""; position: absolute; z-index: -1; left: 62%; right: -38%; top: 50%; height: 1px; background: var(--line); }
.order-progress a { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .45rem .65rem; border-radius: 999px; color: var(--ink-soft); text-decoration: none; font-size: .78rem; font-weight: 600; }
.order-progress a span { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); font-size: .72rem; }
.order-progress .is-active a { background: var(--green); color: var(--cream); }
.order-progress .is-active a span { background: var(--gold); border-color: var(--gold); color: #fff; }
.order-progress .is-past a span { background: var(--green-tint); border-color: var(--green-soft); color: var(--green); }
[data-order-step] { scroll-margin-top: 9rem; }
.mobile-checkout-bar { display: none; }

.step {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow);
}
.step > h2 {
  display: flex; align-items: center; gap: .75rem;
  font-size: 1.4rem; margin-bottom: 1.3rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}
.step-no {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-family: var(--sans); font-size: .9rem; font-weight: 700; letter-spacing: 0;
  display: grid; place-items: center;
}

fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; }
fieldset:last-child { margin-bottom: 0; }
legend { font-weight: 700; font-size: 1rem; padding: 0; margin-bottom: .2rem; }
.field { margin-bottom: 1.15rem; }
.field:last-child { margin-bottom: 0; }
label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.hint { display: block; font-weight: 400; color: var(--ink-soft); font-size: .87rem; margin-bottom: .45rem; }
.req { color: var(--red); }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], textarea, select {
  width: 100%; padding: .72rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 5.5rem; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--green-soft); outline-offset: 1px;
  border-color: transparent;
  box-shadow: 0 0 0 4px var(--green-tint);
}
input.err, textarea.err { border-color: var(--red); background: #fdeceb; }

.choices { display: flex; flex-wrap: wrap; gap: .55rem; }
.choice {
  display: inline-flex; align-items: center; gap: .5rem;
  max-width: 100%; min-width: 0; overflow-wrap: anywhere;
  padding: .55rem .95rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; font-size: .92rem; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--green-soft); }
.choice:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.choice input { margin: 0; accent-color: var(--green); }

.radio-rows { display: grid; gap: .55rem; }
.radio-row {
  display: flex; align-items: flex-start; gap: .75rem;
  max-width: 100%; min-width: 0;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.radio-row:hover { border-color: var(--green-soft); }
.radio-row:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.radio-row input { margin-top: .3rem; accent-color: var(--green); }
.radio-row .rr-title { font-weight: 600; display: block; }
.radio-row .rr-note  { font-size: .88rem; color: var(--ink-soft); }

/* --- pakiread vormis ---------------------------------------------------- */
.pack-row {
  display: grid; gap: .6rem 1rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1.05rem 0; border-bottom: 1px solid var(--line);
}
.pack-row > * { min-width: 0; }
.pack-row .pr-name, .pack-row .pr-price { overflow-wrap: anywhere; }
.pack-row:last-of-type { border-bottom: 0; }
.pack-row .pr-name { font-weight: 600; }
.pack-row .pr-price { color: var(--ink-soft); font-size: .92rem; }
.pack-row .pr-identical { grid-column: 1 / -1; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.qty button {
  width: 2.5rem; height: 2.5rem; border: 0; background: none; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--green); border-radius: 50%;
  transition: background .15s;
}
.qty button:hover { background: var(--green-tint); }
.qty input {
  width: 2.7rem; border: 0; text-align: center; font: inherit; font-weight: 600;
  padding: 0; background: none; -moz-appearance: textfield;
}
.qty input:focus { outline: none; box-shadow: none; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- lapsed ------------------------------------------------------------- */
.child {
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 1.3rem; margin-bottom: 1rem; background: #fff;
}
.child-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.child-head h3 { margin: 0; }
.link-danger { background: none; border: 0; color: var(--red); cursor: pointer; font: inherit; font-size: .9rem; text-decoration: underline; padding: 0; }
.child-quiz { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px dashed var(--line); }
.quiz-group { margin-bottom: 1.6rem; }
.quiz-group > h4 {
  margin: 0 0 .85rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green-soft);
}

#add-child {
  display: block; width: 100%;
  border: 2px dashed var(--line); background: transparent;
  padding: .95rem; border-radius: var(--radius-sm);
  font-weight: 600; color: var(--green);
  transition: border-color .15s, background .15s;
}
#add-child:hover { border-color: var(--green-soft); background: var(--green-tint); }

/* Kirjade ankeet järgib ülejäänud tellimisvormi välju ja valikuid. */
.letter-series { min-width: 0; margin: 1.2rem 0; padding: 1.2rem; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); }
.letter-series header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.letter-series header h3 { flex: 1 1 14rem; min-width: 0; margin: 0; text-wrap: pretty; }
.letter-series header .btn { flex: none; }
.letter-member { border-top: 1px solid var(--line); margin-top: 1.2rem; padding-top: 1.2rem; }
.letter-member h4 { margin: 0 0 .8rem; }
.letter-series .letter-options { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 1.2rem; }
.letter-series .letter-options label { display: flex; align-items: center; gap: .5rem; max-width: 100%; margin: 0; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: .92rem; font-weight: 500; cursor: pointer; }
.letter-series .letter-options label:hover { border-color: var(--green-soft); }
.letter-series .letter-options label:has(input:checked) { background: var(--green-tint); border-color: var(--green); }
.letter-series .letter-options input { width: auto; flex: none; margin: 0; accent-color: var(--green); }
.letter-series .field { margin: .8rem 0 1.15rem; }
.letter-series .field > span { display: block; margin-bottom: .3rem; }
.letter-record { border-left: 3px solid var(--line); padding: .8rem; margin: .8rem 0; }
.letter-series details { margin: 1rem 0; }
.letter-series summary { cursor: pointer; font-weight: 600; padding: .6rem 0; }
#add-series, #add-family { width: 100%; border-style: dashed; }
#samm-perekiri { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* --- kokkuvõte ---------------------------------------------------------- */
.summary { border-top: 2px dashed var(--line); }
.summary-lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.summary-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .38rem 0; font-size: .95rem; }
.summary-lines li:has(> span + span) { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; }
.summary-lines li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.summary-lines li > span + span { white-space: nowrap; }
.summary-lines li.sub { padding-left: 1rem; color: var(--ink-soft); font-size: .88rem; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-top: 2px solid var(--ink); padding-top: .85rem; margin-top: .6rem;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
}
.summary-empty { color: var(--ink-soft); font-style: italic; }

/* Vormi paigutus: laual kokkuvõte paremale kleepuvasse veergu, et summa
   oleks kogu täitmise aja silme ees. Mobiilis jääb loomulik järjekord. */
.order-grid { display: grid; width: 100%; max-width: 100%; min-width: 0; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.order-grid > *, .step, .notice, #order-form, fieldset { min-width: 0; max-width: 100%; }
@media (min-width: 64rem) {
  .order-grid { grid-template-columns: minmax(0, 1fr) 20rem; }
  .order-grid > .step:not(.summary) { grid-column: 1; }
  .order-grid > .summary { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 5.5rem; }
}

/* --- kinnitusleht ------------------------------------------------------- */
.done-mark { display: block; margin: 0 auto .8rem; animation: pop .35s ease-out both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.pay-figure { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }


/* Sama paberitunne tellimisvoos */
.order-page > h1 { margin-bottom: .7rem; }
.order-intro { max-width: 65ch; color: var(--ink-soft); font-size: .9rem; }
.order-page .order-progress { top: 6rem; margin-block: 2rem; border-radius: 8px; box-shadow: none; }
.order-progress a { border-radius: 5px; }
.order-progress .is-active a span, .step-no { background: var(--gold-tint); color: var(--gold-ink); border-color: var(--gold); }
.step { box-shadow: none; }
.step > h2 { font-size: 1.55rem; }
.step-no { border-radius: 5px; font-family: var(--serif); font-size: 1.1rem; }
.pack-dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .5rem; border-radius: 50%; background: var(--pack-accent, var(--gold)); }
.pack-row .pr-name { font-family: var(--serif); font-size: 1.2rem; }
.pack-row .pr-price { font-size: .8rem; }
.choice { border-radius: 6px; }
.summary { border-top: 3px solid var(--gold); background: var(--gold-tint); }
.summary-total { color: var(--green); }
.confirmation-page, .message-page { padding-block: 2.5rem; }
.confirmation-page > .eyebrow, .confirmation-page > h1, .confirmation-page > .lead { text-align: center; }
.confirmation-page > .lead { margin-bottom: 2.2rem; font-size: 1rem; overflow-wrap: anywhere; }
.confirmation-page .notice { padding: 1.6rem; }
.confirmation-page .summary-lines li { gap: 1rem; }
.confirmation-page .summary-lines strong { overflow-wrap: anywhere; min-width: 0; }
.message-page { min-height: 40vh; }
[hidden] { display: none !important; }

@media (min-width: 64rem) {
  .order-grid { grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; }
  .order-grid > .summary { top: 10.8rem; }
}
@media (max-width: 70rem) {
  .site-head nav { gap: 1.2rem; }
  .hero-grid { gap: 2rem; }
  .hero-seal { width: 94px; height: 94px; right: -.5rem; }
  .pack-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
  .pack-art { aspect-ratio: 1.25; }
  .pack .tagline { min-height: 0; }
  .pack-desc { font-size: .83rem; }
  .pack-cta { font-size: .78rem; }
  .foot-base { margin-inline: 3rem; }
}
@media (max-width: 55.99rem) {
  .site-head { min-height: 76px; padding-block: .8rem; }
  .site-head .nav-desktop { display: none; }
  .nav-mobile { display: block; margin-left: auto; position: relative; }
  .nav-mobile summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; list-style: none; cursor: pointer; font-size: .78rem; font-weight: 600; }
  .nav-mobile summary::-webkit-details-marker { display: none; }
  .nav-mobile summary::after { content: "☰"; font-size: .9rem; }
  .nav-mobile[open] summary::after { content: "×"; font-size: 1.2rem; }
  .nav-mobile nav { position: absolute; right: 0; top: calc(100% + .8rem); min-width: 15rem; display: grid; gap: 0; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow-lift); }
  .nav-mobile nav a { padding: .85rem; }
  .nav-mobile nav a:hover { background: var(--green-tint); }
  .site-head .mobile-head-cta { display: inline-flex; }
  .hero { padding-block: 2.5rem 3.5rem; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .hero h1 { font-size: clamp(2rem, 4.6vw, 2.65rem); }
  .hero-copy > .eyebrow { font-size: .59rem; margin-bottom: 1.4rem; }
  .hero .lead { font-size: .88rem; line-height: 1.7; }
  .hero-visual { aspect-ratio: .84; }
  .hero-visual figcaption { left: 1.5rem; bottom: 4.5rem; }
  .hero-visual figcaption strong { font-size: 1.7rem; }
  .hero-seal { top: 0; width: 82px; height: 82px; }
  .hero-seal strong { font-size: 2.1rem; }
  .hero-seal span { font-size: .45rem; }
  .advent-countdown { left: 50%; width: max-content; min-width: 0; max-width: calc(100% - 2rem); padding: .8rem 1rem; }
  .section-heading { gap: 2rem; }
  .showcase, .how-section, .letters-section { gap: 2.5rem; }
  .showcase { grid-template-columns: 1fr; }
  .showcase-photo { max-width: 36rem; width: 100%; margin-inline: auto; }
  .showcase-photo img { aspect-ratio: 1.5; }
  .showcase-text { max-width: 40rem; }
  .letters-section { grid-template-columns: 1fr; }
  .letters-photo { max-width: 34rem; margin: 1rem auto; }
  .foot-inner { gap: 2rem; }
  .product-hero { grid-template-columns: 1fr; margin-top: 1rem !important; }
  .product-copy { max-width: 40rem; }
  .product-contents { grid-template-columns: 1fr; gap: 2rem; }
  .order-page .order-progress { top: 5.1rem; }
}
@media (max-width: 40rem) {
  html { scroll-padding-top: 5.5rem; }
  body { font-size: 16px; }
  body.has-mobile-action { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .site-head { min-height: 72px; gap: .8rem; padding: .75rem 1.15rem; }
  .brand { gap: .5rem; }
  .brand-mark { width: 2.15rem; height: 2.15rem; }
  .brand strong { font-size: 1.02rem; }
  .brand small { font-size: .48rem; letter-spacing: .1em; }
  .site-head .mobile-head-cta { display: none; }
  .nav-mobile summary { font-size: .72rem; }
  .hero { min-height: 0; padding-block: 2.4rem 3rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero-copy { padding: 0; }
  .hero-copy > .eyebrow { margin-bottom: 1.5rem; font-size: .59rem; }
  .hero h1 { font-size: clamp(2.45rem,10.4vw,3.8rem); margin-bottom: 1.2rem; }
  .hero .lead { font-size: .91rem; max-width: 42ch; margin-bottom: 1.3rem; }
  .hero-actions { gap: .5rem 1.1rem; }
  .hero-actions .text-link { font-size: .72rem; }
  .hero-note { font-size: .7rem; margin-top: 1.1rem; }
  .hero-visual { aspect-ratio: 1.14; max-width: 32rem; width: 100%; margin: .5rem auto 1.25rem; border-radius: 44% 44% 6px 6px; }
  .hero-visual figcaption { bottom: 3.8rem; left: 1.7rem; }
  .hero-visual figcaption > span { font-size: .59rem; margin-bottom: .5rem; }
  .hero-visual figcaption strong { font-size: clamp(1.2rem,6.4vw,1.65rem); }
  .hero-seal { right: .15rem; }
  .advent-countdown { top: auto; bottom: -1rem; left: 50%; right: auto; width: calc(100% - 3rem); min-width: 0; max-width: 15.5rem; grid-template-columns: auto auto; justify-content: center; gap: .15rem .4rem; min-height: 66px; padding: .55rem 1rem; transform: translateX(-50%); }
  .advent-countdown strong { grid-row: 2; grid-column: 1; justify-self: end; font-size: 1.9rem; }
  .countdown-kicker { grid-column: 1 / -1; justify-self: center; font-size: .61rem; line-height: 1.3; text-align: center; }
  .countdown-label { grid-row: 2; grid-column: 2; align-self: end; max-width: none; padding-bottom: .12rem; font-size: .68rem; }
  .advent-countdown.is-resting { grid-template-columns: auto auto; }
  .advent-countdown.is-resting .countdown-label { max-width: none; }
  .trust-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding-block: .5rem; }
  .trust-grid > span { padding: .8rem .4rem; }
  .trust-grid > span:nth-child(2n) { border-right: 0; }
  .trust-grid > span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .trust-grid > span:last-child { grid-column: auto; }
  .trust-grid strong { font-size: .92rem; }
  .trust-grid small { font-size: .6rem; }
  .preorder-ribbon { padding-top: 1.25rem; }
  .preorder-ribbon-card { grid-template-columns: 1fr; gap: 1.15rem; padding: 1.35rem 1.25rem; }
  .preorder-ribbon h2 { font-size: 1.4rem; }
  .preorder-bonus { font-size: .82rem; }
  .preorder-countdown--ribbon { justify-items: start; gap: .2rem; padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--line); text-align: left; }
  .preorder-countdown--ribbon [data-preorder-countdown-value] { font-size: 1rem; }
  .preorder-countdown--ribbon [data-preorder-countdown-label] { font-size: .7rem; }
  .home-band { padding-block: 3.5rem; }
  .section-heading { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 1.5rem; }
  .eyebrow { font-size: .61rem; margin-bottom: .8rem; }
  h2 { font-size: 2.15rem; }
  .section-intro { font-size: .85rem; }
  .pack-grid { gap: .75rem; }
  .pack-art { aspect-ratio: 1.25; }
  .pack-body { padding: .9rem .7rem; }
  .pack h3 { font-size: 1.07rem; min-height: 2.4em; overflow-wrap: anywhere; }
  .pack .tagline { font-size: .64rem; min-height: 3.4em; }
  .pack-traits li { font-size: .58rem; padding: .25rem .35rem; }
  .pack-desc { font-size: .7rem; line-height: 1.65; margin-bottom: 1rem; }
  .pack .price { font-size: 1.4rem; }
  .pack .price s { font-size: .65rem; }
  .pack-foot { align-items: flex-start; flex-direction: column; gap: .7rem; }
  .pack-cta { font-size: .7rem; }
  .product-breadcrumb { padding-top: 1rem; }
  .product-hero { gap: 1.8rem; margin-block: .8rem 0 !important; }
  .product-photo { margin-inline: -1.25rem; padding: .35rem; border-inline: 0; border-radius: 0; }
  .product-photo img { border-radius: 3px; }
  .product-copy h1 { font-size: 2.65rem; }
  .product-buy { align-items: stretch; flex-direction: column; }
  .product-price { flex: auto; }
  .product-buy .btn { width: 100%; }
  .product-stock { text-align: left; }
  .product-contents { gap: 1.5rem; }
  .candy-list { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; }
  .other-product-grid { grid-template-columns: 1fr; }
  .showcase, .how-section, .letters-section { grid-template-columns: 1fr; gap: 2rem; }
  .showcase-photo { padding-right: .8rem; }
  .showcase-text > p, .how-text > p, .letters-text > p { font-size: .86rem; }
  .simple-steps { gap: .7rem; }
  .simple-steps strong { font-size: .7rem; }
  .simple-steps small { font-size: .63rem; }
  .how-photo img { aspect-ratio: 1.6; }
  .letters-section h2 { font-size: 2.35rem; }
  .letter-options { gap: .5rem; }
  .letter-options > span { padding: .45rem .7rem; }
  .letters-photo { width: calc(100% - 1rem); padding: .7rem; }
  .letter-signature { font-size: 1.2rem; }
  .final-cta-inner { padding-inline: 0; }
  .final-cta h2 { font-size: 2.6rem; }
  .site-foot { padding-block: 2.5rem 1rem; }
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .foot-col:first-child { grid-column: 1 / -1; }
  .foot-col p { font-size: .73rem; }
  .foot-base { margin: 1.5rem 1.25rem 0; }
  .mobile-order-bar, .mobile-checkout-bar { position: fixed; z-index: 80; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .65rem .7rem .65rem 1rem; border: 1px solid #4f6655; border-radius: 8px; background: var(--green); color: var(--cream); box-shadow: 0 6px 24px rgba(0,0,0,.2); font-size: .66rem; }
  .mobile-order-bar strong { display: block; font: 600 .95rem/1.4 var(--serif); }
  .mobile-checkout-bar > span { display: grid; line-height: 1.4; }
  .mobile-checkout-bar small { color: #ccd4c5; font-size: .65rem; }
  .mobile-checkout-bar strong { font: 600 1.2rem var(--serif); }
  .order-page .order-progress { top: 4.5rem; margin-block: 1.5rem; padding: .3rem; }
  .order-progress a { min-height: 44px; gap: .25rem; padding: .25rem .1rem; font-size: .59rem; }
  .order-progress a span { width: 1.25rem; height: 1.25rem; font-size: .65rem; }
  .order-progress li:not(:last-child)::after { display: none; }
  .step { padding: 1.05rem; }
  .step > h2 { font-size: 1.25rem; }
  .letter-series { padding: .8rem; }
  .letter-series header { align-items: flex-start; }
  .letter-series .letter-options { gap: .35rem; }
  .letter-series .letter-options label { padding: .5rem; font-size: .85rem; }
  .pack-row { grid-template-columns: minmax(0,1fr); gap: .75rem; }
  .pack-row .pr-name { font-size: 1.1rem; }
  .pack-row .qty { justify-self: start; }
  .qty button { min-width: 44px; min-height: 44px; }
  .qty input { width: 3rem; }
  .choice, .radio-row { font-size: .85rem; }
  .confirmation-page .notice { padding: 1rem; }
  .confirmation-page .summary-lines li { flex-wrap: wrap; gap: .25rem .8rem; }
  .confirmation-page, .message-page { padding-block: .5rem; }
}
@media (max-width: 359px) {
  .pack-grid { grid-template-columns: 1fr; }
  .pack h3 { min-height: 0; }
  .pack-art { aspect-ratio: 1.25; }
  .pack .tagline { min-height: 0; }
  .pack-foot { flex-direction: row; align-items: center; }
  .brand strong { font-size: .92rem; }
}
@media (hover: none), (pointer: coarse) {
  .cursor-snow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  a.pack:hover, .btn:hover { transform: none; }
  .cursor-snow { display: none; }
}

/* Privaatsustingimused: loetav tekstileht */
.privacy-page { max-width: 46rem; padding-bottom: 4rem; }
.privacy-page h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); margin: 2.2rem 0 .6rem; }
.privacy-page li { margin-bottom: .5rem; }
.letter-series .name-note { margin: -.85rem 0 1rem; }
/* Kiri trükitakse suurtähtedes; vanem näeb nime kohe samal kujul. Andmed salvestuvad nii, nagu kirjutati. */
.child-name-input { text-transform: uppercase; letter-spacing: .04em; }
/* E-posti trükivea vihje tellimisvormis; klõps parandab aadressi. */
.email-suggest { margin: .45rem 0 0; }
.email-suggest button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--green); text-decoration: underline; cursor: pointer; }