/* ==========================================================================
   OVITÉ Atelier — content & legal pages
   o-nas · starostlivost · na-mieru · kontakt · doprava-a-platba ·
   obchodne-podmienky · ochrana-osobnych-udajov · 404
   Loaded after ovite.css. Uses only shared tokens.
   ========================================================================== */

/* ---------- 0. Shared bits ---------- */
/* Native arrivals from other pages (o-nas.html#balenie, obchodne-podmienky.html#odstupenie …) use
   scroll-margin; in-page clicks are handled by content.js with the same single offset. */
main [id] { scroll-margin-top: calc(var(--hdr-h-sm) + 36px); }
/* Anchor targets receive focus (skip link, TOC, cues) – no ring around a whole section */
#main:focus, main [data-anchor-focus]:focus { outline: none; }

/* Typesetting: balanced display lines, no orphans in questions and body copy */
main :is(.t-d1, .t-d2, .t-d3, h1, h2) { text-wrap: balance; }
main :is(.acc__head, .prose p, .t-lead, .t-body) { text-wrap: pretty; }
/* Cormorant defaults to old-style figures ("01" reads "oı"): force lining numerals on small numbers */
.process__num, .howto__num, .care-index a span, .toc__list a span, .mlist__price, .budget__scale, .wiz-summary dd, .cstatus strong { font-variant-numeric: lining-nums; }

/* Touch targets ≥ 44 px without changing the look (shared .link / .crumbs, content pages only) */
main .link { position: relative; }
main .link::before { content: ""; position: absolute; inset: -10px -4px; }
main .crumbs a { padding-block: 12px; margin-block: -12px; }

/* Two sections of the same light theme in a row: one continuous band with a hairline between */
.section.c-join { padding-top: 0; }
.section.c-join > .container { border-top: 1px solid var(--line); padding-top: var(--section-y); }

.c-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px clamp(16px, 2vw, 32px); align-items: end; margin-bottom: clamp(44px, 6vw, 96px); }
.c-head__title { grid-column: 1 / span 7; }
.c-head__title > * + * { margin-top: 22px; }
.c-head__aside { grid-column: 9 / -1; }
.c-head--center { text-align: center; justify-items: center; }
.c-head--center .c-head__title { grid-column: 2 / span 10; display: flex; flex-direction: column; align-items: center; }
@media (max-width: 899px) { .c-head__title, .c-head__aside, .c-head--center .c-head__title { grid-column: 1 / -1; } }

.c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.c-leaf { width: 30px; height: 30px; color: var(--accent); }
.c-sign { font-family: var(--font-script); font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); line-height: 1; color: var(--burgundy-700); }
.theme-burgundy .c-sign, .theme-forest .c-sign, .theme-night .c-sign { color: var(--cream-logo); }

.nw { white-space: nowrap; }

/* Parallax layer inside an overflow-hidden frame (never shows edges) */
.c-par { position: absolute; left: 0; right: 0; top: -12%; bottom: -12%; }
.c-par > img { width: 100%; height: 100%; object-fit: cover; }

/* Scroll cue */
.c-cue { display: inline-flex; align-items: center; gap: 14px; font-size: 0.66rem; font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: inherit; opacity: .8; transition: opacity .3s; }
.c-cue:hover { opacity: 1; }
.c-cue__line { position: relative; width: 1px; height: 44px; background: rgba(243, 234, 214, .22); overflow: hidden; }
.c-cue__line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 45%; background: currentColor; animation: cue 2.4s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(230%); } }

/* ---------- 1. Page hero (overlay, full-bleed image) ---------- */
.phero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: max(620px, 92svh); overflow: hidden; }
.phero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(120% 90% at 70% 40%, #2a1a16 0%, #120c0b 70%); animation: phero-in 2.4s var(--ease-out) both; }
@keyframes phero-in { from { opacity: 0; transform: scale(1.07); } }
.phero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 8, 7, .5) 0%, rgba(12, 8, 7, 0) 26%, rgba(12, 8, 7, .12) 52%, rgba(12, 8, 7, .86) 100%),
    linear-gradient(90deg, rgba(12, 8, 7, .62) 0%, rgba(12, 8, 7, .18) 55%, rgba(12, 8, 7, 0) 80%); }
.phero__inner { position: relative; width: 100%; padding-top: calc(var(--announce-h) + var(--hdr-h) + clamp(48px, 9vh, 120px)); padding-bottom: clamp(28px, 4vw, 48px); }
.phero__content { max-width: 860px; }
.phero .crumbs { color: rgba(243, 234, 214, .66); margin-bottom: clamp(22px, 3vw, 36px); }
.phero .crumbs a:hover { color: var(--cream-logo); }
.phero__title { margin-top: 22px; }
/* Content heroes on the same scale as vence.html (≈105 px at 1440) – clearly above the t-d2 section titles */
.phero__title, .mhero h1 { font-size: clamp(2.9rem, 1.5rem + 5.6vw, 7.5rem); line-height: .95; letter-spacing: -.02em; }
.phero__lead { max-width: 540px; margin-top: 28px; color: rgba(243, 234, 214, .8); }
.phero__actions { margin-top: 38px; }
.phero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: clamp(48px, 8vh, 104px); padding-top: 22px; border-top: 1px solid rgba(243, 234, 214, .16); }
.phero__foot .tag-list { color: rgba(243, 234, 214, .72); }
@media (max-width: 639px) {
  .phero { min-height: max(560px, 88svh); }
  .phero__shade { background: linear-gradient(180deg, rgba(12, 8, 7, .55) 0%, rgba(12, 8, 7, .05) 28%, rgba(12, 8, 7, .35) 55%, rgba(12, 8, 7, .9) 100%); }
  .phero__foot .c-cue { display: none; }
}
/* Care hero: interior.jpg has a bright wall and lanterns behind the text – deeper left/bottom scrim */
body[data-page="care"] .phero__shade { background:
    linear-gradient(180deg, rgba(12, 8, 7, .55) 0%, rgba(12, 8, 7, .12) 30%, rgba(12, 8, 7, .28) 55%, rgba(12, 8, 7, .9) 100%),
    linear-gradient(90deg, rgba(12, 8, 7, .8) 0%, rgba(12, 8, 7, .45) 45%, rgba(12, 8, 7, 0) 78%); }
body[data-page="care"] .phero__content { max-width: 660px; }
@media (max-width: 1023px) {
  body[data-page="care"] .phero .c-par img { object-position: 78% 50%; }
  body[data-page="care"] .phero__shade { background:
      linear-gradient(90deg, rgba(12, 8, 7, .78) 0%, rgba(12, 8, 7, .5) 55%, rgba(12, 8, 7, .15) 85%),
      linear-gradient(180deg, rgba(12, 8, 7, .6) 0%, rgba(12, 8, 7, .42) 40%, rgba(12, 8, 7, .92) 100%); }
}

/* ---------- 2. O nás ---------- */
/* Story */
.story__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(40px, 5vw, 72px); }
.story__head { grid-column: 1 / span 8; }
.story__head h2 { margin-top: 22px; }
.story__main { grid-column: 1 / span 6; grid-row: 2 / span 2; align-self: start; position: sticky; top: calc(var(--hdr-h-sm) + 40px); margin: 0; }
.story__aside { margin: 0; }
.story__main .media { aspect-ratio: 4 / 5; }
.story__text { grid-column: 8 / span 5; grid-row: 2; }
.story__text .t-lead { color: var(--fg); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-family: var(--font-display); font-weight: 400; line-height: 1.5; }
.story__text .c-sign { margin-top: 36px; }
.story__aside { grid-column: 9 / span 4; grid-row: 3; align-self: end; }
.story__aside .media { aspect-ratio: 4 / 5; }
.story__aside figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
/* sticky image never taller than the space under the header (1280×720, 1440×900) */
@media (min-width: 900px) { .story__main .media { max-height: calc(100svh - var(--hdr-h-sm) - 80px); } }
@media (max-width: 899px) {
  .story__head, .story__main, .story__text, .story__aside { grid-column: 1 / -1; grid-row: auto; }
  .story__main { position: static; }
  .story__aside { width: 62%; margin-left: auto; margin-top: -24px; }
}
/* Tablets: keep two columns (no 700 px photos, no 100-character lines) */
@media (min-width: 640px) and (max-width: 899px) {
  .story__main { grid-column: 1 / span 6; grid-row: 2 / span 2; }
  .story__text { grid-column: 7 / -1; grid-row: 2; }
  .story__aside { grid-column: 7 / -1; grid-row: 3; width: auto; margin: 0; }
}

