/* tokens:start */
:root {
  --re-color-ink: #000000;
  --re-color-text: #1A1A1A;
  --re-color-muted: #5C5C5C;
  --re-color-line: #E6E6E6;
  --re-color-line-soft: rgba(0, 0, 0, .09);
  --re-color-field: #8A8A8A;
  --re-color-page: #FFFFFF;
  --re-color-cta-bg: #000000;
  --re-color-cta-fg: #FFFFFF;
  --re-color-cta-hover: #2B2B2B;
  --re-color-check: #000000;
  --re-color-panel-soft: #F3F2EF;
  --re-color-seal: #000000;
  --re-color-dot: #CFCFCF;
  --re-color-dot-on: #000000;
  --re-color-backdrop: rgba(0, 0, 0, .78);
  --re-color-sticker: #F0C420;
  --re-color-result: #2563EB;
  --re-color-result-fg: #FFFFFF;
  --re-color-error: #B91C1C;
  --re-color-star: #F5B301;
  --re-color-star-off: #D9D6CF;
  --re-tint-rj1: #D4E5D9;
  --re-tint-rj1-soft: #EAF2EC;
  --re-tint-rj2: #D2E4E7;
  --re-tint-rj2-soft: #E9F2F3;
  --re-tint-rj3: #E9DFD4;
  --re-tint-rj3-soft: #F4EFEA;
  --re-tint-rj4: #FCFCFC;
  --re-tint-rj4-soft: #FEFEFE;
  --re-tint-rj5: #F2DCD7;
  --re-tint-rj5-soft: #F9EEEB;
  --re-tint-rj6: #F3DFA5;
  --re-tint-rj6-soft: #F9EFD2;
  --re-tint-rj7: #E5DEEB;
  --re-tint-rj7-soft: #F2EFF5;
  --re-tint-rj8: #DCE1E7;
  --re-tint-rj8-soft: #EEF0F3;
  --re-tint-rs: #EADFD1;
  --re-tint-rs-soft: #F5EFE8;
  --re-font-heading: Montserrat, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --re-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --re-font-hand: Caveat, "Segoe Print", "Bradley Hand", cursive;
  --re-size-h1: clamp(30px, 4.2cqi, 44px);
  --re-size-h2: clamp(25px, 3.1cqi, 32px);
  --re-size-h3: 21px;
  --re-size-body: 18px;
  --re-size-body-phone: 17px;
  --re-size-lead: 20px;
  --re-size-lead-phone: 18px;
  --re-size-question: 19px;
  --re-size-trust: 16px;
  --re-size-small: 15px;
  --re-size-caption: 14px;
  --re-size-cta: 19px;
  --re-size-cta-phone: 18px;
  --re-size-price: 34px;
  --re-size-price-sticky: 22px;
  --re-size-hand-note: 27px;
  --re-size-hand-note-phone: 22px;
  --re-size-hand-name: 28px;
  --re-size-hand-gift: 25px;
  --re-size-hand-hint: 24px;
  --re-size-seal: 30px;
  --re-size-seal-phone: 22px;
  --re-size-seal-unit: 14px;
  --re-size-seal-unit-phone: 12px;
  --re-size-faq-icon: 26px;
  --re-size-sticker: 30px;
  --re-size-sticker-phone: 24px;
  --re-leading-h1: 1.25;
  --re-leading-heading: 1.4;
  --re-leading-body: 1.5;
  --re-leading-small: 1.4;
  --re-leading-hand: 1.15;
  --re-leading-tight: 1;
  --re-weight-medium: 500;
  --re-weight-semibold: 600;
  --re-weight-bold: 700;
  --re-weight-heavy: 800;
  --re-tracking-h1: -0.01em;
  --re-tracking-h2: -0.005em;
  --re-radius-sm: 4px;
  --re-radius-card: 8px;
  --re-radius-pill: 999px;
  --re-space-section: 64px;
  --re-space-section-phone: 44px;
  --re-space-block: 24px;
  --re-space-head: 10px;
  --re-space-card: 24px;
  --re-space-card-phone: 20px;
  --re-space-order: 36px;
  --re-space-card-gap: 10px;
  --re-space-grid: 20px;
  --re-space-stack: 12px;
  --re-space-list: 6px;
  --re-space-tick: 10px;
  --re-space-band: 30px;
  --re-layout-wrap: 1080px;
  --re-layout-gutter: max(16px, 3cqi);
  --re-layout-measure: 66ch;
  --re-layout-head: 760px;
  --re-layout-wide: 1320px;
  --re-layout-wrap-wide: 1360px;
  --re-layout-cta-height: 40px;
  --re-layout-cta-height-phone: 44px;
  --re-layout-cta-padding: 0 20px;
  --re-layout-bp-wide: 760px;
  --re-layout-bp-strip: 1180px;
  --re-layout-bp-art: 1000px;
  --re-layout-bp-phone: 600px;
  --re-shadow-card: 0 0 14px rgba(60, 35, 20, .07), 0 22px 44px -22px rgba(60, 35, 20, .30);
  --re-shadow-hero: drop-shadow(0 18px 22px rgba(60, 30, 20, .22));
  --re-shadow-closing: drop-shadow(0 14px 16px rgba(60, 30, 20, .18));
  --re-shadow-art: drop-shadow(0 10px 12px rgba(60, 35, 20, .22));
  --re-shadow-page: drop-shadow(0 12px 14px rgba(0, 0, 0, .16));
  --re-shadow-sticker: 0 10px 18px -4px rgba(60, 30, 20, .35);
  --re-shadow-badge: 0 3px 8px -2px rgba(20, 50, 10, .35);
  --re-motion-ease-out: cubic-bezier(.2, .8, .2, 1);
  --re-motion-ease-in-out: cubic-bezier(.4, 0, .6, 1);
  --re-motion-tilt: translateY(-3px) scale(1.03) rotate(-2.5deg);
  --re-motion-tilt-duration: .35s;
  --re-motion-lift: translateY(-3px);
  --re-motion-btn-duration: .2s;
  --re-motion-press-duration: .12s;
  --re-motion-swap-duration: .25s;
  --re-motion-page-duration: .5s;
  --re-motion-flip-idle: 5s;
  --re-motion-duo-left-rest: rotate(-9deg);
  --re-motion-duo-left-hover: translate(-5px, -2px) rotate(-14deg) scale(1.02);
  --re-motion-duo-left-duration: .4s;
  --re-motion-duo-right-rest: rotate(7deg);
  --re-motion-duo-right-hover: translate(6px, -9px) rotate(11deg) scale(1.04);
  --re-motion-duo-right-duration: .45s;
  --re-motion-duo-right-delay: .03s;
}
/* tokens:end */

/* Restartujem Web SDK. Everything below the token block is hand-written and uses only var(--re-*), never a raw hex.
   Naming: BEM with the re- prefix (block re-hero, element re-hero__text, modifier re-card--book).
   Base element rules sit in :where(.re) so a single component class always wins over them. */

/* ---------- product tints: the page picks its hero and highlight colour from its products ---------- */
.re { --re-hero-bg: var(--re-color-page); --re-highlight-bg: var(--re-color-page); }
.re[data-hero="rj1"] { --re-hero-bg: var(--re-tint-rj1); }
.re[data-hero="rj2"] { --re-hero-bg: var(--re-tint-rj2); }
.re[data-hero="rj3"] { --re-hero-bg: var(--re-tint-rj3); }
.re[data-hero="rj4"] { --re-hero-bg: var(--re-tint-rj4); }
.re[data-hero="rj5"] { --re-hero-bg: var(--re-tint-rj5); }
.re[data-hero="rj6"] { --re-hero-bg: var(--re-tint-rj6); }
.re[data-hero="rj7"] { --re-hero-bg: var(--re-tint-rj7); }
.re[data-hero="rj8"] { --re-hero-bg: var(--re-tint-rj8); }
.re[data-hero="rs"] { --re-hero-bg: var(--re-tint-rs); }
.re[data-highlight="rj1"] { --re-highlight-bg: var(--re-tint-rj1-soft); }
.re[data-highlight="rj2"] { --re-highlight-bg: var(--re-tint-rj2-soft); }
.re[data-highlight="rj3"] { --re-highlight-bg: var(--re-tint-rj3-soft); }
.re[data-highlight="rj4"] { --re-highlight-bg: var(--re-tint-rj4-soft); }
.re[data-highlight="rj5"] { --re-highlight-bg: var(--re-tint-rj5-soft); }
.re[data-highlight="rj6"] { --re-highlight-bg: var(--re-tint-rj6-soft); }
.re[data-highlight="rj7"] { --re-highlight-bg: var(--re-tint-rj7-soft); }
.re[data-highlight="rj8"] { --re-highlight-bg: var(--re-tint-rj8-soft); }
.re[data-highlight="rs"] { --re-highlight-bg: var(--re-tint-rs-soft); }

