/*! iStage · Bannery na úvodní stránce · v1.11.1
 *  Styly jsou uzavřené pod .hp-hero (slider nahoře), .hp-mid (banner gravírování uprostřed),
 *  .hp-sec (sekce z redesignu) a body.type-index (karty produktů, česká i slovenská verze se zapnutým skriptem)
 *  – platí jen na úvodní stránce, nic jiného na e-shopu neovlivní.
 */

/* ---------- Písmo bannerů Poppins (SIL Open Font License, soubory ve složce fonts/) ---------- */
@font-face{font-family:'HP Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-600-latin-ext.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'HP Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-600-latin.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:'HP Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-700-latin-ext.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'HP Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-700-latin.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:'HP Poppins';font-style:italic;font-weight:500;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-500i-latin-ext.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'HP Poppins';font-style:italic;font-weight:500;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-500i-latin.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:'HP Poppins';font-style:italic;font-weight:700;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-700i-latin-ext.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'HP Poppins';font-style:italic;font-weight:700;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-700i-latin.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}
/* písma ukázky gravírování – stejné soubory jako konfigurátor (složka gravirovani/fonts) */
@font-face{font-family:'HP Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url(/user/documents/gravirovani/fonts/great-vibes-400-latin-ext.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'HP Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url(/user/documents/gravirovani/fonts/great-vibes-400-latin.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:'HP Playfair';font-style:normal;font-weight:600;font-display:swap;src:url(/user/documents/gravirovani/fonts/playfair-display-600-latin-ext.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'HP Playfair';font-style:normal;font-weight:600;font-display:swap;src:url(/user/documents/gravirovani/fonts/playfair-display-600-latin.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}

/* ---------- 0) Než se skript připojí (zlomek sekundy): místo pro záložky a pruh výhod je rezervované
   předem, aby obsah pod sliderem neposkočil (CLS). Pojistka: kdyby skript nedorazil, po 4 s se vše vrátí. ---------- */
html.lng:not(.hp-on):not(.hp-off) body.type-index .homepage-box.before-carousel .row.banners-row { animation: hp-res-lg 0s linear 4s both; }
@keyframes hp-res-lg { from { padding-bottom: 128px; } to { padding-bottom: 0; } }
@keyframes hp-res-md { from { padding-bottom: 200px; } to { padding-bottom: 0; } }
@keyframes hp-res-sm { from { padding-bottom: 278px; } to { padding-bottom: 0; } }   /* od 1.7.3 o řadu výhod víc (Sledování zásilky) */
@keyframes hp-res-hide { from { max-height: 0; min-height: 0; overflow: hidden; visibility: hidden; } to { max-height: none; overflow: visible; visibility: visible; } }   /* min-height: Bootstrap dává sloupcům 1 px */
@media (max-width: 1199px) {
  html.lng:not(.hp-on):not(.hp-off) body.type-index .homepage-box.before-carousel .row.banners-row { animation-name: hp-res-md; }
}
@media (max-width: 767px) {
  html.lng:not(.hp-on):not(.hp-off) body.type-index .homepage-box.before-carousel .row.banners-row { animation-name: hp-res-sm; }
  /* bannery vedle slideru budou na mobilu ve slideru – nezobrazovat je předem pod ním */
  html.lng:not(.hp-on):not(.hp-off) body.type-index .homepage-box.before-carousel .row.banners-row > .col-sm-4 { animation: hp-res-hide 0s linear 4s both; }
}
/* Slider v #content – telefony (Shoptet jim posílá jiné HTML: .col-sm-8 se sliderem a .col-sm-4 s bannery) a slovenská
   verze (nemá v administraci slider: prázdné .wide-carousel a pod ním dva bannery, na počítači 855 px). Do připojení
   skriptu má místo slideru přesný rozměr výsledného slideru (2/3 šířky bez mezery 16 px, do 767 px celá šířka) a pod
   sebou okraj na záložky a pruh výhod; bannery vedle se skryjí – skript je přesune do slideru. Okraj je na slideru,
   ne na řádku: animaci řádku (odsazení zespodu) má na telefonu lišta Vaše stopa (doporuceni.css). Okraje řádku
   šablona od 768 px nuluje, do 767 px jsou -12 px jako u výsledného slideru od kraje ke kraji.
   Pojistka: po 4 s se vrátí původní stav. */
html.lng:not(.hp-on):not(.hp-off) body.type-index #content > .row.banners-row > :is(.wide-carousel, .col-sm-8) { animation: hp-in-lg 0s linear 4s both; }
html.lng:not(.hp-on):not(.hp-off) body.type-index #content > .row.banners-row > :is(.next-to-carousel-banners, .col-sm-4) { animation: hp-in-hide 0s linear 4s both; }
@keyframes hp-in-lg { from { float: none; width: calc((100% - 16px) * 2 / 3); margin: 0 0 128px; padding: 0; aspect-ratio: 1842 / 880; overflow: hidden; border-radius: 12px; background: #fafafa; } }
@keyframes hp-in-md { from { float: none; width: calc((100% - 16px) * 2 / 3); margin: 0 0 200px; padding: 0; aspect-ratio: 1842 / 880; overflow: hidden; border-radius: 12px; background: #fafafa; } }
@keyframes hp-in-sm { from { float: none; width: auto; margin: 0 0 278px; padding: 0; aspect-ratio: 1842 / 880; overflow: hidden; background: #fafafa; } }
@keyframes hp-in-hide { from { float: none; max-height: 0; min-height: 0; margin: 0; overflow: hidden; visibility: hidden; } }
@media (max-width: 1199px) {
  html.lng:not(.hp-on):not(.hp-off) body.type-index #content > .row.banners-row > :is(.wide-carousel, .col-sm-8) { animation-name: hp-in-md; }
}
@media (max-width: 767px) {
  html.lng:not(.hp-on):not(.hp-off) body.type-index #content > .row.banners-row > :is(.wide-carousel, .col-sm-8) { animation-name: hp-in-sm; }
}

/* ---------- 1) Společné ---------- */
.hp-hero, .hp-mid {
  --hp-font: 'HP Poppins', 'Poppins', 'Roboto', Arial, sans-serif;
  --hp-ink-900: #111418; --hp-text: #3d434c; --hp-muted: #5b626d; --hp-line: #e7e9ee; --hp-soft: #f6f7f9;
  --hp-blue: #0063c7;     /* modrá e-shopu ztmavená na kontrast 4,5 : 1 */
  --hp-ok: #15803d;
  -webkit-font-smoothing: antialiased;
}
.hp-hero *, .hp-hero *::before, .hp-hero *::after, .hp-mid *, .hp-mid *::before, .hp-mid *::after { box-sizing: border-box; }
.hp-hero [hidden], .hp-mid [hidden] { display: none !important; }
.hp-hero p { margin: 0; }
.hp-hero button { font-family: inherit; }
.hp-ico { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* obal .row.banners-row zůstává (počítají s ním doplňky), jen bez záporných okrajů Bootstrapu */
.row.banners-row.hp-row { display: block; margin-left: 0; margin-right: 0; }

/* ---------- 2) Rozvržení: slider | bannery vpravo, pod tím pruh výhod ---------- */
.hp-hero {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas: "main side" "usp usp";
  column-gap: 16px; row-gap: 14px; margin: 0;
}
.hp-main { grid-area: main; min-width: 0; }
/* pravý sloupec má přesně výšku slideru se záložkami – bannery se o pár px přizpůsobí (object-fit) */
.hp-side { grid-area: side; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.hp-side-i { flex: 1 1 0; min-height: 0; }
.hp-side-i > a { display: block; height: 100%; border-radius: 12px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.hp-side-i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-side-i > a:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(17, 20, 24, .55); }
/* živý banner vedle slideru – stejný snímek jako ve slideru (v úzké podobě, viz @container níže), jen stále vidět */
.hp-side-i > .hp-slide {
  position: relative; inset: auto; height: 100%; border-radius: 12px; overflow: hidden; opacity: 1; visibility: visible; transform: none;
  transition: transform .2s, box-shadow .2s;
}
.hp-side-i > .hp-slide:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(17, 20, 24, .55); }
.hp-side-disp { flex: 0 0 52px; height: 52px; }

/* ---------- 3) Slider ---------- */
.hp-slider {
  position: relative; aspect-ratio: 1842 / 880; border-radius: 12px; overflow: hidden;
  background: #fafafa; touch-action: pan-y; isolation: isolate;
}
@supports not (aspect-ratio: 1 / 1) { .hp-slider { height: 0; padding-bottom: 47.77%; } }
.hp-track { position: absolute; inset: 0; }
.hp-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(0);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .6s;
}
.hp-slide.is-right { transform: translateX(5%); }
.hp-slide.is-left { transform: translateX(-5%); }
.hp-slide.is-on {
  opacity: 1; visibility: visible; transform: none; z-index: 1;
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.hp-slide.is-prep, .hp-slider.is-drag .hp-slide { transition: none !important; }
.hp-img-link, .hp-img-link img { display: block; width: 100%; height: 100%; }
.hp-img-link img { object-fit: cover; }
.hp-slide .extended-banner-texts:empty { display: none; }

/* šipky – jen s myší, na dotykových zařízeních se listuje prstem */
.hp-arrow {
  position: absolute; z-index: 5; top: 50%; width: 44px; height: 44px; margin: -22px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--hp-ink-900);
  box-shadow: 0 8px 20px -10px rgba(17, 20, 24, .55); display: grid; place-items: center; cursor: pointer;
  opacity: 0; transition: opacity .2s, transform .2s;
}
.hp-arrow .hp-ico { width: 22px; height: 22px; }
.hp-prev { left: 12px; }
.hp-next { right: 12px; }
.hp-slider:hover .hp-arrow, .hp-arrow:focus-visible { opacity: 1; }
.hp-arrow:hover { transform: scale(1.06); }
.hp-arrow:focus-visible, .hp-tab:focus-visible, .hp-play:focus-visible, .hp-btn:focus-visible,
.hp-usp-i:focus-visible, .hp-img-link:focus-visible, .hp-live-more:focus-visible, .hp-eng:focus-visible {
  outline: 3px solid var(--hp-blue); outline-offset: 2px;
}
.hp-img-link:focus-visible, .hp-eng:focus-visible { outline-offset: -3px; }

/* záložky pod sliderem – popisek + průběh do dalšího snímku */
.hp-tabs { display: flex; align-items: stretch; gap: 8px; height: 42px; margin-top: 10px; }
.hp-tab {
  position: relative; flex: 1 1 0; min-width: 0; margin: 0; padding: 0 12px 4px;
  border: 1px solid var(--hp-line); border-radius: 10px; background: #fff; color: #5a616b;
  font: 600 13px/1.2 var(--hp-font); text-align: center; cursor: pointer;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.hp-tab-t { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hp-tab:hover { color: var(--hp-ink-900); border-color: #d3d8e0; }
.hp-tab.is-on { color: var(--hp-ink-900); border-color: var(--hp-tab-c); box-shadow: 0 10px 20px -16px var(--hp-tab-c); }
.hp-tab-bar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: #eef0f3; overflow: hidden; }
.hp-tab-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--hp-tab-c); transform: scaleX(0); transform-origin: 0 50%; }
.hp-tab.is-on .hp-tab-bar i { animation: hp-fill var(--hp-t, 6500ms) linear forwards; }
.hp-hero.is-paused .hp-tab.is-on .hp-tab-bar i { animation-play-state: paused; }
@keyframes hp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hp-play {
  flex: 0 0 44px; margin: 0; padding: 0; border: 1px solid var(--hp-line); border-radius: 10px; background: #fff;
  color: #4a5059; display: grid; place-items: center; cursor: pointer; transition: color .15s, border-color .15s;
}
.hp-play:hover { color: var(--hp-ink-900); border-color: #d3d8e0; }
.hp-play .hp-ico { width: 18px; height: 18px; }
.hp-hero.is-single .hp-tabs, .hp-hero.is-single .hp-arrow { display: none; }
/* víc než 5 snímků: záložky podle délky textu (krátké popisky `tab`), menší písmo */
@media (min-width: 768px) {
  .hp-tabs--many .hp-tab { flex: 1 1 auto; padding: 0 9px 4px; font-size: 12.5px; }
  .hp-tabs--many .hp-tab-bar { left: 9px; right: 9px; }
}

/* ---------- 4) „Živý“ banner produktu – stejný styl jako bannery z Canvy ---------- */
.hp-slide--live { background: #fafafa; container-type: inline-size; font-family: var(--hp-font); color: var(--hp-ink-900); }
.hp-swoosh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* vrstvy: text a fotka < odkaz přes celý banner (klik kamkoli = detail) < tlačítka */
.hp-live-copy {
  position: absolute; left: 3.5%; width: 45%; top: 0; bottom: 0; padding: 4% 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.hp-live-brand {
  display: block; margin: 0 0 1.1cqw; font-size: 12px; font-size: clamp(10px, 1.35cqw, 14px); font-weight: 600;
  line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--hp-ink);
}
.hp-live-title { display: block; font-size: 30px; font-size: clamp(15px, 4.2cqw, 42px); font-weight: 600; line-height: 1.08; color: var(--hp-ink-900); text-wrap: balance; }
.hp-live-sub { display: block; margin-top: .18em; font-size: 26px; font-size: clamp(13px, 3.6cqw, 36px); font-weight: 600; line-height: 1.1; color: var(--hp-ink); text-wrap: balance; }
.hp-live-text {
  display: block; max-width: 94%; margin-top: 1.3cqw; font-size: 14px; font-size: clamp(11px, 1.75cqw, 17px);
  font-style: italic; font-weight: 500; line-height: 1.35; color: #2f343a;
}
.hp-live-buy {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3em 1em;
  min-height: 1.5em; margin-top: 2.1cqw; font-size: 24px; font-size: clamp(15px, 3.2cqw, 32px);
}
.hp-live-price { white-space: nowrap; line-height: 1.1; }
.hp-live-price strong { font-weight: 700; color: var(--hp-ink-900); }
.hp-live-price small { font-size: .62em; font-weight: 600; }
.hp-live-price s { margin-right: .2em; font-size: .56em; font-weight: 600; color: #6b7280; }
.hp-live-avail {
  display: inline-flex; align-items: center; gap: .45em; font-size: 12px; font-size: clamp(10.5px, 1.5cqw, 15px);
  font-weight: 600; line-height: 1.2; color: var(--c, var(--hp-ok)); white-space: nowrap;
}
.hp-live-avail i { width: .62em; height: .62em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .22em rgba(21, 128, 61, .14); }
.hp-slide--live[data-state="nodata"] .hp-live-buy { display: none; }
.hp-live-cta { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6em 1.2em; margin-top: 2.2cqw; }
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; margin: 0;
  height: 46px; height: clamp(30px, 6.1cqw, 58px); padding: 0 24px; padding: 0 clamp(14px, 3cqw, 32px);
  border: 0; border-radius: 12px; border-radius: clamp(9px, 1.5cqw, 16px);
  background: var(--hp-btn); background: linear-gradient(180deg, var(--hp-btn), var(--hp-btn2));
  color: #fff !important; font-family: var(--hp-font); font-size: 15px; font-size: clamp(11.5px, 1.9cqw, 19px);
  font-style: italic; font-weight: 700; line-height: 1; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none !important; cursor: pointer; box-shadow: 0 12px 24px -14px var(--hp-btn);
  transition: transform .15s, filter .15s, box-shadow .15s, background .2s;
}
.hp-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.hp-btn .hp-ico { width: 1.3em; height: 1.3em; }
.hp-btn.is-busy { cursor: progress; opacity: .85; }
.hp-btn.is-done { background: var(--hp-ok); box-shadow: none; }
.hp-live-more {
  font-size: 13px; font-size: clamp(11px, 1.5cqw, 15px); font-weight: 600; line-height: 1.2;
  color: var(--hp-ink-900) !important; text-decoration: underline; text-underline-offset: 3px;
}
.hp-live-more:hover { color: var(--hp-ink) !important; }
.hp-live-media { position: absolute; z-index: 1; left: 51%; right: 4%; top: 7%; bottom: 7%; display: flex; align-items: center; justify-content: center; }
.hp-disc {
  position: relative; height: 100%; max-width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 26px 50px -26px rgba(17, 20, 24, .55), 0 0 0 10px rgba(255, 255, 255, .28);
}
.hp-disc img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.hp-slide--live:hover .hp-disc img { transform: scale(1.04); }
.hp-badge {
  position: absolute; right: 7%; bottom: 4%; width: 90px; width: clamp(46px, 10cqw, 104px); aspect-ratio: 1 / 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #fff; color: var(--hp-ink);
  font-size: 17px; font-size: clamp(10px, 2cqw, 20px); font-style: italic; font-weight: 700; line-height: 1;
  box-shadow: 0 14px 28px -16px rgba(17, 20, 24, .6); transform: rotate(-8deg);
}
.hp-live-link { position: absolute; inset: 0; z-index: 3; }
/* druhé tlačítko (kolekce Ninja & Shark): obrys v barvě banneru */
.hp-btn.hp-btn--alt { background: #fff; color: var(--hp-btn) !important; box-shadow: inset 0 0 0 2px var(--hp-btn); }
/* kolekce: 2–3 produkty v kruzích nad sebou, pod každým cena */
.hp-coll { display: block; }
.hp-coll-i { position: absolute; display: block; aspect-ratio: 1 / 1; }
.hp-coll-i .hp-disc { width: 100%; height: 100%; }
.hp-coll-i .hp-disc img { width: 78%; height: 78%; }
.hp-coll-p {
  position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); padding: .28em .75em; border-radius: 999px; background: var(--hp-ink-900);
  color: #fff; font-size: 13px; font-size: clamp(10px, 1.5cqw, 16px); font-weight: 700; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 10px 20px -12px rgba(17, 20, 24, .7);
}
.hp-coll-p small { font-size: .78em; font-weight: 600; opacity: .8; }
.hp-coll--1 .hp-coll-i { left: 50%; top: 0; height: 100%; transform: translateX(-50%); }
.hp-coll--2 .hp-coll-i:nth-child(1) { left: 4%; top: 2%; height: 74%; }
.hp-coll--2 .hp-coll-i:nth-child(2) { right: 2%; bottom: 3%; height: 60%; }
.hp-coll--3 .hp-coll-i:nth-child(1) { left: 0; top: 13%; height: 70%; }
.hp-coll--3 .hp-coll-i:nth-child(2) { right: 3%; top: 0; height: 50%; }
.hp-coll--3 .hp-coll-i:nth-child(3) { right: 12%; bottom: 0; height: 45%; }
.hp-coll-i:nth-child(1) { z-index: 2; }
.hp-slide--coll:hover .hp-coll-i:nth-child(2) .hp-disc img { transform: scale(1.05) rotate(-3deg); }
/* než se kolekce načte: prázdné kruhy (nic neposkočí, snímek má pevnou velikost) */
.hp-slide--coll[data-state="loading"] .hp-coll::before {
  content: ''; position: absolute; left: 50%; top: 50%; height: 80%; aspect-ratio: 1 / 1; border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 10px rgba(255, 255, 255, .28);
}

/* ---------- 4b) Noční banner (theme: 'night') – speciální edice Fitbit Air Pokémon Sleep: noční obloha s hvězdami
   a měsícem, zlatý nadpis, body s ikonami, zlaté tlačítko. Hvězdy blikají a produkt se pomalu vznáší jen u právě
   zobrazeného snímku (a bez animací, když systém žádá omezit pohyb). ---------- */
.hp-slide--live.hp-slide--night { --hp-gold: #f7d36b; --hp-gold2: #efb734; background: #0b1033; color: #fff; }
.hp-night-sky {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(42% 62% at 75% 52%, rgba(70, 100, 255, .42), rgba(70, 100, 255, 0) 72%),
    radial-gradient(70% 80% at 0% 0%, rgba(38, 54, 150, .9), rgba(38, 54, 150, 0) 62%),
    linear-gradient(160deg, #18216a 0%, #0c1240 52%, #070a25 100%);
}
.hp-night-sky i { position: absolute; display: block; }
.hp-night-stars {
  inset: 0; opacity: .9;
  background-image:
    radial-gradient(circle at 6% 14%, #fff 0 .7px, rgba(255, 255, 255, 0) 1.6px), radial-gradient(circle at 18% 72%, #fff 0 .6px, rgba(255, 255, 255, 0) 1.4px),
    radial-gradient(circle at 29% 9%, #fff 0 .8px, rgba(255, 255, 255, 0) 1.7px), radial-gradient(circle at 41% 88%, #fff 0 .6px, rgba(255, 255, 255, 0) 1.4px),
    radial-gradient(circle at 47% 22%, #fff 0 .7px, rgba(255, 255, 255, 0) 1.6px), radial-gradient(circle at 56% 6%, #fff 0 .9px, rgba(255, 255, 255, 0) 1.9px),
    radial-gradient(circle at 63% 31%, #fff 0 .6px, rgba(255, 255, 255, 0) 1.4px), radial-gradient(circle at 71% 12%, #fff 0 .7px, rgba(255, 255, 255, 0) 1.6px),
    radial-gradient(circle at 79% 27%, #fff 0 .6px, rgba(255, 255, 255, 0) 1.4px), radial-gradient(circle at 88% 44%, #fff 0 .8px, rgba(255, 255, 255, 0) 1.7px),
    radial-gradient(circle at 94% 8%, #fff 0 .6px, rgba(255, 255, 255, 0) 1.4px), radial-gradient(circle at 97% 66%, #fff 0 .7px, rgba(255, 255, 255, 0) 1.6px);
}
.hp-night-stars--2 {
  opacity: .55;
  background-image:
    radial-gradient(circle at 12% 40%, #fff 0 .5px, rgba(255, 255, 255, 0) 1.2px), radial-gradient(circle at 24% 28%, #fff 0 .6px, rgba(255, 255, 255, 0) 1.3px),
    radial-gradient(circle at 36% 54%, #fff 0 .5px, rgba(255, 255, 255, 0) 1.2px), radial-gradient(circle at 52% 66%, #fff 0 .6px, rgba(255, 255, 255, 0) 1.3px),
    radial-gradient(circle at 60% 18%, #fde68a 0 .9px, rgba(253, 230, 138, 0) 2.2px), radial-gradient(circle at 67% 80%, #fff 0 .5px, rgba(255, 255, 255, 0) 1.2px),
    radial-gradient(circle at 84% 18%, #fde68a 0 1px, rgba(253, 230, 138, 0) 2.4px), radial-gradient(circle at 91% 86%, #fff 0 .6px, rgba(255, 255, 255, 0) 1.3px);
}
@keyframes hp-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .3; } }
.hp-slide--night.is-on .hp-night-stars { animation: hp-twinkle 4.8s ease-in-out infinite; }
.hp-slide--night.is-on .hp-night-stars--2 { animation-duration: 7s; animation-delay: -2.5s; }
/* srpek měsíce: kruh, ze kterého je vidět jen vnitřní stín (box-shadow inset) */
.hp-night-moon {
  right: 6%; top: 8%; width: 6.4cqw; aspect-ratio: 1 / 1; border-radius: 50%;
  box-shadow: inset -1.45cqw .75cqw 0 0 #fbe6a2; transform: rotate(-20deg);
  filter: drop-shadow(0 0 1.3cqw rgba(251, 230, 162, .6));
}
.hp-night-cloud {
  left: -8%; right: -8%; bottom: -16%; height: 40%; filter: blur(4px);
  background: radial-gradient(38% 62% at 22% 72%, rgba(58, 78, 200, .55), rgba(58, 78, 200, 0) 72%),
    radial-gradient(44% 64% at 78% 82%, rgba(46, 62, 175, .6), rgba(46, 62, 175, 0) 72%);
}
.hp-slide--night .hp-night-copy { left: 5%; width: 50%; padding: 2.4% 0; align-items: flex-start; text-align: left; }
.hp-slide--night .hp-live-brand {
  margin-bottom: 1.1cqw; font-size: 16px; font-size: clamp(11px, 1.8cqw, 19px); letter-spacing: .01em; text-transform: none; color: #fff;
}
.hp-slide--night .hp-live-brand span { display: block; margin-top: .2em; font-size: .8em; color: var(--hp-gold); }
.hp-slide--night .hp-live-title {
  font-size: 42px; font-size: clamp(19px, 4.7cqw, 50px); font-weight: 700; line-height: 1.02; letter-spacing: -.015em; color: #fff;
}
.hp-slide--night .hp-live-title em {
  display: block; font-style: normal; color: var(--hp-gold);
  background: linear-gradient(180deg, #fff3c2 0%, var(--hp-gold) 48%, var(--hp-gold2) 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hp-slide--night .hp-live-text {
  max-width: 96%; margin-top: 1.1cqw; font-size: clamp(11px, 1.55cqw, 16px); font-style: normal; font-weight: 500; color: rgba(229, 234, 255, .88);
}
.hp-night-feat { display: flex; gap: 1.3cqw; margin: 1.5cqw 0 0; padding: 0; list-style: none; }
.hp-night-feat li {
  display: flex; flex-direction: column; align-items: center; gap: .5cqw; width: 8.4cqw; margin: 0; padding: 0;
  font-size: 10.5px; font-size: clamp(8.5px, 1.12cqw, 12px); font-weight: 600; line-height: 1.18; text-align: center; color: #e9edff;
}
.hp-night-feat li::before, .hp-night-feat li::marker { content: none; }
.hp-night-feat .hp-ico {
  width: 4cqw; height: 4cqw; padding: .9cqw; border-radius: 50%; color: var(--hp-gold); background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(247, 211, 107, .5), 0 0 1.2cqw rgba(247, 211, 107, .12);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, background .35s;
}
/* najetí myší na banner: ikony se jedna po druhé rozzáří */
.hp-slide--night:hover .hp-night-feat .hp-ico { transform: translateY(-.35cqw); background: rgba(247, 211, 107, .14); box-shadow: inset 0 0 0 1px rgba(247, 211, 107, .85), 0 0 1.8cqw rgba(247, 211, 107, .35); }
.hp-slide--night .hp-night-feat li:nth-child(2) .hp-ico { transition-delay: .05s; }
.hp-slide--night .hp-night-feat li:nth-child(3) .hp-ico { transition-delay: .1s; }
.hp-slide--night .hp-night-feat li:nth-child(4) .hp-ico { transition-delay: .15s; }
.hp-slide--night .hp-live-buy { justify-content: flex-start; margin-top: 1.6cqw; font-size: clamp(15px, 2.9cqw, 30px); }
.hp-slide--night .hp-live-price strong { color: #fff; }
.hp-slide--night .hp-live-price s { color: rgba(229, 234, 255, .6); }
.hp-slide--night .hp-live-avail { color: #7ee2a8; }               /* zelená dostupnosti čitelná na tmavém pozadí */
.hp-slide--night .hp-live-avail i { box-shadow: 0 0 0 .22em rgba(126, 226, 168, .18); }
.hp-slide--night .hp-live-cta { justify-content: flex-start; margin-top: 1.7cqw; }
.hp-slide--night .hp-btn {
  height: clamp(30px, 5.3cqw, 52px); background: linear-gradient(180deg, #ffe593, #f2bf3e); color: #141a4d !important; border-radius: 999px;
  font-style: normal; letter-spacing: 0; text-transform: none; box-shadow: 0 14px 28px -14px rgba(242, 191, 62, .9);
}
.hp-slide--night .hp-btn:hover { filter: brightness(1.05); }
.hp-slide--night .hp-btn.is-done { background: #22c55e; color: #fff !important; }
.hp-slide--night .hp-live-more { color: #e9edff !important; }
.hp-slide--night .hp-live-more:hover { color: #fff !important; }
.hp-slide--night .hp-night-media { left: 52%; right: 3%; top: 7%; bottom: 7%; }
.hp-slide--night .hp-disc { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.hp-slide--night .hp-disc img {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; filter: drop-shadow(0 1.8cqw 2.2cqw rgba(2, 4, 20, .5));
}
@keyframes hp-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2.2%) rotate(-1.2deg); } }
.hp-slide--night.is-on .hp-disc img { animation: hp-float 6.5s ease-in-out infinite; }
/* spící Pikachu vpravo dole (art) – před náramkem, až ke kraji banneru; ve spánku pomalu dýchá */
.hp-night-art {
  position: absolute; z-index: 2; right: -8%; bottom: -10%; width: 60%; height: auto; pointer-events: none;
  transform-origin: 60% 92%;
}
@keyframes hp-breathe { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.022, 1.03); } }
.hp-slide--night.is-on .hp-night-art { animation: hp-breathe 4.2s ease-in-out infinite; }
/* štítek „Limitovaná edice“ nahoru doleva (dole spí Pikachu) */
.hp-slide--night .hp-badge {
  left: 0; right: auto; top: 1%; bottom: auto;
  padding: 0 .55em; background: linear-gradient(180deg, #ffe593, #f2bf3e); color: #141a4d;
  font-size: 11px; font-size: clamp(7.5px, 1.25cqw, 13px); font-style: normal; letter-spacing: .03em; line-height: 1.12; text-align: center;
  box-shadow: 0 12px 26px -12px rgba(242, 191, 62, .8);
}

/* úzký banner (mobil, malý tablet) – víc místa pro text, bez doplňkových řádků */
@container (max-width: 560px) {
  .hp-live-copy { left: 3%; width: 46%; padding: 3% 0; }
  .hp-live-media { left: 59%; right: 2.5%; top: 9%; bottom: 9%; }
  .hp-live-brand, .hp-live-text, .hp-live-more { display: none; }
  .hp-live-buy { flex-direction: column; gap: .15em; margin-top: 2cqw; }
  .hp-live-cta { margin-top: 2.6cqw; }
  .hp-disc { box-shadow: 0 16px 30px -18px rgba(17, 20, 24, .55), 0 0 0 5px rgba(255, 255, 255, .28); }
  .hp-badge { right: -2%; bottom: 0; }
  .hp-coll--3 .hp-coll-i:nth-child(3) { display: none; }           /* v úzkém banneru jen dva produkty */
  .hp-coll--3 .hp-coll-i:nth-child(1) { left: 0; top: 4%; height: 70%; }
  .hp-coll--3 .hp-coll-i:nth-child(2) { right: 0; top: auto; bottom: 4%; height: 56%; }
  .hp-btn.hp-btn--alt { display: none; }                               /* jedno tlačítko, celý banner je odkaz */
}
/* noční banner na menším počítači / tabletu (slider do 720 px): bez popisného řádku, větší popisky ikon */
@container (max-width: 720px) {
  .hp-slide--night .hp-live-text { display: none; }
  .hp-night-feat { gap: 1.6cqw; margin-top: 2cqw; }
  .hp-night-feat li { width: 10.4cqw; font-size: clamp(9.5px, 1.6cqw, 12px); }
  .hp-night-feat .hp-ico { width: 4.9cqw; height: 4.9cqw; padding: 1.1cqw; }
}
/* noční banner v úzké podobě: název produktu zůstává (nadpis je slogan), bez bodů s ikonami a popisu */
@container (max-width: 560px) {
  .hp-slide--night .hp-night-copy { left: 4.5%; width: 54%; padding: 3% 0; }
  .hp-slide--night .hp-live-brand { display: block; margin-bottom: 1.6cqw; font-size: clamp(10px, 2.9cqw, 15px); }
  .hp-slide--night .hp-live-title { font-size: clamp(17px, 6.9cqw, 34px); }
  .hp-slide--night .hp-night-feat, .hp-slide--night .hp-live-text { display: none; }
  .hp-slide--night .hp-live-buy { align-items: flex-start; }
  .hp-slide--night .hp-night-media { left: 52%; right: 1.5%; top: 12%; bottom: 10%; }
  .hp-slide--night .hp-badge { display: none; }          /* v úzkém banneru by překryl nadpis – edici ohlašuje řádek nad ním */
  .hp-night-art { right: -5%; bottom: -14%; width: 64%; }
  .hp-night-moon { right: 5%; top: 6%; width: 8.5cqw; box-shadow: inset -1.9cqw 1cqw 0 0 #fbe6a2; }
}

/* ---------- 5) Pruh výhod ---------- */
.hp-usp { grid-area: usp; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.hp-usp > li { min-width: 0; margin: 0; padding: 0; list-style: none; }
.hp-usp > li::before, .hp-usp > li::marker { content: none; }
.hp-usp > .hp-usp-li-disp { display: none; }          /* na počítači je odpočet vpravo vedle slideru */
/* pevná výška položek = místo pro pruh je rezervované předem (viz bod 0) */
.hp-usp-i {
  display: flex; align-items: center; gap: 11px; height: 62px; padding: 0 14px; overflow: hidden;
  border: 1px solid #eceef2; border-radius: 12px; background: var(--hp-soft);
  color: var(--hp-text) !important; text-decoration: none !important;
  transition: background .15s, border-color .15s, transform .15s;
}
a.hp-usp-i:hover { background: #fff; border-color: #dde1e8; transform: translateY(-1px); }
.hp-usp-ico {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--hp-blue); box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
.hp-usp-t { min-width: 0; }
.hp-usp-t strong, .hp-usp-t small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hp-usp-t strong { font: 600 14px/1.25 var(--hp-font); color: var(--hp-ink-900); }
.hp-usp-t small { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--hp-muted); }
[data-hp-disp].is-today .hp-usp-ico { background: var(--hp-ok); color: #fff; }
.hp-side-disp { height: 52px; padding: 0 12px; gap: 10px; background: #fff; }
.hp-side-disp .hp-usp-ico { flex-basis: 32px; width: 32px; height: 32px; }
.hp-side-disp .hp-usp-t small { font-size: 12px; }
@media (max-width: 1199px) { .hp-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 6) Banner Gravírování na míru (místo prostředních bannerů) ---------- */
.row.banners-content.body-banners.hp-mid-row { display: block; margin-left: 0; margin-right: 0; }
.row.banners-content.body-banners.hp-mid-row > .hp-mid { width: 100% !important; max-width: none !important; flex: 0 0 100%; float: none; padding: 0; }
.hp-mid { margin: 4px 0 26px; }
.hp-eng {
  position: relative; display: block; overflow: hidden; aspect-ratio: 1200 / 250; border-radius: 14px;
  background: #fafafa; color: var(--hp-ink-900); text-decoration: none !important; font-family: var(--hp-font);
  container-type: inline-size; transition: box-shadow .2s;
}
.hp-eng:hover { box-shadow: 0 18px 36px -24px rgba(17, 20, 24, .5); }
@supports not (aspect-ratio: 1 / 1) { .hp-eng { height: 0; padding-bottom: 20.8%; } }
.hp-eng-copy {
  position: absolute; z-index: 1; left: 4%; width: 50%; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.hp-eng .hp-live-brand { margin-bottom: .8cqw; font-size: 12px; font-size: clamp(10px, 1.05cqw, 14px); }
.hp-eng .hp-live-title { font-size: 30px; font-size: clamp(18px, 3cqw, 38px); }
.hp-eng .hp-live-sub { font-size: 24px; font-size: clamp(14px, 2.4cqw, 30px); }
.hp-eng .hp-live-text { margin-top: .9cqw; font-size: 14px; font-size: clamp(11.5px, 1.3cqw, 17px); }
.hp-eng .hp-btn { margin-top: 1.5cqw; height: 42px; height: clamp(32px, 3.8cqw, 50px); padding: 0 clamp(16px, 2.2cqw, 30px); font-size: 14px; font-size: clamp(12px, 1.35cqw, 17px); border-radius: clamp(9px, 1.1cqw, 14px); }
.hp-eng-media { position: absolute; z-index: 1; right: 5%; width: 33%; top: 6%; bottom: 6%; display: flex; align-items: center; justify-content: center; }
.hp-slate { height: 100%; width: auto; max-width: 100%; transform: rotate(-4deg); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .28)); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.hp-eng:hover .hp-slate { transform: rotate(-2deg) scale(1.03); }
@container (max-width: 640px) {
  .hp-eng-copy { left: 3%; width: 56%; }
  .hp-eng-media { right: 2%; width: 39%; top: 10%; bottom: 10%; }
  .hp-eng .hp-live-text { display: none; }
}

/* střídání s bannerem PetKarta: oba bannery v jedné buňce mřížky (stejná výška), mění se prolnutím */
.hp-mid { position: relative; }
.hp-mid.hp-mid--rot { margin-bottom: 40px; }                 /* místo pro tečky pod bannerem */
.hp-mid-stage { display: grid; }
.hp-mid-stage > .hp-eng { grid-area: 1 / 1; min-width: 0; }
.hp-mid--rot .hp-mid-stage > .hp-eng { transition: opacity .6s ease, visibility 0s linear .6s, box-shadow .2s; }
.hp-mid--rot .hp-mid-stage > .hp-eng:not(.is-on) { opacity: 0; visibility: hidden; }
.hp-mid--rot .hp-mid-stage > .hp-eng.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s, box-shadow .2s; }
.hp-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* PetKarta: mátová plocha, zelená vlna, Rubby s kartičkou a známkou */
.hp-eng--pk { background: #f5fffc; }
.hp-eng--pk .hp-live-title { color: #203d43; }
.hp-eng--pk .hp-live-text { color: #2f4a4f; }
.hp-pk-media { right: 3%; width: 38%; top: 0; bottom: 0; display: block; }
.hp-pk-dog {
  position: absolute; z-index: 2; right: 12%; bottom: 0; width: auto; height: 94%; max-width: none; margin: 0;
  transform-origin: 50% 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .2)); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.hp-pk-card {
  position: absolute; z-index: 1; left: 0; top: 18%; display: block; width: 50%; height: auto; transform: rotate(-10deg);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .3)); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.hp-pk-tag {
  position: absolute; z-index: 3; left: 33%; bottom: 4%; display: block; width: 19%; height: auto; transform: rotate(8deg); transform-origin: 50% 20%;
  filter: drop-shadow(0 10px 12px rgba(86, 62, 18, .32)); animation: hp-swing 5s ease-in-out infinite;
}
@keyframes hp-swing { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(2deg); } }
.hp-eng--pk:hover .hp-pk-dog { transform: translateY(-2%) rotate(-1.5deg); }
.hp-eng--pk:hover .hp-pk-card { transform: rotate(-6deg) translateY(-3%); }
/* tečky pod bannerem (v jeho spodním okraji, nic neposune) – aktivní se plní 10 s, pauza vedle */
.hp-mid-nav { position: absolute; z-index: 2; left: 50%; top: 100%; display: flex; align-items: center; gap: 2px; margin-top: 1px; transform: translateX(-50%); }
.hp-mid-dot { position: relative; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; transition: width .3s cubic-bezier(.22, 1, .36, 1); }
.hp-mid-dot::before, .hp-mid-dot::after { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 7px; margin-top: -3.5px; border-radius: 99px; }
.hp-mid-dot::before { background: #cfd3d8; transition: background .2s; }
.hp-mid-dot:hover::before { background: #9aa0a8; }
.hp-mid-dot.is-on { width: 40px; }
.hp-mid-dot.is-on::before { background: #dfe2e6; }
.hp-mid-dot.is-on::after { background: var(--hp-ink-900); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0 round 99px); }
.hp-mid-pause { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 0 0 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: #5b626d; cursor: pointer; }
.hp-mid-pause:hover { color: var(--hp-ink-900); }
.hp-mid-pause .hp-ico { width: 14px; height: 14px; stroke-width: 2.4; }
.hp-mid-pause .hp-ico + .hp-ico, .hp-mid-pause[aria-pressed="true"] .hp-ico:first-child { display: none; }
.hp-mid-pause[aria-pressed="true"] .hp-ico + .hp-ico { display: inline-block; }
.hp-mid-dot:focus-visible, .hp-mid-pause:focus-visible { outline: 3px solid var(--hp-blue); outline-offset: 0; border-radius: 99px; }
@container (max-width: 640px) {
  .hp-pk-media { right: 1%; width: 41%; top: 0; bottom: 0; }
  .hp-pk-card { top: 30%; width: 56%; }
  .hp-pk-tag { left: 30%; width: 24%; }
  .hp-pk-dog { right: 4%; height: 88%; }
}

/* ---------- 7) Mobil (do 767 px): jeden slider se všemi bannery, pod ním pruh výhod ---------- */
@media (max-width: 767px) {
  .hp-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "usp"; row-gap: 10px; }
  .hp-side { display: none !important; }
  .hp-slider { border-radius: 0; }                     /* slider od kraje ke kraji, jako původní */
  /* v #content (telefony, slovenská verze) má šablona okraje 12 px a řádkům dává odsazení 12 px – slider i tam od kraje ke kraji */
  .content-wrapper.container .row.banners-row.hp-row { margin-left: -12px; margin-right: -12px; }
  .content-wrapper.container .row.banners-row.hp-row > .hp-hero { padding-left: 0; padding-right: 0; }
  .hp-arrow { display: none; }
  .hp-tabs, .hp-usp { margin-left: 12px; margin-right: 12px; }
  /* záložky → tenké pruhy jako v „příbězích“ */
  .hp-tabs { gap: 5px; height: 24px; margin-top: 6px; align-items: center; }
  .hp-tab { height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none !important; }
  .hp-tab-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hp-tab-bar { left: 0; right: 0; top: 50%; bottom: auto; height: 4px; margin-top: -2px; background: #e2e5ea; }
  .hp-play { flex: 0 0 24px; height: 24px; border-radius: 50%; }
  .hp-play .hp-ico { width: 12px; height: 12px; }
  .hp-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hp-usp > .hp-usp-li-disp { display: block; }
  .hp-usp > .hp-no-m { display: none; }
  .hp-usp > .hp-usp-li--wide { grid-column: 1 / -1; order: 1; }   /* Sledování zásilky přes celou šířku, poslední řada */
  .hp-usp-i { align-items: center; gap: 8px; height: 74px; padding: 0 9px; }
  .hp-usp-ico { flex-basis: 28px; width: 28px; height: 28px; }
  .hp-usp-ico .hp-ico { width: 16px; height: 16px; }
  /* úzké sloupce: nadpis i drobný text smí na 2 řádky, výška položky je ale pevná */
  .hp-usp-t strong, .hp-usp-t small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .hp-usp-t strong { font-size: 12.5px; line-height: 1.22; }
  .hp-usp-t small { font-size: 11px; line-height: 1.28; }
  .hp-mid { margin: 0 0 18px; }
  .hp-eng { aspect-ratio: auto; min-height: 188px; border-radius: 12px; }
}
@media (max-width: 767px) and (hover: none) { a.hp-usp-i:hover { transform: none; } }

/* ---------- 8) Sekce z redesignu: kategorie, služby, značky ---------- */
.hp-sec {
  --hp-font: 'HP Poppins', 'Poppins', 'Roboto', Arial, sans-serif; --hp-blue: #0063c7;
  --s-ink: #0b0d10; --s-2: #55595f; --s-3: #6b7079; --s-line: #e2e2df; --s-line-2: #cdcdc9; --s-sunk: #f0f0ee;
  --s-acc: #fb2a2d; --s-acc-t: #d4121a;                  /* červená iStage; -t = ztmavená pro drobný text (kontrast 4,5 : 1) */
  --s-lift: 0 8px 20px -8px rgba(11, 13, 16, .16), 0 18px 40px -22px rgba(11, 13, 16, .22);
  display: block; margin-top: 0; margin-bottom: 72px; color: var(--s-ink); -webkit-font-smoothing: antialiased;
}
.hp-sec.hp-sec-aftermid { margin-top: 46px; }            /* banner gravírování nad ní má dole jen 26 px */
.hp-sec.hp-sec-end { margin-bottom: 24px; }              /* patička má nahoře vlastních 64 px */
.hp-sec *, .hp-sec *::before, .hp-sec *::after { box-sizing: border-box; }
.hp-sec ul, .hp-sec li { margin: 0; padding: 0; list-style: none; }
.hp-sec li::before, .hp-sec li::marker { content: none; }
.hp-sec a { text-decoration: none !important; }
.hp-sec p { margin: 0; }
.hp-sico { display: block; flex: 0 0 auto; width: 22px; height: 22px; }
html.hp-cats-on .fav-cat { display: none !important; }    /* „Oblíbené kategorie“ šablony nahrazuje sekce kategorií */

.hp-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 24px; }
.hp-sec-head-t { min-width: 0; max-width: 760px; }
.hp-sec .hp-eyebrow { margin: 0 0 6px; font: 600 12px/1.5 var(--hp-font); letter-spacing: .09em; text-transform: uppercase; color: var(--s-3); }
.hp-sec h2.hp-sec-title {
  margin: 0 !important; padding: 0 !important; font-family: var(--hp-font) !important; font-size: 32px !important; font-weight: 600 !important;
  line-height: 1.15 !important; letter-spacing: -.02em; text-align: left; text-transform: none !important; color: var(--s-ink) !important;
}
.hp-sec h2.hp-sec-title::before, .hp-sec h2.hp-sec-title::after { content: none !important; }
.hp-sec .hp-sec-sub { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--s-2); }
.hp-sec-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap; color: var(--s-2) !important; }
.hp-sec-link .hp-sico { width: 16px; height: 16px; transition: transform .2s; }
.hp-sec-link:hover { color: var(--s-ink) !important; }
.hp-sec-link:hover .hp-sico { transform: translateX(3px); }

/* kategorie */
.hp-cats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.hp-cats-grid > li { min-width: 0; }
.hp-cat {
  position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 152px; padding: 20px;
  border: 1px solid var(--s-line); border-radius: 20px; background: #fff; color: var(--s-ink) !important;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s cubic-bezier(.22, 1, .36, 1), border-color .2s;
}
/* najetí myší jako v redesignu: karta se zvedne, dostane tmavý obrys, ikona se zabarví a „pérově“ natočí */
.hp-cat::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s cubic-bezier(.22, 1, .36, 1);
}
.hp-cat-ico {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--s-sunk); color: var(--s-ink);
  transition: background-color .2s cubic-bezier(.22, 1, .36, 1), color .2s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.34, 1.56, .64, 1);
}
.hp-cat-ico .hp-sico { transition: transform .32s cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) {
  .hp-cat:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--s-lift); }
  .hp-cat:hover::after { box-shadow: inset 0 0 0 1.5px var(--s-ink); }
  .hp-cat:hover .hp-cat-ico { background: var(--s-acc); color: #fff; transform: rotate(-6deg) scale(1.08); }
}
.hp-cat:active { transform: translate3d(0, -1px, 0) scale(.995); }
.hp-cat-t { display: block; margin-top: auto; min-width: 0; }
.hp-cat-t strong { display: block; font: 600 15px/1.3 var(--hp-font); color: var(--s-ink); overflow-wrap: break-word; }
.hp-cat-t small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--s-3); }

/* služby */
.hp-serv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hp-serv-grid > li { min-width: 0; }
.hp-serv {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; padding: 28px;
  border: 1px solid var(--s-line); border-radius: 20px; background: #fff; color: var(--s-ink) !important;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s, border-color .2s;
}
.hp-serv:hover { transform: translateY(-4px); border-color: var(--s-line-2); box-shadow: var(--s-lift); }
.hp-serv-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 14px; background: var(--s-ink); color: var(--s-acc); }
.hp-serv-ico .hp-sico { width: 24px; height: 24px; }
.hp-sec h3.hp-serv-t {
  margin: 0 !important; padding: 0 !important; font-family: var(--hp-font) !important; font-size: 19px !important; font-weight: 600 !important;
  line-height: 1.25 !important; letter-spacing: -.01em; text-transform: none !important; color: var(--s-ink) !important;
}
.hp-sec h3.hp-serv-t::before, .hp-sec h3.hp-serv-t::after { content: none !important; }
.hp-sec .hp-serv-claim { font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--s-acc-t); }
.hp-sec .hp-serv-text { font-size: 14px; line-height: 1.6; color: var(--s-2); }
.hp-serv-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--s-ink); }
.hp-serv-more .hp-sico { width: 16px; height: 16px; transition: transform .2s; }
.hp-serv:hover .hp-serv-more .hp-sico { transform: translateX(3px); }

/* značky – nekonečný pás: dvě stejné řady vedle sebe, každá za --hp-mq-dur ujede svou šířku (plynulá smyčka) */
.hp-sec-tools { display: flex; align-items: center; gap: 14px; }
.hp-mq-pause {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0;
  border: 1px solid var(--s-line); border-radius: 50%; background: #fff; color: var(--s-ink); cursor: pointer; transition: border-color .15s;
}
.hp-mq-pause:hover { border-color: var(--s-line-2); }
.hp-mq-pause .hp-ico { width: 16px; height: 16px; }
.hp-mq-pause .hp-ico + .hp-ico, .hp-mq-pause[aria-pressed="true"] .hp-ico:first-child { display: none; }
.hp-mq-pause[aria-pressed="true"] .hp-ico + .hp-ico { display: block; }
.hp-marquee {
  display: flex; overflow: hidden; padding: 6px 0 10px; scroll-padding: 0 24px;  /* padding = místo pro zvednutí karty pod myší */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hp-marquee.is-kb { -webkit-mask-image: none; mask-image: none; }                /* ovládání klávesnicí: pás stojí na začátku */
.hp-sec .hp-marquee.is-kb .hp-mq-track { animation: none; }
.hp-sec .hp-mq-track {
  display: flex; flex: 0 0 auto; gap: 48px; margin: 0; padding: 0 48px 0 0;
  animation: hp-mq var(--hp-mq-dur, 40s) linear infinite;
}
.hp-mq-track > li { flex: 0 0 auto; }
.hp-marquee:hover .hp-mq-track, .hp-marquee:focus-within .hp-mq-track,
.hp-marquee.is-paused .hp-mq-track, .hp-marquee.is-off .hp-mq-track { animation-play-state: paused; }
@keyframes hp-mq { to { transform: translateX(-100%); } }
.hp-brand {
  display: flex; align-items: center; justify-content: center; min-height: 62px; padding: 0 24px; white-space: nowrap;
  border: 1px solid var(--s-line); border-radius: 14px; background: #fff; font: 700 14px/1 var(--hp-font); letter-spacing: -.02em;
  color: var(--s-2) !important; transition: color .2s, border-color .2s, transform .2s;
}
.hp-brand:hover { color: var(--s-ink) !important; border-color: var(--s-3); transform: translateY(-2px); }
.hp-cat:focus-visible, .hp-serv:focus-visible, .hp-brand:focus-visible, .hp-sec-link:focus-visible, .hp-mq-pause:focus-visible { outline: 3px solid var(--hp-blue); outline-offset: 2px; }
.hp-brand:focus-visible { outline-offset: -3px; }                                   /* ořez pásu by obrys schoval */
@media (prefers-reduced-motion: reduce) {                                          /* bez pohybu: jedna řada k posunutí prstem/myší */
  .hp-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
  .hp-sec .hp-mq-track { animation: none; }
  .hp-mq-track[aria-hidden="true"], .hp-mq-pause { display: none; }
}

@media (max-width: 1199px) { .hp-cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991px) {
  .hp-cats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-serv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hp-sec { margin-bottom: 48px; }
  .hp-sec.container { padding-left: 12px; padding-right: 12px; }            /* .container má v šabloně na mobilu 0 */
  .hp-sec-head { margin-bottom: 16px; }
  .hp-sec h2.hp-sec-title { font-size: 25px !important; }
  .hp-sec .hp-sec-sub { font-size: 14px; }
  .hp-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hp-cat { gap: 10px; min-height: 0; padding: 14px; border-radius: 16px; }
  .hp-cat-ico { width: 38px; height: 38px; border-radius: 12px; }
  .hp-cat-ico .hp-sico { width: 20px; height: 20px; }
  .hp-cat-t strong { font-size: 14px; }
  .hp-cat-t small { font-size: 12px; }
  /* služby na mobilu vedle sebe – posouvají se prstem, další karta vykukuje */
  .hp-sec .hp-serv-grid {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; gap: 10px;
    margin: 0 -12px; padding: 0 12px 10px; scroll-padding: 0 12px;          /* karty se posouvají až ke kraji displeje */
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .hp-serv-grid > li { scroll-snap-align: start; }
  .hp-serv { padding: 22px; }
  .hp-sec .hp-mq-track { gap: 20px; padding-right: 20px; }
  .hp-marquee { margin: 0 -12px; }                                                 /* pás od kraje ke kraji displeje */
  .hp-brand { min-height: 48px; padding: 0 18px; border-radius: 12px; font-size: 14px; }
}
@media (hover: none) { .hp-cat:hover, .hp-serv:hover, .hp-brand:hover { transform: none; } }
@media (max-width: 767px) { .hp-sec.hp-sec-aftermid { margin-top: 30px; } }

/* hvězdičky po půlkách – jedna maska s 5 hvězdami, výplň z --vi (celé hvězdy) a --vf (zbytek) */
.hp-stars {
  --s: 15px; --g: 2px; --on: #f5a524; --off: #cdcdc9;
  display: inline-block; flex: 0 0 auto; width: calc(5 * var(--s) + 4 * var(--g)); height: var(--s);
  background: linear-gradient(90deg, var(--on) calc(var(--vi, 0) * (var(--s) + var(--g)) + var(--vf, 0) * var(--s)), var(--off) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMinYMid meet'%3E%3Cpath d='M12 1.8l3.1 6.4 7 1-5.1 4.9 1.2 7L12 17.8l-6.2 3.3 1.2-7L1.9 9.2l7-1z'/%3E%3C/svg%3E") 0 0 / calc(var(--s) + var(--g)) var(--s) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMinYMid meet'%3E%3Cpath d='M12 1.8l3.1 6.4 7 1-5.1 4.9 1.2 7L12 17.8l-6.2 3.3 1.2-7L1.9 9.2l7-1z'/%3E%3C/svg%3E") 0 0 / calc(var(--s) + var(--g)) var(--s) repeat-x;
}
.hp-stars-lg { --s: 20px; --g: 3px; --off: rgba(255, 255, 255, .22); }

/* recenze z Heureky – průměr obchodu vlevo, vedle pás recenzí. Bez skriptu (a s „omezit pohyb“) je pás řada
   k posunutí; plynulý pohyb (.is-run) zapíná skript, jen když řada přesahuje pás. Karta má šířku čtvrtiny řádku jako souhrn. */
.hp-rev-wrap { container-type: inline-size; display: grid; grid-template-columns: calc((100% - 48px) / 4) minmax(0, 1fr); gap: 16px; }
.hp-rev-mq {
  display: flex; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.hp-sec .hp-rev-track { display: flex; flex: 0 0 auto; gap: 16px; margin: 0; padding: 0; }
.hp-rev-track > li { display: flex; flex: 0 0 auto; width: 300px; width: calc((100cqw - 48px) / 4); scroll-snap-align: start; }
.hp-rev-mq.is-run {
  overflow: hidden; scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.hp-sec .hp-rev-mq.is-run .hp-rev-track { padding-right: 16px; animation: hp-mq var(--hp-rev-dur, 120s) linear infinite; }   /* mezera mezi řadami = mezera mezi kartami */
/* zastavení musí mít vyšší specifičnost než pravidlo výše (zkratka animation by stav vrátila na „running“) */
.hp-sec .hp-rev-mq.is-run:hover .hp-rev-track, .hp-sec .hp-rev-mq.is-run:focus-within .hp-rev-track, .hp-sec .hp-rev-mq.is-run.is-paused .hp-rev-track,
.hp-sec .hp-rev-mq.is-run.is-off .hp-rev-track, .hp-sec .hp-rev-mq.is-run.is-held .hp-rev-track { animation-play-state: paused; }
.hp-rev-mq.is-kb { -webkit-mask-image: none; mask-image: none; }                /* ovládání klávesnicí: pás stojí na začátku */
.hp-sec .hp-rev-mq.is-run.is-kb .hp-rev-track { animation: none; }
.hp-mq-pause[hidden] { display: none; }
.hp-rev-sum {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; padding: 28px 24px;
  border-radius: 20px; background: var(--s-ink); color: #f4f5f1;
}
.hp-sec .hp-rev-num { font: 700 52px/1 var(--hp-font); letter-spacing: -.04em; color: #fff; }
.hp-sec .hp-rev-count { font-size: 14px; line-height: 1.5; color: rgba(244, 245, 241, .8); }
.hp-sec .hp-rev-src { margin-top: auto; padding-top: 12px; font-size: 13px; line-height: 1.45; color: rgba(244, 245, 241, .62); }
/* oficiální odznak Ověřeno zákazníky (obrázek od Heureky, odkaz na hodnocení obchodu) */
.hp-rev-badge { display: block; flex: 0 0 auto; margin-top: auto; border-radius: 50%; line-height: 0; transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.hp-rev-badge img { display: block; width: 84px; height: 84px; max-width: none; margin: 0; }
.hp-rev-badge:hover { transform: scale(1.04); }
.hp-rev-badge:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hp-rev {
  display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 24px;
  border: 1px solid var(--s-line); border-radius: 20px; background: #fff; color: var(--s-ink);
}
.hp-rev-head { display: flex; align-items: center; gap: 12px; }
.hp-rev-ava {
  display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px;
  border-radius: 50%; background: #e6e6e3; font: 700 14px/1 var(--hp-font); color: var(--s-2);
}
.hp-sec .hp-rev-who { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.hp-rev-who strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; color: var(--s-ink); }
.hp-rev-who time { font-size: 12.5px; color: var(--s-3); }
.hp-sec .hp-rev-q {                                     /* text zákazníka: Poppins Medium Italic místo patkového písma z redesignu */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
  font: italic 500 16px/1.6 var(--hp-font); letter-spacing: -.005em; color: var(--s-ink); overflow-wrap: break-word;
}
.hp-sec .hp-rev-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-rev-tags li { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px; border-radius: 6px; font-size: 12.5px; line-height: 1.45; }
.hp-rev-tags .hp-sico { flex: 0 0 11px; width: 11px; height: 11px; stroke-width: 2.4; }
.hp-rev-pro { background: #e4f5ea; color: #146c40; }
.hp-rev-con { background: #f0f0ee; color: #585d66; }
.hp-rev-prod {
  display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 8px 12px 8px 8px;
  border-radius: 14px; background: #f0f0ee; color: var(--s-ink) !important; transition: background .2s;
}
.hp-rev-prod:hover { background: #e7e7e4; }
.hp-rev-img { flex: 0 0 60px; width: 60px; height: 60px; padding: 4px; border-radius: 10px; background: #fff; }
.hp-rev-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hp-rev-pt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hp-rev-pt strong {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 600 13.5px/1.3 var(--hp-font); letter-spacing: -.01em;
}
.hp-rev-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #146c40; }
.hp-rev-ok .hp-sico { width: 13px; height: 13px; }
/* recenze obchodu (bez jména a produktu): fajfka místo písmene, dole místo produktu „Ověřený nákup · hodnocení obchodu“ */
.hp-rev-ava--ok { background: #e4f5ea; color: #146c40; }
.hp-rev-ava--ok .hp-sico { width: 20px; height: 20px; }
.hp-rev-shop {
  display: flex; align-items: center; gap: 5px; margin-top: auto; padding: 10px 12px;
  border-radius: 14px; background: #f0f0ee; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #146c40;
}
.hp-rev-shop .hp-sico { flex: 0 0 13px; width: 13px; height: 13px; }
.hp-rev-shop span { font-weight: 500; color: var(--s-3); }
.hp-sec .hp-rev-note { max-width: 920px; margin-top: 18px; font-size: 12px; line-height: 1.55; color: var(--s-3); }

/* magazín */
.hp-mag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hp-mag-grid > li { min-width: 0; }
.hp-post { display: flex; flex-direction: column; gap: 10px; height: 100%; color: var(--s-ink) !important; }
.hp-post-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #f0f0ee; }
.hp-post-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.hp-post:hover .hp-post-media img { transform: scale(1.04); }
.hp-post-kicker {
  position: absolute; left: 12px; top: 12px; padding: 4px 9px; border-radius: 6px; background: var(--s-ink); color: #fff;
  font: 700 11px/1.4 var(--hp-font); letter-spacing: .05em; text-transform: uppercase;
}
.hp-sec h3.hp-post-t {
  margin: 4px 0 0 !important; padding: 0 !important; font-family: var(--hp-font) !important; font-size: 19px !important; font-weight: 600 !important;
  line-height: 1.3 !important; letter-spacing: -.015em; text-transform: none !important; color: var(--s-ink) !important; transition: color .2s;
}
.hp-sec h3.hp-post-t::before, .hp-sec h3.hp-post-t::after { content: none !important; }
.hp-post:hover h3.hp-post-t { color: var(--s-2) !important; }
.hp-sec .hp-post-lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.55; color: var(--s-2); }
.hp-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.4; color: var(--s-3); }
.hp-post-meta .hp-sico { width: 13px; height: 13px; }
.hp-rev-prod:focus-visible, .hp-post:focus-visible { outline: 3px solid var(--hp-blue); outline-offset: 3px; }

@media (max-width: 1199px) {                                                     /* tablet: užší souhrn, karty 300 px (vejde se 1,6–2,7) */
  .hp-rev-wrap { grid-template-columns: 240px minmax(0, 1fr); }
  .hp-rev-track > li { width: 300px; }
}
@media (max-width: 991px) { .hp-mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  /* články na mobilu vedle sebe – posouvají se prstem, další karta vykukuje (stejně jako služby) */
  .hp-sec .hp-mag-grid {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: 10px;
    margin: 0 -12px; padding: 0 12px 10px; scroll-padding: 0 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .hp-mag-grid > li { scroll-snap-align: start; }
  /* recenze na mobilu: průměr nahoře v jednom řádku, pod ním pás od kraje ke kraji displeje */
  .hp-rev-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hp-rev-sum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 4px; }
  .hp-sec .hp-rev-num { grid-row: 1 / span 3; font-size: 44px; }
  .hp-rev-badge { grid-column: 3; grid-row: 1 / span 3; margin: 0; }
  .hp-rev-badge img { width: 60px; height: 60px; }
  .hp-sec .hp-rev-src { margin-top: 0; padding-top: 0; }
  .hp-rev-mq { margin: 0 -12px; padding: 0 12px; scroll-padding: 0 12px; }
  .hp-rev-mq.is-run { padding: 0; }
  .hp-sec .hp-rev-track { gap: 10px; }
  .hp-sec .hp-rev-mq.is-run .hp-rev-track { padding-right: 10px; }
  .hp-rev-track > li { width: calc(100cqw * .84); }
  .hp-rev, .hp-rev-sum { padding: 20px; }
  .hp-sec h3.hp-post-t { font-size: 17px !important; }
}
@media (hover: none) { .hp-post:hover .hp-post-media img { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hp-post-media img, .hp-rev-prod, .hp-sec h3.hp-post-t { transition: none; }
  .hp-sec .hp-rev-mq.is-run .hp-rev-track { animation: none; }                   /* pojistka – skript pohyb nezapne */
}

/* ---------- 9) Karty produktů na úvodní stránce – TOP produkty (slider Shoptetu) i řady produktů (9c), kompaktně jako na Alze:
   6 vedle sebe, bez rámečků, všechno na střed. Odshora: fotka (sleva ve žlutém kolečku), hvězdičky „4,5 11ד, název na
   2 řádky, štítek (Akce, Novinka…), cena, původní cena přeškrtnutě, dostupnost a malé tlačítko Do košíku.
   Každý řádek má v kartě pevné místo → karty jsou stejně vysoké a nic neposkočí, i když u karty hvězdičky, štítek nebo
   původní cena nejsou. Jen styly – Do košíku, varianty i měření dál obsluhuje Shoptet. ---------- */
html.lng:not(.hp-off) body.type-index {                              /* rozměry karet – i pro šipky řad (nejsou uvnitř bloku karet) */
  --hpc-pad: 8px;                                                  /* okraj fotky v kartě */
  /* řádky pod fotkou (od jejího spodku): hvězdičky, název (2 řádky po --hpc-lh), štítek, cena, původní cena, dostupnost,
     tlačítko (výška --hpc-bh); --hpc-in = výška celé spodní části karty */
  --hpc-rt: 8px; --hpc-nm: 28px; --hpc-lh: 18px; --hpc-fl: 70px; --hpc-pr: 94px; --hpc-was: 116px; --hpc-av: 133px; --hpc-bt: 157px; --hpc-bh: 32px; --hpc-in: 201px;
  --hpc-ink: #0b0d10; --hpc-2: #6b7079; --hpc-blue: #0063c7;
}
html.lng:not(.hp-off) body.type-index .homepage-group-title {          /* nadpis TOP produktů jako u řad: vlevo, „Top produkty měsíce“ */
  margin: 44px 0 12px !important; padding: 0 !important; font-family: 'HP Poppins', 'Poppins', Arial, sans-serif !important; font-size: 22px !important;
  font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -.01em; text-align: left !important; text-transform: lowercase !important;
  color: #0b0d10 !important;
}
html.lng:not(.hp-off) body.type-index .homepage-group-title::first-letter { text-transform: uppercase; }
/* pás karet o 8 px širší na každou stranu (mezery mezi kartami), okraje karet lícují s nadpisem */
html.lng:not(.hp-off) body.type-index .products-block.slick-slider .slick-list { width: auto !important; margin: 0 -8px; padding: 4px 0 14px !important; border-left: 0 !important; border-right: 0 !important; }
/* pod TOP produkty stejná mezera jako mezi sekcemi (s pásem karet 72 px; šablona dává 101 px) – řada hned pod nimi (CFG.rails
   after: 'top') má mezeru jako mezi řadami */
html.lng:not(.hp-off) body.type-index .content .products-block { margin-bottom: 58px !important; }
html.lng:not(.hp-off) body.type-index .content-wrapper:not(.homepage-box) + .hp-sec-rail { margin-top: -22px; }
/* kde blok produktů sahá skoro ke kraji okna (těsně nad 768 a 992 px), vyčníval by pás o pár px za okno a stránka šla
   posunout do strany → oříznout jen to, co je za okrajem okna (clip netvoří posuvnou oblast; stíny i najetí zůstávají) */
html.lng:not(.hp-off) body.type-index .overall-wrapper { overflow-x: clip; }
html.lng:not(.hp-off) body.type-index .products-block .slick-dots { display: none !important; }
html.lng:not(.hp-off) body.type-index .products-block .product { padding: 0 8px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html.lng:not(.hp-off) body.type-index .products-block .product > .p {
  position: relative; display: block !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  overflow: visible; border: 0 !important; border-radius: 14px; background: #fff; box-shadow: none; text-align: center; transition: box-shadow .2s;
}
html.lng:not(.hp-off) body.type-index .products-block .product > .p:hover { box-shadow: 0 10px 28px -14px rgba(11, 13, 16, .3), 0 0 0 1px #ececea; }
/* fotka: čtverec; štítky a původní cena se z ní vysunou do svých řádků pod fotkou (100 % = spodek fotky) */
html.lng:not(.hp-off) body.type-index .products-block .product a.image {
  position: relative !important; display: block !important; box-sizing: border-box; height: auto !important; margin: 0 !important;
  padding: var(--hpc-pad) var(--hpc-pad) 0 !important; border: 0 !important; background: none !important; font-size: 0; line-height: 0;   /* bez mezer od textových uzlů */
}
html.lng:not(.hp-off) body.type-index .products-block .product a.image img {
  display: block; width: 100% !important; height: auto !important; max-width: none; margin: 0 !important; aspect-ratio: 1 / 1; object-fit: contain;
}
html.lng:not(.hp-off) body.type-index .products-block .product .p-in {
  position: relative !important; display: block !important; height: var(--hpc-in) !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
html.lng:not(.hp-off) body.type-index .products-block .product :is(.p-in-in, .ratings-wrapper, .p-bottom, .p-bottom > [data-micro="offer"], .prices) {
  position: static !important; display: block !important; width: auto !important; height: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; float: none !important; transform: none !important;
}
html.lng:not(.hp-off) body.type-index .products-block .product :is(.p-desc, .widget-parameter-wrapper, .product-appendix, .stars-placeholder,
  .prices > :not(.price-final):not(.availability)) { display: none !important; }
/* hvězdičky a „4,5 11ד (text doplní homepage.js) */
html.lng:not(.hp-off) body.type-index .products-block .product .stars-wrapper {
  position: absolute !important; top: var(--hpc-rt) !important; left: 0 !important; right: 0 !important; bottom: auto !important;
  display: flex !important; align-items: center; justify-content: center; gap: 5px; height: 16px; margin: 0 !important; padding: 0 !important;
}
html.lng:not(.hp-off) body.type-index .products-block .product .stars-wrapper .stars { display: inline-flex !important; align-items: center; gap: 1px; width: auto !important; margin: 0 !important; }
html.lng:not(.hp-off) body.type-index .products-block .product .stars-wrapper .star { width: 12px !important; height: 12px !important; margin: 0 !important; font-size: 12px !important; }
html.lng:not(.hp-off) body.type-index .products-block .product .stars-wrapper .star::before,
html.lng:not(.hp-off) body.type-index .products-block .product .stars-wrapper .star::after { font-size: 12px !important; line-height: 12px !important; }
html.lng:not(.hp-off) body.type-index .products-block .product .hp-rt { font-size: 11.5px; font-weight: 600; line-height: 16px; white-space: nowrap; color: var(--hpc-2); }
html.lng:not(.hp-off) body.type-index .products-block .product .hp-rt b { font-weight: 800; color: var(--hpc-ink); }
html.lng:not(.hp-off) body.type-index .products-block .product a.name {
  position: absolute !important; top: var(--hpc-nm) !important; left: 10px !important; right: 10px !important; bottom: auto !important;
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  height: calc(2 * var(--hpc-lh)) !important; margin: 0 !important; padding: 0 !important; font-size: 13.5px !important; font-weight: 600 !important;
  line-height: var(--hpc-lh) !important; text-align: center !important; color: var(--hpc-ink) !important; text-decoration: none !important;
}
html.lng:not(.hp-off) body.type-index .products-block .product a.name span { display: inline !important; margin: 0 !important; font: inherit !important; color: inherit !important; }
html.lng:not(.hp-off) body.type-index .products-block .product a.name:hover { color: var(--hpc-blue) !important; }
/* štítky (Akce, Novinka, LÉTO…) v řádku nad cenou */
html.lng:not(.hp-off) body.type-index .products-block .product .flags.flags-default {
  position: absolute !important; top: calc(100% + var(--hpc-fl)) !important; left: 6px !important; right: 6px !important; bottom: auto !important; z-index: 1;
  display: flex !important; flex-flow: row nowrap !important; align-items: center; justify-content: center; gap: 4px; height: 18px; overflow: hidden;
  margin: 0 !important; padding: 0 !important; transform: none !important;
}
html.lng:not(.hp-off) body.type-index .products-block .product .flags-default .flag {
  display: inline-flex !important; align-items: center; flex: 0 0 auto; height: 18px !important; min-width: 0 !important; margin: 0 !important;
  padding: 0 7px !important; border-radius: 5px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
/* sleva: „–11 %“ ve žlutém kolečku v rohu fotky, původní cena přeškrtnutě pod cenou (obojí ze štítku slevy Shoptetu) */
html.lng:not(.hp-off) body.type-index .products-block .product :is(.flags-extra, .flag-discount) { display: contents !important; }
html.lng:not(.hp-off) body.type-index .products-block .product .flag-discount .price-save {
  position: absolute !important; top: calc(var(--hpc-pad) + 2px) !important; left: calc(var(--hpc-pad) + 2px) !important; z-index: 2;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0 !important; padding: 0 !important;
  border-radius: 50%; background: #ffd84d !important; color: var(--hpc-ink) !important; font-size: 12px !important; font-weight: 800 !important;
  line-height: 1.05 !important; letter-spacing: -.02em; white-space: nowrap;
}
html.lng:not(.hp-off) body.type-index .products-block .product .flag-discount .until { display: block; font-size: 9px; font-weight: 700; }
html.lng:not(.hp-off) body.type-index .products-block .product .flag-discount .price-standard {
  position: absolute !important; top: calc(100% + var(--hpc-was)) !important; left: 6px !important; right: 6px !important; z-index: 1;
  display: block !important; height: 16px; margin: 0 !important; padding: 0 !important; background: none !important; font-size: 12px !important;
  font-weight: 400 !important; line-height: 16px !important; text-align: center; white-space: nowrap; overflow: hidden; color: var(--hpc-2) !important;
  text-decoration: line-through !important; opacity: 1 !important;
}
html.lng:not(.hp-off) body.type-index .products-block .product .flag-discount .price-standard span { font: inherit !important; color: inherit !important; text-decoration: inherit !important; }
html.lng:not(.hp-off) body.type-index .products-block .product .price-final {
  position: absolute !important; top: var(--hpc-pr) !important; left: 4px !important; right: 4px !important; bottom: auto !important;
  display: block !important; height: 22px; margin: 0 !important; padding: 0 !important; text-align: center !important; white-space: nowrap; overflow: hidden; line-height: 22px;
}
html.lng:not(.hp-off) body.type-index .products-block .product .price-final strong {                  /* i u akce černě – červená cena působila jako vyprodáno */
  font-size: 18px !important; font-weight: 800 !important; line-height: 22px !important; letter-spacing: -.01em; color: var(--hpc-ink) !important;
}
html.lng:not(.hp-off) body.type-index .products-block .product .availability {
  position: absolute !important; top: var(--hpc-av) !important; left: 6px !important; right: 6px !important; bottom: auto !important;
  display: block !important; height: 16px; margin: 0 !important; padding: 0 !important; font-size: 11.5px !important; font-weight: 700; line-height: 16px !important;
  text-align: center !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.lng:not(.hp-off) body.type-index .products-block .product .availability > span { display: inline !important; font: inherit !important; }
/* tlačítko: malé, obrysové (jako na Alze), po najetí plné */
html.lng:not(.hp-off) body.type-index .products-block .product .p-tools {
  position: absolute !important; top: var(--hpc-bt) !important; left: 0 !important; right: 0 !important; bottom: auto !important;
  display: flex !important; justify-content: center; width: auto !important; height: var(--hpc-bh); margin: 0 !important; padding: 0 !important; float: none !important;
}
html.lng:not(.hp-off) body.type-index .products-block .product .p-tools form { display: block; margin: 0; padding: 0; }
html.lng:not(.hp-off) body.type-index .products-block .product .p-tools .btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: auto !important; min-width: 0 !important;
  height: var(--hpc-bh) !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid #cfd7e2 !important; border-radius: 999px !important;
  background: #fff !important; color: var(--hpc-blue) !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 700 !important;
  line-height: 1 !important; letter-spacing: 0; text-transform: none !important; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s;
}
html.lng:not(.hp-off) body.type-index .products-block .product .p-tools .btn span { display: inline !important; font: inherit !important; color: inherit !important; }
html.lng:not(.hp-off) body.type-index .products-block .product .p-tools .btn:hover,
html.lng:not(.hp-off) body.type-index .products-block .product .p-tools .btn:focus-visible { background: var(--hpc-blue) !important; border-color: var(--hpc-blue) !important; color: #fff !important; }
html.lng:not(.hp-off) body.type-index .products-block .product .p-tools .btn:focus-visible { outline: 3px solid #0063c7; outline-offset: 2px; }
html.lng:not(.hp-off) body.type-index .products-block .product .p-tools .btn-cart::before {
  content: "" !important; display: block !important; flex: 0 0 auto; width: 15px; height: 15px; margin: 0 !important; font-size: 0 !important; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2.5 3.5h2.6l2.4 11.2a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2l1.7-7.3H6.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2.5 3.5h2.6l2.4 11.2a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2l1.7-7.3H6.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ♡ ⇄ 👁 (modul Oblíbené) menší; na dotykových displejích jen ♡ – porovnání a náhled jsou na kartách v kategoriích */
html.lng:not(.hp-off) body.type-index .products-block .p > .ob-tools { top: calc(var(--hpc-pad) + 2px); right: calc(var(--hpc-pad) + 2px); gap: 5px; }
html.lng:not(.hp-off) body.type-index .products-block .p > .ob-tools .ob-tool { width: 30px; height: 30px; }
html.lng:not(.hp-off) body.type-index .products-block .p > .ob-tools .ob-ico { width: 15px; height: 15px; }
@media not all and (hover: hover) and (pointer: fine) {
  html.lng:not(.hp-off) body.type-index .products-block .p > .ob-tools .ob-tool:not([data-ob="wish"]):not(.is-on) { display: none; }
}

/* šipky: tmavá záložka na kraji řady (jako na Alze) – TOP produkty (slick) i řady (9c, .hp-rail-nav); svisle na středu fotek,
   ať nezakrývají název ani cenu: pás je vysoký 4 + fotka + spodní část + 14 px, fotka je čtverec → její střed je
   50 % − (spodní část − okraj fotky + 10 px) / 2. Šablona má rozměry šipek s !important, proto i tady. */
html.lng:not(.hp-off) body.type-index :is(.products-block .slick-arrow, .hp-rail-nav) {
  position: absolute !important; top: calc(50% - (var(--hpc-in) - var(--hpc-pad) + 10px) / 2 - 26px) !important; bottom: auto !important; z-index: 3 !important;
  display: flex !important; align-items: center; justify-content: center; width: 36px !important; height: 52px !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 10px !important; background: #0b0d10 !important; color: #fff !important; cursor: pointer; opacity: 1;
  box-shadow: 0 8px 20px -8px rgba(11, 13, 16, .55); transform: none !important; transition: background-color .15s, opacity .2s, visibility .2s, scale .15s;
}
html.lng:not(.hp-off) body.type-index :is(.products-block .slick-arrow, .hp-rail-nav)::before {
  content: "" !important; display: block !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important;
  font-size: 0 !important; opacity: 1 !important; border-radius: 0 !important; transform: none !important;
  color: inherit !important; background: currentColor !important;   /* barva z tlačítka (téma slicku dává ikoně bílou) */
  -webkit-mask: var(--hp-chev) center / contain no-repeat; mask: var(--hp-chev) center / contain no-repeat;
}
html.lng:not(.hp-off) body.type-index :is(.products-block .slick-prev, .hp-rail-prev) {   /* aspoň 46 px od kraje okna – odznak Heureky vlevo (36 px) */
  left: max(-6px, calc(46px - (100vw - 100%) / 2)) !important; right: auto !important;
  --hp-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5'/%3E%3C/svg%3E");
}
html.lng:not(.hp-off) body.type-index :is(.products-block .slick-next, .hp-rail-next) {
  right: -6px !important; left: auto !important;
  --hp-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E");
}
html.lng:not(.hp-off) body.type-index :is(.products-block .slick-arrow, .hp-rail-nav):hover:not(:disabled) { background: #2a2e35 !important; }
html.lng:not(.hp-off) body.type-index :is(.products-block .slick-arrow, .hp-rail-nav):active:not(:disabled) { scale: .94; }
html.lng:not(.hp-off) body.type-index :is(.products-block .slick-arrow, .hp-rail-nav):focus { outline: 0; }
html.lng:not(.hp-off) body.type-index :is(.products-block .slick-arrow, .hp-rail-nav):focus-visible { outline: 3px solid #0063c7; outline-offset: 2px; }
html.lng:not(.hp-off) body.type-index .products-block .slick-arrow.slick-hidden { display: none !important; }   /* všechno je vidět */
/* tlačítko pauzy automatického posunu (přidává homepage.js) – vpravo v řádku nadpisu */
html.lng:not(.hp-off) body.type-index .products-block .hp-prod-pause {
  position: absolute; top: -43px; right: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: 0; padding: 0; border: 1px solid #e2e2df; border-radius: 50%; background: #fff; color: #0b0d10;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
html.lng:not(.hp-off) body.type-index .products-block .hp-prod-pause:hover { background: #0b0d10; color: #fff; border-color: #0b0d10; }
html.lng:not(.hp-off) body.type-index .products-block .hp-prod-pause .hp-ico { width: 14px; height: 14px; }
html.lng:not(.hp-off) body.type-index .products-block .hp-prod-pause .hp-ico + .hp-ico,
html.lng:not(.hp-off) body.type-index .products-block .hp-prod-pause[aria-pressed="true"] .hp-ico:first-child { display: none; }
html.lng:not(.hp-off) body.type-index .products-block .hp-prod-pause[aria-pressed="true"] .hp-ico + .hp-ico { display: block; }
html.lng:not(.hp-off) body.type-index .products-block .hp-prod-pause:focus { outline: 0; }
html.lng:not(.hp-off) body.type-index .products-block .hp-prod-pause:focus-visible { outline: 3px solid #0063c7; outline-offset: 3px; }
@media (max-width: 767px) {
  /* telefon: karty o něco menší, posun prstem (šipky ne) */
  html.lng:not(.hp-off) body.type-index {
    --hpc-pad: 6px; --hpc-rt: 6px; --hpc-nm: 24px; --hpc-lh: 17px; --hpc-fl: 62px; --hpc-pr: 82px; --hpc-was: 102px; --hpc-av: 117px; --hpc-bt: 138px; --hpc-bh: 30px; --hpc-in: 178px;
  }
  html.lng:not(.hp-off) body.type-index .homepage-group-title { margin: 32px 0 10px !important; font-size: 20px !important; }
  html.lng:not(.hp-off) body.type-index .content .products-block { margin-bottom: 36px !important; }
  html.lng:not(.hp-off) body.type-index .content-wrapper:not(.homepage-box) + .hp-sec-rail { margin-top: -8px; }
  /* šablona má na mobilu blok produktů od kraje ke kraji – první karta od 12 px, vpravo vykukuje další (jako u řad) */
  html.lng:not(.hp-off) body.type-index .products-block.slick-slider .slick-list { margin: 0 !important; padding: 4px 17% 12px 7px !important; }
  html.lng:not(.hp-off) body.type-index .products-block .product { padding: 0 5px !important; }
  html.lng:not(.hp-off) body.type-index .products-block .product a.name { left: 6px !important; right: 6px !important; font-size: 12.5px !important; }
  html.lng:not(.hp-off) body.type-index .products-block .product .stars-wrapper { gap: 4px; height: 14px; }
  html.lng:not(.hp-off) body.type-index .products-block .product .stars-wrapper .star { width: 11px !important; height: 11px !important; font-size: 11px !important; }
  html.lng:not(.hp-off) body.type-index .products-block .product .stars-wrapper .star::before,
  html.lng:not(.hp-off) body.type-index .products-block .product .stars-wrapper .star::after { font-size: 11px !important; line-height: 11px !important; }
  html.lng:not(.hp-off) body.type-index .products-block .product .hp-rt { font-size: 11px; line-height: 14px; }
  html.lng:not(.hp-off) body.type-index .products-block .product .flags.flags-default { height: 16px; }
  html.lng:not(.hp-off) body.type-index .products-block .product .flags-default .flag { height: 16px !important; padding: 0 6px !important; font-size: 9.5px !important; }
  html.lng:not(.hp-off) body.type-index .products-block .product .flag-discount .price-save { width: 36px; height: 36px; font-size: 11px !important; }
  html.lng:not(.hp-off) body.type-index .products-block .product .flag-discount .price-standard { height: 14px; font-size: 11px !important; line-height: 14px !important; }
  html.lng:not(.hp-off) body.type-index .products-block .product .price-final { height: 20px; line-height: 20px; }
  html.lng:not(.hp-off) body.type-index .products-block .product .price-final strong { font-size: 16px !important; line-height: 20px !important; }
  html.lng:not(.hp-off) body.type-index .products-block .product .availability { height: 14px; font-size: 11px !important; line-height: 14px !important; }
  html.lng:not(.hp-off) body.type-index .products-block .product .p-tools .btn { gap: 5px; padding: 0 11px !important; font-size: 12px !important; }
  html.lng:not(.hp-off) body.type-index .products-block .product .p-tools .btn-cart::before { width: 14px; height: 14px; }
  html.lng:not(.hp-off) body.type-index :is(.products-block .slick-arrow, .hp-rail-nav) { display: none !important; }
  html.lng:not(.hp-off) body.type-index .products-block .hp-prod-pause { top: -40px; right: 12px; width: 32px; height: 32px; }
}
@media (min-width: 576px) and (max-width: 767px) {                    /* malý tablet (iPad mini na výšku): 3 karty a kousek další */
  html.lng:not(.hp-off) body.type-index .products-block.slick-slider .slick-list { padding-right: 11% !important; }
}

/* ---------- 9b) Boční panely Pronájem a Rozbalené – jen na širokých obrazovkách (polohu a šířku počítá skript) ---------- */
.hp-wall { position: absolute; z-index: 1; left: 0; right: 0; pointer-events: none; font-family: 'HP Poppins', 'Poppins', 'Roboto', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.hp-wall[hidden] { display: none !important; }
.hp-wall *, .hp-wall *::before, .hp-wall *::after { box-sizing: border-box; }
.hp-wall-col { position: absolute; top: 0; bottom: 0; }
.hp-wall-p {
  position: sticky; top: 16px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; isolation: isolate;
  max-height: calc(100vh - 32px); padding: 22px 18px 20px; border-radius: 24px; pointer-events: auto;
  background: radial-gradient(130% 55% at 50% 100%, var(--w-glow), rgba(0, 0, 0, 0) 62%), linear-gradient(170deg, #1d2026 0%, #0c0e11 100%);
  color: #fff !important; text-decoration: none !important; box-shadow: 0 20px 40px -26px rgba(11, 13, 16, .7);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}
.hp-wall-p--pronajem { --w-acc: #fb2a2d; --w-acc2: #d4121a; --w-k: #ff9496; --w-glow: rgba(251, 42, 45, .42); }
.hp-wall-p--rozbalene { --w-acc: #f97316; --w-acc2: #c2410c; --w-k: #fdba74; --w-glow: rgba(249, 115, 22, .45); }
.hp-wall-p:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -28px rgba(11, 13, 16, .85); }
.hp-wall-p:focus-visible { outline: 3px solid #0063c7; outline-offset: 3px; }
.hp-wall-k { display: block; margin: 0 0 8px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--w-k); }
.hp-wall-t { display: block; margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.hp-wall-x { display: block; margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .76); }
/* fotky zboží: 2 vedle sebe, u 3 jedna široká nahoře */
.hp-wall-pr { position: relative; display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin: 0 0 18px; }
.hp-wall-pr:empty { display: none; }
.hp-wall-i { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; }
.hp-wall-i img { display: block; width: 80%; height: 80%; max-width: none; margin: 0; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.hp-wall-pr--3 .hp-wall-i:first-child { flex: 1 1 100%; aspect-ratio: 16 / 9; }
.hp-wall-i.is-wait { background: rgba(255, 255, 255, .08); }   /* místo pro fotku, než se načte výpis */
.hp-wall-i i {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 4px 8px; border-radius: 999px; background: var(--w-acc);
  color: #fff; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6);
}
.hp-wall-p:hover .hp-wall-i img { transform: scale(1.06); }
.hp-wall-b {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px;
  background: var(--w-acc); background: linear-gradient(180deg, var(--w-acc), var(--w-acc2)); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1;
  box-shadow: 0 10px 20px -12px var(--w-acc);
}
.hp-wall-b .hp-ico { width: 15px; height: 15px; transition: transform .2s; }
.hp-wall-p:hover .hp-wall-b .hp-ico { transform: translateX(3px); }
/* ověřené body (délka, vyzvednutí, záloha / kontrola, funkčnost, vrácení) mezi fotkami a tlačítkem */
.hp-wall-pt { display: flex; flex-direction: column; gap: 9px; width: 100%; margin: 0 0 18px; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.hp-wall-pti { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, .9); }
.hp-wall-pti .hp-ico { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: rgba(255, 255, 255, .08); color: var(--w-k); }
/* robot iStage dole na pódiu (kreslený SVG z homepage.js, jen ozdoba): občas mrkne, dron se vznáší, odznak kontroly pulzuje */
.hp-wall-bot { display: block; width: 100%; max-width: 180px; margin: 4px auto -20px; pointer-events: none; }
.hp-wall-bot .hp-bot { display: block; width: 100%; height: auto; max-width: none; }
.hp-bot-eyes { transform-box: fill-box; transform-origin: center; animation: hp-bot-blink 6.5s infinite; }
.hp-bot-drone { animation: hp-bot-hover 3.4s ease-in-out infinite; }
.hp-bot-badge { transform-box: fill-box; transform-origin: center; animation: hp-bot-pop 4.2s ease-in-out infinite; }
@keyframes hp-bot-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes hp-bot-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.6px); } }
@keyframes hp-bot-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---------- 9c) Řady produktů podle kategorií (homepage.js, CFG.rails) – pod sebou nad značkami, karty jako v 9;
   řada se posouvá do strany (šipkami na krajích, na mobilu prstem) ---------- */
html.lng:not(.hp-off) body.type-index .hp-sec.hp-sec-rail { margin-bottom: 36px; }
html.lng:not(.hp-off) body.type-index .hp-sec-rail + .hp-sec:not(.hp-sec-rail) { margin-top: 58px; }   /* za poslední řadou běžný odstup sekcí (s pásem karet 72 px) */
.hp-sec-rail .hp-sec-head { align-items: flex-end; gap: 4px 16px; margin: 0 0 12px; }
.hp-sec-rail h2.hp-sec-title { font-size: 22px !important; line-height: 1.25 !important; letter-spacing: -.01em; }
.hp-sec-rail .hp-sec-sub { margin-top: 2px; font-size: 13px; line-height: 1.45; }
.hp-sec-rail .hp-sec-link { font-size: 13.5px; }
.hp-rail { position: relative; }
html.lng:not(.hp-off) body.type-index .hp-sec-rail .hp-rail-l {
  display: flex !important; flex-wrap: nowrap !important; align-items: stretch; gap: 0 !important; width: auto !important; height: auto !important;
  margin: 0 -8px !important; padding: 4px 0 14px !important; border: 0 !important; background: none !important;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
html.lng:not(.hp-off) body.type-index .hp-sec-rail .hp-rail-l::-webkit-scrollbar { display: none; }
html.lng:not(.hp-off) body.type-index .hp-sec-rail .hp-rail-l > .product {             /* 6 vedle sebe, jako TOP produkty (TOP_COLS v homepage.js) */
  flex: 0 0 16.6667%; width: 16.6667% !important; max-width: none !important; min-width: 0; height: auto !important; margin: 0 !important;
  float: none !important; scroll-snap-align: start;
}
html.lng:not(.hp-off) body.type-index .hp-rail-nav:disabled { opacity: 0; visibility: hidden; pointer-events: none; }   /* na začátku jen šipka doprava */
html.lng:not(.hp-off) body.type-index .hp-sec-rail.hp-rail--fit .hp-rail-nav { display: none !important; }        /* všechno je vidět – není kam posouvat */
/* místo pro karty, než se načtou: stejné rozměry jako karta (fotka, hvězdičky, název, cena a tlačítko na svých místech) */
html.lng:not(.hp-off) body.type-index .hp-sec-rail .hp-rail-sk > .p { pointer-events: none; box-shadow: none !important; }
html.lng:not(.hp-off) body.type-index .hp-rail-sk .hp-sk {
  display: block; border-radius: 6px; background: #f1f1ee linear-gradient(90deg, #f1f1ee 0%, #f8f8f6 50%, #f1f1ee 100%) 0 0 / 200% 100%;
  animation: hp-sk 1.4s ease-in-out infinite;
}
html.lng:not(.hp-off) body.type-index .hp-rail-sk .hp-sk-img { margin: var(--hpc-pad) var(--hpc-pad) 0; aspect-ratio: 1 / 1; border-radius: 10px; }
html.lng:not(.hp-off) body.type-index .hp-rail-sk .hp-sk-in { display: block; height: var(--hpc-in); }
html.lng:not(.hp-off) body.type-index .hp-rail-sk :is(.hp-sk-rt, .hp-sk-t, .hp-sk-p, .hp-sk-btn) { position: absolute; }
/* polohy od spodku karty (spodní část má pevnou výšku --hpc-in, fotka nad ní je čtverec podle šířky karty) */
html.lng:not(.hp-off) body.type-index .hp-rail-sk .hp-sk-rt { bottom: calc(var(--hpc-in) - var(--hpc-rt) - 14px); left: 26%; width: 48%; height: 12px; }
html.lng:not(.hp-off) body.type-index .hp-rail-sk .hp-sk-t { bottom: calc(var(--hpc-in) - var(--hpc-nm) - var(--hpc-lh) + 3px); left: 10%; width: 80%; height: 12px; }
html.lng:not(.hp-off) body.type-index .hp-rail-sk .hp-sk-t2 { bottom: calc(var(--hpc-in) - var(--hpc-nm) - 2 * var(--hpc-lh) + 3px); left: 22%; width: 56%; }
html.lng:not(.hp-off) body.type-index .hp-rail-sk .hp-sk-p { bottom: calc(var(--hpc-in) - var(--hpc-pr) - 20px); left: 30%; width: 40%; height: 18px; }
html.lng:not(.hp-off) body.type-index .hp-rail-sk .hp-sk-btn { bottom: calc(var(--hpc-in) - var(--hpc-bt) - var(--hpc-bh)); left: calc(50% - 50px); width: 100px; height: var(--hpc-bh); border-radius: 999px; }
@keyframes hp-sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 1199px) {
  html.lng:not(.hp-off) body.type-index .hp-sec-rail .hp-rail-l > .product { flex-basis: 20%; width: 20% !important; }
}
@media (max-width: 991px) {
  html.lng:not(.hp-off) body.type-index .hp-sec-rail .hp-rail-l > .product { flex-basis: 25%; width: 25% !important; }
}
@media (max-width: 767px) {
  /* telefon: dvě karty a kousek další (je vidět, že řada pokračuje); řada jde od kraje ke kraji displeje, posun prstem */
  html.lng:not(.hp-off) body.type-index .hp-sec.hp-sec-rail { margin-bottom: 28px; }
  html.lng:not(.hp-off) body.type-index .hp-sec-rail + .hp-sec:not(.hp-sec-rail) { margin-top: 36px; }
  .hp-sec-rail .hp-sec-head { margin-bottom: 10px; }
  .hp-sec-rail h2.hp-sec-title { font-size: 20px !important; }
  html.lng:not(.hp-off) body.type-index .hp-sec-rail .hp-rail-l { margin: 0 -12px !important; padding: 4px 7px 12px !important; scroll-padding: 0 7px; }
  html.lng:not(.hp-off) body.type-index .hp-sec-rail .hp-rail-l > .product { flex-basis: 42%; width: 42% !important; }
  html.lng:not(.hp-off) body.type-index .hp-rail-sk .hp-sk-btn { left: calc(50% - 44px); width: 88px; }
}
@media (min-width: 576px) and (max-width: 767px) {
  html.lng:not(.hp-off) body.type-index .hp-sec-rail .hp-rail-l > .product { flex-basis: 29%; width: 29% !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.lng:not(.hp-off) body.type-index .hp-sk { animation: none; }
}

/* ---------- 10) Omezený pohyb: bez automatického přepínání a animací ---------- */
@media (prefers-reduced-motion: reduce) {
  .hp-slide, .hp-slide.is-on { transition: none !important; }
  .hp-tab.is-on .hp-tab-bar i { animation: none; transform: none; }
  .hp-btn, .hp-usp-i, .hp-disc img, .hp-side-i > a, .hp-slate, .hp-arrow, .hp-cat, .hp-cat-ico, .hp-cat::after, .hp-serv, .hp-brand, .hp-sico { transition: none !important; }
  .hp-cat:hover, .hp-cat:active, .hp-cat:hover .hp-cat-ico { transform: none !important; }
  .hp-mid--rot .hp-mid-stage > .hp-eng, .hp-mid-dot, .hp-pk-dog, .hp-pk-card, .hp-rev-badge { transition: none !important; }
  .hp-rev-badge:hover { transform: none; }
  .hp-slide--night .hp-night-stars, .hp-slide--night .hp-disc img, .hp-night-art { animation: none !important; }   /* noční banner: bez blikání, vznášení a dýchání */
  .hp-slide--night .hp-night-feat .hp-ico { transition: none !important; transform: none !important; }
  .hp-pk-tag { animation: none; }
  .hp-eng--pk:hover .hp-pk-dog { transform: none; }
  .hp-eng--pk:hover .hp-pk-card { transform: rotate(-10deg); }
  .hp-wall-p, .hp-wall-i img, .hp-wall-b .hp-ico { transition: none !important; }
  .hp-wall-p:hover { transform: none; }
  .hp-bot-eyes, .hp-bot-drone, .hp-bot-badge { animation: none !important; }
}