/* Values */
.values { overflow: hidden; }
.values__bg { position: absolute; inset: -14% 0; background-size: cover; background-position: center; opacity: .16; mix-blend-mode: luminosity; pointer-events: none; }
.values .container { position: relative; }
.values__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.values__item { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(36px, 4vw, 64px) clamp(20px, 3vw, 52px) clamp(40px, 4.5vw, 72px); }
.values__item + .values__item { border-left: 1px solid var(--line); }
.values__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 3vw, 44px); }
.values__num { font-family: var(--font-display); font-style: italic; font-size: clamp(3.4rem, 2rem + 4vw, 6.2rem); line-height: .8; color: rgba(243, 234, 214, .3); font-variant-numeric: lining-nums; }
.values__item .icon { width: 34px; height: 34px; stroke-width: 1; color: var(--cream-logo); opacity: .9; }
.values__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + .8vw, 2.1rem); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.1; }
.values__item p { color: var(--muted); max-width: 34ch; }
@media (max-width: 899px) {
  .values__list { grid-template-columns: 1fr; }
  .values__item + .values__item { border-left: 0; border-top: 1px solid var(--line); }
  .values__top { margin-bottom: 6px; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .values__item { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 36px; row-gap: 12px; align-content: start; }
  .values__top { grid-row: 1 / span 2; flex-direction: column; gap: 22px; margin: 0; }
  .values__item p { max-width: 52ch; }
}

/* Process — how a wreath is made */
.process__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.process__step:nth-child(even) { margin-top: clamp(40px, 7vw, 120px); }
.process__step .media { aspect-ratio: 4 / 5; }
.process__meta { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.process__num { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; line-height: 1; color: var(--burgundy-700); }
.process__meta::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.process__step h3 { margin-top: 14px; }
.process__step p { margin-top: 10px; color: var(--muted); font-size: .95rem; line-height: 1.7; }
@media (max-width: 1023px) {
  .process__list { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(72%, 340px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding-bottom: 12px; scrollbar-width: none; }
  .process__list::-webkit-scrollbar { display: none; }
  .process__step { scroll-snap-align: start; }
  .process__step:nth-child(even) { margin-top: 0; }
}
.scroll-hint { display: none; margin-top: 18px; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); align-items: center; gap: 10px; }
@media (max-width: 1023px) { .scroll-hint { display: inline-flex; } }

/* Packaging bento (homepage links to o-nas.html#balenie) */
main #balenie { scroll-margin-top: calc(var(--hdr-h-sm) + 28px - var(--section-y)); }
.pack__grid { display: grid; gap: clamp(8px, .9vw, 14px); grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "intro intro box env" "intro intro box env" "t1 t2 t3 t4" "t5 t6 t7 t8"; }
.pack__intro { grid-area: intro; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(28px, 3.4vw, 52px); }
.pack__intro h2 { margin-top: 18px; }
.pack__intro .t-body { max-width: 440px; margin-top: 18px; }
.pack__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); }
.pack__foot .c-sign { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem); max-width: 360px; }
.pack__tile { position: relative; overflow: hidden; margin: 0; background: var(--cream-300); aspect-ratio: 1; }
.pack__tile--tall { aspect-ratio: auto; min-height: 100%; }
.pack__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.pack__tile:hover img, .js .pack__tile.is-in:hover > img { transform: scale(1.05); }
.pack__tile::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(18, 10, 9, .6), rgba(18, 10, 9, 0)); pointer-events: none; opacity: .9; transition: opacity .5s; }
.pack__cap { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 13px; color: var(--cream-logo); font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; transition: transform .6s var(--ease-out); }
.pack__tile:hover .pack__cap { transform: translateY(-3px); }
.pack__box { grid-area: box; } .pack__env { grid-area: env; }
.pack__t1 { grid-area: t1; } .pack__t2 { grid-area: t2; } .pack__t3 { grid-area: t3; } .pack__t4 { grid-area: t4; }
.pack__t5 { grid-area: t5; } .pack__t6 { grid-area: t6; } .pack__t7 { grid-area: t7; } .pack__t8 { grid-area: t8; }
/* Focal points: tissue + seal (not the box lid again), the leaf and header of each card, the whole top sticker */
.pack__t1 img { object-position: 50% 100%; }
.pack__t2 img { object-position: 50% 8%; }
.pack__t3 img { object-position: 50% 0%; }
.pack__t7 img { object-position: 50% 2%; }
@media (max-width: 1023px) {
  .pack__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "intro intro intro intro" "box box env env" "t1 t2 t3 t4" "t5 t6 t7 t8"; }
  .pack__tile--tall { aspect-ratio: 3 / 4; min-height: 0; }
  .pack__cap { left: 12px; right: 10px; bottom: 10px; letter-spacing: .14em; }
}
@media (max-width: 639px) {
  .pack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "intro intro" "box env" "t1 t2" "t3 t4" "t5 t6" "t7 t8"; }
}

/* Quote band */
.qband { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(540px, 82vh, 860px); padding-block: var(--section-y-sm); }
.qband__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(90% 90% at 30% 50%, #3a0f14 0%, #120909 70%); }
/* detail-01 mirrored: the berries sit top-left, the quote over dark fir needles */
.qband__media img { object-position: 50% 100%; transform: scaleX(-1); }
.qband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 6, 6, .05) 0%, rgba(10, 6, 6, .3) 42%, rgba(10, 6, 6, .74) 100%); }
.qband__quote { margin-left: auto; width: min(640px, 100%); }
.qband__quote .leaf { width: 34px; height: 34px; margin-bottom: 28px; color: var(--cream-logo); }
.qband__quote p { font-style: italic; }
.qband__quote footer { margin-top: 34px; display: flex; align-items: center; gap: 16px; }
.qband__quote footer::before { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .5; }
@media (max-width: 767px) {
  .qband { align-items: flex-end; min-height: 640px; }
  .qband::before { background: linear-gradient(180deg, rgba(10, 6, 6, .1) 0%, rgba(10, 6, 6, .55) 45%, rgba(10, 6, 6, .9) 100%); }
}

/* CTA split */
.ctasplit__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: center; }
.ctasplit__media { grid-column: 1 / span 6; }
.ctasplit__media .media { aspect-ratio: 3 / 2; }
.ctasplit__media .media img { object-position: 50% var(--focus-y, 50%); }
.ctasplit__text { grid-column: 8 / -1; }
.ctasplit__text h2 { margin-top: 22px; }
.ctasplit__text .t-body { margin-top: 22px; max-width: 420px; }
.ctasplit__text .c-actions { margin-top: 36px; }
.ctasplit--flip .ctasplit__media { grid-column: 7 / span 5; order: 2; }
.ctasplit--flip .ctasplit__media .media { aspect-ratio: 4 / 5; }
.ctasplit--flip .ctasplit__text { grid-column: 2 / span 4; order: 1; }
.ctasplit__text .c-leaf { margin-bottom: 26px; }
@media (max-width: 899px) { .ctasplit__media, .ctasplit__text, .ctasplit--flip .ctasplit__media, .ctasplit--flip .ctasplit__text { grid-column: 1 / -1; order: 0; } .ctasplit--flip .ctasplit__media .media { max-width: 460px; } }

