/* Dárkový poukaz Koupelny Šota
   Tvar obálky DL (210 × 99 mm). Rozměry uvnitř jsou v cqw, takže stejný návrh sedí v náhledu na webu, v PDF i v tisku.
   Varianty: data-theme="koupelna" (ilustrační fotka z Canvy, MAHYifs2NP0) a "kuchyne" (kuchyň s ostrůvkem).
   Vlevo skutečná fotka přes celou výšku, vpravo bílá plocha s textem. Kosočtverce jen v logu. */

.vc-box { container-type: inline-size; width: 100%; max-width: 100%; }
.vc-flip { position: relative; display: grid; aspect-ratio: 210 / 99; perspective: 2400px; }
.vc { grid-area: 1 / 1; position: relative; overflow: hidden; display: grid; width: 100%; height: 100%;
  background: #fff; color: var(--ink); font-family: var(--font);
  box-shadow: 0 0 0 1px var(--line), 0 2cqw 5cqw -3cqw rgba(1, 58, 122, .35);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .8s var(--ease); }
.vc-back { transform: rotateY(180deg); }
.vc-flip[data-side=back] .vc-front { transform: rotateY(-180deg); }
.vc-flip[data-side=back] .vc-back { transform: rotateY(0); }
/* trojbarevný proužek z loga, stejně jako v patičce webu */
.vc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .8cqw; background: var(--tri); z-index: 3; }

/* ---------- Přední strana ---------- */
.vc-front { grid-template-columns: 45% minmax(0, 1fr); }
.vc-photo { position: relative; margin: 0; overflow: hidden; background: var(--ice); }
.vc-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vc[data-theme=koupelna] .vc-photo img { object-position: 50% 70%; }
.vc[data-theme=kuchyne] .vc-photo img { object-position: 12% 50%; }
.vc-main { display: grid; grid-template-rows: auto auto 1fr auto; min-width: 0; padding: 4.4cqw 4.6cqw 3.6cqw 4.8cqw; }
.vc-logo { display: block; height: 5.4cqw; width: auto; max-width: none; }
.vc-title { margin: 4cqw 0 0; font-weight: 500; font-size: 2.05cqw; letter-spacing: -.01em; line-height: 1.25; }
.vc-val { display: flex; align-items: baseline; gap: 1.2cqw; margin: .6cqw 0 0; color: var(--blue); font-weight: 300; font-size: 8.4cqw; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vc-val small { font-weight: 400; font-size: 3.2cqw; letter-spacing: -.01em; }
.vc-ded { align-self: center; display: grid; gap: .4cqw; padding-block: 1cqw; }
.vc-ded b { font-weight: 500; font-size: 1.75cqw; line-height: 1.25; }
.vc-ded p { margin: 0; color: var(--stone); font-size: 1.5cqw; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vc-ded i { color: var(--stone); font-style: italic; font-size: 1.4cqw; }
.vc-meta { display: flex; gap: 3.4cqw; padding-top: 1.4cqw; border-top: .1cqw solid var(--line); }
.vc-meta div { display: grid; gap: .2cqw; }
.vc-meta span { color: var(--stone); font-size: 1.2cqw; }
.vc-meta b { font-weight: 500; font-size: 1.45cqw; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Zadní strana ---------- */
.vc-back { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 5cqw; padding: 4.4cqw 5cqw 3.6cqw; }
.vc-back .vc-logo { grid-column: 1 / -1; height: 4.2cqw; margin-bottom: 3.2cqw; }
.vc-back h3 { margin: 0 0 1.4cqw; font-weight: 500; font-size: 1.75cqw; letter-spacing: -.01em; }
.vc-steps { display: grid; gap: 1.1cqw; margin: 0; padding: 0; list-style: none; counter-reset: vs; }
.vc-steps li { position: relative; padding-left: 2.8cqw; counter-increment: vs; font-size: 1.5cqw; line-height: 1.45; }
.vc-steps li::before { content: counter(vs) "."; position: absolute; left: 0; color: var(--blue); font-weight: 500; }
.vc-terms { margin: 0; color: var(--stone); font-size: 1.45cqw; line-height: 1.55; }
.vc-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 3cqw; padding-top: 1.6cqw; border-top: .1cqw solid var(--line); }
.vc-shops { display: flex; gap: 3.6cqw; }
.vc-shops div { display: grid; gap: .15cqw; color: var(--stone); font-size: 1.25cqw; line-height: 1.35; }
.vc-shops b { color: var(--ink); font-weight: 500; font-size: 1.35cqw; }
.vc-code { display: grid; justify-items: end; gap: .2cqw; }
.vc-code span { color: var(--stone); font-size: 1.2cqw; }
.vc-code b { color: var(--blue); font-weight: 500; font-size: 1.75cqw; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .vc { transition: none; } }

/* =========================================================
   Produktová stránka poukaz.html
   Vlevo náhled poukazu na ploše z dlaždic (drží se při posunu), vpravo volby a platba.
   ========================================================= */
.pp { padding: calc(var(--head) + clamp(32px, 6vh, 72px)) 0 var(--sec); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s3); padding: 0; list-style: none; color: var(--stone); font-size: .875rem; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a:hover { color: var(--blue); }
.pp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--block) var(--gap); align-items: start; }
@media (min-width: 961px) {
  .pp-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pp-stage { grid-column: 1 / span 7; position: sticky; top: calc(var(--head) + 28px); }
  .pp-side { grid-column: 8 / -1; }
}
.pp-stage { display: grid; gap: var(--s1); min-width: 0; }
.pp-canvas { display: grid; place-items: center; padding: clamp(24px, 6vw, 72px) clamp(16px, 4vw, 48px); background: var(--ice); }
.pp-canvas > div { width: 100%; }
.pp-under { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.pp-under p { color: var(--stone); font-size: .8125rem; line-height: 1.5; max-width: 34em; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 2px; background: none; color: var(--stone); font-weight: 500; font-size: .8125rem; cursor: pointer; transition: background var(--t), color var(--t); }
.seg button[aria-pressed=true] { background: var(--blue); color: #fff; }
.seg button:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }

.pp-side h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
.pp-price { display: flex; align-items: baseline; gap: 12px; margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); }
.pp-price b { color: var(--blue); font-weight: 200; font-size: clamp(2.4rem, 4vw, 3.2rem); letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.pp-price span { color: var(--stone); font-size: .875rem; }
.vform { margin-top: var(--s3); gap: 28px; }
.vform fieldset { display: grid; gap: 12px; min-width: 0; padding: 0; border: 0; }
.vform legend { margin-bottom: 12px; padding: 0; }
.vform legend small { margin-left: 6px; color: var(--stone); font-weight: 400; }

/* hodnoty jako dlaždice */
.vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vpick { position: relative; display: block; cursor: pointer; }
.vpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vpick > span { display: grid; place-items: center; min-height: 52px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-weight: 500; font-size: .9375rem; font-variant-numeric: tabular-nums; text-align: center; transition: border-color var(--t), background var(--t), color var(--t); }
.vpick:hover > span { border-color: var(--blue); color: var(--blue); }
.vpick input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }
.vpick input:focus-visible + span { outline: 2px solid var(--azure); outline-offset: 2px; }
.custom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.custom span { color: var(--stone); font-size: .875rem; }

