/* Poppins served from our own server (audit 12 Nov 2026: Google Fonts blocked rendering for ~0.8 s). Latin and Latin Extended (Czech) only. SIL Open Font License. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin-ext-zc30_cW.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin-heQdAz3.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin-ext-UEujKhQ.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin-AuPgurU.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin-ext-yqhVVzG.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin-RV1hfMj.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin-ext-c8zWSwk.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin-5ePuYxR.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Best practice used here: one primary action colour (green), tap targets at least 44 px, sticky order summary
   on wide screens, steps shown on top of the checkout, minimal fields with inline errors. */
/* i-kvetiny.cz shop: a facelift of the old web in the design manual's colours. Mobile first. */
:root {
  --cart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2v2h2.6l3.6 7.6-1.4 2.4c-.1.3-.2.6-.2 1 0 1.1.9 2 2 2h12v-2H8l1.1-2h7.4c.8 0 1.4-.4 1.8-1l3.6-6.5c.1-.2.1-.3.1-.5 0-.6-.4-1-1-1H5.2l-.9-2H1z'/%3E%3C/svg%3E");
  --brown: #450d00;
  --red: #dc3222;
  --red-dark: #b8261a;
  --green: #18731a;
  --green-light: #97bf0d;
  --cream: #fbf6f0;
  --ink: #2b1a14;
  --muted: #7a6a63;
  --line: #eadfd6;
  --white: #ffffff;
  --radius: 0;
  --shadow: 0 6px 24px rgba(69, 13, 0, 0.08);
  --font: "Poppins", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--white); line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: var(--red); }
h1, h2, h3 { color: var(--brown); line-height: 1.2; margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }


.site-head { position: sticky; top: 0; z-index: 20; background: var(--white); box-shadow: 0 1px 0 var(--line); }
.head-row { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.site-logo { display: block; line-height: 0; }
.site-logo .logo-svg { width: 170px; height: auto; }
.foot-articles { margin: 0; opacity: 0.8; }
.main-nav { display: none; gap: 26px; margin: 0 auto; }
.main-nav a { color: var(--brown); font-weight: 600; text-decoration: none; white-space: nowrap; }
.main-nav a:hover { color: var(--red); }
.head-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.head-link { color: var(--brown); text-decoration: none; font-size: 0.9rem; }
.head-link span { display: none; }
.cart-button { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 0; background: var(--red); color: #fff; text-decoration: none; font-weight: 600; }
.menu-toggle { border: 1px solid var(--line); background: #fff; border-radius: 0; width: 42px; height: 42px; font-size: 1.2rem; color: var(--brown); }
.cat-nav { background: var(--red); display: none; }
.cat-nav.open { display: block; }
.cat-nav .wrap { display: flex; flex-direction: column; padding-block: 6px; }
.cat-nav a { color: #fff; text-decoration: none; padding: 10px 6px; font-weight: 500; }
.cat-nav a[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 6px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 0; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(24, 115, 26, 0.25); }
.btn-green:hover { background: #135c15; }
.btn-ghost { background: #fff; color: var(--brown); border: 2px solid var(--brown); }
.btn-big { padding: 16px 30px; font-size: 1.05rem; }

.hero { background: var(--cream); }
.hero-grid { display: grid; gap: 24px; padding-block: 32px; align-items: center; }
.hero-kicker { color: var(--red); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin: 0 0 8px; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em; }
.hero h1 span { color: var(--red); }
.hero-lead { font-size: 1.1rem; color: var(--muted); margin: 14px 0 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.usp { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.9rem; color: var(--muted); }
.usp strong { color: var(--brown); }
.hero-photos { position: relative; height: 300px; }
.hero-photo { position: absolute; border-radius: 0; object-fit: cover; box-shadow: var(--shadow); background: #fff; }
.hero-photo-1 { width: 62%; height: 100%; left: 19%; top: 0; z-index: 2; }
.hero-photo-2 { width: 40%; height: 70%; left: 0; top: 15%; transform: rotate(-5deg); }
.hero-photo-3 { width: 40%; height: 70%; right: 0; top: 15%; transform: rotate(5deg); }

.home-usp { margin-top: -28px; padding-block: 0; position: relative; z-index: 3; }
.usp-grid.home-usp > * { box-shadow: var(--shadow); border-color: transparent; }
.hero-rating { margin: 22px 0 0; font-size: 0.95rem; color: var(--muted); }
.hero-rating .stars { color: #f6b100; letter-spacing: 1px; }
.hero-rating strong { color: var(--brown); }
.quick-tile { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); text-decoration: none; color: var(--brown); font-weight: 600; border-left: 4px solid var(--green-light); }
.quick-tile small { color: var(--green); font-weight: 500; }

.block { padding-block: 34px 10px; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.block-head h1, .block-head h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.block-head h1 small, .cat-count { font-size: 0.9rem; color: var(--muted); font-weight: 500; }
.cat-title { display: flex; align-items: baseline; gap: 8px; } .cat-title h1 { margin: 0; }
.block-head a { font-weight: 600; text-decoration: none; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); border: 1px solid var(--line); transition: transform .15s, box-shadow .15s, background-color .15s; }
/* Hover: a light lift, shadow and photo zoom, the name in red; no colour flood, so photo and price stay readable
   (Vašek, 13 Nov 2026: the whole red tile was too much). Keyboard focus gets a visible outline. */
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(69, 13, 0, 0.14); border-color: #e7d6c9; }
  .card:hover .card-name { color: var(--red); }
  .card:hover .card-photo img { transform: scale(1.04); }
}
.card-photo img { transition: transform .25s ease; }
.card:focus-within { border-color: var(--red); }
.card-link:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .card, .card-photo img { transition: none; } .card:hover { transform: none; } .card:hover .card-photo img { transform: none; } }
.card-photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; top: 10px; left: 10px; background: var(--brown); color: #fff; padding: 3px 10px; border-radius: 0; font-size: 0.75rem; font-weight: 600; }
.card.sold-out .card-photo img { opacity: 0.5; }
.card-name { padding: 10px 12px 4px; font-weight: 600; font-size: 0.9rem; line-height: 1.3; color: var(--brown); flex: 1; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 12px 12px; }
.price { color: var(--green); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.add { background: var(--green); color: #fff; border: 0; border-radius: 0; padding: 9px 14px; min-height: 40px; font: inherit; font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.add:hover { background: #135c15; }

.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 12px; }
.crumbs a { color: var(--muted); }
.sort, .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sort a, .chips a { padding: 7px 14px; border-radius: 0; border: 1px solid var(--line); color: var(--brown); text-decoration: none; font-size: 0.85rem; font-weight: 500; background: #fff; }
.sort a[aria-current], .chips a[aria-current] { background: var(--brown); border-color: var(--brown); color: #fff; }
.chips { margin-bottom: 18px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
.chips a { white-space: nowrap; }

.detail { display: grid; gap: 24px; }
.detail-photo img { width: 100%; height: auto; border-radius: 0; background: var(--cream); }
.detail-main { display: block; cursor: zoom-in; }
.detail-thumbs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.detail-thumbs a { display: block; cursor: zoom-in; border: 1px solid transparent; }
.detail-thumbs a:hover { border-color: var(--green); }
.detail-thumbs img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.detail-info h1 { font-size: clamp(1.35rem, 3.2vw, 1.75rem); line-height: 1.2; }
.muted { color: var(--muted); font-size: 0.85rem; }
.detail-price { font-size: 2rem; font-weight: 700; color: var(--green); margin: 12px 0 18px; }
.buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.qty { display: inline-flex; border: 2px solid var(--line); border-radius: 0; overflow: hidden; }
.qty button { width: 46px; border: 0; background: #fff; font-size: 1.3rem; color: var(--brown); cursor: pointer; }
.qty input { width: 48px; border: 0; text-align: center; font: inherit; font-weight: 600; }
.note { flex-basis: 100%; background: var(--cream); padding: 10px 14px; border-radius: 0; margin: 0; }
.sold { color: var(--red); font-weight: 600; }
.detail-usp { list-style: none; padding: 18px 0 0; margin: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }


.site-foot { background: var(--brown); color: #f3e6df; margin-top: 48px; }
.site-foot a { color: #fff; }
.site-foot h3 { color: #fff; font-size: 1rem; margin-bottom: 6px; }
.foot-grid { display: grid; gap: 26px; padding-block: 34px 10px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-grid ul a { color: #f3e6df; text-decoration: none; }
.foot-grid ul a:hover { color: #fff; text-decoration: underline; }
.foot-contact { display: grid; gap: 2px; align-content: start; }
.foot-contact small { opacity: 0.7; margin-bottom: 12px; }
.foot-phone { font-size: 1.5rem; font-weight: 600; text-decoration: none; }
.foot-mail { font-size: 1.05rem; text-decoration: none; }
.foot-usp { background: var(--cream); color: var(--brown); }
.usp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-block: 22px; }
.usp-grid > * { background: #fff; border: 1px solid var(--line); padding: 16px; display: grid; gap: 2px; justify-items: center; text-align: center; }
.usp-grid span { font-size: 1.6rem; }
.usp-grid small { color: var(--muted); }
.usp-grid .usp-link { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.usp-grid > a { color: inherit; text-decoration: none; }
.usp-grid > a:hover { border-color: var(--brown); }
.foot-note { font-size: 0.8rem; opacity: 0.75; padding-block: 18px; margin: 18px auto 0; border-top: 1px solid rgba(255, 255, 255, 0.15); }

@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .quick { grid-template-columns: repeat(4, 1fr); }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .usp-grid { grid-template-columns: repeat(5, 1fr); }
  .detail { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero-photos { height: 380px; }
}
@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .main-nav { display: flex; }
  .head-link span { display: inline; }
  .menu-toggle { display: none; }
  .site-logo .logo-svg { width: 210px; }
  .cat-nav { display: block; }
  .chips { display: none; } /* the category menu is in the header on a computer (Vašek, 8 Nov 2026) */
  .cat-nav .wrap { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px 22px; padding-block: 0; }
  .cat-nav a { padding: 11px 2px; }
  .hero-grid { grid-template-columns: 1fr 1fr; padding-block: 56px; }
  .hero-photos { height: 440px; }
}
@media (max-width: 560px) {
  .cart-sum { display: none; }
  .head-row { gap: 8px; }
  .site-logo .logo-svg { width: 150px; }
  .add { width: 44px; padding: 0; font-size: 0; display: inline-grid; place-items: center; place-content: center; } /* the hidden label is a second grid row; without place-content the icon sits high */
  /* The header's cart icon, white (an emoji came out grey on the green) */
  .add::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--cart-icon) center / contain no-repeat; mask: var(--cart-icon) center / contain no-repeat; }
}

/* Cart button, toast */
.cart-count { background: #fff; color: var(--red); font-size: 0.75rem; font-weight: 700; min-width: 20px; padding: 0 5px; text-align: center; }
.toast { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(560px, calc(100% - 24px)); display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #fff; border: 2px solid var(--green); box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 12px 14px; }
.toast button { border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.toast .btn { padding: 10px 18px; }

/* Checkout */
.steps { list-style: none; padding: 0; margin: 0 0 24px; display: flex; }
/* A progress line with circles (Vašek, 11 Nov 2026: nicer than the numbered boxes) */
.steps li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.steps li::before { content: ''; position: absolute; top: 17px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.steps li:first-child::before { display: none; }
.steps li span { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 3px solid var(--line); color: var(--muted); font-weight: 700; }
.steps li.current { color: var(--brown); }
.steps li.current span { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 0 0 5px rgba(220, 50, 34, 0.15); }
.steps li.done { color: var(--green); }
.steps li.done span { border-color: var(--green); background: var(--green); color: transparent; }
.steps li.done span::after { content: '✓'; position: absolute; color: #fff; font-size: 1.05rem; }
.steps li.done::before, .steps li.current::before { background: var(--green); }
.checkout h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 16px; }
.checkout h2 { font-size: 1.2rem; margin: 26px 0 10px; }
.checkout-grid { display: grid; gap: 20px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--line); padding: 16px; }
.panel h3 { font-size: 1rem; display: flex; justify-content: space-between; margin-bottom: 6px; }
.panel h3 a { font-size: 0.8rem; font-weight: 500; }
.sticky { position: sticky; top: 140px; display: grid; gap: 10px; }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; grid-template-areas: "photo name remove" "photo qty total"; gap: 6px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-photo { grid-area: photo; } .cart-photo img { width: 64px; height: 80px; object-fit: cover; }
.cart-name { grid-area: name; display: grid; } .cart-name a { color: var(--brown); font-weight: 600; text-decoration: none; }
.cart-line .qty { grid-area: qty; justify-self: start; }
.cart-total { grid-area: total; text-align: right; color: var(--brown); }
.cart-remove { grid-area: remove; justify-self: end; border: 0; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; width: 36px; height: 36px; }
.cart-remove:hover { color: var(--red); }
.qty button { min-height: 40px; }
.progress-note { margin-top: 14px; padding: 12px 14px; background: var(--cream); border-left: 4px solid var(--red); }
.progress-note.ok { border-left-color: var(--green); }
.progress-note .bar { height: 6px; background: #fff; margin-top: 8px; } .progress-note .bar span { display: block; height: 100%; background: var(--red); }
.options { display: grid; gap: 8px; }
.option[hidden] { display: none; }
.option { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border: 2px solid var(--line); background: #fff; cursor: pointer; min-height: 56px; }
.option:has(input:checked) { border-color: var(--green); background: #f3f9f0; }
.option.disabled { opacity: 0.5; cursor: not-allowed; }
.option span { display: grid; } .option small { color: var(--muted); }
.option em { font-style: normal; color: var(--green); font-weight: 600; }
.option input, .terms input, .day-tile input, .hour-tile input { accent-color: var(--green); width: 20px; height: 20px; }
.sum-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.sum-row.total { border-top: 1px solid var(--line); padding-top: 10px; font-weight: 700; font-size: 1.2rem; color: var(--brown); }
.btn-block { width: 100%; }
.back-link { display: block; text-align: center; padding: 11px 16px; border: 2px solid var(--red); color: var(--red); font-weight: 600; text-decoration: none; }
.back-link:hover { background: var(--red); color: #fff; }
.error { color: var(--red); font-weight: 600; margin: 4px 0; font-size: 0.9rem; }
.empty-cart { display: grid; gap: 14px; justify-items: start; }
.day-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.day-tile, .hour-tile { position: relative; cursor: pointer; }
.day-tile input, .hour-tile input { position: absolute; opacity: 0; }
.day-tile span, .hour-tile span { display: grid; place-items: center; min-height: 56px; border: 2px solid var(--line); background: #fff; padding: 6px; }
.day-tile small { color: var(--muted); text-transform: uppercase; font-size: 0.72rem; }
.day-tile input:checked + span, .hour-tile input:checked + span { border-color: var(--green); background: var(--green); color: #fff; }
.day-tile input:checked + span small { color: #fff; }
.day-tile input:focus-visible + span, .hour-tile input:focus-visible + span { outline: 3px solid var(--green-light); }
.hour-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.hour-tile.disabled { display: none; } /* only the hours of the chosen day show (Saturday 7–11), Vašek 11 Nov 2026 */
.fields { display: grid; gap: 12px; }
.f { display: grid; gap: 4px; } .f span { font-weight: 600; font-size: 0.9rem; color: var(--brown); }
.f input, .f textarea { font: inherit; padding: 12px 14px; border: 1px solid #cdbfb5; background: #fff; min-height: 48px; width: 100%; }
.f input:focus, .f textarea:focus { outline: 3px solid var(--green-light); border-color: var(--green); }
.f.has-error input, .f.has-error textarea { border-color: var(--red); }
.company-details { margin-top: 12px; } .company-details summary { cursor: pointer; color: var(--green); font-weight: 600; margin-bottom: 10px; }
.summary-grid { display: grid; gap: 12px; margin-top: 12px; }
.card-text { font-style: italic; }
.terms { display: flex; gap: 10px; align-items: center; font-size: 0.9rem; }
.thanks .panel { max-width: 560px; margin: 0 auto; text-align: center; display: grid; gap: 10px; justify-items: center; padding: 32px; }
.thanks-icon { font-size: 3rem; }
@media (min-width: 720px) {
  .fields { grid-template-columns: 1fr 1fr; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
}
@media (max-width: 560px) {
  .steps li { font-size: 0; justify-content: center; } .steps li span { font-size: 0.85rem; }
}

/* Delivery strip on top: still delivering today (with a countdown), or the next delivery day */
.delivery-strip { background: var(--cream); color: var(--brown); font-size: 0.85rem; border-bottom: 1px solid var(--line); }
.delivery-strip .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; padding-block: 7px; text-align: center; }
.delivery-strip.live { background: var(--green); color: #fff; border-bottom: 0; }
.delivery-strip.live strong { color: #fff; }
.delivery-strip .wrap { display: grid; grid-template-columns: 1fr auto; }
.strip-delivery { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 8px; }
.strip-nameday { justify-self: start; text-align: left; }
.strip-phone { justify-self: end; color: inherit; text-decoration: none; white-space: nowrap; }
@media (max-width: 1100px) { .strip-tomorrow { display: none; } }
@media (max-width: 860px) {
  .delivery-strip .wrap { grid-template-columns: 1fr; }
  .strip-nameday { order: 2; justify-self: center; font-size: 0.78rem; opacity: 0.85; }
  .strip-delivery { justify-self: center; justify-content: center; }
}
.pulse { width: 10px; height: 10px; border-radius: 50%; background: #c9f25d; box-shadow: 0 0 0 0 rgba(201, 242, 93, 0.7); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(201, 242, 93, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 242, 93, 0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* Delivery by the buy button of every product, instead of the strip on top (Vašek, 14 Nov 2026) */
.delivery-box { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; padding: 12px 16px; background: var(--cream); border-left: 4px solid var(--red); color: var(--brown); font-size: 1rem; line-height: 1.45; }
.delivery-box.live { border-left-color: var(--green, #2e7d32); }
.dbox-icon { font-size: 1.3rem; line-height: 1.1; }

/* Sizes on the product page: the bigger size shows what the customer saves (Vašek: sell the bigger bouquet) */
.detail-text { margin: 0 0 18px; color: var(--ink); }
.detail-text p { margin: 0 0 8px; }
.sizes { flex-basis: 100%; border: 0; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.sizes legend { font-weight: 600; color: var(--brown); margin-bottom: 8px; }
.size { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border: 2px solid var(--line); background: #fff; cursor: pointer; min-height: 60px; }
.size:has(input:checked) { border-color: var(--green); background: #f3f9f0; }
.size input { accent-color: var(--green); width: 20px; height: 20px; }
.size-name { display: grid; } .size-name small { color: var(--muted); }
.size-price { display: grid; text-align: right; } .size-price strong { color: var(--brown); font-size: 1.05rem; }
.size-price em { font-style: normal; color: #fff; background: var(--red); padding: 1px 8px; font-size: 0.8rem; font-weight: 600; margin-top: 3px; }
.size-badge { position: absolute; top: -10px; right: 12px; background: var(--green); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; text-transform: uppercase; letter-spacing: .04em; }
.cart-size { color: var(--green); font-size: 0.85rem; font-weight: 600; }

/* Search: field in the header with suggestions, results page */
.head-search { position: relative; display: flex; flex: 1 1 100%; order: 3; min-width: 0; max-width: 100%; box-sizing: border-box; }
.head-search input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-right: 0; background: #fff; min-height: 44px; }
.head-search input:focus { outline: none; border-color: var(--green); }
.head-search button { width: 44px; border: 2px solid var(--line); border-left: 0; background: #fff; cursor: pointer; font-size: 1rem; }
.head-search:focus-within input, .head-search:focus-within button { border-color: var(--green); }
.head-row { flex-wrap: wrap; }
.suggest-box { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 2px solid var(--green); border-top: 0; box-shadow: var(--shadow); }
.suggest-box a { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; color: var(--brown); text-decoration: none; border-bottom: 1px solid var(--line); }
.suggest-box a:hover, .suggest-box a.active { background: var(--cream); }
.suggest-box img { width: 44px; height: 54px; object-fit: cover; }
.suggest-box strong { font-weight: 600; font-size: 0.9rem; }
.suggest-box .sp { color: var(--green); font-weight: 700; white-space: nowrap; }
.suggest-box .all { display: block; text-align: center; font-weight: 600; color: var(--green); }
.search-big { display: flex; gap: 0; margin-bottom: 20px; max-width: 640px; }
.search-big .btn { flex: none; }
.search-big input { flex: 1 1 auto; min-width: 0; font: inherit; padding: 12px 14px; border: 2px solid var(--line); border-right: 0; min-height: 52px; }
@media (min-width: 1000px) {
  .head-row { flex-wrap: nowrap; }
  .head-search { order: 0; flex: 1 1 320px; min-width: 150px; max-width: 320px; }
  .main-nav { margin: 0 12px; gap: 20px; }
}
/* Narrower computer screens: the header has to fit without scrolling sideways. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .site-logo .logo-svg { width: 170px; }
  .main-nav { gap: 14px; margin: 0 4px; }
  .head-link span { display: none; }
}

/* Content pages (/text/…) and the wedding inquiry */
.text-grid { display: grid; gap: 24px; }
.text-body { max-width: 760px; line-height: 1.65; }
.text-body h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 16px; }
.text-body h2 { font-size: 1.25rem; margin: 28px 0 8px; scroll-margin-top: 90px; }
.text-body p { margin: 0 0 12px; }
.text-body ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.text-body li::marker { color: var(--green-light); }
.text-body a { color: var(--green); font-weight: 600; }
.text-side { display: grid; gap: 12px; align-content: start; }
.text-side p { margin: 4px 0; }
.text-links { display: grid; gap: 2px; }
.text-links a { padding: 8px 10px; color: var(--brown); text-decoration: none; border-left: 3px solid transparent; }
.text-links a:hover, .text-links a[aria-current] { border-left-color: var(--red); background: #fbf6f3; color: var(--red); }
.wedding { margin-top: 32px; border-top: 3px solid var(--green-light); padding-top: 8px; }
.wedding-form { display: grid; gap: 16px; }
.wedding-form h3 { margin-top: 8px; }
.wedding-form select { font: inherit; padding: 12px 14px; border: 1px solid #cdbfb5; background: #fff; min-height: 48px; width: 100%; border-radius: 0; }
.wedding-people { display: grid; gap: 10px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.wedding-people fieldset { margin: 0; display: grid; gap: 8px; align-content: start; }
.wedding-form .fields { align-items: start; }
.wedding-people legend { font-weight: 700; color: var(--brown); padding: 0 4px; }
.count { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.count input { width: 72px; font: inherit; padding: 8px; border: 1px solid #cdbfb5; text-align: center; border-radius: 0; }
.wedding-sent { border-left: 4px solid var(--green); }
.hp { position: absolute; left: -9999px; }
.wedding-form .btn { justify-self: start; }
@media (min-width: 720px) {
  .fields-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .text-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* Kontakt: shop cards and compact info boxes */
.contact-intro { margin-bottom: 18px; }
.shops { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.shop-card { background: #fff; border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; scroll-margin-top: 90px; }
.shop-card:target { outline: 3px solid var(--green-light); }
.shop-photo { display: block; height: 240px; overflow: hidden; }
.shop-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kv-stack { display: grid; gap: 6px; margin: 4px 0 0; font-size: 0.9rem; } .kv-stack dt { color: var(--muted); font-size: 0.8rem; } .kv-stack dd { margin: 0; }
.kv dd.mono { font-size: 0.8rem; white-space: nowrap; }
.shop-body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.shop-body h2 { font-size: 1.3rem; }
.shop-body h2 small { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.shop-body p { margin: 0; }
.shop-body a { color: var(--brown); text-decoration: none; }
.shop-body a:hover { color: var(--red); }
.shop-note { justify-self: start; background: var(--green); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; }
.shop-phone { font-weight: 700; color: var(--red) !important; font-size: 1.1rem; }
.hours, .kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 4px 0 0; font-size: 0.9rem; }
.hours dt, .kv dt { color: var(--muted); }
.hours dd, .kv dd { margin: 0; overflow-wrap: anywhere; }
.contact-boxes { display: grid; gap: 12px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.contact-boxes p { margin: 4px 0; }
.contact-boxes a { color: var(--green); font-weight: 600; }
.category-text { margin-top: 32px; max-width: none; } /* the full page width (Vašek, 11 Nov 2026) */

/* QR payment on the thank-you page */
.qr-pay { width: 100%; display: grid; gap: 10px; justify-items: center; border-top: 3px solid var(--green-light); padding-top: 14px; }
.qr-pay h2 { font-size: 1.3rem; }
.qr-code { width: 220px; height: 220px; background: #fff; }
.qr-code svg { width: 100%; height: 100%; display: block; }
.qr-details { text-align: left; font-size: 1rem; }
.option em.recommended { background: var(--green); color: #fff; font-size: 0.75rem; padding: 2px 8px; align-self: start; }

/* Funeral ribbon: choice on the product page and its live preview (gold print) */
.ribbon { border: 1px solid var(--line); background: #fff; padding: 12px 14px; margin: 0 0 14px; }
.ribbon-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ribbon-toggle input { width: 22px; height: 22px; accent-color: var(--green); }
.ribbon-toggle em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--brown); }
.ribbon-body { display: grid; gap: 16px; margin-top: 12px; }
.ribbon-body[hidden] { display: none; }
.ribbon-fields { display: grid; gap: 10px; }
.ribbon-label { font-weight: 600; font-size: 0.9rem; color: var(--brown); }
.ribbon-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.ribbon-color input { position: absolute; opacity: 0; }
.ribbon-color > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid var(--line); cursor: pointer; font-weight: 600; }
.ribbon-color input:checked + span { border-color: var(--green); background: #f3f8e6; }
.ribbon-color input:focus-visible + span { outline: 3px solid var(--green-light); }
.ribbon-chip { display: inline-block; width: 18px; height: 18px; border: 1px solid #b9aaa0; vertical-align: middle; }
.ribbon-cerna { background: #1b1b1b; }
.ribbon-bila { background: #f4ebcf; }
.ribbon-cervena { background: #8d1c24; }
.ribbon-trikolora { background: linear-gradient(to right, #fbfaf6 0 33.3%, #d7141a 33.3% 66.6%, #11457e 66.6%); }
.ribbon-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; justify-items: center; padding: 12px; background: #f6f1ec; }
.ribbon-preview small { grid-column: 1 / -1; color: var(--muted); font-size: 0.75rem; }
.ribbon-end { width: 64px; height: 240px; display: flex; align-items: center; justify-content: center; border: 1px solid #b9aaa0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%); }
.ribbon-end { box-shadow: inset 5px 0 0 -2px #c9a440, inset -5px 0 0 -2px #c9a440; }
.ribbon-end span { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 200px; overflow: hidden; text-align: center;
  font-family: 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.05rem; color: #d9b45a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.ribbon-photos { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.ribbon-photos[hidden] { display: none; }
.ribbon-photos span { grid-column: 1 / -1; font-size: 0.75rem; color: var(--muted); }
.ribbon-photos img { width: 100%; height: 150px; object-fit: cover; object-position: 50% 62%; display: block; }
.ribbon-photos a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
.ribbon-bila span { color: #b8902a; text-shadow: none; }
.cart-ribbon { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--brown); }
.cart-ribbon .ribbon-chip { width: 14px; height: 14px; flex: none; }
@media (min-width: 720px) {
  .ribbon-body { grid-template-columns: 1fr 200px; align-items: start; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Discount code in the cart */
.sum-row.discount { color: var(--green); font-weight: 600; }
.coupon-box { margin: 8px 0; font-size: 0.9rem; }
.coupon-box summary { cursor: pointer; color: var(--green); font-weight: 600; }
.coupon-form { display: flex; gap: 6px; margin-top: 8px; }
.coupon-form input { flex: 1; min-width: 0; font: inherit; padding: 10px; border: 1px solid #cdbfb5; text-transform: uppercase; border-radius: 0; }
.link-button { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }

/* Video message */
.video-option { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.video-option input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--green); flex: none; }
.video-option span { display: grid; gap: 2px; }
.video-option em { font-style: normal; font-weight: 700; color: var(--brown); }
.video-option small { color: var(--muted); }
.video-cta { width: 100%; border-top: 3px solid var(--green-light); padding-top: 12px; display: grid; gap: 8px; justify-items: center; }
.video-page .panel { max-width: 620px; margin: 0 auto; display: grid; gap: 12px; justify-items: center; text-align: center; padding: 28px; }
.video-player { width: 100%; max-height: 70vh; background: #000; }
.video-pick { cursor: pointer; }
.video-progress { width: 100%; height: 10px; background: #eee3dc; }
.video-progress span { display: block; height: 100%; width: 0; background: var(--green); transition: width 0.2s; }

/* Customer account */
.account-login { max-width: 520px; margin: 0 auto; display: grid; gap: 12px; padding: 28px; }
.account-form { display: grid; gap: 12px; }
.account-perks { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; color: var(--brown); }
.account-grid { display: grid; gap: 20px; }
.account-grid h2 { font-size: 1.2rem; margin-bottom: 10px; }
.account-orders { display: grid; gap: 8px; }
.account-order { display: flex; justify-content: space-between; gap: 12px; text-decoration: none; color: var(--brown); }
.account-order:hover { border-color: var(--red); }
.account-order span { display: grid; gap: 2px; }
.account-order small { color: var(--muted); }
.account-order-meta { text-align: right; justify-items: end; }
.st { font-style: normal; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; background: #eee3dc; }
.st-on { background: #e7f2d0; color: var(--green); }
.st-pay { background: #fde4e1; color: var(--red); }
.st-off { color: var(--muted); }
@media (min-width: 900px) { .account-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.recipients { display: grid; gap: 8px; }
.recipient summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.recipient summary span { color: var(--muted); font-size: 0.9rem; }
.recipient-form { display: grid; gap: 10px; margin-top: 12px; }
.recipient-form select { font: inherit; padding: 12px; border: 1px solid #cdbfb5; background: #fff; min-height: 48px; border-radius: 0; }
.recipient-date { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.recipient-actions { display: flex; gap: 14px; align-items: center; }
.account-grid h2#obdarovani { margin-top: 28px; }
.saved-recipients { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.btn-small { padding: 8px 12px; font-size: 0.85rem; box-shadow: none; }
.terms { margin: 6px 0; align-items: flex-start; line-height: 1.45; }
.terms span { flex: 1; min-width: 0; padding-top: 1px; }
.terms input { flex: none; }
.terms select { font: inherit; font-size: 0.85rem; padding: 4px 6px; border: 1px solid #cdbfb5; border-radius: 0; }

/* Cookie bar */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 3px solid var(--green-light); box-shadow: 0 -8px 24px rgba(69, 13, 0, 0.15); }
.cookie-bar[hidden] { display: none; }
.cookie-inner { display: grid; gap: 12px; padding-block: 14px; }
.cookie-text p { margin: 4px 0 0; font-size: 0.88rem; color: var(--brown); }
.cookie-text a { color: var(--green); font-weight: 600; }
.cookie-settings { display: grid; gap: 4px; margin-top: 10px; }
.cookie-settings[hidden], .cookie-actions [hidden] { display: none; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cookie-actions .btn { padding: 10px 18px; }
@media (min-width: 900px) { .cookie-inner { grid-template-columns: 1fr auto; align-items: center; } }

/* Card payment on the thank-you page (GoPay's card form is an iframe; wallets draw their own buttons). */
.card-payment { width: 100%; max-width: 420px; margin: 18px auto; text-align: left; }
.card-payment h2 { text-align: center; margin: 0 0 12px; }
.card-payment .wallets { display: grid; gap: 8px; margin-bottom: 12px; }
.card-payment .wallets:empty { display: none; }
.card-payment .card-form { min-height: 220px; }
.card-payment .small { font-size: 0.85rem; text-align: center; }

/* Kontakt (Vašek, 3 Nov 2026): calls first, a map of the shops, three clean shop cards, company details at the end. */
.contact-hero { background: var(--cream); border: 1px solid var(--line); padding: 28px 30px 70px; margin-top: 6px; }
.contact-hero h1 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 2.8rem); }
.contact-hero .contact-intro { max-width: 70ch; margin: 0; font-size: 1.05rem; }
.contact-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: -46px 18px 24px; position: relative; }
.contact-card { display: grid; justify-items: center; text-align: center; gap: 3px; padding: 22px 18px; text-decoration: none; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--brown); transition: border-color .15s; }
.contact-card:hover { border-color: var(--red); }
.contact-card .contact-icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--cream); border: 1px solid var(--line); font-size: 1.5rem; margin-bottom: 8px; }
.contact-card strong { font-size: 1.3rem; color: var(--red); overflow-wrap: anywhere; line-height: 1.25; }
.contact-card span:last-child { color: var(--muted); font-size: 0.9rem; }
.contact-call, .contact-mail { display: grid; gap: 2px; padding: 18px 22px; text-decoration: none; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--green); color: var(--brown); }
.contact-call strong { font-size: 1.9rem; color: var(--green); line-height: 1.2; }
.contact-mail { border-left-color: var(--red); }
.contact-mail strong { font-size: 1.15rem; color: var(--red); overflow-wrap: anywhere; }
.contact-call span:last-child, .contact-mail span:last-child { color: var(--muted); font-size: 0.9rem; }
.contact-call-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.contact-call:hover, .contact-mail:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }
.shops-map { height: 380px; border: 1px solid var(--line); margin-bottom: 16px; z-index: 0; }
.shop-pin { background: none; border: 0; }
.shop-pin span { display: inline-block; transform: translate(-50%, -100%); white-space: nowrap; background: var(--red); color: #fff; font-weight: 700; font-size: 0.85rem; padding: 4px 10px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); position: relative; }
.shop-pin span::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--red); }
.shops { gap: 16px; }
.shop-photo { height: 220px; }
.shop-body { gap: 10px; padding: 16px 18px 18px; }
.shop-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shop-title h2 { margin: 0; font-size: 1.4rem; }
.shop-place { color: var(--muted); font-weight: 600; }
.shop-address { color: var(--brown); line-height: 1.45; }
table.hours { display: table; width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 0; }
table.hours th, table.hours td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--line); font-weight: 500; }
table.hours th { color: var(--muted); width: 45%; }
table.hours tr.today { background: #f1f7e6; }
table.hours tr.today th, table.hours tr.today td { color: var(--green); font-weight: 700; }
.shop-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.shop-actions .btn { padding: 11px 14px; font-size: 1rem; }
.contact-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 22px; background: #fff; border: 1px solid var(--line); }
.contact-info section { padding: 18px 20px; }
.contact-info section + section { border-left: 1px solid var(--line); }
.contact-info h3 { margin: 0 0 8px; font-size: 1.05rem; }
.contact-info p { margin: 0 0 8px; }
.contact-info dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 0.92rem; }
.contact-info dt { color: var(--muted); }
.contact-info dd { margin: 0; overflow-wrap: anywhere; }
.contact-info a { color: var(--green); font-weight: 600; text-decoration: none; }
@media (max-width: 860px) {
  .contact-top { grid-template-columns: 1fr; margin-inline: 0; }
  .contact-info { grid-template-columns: 1fr; }
  .contact-info section + section { border-left: 0; border-top: 1px solid var(--line); }
  .shops-map { height: 300px; }
}
.shop-body .shop-actions .btn-green, .shop-body .shop-actions .btn-green:hover { color: #fff; }
.shop-body .shop-actions .btn-ghost:hover { color: var(--red); border-color: var(--red); }
.shop-title { align-items: center; } .shop-title .shop-note { align-self: center; }
/* Photo galleries under an article (Svatební, Smuteční květiny). */
.page-gallery { margin: 28px 0; }
.page-gallery ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.page-gallery a { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #f4efe8; }
.page-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.page-gallery a:hover img { transform: scale(1.04); }
/* E-maily, Fakturační údaje, Bankovní spojení as three cards like the shops (Vašek, 3 Nov 2026). */
.contact-info { background: none; border: 0; gap: 16px; }
.contact-info section { background: #fff; border: 1px solid var(--line); }
.contact-info section + section { border-left: 1px solid var(--line); }
@media (max-width: 860px) { .contact-info section + section { border-top: 1px solid var(--line); } }
.site-footer a.social, footer a.social { display: inline-flex; align-items: center; gap: 8px; }
/* Wedding inquiry on top of the Svatba page (Vašek, 3 Nov 2026): one tidy panel. */
.wedding-title { margin-bottom: 12px; }
.wedding { margin: 0 0 32px; border: 1px solid var(--line); border-top: 4px solid var(--green-light); background: #fff; padding: 22px 24px 24px; }
.wedding-head h2 { margin: 0 0 4px; }
.wedding-head p { margin: 0 0 6px; }
.wedding-form { gap: 18px; }
.wedding-contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.wedding-form h3 { margin: 4px 0 -6px; }
.wedding-people { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.wedding-people fieldset { background: #fdfaf6; border: 1px solid var(--line); padding: 10px 14px 12px; }
.wedding-people .count { display: grid; grid-template-columns: minmax(0, 1fr) 70px; align-items: center; gap: 8px; }
.wedding-people .count input { padding: 8px; text-align: center; }
.wedding-bottom { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: start; }
.wedding-submit { display: flex; justify-content: flex-end; }
@media (max-width: 1000px) { .wedding-contact, .wedding-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wedding-contact, .wedding-people, .wedding-bottom { grid-template-columns: 1fr; } .wedding { padding: 16px; } .wedding-submit .btn { width: 100%; } }
@media (min-width: 900px) { .text-grid.single { grid-template-columns: minmax(0, 1fr); } }
.wedding-photos input[type="file"] { padding: 10px; border: 1px dashed #cdbfb5; background: #fdfaf6; width: 100%; }
.account-steps { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; }
/* Cart button: a clear white cart icon on the red (the emoji was hard to see). */
.cart-button { gap: 8px; padding: 9px 16px; font-size: 1.05rem; }
.cart-button .cart-icon { display: block; flex: none; color: #fff; }
.cart-button:hover { background: var(--red-dark); }
/* Rating in the strip: five stars, 4.9 of them gold. */
.stars { position: relative; display: inline-block; font-size: 1.6rem; line-height: 1; color: #e2d9cf; letter-spacing: 2px; white-space: nowrap; }
.stars-on { position: absolute; left: 0; top: 0; overflow: hidden; color: #f2b705; }
/* Sizes: "ušetříte" on top (red), "Nejprodávanější" under the price (green) — Vašek, 3 Nov 2026. */
.size-badge.size-saving { background: var(--red); }
.size-price em.size-best { background: var(--green); color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: 0.72rem; }
/* Product video: still picture with a play button, the player after a click. */
.detail-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 6px 0 16px; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; }
.detail-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; }
.detail-video .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 50px; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 1.5rem; }
.detail-video:hover .play { background: var(--red-dark); }
.detail-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.detail-video .video-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: 0.95rem; text-align: left; line-height: 1.35; }
.detail-video .video-label strong { display: inline-block; background: var(--red); color: #fff; font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; margin-right: 8px; vertical-align: 1px; }
.account-title { text-align: center; display: grid; gap: 2px; }
.account-title small { font-size: 1.05rem; font-weight: 600; color: var(--muted); }

/* Footer (Vašek, 4 Nov 2026): light, four columns, contact with hours, round social icons, delivery and payment
   badges and the Google rating. */
.site-foot { background: #f6f0e9; color: var(--brown); border-top: 1px solid var(--line); }
.site-foot a { color: var(--brown); }
.site-foot h3 { color: var(--brown); font-size: 1.2rem; margin: 0 0 16px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.3fr; gap: 28px; padding-block: 40px 28px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot-cols ul a { color: #5b4a41; text-decoration: none; font-size: 1rem; }
.foot-cols ul a:hover { color: var(--red); }
.foot-person { display: flex; gap: 16px; align-items: flex-start; }
.foot-avatar { position: relative; flex: none; width: 82px; height: 82px; border-radius: 0; border: 1px solid var(--brown); display: grid; place-items: center; font-size: 2.4rem; background: #fff; }
.foot-avatar i { position: absolute; right: 4px; bottom: 4px; width: 14px; height: 14px; border-radius: 50%; background: #5cb85c; border: 2px solid #fff; }
.pay-badge.pay-paypal { color: #009cde; font-style: italic; font-weight: 800; }
.pay-badge.pay-paypal b { color: #003087; }
.foot-avatar.closed i { background: #e0302b; }
.foot-person > div { display: grid; }
.site-foot .foot-phone { font-size: 1.5rem; font-weight: 700; color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.site-foot .foot-mail { font-size: 1.15rem; font-weight: 600; color: var(--brown); text-decoration: underline; text-underline-offset: 3px; margin-top: 8px; overflow-wrap: anywhere; }
.foot-person small { color: #7a6a60; font-size: 0.9rem; }
.foot-follow { margin-top: 26px !important; }
.foot-social { display: flex; gap: 12px; }
.foot-social a { width: 52px; height: 52px; border-radius: 0; border: 1px solid #cdbfb5; display: grid; place-items: center; background: transparent; }
.foot-social a.fb { color: #1877f2; }
.foot-social a.ig { color: #d62976; }
.foot-social a:hover { background: #fff; }
.foot-badges { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 28px; align-items: end; padding-block: 10px 30px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pay-badge { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border: 1px solid var(--brown); border-radius: 0; background: #fff; font-weight: 700; font-size: 0.95rem; color: #222; white-space: nowrap; }
.pay-visa { background: #1a1f71; color: #fff; border-color: #1a1f71; font-style: italic; letter-spacing: 0.04em; }
.pay-mc { background: #111; border-color: #111; gap: 0; padding: 0 10px; }
.pay-mc i { width: 18px; height: 18px; border-radius: 50%; background: #eb001b; display: block; }
.pay-mc i + i { background: #f79e1b; margin-left: -7px; opacity: 0.9; }
.pay-wolt { background: #0077b3; color: #fff; border-color: #0077b3; } /* darker than Wolt's #009de0: readable white text (audit 12 Nov 2026) */
.pay-badge .g { width: 1.05em; height: 1.05em; }
.foot-rating { display: flex; gap: 12px; align-items: center; justify-self: end; border-top: 2px solid #34a853; padding-top: 8px; }
.g-logo { width: 2.3rem; height: 2.3rem; flex: none; }
.foot-rating > div { display: grid; }
.rating-line { display: flex; align-items: center; gap: 8px; font-size: 1.5rem; font-weight: 700; color: #b35900; } /* 3:1 on the footer beige (audit 13 Nov 2026) */
.rating-line .stars { font-size: 1.2rem; }
.foot-rating small { color: #7a6a60; }
.site-foot .foot-note { color: #7a6a60; opacity: 1; border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-badges { grid-template-columns: 1fr; } .foot-rating { justify-self: start; } }
@media (max-width: 560px) { .foot-cols { grid-template-columns: 1fr; } }
.site-foot .foot-mail { font-size: 1.02rem; }
/* Three columns only where they fit; below that the media query above stacks them (audit 12 Nov 2026: 549 px wide on phones). */
@media (min-width: 1001px) { .foot-badges { grid-template-columns: 1.3fr 1.7fr 1fr; align-items: start; } .foot-rating { align-self: end; } }

/* Inspirace na vzkaz: category jump links, messages as small cards with a copy button (message_ideas_controller.js) */
.message-ideas .idea-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.message-ideas .idea-nav a { padding: 7px 14px; border: 1px solid var(--brown); border-radius: 0; background: #fff; color: var(--brown); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.message-ideas .idea-nav a:hover { background: var(--brown); color: #fff; }
.message-ideas h2 { scroll-margin-top: 90px; }
.message-ideas ul.ideas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.message-ideas ul.ideas li { margin: 0; padding: 14px 14px 10px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--red); display: grid; gap: 8px; font-style: italic; }
.message-ideas ul.ideas li::before { content: none; }
.message-ideas .idea-copy { justify-self: end; font: inherit; font-style: normal; font-size: 0.82rem; font-weight: 600; color: var(--red); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.message-ideas .idea-copy.done { color: #2e7d32; }

/* Kytice růží: the rose counter (rose_counter_controller.js) */
.roses { flex-basis: 100%; display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); background: #fff; margin-bottom: 14px; }
/* Price per rose as a centred price tag, the counter centred under it (Vašek, 12 Nov 2026). */
.roses-unit { margin: 0 auto; display: grid; justify-items: center; gap: 2px; padding: 10px 28px 12px; background: var(--cream); border: 1px dashed var(--brown); text-align: center; }
.roses-unit-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brown); }
.roses-unit-price { font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: var(--red); }
.roses-label { margin: 0; font-weight: 700; text-align: center; }
.roses-qty { justify-self: center; display: inline-flex; align-items: stretch; width: max-content; border: 2px solid var(--brown); border-radius: 0; overflow: hidden; background: #fff; }
.roses-qty button { width: 56px; border: 0; background: var(--cream); color: var(--brown); font-size: 1.7rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background 0.15s; }
.roses-qty button:hover { background: var(--brown); color: #fff; }
.roses-qty input { width: 90px; height: 56px; border: 0; border-inline: 2px solid var(--brown); border-radius: 0; font-size: 1.6rem; font-weight: 800; text-align: center; color: var(--brown); }
.roses-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.roses-quick button { white-space: nowrap; padding: 10px 2px; border: 1px solid var(--brown); border-radius: 0; background: #fff; color: var(--brown); font: inherit; font-weight: 700; cursor: pointer; }
.roses-quick button:hover { border-color: var(--red); color: var(--red); }
.roses-quick button { display: grid; gap: 2px; justify-items: center; }
.roses-quick button small { font-size: 0.72rem; font-weight: 600; opacity: 0.85; }
.roses-buy { flex-basis: 100%; width: 100%; }
@media (max-width: 420px) { .roses-quick button { font-size: 0.85rem; padding-inline: 1px; } .roses-quick button small { font-size: 0.62rem; white-space: normal; line-height: 1.15; } }
.roses-quick button[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: #fff; }
.roses-discounts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 0.9rem; color: var(--green, #2e7d32); }
.roses-sum { margin: 0; display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.roses-sum div { display: flex; justify-content: space-between; gap: 12px; }
.roses-sum dt { color: var(--muted); }
.roses-sum dd { margin: 0; font-weight: 600; }
.roses-total dt, .roses-total dd { font-size: 1.3rem; font-weight: 800; color: var(--brown); }
.roses-hint { margin: 0; font-size: 0.9rem; text-align: center; }

/* Square everything that has a frame or is a button (Vašek, 4 Nov 2026: no rounded shapes). */
button, input, select, textarea, .btn { border-radius: 0; }

/* Video message: highlighted box among the promises and a section on the home page (Vašek, 5 Nov 2026) */
/* The video tile looks like the others (Vašek, 10 Nov 2026) and leads to the video section of the home page. */
.video-promo { display: grid; gap: 18px 32px; margin-top: 28px; padding: 26px; background: #fff; border: 2px solid var(--brown); }
.video-promo h2 { margin: 0 0 8px; font-size: 1.7rem; }
.video-promo p { margin: 0; }
.video-promo .hero-kicker { margin-bottom: 6px; }
.video-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.video-steps li { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: start; }
.video-steps li::before { content: counter(step); grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; background: var(--red); color: #fff; font-weight: 800; font-size: 1.2rem; }
.video-steps span { color: var(--muted); font-size: 0.92rem; }
@media (min-width: 900px) { .video-promo { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (max-width: 719px) { .usp-grid > .usp-video { grid-column: 1 / -1; order: -1; } }

/* Home page banner: one big photo, text on a dark gradient on the left (Vašek, 8 Nov 2026) */
.hero-banner { position: relative; display: flex; align-items: center; min-height: 460px; background-color: var(--brown); background-size: cover; background-position: center 40%; background-image: var(--hero-image-small, none); }
@media (min-width: 720px) { .hero-banner { background-image: var(--hero-image, none); } }
.hero-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40,10,0,.85) 0%, rgba(40,10,0,.6) 45%, rgba(40,10,0,.05) 78%); }
.hero-banner .wrap { position: relative; width: 100%; padding-block: 48px 72px; color: #fff; }
.hero-banner .hero-kicker { color: #ffd9cf; }
.hero-banner h1 { color: #fff; max-width: 17ch; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.hero-banner h1 span { color: #ff9c88; }
.hero-banner .hero-lead { color: #f3e6df; max-width: 34ch; font-size: 1.15rem; }
.hero-banner .btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.hero-banner .btn-ghost:hover { background: #fff; color: var(--brown); }
.hero-banner .hero-rating { color: #f3e6df; }
.hero-banner .hero-rating strong { color: #fff; }
.hero-banner + .home-usp { margin-top: -40px; }
@media (min-width: 1000px) { .hero-banner { min-height: 560px; } }
@media (max-width: 719px) { .hero-banner::before { background: linear-gradient(180deg, rgba(40,10,0,.55) 0%, rgba(40,10,0,.85) 100%); } }

.foot-phone.foot-email { font-size: 1.05rem; white-space: nowrap; }
@media (max-width: 360px) { .foot-phone.foot-email { white-space: normal; overflow-wrap: anywhere; } }
.foot-person > div { min-width: 0; }
#video-vzkaz { scroll-margin-top: 175px; } /* below the sticky header with the category bar */

/* Product: price next to one big add button, code under the photos (Vašek, 10 Nov 2026) */
.buy-row { flex-basis: 100%; display: flex; align-items: center; gap: 18px; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.buy-row .detail-price { margin: 0; white-space: nowrap; }
.buy-row .buy-button { flex: 1; min-height: 56px; font-size: 1.15rem; }
.detail-code { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 420px) { .buy-row { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; } }

/* Mapa rozvozu (Vašek, 10 Nov 2026) */
.area-head h1 { margin: 0 0 8px; }
.area-lead { font-size: 1.05rem; margin: 0 0 18px; }
.area-check { display: flex; gap: 10px; flex-wrap: wrap; }
.area-check input { flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 14px; font: inherit; font-size: 1.05rem; border: 2px solid var(--brown); }
.area-check .btn { min-height: 52px; padding-inline: 26px; }
.area-result { margin: 12px 0 0; padding: 12px 16px; font-weight: 700; border-left: 4px solid currentColor; }
.area-result.ok { background: #e8f5e9; color: #1b6e2a; }
.area-result.miss { background: #fdecea; color: #b3261e; }
.area-map { height: 520px; margin-top: 16px; border: 1px solid var(--line); background: var(--cream); position: relative; z-index: 0; isolation: isolate; }
/* Leaflet's own layers go up to z-index 1000; isolation keeps them under the sticky header.
   The address suggestions sit in the flow, not over the next field, so a click there cannot pick an address. */
.suggest-host { position: relative; }
.suggest { position: static; z-index: 30; margin: 2px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid #cdbfb5; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 300px; overflow-y: auto; }
.area-check .suggest { position: absolute; left: 0; right: 0; top: 100%; }
.suggest li { padding: 10px 14px; cursor: pointer; border-top: 1px solid var(--line); }
.suggest li:first-child { border-top: 0; }
.suggest li:hover, .suggest li.active { background: var(--cream); }
@media (max-width: 719px) { .area-map { height: 380px; } }

/* As wide as the tiles and the video box next to it, not the whole .wrap with its side padding (Vašek, 13 Nov 2026). */
.home-area { width: calc(100% - 32px); max-width: 1168px; box-sizing: border-box; grid-template-columns: minmax(0, 1fr); margin-top: 26px; padding: 22px clamp(14px, 4vw, 24px); min-width: 0; background: #fff; border: 2px solid var(--green, #2e7d32); display: grid; gap: 12px; }
.home-area h2 { margin: 0 0 4px; font-size: 1.4rem; }
.home-area p { margin: 0; }
@media (min-width: 900px) { .home-area { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; } .home-area .area-result { grid-column: 1 / -1; } }
.area-hint { margin: -6px 0 16px; }

.area-pin { position: relative; display: inline-block; white-space: nowrap; padding: 6px 10px; font-weight: 700; font-size: 0.85rem; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.3); transform: translate(-14px, -100%); }
.area-pin.ok { background: #2e7d32; } .area-pin.miss { background: #c62828; }
.home-area-map { grid-column: 1 / -1; height: 360px; margin-top: 4px; }

/* Banner with a bouquet photo on white (Vašek, 10 Nov 2026: red roses): photo kept sharp on the right, dark text */
.hero-banner.hero-product { background-color: #fff; background-size: auto 112%; background-position: right 6% center; background-repeat: no-repeat; }
.hero-banner.hero-product::before { background: linear-gradient(90deg, var(--cream) 0%, var(--cream) 42%, rgba(255,255,255,0) 62%); }
.hero-banner.hero-product .wrap { color: var(--brown); }
.hero-banner.hero-product .hero-kicker { color: var(--red); }
.hero-banner.hero-product h1 { color: var(--brown); }
.hero-banner.hero-product h1 span { color: var(--red); }
.hero-banner.hero-product .hero-lead, .hero-banner.hero-product .hero-rating { color: var(--muted); }
.hero-banner.hero-product .hero-rating strong { color: var(--brown); }
.hero-banner.hero-product .btn-ghost { color: var(--brown); border-color: var(--brown); }
.hero-banner.hero-product .btn-ghost:hover { background: var(--brown); color: #fff; }
@media (max-width: 719px) {
  /* Phone: text on white, the roses whole below it */
  .hero-banner.hero-product { background-size: 50% auto; background-position: center bottom 50px; }
  .hero-banner.hero-product::before { display: none; }
  .hero-banner.hero-product .wrap { padding-bottom: 370px; }
  /* The wide teddy photo (13 Nov 2026): nearly the full width under the text */
  .hero-banner.hero-static { background-size: calc(100% - 32px) auto; background-position: center bottom 56px; }
  .hero-banner.hero-static .wrap { padding-bottom: calc((100vw - 32px) * 0.75 + 40px); }
}
/* Its white studio background runs into the banner's white */
.hero-banner.hero-static { background-color: #f6f6f5; }
@media (min-width: 720px) { .hero-banner.hero-static { background-position: right center; } }
/* PC: the photo in its own layer, its left edge fading into the cream and its white tinted to the cream by multiply,
   so no seam shows between photo and banner (Vašek, 14 Nov 2026) */
@media (min-width: 720px) {
  .hero-banner.hero-static { background-image: none; background-color: var(--cream); }
  .hero-banner.hero-static::before { left: auto; right: 0; aspect-ratio: 1335 / 1000; background: var(--hero-image) right center / cover no-repeat; mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%); }
}
/* Text in a white card with the same-day delivery strip (Vašek, 14 Nov 2026: návrh B) */
.hero-static .hero-card { max-width: 540px; background: #fff; padding: 34px 38px 30px; box-shadow: 0 18px 50px rgba(60,20,0,.12); border-top: 4px solid var(--red); }
.hero-static .hero-card h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-top: 4px; }
.hero-static .hero-card .hero-lead { margin-bottom: 22px; }
.hero-strip { margin: 22px -38px -30px; padding: 14px 38px; background: var(--cream); display: grid; gap: 6px; font-size: .98rem; color: var(--brown); }
.hero-strip p { margin: 0; display: flex; gap: 10px; align-items: baseline; }
.hero-strip strong { color: var(--red); }
@media (min-width: 720px) and (max-width: 1099px) {
  .hero-static .hero-card { max-width: 50vw; padding: 26px 28px 24px; }
  .hero-static .hero-strip { margin: 18px -28px -24px; padding: 12px 28px; }
}
@media (max-width: 719px) {
  .hero-static .hero-card { padding: 24px 20px 20px; }
  .hero-strip { margin: 18px -20px -20px; padding: 12px 20px; }
}

/* Account: addresses used in earlier orders */
.used-addresses { display: grid; gap: 8px; margin-bottom: 24px; }
.used-address { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.used-address span { display: grid; gap: 2px; }
.used-address small { color: var(--muted); }
.account-form .small { font-size: 0.85rem; margin: 0; }
.saved-recipients { align-items: center; }
.fields .saved-recipients.full { grid-column: 1 / -1; margin-bottom: 0; }

/* Customer account page (Vašek, 11 Nov 2026): greeting with the main actions, orders five a page. */
.account-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 22px 24px; margin-bottom: 22px; background: var(--cream); border: 1px solid var(--line); }
.account-hero h1 { margin: 0 0 4px; }
.account-hero p { margin: 0; }
.account-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.account-hero-actions form { margin: 0; }
.btn-logout { border-color: var(--red); color: var(--red); }
.btn-logout:hover { background: var(--red); color: #fff; }
.account-page .pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.account-side { display: grid; gap: 16px; }
.account-form .fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.head-link { white-space: nowrap; }
.head-link span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
@media (min-width: 1000px) { .head-link span { display: inline-block; } }
@media (min-width: 1000px) and (max-width: 1199px) { .head-link span { display: none; } }

.account-stats { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 8px 0 0; }
.account-stats div { display: grid; gap: 2px; }
.account-stats dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.account-stats dd { margin: 0; font-weight: 700; color: var(--brown); }
.head-link { display: inline-flex; align-items: center; gap: 6px; }
.user-icon { flex: none; }

/* Cart: gifts to go with the flowers, the coupon field always open (Vašek, 11 Nov 2026) */
.cart-gifts { margin-top: 22px; }
.cart-gifts h2 { margin-bottom: 10px; }
.cart-gift-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .cart-gift-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cart-gift { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #fff; border: 1px solid var(--line); text-align: center; }
.cart-gift a { flex: 1; display: grid; align-content: start; gap: 6px; color: var(--brown); text-decoration: none; font-size: 0.88rem; font-weight: 600; }
.cart-gift img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cart-gift strong { color: var(--green); }
.coupon-label { display: block; font-weight: 600; color: var(--brown); margin-bottom: 4px; }
.coupon-form { margin-top: 0; }

/* Checkout details (Vašek, 11 Nov 2026): weeks of day tiles, delivery note, actions under the form */
.checkout-single { grid-template-columns: minmax(0, 1fr) !important; max-width: 860px; }
.day-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.day-tile.closed span { background: var(--cream); color: #bbb; border-style: dashed; cursor: not-allowed; }
.day-tile.closed small { color: #bbb; }
@media (max-width: 480px) { .day-week { gap: 4px; } .day-week .day-tile span { min-height: 48px; padding: 4px 2px; font-size: 0.85rem; } }
.delivery-note { margin: 10px 0 0; padding: 10px 14px; background: #e8f5e9; color: #1b6e2a; }
.area-info { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: -4px 0 18px; background: #e8f5e9; border-left: 4px solid var(--green); }
.area-info p { margin: 0; flex: 1 1 220px; color: #1b4d20; }
.area-info-icon { font-size: 1.6rem; }
@media (max-width: 560px) { .area-info { flex-wrap: wrap; } }
.head-with-badge { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.free-badge { background: var(--green); color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; }
.card-text-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.video-option { align-items: center; }
.video-option span { flex: 1; }
.video-option em { margin-left: auto; white-space: nowrap; font-size: 1.05rem; }
.checkout-actions { margin-top: 24px; padding: 18px; background: #fff; border: 1px solid var(--line); display: grid; gap: 14px; }
.checkout-buttons { display: flex; gap: 12px; align-items: stretch; justify-content: space-between; flex-wrap: wrap-reverse; }
.checkout-buttons .back-link { display: flex; align-items: center; justify-content: center; flex: 1 1 160px; max-width: 100%; }
@media (min-width: 720px) { .checkout-buttons .back-link { flex: 0 0 auto; } }
.checkout-buttons .btn { flex: 1 1 260px; }

/* Grid items keep to the panel's width (the coupon field pushed the cart summary out of it). */
.panel.sticky { grid-template-columns: minmax(0, 1fr); }

.cat-nav-main { display: flex; flex-direction: column; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.cat-nav-main a { font-weight: 700; }
@media (min-width: 1000px) { .cat-nav-main { display: none; } }

/* Gifts (Vašek, 11 Nov 2026): the whole bottle or box in the card, tabs for the gift categories */
.card-photo.contain img { object-fit: contain; padding: 10px; }
.gift-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.gift-tabs a { padding: 8px 16px; border: 2px solid var(--brown); color: var(--brown); text-decoration: none; font-weight: 600; }
.gift-tabs a[aria-current], .gift-tabs a:hover { background: var(--brown); color: #fff; }
/* The rose counter stands out in the category menu */
.cat-nav a.cat-highlight { background: #fff; color: var(--red); font-weight: 700; padding: 6px 12px; align-self: center; }
.cat-nav a.cat-highlight span { font-weight: 500; font-size: 0.8em; color: #b3261e; } /* 4.5:1 on white (audit 14 Nov 2026) */
.cat-nav a.cat-highlight:hover { background: var(--cream); }
@media (max-width: 999px) { .cat-nav a.cat-highlight { align-self: flex-start; margin: 4px 0; } }

.cart-gift .btn { margin-top: auto; } /* the add buttons on one line however long the names are */

/* Loyalty tiers (Vašek, 11 Nov 2026) */
.price-was { color: var(--muted); font-weight: 500; font-size: 0.85em; margin-right: 4px; }
.price-member { color: var(--red); }
.tier-badge { font-style: normal; font-size: 0.75rem; font-weight: 700; padding: 2px 6px; margin-left: 4px; background: var(--cream); color: var(--brown); white-space: nowrap; }
.tier-gold { background: #fff3c4; } .tier-silver { background: #eef0f2; } .tier-bronze { background: #f6e3d3; }
.loyalty-box { margin: 0 0 22px; padding: 18px 20px; background: #fff; border: 2px solid var(--green); display: grid; gap: 10px; }
.loyalty-now { display: flex; align-items: center; gap: 12px; }
.loyalty-now div { display: grid; }
.loyalty-now strong { font-size: 1.2rem; color: var(--brown); }
.loyalty-icon { font-size: 2.2rem; }
.loyalty-spent { margin: 0; }
.loyalty-bar { height: 10px; background: var(--cream); }
.loyalty-bar span { display: block; height: 100%; max-width: 100%; background: var(--green); }
.loyalty-tiers { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9rem; }
.loyalty-tiers li.current { color: var(--green); }

/* The official Google Pay acceptance mark on the payment option (Google's review, 12 Nov 2026) */
.option .pay-mark { height: 32px; width: auto; margin-left: auto; align-self: center; flex: none; }

/* "… je v košíku" in the middle of the screen; the customer stays on the page (Vašek, 12 Nov 2026) */
.toast.toast-center { top: 50%; bottom: auto; transform: translate(-50%, -50%); flex-direction: column; text-align: center; gap: 14px; padding: 22px 20px; font-size: 1.05rem; }
.toast.toast-center .btn { width: 100%; justify-content: center; }
.toast.toast-center .btn-ghost { border: 2px solid var(--brown); color: var(--brown); font-size: 1rem; }

/* Věrnostní program: the rules page (Vašek, 12 Nov 2026) */
.loyalty-page { max-width: 980px; }
.loyalty-hero { text-align: center; padding: 28px 16px 8px; }
.loyalty-hero h1 { margin: 0 0 8px; }
.loyalty-hero p { color: var(--muted); font-size: 1.1rem; max-width: 46ch; margin: 0 auto; }
.loyalty-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 26px 0; }
.loyalty-card { background: #fff; border: 2px solid var(--line); padding: 22px 18px; text-align: center; display: grid; gap: 6px; }
.loyalty-card .medal { font-size: 3rem; line-height: 1; }
.loyalty-card .pct { font-size: 2.4rem; font-weight: 800; color: var(--red); line-height: 1.1; }
.loyalty-card.bronze { border-color: #c98b52; } .loyalty-card.silver { border-color: #a9b0b8; } .loyalty-card.gold { border-color: #d9a400; }
.loyalty-card.current { box-shadow: var(--shadow); outline: 3px solid var(--green); }
/* Four equal tiles: number, title on one line, text, all centred (Vašek, 12 Nov 2026) */
.loyalty-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 10px 0 26px; padding: 0; list-style: none; counter-reset: step; }
.loyalty-steps li { background: var(--cream); padding: 18px 14px; counter-increment: step; display: grid; grid-template-rows: auto auto 1fr; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.loyalty-steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; background: var(--red); color: #fff; font-weight: 700; }
.loyalty-steps li strong { font-size: 1rem; min-height: 2.6em; display: grid; place-items: center; }
.loyalty-steps li span { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 760px) { .loyalty-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loyalty-rules { background: #fff; border: 1px solid var(--line); padding: 18px 22px; }
.loyalty-rules li { margin: 6px 0; }
.loyalty-cta { text-align: center; margin: 26px 0 10px; }
.badge-ok { justify-self: center; background: var(--green); color: #fff; font-weight: 700; padding: 3px 10px; font-size: 0.85rem; }

/* Video message page (Vašek, 13 Nov 2026) */
.video-page .hero-kicker { margin-bottom: 6px; }
.video-page .video-price { margin-top: 12px; font-size: 1.15rem; color: var(--brown); }
.video-page .video-price strong { color: var(--red); font-size: 1.4rem; }
.video-occasions { list-style: none; margin: 10px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.video-occasions li { background: #fff; border: 2px solid var(--line); padding: 16px; display: grid; gap: 4px; text-align: center; }
.video-occasions li > span:first-child { font-size: 2rem; }
.video-occasions li > span:last-child { color: var(--muted); font-size: 0.95rem; }
.faq { display: grid; gap: 8px; margin: 10px 0 26px; }
.faq details { background: #fff; border: 1px solid var(--line); padding: 12px 16px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--brown); }
.faq details p { margin: 8px 0 0; color: var(--muted); }
/* Cards: "původně" above "po slevě" for logged-in loyalty customers (Vašek, 13 Nov 2026) */
.price-stack { display: grid; line-height: 1.25; }
.price-was-line { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
.price-stack .price-member { font-size: 0.98rem; }
@media (max-width: 599px) { .price-stack .price-member { font-size: 0.9rem; } .price-was-line { font-size: 0.75rem; } }
.account-side { gap: 0; }
.account-side h2 { font-size: 1.2rem; margin-bottom: 10px; }
.account-side h2#email { margin-top: 28px; }
/* Doprava and Platba, design B (Vašek, 14 Nov 2026): calm summary, numbered steps, a comparison table */
.text-body .lead { font-size: 1.08rem; color: #5b4a42; margin: 0 0 22px; max-width: 640px; }
.info-sum { background: var(--cream); border: 1px solid var(--line); padding: 18px 20px; margin-bottom: 8px; }
.info-sum ul { margin: 0; padding: 0; display: grid; gap: 6px; }
.info-sum li { list-style: none; padding-left: 26px; position: relative; color: #3d2a22; }
.info-sum li::before { content: '✓'; position: absolute; left: 0; color: #3a9d23; font-weight: 700; }
.info-steps { border-left: 2px solid var(--line); margin: 0 0 0 18px; padding-left: 28px; display: grid; gap: 22px; }
.info-step { position: relative; }
.info-step .n { position: absolute; left: -49px; top: -2px; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 2px solid var(--red); color: var(--red); font-weight: 700; display: grid; place-items: center; }
.text-body .info-step h3 { font-size: 1.08rem; margin: 0 0 4px; }
.text-body .info-step p { margin: 0; color: #5b4a42; line-height: 1.6; }
.info-note { background: var(--cream); border-left: 4px solid var(--red); padding: 14px 16px; margin-top: 24px; color: #5b4a42; }
.info-note a { color: var(--red); }
.table-scroll { overflow-x: auto; }
table.info-cmp { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
table.info-cmp th { background: var(--cream); text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #7a665c; padding: 10px 14px; }
table.info-cmp td { padding: 14px; border-top: 1px solid var(--line); vertical-align: top; color: #3d2a22; }
table.info-cmp td small { display: block; color: #7a665c; }
table.info-cmp .rec { background: #eef8ea; color: #2d7a1b; font-size: .72rem; font-weight: 700; padding: 2px 6px; margin-left: 6px; text-transform: uppercase; }
@media (max-width: 620px) {
  table.info-cmp thead { display: none; }
  table.info-cmp tr { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  table.info-cmp td { border: 0; padding: 8px 14px; }
  table.info-cmp td:first-child { grid-column: 1 / -1; padding-top: 14px; }
  table.info-cmp td:nth-child(2)::before { content: 'Zaplatíte: '; color: #7a665c; }
  table.info-cmp td:nth-child(3)::before { content: 'Odešleme: '; color: #7a665c; }
}

/* Header: account and cart as one bar, the account cream with the loyalty medal under the name, the cart red with the
   total and the number of pieces (Vašek, 14 Nov 2026: návrh C); the search field narrower to make room. */
.head-bar { display: flex; align-items: stretch; }
.head-bar .head-link, .head-bar .cart-button { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; box-sizing: border-box; text-decoration: none; }
.head-bar .head-link { background: var(--cream); border: 1px solid var(--line); border-right: 0; color: var(--brown); }
.head-bar .head-link:hover { background: #f4ebe1; }
.hl-text { display: grid; line-height: 1.2; white-space: nowrap; text-align: left; max-width: 180px !important; }
.hl-text strong { font-size: 0.92rem; font-weight: 700; }
.hl-text small { font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.head-bar .tier-badge { margin: 0; padding: 0; background: none; font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.head-bar .cart-button .hl-text strong { font-size: 0.98rem; }
.head-bar .cart-button .hl-text small { color: #ffe1dd; }
.head-bar .cart-count { background: none; color: inherit; font-size: inherit; font-weight: inherit; min-width: 0; padding: 0; }
.head-link .hl-text { display: none; }
@media (min-width: 1200px) { .head-link .hl-text { display: grid; } }
@media (max-width: 560px) {
  /* Phone: the cart shows only the number of pieces, so the logo and both buttons stay on one row */
  .head-bar .cart-button .cart-sum, .head-bar .cart-ks { display: none; }
  .head-bar .cart-button { padding: 0 12px; gap: 6px; }
  .head-bar .cart-button .hl-text small { color: #fff; font-size: 0.95rem; font-weight: 700; }
  .head-bar .head-link { padding: 0 11px; }
}
@media (min-width: 1000px) { .head-search { flex-basis: 240px; max-width: 240px; } }