/* ---------- base ---------- */
:where(.re), :where(.re) *, :where(.re) *::before, :where(.re) *::after { box-sizing: border-box; }
.re {
  margin: 0; background: var(--re-color-page); color: var(--re-color-text);
  font-family: var(--re-font-body); font-size: var(--re-size-body); line-height: var(--re-leading-body);
  color-scheme: light; -webkit-font-smoothing: antialiased;
}
.re:lang(cs) { quotes: "„" "“" "‚" "‘"; }
:where(.re) button { font: inherit; color: inherit; }
:where(.re) h1, :where(.re) h2, :where(.re) h3, :where(.re) h4 { font-family: var(--re-font-heading); color: var(--re-color-ink); margin: 0; line-height: var(--re-leading-heading); text-wrap: balance; }
:where(.re) h1 { font-size: var(--re-size-h1); font-weight: var(--re-weight-heavy); line-height: var(--re-leading-h1); letter-spacing: var(--re-tracking-h1); }
:where(.re) h2 { font-size: var(--re-size-h2); font-weight: var(--re-weight-heavy); letter-spacing: var(--re-tracking-h2); }
:where(.re) h3 { font-size: var(--re-size-h3); font-weight: var(--re-weight-bold); }
:where(.re) p, :where(.re) ul, :where(.re) figure, :where(.re) blockquote { margin: 0; }
:where(.re) ul { padding: 0; list-style: none; }
:where(.re) img { display: block; max-width: 100%; height: auto; }
:where(.re) strong { font-weight: var(--re-weight-bold); color: var(--re-color-ink); }

/* ---------- layout ---------- */
/* The page is its own container, so the breakpoints follow the page width, not the screen (a narrow host column behaves like a phone). */
.re-page { container: re-page / inline-size; overflow-x: clip; }
.re-wrap { max-width: var(--re-layout-wrap); margin-inline: auto; padding-inline: var(--re-layout-gutter); }
.re-flow { display: grid; gap: var(--re-space-section); padding-block: var(--re-space-section); }
.re-section { display: grid; gap: var(--re-space-block); }
.re-section__head { display: grid; gap: var(--re-space-head); max-width: var(--re-layout-head); }
.re-measure { max-width: var(--re-layout-measure); }
.re-stack { display: grid; gap: var(--re-space-stack); align-content: start; }
.re-meta { font-size: var(--re-size-small); color: var(--re-color-muted); }
.re-grid { display: grid; gap: var(--re-space-grid); }
/* re-page--centred: headings of the white sections stand centred; a heading inside a card, panel or band stays left
   (Matej 29. 10. 2026, bundle page first; whether it becomes the default is decided in the SDK pass) */
.re-page--centred .re-flow > .re-section > .re-section__head { margin-inline: auto; text-align: center; justify-items: center; }
.re-page--centred .re-icon-cards__bridge { margin-inline: auto; }
.re-page--centred .re-order > h2 { text-align: center; }
/* re-page--wide: content around 1280 px, more of a computer screen in use (Matej 29. 10. 2026, bundle page first) */
.re-page--wide { --re-layout-wrap: var(--re-layout-wrap-wide); }

/* ---------- button: black pill, compact ---------- */
.re-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--re-layout-cta-height); padding: var(--re-layout-cta-padding); border-radius: var(--re-radius-pill);
  background: var(--re-color-cta-bg); color: var(--re-color-cta-fg);
  font: var(--re-weight-bold) var(--re-size-cta) / var(--re-leading-tight) var(--re-font-heading); text-decoration: none;
  transition: background-color var(--re-motion-btn-duration) ease, transform var(--re-motion-press-duration) ease;
}
/* .re in front: the Mioweb theme has a:not(.ve_content_button):hover with black text (0,2,1), measured 25. 10. 2026 */
.re .re-btn:hover { background: var(--re-color-cta-hover); color: var(--re-color-cta-fg); }
.re-btn:active { transform: translateY(1px); }
.re-btn:focus-visible { outline: 3px solid var(--re-color-ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--re-color-page); }
/* the main buttons (hero, offer, closing): larger and as wide as their column, the price above (Matej 29. 10. 2026) */
.re-btn--block { display: flex; width: 100%; min-height: 58px; font-size: 21px; }

/* ---------- price next to the button ---------- */
.re-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.re-price { font: var(--re-weight-heavy) var(--re-size-price) / var(--re-leading-tight) var(--re-font-heading); color: var(--re-color-ink); font-variant-numeric: tabular-nums; }
/* the discount line above the price: parts bought separately struck through, then the discount (DESIGN.md §11) */
.re-price__deal { display: block; font: var(--re-weight-bold) var(--re-size-small) / var(--re-leading-small) var(--re-font-body); color: var(--re-color-ink); margin-bottom: 6px; }
.re-price__was { font-weight: var(--re-weight-medium); color: var(--re-color-muted); margin-right: 4px; }
.re-price__note { display: block; font: var(--re-weight-medium) var(--re-size-small) / var(--re-leading-small) var(--re-font-body); color: var(--re-color-muted); margin-top: 4px; }
.re-buy--stack { display: grid; gap: 14px; justify-self: stretch; }
/* the price group, the same in the hero, the offer and the closing (Matej 29. 10. 2026): contents with the struck-through
   sum and the discount, the price with the saving, the gift in hand-writing, the button, the guarantee */