/* ---------- 3. Starostlivosť ---------- */
.care__grid { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: clamp(48px, 7vw, 128px); align-items: start; }
.care__aside { align-self: stretch; }
.care-index { position: sticky; top: calc(var(--hdr-h-sm) + 56px); }
.care-index ol { list-style: none; padding: 0; margin-top: 20px; border-left: 1px solid var(--line); }
.care-index a { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 9px 0 9px 20px; font-size: .9rem; line-height: 1.4; color: var(--muted); transition: color .35s; }
.care-index a span { width: 1.7em; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; }
.care-index a::before { content: ""; position: absolute; left: -1.5px; top: 6px; bottom: 6px; width: 2px; background: var(--burgundy-700); transform: scaleY(0); transition: transform .6s var(--ease-out); }
.care-index a:hover, .care-index a.is-active { color: var(--fg); }
.care-index a.is-active span { color: var(--burgundy-700); }
.care-index a.is-active::before { transform: scaleY(1); }
.care-index__more { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.care-index__more a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .86rem; color: var(--muted); transition: color .3s; }
.care-index__more a:hover { color: var(--fg); }
.care-index__more .icon { width: 16px; height: 16px; transition: transform .5s var(--ease-out); }
.care-index__more a:hover .icon { transform: translateY(2px); }
.care__intro { max-width: 720px; margin-bottom: clamp(40px, 5vw, 72px); }
.care__intro h2 { margin-top: 20px; }
.care__intro .t-lead { margin-top: 22px; max-width: 560px; }
.crules { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.crule { display: grid; grid-template-columns: clamp(92px, 12vw, 190px) minmax(0, 1fr) auto; gap: 18px clamp(20px, 3vw, 52px); padding-block: clamp(40px, 5vw, 76px); border-bottom: 1px solid var(--line); align-items: start; }
.crule__num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(4.2rem, 2rem + 6vw, 8.6rem); line-height: .78; color: var(--burgundy-700); font-variant-numeric: lining-nums; letter-spacing: -.02em; }
.crule__body h3 { margin-bottom: 16px; }
.crule__body .t-lead { color: var(--ink-800); max-width: 560px; }
.crule__tip { display: flex; align-items: flex-start; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--line-strong); max-width: 560px; font-size: .92rem; color: var(--muted); }
.crule__tip strong { flex: none; font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--burgundy-700); padding-top: 3px; }
.crule__icon { display: grid; place-items: center; width: clamp(64px, 6vw, 88px); aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--burgundy-700); transition: background-color .6s var(--ease-out), color .6s var(--ease-out), border-color .6s; }
.crule__icon .icon { width: 42%; height: 42%; stroke-width: 1; }
.crule.is-active .crule__icon { background: var(--burgundy-700); border-color: var(--burgundy-700); color: var(--cream-logo); }
@media (max-width: 1023px) { .care__grid { grid-template-columns: 1fr; } .care__aside { display: none; } }
@media (max-width: 639px) {
  .crule { grid-template-columns: 1fr auto; }
  .crule__num { grid-row: 1; }
  .crule__icon { grid-row: 1; grid-column: 2; }
  .crule__body { grid-column: 1 / -1; }
}

/* Care card band */
.cardband__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 44px; align-items: center; }
.cardband__media { grid-column: 2 / span 4; display: grid; justify-items: center; }
/* pack-care-card.jpg is only 409 px wide: show it near native size, framed as an object (no upscaling) */
.cardband__media .media { width: 100%; max-width: 360px; aspect-ratio: 409 / 567; box-shadow: var(--shadow-lift); }
.cardband__text { grid-column: 7 / span 5; }
.cardband__text h2 { margin-top: 20px; }
.cardband__text .t-body { margin-top: 22px; max-width: 460px; }
.cardband__list { list-style: none; padding: 0; margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.cardband__list li { display: inline-flex; align-items: center; gap: 10px; font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cardband__list .icon { flex: none; width: 20px; height: 20px; color: var(--cream-logo); }
.cardband__text .link { margin-top: 38px; }
@media (max-width: 899px) { .cardband__media, .cardband__text { grid-column: 1 / -1; } .cardband__media { justify-items: start; } .cardband__media .media { max-width: 320px; } }

/* Fresh vs dried comparison */
.compare { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: var(--surface-2, var(--cream-50)); }
.compare__col + .compare__col { border-left: 1px solid var(--line); }
.compare__media { aspect-ratio: 16 / 10; }
.compare__media img { object-position: 50% 42%; }
.compare__body { padding: clamp(24px, 3.5vw, 52px); }
.compare__body .eyebrow { display: block; color: var(--burgundy-700); text-wrap: balance; }
.compare__body h3 { margin-top: 12px; }
.compare__body > p:not(.eyebrow) { margin-top: 10px; color: var(--muted); font-size: .95rem; }
.compare dl { margin-top: 28px; }
.compare dl > div { display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: 6px 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.compare dt { font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.compare dd { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--fg); }
.compare__vs { position: absolute; z-index: 2; left: 50%; top: calc((100% - 0px) * 0 + var(--vs-top, 180px)); transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--burgundy-700); }
@media (max-width: 1023px) { .compare dl > div { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 767px) {
  .compare { grid-template-columns: 1fr; }
  .compare__col + .compare__col { border-left: 0; border-top: 1px solid var(--line); }
  .compare__vs { display: none; }
}

/* FAQ split */
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; }
.faq__head { grid-column: 1 / span 5; }
.faq__head h2 { margin-top: 20px; }
.faq__head .t-body { margin-top: 20px; max-width: 360px; }
.faq__head .link { margin-top: 30px; }
.faq__list { grid-column: 7 / -1; }
.faq__list .acc__head { font-family: var(--font-display); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); font-weight: 500; letter-spacing: 0; text-transform: none; padding: 24px 0; transition: color .35s, padding-left .6s var(--ease-out); }
@media (hover: hover) {
  .faq__list .acc__head:hover { color: var(--burgundy-500); padding-left: 10px; }
  .faq__list .acc__item:not([open]) > .acc__head:hover .icon { transform: rotate(90deg); }
  .theme-forest .faq__list .acc__head:hover, .theme-burgundy .faq__list .acc__head:hover, .theme-night .faq__list .acc__head:hover { color: var(--cream-logo); opacity: .8; }
}
.faq__list .acc__body { max-width: 640px; font-size: 1rem; }
.faq__list .acc__body a { color: var(--fg); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
@media (max-width: 899px) { .faq__head, .faq__list { grid-column: 1 / -1; } }

/* ---------- 4. Na mieru ---------- */
.mhero { position: relative; overflow: hidden; background: var(--burgundy-900); }
.mhero__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); min-height: max(680px, 94svh); }
.mhero__text { grid-column: 1 / span 6; align-self: end; padding-top: calc(var(--announce-h) + var(--hdr-h) + 64px); padding-bottom: clamp(48px, 6vw, 96px); }
.mhero .crumbs { color: rgba(243, 234, 214, .6); margin-bottom: 30px; }
.mhero h1 { margin-top: 22px; }
.mhero .t-lead { margin-top: 28px; max-width: 520px; }
.mhero .c-actions { margin-top: 40px; }
.mhero__facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: clamp(40px, 6vh, 72px); padding-top: 24px; border-top: 1px solid var(--line); }
.mhero__facts li { display: inline-flex; align-items: center; gap: 10px; font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.mhero__facts .icon { width: 20px; height: 20px; color: var(--cream-logo); }
.mhero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; margin: 0; background: #2b0d11; }
.mhero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--burgundy-900) 0%, rgba(40, 9, 13, 0) 22%), linear-gradient(180deg, rgba(12, 8, 7, .45) 0%, rgba(12, 8, 7, 0) 22%), linear-gradient(0deg, rgba(12, 8, 7, .55) 0%, rgba(12, 8, 7, 0) 28%); pointer-events: none; }
.mhero__media img { width: 100%; height: 100%; object-fit: cover; }
.mhero__tag { position: absolute; z-index: 1; right: clamp(20px, 3vw, 48px); bottom: clamp(20px, 3vw, 44px); display: flex; align-items: center; gap: 12px; color: var(--cream-logo); font-family: var(--font-script); font-size: 2rem; line-height: 1; text-shadow: 0 1px 22px rgba(12, 8, 7, .6); }
@media (max-width: 1023px) {
  .mhero__grid { min-height: 0; }
  .mhero__media { position: relative; width: auto; height: min(56svh, 520px); }
  .mhero__media::after { background: linear-gradient(180deg, rgba(12, 8, 7, .55) 0%, rgba(12, 8, 7, 0) 30%, rgba(40, 9, 13, 0) 60%, var(--burgundy-900) 100%); }
  .mhero__text { grid-column: 1 / -1; padding-top: 8px; }
}
/* Phones: headline and "Začať návrh" inside the first screen – shorter photo, text pulled over its faded bottom */
@media (max-width: 639px) {
  .mhero__media { height: min(44svh, 360px); }
  .mhero__media img { object-position: 50% 38%; }
  .mhero__tag { display: none; }
  .mhero__text { position: relative; z-index: 1; margin-top: -84px; padding-top: 0; padding-bottom: 56px; }
  .mhero .crumbs { margin-bottom: 18px; }
  .mhero h1 { margin-top: 14px; }
  .mhero .t-lead { margin-top: 18px; }
  .mhero .c-actions { margin-top: 26px; }
}

