@font-face{font-family:'Satoshi';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/satoshi-400.woff2) format('woff2')}
@font-face{font-family:'Satoshi';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/satoshi-500.woff2) format('woff2')}
@font-face{font-family:'Satoshi';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/satoshi-700.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/outfit-600-latin.woff2) format('woff2')}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pozadi); color: var(--text); font: 400 17px/1.6 'Satoshi', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, figcaption, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }

:root {
  --r: 20px;
  --r-s: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-pruzina: cubic-bezier(.34, 1.56, .64, 1);
  --dur-plynule: 420ms;
  --obsah: 1240px;
  --okraj: clamp(16px, 4vw, 40px);
}

h1, h2, h3 { font-family: 'Satoshi', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.028em; line-height: 1.06; text-wrap: balance; }
.tab { font-variant-numeric: tabular-nums; }
.nezalomit { white-space: nowrap; }
.tl-obrys { background: #fff; color: #111; box-shadow: inset 0 0 0 1.5px #111; }
@media (hover: hover) and (pointer: fine) { .tl-obrys:hover { background: #111; color: #fff; } }
.cookie-lista { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 95; display: grid; gap: 14px; width: min(420px, calc(100vw - 32px)); padding: 20px; border: 1.5px solid #111; border-radius: 22px; background: #fff; color: #111; font-size: 14.5px; line-height: 1.55; transform: translateY(18px); opacity: 0; transition: transform 460ms var(--ease-out), opacity 260ms; }
.cookie-lista.je-videt { transform: none; opacity: 1; }
.cookie-lista a { text-decoration: underline; text-underline-offset: 2px; }
.cookie-tlacitka { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie-tlacitka .tl { min-height: 46px; padding: 0 16px; font-size: 15px; }
[data-cookies][hidden] { display: none; }
.pole .chyba { font-size: 13.5px; font-weight: 500; color: #c4321c; }
.formular-chyba { padding: 12px 16px; border: 1.5px solid #c4321c; border-radius: 14px; color: #c4321c; font-size: 15px; font-weight: 500; }
.formular-chyba[hidden], [data-ts][hidden], .hotovo[hidden] { display: none; }
@media (min-width: 961px) { .cookie-lista { left: auto; right: 24px; bottom: 24px; } }
.dostupnost { font-size: 14.5px; font-weight: 700; color: var(--tlumeny, #6b6b6b); }
.dostupnost.je-skladem { color: var(--text, #111); }
.dostupnost[hidden] { display: none; }

.obal { width: 100%; max-width: calc(var(--obsah) + var(--okraj) * 2); margin: 0 auto; padding: 0 var(--okraj); }

.hlavicka { position: relative; z-index: 20; }
.hlavicka .obal { display: flex; align-items: center; gap: 28px; height: 72px; }
.znacka { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; white-space: nowrap; }
.znacka svg { width: 30px; height: 30px; flex: none; }
.navigace { display: flex; gap: 26px; margin-left: 12px; font-size: 15.5px; font-weight: 500; }
.navigace a { opacity: .78; transition: opacity var(--dur) var(--ease); }
.navigace a[aria-current] { opacity: 1; font-weight: 700; }
.hlavicka-akce { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 15.5px; font-weight: 500; }
.kosik { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--kosik-pozadi); color: var(--kosik-text); font-weight: 700; }
.kosik svg { width: 18px; height: 18px; }
.kosik b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--akcent); color: var(--akcent-text); font-size: 12.5px; }
.hamburger { display: none; width: 48px; height: 48px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
.hamburger span { display: block; width: 22px; height: 2px; margin: 5px auto; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (hover: hover) and (pointer: fine) {
  .navigace a:hover { opacity: 1; }
}

.tl { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0; font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; cursor: pointer; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); white-space: nowrap; }
.tl svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.tl:active { transform: scale(.98); }
.tl-hlavni { background: var(--akcent); color: var(--akcent-text); }
.tl-vedlejsi { background: var(--vedlejsi-pozadi); color: var(--vedlejsi-text); }
@media (hover: hover) and (pointer: fine) {
  .tl-hlavni:hover { background: var(--akcent-hover); }
  .tl-vedlejsi:hover { background: var(--vedlejsi-hover); }
  .tl:hover svg { transform: translateX(3px); }
}

.pole { display: grid; gap: 7px; }
.pole label { font-size: 14.5px; font-weight: 700; }
.pole input, .pole select { width: 100%; height: 54px; padding: 0 16px; border: 2px solid transparent; border-radius: 14px; background: var(--pole-pozadi); font-size: 17px; font-weight: 500; appearance: none; transition: border-color var(--dur); }
.pole select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.pole input:focus, .pole select:focus { outline: none; border-color: var(--text); }
.pole .jednotka { position: relative; }
.pole .jednotka input { padding-right: 44px; }
.pole .jednotka span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 500; opacity: .55; pointer-events: none; }

.mobil-menu { display: none; }

@media (max-width: 960px) {
  .navigace, .hlavicka-akce .telefon { display: none; }
  .hamburger { display: block; }
  .hlavicka-akce { gap: 10px; }
  .mobil-menu { display: block; position: absolute; left: 0; right: 0; top: 72px; padding: 8px var(--okraj) 24px; background: var(--pozadi); border-bottom: 1px solid #ededeb; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform var(--dur) var(--ease), opacity var(--dur), visibility var(--dur); }
  .mobil-menu.je-otevreno { transform: none; opacity: 1; visibility: visible; }
  .mobil-menu a { display: block; padding: 14px 0; font-size: 20px; font-weight: 700; }
}

.supl { position: fixed; inset: 0; z-index: 100; }
.supl[hidden] { display: none; }
.supl-pozadi { position: absolute; inset: 0; background: rgb(0 0 0 / .35); opacity: 0; transition: opacity 260ms; }
.supl.je-otevreno .supl-pozadi { opacity: 1; }
.supl-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(440px, 100vw); background: #fff; transform: translateX(100%); transition: transform 280ms cubic-bezier(.2,.7,.2,1); }
.supl.je-otevreno .supl-panel { transform: none; }
.supl-hlava { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 18px 24px; border-bottom: 1px solid #ededeb; }
.supl-hlava h2 { font-size: 24px; }
.supl-zavri { position: relative; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.supl-zavri span { position: absolute; left: 12px; top: 21px; width: 20px; height: 2px; border-radius: 2px; background: #111; transform: rotate(45deg); }
.supl-zavri span + span { transform: rotate(-45deg); }
.supl-obsah { display: flex; flex-direction: column; flex: 1; overflow: auto; }
.supl-polozky { padding: 4px 24px; }
.supl-polozky li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid #f0f0ee; }
.supl-obr { display: block; width: 72px; height: 72px; border-radius: 14px; background: #f4f4f3; overflow: hidden; }
.supl-obr img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.supl-text { display: grid; gap: 1px; align-content: start; font-size: 13.5px; color: #6b6b6b; }
.supl-text b { color: #111; font-size: 15.5px; }
.supl-radek { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.krokovac.maly { display: inline-flex; align-items: center; height: 38px; border: 1.5px solid #e6e6e6; border-radius: 999px; }
.krokovac.maly button { width: 32px; height: 35px; border: 0; background: none; font-size: 18px; cursor: pointer; }
.krokovac.maly input { width: 38px; height: 35px; border: 0; background: none; text-align: center; font-size: 15px; font-weight: 700; }
.supl-odebrat { padding: 0; border: 0; background: none; font-size: 13.5px; color: #6b6b6b; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.supl-cena { font-size: 15.5px; white-space: nowrap; }
.supl-soucet { position: sticky; bottom: 0; display: grid; gap: 8px; margin-top: auto; padding: 20px 24px max(24px, env(safe-area-inset-bottom)); border-top: 1px solid #ededeb; background: #fff; }
.supl-soucet p { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: #6b6b6b; }
.supl-soucet .celkem { color: #111; font-weight: 700; font-size: 18px; }
.supl-soucet .poznamka { font-size: 13.5px; }
.supl-soucet .tl { width: 100%; margin-top: 8px; }
.supl-dal { padding: 8px; border: 0; background: none; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.supl-prazdny { display: grid; justify-items: start; gap: 16px; padding: 32px 24px; color: #6b6b6b; }
html.supl-otevreno { overflow: hidden; }
.lista-kosik { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 18px; padding: 12px 14px 12px 20px; border-radius: 999px; background: #111; color: #fff; font-size: 15px; font-weight: 500; transform: translate(-50%, 24px) scale(.94); opacity: 0; transition: transform 480ms var(--ease-pruzina), opacity 200ms; max-width: calc(100vw - 32px); }
.lista-kosik.je-videt { transform: translate(-50%, 0); opacity: 1; }
.lista-kosik.je-videt.zhoupnout { animation: zhoupnout 420ms var(--ease-pruzina); }
@keyframes zhoupnout { 40% { transform: translate(-50%, 0) scale(1.06); } }
.lista-kosik a { padding: 8px 14px; border-radius: 999px; background: var(--akcent); color: var(--akcent-text); font-weight: 700; white-space: nowrap; }
.lista-kosik[hidden] { display: none; }
.tl.je-pridano { background: #111; color: #fff; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height var(--dur-plynule) var(--ease-out), content-visibility var(--dur-plynule) allow-discrete; }
  details[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  details::details-content { transition: none; }
}

details[open] > :not(summary) { animation: odkryti var(--dur-plynule) var(--ease-out) both; }
@keyframes odkryti { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-ven 200ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-dovnitr 460ms var(--ease-out) 60ms both; }
::view-transition-group(vt-produkt) { animation-duration: 620ms; animation-timing-function: var(--ease-out); }
::view-transition-old(vt-produkt), ::view-transition-new(vt-produkt) { height: 100%; object-fit: contain; animation-duration: 420ms; animation-timing-function: var(--ease-out); }
::view-transition-new(vt-produkt):only-child { animation: vt-dovnitr 460ms var(--ease-out) 60ms both; }
::view-transition-old(vt-produkt):only-child { animation: vt-ven 200ms var(--ease-out) both; }
[data-vt-cil] { view-transition-name: vt-produkt; }
@keyframes vt-ven { to { opacity: 0; } }
@keyframes vt-dovnitr { from { opacity: 0; transform: translateY(14px); } }

.slova .s { display: inline-block; clip-path: inset(-.3em -.3em -.34em); }
.slova .s > span { display: inline-block; transform-origin: 0 100%; animation: slovo 1000ms var(--ease-out) both; animation-delay: calc(var(--zpozdeni, 0ms) + var(--i, 0) * 60ms); }
@keyframes slovo { from { transform: translateY(140%) rotate(4deg); } }
@keyframes nahoru { from { opacity: 0; transform: translateY(16px); } }
@keyframes prolnuti { from { opacity: 0; } }
@keyframes kresli { to { stroke-dashoffset: 0; } }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: none; } }

.znak { display: inline-block; white-space: pre; }
.krokovac button { transition: transform 140ms var(--ease-out), opacity var(--dur); }
.krokovac button:active { transform: scale(.84); }
.tl .popisek { display: inline-block; }
.je-pridano svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: kresli 420ms var(--ease-out) 140ms forwards; }

.ma-jezdec { position: relative; isolation: isolate; }
.ma-jezdec .jezdec { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 999px; background: #111; pointer-events: none; transition: transform 460ms var(--ease-out), width 460ms var(--ease-out), height 460ms var(--ease-out); }
.ma-jezdec > button { position: relative; background: transparent !important; transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out); }
.ma-jezdec > button[aria-pressed="true"] { border-color: transparent !important; color: #fff !important; }

.galerie-hlavni img { transition: transform 520ms var(--ease-out), opacity 180ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .galerie-hlavni { cursor: zoom-in; }
  .galerie-hlavni.lupa img { transform: scale(1.85); transition-duration: 380ms, 180ms; }
  .karta-produkt .obr img { transition: transform 520ms var(--ease-out); }
  .karta-produkt:hover .obr img { transform: scale(1.05); }
}

.tocic { width: 18px; height: 18px; flex: none; }
.tocic rect + rect { animation: tocic 1100ms linear infinite; }
@keyframes tocic { to { stroke-dashoffset: -63.13; } }

@media (max-width: 960px) {
  .mobil-menu a { opacity: 0; transform: translateY(-8px); transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--i, 0) * 35ms); }
  .mobil-menu.je-otevreno a { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .je-pridano svg path { stroke-dashoffset: 0; }
  .tocic rect + rect { animation: none !important; }
}