.re-price__now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* the saving looks like the result badge of a review screenshot */
.re-price__save {
  padding: 6px 12px; border-radius: var(--re-radius-pill); background: var(--re-color-result); color: var(--re-color-result-fg);
  box-shadow: var(--re-shadow-badge); font: var(--re-weight-bold) var(--re-size-small) / var(--re-leading-tight) var(--re-font-heading); rotate: -3deg;
}
.re-buy__gift { font-size: var(--re-size-hand-gift); transform: rotate(-2deg); transform-origin: left; margin-top: -4px; }
/* a small call between sections: the review count, the button and the guarantee, centred (Matej 29. 10. 2026) */
.re-cta { display: grid; gap: 12px; justify-items: center; justify-self: center; width: min(100%, 460px); margin-top: 12px; text-align: center; }
.re-buy__guarantee { display: flex; align-items: center; justify-content: center; gap: 10px; font: var(--re-weight-semibold) var(--re-size-small) / var(--re-leading-small) var(--re-font-heading); color: var(--re-color-ink); }
/* a small seal: the hand-drawn ring of the guarantee block with a hand-drawn tick inside */
.re-buy__seal { position: relative; flex: none; width: 34px; height: 31px; }
.re-buy__seal::before, .re-buy__seal::after { content: ""; position: absolute; background: var(--re-color-seal); }
.re-buy__seal::before {
  inset: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 128 118' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M86 11C60 1 22 9 11 40C3 71 30 101 63 100C97 99 116 71 110 43C105 19 84 8 64 7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 128 118' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M86 11C60 1 22 9 11 40C3 71 30 101 63 100C97 99 116 71 110 43C105 19 84 8 64 7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.re-buy__seal::after {
  inset: 7px 8px 6px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5C6 14 8 16.5 9.3 19C12 12.5 16 7.5 21 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5C6 14 8 16.5 9.3 19C12 12.5 16 7.5 21 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- hand-drawn layer from our books ---------- */
.re-hand { font-family: var(--re-font-hand); font-weight: var(--re-weight-semibold); color: var(--re-color-ink); line-height: var(--re-leading-hand); }
.re-doodle { position: absolute; pointer-events: none; user-select: none; }
.re-ticks { display: grid; gap: var(--re-space-list); }
.re-ticks__item { display: flex; gap: var(--re-space-tick); align-items: flex-start; }
.re-mark { flex: none; background: var(--re-color-check); }
.re-mark--check {
  width: 22px; height: 22px; margin-top: 3px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5C6 14 8 16.5 9.3 19C12 12.5 16 7.5 21 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5C6 14 8 16.5 9.3 19C12 12.5 16 7.5 21 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.re-mark--cross {
  width: 20px; height: 20px; margin-top: 4px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 5C10 10 14 14.5 19.5 19.5M19 4.5C14 9.5 9.5 14 4.5 19.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 5C10 10 14 14.5 19.5 19.5M19 4.5C14 9.5 9.5 14 4.5 19.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* playful hover: images and icons lift, grow and tilt a little */
.re-tilt { transition: transform var(--re-motion-tilt-duration) var(--re-motion-ease-out); }
.re-tilt:hover, .re-card:hover .re-tilt, .re-trust__item:hover .re-tilt, .re-icon-cards__item:hover .re-tilt { transform: var(--re-motion-tilt); }

/* ---------- cards ---------- */
.re-card { background: var(--re-color-page); border-radius: var(--re-radius-card); box-shadow: var(--re-shadow-card); padding: var(--re-space-card); display: grid; gap: var(--re-space-card-gap); align-content: start; min-width: 0; }
.re-card__head { display: flex; align-items: center; gap: 18px; }
.re-card__icon { height: 64px; width: auto; max-width: 170px; object-fit: contain; object-position: left center; }

/* ---------- hero: tinted band, text and product balanced ---------- */
.re-hero { background: var(--re-hero-bg); padding-block: 48px 56px; overflow: clip; }
.re-hero__grid { display: grid; gap: 28px; align-items: center; }
.re-hero__text { display: grid; gap: 18px; align-content: center; }
/* the one pre-headline: Montserrat like the headings, sentence case (no eyebrow label: DESIGN.md §2) */
.re-hero__pre { font: var(--re-weight-bold) var(--re-size-lead) / var(--re-leading-heading) var(--re-font-heading); color: var(--re-color-ink); }
/* **words** in the H1 get the hand-drawn underline (1-2 words); nowrap keeps the stroke on one line (DESIGN.md §5) */
.re-hero__title strong { position: relative; white-space: nowrap; font-weight: inherit; }
.re-hero__title strong::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.18em; height: .3em; background: var(--re-color-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M3 12C45 7 100 5 197 8M24 16C80 12 126 11 170 13'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M3 12C45 7 100 5 197 8M24 16C80 12 126 11 170 13'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.re-hero__lead { font-size: var(--re-size-lead); color: var(--re-color-ink); max-width: 30em; text-wrap: balance; } /* two even lines break before „a večeře“ */
.re-hero__lead strong { font-weight: inherit; } /* the strong only marks where the line breaks on a computer */
.re-hero__art { position: relative; justify-self: center; width: min(100%, 620px); }
.re-hero__product { position: relative; width: 100%; filter: var(--re-shadow-hero); }
.re-hero__note { position: absolute; right: 0; top: -2px; transform: rotate(-4deg); font-size: var(--re-size-hand-note); text-align: right; }
.re-hero__gift { font-size: var(--re-size-hand-gift); transform: rotate(-2deg); transform-origin: left; margin-top: -6px; }
.re-hero__arrow { right: 2%; top: 30px; width: 46px; transform: rotate(30deg) scaleX(-1); }
/* round discount sticker on the product photo (hero and closing); the number is {{discount.<id>}} from CORE, never typed (DESIGN.md §11) */
.re-sticker {
  position: absolute; width: 20cqi; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: .7cqi;
  background: var(--re-color-sticker); color: var(--re-color-ink); box-shadow: var(--re-shadow-sticker);
  font: var(--re-weight-bold) var(--re-size-small) / var(--re-leading-tight) var(--re-font-heading); font-size: 2.5cqi;
  transform: rotate(-12deg);
}
.re-sticker__num { font-size: 5cqi; font-weight: var(--re-weight-heavy); }
/* the sticker and its text are sized in cqi of the photo's box, so on every screen it covers the same part of the books
   (Matej 29. 10. 2026: on phones narrower than 375 px a fixed sticker hid the mockup) */
.re-hero__shot, .re-closing__art { container-type: inline-size; }
.re-hero__sticker { right: 0; bottom: 4%; }
/* hero art of a product page: stars with the review count above the photo, the rating card under it */
.re-hero__art:has(> .re-hero__shot) { display: grid; gap: 14px; justify-items: center; }
.re-hero__shot { position: relative; width: 100%; margin-block: -7% -3%; } /* the photo has ~12 % empty space above the books: pull it up to the stars */
.re-hero__rating { justify-self: start; }
.re-hero__rating, .re-cta__rating { font: var(--re-weight-bold) var(--re-size-trust) / var(--re-leading-small) var(--re-font-heading); color: var(--re-color-ink); }
.re-hero__rating .re-stars, .re-cta__rating .re-stars { font-size: inherit; letter-spacing: normal; } /* „★★★★★ Přes 1 000 referencí“ as one line of text (Matej 29. 10. 2026) */
/* text stars, never the emoji: WordPress turns ⭐ into images from s.w.org */
.re-stars { color: var(--re-color-star); font-size: 22px; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.re-stars--google { /* 4,6 of 5 = 92 % of the five stars gold */
  letter-spacing: 0; background: linear-gradient(90deg, var(--re-color-star) 92%, var(--re-color-star-off) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.re-score {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; width: min(100%, 520px);
  background: var(--re-color-page); border-radius: var(--re-radius-card); box-shadow: var(--re-shadow-card); padding: 16px 26px;
}
.re-score__value { display: grid; justify-items: center; gap: 4px; }
.re-score .re-stars { font-size: 24px; }
.re-score__num { font: var(--re-weight-heavy) 36px / 1 var(--re-font-heading); color: var(--re-color-ink); }
.re-score__text { display: grid; gap: 4px; font-size: var(--re-size-small); color: var(--re-color-muted); }
.re-score__fact { font: var(--re-weight-heavy) 19px / var(--re-leading-tight) var(--re-font-heading); color: var(--re-color-ink); }

/* ---------- trust strip under the hero ---------- */
.re-trust { display: grid; gap: 14px; padding-block: 22px; border-bottom: 1px solid var(--re-color-line); }
.re-trust__item { display: flex; align-items: center; gap: 12px; font-weight: var(--re-weight-semibold); color: var(--re-color-ink); font-size: var(--re-size-trust); }
.re-trust__icon { width: 40px; height: 40px; object-fit: contain; flex: none; }

/* ---------- problem ---------- */
.re-problem__questions { display: grid; gap: 2px; font: var(--re-weight-bold) var(--re-size-question) / var(--re-leading-body) var(--re-font-heading); color: var(--re-color-ink); }
.re-problem__grid { display: grid; gap: 28px; align-items: center; }
.re-problem__art { justify-self: center; width: min(100%, 320px); }
.re-problem__img { width: 100%; border-radius: var(--re-radius-card); box-shadow: var(--re-shadow-card); }

/* ---------- icon cards ---------- */
.re-icon-cards__bridge { font-size: var(--re-size-lead); font-weight: var(--re-weight-semibold); color: var(--re-color-ink); }
/* re-icon-cards--list: the two places as a narrow list, a drawing like a bullet next to each, no cards
   (Matej 29. 10. 2026, bundle page first); as narrow as the FAQ */
.re-icon-cards--list { width: 100%; max-width: var(--re-layout-head); justify-self: center; }
.re-icon-cards__list { display: grid; gap: 28px; }
.re-icon-cards__item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start; }
.re-icon-cards__icon { justify-self: center; height: 60px; width: auto; max-width: 72px; object-fit: contain; }
.re-icon-cards__body { display: grid; gap: 6px; }

/* ---------- books: cover that flips through spreads ---------- */
.re-book { padding: 0; overflow: clip; }
.re-book__plane { padding: 20px 20px 0; }
.re-book__body { padding: 44px 24px 24px; display: grid; gap: var(--re-space-card-gap); }
.re-flip { position: relative; display: block; width: 100%; aspect-ratio: 1100 / 776; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1400px; }
.re-flip__page { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: var(--re-shadow-page); transform-origin: left center; backface-visibility: hidden; }
.re-flip__page--enter { animation: re-page-in var(--re-motion-page-duration) var(--re-motion-ease-out) both; }
.re-flip__page--leave { animation: re-page-out var(--re-motion-page-duration) var(--re-motion-ease-in-out) both; }
@keyframes re-page-in { from { opacity: 0; transform: rotateY(-28deg) translateX(6%); } to { opacity: 1; transform: none; } }
@keyframes re-page-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: rotateY(22deg) translateX(-4%); } }
@keyframes re-fade { from { opacity: 0; } to { opacity: 1; } }
.re-flip:focus-visible { outline: 3px solid var(--re-color-ink); outline-offset: 4px; border-radius: var(--re-radius-sm); }
.re-flip__hint { position: absolute; right: 0; bottom: -34px; display: flex; align-items: center; gap: 4px; }
.re-flip:not(.re-flip--ready) .re-flip__hint { display: none; } /* without JS the cover does not flip, so no hint */
.re-flip__hint-text { font-size: var(--re-size-hand-hint); transform: rotate(-6deg); }
.re-flip__hint-arrow { width: 34px; transform: rotate(-150deg); } /* still: a bobbing arrow distracted (Matej 26. 10. 2026) */
.re-flip__dots { position: absolute; left: 0; right: 0; bottom: -22px; display: flex; justify-content: center; gap: 6px; }
.re-flip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--re-color-dot); }
.re-flip__dot--on { background: var(--re-color-dot-on); }

/* ---------- extras: e-books and the gift bar overflow their cards ---------- */
.re-extras { display: grid; gap: 56px var(--re-space-grid); margin-top: 44px; }
.re-extra { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 18px; align-items: center; overflow: visible; }
/* the shadow sits on the still wrapper: a drop-shadow on an image that turns on hover gets cut at the image's box (Safari) */
.re-extra__art { position: relative; height: 84px; filter: var(--re-shadow-art); }
.re-extra__img { position: absolute; bottom: 0; width: auto; }
/* two tablets move separately: the left one tilts left, the right one tilts right and jumps up */
.re-extra__img--left { left: -10px; height: 116px; transform: var(--re-motion-duo-left-rest); transition: transform var(--re-motion-duo-left-duration) var(--re-motion-ease-out); }
.re-extra__img--right { left: 36px; height: 116px; transform: var(--re-motion-duo-right-rest); transition: transform var(--re-motion-duo-right-duration) var(--re-motion-ease-out) var(--re-motion-duo-right-delay); }
.re-extra:hover .re-extra__img--left { transform: var(--re-motion-duo-left-hover); }
.re-extra:hover .re-extra__img--right { transform: var(--re-motion-duo-right-hover); }
/* the wrapped bar swaps to the unwrapped one on hover */
.re-extra__img--closed, .re-extra__img--open { left: 26px; height: 140px; transform: rotate(-8deg); transition: opacity var(--re-motion-swap-duration) ease, transform var(--re-motion-tilt-duration) var(--re-motion-ease-out); }
.re-extra:hover .re-extra__img--closed, .re-extra:hover .re-extra__img--open { transform: var(--re-motion-tilt) rotate(-8deg); }
.re-extra__img--open { opacity: 0; }
.re-extra:hover .re-extra__img--closed { opacity: 0; }
.re-extra:hover .re-extra__img--open { opacity: 1; }

/* ---------- gallery of book spreads ---------- */
.re-gallery__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 30%); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; margin-inline: -4px; }
.re-gallery__item { scroll-snap-align: start; }
.re-gallery__shot { display: grid; gap: 8px; cursor: zoom-in; color: var(--re-color-muted); font-size: var(--re-size-small); text-decoration: none; }
.re-gallery__img { width: 100%; aspect-ratio: 1100 / 776; object-fit: cover; border-radius: var(--re-radius-sm); box-shadow: var(--re-shadow-card); background: var(--re-color-page); }
.re-gallery__shot:focus-visible { outline: 3px solid var(--re-color-ink); outline-offset: 3px; border-radius: var(--re-radius-sm); }
.re-lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); width: 100%; }
.re-lightbox::backdrop { background: var(--re-color-backdrop, rgba(0, 0, 0, .78)); } /* older browsers do not pass custom properties to ::backdrop */
/* the whole spread and the bar below it fit the screen (a laptop at 768 px, a phone held sideways) */
.re-lightbox__img { width: auto; max-width: 100%; max-height: calc(100vh - 7rem); height: auto; margin-inline: auto; display: block; border-radius: var(--re-radius-sm); }
.re-lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.re-lightbox__btn { border: 0; border-radius: var(--re-radius-pill); background: var(--re-color-page); color: var(--re-color-ink); font: var(--re-weight-bold) var(--re-size-small) / var(--re-leading-tight) var(--re-font-heading); padding: 10px 16px; cursor: pointer; }
.re-lightbox__btn:focus-visible { outline: 3px solid var(--re-color-page); outline-offset: 2px; }