/* motiv: dva malé náhledy */
.themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme > span { display: grid; gap: 10px; place-items: stretch; padding: 10px 10px 12px; text-align: left; }
.theme .vc { box-shadow: 0 0 0 1px var(--line); }
.theme > span > b { font-weight: 500; font-size: .9375rem; }
.theme > span > b > small { display: block; color: var(--stone); font-weight: 400; font-size: .8125rem; }
.vpick.theme input:checked + span { background: var(--ice); color: var(--ink); box-shadow: inset 0 0 0 1px var(--blue); }

/* doručení */
.dels { display: grid; gap: 8px; }
.del > span { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 14px; place-items: start; padding: 16px 18px; text-align: left; }
.del > span::before { content: ""; grid-row: 1 / 3; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--line); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #fff; transition: background var(--t), border-color var(--t); }
.del b { font-weight: 500; }
.del small { grid-column: 2; color: var(--stone); font-weight: 400; font-size: .875rem; line-height: 1.45; }
.del em { grid-row: 1; grid-column: 3; color: var(--blue); font-style: normal; font-weight: 500; font-size: .875rem; }
.vpick.del input:checked + span { background: var(--ice); color: var(--ink); box-shadow: inset 0 0 0 1px var(--blue); }
.vpick.del input:checked + span::before { border-color: var(--blue); background: var(--blue); }
.sub { display: grid; gap: 14px; padding: 16px 18px; border-left: 2px solid var(--blue); background: var(--ice); }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.5; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); }
.count { justify-self: end; color: var(--stone); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.field input[aria-invalid], .check input[aria-invalid] { border-color: #b3261e; outline: 2px solid rgba(179, 38, 30, .25); }
.pay { display: grid; gap: 12px; padding-top: var(--s2); border-top: 1px solid var(--line); }
.pay .btn { width: 100%; min-height: 58px; font-size: 1rem; }
.pay-note { display: flex; gap: 10px; align-items: flex-start; color: var(--stone); font-size: .8125rem; line-height: 1.5; }
.pay-note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--azure); }
.demo { padding: 10px 14px; border: 1px dashed var(--azure); color: var(--deep); font-size: .8125rem; line-height: 1.5; }

/* sekce pod produktem */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); }
.uses > div { display: grid; align-content: start; gap: 6px; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.uses dt { font-weight: 500; font-size: 1.1rem; letter-spacing: -.015em; }
.uses dd { color: var(--stone); font-size: .94rem; }
@media (max-width: 860px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .uses { grid-template-columns: minmax(0, 1fr); } .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* okno místo platební brány */
.paid-sum { color: var(--blue); font-weight: 200; font-size: 2.6rem; letter-spacing: -.04em; line-height: 1; }
.paid ol { display: grid; gap: 10px; margin: 20px 0 0; padding-left: 20px; color: var(--stone); font-size: .9375rem; }
.paid ol b { color: var(--ink); font-weight: 500; }

/* upoutávka na stránce E-shop */
.vteaser .vc-box { max-width: 560px; margin-inline: auto; }
.vteaser-media { display: block; }

/* Režim „připravujeme“ (form[data-prodej=pripravujeme]): poukaz jde navrhnout, ale ne koupit */
[data-jen-pripravujeme] { display: none; }
form[data-prodej=pripravujeme] [data-jen-prodej] { display: none !important; }
form[data-prodej=pripravujeme] [data-jen-pripravujeme] { display: revert; }
form[data-prodej=pripravujeme] p.soon[data-jen-pripravujeme] { display: block; }
.soon { padding: 16px 18px; border-left: 2px solid var(--blue); background: var(--ice); color: var(--stone); font-size: .9375rem; line-height: 1.55; }
.soon b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }