@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url(pismo/libre-baskerville-400.woff2) format('woff2')}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url(pismo/libre-baskerville-700.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url(pismo/work-sans-400.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url(pismo/work-sans-700.woff2) format('woff2')}

:root {
  --podklad: #F7F4F0;
  --podklad-2: #EFE8E0;
  --text: #1F1B1A;
  --text-tlumeny: #5A514E;
  --akcent: #8E2C48;
  --akcent-tmavy: #74213A;
  --na-akcentu: #FFFFFF;
  --stonek: #4E6B3A;
  --tmavy: #1F1B1A;
  --na-tmavem: #F3EEE8;
  --linka: #DCD2C7;
  --fokus: #8E2C48;
  --pismo-nadpis: 'Libre Baskerville', Georgia, serif;
  --pismo: 'Work Sans', system-ui, sans-serif;
  --kontejner: 1200px;
  --okraj: max(16px, (100vw - var(--kontejner)) / 2);
  --vyska-hlavicky: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--vyska-hlavicky) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--podklad); color: var(--text); font: 400 17px/1.6 var(--pismo); }
img { max-width: 100%; height: auto; }
a { color: var(--akcent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--pismo-nadpis); font-weight: 700; line-height: 1.22; margin: 0; }
h2 { font-size: clamp(26px, 1.4rem + .6vw, 34px); }
h3 { font-size: 21px; }
h3.mala { font-family: var(--pismo); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stonek); }
p { margin: 0; }
.nezalom { white-space: nowrap; }
.kontejner { width: min(100% - 32px, var(--kontejner)); margin-inline: auto; }

.preskok { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--akcent); color: var(--na-akcentu); }
.preskok:focus { top: 8px; }

.nadpisek { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--stonek); margin-bottom: 12px; }

/* tlačítka */
.tl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 2px solid var(--akcent); border-radius: 2px; font: 700 16px/1.2 var(--pismo); text-decoration: none; text-align: center; cursor: pointer; }
.tl--hlavni { background: var(--akcent); color: var(--na-akcentu); }
.tl--hlavni:hover { background: var(--akcent-tmavy); border-color: var(--akcent-tmavy); }
.tl--druhe { background: transparent; color: var(--akcent); }
.tl--druhe:hover { background: var(--akcent); color: var(--na-akcentu); }
.tl--maly { min-height: 44px; padding: 10px 18px; background: transparent; color: var(--akcent); }
.tl--maly:hover { background: var(--akcent); color: var(--na-akcentu); }
.tl--svetle { background: var(--podklad); border-color: var(--podklad); color: var(--akcent); }
.tl--svetle:hover { background: #fff; border-color: #fff; }
@media (prefers-reduced-motion: no-preference) { .tl { transition: background-color .2s, color .2s, border-color .2s; } }

/* štítky zelenou stonku */
.stitek, .stitky li { display: inline-block; padding: 5px 12px; background: var(--stonek); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.35; border-radius: 2px; }

/* hlavička s větou */
.hlavicka { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 12px var(--okraj); background: var(--podklad); border-bottom: 1px solid var(--linka); }
.logo { font-family: var(--pismo-nadpis); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--text); text-decoration: none; white-space: nowrap; }
.logo span { font-weight: 400; font-style: italic; color: var(--akcent); }
.logo--svetle { color: var(--na-tmavem); }
.logo--svetle span { color: #E9B3C2; }
.hlavicka__volat { min-height: 44px; padding: 10px 18px; }

.veta { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-weight: 600; margin-left: auto; }
.veta__zacatek { font-family: var(--pismo-nadpis); font-style: italic; font-weight: 400; font-size: 18px; }
.veta__volba { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px; border: 0; border-bottom: 2px solid var(--akcent); background: var(--podklad-2); color: var(--text); font: 700 16px/1.3 var(--pismo); text-align: left; text-decoration: none; cursor: pointer; }
.veta__volba::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--akcent); border-bottom: 2px solid var(--akcent); rotate: 45deg; translate: 0 -2px; }
.veta__volba[aria-expanded="true"]::after { rotate: -135deg; translate: 0 2px; }
.veta__seznam { position: absolute; z-index: 2; right: 0; top: calc(100% + 8px); width: max-content; max-width: min(440px, 100vw - 32px); padding: 6px; background: var(--podklad); border: 1px solid var(--linka); border-top: 3px solid var(--akcent); box-shadow: 0 16px 36px rgb(31 27 26 / .16); }
.veta__seznam a { display: block; min-height: 44px; padding: 10px 14px; color: var(--text); font-weight: 700; text-decoration: none; border-radius: 2px; }
.veta__seznam a span { font-weight: 400; }
.veta__seznam a:hover { background: var(--podklad-2); }
.veta__seznam a[aria-current] { color: var(--akcent); box-shadow: inset 3px 0 0 var(--akcent); }
.menu-wr .veta__seznam:not([data-otevreno]), html:not(.menu-wr) .veta__seznam:not(:target) { display: none; }
.menu-wr .veta__volba--bezjs, html:not(.menu-wr) button.veta__volba { display: none; }
@media (prefers-reduced-motion: no-preference) { .veta__volba::after { transition: rotate .2s; } }

/* úvod U4 */
.u4 { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; padding: 48px var(--okraj) 56px; }
.u4 h1 { font-size: clamp(26px, 1rem + 1.9vw, 42px); line-height: 1.2; letter-spacing: -.005em; }
.u4__perex { margin-top: 20px; font-size: 18px; color: var(--text-tlumeny); max-width: 34em; }
.u4__akce { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.stitky { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.u4__mrizka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(150px, 18vw, 250px); gap: 12px; }
.u4__mrizka li { overflow: hidden; border-radius: 2px; }
.u4__mrizka li:first-child:nth-last-child(3) { grid-row: span 2; }
.u4__mrizka img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* páteř: fotka v čele oddílu */
.celo { padding-bottom: clamp(56px, 7vw, 96px); }
.celo__fotka { margin: 0 0 clamp(28px, 3.5vw, 48px); overflow: hidden; }
.celo__fotka img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.oddil { padding: clamp(56px, 7vw, 96px) 0; }
.oddil--svetly { background: var(--podklad-2); }
.hlava { margin-bottom: 32px; }

/* tento týden */
.sezona { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; }
.sezona__ted { padding: clamp(24px, 3vw, 40px); background: #fff; border-top: 4px solid var(--stonek); }
.sezona__ted h3 { font-size: clamp(26px, 1.2rem + 1vw, 34px); margin-top: 16px; }
.sezona__kvetiny { margin: 12px 0 16px; font-family: var(--pismo-nadpis); font-size: 21px; line-height: 1.5; }
.sezona__ted > p:not(.stitek):not(.sezona__kvetiny) { color: var(--text-tlumeny); margin-bottom: 24px; }
.sezona__rok { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--linka); }
.sezona__rok dl { margin: 16px 0 0; }
.sezona__rok dl > div { padding: 14px 0; border-top: 1px solid var(--linka); }
.sezona__rok dt { font-family: var(--pismo-nadpis); font-weight: 700; font-size: 19px; }
.sezona__rok dt span { font-family: var(--pismo); font-weight: 400; font-size: 15px; color: var(--text-tlumeny); }
.sezona__rok dd { margin: 4px 0 0; }

/* obchod: dlaždice */
.dlazdice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dlazdice__polozka { display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.dlazdice__polozka img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.dlazdice__telo { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 20px 24px; }
.dlazdice__telo h3 { font-size: 20px; }
.dlazdice__telo > p:first-of-type { color: var(--text-tlumeny); font-size: 16px; }
.ceny { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 16px; }
.ceny b, .cena b { font-family: var(--pismo-nadpis); font-size: 19px; color: var(--akcent); }
.cena { font-size: 16px; }
.dlazdice__telo .tl { margin-top: auto; align-self: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .dlazdice__polozka img { transition: scale .5s ease; }
  .dlazdice__polozka:hover img { scale: 1.04; }
}
.poznamky { list-style: none; margin: 32px 0 0; padding: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--linka); }
.poznamky li { display: flex; gap: 14px; align-items: flex-start; }
.poznamky svg, .sluzby svg { flex: none; width: 28px; height: 28px; color: var(--stonek); }

/* fotopas */
.fotopas { position: relative; height: clamp(360px, 62vh, 720px); overflow: hidden; margin-bottom: clamp(0px, 1vw, 8px); }
.fotopas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* rozvoz */
.rozvoz { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.rozvoz__uzaverka { margin-top: 16px; font-size: 18px; }
.rozvoz__uzaverka b { color: var(--akcent); }
.pasma { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 14px; }
.pasmo { padding: 18px 20px; background: #fff; border-left: 4px solid var(--stonek); }
.pasmo + .pasmo { border-left-color: var(--akcent); }
.pasmo__hlava { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-family: var(--pismo-nadpis); font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.pasmo__hlava b { margin-left: auto; color: var(--akcent); }
.pasmo__znak { width: 12px; height: 12px; border-radius: 50%; background: var(--stonek); }
.pasmo__znak--dal { background: var(--akcent); }
.pasmo > p:last-child { font-size: 16px; color: var(--text-tlumeny); }
.rozvoz__mapa, .kontakt__mapa { margin: 0; }
.rozvoz__mapa img, .kontakt__mapa img { display: block; width: 100%; height: auto; border: 1px solid var(--linka); }
figcaption { margin-top: 8px; font-size: 14px; color: var(--text-tlumeny); }

/* služby */
.sluzby { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linka); }
.sluzby li { display: grid; grid-template-columns: 28px minmax(200px, 3fr) 7fr; gap: 8px 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--linka); }
.sluzby svg { align-self: start; translate: 0 2px; }
.sluzby h3 { font-size: 21px; }
.sluzby p { color: var(--text-tlumeny); max-width: 52em; }

/* kurzy */
.kurzy { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kurz { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: clamp(24px, 3vw, 36px); background: #fff; }
.kurz h3 { font-size: 24px; margin-top: 6px; }
.kurz > p:not(.stitek):not(.kurz__cena) { color: var(--text-tlumeny); }
.kurz__cena { margin-top: auto; padding-top: 8px; font-family: var(--pismo-nadpis); font-weight: 700; font-size: 30px; color: var(--akcent); }
.kurzy__dotaz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--linka); }
.kurzy__akce { display: flex; flex-wrap: wrap; gap: 12px; }

/* otázky */
.otazky { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
.otazky .hlava { margin: 0; }
.otazky__seznam details { border-top: 1px solid var(--linka); }
.otazky__seznam details:last-child { border-bottom: 1px solid var(--linka); }
.otazky__seznam summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 18px 0; font-family: var(--pismo-nadpis); font-weight: 700; font-size: 19px; cursor: pointer; list-style: none; }
.otazky__seznam summary::-webkit-details-marker { display: none; }
.otazky__seznam summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--akcent); border-bottom: 2px solid var(--akcent); rotate: 45deg; translate: 0 -3px; }
.otazky__seznam details[open] summary::after { rotate: -135deg; translate: 0 3px; }
.otazky__seznam details p { padding: 0 0 20px; color: var(--text-tlumeny); max-width: 46em; }