/* Steps: how it works */
.howto__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); counter-reset: none; }
.howto__item { position: relative; }
.howto__top { display: flex; align-items: center; gap: 18px; }
.howto__icon { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--burgundy-700); background: var(--bg); }
.howto__icon .icon { width: 28px; height: 28px; stroke-width: 1; }
.howto__top::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.howto__item:last-child .howto__top::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
.howto__num { display: block; margin-top: 30px; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--burgundy-700); }
.howto__item h3 { margin-top: 6px; }
.howto__item p { margin-top: 14px; color: var(--muted); max-width: 36ch; }
@media (max-width: 899px) {
  .howto__list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .howto__item { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(18px, 4vw, 32px); padding: 28px 0; border-bottom: 1px solid var(--line); }
  .howto__top { grid-row: 1 / span 3; align-self: start; }
  .howto__top::after { display: none; }
  .howto__icon { width: 56px; height: 56px; }
  .howto__icon .icon { width: 22px; height: 22px; }
  .howto__num { margin-top: 0; }
  .howto__item p { max-width: 52ch; margin-top: 10px; }
}

/* Wizard layout */
.wiz-section { border-top: 1px solid var(--line); }
.wiz-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 48px; align-items: start; }
/* The aside stretches along the form; only the live summary is sticky (the whole aside was taller than
   a 1280×720 / 1024×768 screen, hiding the step-2 rows while they were being filled in). */
.wiz-aside { grid-column: 1 / span 4; align-self: stretch; }
.wiz-aside h2 { margin-top: 20px; }
.wiz-aside > .t-body { margin-top: 20px; max-width: 380px; }
.wiz-main { grid-column: 6 / -1; }
@media (max-width: 1023px) { .wiz-aside, .wiz-main { grid-column: 1 / -1; } }

.wiz-summary { position: sticky; top: calc(var(--hdr-h-sm) + 32px); margin-top: 32px; padding: 26px 28px 20px; background: var(--surface-2, var(--cream-50)); border: 1px solid var(--line); }
.wiz-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.wiz-summary__head .leaf { width: 18px; height: 18px; color: var(--burgundy-700); }
.wiz-summary dl { margin: 0; }
.wiz-summary dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.wiz-summary dl > div:last-child { border-bottom: 0; }
.wiz-summary dt { color: var(--muted); flex: none; }
.wiz-summary dd { margin: 0; text-align: right; color: var(--fg); font-weight: 500; overflow-wrap: anywhere; }
.wiz-summary dd.is-empty { color: var(--ink-300); font-weight: 400; }
.wiz-summary dd.is-flash { animation: flash 1.1s var(--ease-out); }
@keyframes flash { 0% { color: var(--burgundy-500); transform: translateX(-4px); } 100% { transform: none; } }
.wiz-alt { margin-top: 22px; font-size: .88rem; color: var(--muted); }
.wiz-alt a { color: var(--fg); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
@media (max-width: 1023px) { .wiz-summary { display: none; } }

.wiz { position: relative; background: var(--surface-2, var(--cream-50)); border: 1px solid var(--line); }
.wiz-progress { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.wiz-progress li { display: flex; align-items: center; gap: 12px; padding: 22px clamp(16px, 2.4vw, 32px); font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-300); transition: color .5s; }
.wiz-progress li + li { border-left: 1px solid var(--line); }
.wiz-progress__n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid currentColor; font-family: var(--font-sans); font-size: .7rem; font-weight: 500; letter-spacing: 0; text-transform: none; transition: background-color .5s var(--ease-out), color .5s, border-color .5s; }
.wiz-progress__n .icon { width: 15px; height: 15px; display: none; stroke-width: 1.6; }
.wiz-progress li.is-current { color: var(--fg); }
.wiz-progress li.is-current .wiz-progress__n { border-color: var(--burgundy-700); color: var(--burgundy-700); }
.wiz-progress li.is-done { color: var(--muted); }
.wiz-progress li.is-done .wiz-progress__n { background: var(--burgundy-700); border-color: var(--burgundy-700); color: var(--cream-logo); }
.wiz-progress li.is-done .wiz-progress__n span { display: none; }
.wiz-progress li.is-done .wiz-progress__n .icon { display: block; }
.wiz-bar { position: relative; height: 2px; background: transparent; margin-top: -1px; }
.wiz-bar span { position: absolute; inset: 0; background: var(--burgundy-700); transform-origin: 0 50%; transform: scaleX(var(--p, .333)); transition: transform 1s var(--ease-out); }
@media (max-width: 639px) {
  .wiz-progress li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 14px; font-size: .62rem; letter-spacing: .12em; }
  .wiz-progress__n { width: 26px; height: 26px; font-size: .64rem; }
}