/* ---------- the one highlighted block: offer with paybox ---------- */
.re-offer { background: var(--re-highlight-bg); border-radius: var(--re-radius-card); padding: clamp(24px, 4cqi, 44px); position: relative; }
.re-offer__grid { display: grid; gap: 24px; align-items: center; }
.re-offer__row { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; border-bottom: 1px solid var(--re-color-line-soft); font-variant-numeric: tabular-nums; }
.re-offer__value { color: var(--re-color-ink); font-weight: var(--re-weight-semibold); } /* prices hold together by no-break spaces from the build */
.re-offer__row--sum { border-bottom: 0; font-weight: var(--re-weight-bold); color: var(--re-color-ink); }
.re-offer__paybox { background: var(--re-color-page); border-radius: var(--re-radius-card); box-shadow: var(--re-shadow-card); padding: var(--re-space-card); display: grid; gap: 14px; justify-items: start; }
.re-offer__gift { font-size: var(--re-size-hand-gift); transform: rotate(-3deg); }
.re-offer__reassure { font-size: var(--re-size-small); color: var(--re-color-muted); }

/* ---------- order form under the offer: FAPI draws it, its look comes from the form's custom_css_url ---------- */
.re-order { display: grid; gap: var(--re-space-head); margin-top: var(--re-space-block); scroll-margin-top: 24px; }
.re-page--wide .re-order { width: 100%; max-width: var(--re-layout-head); justify-self: center; } /* a form across the wide page looked lost: as narrow as the FAQ (Matej 29. 10. 2026) */
/* the form sits in a white card like the reviews; a wide form without a frame looked lost (Matej 26. 10. 2026) */
.re-order__form { background: var(--re-color-page); border-radius: var(--re-radius-card); box-shadow: var(--re-shadow-card); padding: var(--re-space-order); min-width: 0; }

/* ---------- review screenshots: anonymised customer comments with a result badge ---------- */
/* phones and tablets: a scroll-snap row like the gallery; the padding keeps the badges, which overhang the card, inside the scroller */
.re-review-shots__row { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 320px); gap: var(--re-space-grid); align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 12px 14px; margin-inline: -12px; }
.re-review-shots__item { scroll-snap-align: start; }
.re-review-shots__card { position: relative; background: var(--re-color-page); border-radius: var(--re-radius-card); box-shadow: var(--re-shadow-card); padding: 8px; }
.re-review-shots__link { display: block; cursor: zoom-in; border-radius: var(--re-radius-sm); }
.re-review-shots__link:focus-visible { outline: 3px solid var(--re-color-ink); outline-offset: 3px; }
.re-review-shots__img { width: 100%; border-radius: var(--re-radius-sm); }
/* a long e-mail shows its top and fades out; the whole one opens on click */
.re-review-shots__link--long { max-height: 360px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent); mask-image: linear-gradient(to bottom, black 78%, transparent); }
.re-review-shots__badge {
  position: absolute; top: -12px; right: -8px; max-width: calc(100% + 8px); padding: 6px 12px;
  border-radius: var(--re-radius-pill); background: var(--re-color-result); color: var(--re-color-result-fg); box-shadow: var(--re-shadow-badge);
  font: var(--re-weight-bold) var(--re-size-small) / var(--re-leading-tight) var(--re-font-heading);
}
/* cards and badges tilt irregularly to either side like pinned notes (Dominik's version B, Matej 26. 10. 2026);
   a badge turns against its card, so no two look alike in a row of five or six */
.re-review-shots__item:nth-child(6n+1) .re-review-shots__card { rotate: -1.4deg; }
.re-review-shots__item:nth-child(6n+2) .re-review-shots__card { rotate: 1deg; }
.re-review-shots__item:nth-child(6n+3) .re-review-shots__card { rotate: -.6deg; }
.re-review-shots__item:nth-child(6n+4) .re-review-shots__card { rotate: 1.5deg; }
.re-review-shots__item:nth-child(6n+5) .re-review-shots__card { rotate: -1deg; }
.re-review-shots__item:nth-child(6n) .re-review-shots__card { rotate: .7deg; }
.re-review-shots__item:nth-child(6n+1) .re-review-shots__badge { rotate: 3.5deg; }
.re-review-shots__item:nth-child(6n+2) .re-review-shots__badge { rotate: -3deg; }
.re-review-shots__item:nth-child(6n+3) .re-review-shots__badge { rotate: 2.5deg; }
.re-review-shots__item:nth-child(6n+4) .re-review-shots__badge { rotate: -4deg; }
.re-review-shots__item:nth-child(6n+5) .re-review-shots__badge { rotate: 3deg; }
.re-review-shots__item:nth-child(6n) .re-review-shots__badge { rotate: -2.5deg; }