/* kontakt */
.kontakt { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.kontakt__firma { margin-top: 18px; font-size: 18px; }
.kontakt__spojeni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 22px 0 8px; }
.kontakt__mail { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.kontakt__radek { margin-top: 20px; }
.kontakt__radek h3 { margin-bottom: 8px; }
.doba { margin: 0; }
.doba > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px dotted var(--linka); max-width: 360px; }
.doba dd { margin: 0; font-weight: 700; }

/* výzva */
.vyzva { background: var(--akcent); color: var(--na-akcentu); padding: clamp(48px, 6vw, 80px) 0; }
.vyzva__obal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.vyzva h2 { max-width: 20em; }

/* patička */
.paticka { background: var(--tmavy); color: var(--na-tmavem); padding: 56px 0 32px; font-size: 16px; }
.paticka a { color: var(--na-tmavem); }
.paticka__hlava { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; padding-bottom: 32px; border-bottom: 1px solid rgb(243 238 232 / .2); }
.paticka__hlava p { color: #D9CFC6; }
.paticka__mapa { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 24px; padding: 32px 0; }
.paticka__mapa h2 { font-family: var(--pismo); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #B9CFA8; margin-bottom: 12px; }
.paticka__mapa ul { list-style: none; margin: 0; padding: 0; }
.paticka__mapa a { display: inline-block; padding: 5px 0; text-decoration: none; }
.paticka__mapa a:hover { text-decoration: underline; }
.paticka__spodek { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 24px; border-top: 1px solid rgb(243 238 232 / .2); color: #D9CFC6; font-size: 15px; }
.paticka :focus-visible { outline-color: #E9B3C2; }

/* tablet */
@media (max-width: 1099px) {
  .dlazdice { grid-template-columns: repeat(2, 1fr); }
  .paticka__mapa { grid-template-columns: repeat(3, 1fr); }
}

/* telefon */
@media (max-width: 899px) {
  :root { --vyska-hlavicky: 108px; }
  body { font-size: 16px; }
  .hlavicka { padding: 8px 16px; gap: 6px 12px; }
  .logo { font-size: 18px; }
  .hlavicka__volat { padding: 8px 14px; font-size: 15px; }
  .hlavicka__volat .nezalom { display: none; }
  .veta { flex-basis: 100%; order: 3; margin-left: 0; }
  .veta__zacatek { font-size: 16px; }
  .veta__volba { flex: 1; justify-content: space-between; }
  .veta__seznam { left: 0; right: 0; width: auto; max-width: none; }

  .u4 { grid-template-columns: 1fr; gap: 28px; padding: 24px 16px 40px; }
  .u4 h1 { font-size: clamp(25px, 6.6vw, 34px); }
  .u4__perex { margin-top: 14px; font-size: 16px; }
  .u4__akce { margin-top: 18px; }
  .u4__akce .tl { flex: 1 1 200px; }
  .u4__mrizka { grid-auto-rows: 150px; gap: 8px; }
  .u4__mrizka li:first-child:nth-last-child(3) { grid-row: auto; grid-column: 1 / -1; grid-row-end: span 2; }

  .celo__fotka img { aspect-ratio: 16 / 9; }
  .fotopas { height: auto; aspect-ratio: 4 / 3; }
  .sezona, .rozvoz, .kurzy, .otazky, .kontakt { grid-template-columns: 1fr; gap: 24px; }
  .poznamky { grid-template-columns: 1fr; gap: 16px; }
  .sluzby li { grid-template-columns: 28px 1fr; }
  .sluzby li p { grid-column: 2; }
  .pasmo__hlava b { margin-left: 0; }
  .vyzva__obal { flex-direction: column; align-items: flex-start; }
  .paticka__mapa { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .dlazdice { grid-template-columns: 1fr; }
  .paticka__mapa { grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
  .logo { font-size: 17px; }
}