.wiz-form { padding: clamp(24px, 4vw, 56px); }
/* Extends to the card edge, so the step slide is clipped at the border, not mid-glyph inside the padding */
.wiz-viewport { position: relative; margin-inline: calc(-1 * clamp(24px, 4vw, 56px)); padding-inline: clamp(24px, 4vw, 56px); }
.wiz-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.wiz-step__head { margin-bottom: clamp(24px, 3vw, 36px); }
.wiz-step__head h3 { outline: none; }
.wiz-step__head p { margin-top: 10px; color: var(--muted); font-size: .95rem; }
.wiz-step > * + * { margin-top: clamp(28px, 3.4vw, 40px); }
.wiz-step > legend + *, .wiz-step > .wiz-step__head + * { margin-top: 0; }
.wiz-step > .check { display: flex; }
.wiz-label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fg); }
.wiz-label small { font-size: .7rem; letter-spacing: .04em; text-transform: none; font-weight: 400; color: var(--muted); }
.wiz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wiz-row .span-2 { grid-column: 1 / -1; }
@media (max-width: 639px) { .wiz-row { grid-template-columns: 1fr; } }
.wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line); }
.wiz-nav__count { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.wiz-back { visibility: hidden; }
.wiz-back.is-visible { visibility: visible; }
@media (max-width: 479px) { .wiz-nav__count { display: none; } .wiz-nav .btn { padding: 0 22px; } }

/* Radio group error */
.choice-group__error { display: none; margin-top: 12px; font-size: var(--fs-xs); color: var(--danger); }
.choice-group.is-invalid .choice-group__error { display: block; }
.choice-group.is-invalid .occ, .choice-group.is-invalid .pal, .choice-group.is-invalid .opt span { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }

/* Occasion cards */
.occ-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.occ { position: relative; grid-column: span 2; display: flex; flex-direction: column; gap: 6px; min-height: 168px; padding: 22px 22px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: border-color .35s, background-color .35s, box-shadow .35s, transform .5s var(--ease-out); }
.occ:nth-child(-n+2) { grid-column: span 3; }
.occ input { position: absolute; opacity: 0; pointer-events: none; }
@media (hover: hover) { .occ:hover { border-color: var(--ink-400); } }
.occ__icon { color: var(--burgundy-700); }
.occ__icon .icon { width: 30px; height: 30px; stroke-width: 1; }
.occ__title { margin-top: 26px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; line-height: 1.15; color: var(--fg); }
.occ__desc { font-size: .82rem; line-height: 1.5; color: var(--muted); }
.occ__check { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--cream-logo); transition: background-color .35s var(--ease-out), border-color .35s; }
.occ__check .icon { width: 14px; height: 14px; stroke-width: 1.8; transform: scale(0); transition: transform .45s var(--ease-out); }
.occ:has(input:checked) { border-color: var(--burgundy-700); box-shadow: inset 0 0 0 1px var(--burgundy-700); background: var(--surface-2, var(--cream-50)); }
.occ:has(input:checked) .occ__check { background: var(--burgundy-700); border-color: var(--burgundy-700); }
.occ:has(input:checked) .occ__check .icon { transform: scale(1); }
.occ:has(input:focus-visible) { outline: 1px solid var(--fg); outline-offset: 3px; }
@media (max-width: 767px) {
  .occ-grid { grid-template-columns: 1fr 1fr; }
  .occ, .occ:nth-child(-n+2) { grid-column: span 1; min-height: 150px; padding: 18px; }
  .occ:last-child { grid-column: 1 / -1; min-height: 0; }
  .occ__title { font-size: 1.2rem; margin-top: 16px; }
}
@media (max-width: 379px) { .occ-grid { grid-template-columns: 1fr; } .occ { min-height: 0; } }

.wiz-qty { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border: 1px solid var(--line); background: var(--bg); }
.wiz-qty p { font-size: .92rem; color: var(--muted); }
.wiz-qty strong { display: block; color: var(--fg); font-weight: 500; }
.wiz-qty .qty { background: var(--surface-2, var(--cream-50)); }

/* Palette cards */
.pal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pal { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: border-color .35s, box-shadow .35s; }
.pal input { position: absolute; opacity: 0; pointer-events: none; }
@media (hover: hover) { .pal:hover { border-color: var(--ink-400); } }
.pal__sw { display: grid; grid-template-rows: 3fr 1.4fr 1fr; aspect-ratio: 5 / 4; overflow: hidden; }
.pal__sw i { display: block; background: var(--c); }
.pal__sw--free { display: grid; place-items: center; grid-template-rows: none; border: 1px dashed var(--line-strong); color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(29, 22, 19, .035) 10px 11px); }
.pal__sw--free .icon { width: 26px; height: 26px; stroke-width: 1; }
.pal__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font-size: .86rem; font-weight: 500; line-height: 1.3; color: var(--fg); }
.pal__name .icon { flex: none; width: 16px; height: 16px; color: var(--burgundy-700); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .45s var(--ease-out); stroke-width: 1.8; }
.pal:has(input:checked) { border-color: var(--burgundy-700); box-shadow: inset 0 0 0 1px var(--burgundy-700); }
.pal:has(input:checked) .pal__name .icon { opacity: 1; transform: none; }
.pal:has(input:focus-visible) { outline: 1px solid var(--fg); outline-offset: 3px; }
@media (max-width: 767px) { .pal-grid { grid-template-columns: 1fr 1fr; } }

.opt .swatch--none { background: linear-gradient(135deg, transparent 45%, var(--ink-400) 45% 55%, transparent 55%); box-shadow: inset 0 0 0 1px var(--line-strong); }
.opt input:checked + span .swatch { box-shadow: 0 0 0 1px rgba(247, 242, 234, .6); }
/* One selection language in the wizard: burgundy like the occasion and palette cards (shared pills fill near-black) */
.wiz .opt input:checked + span { background: var(--burgundy-700); border-color: var(--burgundy-700); color: var(--cream-logo); }
.wiz .opt input:checked + span .swatch--none { background: linear-gradient(135deg, transparent 45%, var(--cream-logo) 45% 55%, transparent 55%); box-shadow: inset 0 0 0 1px rgba(243, 234, 214, .5); }
@media (hover: hover) { .wiz .opt input:not(:checked) + span:hover { border-color: var(--ink-400); } }
/* touch: the shared pill hover sticks under the finger after a tap on the previous step */
@media (hover: none) { .wiz .opt input:not(:checked) + span:hover { border-color: var(--line-strong); } }
.wiz-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out), margin-top .6s var(--ease-out); margin-top: 0; }
.wiz-reveal > div { overflow: hidden; }
.wiz-reveal.is-open { grid-template-rows: 1fr; margin-top: 12px; }
.wiz-reveal > div > .field { margin: 2px; }

/* Budget range */
.budget { padding: 22px 22px 18px; border: 1px solid var(--line); background: var(--bg); }
.budget__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.budget__top .wiz-label { display: block; }
.budget__top .wiz-label small { display: block; margin-top: 6px; }
.budget__val { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.2vw, 2.7rem); line-height: 1; font-weight: 500; color: var(--fg); font-variant-numeric: lining-nums tabular-nums; }
.budget__hint { font-size: .8rem; color: var(--muted); }
.range { --p: 30%; width: 100%; height: 44px; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--burgundy-700), var(--burgundy-700)) 0 0 / var(--p) 100% no-repeat, var(--line-strong); }
.range::-moz-range-track { height: 2px; background: var(--line-strong); }
.range::-moz-range-progress { height: 2px; background: var(--burgundy-700); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -11px; border-radius: 50%; background: var(--burgundy-700); border: 5px solid var(--cream-50); box-shadow: 0 0 0 1px var(--burgundy-700); transition: transform .35s var(--ease-out); }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--burgundy-700); border: 5px solid var(--cream-50); box-shadow: 0 0 0 1px var(--burgundy-700); }
.range:hover::-webkit-slider-thumb, .range:active::-webkit-slider-thumb { transform: scale(1.15); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--burgundy-700), 0 0 0 6px color-mix(in srgb, var(--burgundy-700) 18%, transparent); }
.budget__scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: .7rem; letter-spacing: .12em; color: var(--muted); }

/* Upload */
.upload__drop { position: relative; display: flex; align-items: center; gap: 20px; padding: 22px 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: border-color .35s, background-color .35s; }
.upload__drop:hover, .upload__drop.is-drag { border-color: var(--burgundy-700); background: color-mix(in srgb, var(--burgundy-700) 4%, var(--bg)); }
.upload__drop:focus-within { outline: 1px solid var(--fg); outline-offset: 3px; }
.upload__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--burgundy-700); transition: transform .5s var(--ease-out); }
.upload__drop:hover .upload__icon, .upload__drop.is-drag .upload__icon { transform: translateY(-3px); }
.upload__icon .icon { width: 22px; height: 22px; }
.upload__title { display: block; font-weight: 500; color: var(--fg); }
.upload__sub { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.upload__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; margin-top: 12px; }
.upload__list:empty { display: none; }
.upload__item { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--cream-300); animation: thumb-in .6s var(--ease-out) both; }
@keyframes thumb-in { from { opacity: 0; transform: scale(.92); } }
.upload__item img { width: 100%; height: 100%; object-fit: cover; }
.upload__item button { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(29, 22, 19, .72); color: var(--cream-100); transition: background-color .3s; }
.upload__item button::after { content: ""; position: absolute; inset: -6px; }
.upload__item button:hover { background: var(--burgundy-700); }
.upload__item button .icon { width: 14px; height: 14px; }
.upload__item.is-leaving { animation: thumb-out .35s var(--ease-in-out) forwards; }
@keyframes thumb-out { to { opacity: 0; transform: scale(.9); } }
.upload__note { margin-top: 8px; font-size: var(--fs-xs); color: var(--danger); }