/* ---------- reviews ---------- */
.re-review { display: flex; flex-direction: column; }
.re-review__quote { font-style: italic; }
.re .re-review__quote, .re .re-team__quote { quotes: inherit; }  /* the Mioweb theme sets blockquote { quotes: none } */
.re-review__quote::before, .re-team__quote::before { content: open-quote; }
.re-review__quote::after, .re-team__quote::after { content: close-quote; }
.re-review__caption { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.re-review__name { font-size: var(--re-size-hand-name); }
.re-review__source { font-size: var(--re-size-caption); color: var(--re-color-muted); }

/* ---------- guarantee on a quiet grey panel with a hand-drawn seal ---------- */
.re-guarantee { background: var(--re-color-panel-soft); border-radius: var(--re-radius-card); padding: clamp(24px, 4cqi, 40px); display: grid; gap: 20px; align-items: center; }
.re-guarantee__seal { position: relative; width: 136px; height: 120px; display: grid; place-items: center; text-align: center; }
.re-guarantee__seal::before {
  content: ""; position: absolute; inset: 0; background: var(--re-color-seal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 110' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M86 11C60 1 22 9 11 40C3 71 30 101 63 100C97 99 116 71 110 43C105 19 84 8 64 7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 110' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M86 11C60 1 22 9 11 40C3 71 30 101 63 100C97 99 116 71 110 43C105 19 84 8 64 7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.re-guarantee__star { position: absolute; right: -4px; top: -10px; width: 34px; transform: rotate(14deg); }
.re-guarantee__num { position: relative; font: var(--re-weight-heavy) var(--re-size-seal) / var(--re-leading-tight) var(--re-font-heading); color: var(--re-color-ink); }
.re-guarantee__unit { display: block; font: var(--re-weight-semibold) var(--re-size-seal-unit) / 1.2 var(--re-font-heading); margin-top: 2px; }

/* ---------- FAQ ---------- */
.re-faq { gap: 20px; }
.re-faq__item { border-bottom: 1px solid var(--re-color-line); }
.re-faq__q, .re-team__more-q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 52px; padding-block: 10px; font: var(--re-weight-bold) var(--re-size-body) / var(--re-leading-heading) var(--re-font-heading); color: var(--re-color-ink); }
.re-faq__q::-webkit-details-marker, .re-team__more-q::-webkit-details-marker { display: none; }
.re-faq__q::after, .re-team__more-q::after { content: "+"; font: var(--re-weight-medium) var(--re-size-faq-icon) / var(--re-leading-tight) var(--re-font-heading); flex: none; }
.re-faq__item[open] .re-faq__q::after, .re-team__more[open] .re-team__more-q::after { content: "–"; }
.re-faq__q:focus-visible, .re-team__more-q:focus-visible, .re-link:focus-visible { outline: 3px solid var(--re-color-ink); outline-offset: 2px; }
.re-faq__a { padding-bottom: 16px; max-width: var(--re-layout-measure); }

/* ---------- closing: a narrow band in the hero colour, the product photo sticks out above it ---------- */
/* the top ~12 % of hero.webp is transparent, so the photo needs a deep negative margin to really stick out */
.re-closing { background: var(--re-hero-bg); padding-block: var(--re-space-band); margin-top: 130px; }
.re-closing__grid { display: grid; gap: 16px; align-items: center; }
.re-closing__title { max-width: 20ch; }
.re-closing__lead strong { font-weight: inherit; } /* the strong only marks where the line breaks on a computer */
.re-closing__art { position: relative; justify-self: center; width: min(90%, 420px); order: -1; margin-top: -140px; }
.re-closing__img { width: 100%; filter: var(--re-shadow-closing); }
.re-closing__rays { left: -6%; top: 6%; width: 50px; transform: rotate(-28deg); }
.re-closing__sticker { right: 4%; bottom: 14%; } /* above the band's lower edge, the page footer follows */

/* ---------- sticky buy bar: phones only ---------- */
.re-sticky { display: none; }
.re-sticky__price { font: var(--re-weight-heavy) var(--re-size-price-sticky) / var(--re-leading-tight) var(--re-font-heading); color: var(--re-color-ink); }

/* ---------- wide page (two and three columns) ---------- */
@container re-page (min-width: 760px) {
  .re-hero { padding-block: 56px 64px; }
  .re-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; } /* 1.25: the H1's first line fits without an orphaned word */
  .re-problem__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
  .re-problem__art { width: 100%; }
  .re-trust { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .re-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .re-for-whom__col:last-child { border-left: 1px solid var(--re-color-line); padding-left: 32px; }
  .re-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-offer__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .re-guarantee { grid-template-columns: auto minmax(0, 1fr); gap: 32px; }
  .re-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; align-items: start; }
  .re-faq__list { max-width: 640px; }
  .re-page--centred .re-faq { grid-template-columns: minmax(0, 1fr); gap: 20px; } /* one column under the centred heading */
  .re-page--centred .re-faq__list { width: 100%; max-width: 760px; margin-inline: auto; }
  /* all eight spreads at once: a 4 × 2 grid instead of a row whose hidden half nobody finds with a mouse */
  .re-gallery__strip { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  /* in the content column: masonry in three columns */
  .re-review-shots:not(.re-review-shots--wide) .re-review-shots__row { display: block; columns: 3; column-gap: var(--re-space-grid); overflow: visible; padding: 12px 0 0; margin: 0; }
  .re-review-shots:not(.re-review-shots--wide) .re-review-shots__item { break-inside: avoid; padding: 12px 8px 16px 0; }
}

/* ---------- the wide strip of reviews: five cards in a row only where each is wide enough to read ---------- */
@container re-page (min-width: 1180px) {
  /* it leaves the content column and centres on the page (DESIGN.md §6); every card as tall as the row */
  .re-review-shots--wide .re-review-shots__row {
    grid-auto-columns: minmax(0, 1fr); align-items: stretch; overflow: visible; padding: 18px 0 0;
    width: min(100cqi - 2 * var(--re-layout-gutter), var(--re-layout-wide));
    margin-inline: calc((100% - min(100cqi - 2 * var(--re-layout-gutter), var(--re-layout-wide))) / 2);
  }
  .re-review-shots--wide .re-review-shots__item:nth-child(even) { margin-top: 28px; }
  .re-review-shots--wide .re-review-shots__card { height: 100%; }
  .re-review-shots--wide .re-review-shots__link--long { max-height: 300px; }
}

/* ---------- more room for the product photo (layout.bp-art) ---------- */
/* hero: the text column only as wide as the H1, the photo larger and allowed into the right margin;
   closing: two columns, text left, a large photo right that sticks out above the band */
@container re-page (min-width: 1000px) {
  .re-hero__grid { grid-template-columns: max-content minmax(0, 1fr); gap: 40px; }
  .re-hero__lead strong { display: block; } /* the second half on its own line keeps the text column narrow (Matej 26. 10. 2026) */
  .re-hero__art {
    justify-self: start; max-width: 600px;
    width: min(118%, 100% + max(0px, (100cqi - var(--re-layout-wrap)) / 2) + var(--re-layout-gutter) - 24px);
  }
  .re-closing { margin-top: 120px; } /* room for the photo above the band, clear of the FAQ */
  .re-closing__grid { grid-template-columns: max-content minmax(0, 1fr); column-gap: 48px; }
  .re-closing__lead strong { display: block; } /* the promise on its own line keeps the text column narrow (Matej 26. 10. 2026) */
  /* larger than its column, but never past the page edge: at most the wrap's outer margin minus 16 px */
  .re-closing__art {
    /* anchored at the top: the photo's visible edge stays ~90 px above the band at every width (Matej 26. 10. 2026);
       the deep bottom margin keeps it from making the band taller than the text */
    order: 0; justify-self: start; align-self: start; max-width: 590px; margin-block: -172px -400px;
    width: min(126%, 100% + max(0px, (100cqi - var(--re-layout-wrap)) / 2) + var(--re-layout-gutter) - 16px);
  }
  /* the wide page gives the product photos the room it gained */
  .re-page--wide .re-hero__art { max-width: 680px; }
  .re-page--wide .re-closing__art { max-width: 640px; }
}

/* ---------- phone ---------- */
@container re-page (max-width: 600px) {
  .re-flow { gap: var(--re-space-section-phone); padding-block: var(--re-space-section-phone); }
  .re-section, .re-hero, .re-trust, .re-closing { font-size: var(--re-size-body-phone); }
  .re-hero { padding-block: 28px 36px; }
  .re-hero__grid { gap: 16px; }
  /* phone order: pre-headline, H1, lead, image, price + button (CTA on the first screen) */
  .re-hero__text { display: contents; }
  .re-hero__pre { order: 1; font-size: var(--re-size-lead-phone); }
  .re-hero__title { order: 2; }
  .re-hero__title br { display: none; }
  .re-hero__lead { order: 3; font-size: var(--re-size-lead-phone); }
  .re-hero__art { order: 4; }
  .re-hero__art:has(> .re-hero__shot) { display: contents; }
  .re-hero__rating { order: 4; justify-self: center; text-align: center; font-size: var(--re-size-small); }
  .re-hero__shot { order: 5; justify-self: center; width: min(100%, 620px); }
  .re-hero__buy { order: 6; }
  .re-hero__gift { order: 7; }
  .re-hero__score { order: 8; justify-self: center; }
  .re-score { gap: 16px; padding: 14px 18px; }
  .re-score__num { font-size: 30px; }
  .re-score__fact { font-size: 17px; }
  .re-hero__note { font-size: var(--re-size-hand-note-phone); top: -6px; }
  .re-hero__arrow { width: 36px; top: 22px; }
  .re-sticker { width: 25cqi; gap: .8cqi; font-size: 3.1cqi; } /* a phone photo is small: a quarter of it keeps the text readable */
  .re-sticker__num { font-size: 6.2cqi; }
  /* the hero on a phone stands centred, on a computer left (Matej 29. 10. 2026, bundle page first) */
  .re-page--centred .re-hero__grid { text-align: center; }
  .re-page--centred .re-hero__lead { margin-inline: auto; }
  .re-page--centred .re-hero__buy .re-price__now { justify-content: center; }
  .re-page--centred .re-hero__buy .re-buy__gift { transform-origin: center; }
  .re-page--centred .re-hero__score { text-align: left; } /* a card keeps its own alignment */
  .re-card { padding: var(--re-space-card-phone); }
  .re-order__form { padding: var(--re-radius-card); } /* a phone has little room: the inner edge equals the corner radius */
  .re-book { padding: 0; }
  .re-gallery__strip { grid-auto-columns: 78%; }
  .re-extra { grid-template-columns: 128px minmax(0, 1fr); }
  .re-guarantee { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: start; }
  .re-guarantee__seal { width: 84px; height: 74px; }
  .re-guarantee__num { font-size: var(--re-size-seal-phone); }
  .re-guarantee__unit { font-size: var(--re-size-seal-unit-phone); }
  .re-btn { min-height: var(--re-layout-cta-height-phone); font-size: var(--re-size-cta-phone); }
  .re-btn--block { min-height: 54px; font-size: 20px; }
  .re-buy__gift { font-size: var(--re-size-hand-note-phone); }
  .re-buy__guarantee { font-size: var(--re-size-caption); }
  .re-icon-cards__item { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
  .re-icon-cards__icon { height: 48px; max-width: 52px; }
  .re-sticky {
    display: flex; position: sticky; bottom: 0; z-index: 2; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--re-color-page); border-top: 1px solid var(--re-color-line);
  }
}

/* ---------- the narrowest phones (under 360 px): the rating card stacks, its two halves do not fit side by side ---------- */
@container re-page (max-width: 359px) {
  .re-score, .re-page--centred .re-hero__score { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; text-align: center; }
}

/* ---------- reduced motion: everything stands still ---------- */
@media (prefers-reduced-motion: reduce) {
  .re-btn, .re-tilt, .re-extra__img { transition: none; }
  .re-tilt:hover, .re-card:hover .re-tilt, .re-trust__item:hover .re-tilt, .re-icon-cards__item:hover .re-tilt { transform: none; }
  .re-extra:hover .re-extra__img--left { transform: var(--re-motion-duo-left-rest); }
  .re-extra:hover .re-extra__img--right { transform: var(--re-motion-duo-right-rest); }
  .re-extra:hover .re-extra__img--closed, .re-extra:hover .re-extra__img--open { transform: rotate(-8deg); }
  .re-flip__page--enter { animation-name: re-fade; }
  .re-flip__page--leave { animation: none; opacity: 0; }
}

/* ---------- page without a product (O nás) ---------- */

/* text link: black, underlined (DESIGN.md §14 item 10) */
.re-link { color: var(--re-color-ink); font-weight: var(--re-weight-semibold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.re .re-link:hover { color: var(--re-color-ink); text-decoration-thickness: 2px; }
.re-proof__link::after, .re-channels__handle::after { content: "\00a0→"; content: "\00a0→" / ""; }

.re-hero__photo { width: 100%; border-radius: var(--re-radius-card); box-shadow: var(--re-shadow-card); }
.re-hero--photo .re-hero__note { top: -36px; right: 8px; }
.re[data-hero="none"] .re-hero--photo { padding-bottom: 0; }

.re-stats__intro { max-width: var(--re-layout-head); font-size: var(--re-size-lead); color: var(--re-color-ink); }
.re-stats__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--re-space-grid); }
.re-stats__item, .re-beliefs__item { display: grid; gap: 4px; align-content: start; padding-top: 14px; border-top: 1px solid var(--re-color-line); }
.re-stats__label { color: var(--re-color-text); } /* full size: the label gives the number its meaning */
.re-stats__num { font: var(--re-weight-heavy) var(--re-size-h2) / var(--re-leading-tight) var(--re-font-heading); color: var(--re-color-ink); font-variant-numeric: tabular-nums; }

.re-proof__lead, .re-team__motto { font: var(--re-weight-bold) var(--re-size-lead) / var(--re-leading-heading) var(--re-font-heading); color: var(--re-color-ink); }
.re-proof__list { display: grid; border-top: 1px solid var(--re-color-line); }
.re-proof__item { display: grid; padding-block: 14px; border-bottom: 1px solid var(--re-color-line); }
.re-proof__claim, .re-beliefs__claim { font: var(--re-weight-bold) var(--re-size-question) / var(--re-leading-heading) var(--re-font-heading); color: var(--re-color-ink); }
.re-proof__link { justify-self: start; padding-block: 9px; margin-block: -6px -9px; } /* 44 px tap target */

.re-story { align-items: center; }
.re-story__text { display: grid; gap: var(--re-space-block); }
.re-story__figure { display: grid; gap: 8px; }
.re-story__img { width: 100%; border-radius: var(--re-radius-card); box-shadow: var(--re-shadow-card); }
.re-story__caption { font-size: var(--re-size-small); color: var(--re-color-muted); }

.re-beliefs__list { display: grid; column-gap: 48px; }
.re-beliefs__item { padding-bottom: 16px; }

.re-icon-cards--values .re-card__icon { width: 72px; object-position: center; }

.re-story__end, .re-faq__end { font-weight: var(--re-weight-semibold); color: var(--re-color-ink); }

.re-team { scroll-margin-top: 24px; }
.re-team__leads { display: grid; gap: var(--re-space-grid); }
.re-team__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--re-radius-sm); }
.re-team__lead-text, .re-team__member-text { display: grid; gap: var(--re-space-card-gap); align-content: start; }
.re-team__role { font: var(--re-weight-semibold) var(--re-size-small) / var(--re-leading-small) var(--re-font-heading); color: var(--re-color-muted); }
.re-team__quote { font-weight: var(--re-weight-semibold); color: var(--re-color-ink); } /* no italic: DESIGN.md §5 */
.re-team__more { border-top: 1px solid var(--re-color-line); }
.re-team__bio { padding-bottom: 6px; }
.re-team__grid { display: grid; gap: 28px var(--re-space-grid); margin-top: 12px; }
.re-team__member { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; }
.re-team__member-photo { width: 112px; aspect-ratio: 1; object-fit: cover; border-radius: var(--re-radius-sm); }
.re-team__member-name { font-size: var(--re-size-body); }

