/* Koibito – obchod s personalizovanými dárky.
   Každý produkt má vlastní barevný svět (body[data-theme]); všechny komponenty berou barvy jen z proměnných. */

/* Barvy jako registrované vlastnosti: díky tomu se dá změna barevného světa plynule animovat (košík). */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #fbf3f1; }
@property --surface { syntax: "<color>"; inherits: true; initial-value: #fffaf9; }
@property --field { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --tint { syntax: "<color>"; inherits: true; initial-value: #f5e4e2; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #2e1a26; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #7a5f69; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #efdcd9; }
@property --line-2 { syntax: "<color>"; inherits: true; initial-value: #ddbdb9; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #b14d68; }
@property --on-accent { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --btn { syntax: "<color>"; inherits: true; initial-value: #4a1d35; }
@property --btn-ink { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --btn-hover { syntax: "<color>"; inherits: true; initial-value: #66284a; }
@property --head-bg { syntax: "<color>"; inherits: true; initial-value: rgba(251, 243, 241, .9); }
@property --night { syntax: "<color>"; inherits: true; initial-value: #24111f; }
@property --night-accent { syntax: "<color>"; inherits: true; initial-value: #e9a9b6; }

:root {
  /* romantický základ: krémově růžová, vínová a růžové zlato */
  --bg: #fbf3f1;
  --surface: #fffaf9;
  --field: #ffffff;
  --tint: #f5e4e2;
  --ink: #2e1a26;
  --muted: #7a5f69;
  --line: #efdcd9;
  --line-2: #ddbdb9;
  --accent: #b14d68;
  --on-accent: #ffffff;
  --btn: #4a1d35;
  --btn-ink: #ffffff;
  --btn-hover: #66284a;
  --stage: linear-gradient(160deg, #f5e3e1, #e8cdca);
  --head-bg: rgba(251, 243, 241, .9);
  --night: #24111f;
  --night-ink: #f7e9eb;
  --night-muted: #c8a9b4;
  --night-accent: #e9a9b6;
  --ok: #2f7a4f;
  --err: #b23a3f;
  --shadow: 0 24px 48px -30px rgba(74, 29, 53, .45);
  --display: "Koibito Garamond", "EB Garamond", Georgia, serif;
  --ui: "Koibito Sans", Montserrat, "Helvetica Neue", Arial, sans-serif;
  --hand: "Koibito Hand", Caveat, cursive;
  --script: "Koibito Script", "Great Vibes", cursive;
  --jp: "Koibito JP", "Noto Serif JP", "Yu Mincho", serif;
  --wrap: 1240px;
  --c-mapa: #1b2a52;
  --c-mesic: #8590a8;
  --c-dopis: #c2476a;
  --c-pribeh: #4b3aa0;
  --c-tapeta: #d9775a;
  color-scheme: light;
}

/* ---------- barevné světy produktů ---------- */
[data-theme="nebe"] {
  --bg: #0e0c22; --surface: #17142f; --field: #120f28; --tint: #13102a; --ink: #f1e7e2; --muted: #ab9fb6;
  --line: rgba(241, 231, 226, .12); --line-2: rgba(241, 231, 226, .3); --accent: #e3ac9b; --on-accent: #0e0c22;
  --btn: #f0cdbf; --btn-ink: #1a1230; --btn-hover: #f7dccf;
  --stage: radial-gradient(ellipse 85% 70% at 50% 36%, #3d3473 0%, #211b4a 58%, #120f2c 100%);
  --head-bg: rgba(14, 12, 34, .88); --night: #08061a; --night-accent: #e3ac9b; --shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
[data-theme="mesic"] {
  --bg: #f2edf2; --surface: #fbf8fb; --field: #ffffff; --tint: #e7dfe8; --ink: #251c33; --muted: #6a5f76;
  --line: #e0d6e2; --line-2: #c6b8ca; --accent: #8c6a8f; --on-accent: #ffffff;
  --btn: #2f2340; --btn-ink: #ffffff; --btn-hover: #463559;
  --stage: linear-gradient(165deg, #e6dde8, #cdbfd2);
  --head-bg: rgba(242, 237, 242, .9); --night: #1d1628; --night-accent: #d9bfd6;
}
[data-theme="ruze"] {
  --bg: #fbedf0; --surface: #fff8f9; --field: #ffffff; --tint: #f7dfe5; --ink: #4a1f2a; --muted: #8a5a66;
  --line: #f0d4db; --line-2: #e0b0bd; --accent: #c2476a; --on-accent: #ffffff;
  --btn: #b23c5f; --btn-ink: #ffffff; --btn-hover: #962f4f;
  --stage: linear-gradient(160deg, #f6dbe1, #ebc1cc);
  --head-bg: rgba(251, 237, 240, .9); --night: #3b1520; --night-ink: #f8e6ea; --night-muted: #d6aab5; --night-accent: #f0a3b8;
  --shadow: 0 24px 48px -30px rgba(90, 20, 40, .45);
}
[data-theme="indigo"] {
  --bg: #15113a; --surface: #1f1950; --field: #191445; --tint: #191444; --ink: #efe9ff; --muted: #b3aad8;
  --line: rgba(239, 233, 255, .13); --line-2: rgba(239, 233, 255, .32); --accent: #e3b96a; --on-accent: #15113a;
  --btn: #e3b96a; --btn-ink: #15113a; --btn-hover: #efca85;
  --stage: radial-gradient(ellipse 85% 70% at 50% 36%, #43388d 0%, #251d5c 58%, #17123f 100%);
  --head-bg: rgba(21, 17, 58, .88); --night: #0d0a27; --night-accent: #e3b96a; --shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
/* Měsíc v košíku: tmavá levandulová noc, aby ladil s mapou a nesvítil */
[data-theme="mesicnoc"] {
  --bg: #1f1829; --surface: #2a2236; --field: #241d31; --tint: #2d243b; --ink: #f2ebf5; --muted: #b9abc6;
  --line: rgba(242, 235, 245, .12); --line-2: rgba(242, 235, 245, .3); --accent: #d2b5df; --on-accent: #1f1829;
  --btn: #e4d1eb; --btn-ink: #1f1829; --btn-hover: #f0e3f4;
  --stage: radial-gradient(ellipse 85% 70% at 50% 36%, #554268 0%, #31264a 58%, #1c1527 100%);
  --head-bg: rgba(31, 24, 41, .88); --night: #140f1b; --night-accent: #d2b5df; --shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
[data-theme="soumrak"] {
  --bg: #fbf1ea; --surface: #fffaf6; --field: #ffffff; --tint: #f6e3d8; --ink: #2b2045; --muted: #74647c;
  --line: #efddd1; --line-2: #dbbfae; --accent: #c9654a; --on-accent: #ffffff;
  --btn: #2b2045; --btn-ink: #ffffff; --btn-hover: #42335f;
  --stage: linear-gradient(172deg, #2a2150 0%, #6e4a78 45%, #c67b7f 78%, #f0b28a 100%);
  --head-bg: rgba(251, 241, 234, .9); --night: #221a38; --night-accent: #f0b28a;
}

/* ---------- základ ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -.01em; }
h2 { font-size: clamp(32px, 3.8vw, 48px); }
h3 { font-size: 24px; }
p { margin: 0; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: 18px; color: var(--muted); max-width: 36em; }
.center { text-align: center; margin-inline: auto; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- tlačítka ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 13px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 18px 30px; border-radius: 999px; border: 1px solid var(--btn); background: var(--btn); color: var(--btn-ink); cursor: pointer; transition: transform .15s, background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn.light { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.light:hover { border-color: var(--ink); background: transparent; }
.btn.small { padding: 12px 18px; font-size: 11.5px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn .nb { text-transform: none; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- lišta, hlavička, menu ---------- */
.announce { background: var(--night); color: var(--night-ink); font-size: 13px; letter-spacing: .03em; text-align: center; padding: 9px 16px; padding-top: calc(9px + env(safe-area-inset-top, 0px)); }
.announce b { font-weight: 600; color: #fff; }
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--head-bg); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 70px; }
.logo { display: inline-flex; align-items: baseline; gap: 9px; position: relative; text-decoration: none; color: var(--ink); flex: none; }
.logo b { font-family: var(--display); font-weight: 500; font-size: 28px; letter-spacing: .03em; }
.logo i { font-family: var(--jp); font-style: normal; font-size: 14px; color: var(--accent); }
.logo-mark { width: 36px; height: 34px; align-self: center; margin: -4px 0 -4px -2px; fill: var(--accent); flex: none; }
.logo-mark .lm-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.site-foot .logo-mark { fill: var(--night-accent); } .site-foot .logo-mark .lm-line { stroke: var(--night-accent); }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 14px; }
.nav a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); padding: 8px 12px 8px 10px; border-radius: 999px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* ikony produktů: obrys v barvě textu, jeden detail v barvě produktu */
.pi { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pi .ac { fill: var(--dot); stroke: none; }
.pi .acs { stroke: var(--dot); }
.pi .lit { fill: var(--lit); stroke: none; }
.nav { --lit: #fffdf7; }
.nav a[data-p="mapa"] { --dot: #2c3f75; } .nav a[data-p="mesic"] { --dot: #8c6a8f; } .nav a[data-p="dopis"] { --dot: #c2476a; }
.nav a[data-p="pribeh"] { --dot: #6b57d1; } .nav a[data-p="tapeta"] { --dot: #d9775a; }
:is([data-theme="nebe"], [data-theme="indigo"], [data-theme="mesicnoc"]) .nav { --lit: #efe7d2; }
:is([data-theme="nebe"], [data-theme="indigo"], [data-theme="mesicnoc"]) .nav a[data-p="mapa"] { --dot: #e6d8b6; }
:is([data-theme="nebe"], [data-theme="indigo"], [data-theme="mesicnoc"]) .nav a[data-p="mesic"] { --dot: #c6b0d4; }
:is([data-theme="nebe"], [data-theme="indigo"], [data-theme="mesicnoc"]) .nav a[data-p="dopis"] { --dot: #f08aa5; }
:is([data-theme="nebe"], [data-theme="indigo"], [data-theme="mesicnoc"]) .nav a[data-p="pribeh"] { --dot: #b3a6ff; }
:is([data-theme="nebe"], [data-theme="indigo"], [data-theme="mesicnoc"]) .nav a[data-p="tapeta"] { --dot: #f2a585; }
.head-tools { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.cart-link { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); text-decoration: none; }
.cart-link:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.cart-link svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.cart-link .count { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 11px/19px var(--ui); text-align: center; }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; place-items: center; }
.menu-btn svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.6; fill: none; }
@media (max-width: 1080px) {
  /* backdrop-filter by z menu (position: fixed) udělal součást hlavičky, proto na mobilu neprůhledné pozadí */
  .site-head { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .menu-btn { display: inline-grid; }
  .nav { position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); z-index: 40; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 86px 18px 24px; background: var(--surface); box-shadow: -20px 0 60px rgba(0,0,0,.25); transform: translateX(105%); transition: transform .25s ease; font-size: 17px; }
  .nav.open { transform: none; }
  .nav a { padding: 14px 14px; border-radius: 10px; color: var(--ink); }
  .nav a { gap: 14px; }
  .nav .pi { width: 24px; height: 24px; }
  .nav .nav-close { position: absolute; top: 18px; right: 14px; }
  .head-tools { margin-left: auto; }
  .scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.35); }
  .menu-open .site-head { z-index: 45; }
}
@media (min-width: 1081px) { .nav .nav-close, .scrim, .nav .nav-extra { display: none !important; } }
.nav .nav-extra.first { margin-top: 18px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 22px; }

/* ---------- sekce ---------- */
.section { padding-block: 96px; }
.section.tinted { background: var(--tint); }
.section.tight { padding-block: 64px; }
.section-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 720px; }
.section-head.center { justify-items: center; text-align: center; margin-inline: auto; }
@media (max-width: 700px) { .section { padding-block: 68px; } .section-head { margin-bottom: 32px; } }

/* ---------- úvodní stránka ---------- */
.hero { padding-block: 44px 56px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ticks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--muted); }
.ticks li { display: flex; gap: 10px; align-items: baseline; }
.ticks li::before { content: "✓"; color: var(--accent); font-weight: 600; }
.hero-art img { width: 100%; border-radius: 10px; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 30px; } .hero-art { order: -1; } }

.trust { border-block: 1px solid var(--line); background: var(--surface); }
.trust ul { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.trust li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.trust li b { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
.trust svg { width: 32px; height: 32px; stroke: var(--accent); fill: none; stroke-width: 1.4; }
@media (max-width: 900px) { .trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .trust ul { grid-template-columns: minmax(0, 1fr); } }

/* dlaždice produktů – každá ve své barvě */
.shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.pcard { --pc-bg: #fff; --pc-ink: var(--ink); --pc-muted: var(--muted); --pc-accent: var(--accent); grid-column: span 2; position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 14px; overflow: hidden; text-decoration: none; background: var(--pc-bg); color: var(--pc-ink); transition: transform .25s ease, box-shadow .25s ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -34px rgba(0,0,0,.55); }
.pcard.big { grid-column: span 3; }
.pcard .pic { aspect-ratio: 4 / 3.4; overflow: hidden; }
.pcard.big .pic { aspect-ratio: 4 / 3; }
.pcard .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pcard:hover .pic img { transform: scale(1.03); }
.pcard .body { padding: 22px 24px 26px; display: grid; gap: 8px; align-content: start; }
.pcard .tag { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pc-accent); }
.pcard h3 { font-size: 30px; }
.pcard p { color: var(--pc-muted); font-size: 15px; }
.pcard .from { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; font-size: 14px; color: var(--pc-muted); }
.pcard .from b { color: var(--pc-ink); font-weight: 600; }
.pcard .from span:last-child { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-ink); }
.pcard[data-p="mapa"] { --pc-bg: #0e1530; --pc-ink: #ece5d4; --pc-muted: #a4a9bd; --pc-accent: #c6b288; }
.pcard[data-p="mesic"] { --pc-bg: #ebe3ee; --pc-ink: #2f2340; --pc-muted: #6c5f7a; --pc-accent: #8c6a8f; }
.pcard[data-p="dopis"] { --pc-bg: #f8dfe5; --pc-ink: #4a1f2a; --pc-muted: #87586a; --pc-accent: #c2476a; }
.pcard[data-p="pribeh"] { --pc-bg: #1d1748; --pc-ink: #efe9ff; --pc-muted: #b3aad8; --pc-accent: #e3b96a; }
.pcard[data-p="tapeta"] { --pc-bg: #f6e1d4; --pc-ink: #2b2045; --pc-muted: #74647c; --pc-accent: #c9654a; }
@media (max-width: 980px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pcard, .pcard.big { grid-column: span 1; } .pcard.big:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .shelf { grid-template-columns: minmax(0, 1fr); } .pcard.big:first-child { grid-column: auto; } }

.setband { margin-top: 20px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 22px 26px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.setband .badge { font-family: var(--display); font-size: 34px; line-height: 1; color: var(--accent); }
.setband b { display: block; font-size: 16px; }
.setband span { color: var(--muted); font-size: 14.5px; }
@media (max-width: 700px) { .setband { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

.occasions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.occasions a { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; font-size: 15px; background: var(--surface); }
.occasions a:hover { border-color: var(--ink); }
.occasions a small { color: var(--muted); font-size: 12.5px; }

.steps-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: s; }
.steps-how li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 30px 28px; display: grid; gap: 10px; align-content: start; counter-increment: s; }
.steps-how li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font-family: var(--display); font-size: 20px; }
.steps-how p { color: var(--muted); font-size: 15px; }
@media (max-width: 800px) { .steps-how { grid-template-columns: minmax(0, 1fr); } }

.night { background: var(--night); color: var(--night-ink); }
.night p, .night .lead { color: var(--night-muted); }
.night h2 { color: #fff; }
.night .kicker { color: var(--night-accent); }
.story .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.night .story-mark { color: var(--night-ink); }
.story-mark { font-family: var(--jp); font-size: clamp(110px, 15vw, 190px); line-height: 1; color: var(--night-ink); }
.story-mark small { display: block; font-family: var(--display); font-style: italic; font-size: 21px; color: var(--night-muted); margin-top: 18px; }
.story .copy { display: grid; gap: 18px; }
.story .copy p { font-size: 17px; max-width: 34em; }
.story .copy strong { color: var(--night-ink); font-weight: 500; }
.story .sign { font-family: var(--display); font-style: italic; font-size: 20px; color: var(--night-ink) !important; }
@media (max-width: 800px) { .story .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.xmas .wrap { display: grid; gap: 18px; justify-items: center; text-align: center; }

/* ---------- produktová stránka ---------- */
.pdp { padding-block: 28px 80px; }
.pdp-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 52px; align-items: start; }
.stage-col { position: sticky; top: 86px; display: grid; gap: 10px; }
.stage { position: relative; display: grid; gap: 16px; justify-items: center; align-content: center; min-height: min(78vh, 760px); padding: 34px 28px 26px; background: var(--stage); border-radius: 16px; overflow: hidden; }
.stage.loading::after { content: "Počítáme oblohu…"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; letter-spacing: .1em; color: var(--muted); background: inherit; }
.views { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.views button { font: 500 12.5px var(--ui); letter-spacing: .03em; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); cursor: pointer; }
.views button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
[data-theme="soumrak"] .views button { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); }
[data-theme="soumrak"] .views button[aria-pressed="true"] { background: #fff; color: #2b2045; }
.frame { position: relative; width: 100%; max-width: 470px; transition: max-width .25s, padding .25s, background .25s; }
.frame canvas { display: block; width: 100%; height: auto; }
.frame.black, .frame.oak, .frame.white { padding: 4.2%; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 30px 50px -22px rgba(10, 10, 20, .65), 0 6px 14px -6px rgba(10, 10, 20, .4); }
.frame.black { background: linear-gradient(135deg, #2c2824, #191613); }
.frame.oak { background: linear-gradient(135deg, #c09a6c, #a07a4c 50%, #b48d5f); }
.frame.white { background: linear-gradient(135deg, #fbfaf7, #eceae4); }
.frame.black canvas, .frame.oak canvas, .frame.white canvas { box-shadow: 0 0 0 1px rgba(0,0,0,.12), inset 0 0 6px rgba(0,0,0,.3); }
.frame.paper canvas { box-shadow: 0 24px 40px -22px rgba(10, 10, 20, .6), 0 2px 6px rgba(10, 10, 20, .18); }
.frame.card { max-width: 400px; }
.frame.card canvas { border-radius: 3px; box-shadow: 0 26px 40px -24px rgba(10, 10, 20, .6), 0 2px 5px rgba(10, 10, 20, .2); }
.frame.a4 { max-width: 430px; }
.frame.phone { transition: none; max-width: 262px; padding: 10px; border-radius: 44px; background: #0d0d10; box-shadow: 0 0 0 2px #2b2b30 inset, 0 30px 60px -24px rgba(0,0,0,.7); }
.frame.phone canvas { border-radius: 34px; }
.frame.phone.cut-button { padding: 48px 10px 60px; border-radius: 32px !important; }
.frame.phone.cut-button canvas { border-radius: 2px !important; }
.frame.phone.cut-button::before { content: ""; position: absolute; left: 50%; top: 22px; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px; background: #26262b; }
.frame.phone.cut-button::after { content: ""; position: absolute; left: 50%; bottom: 12px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; box-shadow: inset 0 0 0 2px #34343a; }
/* zamčená obrazovka přes náhled tapety (rozměry podle --sw = šířka displeje v px) */
.lock { position: absolute; z-index: 1; pointer-events: none; overflow: hidden; color: rgba(255,255,255,.96); font-family: var(--ui); text-align: center; }
.lock.dark { color: rgba(32, 22, 44, .9); }
.lock .cut { position: absolute; left: 50%; transform: translateX(-50%); background: #000; }
.lock .cut.island { top: calc(var(--sw) * .028); width: 31%; height: calc(var(--sw) * .093); border-radius: 999px; }
.lock .cut.notch { top: 0; width: 42%; height: calc(var(--sw) * .085); border-radius: 0 0 calc(var(--sw) * .055) calc(var(--sw) * .055); }
.lock .cut.punch { top: calc(var(--sw) * .03); width: calc(var(--sw) * .034); height: calc(var(--sw) * .034); border-radius: 50%; }
.lock .cut.drop { top: 0; width: calc(var(--sw) * .085); height: calc(var(--sw) * .05); border-radius: 0 0 999px 999px; }
.lock .ui { position: absolute; inset: 0; transition: opacity .2s; }
.lock.off .ui { opacity: 0; }
.lock .sb { position: absolute; top: calc(var(--sw) * .045); right: 7.5%; display: flex; gap: calc(var(--sw) * .018); align-items: center; }
.lock .sb svg { height: calc(var(--sw) * .036); width: auto; fill: currentColor; }
.lock .lk-date { position: absolute; left: 0; right: 0; font-weight: 500; font-size: calc(var(--sw) * .05); letter-spacing: .01em; }
.lock .lk-time { position: absolute; left: 0; right: 0; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lock.ios .lk-date, .lock.uni .lk-date { top: 8.3%; }
.lock.ios .lk-time, .lock.uni .lk-time { top: 10.6%; font-size: calc(var(--sw) * .25); font-weight: 600; }
.lock.se .lk-date { top: 8.8%; }
.lock.se .lk-time { top: 11.6%; font-size: calc(var(--sw) * .24); font-weight: 600; }
.lock.samsung .lk-time { top: 12%; font-size: calc(var(--sw) * .21); font-weight: 400; }
.lock.samsung .lk-date { top: 21.6%; font-size: calc(var(--sw) * .045); font-weight: 400; }
.lock.pixel .lk-date { top: 9.5%; font-size: calc(var(--sw) * .042); font-weight: 400; }
.lock.pixel .lk-time { top: 12.5%; font-size: calc(var(--sw) * .3); font-weight: 400; line-height: .92; }
.lock.android .lk-time { top: 11.5%; font-size: calc(var(--sw) * .2); font-weight: 300; }
.lock.android .lk-date { top: 20.6%; font-size: calc(var(--sw) * .045); font-weight: 400; }
.lock .btns { position: absolute; left: 10%; right: 10%; bottom: 5.4%; display: flex; justify-content: space-between; }
.lock .btns i { display: grid; place-items: center; width: calc(var(--sw) * .13); height: calc(var(--sw) * .13); border-radius: 50%; background: rgba(0,0,0,.26); }
.lock.dark .btns i { background: rgba(255,255,255,.4); }
.lock .btns svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lock.samsung .btns, .lock.pixel .btns, .lock.android .btns { left: 7%; right: 7%; bottom: 3.2%; }
.lock.samsung .btns i, .lock.pixel .btns i, .lock.android .btns i { background: none; width: calc(var(--sw) * .09); height: calc(var(--sw) * .09); }
.lock .home { position: absolute; left: 50%; bottom: 1.1%; width: 35%; height: calc(var(--sw) * .013); transform: translateX(-50%); border-radius: 999px; background: currentColor; }
.phonepick { display: grid; gap: 8px; justify-items: center; color: #fff; font-size: 12.5px; }
.phonepick .row1 { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: center; }
.phonepick label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.phonepick select { max-width: min(300px, 70vw); font: 500 12.5px var(--ui); color: #2b2045; background: rgba(255,255,255,.92); border: 0; border-radius: 999px; padding: 8px 30px 8px 13px; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #2b2045 50%), linear-gradient(135deg, #2b2045 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.phonepick input { accent-color: #fff; margin: 0; }
.phonepick small { opacity: .85; }
.zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: #141a2e; cursor: zoom-in; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); opacity: .9; }
.zoom:hover { opacity: 1; }
.zoom svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.frame.phone .zoom { right: -54px; bottom: 50%; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
[data-theme="soumrak"] .facts { color: rgba(255,255,255,.85); }
.facts b { color: var(--ink); font-weight: 600; }
[data-theme="soumrak"] .facts b { color: #fff; }
.stage-note { font-size: 12px; color: var(--muted); text-align: center; }
@media (max-width: 980px) {
  .pdp { padding-top: 12px; }
  .pdp-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .stage-col { position: static; }
  .stage { min-height: 0; padding: 22px 16px 18px; border-radius: 12px; }
  .frame { max-width: 360px; } .frame.card { max-width: 320px; } .frame.a4 { max-width: 330px; } .frame.phone { max-width: 230px; }
}

.buy-col { display: grid; gap: 20px; min-width: 0; }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.pdp-title { display: grid; gap: 10px; }
.pdp-title h1 { font-size: clamp(38px, 4.4vw, 56px); }
.pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 15px; color: var(--muted); }
.pdp-price b { font-size: 24px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.pdp-lead { color: var(--muted); font-size: 16.5px; max-width: 34em; }
.edit-note { padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 14px; }

/* kroky konfigurace */
.cfg { display: grid; gap: 10px; }
.step { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.step[open] { border-color: var(--line-2); box-shadow: var(--shadow); }
.step > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; }
.step > summary::-webkit-details-marker { display: none; }
.step .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.step[open] .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.step .t { display: grid; min-width: 0; }
.step .t b { font-size: 15px; font-weight: 600; }
.step .t small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step[open] .t small { display: none; }
.step .chev { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; transition: transform .2s; }
.step[open] .chev { transform: rotate(180deg); }
.step-body { padding: 4px 18px 20px; display: grid; gap: 18px; }
.step-body .next { justify-self: start; }
.group { display: grid; gap: 10px; min-width: 0; border: 0; margin: 0; padding: 0; }
.group > .label, .group > legend { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 0; }
.group > legend { margin-bottom: 10px; }
.group .label small, .group legend small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; font: 400 16px var(--ui); color: var(--ink); background: var(--field); border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 13px; }
.field textarea { line-height: 1.55; resize: vertical; min-height: 150px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field input:disabled { opacity: .5; }
.field input[aria-invalid="true"] { border-color: var(--err); }
.field .count { justify-self: end; font-size: 12px; font-variant-numeric: tabular-nums; }
.hint { font-size: 13px; color: var(--muted); }
.hint a { color: var(--ink); }
.sub-details summary { cursor: pointer; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sub-details[open] summary { margin-bottom: 12px; }
.sub-details > div { display: grid; gap: 12px; }
.search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.results button { width: 100%; text-align: left; font: 400 14px var(--ui); color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.results button:hover { border-color: var(--accent); }

/* volby */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input, .sw input, .opt input, .tog input, .vcard input, .fontpick input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; cursor: pointer; background: var(--field); color: var(--ink); transition: border-color .15s, background .15s, color .15s; user-select: none; }
.chip span:hover { border-color: var(--ink); }
.chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.chip input:focus-visible + span, .sw input:focus-visible + span, .opt input:focus-visible + span, .vcard input:focus-visible ~ *, .fontpick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip.star span::before { content: "✦"; color: var(--accent); }
.chip.star input:checked + span::before { color: inherit; }

.swatches { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.sw { position: relative; display: grid; justify-items: center; gap: 6px; width: 62px; cursor: pointer; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.2; }
.sw span { display: block; width: 46px; height: 46px; border-radius: 50%; background: var(--c1); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); position: relative; transition: box-shadow .15s; }
.sw span::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 36%, var(--c2) 0 2px, transparent 2.5px), radial-gradient(circle at 64% 56%, var(--c2) 0 1.4px, transparent 1.9px), radial-gradient(circle at 46% 70%, var(--c2) 0 1px, transparent 1.5px); }
.sw.plain span::after { display: none; }
.sw.grad span { background: linear-gradient(170deg, var(--c1), var(--c3)); }
.sw input:checked + span { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.sw input:checked ~ em { color: var(--ink); font-weight: 600; }
.sw em { font-style: normal; }

.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.opt { position: relative; cursor: pointer; }
.opt span { display: grid; justify-items: center; gap: 8px; padding: 14px 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--field); font-size: 13px; text-align: center; line-height: 1.25; color: var(--ink); height: 100%; transition: border-color .15s, box-shadow .15s; }
.opt span:hover { border-color: var(--ink); }
.opt svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.opt input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt small { color: var(--muted); font-size: 11.5px; }
.opt.star span b::before { content: "✦ "; color: var(--accent); }
.opt b { font-weight: 500; }

.fontpick { position: relative; cursor: pointer; }
.fontpick span { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--field); color: var(--ink); min-width: 118px; }
.fontpick span i { font-style: normal; font-size: 22px; line-height: 1.25; }
.fontpick span small { font-size: 11.5px; color: var(--muted); }
.fontpick input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.f-garamond { font-family: var(--display); } .f-kurziva { font-family: var(--display); font-style: italic !important; }
.f-rucni { font-family: var(--hand); font-size: 26px !important; } .f-kaligrafie { font-family: var(--script); font-size: 27px !important; }
.f-moderni { font-family: var(--ui); font-weight: 300; font-size: 19px !important; } .f-serif { font-family: var(--display); } .f-sans { font-family: var(--ui); font-weight: 300; letter-spacing: .12em; font-size: 15px !important; }

.toggles { display: grid; gap: 4px; }
.tog { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; font-size: 14.5px; }
.tog small { display: block; color: var(--muted); font-size: 12.5px; }
.tog i { width: 42px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; flex: none; }
.tog i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.tog input:checked + i { background: var(--accent); }
.tog input:checked + i::after { transform: translateX(18px); }
.tog input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.tog input:disabled + i { opacity: .4; }

.range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; color: var(--muted); }
.range input { width: 100%; accent-color: var(--accent); }

.starbox { border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 6%, transparent); display: grid; gap: 14px; }
.starbox .tog { padding: 0; }
.starbox .tog b { font-weight: 600; }
.starbox .tog b::before { content: "✦ "; color: var(--accent); }

.templates { display: flex; flex-wrap: wrap; gap: 6px; }
.templates button { font: 500 13px var(--ui); padding: 8px 13px; border-radius: 999px; border: 1px dashed var(--line-2); background: transparent; color: var(--ink); cursor: pointer; }
.templates button:hover { border-style: solid; border-color: var(--accent); }

/* provedení a cena */
.variants { display: grid; gap: 8px; }
.vcard { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vcard:hover { border-color: var(--ink); }
.vcard:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.vcard .dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.vcard .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .15s; }
.vcard input:checked ~ .dot { border-color: var(--ink); }
.vcard input:checked ~ .dot::after { transform: scale(1); }
.vcard b { display: block; font-size: 15px; font-weight: 600; }
.vcard small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; }
.vcard .tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.vcard .vp { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; white-space: nowrap; text-align: right; }
.vcard .vp s { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.frames { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 2px; }
.frames .chip span i { width: 16px; height: 16px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.extra { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 16px; border-radius: 12px; border: 1px dashed var(--line-2); cursor: pointer; font-size: 14px; }
.extra input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.extra small { display: block; color: var(--muted); font-size: 12.5px; }
.extra .vp { font-weight: 600; white-space: nowrap; }
.bonus { font-size: 13.5px; padding: 11px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.bonus a { font-weight: 600; }

.addbox { display: grid; gap: 12px; padding-top: 6px; }
.addrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.addrow .sum { display: grid; line-height: 1.2; }
.addrow .sum b { font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
.addrow .sum small { color: var(--muted); font-size: 12.5px; }
.status { font-size: 14px; min-height: 1.2em; }
.status:empty { display: none; }
.status.err { color: var(--err); }
:is([data-theme="nebe"], [data-theme="indigo"], [data-theme="mesicnoc"]) .status.err { color: #ff9a9a; }
.status.ok { color: var(--ok); }
.assure { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; font-size: 13px; color: var(--muted); }
.assure li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.assure svg { width: 18px; height: 18px; flex: none; stroke: var(--accent); fill: none; stroke-width: 1.6; margin-top: 1px; }
@media (max-width: 460px) { .assure { grid-template-columns: minmax(0, 1fr); } .row { grid-template-columns: minmax(0, 1fr); } .row3 { grid-template-columns: 1fr 1fr; } }

/* lepicí lišta na mobilu */
.mbar { display: none; }
@media (max-width: 980px) {
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); background: var(--head-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s ease; }
  .mbar.show { transform: none; }
  .mbar canvas { width: 40px; height: 52px; object-fit: contain; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer; }
  .mbar .sum { display: grid; line-height: 1.15; }
  .mbar .sum b { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .mbar .sum small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar .btn { padding: 14px 18px; }
  body.has-mbar { padding-bottom: 76px; }
}

/* inspirace */
.inspo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
@media (max-width: 980px) { .inspo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .inspo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .inspo .pic { padding: 12px; } .inspo b { font-size: 18px; } }
.inspo button { display: grid; gap: 12px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.inspo .pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--stage); padding: 18px; transition: transform .25s; }
.inspo button:hover .pic { transform: translateY(-3px); }
.inspo canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; box-shadow: 0 16px 26px -16px rgba(0,0,0,.6); }
.inspo .pic.phone canvas { border-radius: 14px; }
.inspo b { display: block; font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.15; }
.inspo small { color: var(--muted); font-size: 13px; }

/* co dostanete */
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.spec { padding: 26px 24px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.spec h3 { font-size: 24px; }
.spec .p { font-size: 14px; color: var(--muted); }
.spec .p b { color: var(--ink); font-weight: 600; font-size: 16px; }
.spec ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14.5px; display: grid; gap: 4px; }
@media (max-width: 860px) { .specs { grid-template-columns: minmax(0, 1fr); } }

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.feature .copy { display: grid; gap: 16px; }
.feature .copy p { color: var(--muted); font-size: 16.5px; }
.feature dl { margin: 6px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; }
.feature dt { font-family: var(--display); font-size: 34px; line-height: 1; }
.feature dd { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.feature .art { border-radius: 14px; overflow: hidden; background: var(--stage); display: grid; place-items: center; padding: 30px; }
.feature .art canvas, .feature .art img { width: 100%; max-width: 420px; height: auto; box-shadow: 0 26px 40px -24px rgba(0,0,0,.6); }
@media (max-width: 860px) { .feature { grid-template-columns: minmax(0, 1fr); gap: 30px; } }

/* další produkty */
.cross { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cross .pcard { grid-column: auto; }
.cross .pcard h3 { font-size: 24px; }
.cross .pcard .body { padding: 18px 18px 20px; }
.cross .pcard p { font-size: 14px; }
@media (max-width: 980px) { .cross { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cross { grid-template-columns: minmax(0, 1fr); } }

/* otázky */
.faq { display: grid; max-width: 860px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 20px; }
.faq summary { font-family: var(--display); font-size: 22px; list-style: none; display: flex; justify-content: space-between; gap: 16px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--ui); color: var(--accent); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin-top: 10px; max-width: 44em; }

/* zvětšený náhled */
.zoom-dlg { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.zoom-dlg::backdrop { background: rgba(8, 10, 20, .86); }
.zoom-dlg .zin { width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; padding: 56px 16px 24px; }
.zoom-dlg canvas { width: min(980px, 100%); height: auto; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.zoom-dlg.tall canvas { width: min(560px, 100%); }
.zoom-dlg .x { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 22px; cursor: pointer; }

/* toast po přidání do košíku */
.toast { position: fixed; z-index: 60; right: 20px; bottom: 20px; width: min(400px, calc(100vw - 28px)); border-radius: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 30px 70px -20px rgba(0,0,0,.45); transform: translateY(20px); opacity: 0; transition: transform .25s, opacity .25s; }
.toast.show { transform: none; opacity: 1; }
.toast-in { padding: 18px 18px 16px; display: grid; gap: 12px; }
.toast-head { font-weight: 600; font-size: 15px; display: flex; gap: 10px; align-items: center; }
.toast .tick { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 13px; }
.toast-tip { font-size: 13.5px; color: var(--muted); }
.toast-tip a { color: var(--ink); font-weight: 600; }
.toast-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 980px) { .toast { left: 14px; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: auto; } }

/* ---------- košík ---------- */
.cart-page { padding-block: 40px 96px; position: relative; isolation: isolate; }
/* záře v barvách produktů z košíku (vrstvy přidává kosik.js, nová sjede shora, stará se rozplyne) */
.cart-glow { position: absolute; inset: -90px 0 auto; height: 640px; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.cart-glow > div { position: absolute; inset: 0; opacity: 0; transform: translateY(-70px); transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.2, .8, .2, 1); }
.cart-glow > div.on { opacity: 1; transform: none; }
/* plynulá změna barevného světa, když se obsah košíku změní */
body.cart-anim, body.cart-anim .citem, body.cart-anim .site-head, body.cart-anim .checkout-box { transition: --bg .9s ease, --surface .9s ease, --field .9s ease, --tint .9s ease, --ink .9s ease, --muted .9s ease, --line .9s ease, --line-2 .9s ease,
  --accent .9s ease, --on-accent .9s ease, --btn .9s ease, --btn-ink .9s ease, --btn-hover .9s ease, --head-bg .9s ease, --night .9s ease, --night-accent .9s ease; }
.citem.leaving { animation: citemOut .34s ease forwards; }
@keyframes citemOut { to { opacity: 0; transform: translateX(28px) scale(.98); } }
@keyframes stripIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.checkout-box.wipe::before { animation: stripIn 1s cubic-bezier(.2, .8, .2, 1); }
.cart-lead { color: var(--muted); margin: 0; }
.cart-lead:empty, .cart-mix:empty { display: none; }
.cart-mix { display: flex; flex-wrap: wrap; gap: 8px; }
.mixchip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; font-size: 13px; background: var(--surface); border: 1px solid var(--line-2); }
.mixchip i { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 25%, transparent); }
.mixchip b { font-weight: 600; }
.cart-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.cart-list { display: grid; gap: 12px; }
.citem { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px; border-radius: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.citem .thumb { display: grid; place-items: center; width: 96px; height: 120px; border-radius: 10px; background: var(--stage); }
.citem .thumb canvas { max-width: 76px; max-height: 104px; width: auto; height: auto; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.citem h3 { font-size: 22px; }
.citem .desc { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }
.citem .acts { display: flex; gap: 16px; margin-top: 8px; font-size: 13.5px; }
.citem .acts .link { color: var(--muted); }
.citem .acts .link:hover { color: var(--ink); }
.citem .pr { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.citem .pr s { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
@media (max-width: 560px) { .citem { grid-template-columns: 72px minmax(0, 1fr); } .citem .thumb { width: 72px; height: 92px; } .citem .thumb canvas { max-width: 58px; max-height: 80px; } .citem .pr { grid-column: 2; text-align: left; } .citem .pr s { display: inline; margin-right: 6px; } }
.cart-empty { padding: 60px 24px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; display: grid; gap: 16px; justify-items: center; }
.upsell { display: grid; gap: 10px; margin-top: 8px; }
.upsell a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line-2); text-decoration: none; font-size: 14px; }
.upsell a:hover { border-color: var(--ink); }
.upsell a i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.upsell a small { display: block; color: var(--muted); font-size: 12.5px; }
.upsell a span:last-child { font-weight: 600; white-space: nowrap; }
.checkout-box { position: sticky; top: 90px; display: grid; gap: 18px; padding: 26px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.checkout-box::before { content: ""; position: absolute; inset: -1px -1px auto; height: 5px; border-radius: 16px 16px 0 0; background: var(--mixline, var(--accent)); }
.summary { display: grid; gap: 7px; font-size: 14.5px; margin: 0; }
.summary div { display: flex; justify-content: space-between; gap: 12px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.summary .disc dd { color: var(--ok); }
.summary .total { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; font-size: 18px; }
.summary .total dt { color: var(--ink); }
.summary .total dd { font-weight: 600; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 13.5px; color: var(--muted); align-items: start; cursor: pointer; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ink); }
.check a { color: var(--ink); }
.paylogos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.paylogos span { border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; font-weight: 600; letter-spacing: .04em; color: var(--ink); background: var(--field); }
.form-title { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 980px) { .cart-grid { grid-template-columns: minmax(0, 1fr); } .checkout-box { position: static; padding: 20px; } }

/* ---------- patička ---------- */
.site-foot { background: var(--night); color: var(--night-muted); padding-block: 64px calc(36px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.site-foot .logo { color: var(--night-ink); }
.site-foot .logo i { color: var(--night-accent); }
.site-foot h4 { margin: 0 0 12px; font: 600 11px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--night-accent); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.site-foot a { color: var(--night-muted); text-decoration: none; }
.site-foot a:hover { color: #fff; }
.site-foot .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 12.5px; }
@media (max-width: 860px) { .site-foot .wrap { grid-template-columns: 1fr 1fr; } .site-foot .wrap > div:first-child { grid-column: 1 / -1; } }

/* ---------- právní stránky ---------- */
.doc { padding-block: 64px 96px; }
.doc .wrap { max-width: 820px; }
.doc h1 { font-size: clamp(36px, 5vw, 54px); margin-bottom: 10px; }
.doc .updated { color: var(--muted); font-size: 13px; margin-bottom: 40px; }
.doc h2 { font-size: 27px; margin: 42px 0 12px; }
.doc p, .doc li { color: color-mix(in srgb, var(--ink) 85%, var(--bg)); font-size: 15.5px; }
.doc p + p { margin-top: 10px; }
.doc ol, .doc ul { padding-left: 22px; display: grid; gap: 6px; margin: 10px 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 12px 0; background: var(--surface); }
.doc th, .doc td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.doc .tablewrap { overflow-x: auto; }
.card-list { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } .citem.leaving, .checkout-box.wipe::before { animation: none; } }

/* živý příběh a doplňky voleb */
.storylive { display: grid; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); padding: 6px 26px; }
.storylive > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.storylive > div:last-child { border-bottom: 0; }
.storylive .k { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); padding-top: 5px; }
.storylive p { margin: 0; font-family: var(--display); font-size: 20px; line-height: 1.35; color: var(--ink) !important; }
@media (max-width: 520px) { .storylive { padding: 4px 18px; } .storylive > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 420px) { .opts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- stránka objednávky po zaplacení ---------- */
.thanks .wrap { max-width: 780px; }
.thanks-head { display: grid; gap: 12px; justify-items: start; margin-bottom: 30px; }
.thanks-mark { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin 1s linear infinite; }
.thanks-mark.ok { animation: none; border: 0; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 26px no-repeat; }
.thanks-mark.err { animation: none; border: 0; background: var(--err) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 26px no-repeat; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .thanks-mark { animation: none; } }
.thanks-box { display: grid; gap: 14px; padding: 26px; margin-bottom: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.thanks-box h2 { font-size: 26px; }
.thanks-box .addr { line-height: 1.6; }
.dl-list { display: grid; gap: 12px; }
.dl-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border-radius: 12px; background: var(--bg); }
.dl-row .thumb { display: grid; place-items: center; width: 96px; height: 120px; border-radius: 10px; background: var(--tint); }
.dl-row .thumb canvas { max-width: 76px; max-height: 104px; width: auto; height: auto; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.dl-row h3 { font-size: 21px; }
.dl-row .desc { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin: 2px 0 10px; }
.dl-btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .dl-row { grid-template-columns: 72px minmax(0, 1fr); } .dl-row .thumb { width: 72px; height: 92px; } .dl-row .thumb canvas { max-width: 58px; max-height: 80px; } .thanks-box { padding: 20px 16px; } }

.specs:has(> .spec:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .specs:has(> .spec:nth-child(4)) { grid-template-columns: minmax(0, 1fr); } }
.mailbox { margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--tint); display: grid; gap: 10px; }

/* ---------- souhlas s cookies ---------- */
.consent { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto; display: grid; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 18px 40px -16px rgba(0,0,0,.45); font-size: 14px; line-height: 1.5; }
.consent a { color: inherit; }
.consent-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.chip .plus { font-size: 12px; opacity: .7; font-weight: 500; }
.chip input:checked + span .plus { opacity: .85; }