/* Success state */
.wiz-done { padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); text-align: center; outline: none; }
.wiz-done__mark { position: relative; width: 96px; height: 96px; margin: 0 auto 30px; color: var(--burgundy-700); }
.wiz-done__mark svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.wiz-done__mark svg.ring circle { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 302; stroke-dashoffset: 302; transform: rotate(-90deg); transform-origin: 50% 50%; }
.wiz-done.is-in .wiz-done__mark svg.ring circle { animation: ring-draw 1.6s var(--ease-out) .15s forwards; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
.wiz-done__mark .leaf { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; opacity: 0; transform: translateY(8px) rotate(-12deg); }
.wiz-done.is-in .wiz-done__mark .leaf { animation: leaf-in 1.2s var(--ease-out) .7s forwards; }
@keyframes leaf-in { to { opacity: 1; transform: none; } }
.wiz-done h3 { margin-top: 14px; }
.wiz-done > p { max-width: 460px; margin: 18px auto 0; color: var(--muted); }
.wiz-done strong { color: var(--fg); font-weight: 500; }
.wiz-done dl { max-width: 440px; margin: 34px auto 0; text-align: left; border-top: 1px solid var(--line); }
.wiz-done dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.wiz-done dt { color: var(--muted); }
.wiz-done dd { margin: 0; text-align: right; font-weight: 500; }
.wiz-done .c-actions { justify-content: center; margin-top: 40px; }
@media (min-width: 1024px) { .wiz-done dl { display: none; } }
.wiz-done > * { animation: done-up .9s var(--ease-out) both; }
.wiz-done > *:nth-child(2) { animation-delay: .25s; } .wiz-done > *:nth-child(3) { animation-delay: .35s; } .wiz-done > *:nth-child(4) { animation-delay: .45s; } .wiz-done > *:nth-child(5) { animation-delay: .55s; } .wiz-done > *:nth-child(6) { animation-delay: .65s; }
@keyframes done-up { from { opacity: 0; transform: translateY(14px); } }

/* Gallery scroller */
.gal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 4.5vw, 64px); }
.gal__head h2 { margin-top: 20px; }
.gal__nav { display: flex; gap: 10px; }
.gal__track { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 24vw, 360px); gap: clamp(12px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 var(--gutter) 8px; margin: 0; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.gal__track::-webkit-scrollbar { display: none; }
@media (min-width: 1569px) { .gal__track { padding-inline: calc((100vw - var(--container)) / 2); scroll-padding-inline: calc((100vw - var(--container)) / 2); } }
@media (max-width: 1023px) { .gal__track { gap: 16px; } }
.gal__item { scroll-snap-align: start; }
.gal__item a { display: block; }
.gal__item .media { aspect-ratio: 4 / 5; }
.gal__item .media img { transition: transform 1.4s var(--ease-out); }
.gal__item a:hover .media img, .js .gal__item a:hover .media.is-in > img { transform: scale(1.045); }
.gal__track { user-select: none; -webkit-user-select: none; }
@media (pointer: fine) { .gal__track { cursor: grab; } }
/* collection label above the name: never reads as part of the next card's title */
.gal__cap { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; margin-top: 14px; }
.gal__cap strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.2; }
.gal__cap span { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.gal__item--more a { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; padding: 28px; border: 1px solid var(--line-strong); transition: background-color .5s var(--ease-out), color .5s; }
.gal__item--more .t-d3 { text-wrap: balance; }
.gal__item--more a:hover, .gal__item--more a:focus-visible { background: var(--cream-logo); color: var(--forest-800); --muted: rgba(22, 36, 27, .6); }

/* ---------- 5. Kontakt ---------- */
.contact { padding-top: clamp(48px, 7vw, 112px); }
.contact__head { margin-bottom: clamp(40px, 5vw, 64px); }
.contact__head h1 { margin-top: 22px; }
.contact__head .t-lead { margin-top: 26px; max-width: 560px; }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 56px; align-items: start; }
.contact__info { grid-column: 1 / span 5; }
.contact__form { grid-column: 7 / -1; position: sticky; top: calc(var(--hdr-h-sm) + 32px); }
.contact__jump { display: none; margin-top: 30px; }
/* 1024–1279: a wider form column, so "Otázka k objednávke" fits the select; status boxes stacked */
@media (min-width: 1024px) and (max-width: 1279px) {
  .contact__info { grid-column: 1 / span 5; }
  .contact__form { grid-column: 6 / -1; }
  .cstatus { grid-template-columns: 1fr; }
}
/* a form taller than the screen must not be sticky (submit button would stay below the fold) */
@media (max-height: 860px) { .contact__form { position: static; } }
@media (max-width: 1023px) {
  .contact__info, .contact__form { grid-column: 1 / -1; position: static; }
  .contact__jump { display: inline-flex; }
}

.cinfo { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.cinfo li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
/* the whole row is the tap target; the copy button stays above it */
.cinfo a.cinfo__value::after { content: ""; position: absolute; inset: 0; }
.cinfo .icon-btn { position: relative; z-index: 1; width: 44px; height: 44px; }
.cinfo__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--burgundy-700); transition: background-color .5s var(--ease-out), color .5s, border-color .5s; }
.cinfo__icon .icon { width: 20px; height: 20px; }
.cinfo li:hover .cinfo__icon { background: var(--burgundy-700); border-color: var(--burgundy-700); color: var(--cream-logo); }
.cinfo__label { display: block; font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cinfo__value { display: inline-block; margin-top: 4px; font-family: var(--font-display); font-size: clamp(1.3rem, 1.15rem + .5vw, 1.65rem); font-weight: 500; line-height: 1.2; font-variant-numeric: lining-nums; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease-out); }
a.cinfo__value:hover { background-size: 100% 1px; }
.cinfo__copy { color: var(--muted); }
.cinfo__copy:hover { color: var(--fg); }
.cstatus { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 28px; background: var(--line); border: 1px solid var(--line); }
.cstatus > div { padding: 20px 22px; background: var(--bg); }
.cstatus .icon { width: 20px; height: 20px; color: var(--burgundy-700); margin-bottom: 12px; }
.cstatus strong { display: block; font-weight: 500; }
.cstatus > div > span { display: block; font-size: .85rem; color: var(--muted); margin-top: 2px; }
.cstatus__live { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 8px !important; font-size: .72rem !important; letter-spacing: .12em; text-transform: uppercase; }
.cstatus__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-300); }
.cstatus__live.is-open { color: var(--success) !important; }
.cstatus__live.is-open::before { background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); animation: live 2.4s ease-out infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 479px) { .cstatus { grid-template-columns: 1fr; } }
.contact__social { display: flex; align-items: center; gap: 16px; margin-top: 30px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.cform { position: relative; padding: clamp(26px, 4vw, 60px); background: var(--surface); border: 1px solid var(--line); }
.cform__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 30px; }
.cform__head p { margin-top: 8px; font-size: .92rem; color: var(--muted); }
.cform__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform__fields .span-2 { grid-column: 1 / -1; }
.cform__fields .field__textarea { min-height: 180px; }
.cform__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-top: 26px; }
.cform__foot .check { max-width: 380px; }
/* Required checkbox: visible error (the shared .check has no invalid state outside checkout) */
.check.is-invalid .check__box { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.check__error { display: none; margin-top: 6px; font-size: var(--fs-xs); color: var(--danger); }
.check.is-invalid .check__error { display: block; }
@media (max-width: 639px) { .cform__fields { grid-template-columns: 1fr; } .cform__foot .btn { width: 100%; } }
.cform__done { display: grid; justify-items: center; text-align: center; gap: 16px; padding: clamp(24px, 5vw, 64px) 0; outline: none; }
.cform__done .wiz-done__mark { margin-bottom: 12px; }
.cform__done p { max-width: 400px; color: var(--muted); }
.cform__done > * { animation: done-up .9s var(--ease-out) both; }

/* Atmosphere band */
.aband { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(460px, 76vh, 820px); color: var(--cream-logo); }
.aband__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(90% 90% at 50% 40%, #2a1d16 0%, #110c0b 75%); }
.aband::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(180deg, rgba(12, 8, 7, .25) 0%, rgba(12, 8, 7, .05) 35%, rgba(12, 8, 7, .8) 100%),
    linear-gradient(90deg, rgba(12, 8, 7, .55) 0%, rgba(12, 8, 7, .1) 50%, rgba(12, 8, 7, .45) 100%); }
.aband__inner { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-block: clamp(40px, 6vw, 88px); }
.aband__inner h2 { max-width: 760px; }
.aband__inner .t-lead { color: rgba(243, 234, 214, .78); max-width: 420px; }

/* ---------- 6. Legal pages ---------- */
.lhero { padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(36px, 4.5vw, 64px); border-bottom: 1px solid var(--line); }
.lhero__tabs { margin-bottom: clamp(36px, 5vw, 72px); }
.lhero__tabs .chip { font-size: .66rem; }
/* current document (the shared .chip only styles .is-active / aria-pressed) */
.lhero__tabs .chip[aria-current="page"] { color: var(--fg); }
.lhero__tabs .chip[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 1023px) { .lhero__tabs .chip { padding-block: 13px; } .lhero__tabs.chips { row-gap: 0; } }
.lhero__grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; }
.lhero h1 { margin-top: 20px; }
.lhero .t-lead { margin-top: 24px; max-width: 580px; }
.lhero__meta { list-style: none; padding: 0; display: grid; gap: 0; min-width: 260px; border-top: 1px solid var(--line); }
.lhero__meta li { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.lhero__meta li strong { color: var(--fg); font-weight: 500; }
.lhero__meta button { font-size: .82rem; color: var(--fg); display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.lhero__meta button .icon { width: 16px; height: 16px; }
@media (max-width: 639px) {
  .lhero__meta { min-width: 0; width: 100%; }
  .lhero__meta li:has([data-print]) { display: none; }
}

/* Reading column ≈ 70–75 characters, placed next to the TOC (no dead gutter, no text hugging the right edge) */
.legal { display: grid; grid-template-columns: minmax(210px, 260px) minmax(0, 560px); justify-content: start; column-gap: clamp(56px, 12vw, 220px); padding-block: clamp(48px, 6vw, 96px) var(--section-y); }
.toc { position: sticky; top: calc(var(--hdr-h-sm) + 40px); }
.toc__toggle { display: none; }
.toc__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toc__pct { font-size: .7rem; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.toc__bar { position: relative; height: 1px; margin-top: 14px; background: var(--line); overflow: hidden; }
.toc__bar span { position: absolute; inset: 0; background: var(--burgundy-700); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.toc__list { list-style: none; padding: 0; margin-top: 12px; max-height: calc(100vh - var(--hdr-h-sm) - 200px); overflow-y: auto; scrollbar-width: none; }
.toc__list::-webkit-scrollbar { display: none; }
.toc__list a { position: relative; display: grid; grid-template-columns: 2em 1fr; gap: 6px; padding: 8px 0 8px 16px; font-size: .88rem; line-height: 1.45; color: var(--muted); transition: color .3s; }
.toc__list a span { font-family: var(--font-display); font-style: italic; font-size: .98rem; line-height: 1.35; }
.toc__list a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: currentColor; opacity: .4; transition: width .5s var(--ease-out), opacity .3s, background-color .3s; }
.toc__list a:hover { color: var(--fg); }
.toc__list a.is-active { color: var(--fg); }
.toc__list a.is-active::before { width: 10px; opacity: 1; background: var(--burgundy-700); }
.toc__foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: .82rem; color: var(--muted); }
.toc__foot a { color: var(--fg); }
@media (max-width: 1023px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; }
  .legal__article { max-width: 580px; }
  .toc { position: relative; top: 0; border: 1px solid var(--line); background: var(--surface-2, var(--cream-50)); }
  .toc__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
  .toc__toggle .icon { transition: transform .5s var(--ease-out); }
  .toc.is-open .toc__toggle .icon { transform: rotate(180deg); }
  .toc__label, .toc__bar { display: none; }
  .toc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
  .toc.is-open .toc__panel { grid-template-rows: 1fr; }
  .toc__panel > div { overflow: hidden; visibility: hidden; transition: visibility 0s .6s; }
  .toc.is-open .toc__panel > div { visibility: visible; transition: visibility 0s; }
  /* set by content.js when a link is tapped: the panel closes instantly, before the scroll target is
     measured (a 0.6 s collapse shifted the page ~400 px after the jump). !important beats the
     reduced-motion .01ms rule, which would still leave the panel open at measuring time. */
  .toc.is-instant .toc__panel, .toc.is-instant .toc__panel > div { transition: none !important; }
  .toc__list { max-height: none; margin: 0; padding: 0 20px 12px; }
  .toc__list a { padding-block: 12px; }
  .toc__foot { margin: 0 20px; padding-bottom: 20px; }
}

.legal__article { counter-reset: sec; min-width: 0; }
.rights { list-style: none; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.rights li { margin: 0 !important; padding: 20px 22px; background: var(--surface-2, var(--cream-50)); }
.rights strong { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; line-height: 1.25; margin-bottom: 6px; }
.rights span { display: block; font-size: .9rem; line-height: 1.6; }
@media (max-width: 639px) { .rights { grid-template-columns: 1fr; } }
.legal__article .notice p { margin: 0; }
.legal__article .notice strong { color: var(--fg); }
.legal-form { padding: 24px 26px; border: 1px dashed var(--line-strong); background: var(--surface-2, var(--cream-50)); font-size: .92rem; }
.legal-form p + p { margin-top: .7em; }
.legal-form .blank { display: inline-block; min-width: 180px; border-bottom: 1px solid var(--line-strong); height: 1.1em; vertical-align: baseline; }
.legal__article > .notice { margin-bottom: 44px; }
.legal__article.prose { font-size: 1.0625rem; line-height: 1.8; color: var(--ink-600); }
.legal__article section { counter-increment: sec; padding-top: 8px; }
.legal__article section + section { margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(40px, 4.5vw, 64px); border-top: 1px solid var(--line); }
.legal__article h2 { margin-top: 0; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.1; }
.legal__article h2::before { content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 14px; font-family: var(--font-sans); font-size: .68rem; font-weight: 500; letter-spacing: .22em; color: var(--burgundy-700); }
.legal__article h3 { font-size: 1.35rem; margin-top: 1.6em; }
.legal__article section > * + * { margin-top: 1.1em; }
.legal__article section > h2 + * { margin-top: 1.4em; }
.clauses { list-style: none; padding-left: 0 !important; counter-reset: cl; }
.clauses > li { position: relative; counter-increment: cl; padding-left: 3.2em; }
.clauses > li + li { margin-top: .9em; }
.clauses > li::before { content: counter(sec) "." counter(cl); position: absolute; left: 0; top: .05em; font-size: .78rem; font-weight: 500; letter-spacing: .06em; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.clauses ul { margin-top: .6em; list-style: none; padding-left: 0 !important; }
.clauses ul li { position: relative; padding-left: 1.3em; }
.clauses ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: .6em; height: 1px; background: currentColor; opacity: .5; }
.prose .dash { list-style: none; padding-left: 0; }
.prose .dash li { position: relative; padding-left: 1.3em; }
.prose .dash li::before { content: ""; position: absolute; left: 0; top: .85em; width: .6em; height: 1px; background: currentColor; opacity: .5; }
.ph { padding: .05em .28em; margin-right: -.12em; border-radius: 2px; background: color-mix(in srgb, var(--burgundy-700) 9%, transparent); color: var(--burgundy-600); font-weight: 500; font-size: .95em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.legal-card { padding: 22px 24px; background: var(--surface-2, var(--cream-50)); border: 1px solid var(--line); color: var(--ink-600); }
.legal-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.legal-card dt { font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: .25em; }
.legal-card dd { margin: 0; color: var(--fg); }
@media (max-width: 479px) { .legal-card dl { grid-template-columns: 1fr; gap: 2px; } .legal-card dd + dt { margin-top: 10px; } }
.legal-table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.55; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.legal-table th { font-size: .64rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-strong); }
.legal-table td:first-child { color: var(--fg); font-weight: 500; }
@media (max-width: 639px) {
  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .legal-table td { padding: 2px 0; border: 0; }
  .legal-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .8rem; }
}

/* Doprava a platba — rendered from settings */
.free-band { display: flex; align-items: center; gap: 22px; padding: 26px 28px; background: var(--burgundy-800); color: var(--cream-logo); }
.free-band .icon { flex: none; width: 36px; height: 36px; stroke-width: 1; }
.prose .free-band__title { margin: 0; font-variant-numeric: lining-nums; font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + .7vw, 1.9rem); font-weight: 500; line-height: 1.2; color: var(--cream-logo); }
.prose .free-band__sub { margin: 4px 0 0; font-size: .88rem; color: rgba(243, 234, 214, .72); }
.mlist { list-style: none; padding: 0 !important; border-top: 1px solid var(--line); }
.mlist li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); margin: 0 !important; }
.mlist__icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--burgundy-700); }
.mlist__icon .icon { width: 22px; height: 22px; }
.mlist__title { display: block; color: var(--fg); font-weight: 500; line-height: 1.35; }
.mlist__desc { display: block; font-size: .88rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.mlist__price { text-align: right; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--fg); white-space: nowrap; line-height: 1.2; }
.mlist__price small { display: block; font-family: var(--font-sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--success); font-weight: 500; }
@media (max-width: 479px) { .mlist li { grid-template-columns: 44px minmax(0, 1fr); } .mlist__icon { width: 44px; height: 44px; } .mlist__price { grid-column: 2; text-align: left; } }
.timeline { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: tl; }
.timeline li { counter-increment: tl; position: relative; padding-top: 34px; margin: 0 !important; font-size: .9rem; line-height: 1.5; }
.timeline li::before { content: ""; position: absolute; left: 0; right: -12px; top: 9px; height: 1px; background: var(--line-strong); }
.timeline li:last-child::before { right: 0; background: linear-gradient(90deg, var(--line-strong), transparent); }
.timeline li::after { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--burgundy-700); }
.timeline li:first-child::after { background: var(--burgundy-700); }
.timeline strong { display: block; color: var(--fg); font-weight: 500; }
.timeline span { color: var(--muted); font-size: .84rem; }
@media (max-width: 639px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline li { padding: 0 0 22px 30px; }
  .timeline li::before { left: 5px; right: auto; top: 14px; bottom: 0; width: 1px; height: auto; }
  .timeline li::after { top: 5px; }
}
.pack-inline { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 24px; align-items: center; }
.pack-inline .media { aspect-ratio: 3 / 4; }
@media (max-width: 479px) { .pack-inline { grid-template-columns: 1fr; } .pack-inline .media { max-width: 240px; } }
.bank-card { position: relative; display: grid; grid-template-columns: 1fr; justify-items: start; gap: 22px 28px; align-items: center; padding: 26px 28px; background: var(--forest-800); color: var(--cream-logo); }
.bank-card dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.bank-card dt { font-size: .64rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 234, 214, .6); padding-top: .3em; }
.bank-card dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (min-width: 480px) { .bank-card dd[data-s="iban"] { white-space: nowrap; } }
.bank-card .btn { --btn-fg: var(--cream-logo); }
.bank-card__qr { display: grid; place-items: center; gap: 8px; width: 116px; padding: 12px; background: var(--cream-50); color: var(--ink-900); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; text-align: center; }
.bank-card__qr svg { width: 92px; height: 92px; }
@media (max-width: 639px) { .bank-card { grid-template-columns: 1fr; } .bank-card dl { grid-template-columns: 1fr; gap: 2px; } .bank-card dd + dt { margin-top: 10px; } }