.re-channels { scroll-margin-top: 24px; }
.re-channels__card { grid-template-rows: auto 1fr auto; color: var(--re-color-text); text-decoration: none; transition: transform var(--re-motion-tilt-duration) var(--re-motion-ease-out); }
.re .re-channels__card:hover { color: var(--re-color-text); transform: var(--re-motion-lift); }
.re-channels__card:focus-visible { outline: 3px solid var(--re-color-ink); outline-offset: 3px; }
.re-channels__handle { padding-top: 4px; font: var(--re-weight-semibold) var(--re-size-small) / var(--re-leading-small) var(--re-font-heading); color: var(--re-color-ink); }

@container re-page (min-width: 760px) {
  .re-hero--photo .re-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; }
  .re-stats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .re-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .re-story { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; }
  .re-story--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .re-story--flip .re-story__figure { order: -1; }
  .re-beliefs__list, .re-channels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-faq.re-faq--stacked { grid-template-columns: minmax(0, 1fr); gap: var(--re-space-block); }
  .re-team__lead { grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .re-team__lead-text { max-width: var(--re-layout-measure); }
  .re-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@container re-page (min-width: 1000px) {
  .re-hero--photo .re-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; }
  .re-hero--photo .re-hero__art { justify-self: stretch; width: 100%; max-width: none; }
  .re-channels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container re-page (max-width: 600px) {
  .re-hero--photo .re-hero__art { margin-top: 30px; }
  .re-hero--photo .re-hero__note { top: -30px; }
  .re-stats__intro { font-size: var(--re-size-lead-phone); }
  .re-icon-cards--values .re-card__icon { height: 48px; width: 54px; }
  .re-team__member { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .re-team__member-photo { width: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .re-channels__card { transition: none; }
  .re .re-channels__card:hover { transform: none; }
}

/* ---------- order form of FAPI (on the order page and on a sales page) ---------- */
/* FAPI draws the form into the page with Vue, no iframe. Its utility classes all carry !important and it sets its
   colours as inline custom properties, so the rules here need !important too; .re .fapi-order-form in front keeps them
   on our pages only. The look stays out of the form's settings, so a change here never needs a write to FAPI.
   Every width follows the form's own column (container re-form), never the screen: FAPI's sm: classes switch at a
   640 px screen, which says nothing about a 460 px column on a tablet.
   Order on the screen: details, shipping, payment, add-ons, total. The add-ons come first in FAPI's HTML, so a keyboard
   reaches them before the e-mail field: accepted for a shorter way to the button on a phone (DESIGN.md §12). */
.re-order__form { container: re-form / inline-size; }
.re .fapi-order-form {
  --input-color: var(--re-color-ink) !important; --sale-color: var(--re-color-ink) !important; --color: var(--re-color-text) !important;
  --container-header-background-color: transparent !important; --container-header-color: var(--re-color-ink) !important;
  --order-bump-item-arrow-display: none !important;
  font-family: var(--re-font-body); font-size: 16px; line-height: var(--re-leading-small); color: var(--re-color-text);
}
.re .fapi-order-form > p { display: none; } /* „Vytvořeno v prodejním systému FAPI“: no setting for it (index.*.js renders it always) */
.re .fapi-order-form .fapi-form-float-price { display: none !important; } /* the summary and the total at the button do its job */
.re .fapi-order-form form {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 10px; border: 0 !important; counter-reset: re-step;
}
.re .fapi-order-form form > * { grid-column: 1 / -1; min-width: 0; } /* FAPI's own alert (an error after sending) is a child of the form too */
.re .fapi-order-form .fapi-form-alert { margin-bottom: 12px; }
.re .fapi-order-form .fapi-form-items { display: contents; }
.re .fapi-order-form .fapi-form-basic-block { grid-column: 1 / -1; min-width: 0; margin: 0 !important; padding-block: 18px; border-top: 1px solid var(--re-color-line); }
.re .fapi-order-form .fapi-form-item-group-0 { order: 0; }
.re .fapi-order-form .fapi-form-basic-data { order: 1; }
.re .fapi-order-form .fapi-form-shipping-methods { order: 2; }
.re .fapi-order-form .fapi-form-payment-methods { order: 3; }
.re .fapi-order-form .fapi-form-result { order: 5; }
.re .fapi-order-form .f-p-6 { padding: 0 !important; }
.re .fapi-order-form .fapi-container-header { padding: 0 0 12px !important; justify-content: flex-start !important; }
.re .fapi-order-form .fapi-form-basic-block-title { text-align: left; font: var(--re-weight-bold) 18px / var(--re-leading-small) var(--re-font-heading); color: var(--re-color-ink); }
/* the steps are a real sequence, so they may carry numbers (DESIGN.md §2) */
.re .fapi-order-form :is(.fapi-form-basic-data, .fapi-form-shipping-methods, .fapi-form-payment-methods, .fapi-form-result) .fapi-form-basic-block-title > div { display: flex; align-items: center; gap: 10px; }
.re .fapi-order-form :is(.fapi-form-basic-data, .fapi-form-shipping-methods, .fapi-form-payment-methods, .fapi-form-result) .fapi-form-basic-block-title > div::before {
  content: counter(re-step); counter-increment: re-step; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--re-color-ink); color: var(--re-color-page); font: var(--re-weight-bold) 15px / 1 var(--re-font-heading);
}

/* fields: label above, in pairs where it makes sense */
.re .fapi-order-form .fapi-form-basic-data .f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 12px !important; }
.re .fapi-order-form .fapi-form-basic-data .f-grid > * { grid-column: 1 / -1 !important; }
.re .fapi-order-form [class*="fapi-form-default-input-"], .re .fapi-order-form .fapi-form-default-show-company { grid-column: 1 / -1 !important; min-width: 0; padding: 0 !important; margin: 0 !important; }
.re .fapi-order-form .fapi-form-basic-data .sm\:f--ml-2 { margin: 0 !important; padding: 0 !important; }
.re .fapi-order-form .fapi-form-default-show-company { margin-top: 6px !important; }
.re .fapi-order-form .fapi-form-default-input-show-shipping-address, .re .fapi-order-form .fapi-form-show-company-base-checkbox { margin-left: 28px !important; }
.re .fapi-order-form .f-form-checkbox { width: 20px !important; height: 20px !important; }
.re .fapi-order-form :is(.f-form-checkbox, .f-form-radio) { border-color: var(--re-color-field) !important; }
.re .fapi-order-form .fapi-form-basic-data .sm\:f-flex { display: block !important; }
.re .fapi-order-form .fapi-form-basic-data label.f-w-28 { display: block; width: auto !important; margin-bottom: 3px; font-size: var(--re-size-small); font-weight: var(--re-weight-semibold); color: var(--re-color-ink); }
.re .fapi-order-form .f-form-input, .re .fapi-order-form .f-form-select, .re .fapi-order-form [class*="-country"] button { min-height: 44px; font-size: 16px !important; color: var(--re-color-ink); border-radius: var(--re-radius-sm) !important; }
.re .fapi-order-form :is(.f-form-input, .f-form-select):not(.f-border-red-300) { border-color: var(--re-color-field) !important; }
.re .fapi-order-form .f-form-input.f-border-red-300 { border-color: var(--re-color-error) !important; box-shadow: inset 0 0 0 1px var(--re-color-error) !important; }
.re .fapi-order-form .f-text-red-600 { color: var(--re-color-error) !important; font-size: var(--re-size-caption) !important; }
.re .fapi-order-form .f-form-input:focus, .re .fapi-order-form .f-form-select:focus { outline: 2px solid var(--re-color-ink) !important; outline-offset: 1px; box-shadow: none !important; }
/* the phone field is absolutely positioned inside FAPI's box: the box must be as tall, or the error under it hides */
.re .fapi-order-form .fapi-form-default-input-phone .f-flex { min-height: 44px; }
.re .fapi-order-form .fapi-form-default-input-phone button { display: flex; align-items: center; box-sizing: border-box; height: 42px; min-height: 0; padding-block: 0 !important; box-shadow: none !important; }
.re .fapi-order-form [class*="fapi-form-default-input-"] .f-w-full::after { font-size: var(--re-size-caption); color: var(--re-color-muted); } /* the street hint from custom_css_url */
.re .fapi-order-form .fapi-form-basic-data .f-grid > :is(.fapi-form-default-input-first-name, .fapi-form-default-input-last-name, .fapi-form-default-input-city, .fapi-form-default-input-zip, .fapi-form-default-input-shipping-first-name, .fapi-form-default-input-shipping-last-name, .fapi-form-default-input-shipping-city, .fapi-form-default-input-shipping-zip) { grid-column: span 1 !important; }

/* shipping: compact rows, the whole row is the radio's label */
.re .fapi-order-form .fapi-form-shipping-methods .f-grid { gap: 6px !important; }
.re .fapi-order-form .fapi-form-shipping-method { position: relative; padding: 9px 12px; border: 1px solid var(--re-color-field); border-radius: var(--re-radius-sm); }
.re .fapi-order-form .fapi-form-shipping-method:has(input:checked) { border-color: var(--re-color-ink); box-shadow: inset 0 0 0 1px var(--re-color-ink); }
.re .fapi-order-form .fapi-form-shipping-method label[for]::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.re .fapi-order-form .fapi-form-shipping-method select { position: relative; z-index: 1; }
.re .fapi-order-form .fapi-form-shipping-method > div > .f-flex { gap: 10px; }
.re .fapi-order-form .fapi-form-shipping-method .f-text-sm { font-size: var(--re-size-caption); color: var(--re-color-muted); }
.re .fapi-order-form .fapi-form-shipping-method .f-text-right[class*="f-text-red"] { color: var(--re-color-ink) !important; font-weight: var(--re-weight-bold); } /* „ZDARMA“: no coloured text (DESIGN.md §4) */

/* payment: small tiles; the three methods most orders use first, the banks after them */
.re .fapi-order-form .fapi-form-payment-methods .f-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
.re .fapi-order-form .fapi-form-payment-method:has([aria-label$="Platba kartou"]) { order: -5; }
.re .fapi-order-form .fapi-form-payment-method:has([aria-label$="Dobírka"]) { order: -4; }
.re .fapi-order-form .fapi-form-payment-method:has([aria-label$="Bankovní převod"]) { order: -3; }
.re .fapi-order-form .fapi-form-payment-method [role="button"] { display: flex !important; flex-direction: column; align-items: center; justify-content: center; height: 46px !important; padding: 4px 6px !important; border-radius: var(--re-radius-sm) !important; font-size: var(--re-size-caption); line-height: 1.15; text-align: center; color: var(--re-color-ink) !important; box-shadow: none !important; }
.re .fapi-order-form .fapi-form-payment-method [role="button"]:not(.payment-method-selected) { border-color: var(--re-color-field) !important; }
.re .fapi-order-form .fapi-form-payment-method [role="button"]:focus-visible { outline: 2px solid var(--re-color-ink); outline-offset: 2px; }
.re .fapi-order-form .fapi-form-payment-method [role="button"] :not(img) { color: inherit !important; }
.re .fapi-order-form .fapi-form-payment-method .payment-method-selected { box-shadow: inset 0 0 0 1px var(--re-color-ink) !important; }
.re .fapi-order-form .fapi-form-payment-method img { height: 26px !important; width: 100% !important; max-height: none !important; object-fit: contain; }

/* add-ons: one grid of tiles from FAPI's two blocks, right above the total; the whole tile is the checkbox's label */
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0), .re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) > .f-p-6, .re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) > .f-p-6 > div,
.re .fapi-order-form .fapi-form-basic-block:has(> .order-bump-content), .re .fapi-order-form .order-bump-content { display: contents; }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) > .f-p-6 > span, .re .fapi-order-form .fapi-form-basic-block:has(> .order-bump-content) > .fapi-container-header { display: none !important; }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) > .fapi-container-header { order: 4; grid-column: 1 / -1; padding-top: 18px !important; border-top: 1px solid var(--re-color-line); }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row, .re .fapi-order-form .order-bump-space {
  order: 4; grid-column: span 6; position: relative; display: flex !important; flex-flow: column nowrap !important; gap: 6px; min-width: 0; margin: 0 0 10px !important; padding: 10px !important;
  background: var(--re-color-page); border: 1px solid var(--re-color-field); border-radius: var(--re-radius-sm); font-size: var(--re-size-caption); line-height: var(--re-leading-small); color: var(--re-color-muted);
}
.re .fapi-order-form :is(.fapi-form-item-group:not(.fapi-form-item-group-0) .product-row, .order-bump-space):has(input[type="checkbox"]:checked) { border-color: var(--re-color-ink); box-shadow: inset 0 0 0 1px var(--re-color-ink); }
.re .fapi-order-form :is(.fapi-form-item-group:not(.fapi-form-item-group-0) .product-row, .order-bump-space) input[type="checkbox"] { position: absolute; left: 10px; top: 10px; z-index: 1; margin: 0 !important; float: none !important; }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row input[type="checkbox"] { border-radius: 50% !important; } /* FAPI group without allow_multiple_items: one of them, like a radio */
.re .fapi-order-form :is(.fapi-form-item-group:not(.fapi-form-item-group-0) .product-row, .order-bump-label) label::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.re .fapi-order-form .fapi-order-bump-image, .re .fapi-order-form .fapi-item-image { display: block; height: 96px; width: auto; max-height: 96px !important; max-width: 100% !important; margin: 0 auto 2px !important; border-radius: var(--re-radius-sm) !important; object-fit: contain; }
.re .fapi-order-form .order-bump-space > .f-px-3 { order: -1; padding: 0 !important; }
.re .fapi-order-form .order-bump-space > .f-px-3 p { margin: 0; }
.re .fapi-order-form .order-bump-label { padding: 0 !important; margin: 0 !important; background: none; }
.re .fapi-order-form .order-bump-label > div { margin: 0 !important; }
.re .fapi-order-form .order-bump-label s { color: var(--re-color-muted); }
.re .fapi-order-form :is(.order-bump-label strong, .fapi-form-item-group:not(.fapi-form-item-group-0) .fapi-form-discounted-price) { font-weight: var(--re-weight-bold); color: var(--re-color-ink); }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row > div { max-width: none !important; padding: 0 !important; }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row > div:first-child > div { margin: 0 !important; padding: 0 !important; }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row label { display: flex !important; flex-direction: column-reverse; gap: 6px; margin: 0 !important; }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row label > span { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-weight: var(--re-weight-bold); color: var(--re-color-ink); }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row > div:last-child { display: block !important; width: 100%; max-width: none !important; margin-top: auto; }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row [data-fapi-validation-field] { display: none !important; } /* the checkbox sets the count to 1 or 0, a second control only confused */
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-price { width: auto !important; align-items: flex-start !important; }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-price > div:last-child { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; }
.re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-price .f-line-through { color: var(--re-color-muted); }