/* Back to top */
.to-top { position: fixed; right: clamp(16px, 2.5vw, 36px); bottom: clamp(16px, 2.5vw, 36px); z-index: 50; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--cream-50); color: var(--ink-900); box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.92); pointer-events: none; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), background-color .4s, color .4s, visibility 0s .6s; }
/* hidden = out of the tab order too */
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), background-color .4s, color .4s, visibility 0s; }
.to-top:hover { background: var(--burgundy-700); color: var(--cream-logo); }
.to-top svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.to-top svg.ring circle { fill: none; stroke: var(--burgundy-700); stroke-width: 1.25; stroke-dasharray: 163.4; stroke-dashoffset: calc(163.4 * (1 - var(--p, 0))); }
.to-top:hover svg.ring circle { stroke: var(--cream-logo); }
.to-top .icon { width: 20px; height: 20px; }

/* ---------- 7. 404 ---------- */
.nf { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: max(640px, 100svh); padding: calc(var(--announce-h) + var(--hdr-h) + 32px) 0 72px; text-align: center; }
.nf__bg { position: absolute; inset: -12% 0; z-index: -2; background-size: cover; background-position: center; opacity: .2; mix-blend-mode: luminosity; }
.nf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 45%, rgba(22, 36, 27, 0) 0%, rgba(9, 15, 11, .75) 100%); pointer-events: none; }
.nf__code { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 400; font-size: clamp(8.5rem, 4rem + 20vw, 22rem); line-height: .8; letter-spacing: -.03em; color: var(--cream-logo); font-variant-numeric: lining-nums; }
.nf__zero { position: relative; display: inline-block; font-style: italic; padding: 0 .02em; }
.nf__zero .leaf { position: absolute; left: 55%; top: 48%; width: .2em; height: .2em; margin: -.1em 0 0 -.1em; color: var(--cream-logo); transform-origin: 30% 90%; animation: sway 6s var(--ease-in-out) infinite alternate; }
@keyframes sway { from { transform: rotate(-7deg) translateY(1%); } to { transform: rotate(6deg) translateY(-2%); } }
.nf h1 { margin-top: clamp(24px, 3vw, 40px); }
.nf .t-lead { max-width: 480px; margin: 20px auto 0; }
.nf .c-actions { justify-content: center; margin-top: 40px; }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 28px; margin-top: 44px; }
@media (max-width: 639px) { .nf .c-actions .btn { width: min(100%, 280px); justify-content: center; } }
/* 404 product strip at 320 px: title + price must be able to wrap (shared .pcard__body does not shrink) */
body[data-page="404"] .pcard__body { min-width: 0; flex-wrap: wrap; column-gap: 8px; }
body[data-page="404"] .pcard__title { min-width: 0; overflow-wrap: anywhere; }

/* ---------- 8. Print (legal pages) ---------- */
@media print {
  .site-top, .ftr, .newsletter, .toc, .to-top, .lhero__tabs, .lhero__meta button, .scrim, .drawer, .mnav, .search, .toasts { display: none !important; }
  body[data-header="solid"] main { padding-top: 0; }
  body::after { display: none; }
  .legal { display: block; padding: 0; }
  main { animation: none; }
}