/* total, consent and the button */
.re .fapi-order-form .fapi-form-result-prices-group { display: block !important; }
.re .fapi-order-form .fapi-form-result .fapi-form-prices { padding: 0 !important; gap: 2px; }
.re .fapi-order-form .fapi-form-result .fapi-form-prices-repayment-wo-vat { display: none !important; }
.re .fapi-order-form .fapi-form-result .fapi-form-prices-repayment-with-vat-label { font-size: 16px !important; font-weight: var(--re-weight-bold); color: var(--re-color-ink); }
.re .fapi-order-form .fapi-form-result .fapi-form-prices-repayment-with-vat-value { font: var(--re-weight-heavy) 26px / 1.2 var(--re-font-heading) !important; color: var(--re-color-ink); }
.re .fapi-order-form .fapi-form-terms { margin-top: 12px !important; }
.re .fapi-order-form .fapi-form-result-terms, .re .fapi-order-form .fapi-form-result-primary-purposes { margin: 0 0 6px !important; font-size: var(--re-size-caption); }
.re .fapi-order-form .fapi-form-result a { color: var(--re-color-ink) !important; text-decoration: underline; }
.re .fapi-order-form .fapi-form-result-submit-group { margin-top: 10px !important; padding-top: 0 !important; }
.re .fapi-order-form .fapi-submit-button { width: 100%; min-height: 56px; padding: 10px 16px !important; font: var(--re-weight-bold) 19px / 1.2 var(--re-font-heading) !important; text-wrap: balance; transition: background-color var(--re-motion-btn-duration) ease; }
.re .fapi-order-form .fapi-submit-button:hover { opacity: 1 !important; background-color: var(--re-color-cta-hover); }
.re .fapi-order-form .fapi-submit-button:focus-visible { outline: 3px solid var(--re-color-ink); outline-offset: 3px; }

@container re-form (max-width: 419px) {
  .re .fapi-order-form .fapi-submit-button { font-size: var(--re-size-cta-phone) !important; }
}
@container re-form (min-width: 335px) {
  .re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row, .re .fapi-order-form .order-bump-space { grid-column: span 3; }
}
/* a very small phone: one tile per row, the picture beside the text */
@container re-form (max-width: 334px) {
  .re .fapi-order-form .order-bump-space { flex-direction: row !important; align-items: center; gap: 10px; padding-left: 36px !important; }
  .re .fapi-order-form .order-bump-space > .f-px-3 { flex: none; width: 64px; }
  .re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row { padding-left: 36px !important; }
  .re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row label { flex-direction: row-reverse; align-items: center; gap: 10px; }
  .re .fapi-order-form .fapi-order-bump-image, .re .fapi-order-form .fapi-item-image { height: 64px; max-height: 64px !important; width: 64px; max-width: 64px !important; flex: none; margin: 0 !important; }
}
@container re-form (min-width: 420px) {
  .re .fapi-order-form .fapi-form-basic-data .f-grid > :is(.fapi-form-default-input-email, .fapi-form-default-input-phone, .fapi-form-default-input-ico, .fapi-form-default-input-dic) { grid-column: span 1 !important; }
}
@container re-form (min-width: 560px) {
  .re .fapi-order-form .fapi-form-payment-methods .f-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .re .fapi-order-form .fapi-form-item-group:not(.fapi-form-item-group-0) .product-row, .re .fapi-order-form .order-bump-space { grid-column: span 2; }
}

/* ---------- checkout: the order page, form left, summary right ---------- */
/* the main product is in the summary, so its group shows nothing, until the product is paused: FAPI then strikes its name
   through and that row, with „Vyberte alespoň jednu položku“, must be seen at the top of the form */
.re-checkout .fapi-order-form .fapi-form-item-group-0 { padding: 0; border: 0; }
.re-checkout .fapi-order-form .fapi-form-item-group-0:not(:has(span.f-line-through)) > .fapi-container-header, .re-checkout .fapi-order-form .fapi-form-item-group-0 .product-row:not(:has(span.f-line-through)) { display: none !important; }
.re-checkout .fapi-order-form .fapi-form-basic-data { padding-top: 0; border-top: 0; }
body:has(.re-checkout) header .visual_content { display: none; } /* the site's promo bar leads away from an order: not on the order pages of the books either */
.re-flow--checkout { padding-block-start: 20px; }
.re-flow--checkout .re-review-shots__row { align-items: start; }
.re-flow--checkout .re-review-shots__card { height: auto; }
.re-flow--checkout .re-review-shots__row { scroll-padding-inline: 12px; }
.re-checkout { gap: 16px; }
.re-checkout__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; }
.re-checkout__head h1 { font-size: var(--re-size-h2); }
.re-checkout__grid { display: grid; gap: var(--re-space-grid); align-items: start; }
.re-checkout__main { min-width: 0; }
.re-checkout__side { display: grid; gap: 12px; padding: var(--re-space-card); background: var(--re-highlight-bg); border-radius: var(--re-radius-card); min-width: 0; }
.re-checkout__side-title { font-size: var(--re-size-h3); }
.re-checkout__product { display: grid; gap: 6px; }
.re-checkout__img { width: 100%; filter: var(--re-shadow-closing); }
.re-checkout__name { font-size: var(--re-size-body); }
.re-checkout__ticks { font-size: var(--re-size-small); gap: 2px; }
.re-checkout__ticks .re-mark--check { width: 18px; height: 18px; margin-top: 2px; }
.re-checkout__gift { display: none; }
.re-checkout__price { font-size: 30px; }
.re-checkout__ship { font-size: var(--re-size-caption); color: var(--re-color-muted); margin-top: -6px; }
.re-checkout__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding-top: 10px; border-top: 1px solid var(--re-color-line-soft); font-weight: var(--re-weight-bold); color: var(--re-color-ink); }
.re-checkout__total[hidden] { display: none; }
.re-checkout__ship[hidden] { display: none; }
.re-checkout__total b { font: var(--re-weight-heavy) 22px / 1.2 var(--re-font-heading); }
.re-checkout__guarantee { justify-content: flex-start; }
.re-checkout__rating { font: var(--re-weight-bold) var(--re-size-small) / var(--re-leading-small) var(--re-font-heading); color: var(--re-color-ink); }
.re-checkout__secure { margin-top: 10px; font-size: var(--re-size-caption); line-height: var(--re-leading-small); color: var(--re-color-muted); text-align: center; }
@container re-page (min-width: 601px) and (max-width: 900px) {
  .re-checkout .re-order__form { padding: 20px; } /* a two-column tablet: the room goes to the fields, E-mail and Telefon stay a pair */
}
@container re-page (min-width: 760px) {
  .re-checkout__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
  .re-checkout__main { grid-column: 1; grid-row: 1; }
  .re-checkout__side { grid-column: 2; grid-row: 1; position: sticky; top: 16px; }
  @media (max-height: 800px) { .re-checkout__ticks { display: none; } } /* a low laptop: the summary still fits the window while it sticks */
}
@container re-page (max-width: 759px) {
  /* a phone sees the bundle in one compact row with the gift and the guarantee under it */
  .re-checkout__side { grid-template-columns: 104px minmax(0, 1fr); gap: 2px 12px; padding: 12px; align-items: center; }
  .re-checkout__side-title, .re-checkout__ticks, .re-checkout__rating, .re-checkout__ship, .re-checkout__total { display: none; }
  .re-checkout__total[hidden] { display: none; }
  .re-checkout__product { display: contents; }
  .re-checkout__img { grid-row: 1 / span 2; }
  .re-checkout__name { font-size: 16px; align-self: end; }
  .re-checkout__price { font-size: 24px; align-self: start; }
  .re-checkout__price .re-price__deal { font-size: var(--re-size-caption); margin-bottom: 2px; }
  .re-checkout__gift { display: block; grid-column: 1 / -1; margin-top: 4px; font-size: var(--re-size-hand-note-phone); }
  .re-checkout__guarantee { grid-column: 1 / -1; font-size: var(--re-size-caption); }
  /* the strip's height comes from its tallest card: a lower cap keeps the hole under the short cards small */
  .re-flow--checkout .re-review-shots__link--long { max-height: 260px; }
  /* the seal beside the heading, the text across the whole panel */
  .re-flow--checkout .re-guarantee { align-items: center; }
  .re-flow--checkout .re-guarantee > .re-stack { display: contents; }
  .re-flow--checkout .re-guarantee .re-measure { grid-column: 1 / -1; }
}