/* ==========================================================
   vlnenezbozi – společná vrstva (zadání 01-spolecna-vrstva.md)
   Zdroj v gitu. Na server jako /user/documents/upload/vz/vz-N.css,
   nahraný soubor se nikdy nepřepisuje (cache rok).
   ========================================================== */


/* ----------------------------------------------------------
   01 TOKENY (manuál 12 › Tokeny) + proměnné Shoptetu
   ---------------------------------------------------------- */
:root{
  --white:#FFFFFF; --vlna:#FBF3E3; --surface:#F4F4F3; --mlha:#E9F1FB;
  --ink:#16191D; --text:#454A52; --bridlice:#5F6873; --muted:#6E737B; --faint:#A9ADB3;
  --line:#ECECEC; --line-control:#DADADA;
  --novinka:#EEF0F3; --med-text:#8A5A12; --track:#F2EDE3; --bar:#CFC6B6; --vlocka:#F1E2C6;
  --action:#3A6598; --action-hover:#3E4F64; --brand:#3E4F64;
  --sale:#B23A2E; --sale-soft:#FBECE9; --buy:#2F6B4F; --buy-hover:#25563F; --ok:#2F6B4F; --med:#E3A43A;
  --r-stitek:6px; --r-pole:10px; --r-volba:12px; --r-tlacitko:14px; --r-karta:16px; --r-blok:18px; --r-pill:999px;
  --kontejner:1420px; --okraj:30px; --okraj-m:16px;
  --sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  /* proměnné Shoptetu, které čte šablona Jupiter a doplňky */
  --color-primary:var(--ink); --color-primary-hover:var(--ink);
  --color-secondary:var(--ink); --color-secondary-hover:var(--ink);
  --template-font:'Figtree'; --template-headings-font:'Figtree';
  /* ikony z maket (manuál 06): tahové SVG, mřížka 24, kreslí se maskou barvou textu */
  --i-lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  --i-lupa-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  --i-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.2a11 11 0 0 0 6.3 6.3l1.2-2 4 1.5v3a2 2 0 0 1-2.2 2A16 16 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");
  --i-kosik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5h13l-1.1 11a1.6 1.6 0 0 1-1.6 1.5H8.2a1.6 1.6 0 0 1-1.6-1.5z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3C/svg%3E");
  --i-kosik-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5h13l-1.1 11a1.6 1.6 0 0 1-1.6 1.5H8.2a1.6 1.6 0 0 1-1.6-1.5z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3C/svg%3E");
  --i-uzivatel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
  --i-mena: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
  --i-sipka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --i-zavrit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}


/* ----------------------------------------------------------
   02 PÍSMO (stejné selektory, kde Jupiter nastavuje Jost)
   ---------------------------------------------------------- */
html, body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.quantity .increase::before,
.quantity .decrease::before {
  font-family: var(--sans);
}


/* ----------------------------------------------------------
   03 TYPOGRAFIE (manuál 03; velikosti řeší zadání stránek)
   ---------------------------------------------------------- */
body {
  color: var(--text);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ink);
}

h1, .h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
h2, .h2 { font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
h3, .h3 { font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }


/* ----------------------------------------------------------
   04 KONTEJNER (manuál 04 › Mřížka; šířky podle zlomů nechává Jupiter)
   ---------------------------------------------------------- */
/* #content-wrapper: Jupiter mu okraje nuluje silnějším selektorem */
@media (min-width: 768px) {
  .container,
  #content-wrapper.container {
    padding-left: var(--okraj);
    padding-right: var(--okraj);
  }
}

@media (max-width: 767px) {
  .container,
  #content-wrapper.container {
    padding-left: var(--okraj-m);
    padding-right: var(--okraj-m);
  }
}


/* ----------------------------------------------------------
   05 ODKAZY (rozhraní tmavé, v textu článků a popisů modré)
   ---------------------------------------------------------- */
a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.news-item-detail p a, .news-item-detail li a,
.pageArticleDetail p a, .pageArticleDetail li a,
.basic-description p a, .basic-description li a {
  color: var(--action);
}


/* ----------------------------------------------------------
   06 TLAČÍTKA A FOKUS
   ---------------------------------------------------------- */
/* generická tlačítka zčernají přes --color-secondary (oddíl 01) */
.btn {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 12px;
  transition: background-color .15s;
}

/* zelená jen nákup (manuál 02: primární tlačítko koupit = zelená);
   .btn-conversion = Vložit do košíku na detailu a Pokračovat / Dokončit objednávku v košíku */
.btn.add-to-cart-button,
.btn.btn-conversion {
  background-color: var(--buy);
  border-color: var(--buy);
  color: var(--white);
}

.btn.add-to-cart-button:hover,
.btn.add-to-cart-button:focus,
.btn.btn-conversion:hover,
.btn.btn-conversion:focus {
  background-color: var(--buy-hover);
  border-color: var(--buy-hover);
  color: var(--white);
}

/* fokus: do rozhodnutí bodu 18 nechává kroužek Jupiter, nic nerušit.
   Návrh z manuálu 11, po rozhodnutí odkomentovat:
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
*/

/* kotvy pod lepicí mobilní hlavičkou 58 px */
@media (max-width: 767px) {
  html { scroll-padding-top: 66px; }
}


/* ----------------------------------------------------------
   07 KAMPAŇOVÁ LIŠTA (manuál 07 › Kampaňová lišta)
   Třídu vz-ma-kampan dá <html> už skript v Záhlaví, lištu vloží vz.js.
   ---------------------------------------------------------- */
/* rezerva místa, než JS lištu vloží (žádný posun stránky) */
html.vz-ma-kampan:not(.vz-kampan-hotovo) .overall-wrapper::before {
  content: "";
  display: block;
  height: 36px;
}

.vz-kampan {
  background: var(--sale);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.vz-kampan__in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 36px;
  text-align: center;
}

.vz-kod {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .05em;
}

.vz-kampan a.vz-kampan__odkaz {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* při otevřeném menu nebo hledání lišta pryč */
body.navigation-window-visible .vz-kampan,
body.search-window-visible .vz-kampan {
  display: none;
}

@media (max-width: 767px) {
  html.vz-ma-kampan:not(.vz-kampan-hotovo) .overall-wrapper::before {
    height: 34px;
  }

  .vz-kampan {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
  }

  .vz-kampan__in {
    min-height: 34px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .vz-kod {
    padding: 0 8px;
    border-radius: 7px;
  }

  .vz-kampan__doplnek,
  .vz-kampan a.vz-kampan__odkaz {
    display: none;
  }
}


/* ----------------------------------------------------------
   08 HORNÍ LIŠTA (manuál 07 › Horní lišta)
   ---------------------------------------------------------- */
/* jen desktop: na mobilu jsou tyto prvky v otevřeném menu a styluje je Jupiter */
@media (min-width: 768px) {
  .top-navigation-bar {
    background: var(--vlna);
    border: 0;
    min-height: 42px;
  }

  /* Jupiter dělí lištu napůl; odkazům zbytek místa, nástrojům jen co potřebují
     (Shoptet topMenuFits jinak schová poslední odkaz pod „Více“) */
  .top-navigation-bar .container > .top-navigation-menu {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }

  .top-navigation-bar .container > .top-navigation-tools {
    flex: none;
    width: auto;
  }

  .top-navigation-bar-menu {
    column-gap: 30px;
  }

  .top-navigation-bar-menu a,
  .top-navigation-tools a,
  .top-navigation-tools button {
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0;
  }

  .top-navigation-tools {
    column-gap: 26px;
  }

  /* popisek „Ceny v:“ jen pro čtečky */
  .top-navigation-tools .dropdown > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ----------------------------------------------------------
   09 HLAVIČKA A ODZNAK (manuál 07 › Hlavička)
   ---------------------------------------------------------- */
@media (min-width: 768px) {
  #header .header-top {
    height: auto;
  }

  /* okraje vynulované Jupiterem → vlastní; výška řádku 106 px */
  #header .header-top .header-top-wrapper {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 24px;
    padding: 20px var(--okraj);
    align-items: center;
  }

  /* clearfix .container by ve flexu dostal mezeru 24 px */
  #header .header-top .header-top-wrapper::before,
  #header .header-top .header-top-wrapper::after {
    content: none;
  }

  /* Jupiter dává sloupcům šířky 20 / 45 / 35 % */
  #header .header-top .header-top-wrapper .site-name {
    flex: none;
    width: auto;
    padding-right: 0;
  }

  /* !important kvůli starému max-height:80px !important v Záhlaví (odstraní se při spuštění) */
  /* odkaz kolem loga bez řádkové mezery (jinak 71 px místo 64) */
  #header .header-top .site-name a {
    display: block;
    line-height: 0;
  }

  #header .site-name a img {
    height: 64px !important;
    max-height: none !important;
    width: auto;
  }

  /* hledání: jediný prvek, který se smí zužovat */
  #header .header-top .header-top-wrapper > div.search {
    flex: 1 1 240px;
    width: auto;
    min-width: 0;
  }

  #formSearchForm fieldset {
    position: relative;
    display: flex;
    height: 50px;
    background: var(--white);
    border: 1px solid var(--line-control);
    border-radius: var(--r-pole);
    overflow: hidden;
  }

  /* lupa 20 px vlevo v poli */
  #formSearchForm fieldset::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background-color: var(--muted);
    -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='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
  }

  #formSearchForm .query-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 12px 0 46px;
    font-size: 15px;
    color: var(--ink);
    text-overflow: ellipsis;
  }

  /* fokus: kroužek Jupiteru na celé pole (vstup má box-shadow:none) */
  #formSearchForm fieldset:focus-within {
    box-shadow: 0 0 0 .2em #0a3881;
  }

  #formSearchForm .query-input::placeholder {
    color: var(--muted);
    opacity: 1;
  }

  /* tlačítko HLEDAT: text je v HTML, Jupiter ho skrývá font-size:0 */
  #header .search #formSearchForm .search-button {
    position: static;
    flex: none;
    width: auto;
    height: 100%;
    padding: 0 22px;
    border: 0;
    border-radius: 0;
    background: var(--ink) !important; /* průhlednou plochu dává Shoptet !important */
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  #header .search #formSearchForm .search-button::before {
    content: none;
  }

  #header .header-top .header-top-wrapper > div.navigation-buttons {
    flex: none;
    width: auto;
    gap: 24px;
    padding-left: 0;
  }

  /* telefon: číslo 16/700, doba 13 px */
  #header .navigation-buttons .header-phone {
    flex: none;
    margin: 0;
    white-space: nowrap;
  }

  #header .header-phone a {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0;
  }

  #header .header-phone span {
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0;
  }

  /* košík */
  #header .header-top .navigation-buttons a.cart-count {
    flex: none;
    white-space: nowrap;
    padding-right: 0;
  }

  #header .cart-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0;
  }

  /* počet v košíku: zelený kruh 20 px vlevo dole u ikony (−5 px, maketa .kosik-ikona .pocet) */
  #header .cart-price::before,
  #header .navigation-buttons > a[data-target="cart"] i {
    left: 15px;
    top: auto;
    bottom: 5px;
    background: var(--buy);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--white);
  }
}

/* ----------------------------------------------------------
   IKONY HLAVIČKY (krok 10): místo písma „ikony“ SVG maska.
   Každý pseudoprvek nastaví --ikona a velikost, zbytek je společný.
   ---------------------------------------------------------- */
@media (min-width: 768px) {
  #topNavigationDropdown::before,
  #topNavigationDropdown::after,
  .top-nav-button-login::before,
  .top-nav-button-login::after,
  .top-nav-button-register::before,
  .top-navigation-menu-trigger::after,
  #header .header-phone a::before,
  #header .header-top a.cart-count::before,
  #header .header-top a.cart-count::after {
    content: "" !important;
    font-size: 0 !important;
    line-height: 0;
    background-color: currentColor;
    -webkit-mask: var(--ikona) center / contain no-repeat;
    mask: var(--ikona) center / contain no-repeat;
  }

  #topNavigationDropdown::before {
    --ikona: var(--i-mena);
    display: inline-block;
    width: 17px; height: 17px;
    vertical-align: -3px;
  }

  .top-nav-button-login::before,
  .top-nav-button-register::before {
    --ikona: var(--i-uzivatel);
    width: 17px; height: 17px;
    top: 0;
    vertical-align: -3px;
  }

  #topNavigationDropdown::after,
  .top-nav-button-login::after,
  .top-navigation-menu-trigger::after {
    --ikona: var(--i-sipka);
    width: 12px; height: 12px;
    top: 0;
    vertical-align: -1px;
    background-color: var(--muted);
  }

  #header .header-phone a::before {
    --ikona: var(--i-telefon);
    width: 22px; height: 22px;
    vertical-align: -5px;
  }

  #header .header-top a.cart-count::before {
    --ikona: var(--i-kosik);
    width: 30px; height: 30px;
    margin-right: 14px;
  }

  #header .header-top a.cart-count::after {
    --ikona: var(--i-sipka);
    width: 12px; height: 12px;
    align-self: center;
    background-color: var(--muted);
  }
}

/* ----------------------------------------------------------
   ODZNAK HODNOCENÍ (krok 14; manuál 07 › Odznak hodnocení).
   Vkládá ho vz.js jen v náhledu a jen tam, kde má VZ.trh odznak: true.
   ---------------------------------------------------------- */
.vz-medaile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: var(--med);
  color: var(--ink); /* bod 2: bílé číslo má 2,18 : 1 */
  font-weight: 800;
}

.vz-hvezdy {
  color: var(--med);
  letter-spacing: 1px;
}

.vz-duvera {
  display: none;
}

@media (min-width: 768px) {
  #header .vz-duvera {
    display: flex;
    align-items: center;
    flex: none;
    gap: 12px;
    height: 66px;
    padding: 8px 24px 8px 8px;
    border-radius: var(--r-pill);
    background: var(--vlna);
    color: var(--ink);
    text-decoration: none;
  }

  #header .vz-duvera .vz-medaile {
    width: 50px;
    height: 50px;
    font-size: 17px;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35);
  }

  .vz-duvera__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    white-space: nowrap;
  }

  .vz-duvera .vz-hvezdy {
    font-size: 13px;
  }

  .vz-duvera b {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
  }

  .vz-duvera small {
    font-size: 13px;
    color: var(--text);
  }

  .vz-duvera-m {
    display: none;
  }
}

/* 768–1 199 px: hledání na vlastní řádek pod logem. Manuál 04 to dává pod 992 px;
   s odznakem by pole při 992 px mělo jen 107 px, proto pravidlo platí až do 1 199 px (návrh) */
@media (min-width: 768px) and (max-width: 1199px) {
  #header .header-top .header-top-wrapper {
    flex-wrap: wrap;
  }

  #header .header-top .header-top-wrapper > div.search {
    order: 3;
    flex-basis: 100%;
  }

  #header .header-top .header-top-wrapper > div.navigation-buttons {
    margin-left: auto;
  }
}


/* ----------------------------------------------------------
   10 MENU A DROBEČKY (manuál 07 › Menu, Drobečková navigace)
   ---------------------------------------------------------- */
@media (min-width: 768px) {
  /* Shoptet/Jupiter: #navigation 60 px; menu 49 + 2 linky = 51 px (manuál 07) */
  #header .header-bottom {
    height: auto;
    min-height: 0;
  }

  #header .header-bottom #navigation {
    height: 49px;
  }

  .header-bottom {
    background: var(--white);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .menu-level-1 {
    column-gap: 46px;
  }

  /* na střed až po změření: Shoptet (splitMenu) měří v .navigation-in širokém 9999em
     a schová každou položku za tlačítkem Více; .fitted = vše se vešlo, šířka 100 % */
  #navigation.fitted .menu-level-1 {
    justify-content: center;
  }

  /* mezeru 46 px mezi položkami dává column-gap; Jupiter má
     .navigation-in>ul>li>a{line-height:60px;padding:0 20px} a linku vlevo u li */
  #navigation .navigation-in > ul.menu-level-1 > li {
    border-left: 0;
  }

  #navigation .navigation-in > ul.menu-level-1 > li > a,
  #navigation .navigation-in > ul.menu-level-1 > li:first-child > a:hover {
    background: none;
    color: var(--ink);
    margin-left: 0;
    padding: 0;
    line-height: 49px;
  }

  /* .navigation-in je absolutně, okraj kontejneru by ignoroval */
  #navigation .navigation-in {
    padding-left: var(--okraj);
    padding-right: var(--okraj);
  }

  .menu-level-1 > li > a > b {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink);
  }

  .menu-level-1 > li > a.active {
    background: none;
    box-shadow: inset 0 -2px 0 var(--ink);
  }

  .navigation-in > ul > li > a::before {
    display: none;
  }

  .submenu-arrow {
    display: none;
  }

  /* „Další“ (Jupiter, 768–1 199 px): ikona a text jsou bílé pro tmavou lištu,
     na bílém menu by zmizely; výška a rozbalený seznam podle menu 49 px */
  #header .menu-helper {
    height: 49px;
  }

  #header .menu-helper > span,
  #header .menu-helper > span::before,
  #header .menu-helper > span::after {
    color: var(--ink);
  }

  #header .menu-helper > span::after {
    letter-spacing: .08em;
  }

  #header .menu-helper > ul {
    top: 49px;
  }

  /* Akce % jako cihlový štítek (adresa podle trhu) */
  .menu-level-1 > li > a:is([href="/akce/"], [href="/akcie/"], [href="/akcio/"], [href="/reduceri/"]) > b {
    background: var(--sale-soft);
    color: var(--sale);
    font-weight: 700;
    border-radius: var(--r-stitek);
    padding: 8px 12px;
  }

  /* drobečky desktop: Domů / Obuv / Pantofle / název */
  #content-wrapper .breadcrumbs {
    height: auto; /* Jupiter: 42 px */
  }

  .breadcrumbs {
    padding: 14px 0 0;
    border: 0;
    font-size: 13px;
    line-height: 15px;
    color: var(--muted);
  }

  #content-wrapper .breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
  }

  /* šipky Jupiteru (písmo ikony) – oddělovač je „/“ v .navigation-bullet */
  #content-wrapper .breadcrumbs a::after {
    display: none;
  }

  .breadcrumbs .navigation-bullet {
    display: inline;
    color: var(--faint);
    margin: 0 8px;
  }

  .breadcrumbs [data-testid="breadcrumbsLastLevel"] {
    color: var(--ink);
    font-weight: 500;
  }

  /* položky bez Jupiterova odsazení 14 px, mezery dává jen oddělovač */
  #content-wrapper .breadcrumbs > span {
    padding: 0;
  }

  /* Domů textem místo ikony domečku */
  #content-wrapper .breadcrumbs .navigation-home-icon::before {
    display: none;
  }

  .breadcrumbs .navigation-home-icon .sr-only {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}


/* ----------------------------------------------------------
   11 MOBIL (hlavička, pruh hodnocení, krok zpět)
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* nic nesmí přetékat do strany (karusely homepage po okrajích 16 px);
     clip místo hidden, aby šlo lepení; Jupiter má hidden přes .type-… (0,2,0) */
  .overall-wrapper,
  body[class] .overall-wrapper {
    overflow-x: clip !important;
  }

  /* hlavička 58 px: lepí se nahoře a při posunu nemizí (manuál 07, mobil) */
  #header {
    position: sticky;
    top: 0;
    height: 58px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
  }

  body .overall-wrapper {
    padding-top: 0;
  }

  /* Jupiter hlavičku při posunu dolů schová; stejný selektor, pozdější pořadí */
  .scrolled-down body:not(.ordering-process):not(.search-window-visible) #header {
    transform: none;
  }

  #header .header-top,
  #header .header-top .header-top-wrapper {
    height: 58px;
  }

  #header .header-top .site-name {
    top: 12px;
  }

  #header .header-top .site-name a img {
    height: 34px;
    max-height: none;
    width: auto;
  }

  /* ikony hlavičky (menu, lupa, košík); otevřené menu kreslí Jupiter (bod 20) */
  #header .navigation-buttons > a[data-target="navigation"]::before,
  #header .navigation-buttons > a[data-target="search"]::before,
  #header .header-top a.cart-count::before {
    content: "" !important;
    font-size: 0 !important;
    line-height: 0;
    background-color: currentColor;
    -webkit-mask: var(--ikona) center / contain no-repeat;
    mask: var(--ikona) center / contain no-repeat;
  }

  /* menu vlevo: ikona 24 px + MENU 13/700 */
  #header .navigation-buttons > a[data-target="navigation"] {
    padding-left: 14px;
    display: flex;
    align-items: center;
    width: auto;
    height: 58px;
  }

  #header .navigation-buttons > a[data-target="navigation"]::before {
    --ikona: var(--i-menu);
    display: block;
    width: 24px; height: 24px;
    margin: 0;
  }

  .navigation-window-visible #header .navigation-buttons > a[data-target="navigation"]::before {
    --ikona: var(--i-zavrit);
  }

  #header .navigation-buttons > a[data-target="navigation"]::after {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
  }

  /* lupa a košík vpravo, dotyková plocha 44 × 58 */
  #header .navigation-buttons > a[data-target="search"],
  #header .navigation-buttons > a[data-target="cart"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 58px;
    padding: 0;
    color: var(--ink);
  }

  #header .navigation-buttons > a[data-target="search"]::before {
    --ikona: var(--i-lupa-m);
    display: block;
    width: 24px; height: 24px;
  }

  #header .header-top a.cart-count::before {
    --ikona: var(--i-kosik-m);
    display: block;
    width: 24px; height: 24px;
    margin: 0;
  }

  #header .header-top a.cart-count::after {
    display: none;
  }

  #header .navigation-buttons > a[data-target="cart"] {
    margin-right: 6px;
  }

  /* počet v košíku: kruh 18 px */
  #header .navigation-buttons > a[data-target="cart"] i {
    left: auto;
    right: 4px;
    bottom: 12px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    background: var(--buy);
    color: var(--white);
  }

  /* otevřené menu: CZK a Přihlášení se šipkou v jednom řádku */
  #topNavigationDropdown,
  .top-nav-button-login {
    white-space: nowrap;
  }

  /* pruh hodnocení pod hlavičkou (odjede s obsahem) */
  .vz-duvera-m {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px var(--okraj-m);
    background: var(--vlna);
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
  }

  .vz-duvera-m .vz-medaile {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .vz-duvera-m .vz-hvezdy {
    font-size: 13px;
  }

  .vz-duvera-m b {
    font-weight: 700;
    color: var(--ink);
  }

  /* panel menu začíná pod hlavičkou 58 px */
  #navigation {
    top: 58px;
  }


  /* krok zpět: „‹ Pantofle“; Jupiter má okraje −10/10 px a místo na šipku 20 px */
  #content-wrapper .breadcrumbs {
    height: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }

  /* řádek 40 px; selektor jako Jupiter (.breadcrumbs > span:not(#navigation-first) > a) + id */
  #content-wrapper .breadcrumbs > span:not(#navigation-first) > a {
    padding-left: 0;
    line-height: 40px;
  }

  #content-wrapper .breadcrumbs a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  #content-wrapper .breadcrumbs a::after {
    display: none;
  }

  #content-wrapper .breadcrumbs > span {
    padding: 0;
  }

  .breadcrumbs a::before {
    content: "‹";
    margin-right: 6px;
    text-decoration: none;
    display: inline-block;
  }
}


/* ----------------------------------------------------------
   12 NEWSLETTER A PATIČKA (manuál 08, návrh; maketa homepage2)
   Pro všechny od vz-18 (bod 19 rozhodnut 12. 10., newsletter všude 13. 10. 2026).
   Formulář Shoptetu (odeslání, souhlas, captcha) zůstává beze změny.
   ---------------------------------------------------------- */
#footer .custom-footer__newsletter {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--vlna);
}

#footer .custom-footer__newsletter > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 8px 40px;
  align-items: center;
  padding: 30px var(--okraj);
}

#footer .custom-footer__newsletter > .container::before,
#footer .custom-footer__newsletter > .container::after {
  content: none;
}

#footer .newsletter-header {
  width: auto;
  margin: 0;
  padding: 0;
}

#footer .newsletter-header .pageElement__heading {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ink);
  text-transform: none;
}

#footer .newsletter-header .pageElement__heading::before,
#footer .newsletter-header .pageElement__heading::after {
  content: none;
}

/* Jupiter odstavce v hlavičce newsletteru skrývá; ukázat jen naši větu */
#footer .newsletter-header p.vz-nl-veta {
  display: block;
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}

#footer #formNewsletterWidget {
  width: auto;
  margin: 0;
  padding: 0;
}

/* pole a tlačítko v řadě, captcha a souhlas pod nimi */
#footer #formNewsletterWidget > fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

#footer #formNewsletterWidget > fieldset > * {
  grid-column: 1 / -1;
  margin: 0;
}

#footer #formNewsletterWidget > fieldset > .smart-label-wrapper {
  grid-column: 1;
  grid-row: 1;
}

#footer #formNewsletterWidget > fieldset > .btn {
  grid-column: 2;
  grid-row: 1;
}

/* štítek „E-mail“ jen pro čtečky (štítek captchy zůstává vidět) */
#footer #formNewsletterWidget .smart-label-wrapper:has(#newsletterWidget) > label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#footer #formNewsletterWidget .form-control-wrapper:has(#newsletterWidget) {
  position: relative;
}

/* obálka 20 px jen v poli e-mailu (ne v poli captchy); od horního okraje pole,
   ne 50 %: hláška o chybě se vkládá do stejného obalu pod pole */
#footer #formNewsletterWidget .form-control-wrapper:has(#newsletterWidget)::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 16px;
  top: 16px;
  width: 20px;
  height: 20px;
  background-color: var(--muted);
  -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='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%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='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

/* Jupiter: .subscribe-form .form-control{padding:0 180px 0 80px !important} */
#footer #formNewsletterWidget #newsletterWidget {
  height: 52px;
  padding: 0 16px 0 46px !important;
  border: 1px solid var(--line-control);
  border-radius: var(--r-volba);
  background: var(--white);
  box-shadow: none;
  font-size: 15px;
  color: var(--ink);
}

#footer #formNewsletterWidget #newsletterWidget::placeholder {
  color: var(--muted);
  opacity: 1;
}

#footer #formNewsletterWidget > fieldset > .btn {
  position: static;
  width: auto;
  height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-volba);
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
}

/* věta o souhlasu: 12 px, břidlicová (bod 3) */
#footer #formNewsletterWidget .consents,
#footer #formNewsletterWidget .consents label {
  font-size: 12px;
  line-height: 1.45;
  color: var(--bridlice);
}

#footer #formNewsletterWidget > fieldset > .consents {
  margin: 0;
}

#footer #formNewsletterWidget .consents a {
  color: var(--bridlice);
  text-decoration: underline;
}

@media (max-width: 767px) {
  #footer .custom-footer__newsletter {
    margin-top: 32px;
  }

  #footer .custom-footer__newsletter > .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 22px var(--okraj-m);
  }

  #footer .newsletter-header .pageElement__heading {
    font-size: 18px;
  }

  #footer .newsletter-header {
    text-align: left;
  }

  #footer .newsletter-header p.vz-nl-veta {
    margin-bottom: 12px;
    font-size: 14px;
  }

  #footer #formNewsletterWidget > fieldset {
    grid-template-columns: minmax(0, 1fr);
  }

  #footer #formNewsletterWidget > fieldset > .btn {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 48px;
  }

  #footer #formNewsletterWidget #newsletterWidget {
    height: 48px;
    padding-left: 44px !important;
    font-size: 16px; /* menší písmo by iOS při psaní přiblížil */
  }

  #footer #formNewsletterWidget .form-control-wrapper:has(#newsletterWidget)::before {
    top: 15px;
    width: 18px;
    height: 18px;
  }
}


/* ----------------------------------------------------------
   PATIČKA (krok 18; manuál 08 › Patička, návrh).
   Barvy jen přes proměnné --pat-*: rozhodnutí bodu 19 = změna tohoto bloku.
   ---------------------------------------------------------- */
#footer.vz-pat {
  --pat-plocha: var(--brand);
  --pat-text: var(--white);
  --pat-odkaz: rgba(255, 255, 255, .82);
  --pat-veta: rgba(255, 255, 255, .75);
  --pat-tlumeny: rgba(255, 255, 255, .65);
  --pat-linka: rgba(255, 255, 255, .12);
  --pat-pilulka: rgba(255, 255, 255, .1);
  --pat-ikona: #F3D9A4; /* není token, rozhodne Marek s bodem 19 (§6 A) */
  background: none; /* plochu mají řádky; mezera nad newsletterem zůstane barvy stránky */
}

/* patička přesně podle návrhu (Marek 12. 10. 2026, bod 19): jen tři sloupce;
   staré bannery, platby, Heureka „Ověřený e-shop“ a pruh Kontaktu s fotkou pryč
   (prvek Kontakt zůstává v HTML kvůli telefonu v hlavičce) */
#footer.vz-pat .custom-footer > div:not(.vz-pat-sl),
#footer.vz-pat .custom-footer__contact {
  display: none !important;
}

/* nové bannery mají inline display:none pro zákazníky */
#footer .vz-pat-znacka,
#footer .vz-pat-odkazy {
  display: block !important;
}

/* .footer-rows je .container: plochu roztáhnout přes celou šířku okna */
#footer.vz-pat .footer-rows {
  padding: 44px var(--okraj) 32px;
  background: var(--pat-plocha);
  box-shadow: 0 0 0 100vmax var(--pat-plocha);
  clip-path: inset(0 -100vmax);
}

#footer.vz-pat .footer-rows .custom-footer {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1fr;
  gap: 32px 48px;
  margin: 0;
  padding: 0;
}

#footer.vz-pat .custom-footer::before,
#footer.vz-pat .custom-footer::after {
  content: none;
}

/* sloupce bez Jupiterova mobilního akordeonu (max-height:70px, overflow, linka) */
#footer.vz-pat .custom-footer > div {
  float: none;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  order: 4;
  color: var(--pat-odkaz);
}

#footer.vz-pat .custom-footer > div::before,
#footer.vz-pat .custom-footer > div::after,
#footer.vz-pat .custom-footer h3::after,
#footer.vz-pat .custom-footer h4::after {
  content: none;
}

#footer.vz-pat .custom-footer > .vz-pat-sl--znacka { order: 1; }
#footer.vz-pat .custom-footer > .vz-pat-sl--odkazy { order: 2; }
#footer.vz-pat .custom-footer > .vz-pat-sl--kontakt { order: 3; }

/* banner: obal Shoptetu bez vlastních okrajů */
#footer.vz-pat .vz-pat-sl .banner,
#footer.vz-pat .vz-pat-sl .banner-wrapper {
  margin: 0;
  padding: 0;
  background: none;
}

/* titulky sloupců i ostatních prvků (platby, Heureka) na tmavé */
#footer.vz-pat .custom-footer h3,
#footer.vz-pat .custom-footer h4 {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pat-text);
}

/* sloupec Značka */
#footer .vz-pat-znacka img {
  display: block;
  width: 190px;
  height: auto;
}

/* Wooline (HU, RO) je s ovečkou vyšší: stejná výška jako CZ a SK (~70 px) */
#footer .vz-pat-znacka img[src*="logo-huro"] {
  width: 148px;
}

#footer .vz-pat-znacka p {
  margin: 14px 0 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pat-veta);
}

#footer .vz-pat-site {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#footer .vz-pat-site a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--pat-pilulka);
  color: var(--pat-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* sloupec Informace pro Vás: odkazy ve 2 sloupcích */
#footer .vz-pat-odkazy ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Jupiter: .footer-rows ul li{word-break:break-all} láme slova uprostřed */
#footer .vz-pat-odkazy li {
  margin: 0;
  padding: 0;
  border: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

#footer .vz-pat-sl--kontakt li {
  word-break: normal;
  overflow-wrap: break-word;
}

#footer .vz-pat-odkazy li::before {
  content: none;
}

#footer .vz-pat-odkazy a {
  font-size: 14px;
  line-height: 1.5;
  color: var(--pat-odkaz);
  text-decoration: none;
}

#footer .vz-pat-odkazy a:hover {
  text-decoration: underline;
}

/* sloupec Kontakt */
#footer .vz-pat-sl--kontakt ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer .vz-pat-sl--kontakt li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--pat-text);
}

#footer .vz-pat-sl--kontakt li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: var(--pat-ikona);
  -webkit-mask: var(--ikona) center / contain no-repeat;
  mask: var(--ikona) center / contain no-repeat;
}

#footer .vz-pat-tel::before { --ikona: var(--i-telefon); }
#footer .vz-pat-mail::before { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); }
#footer .vz-pat-odber::before { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }

#footer .vz-pat-sl--kontakt a {
  color: var(--pat-text);
  text-decoration: none;
  white-space: nowrap;
}

#footer .vz-pat-doba {
  display: block;
  font-size: 13px;
  color: var(--pat-tlumeny);
}

/* spodní řádek: © vlevo, Vytvořil Shoptet vpravo */
#footer.vz-pat .footer-bottom {
  border-top: 1px solid var(--pat-linka);
  background: var(--pat-plocha);
}

/* Jupiter: sloupec obráceně, na střed, linka a 40 px */
#footer.vz-pat .footer-bottom > .container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-top: 0;
  align-items: center;
  gap: 4px 24px;
  padding: 16px var(--okraj) 22px;
  font-size: 13px;
  color: var(--pat-tlumeny);
}

#footer.vz-pat .footer-bottom > .container::before,
#footer.vz-pat .footer-bottom > .container::after {
  content: none;
}

#footer.vz-pat .footer-bottom .copyright {
  order: 1;
  width: auto;
  text-align: left;
  color: var(--pat-tlumeny);
}

#footer.vz-pat .footer-bottom #signature {
  order: 2;
  width: auto;
}

#footer.vz-pat .footer-bottom a,
#footer.vz-pat .footer-bottom strong {
  color: var(--pat-tlumeny);
}

@media (max-width: 767px) {
  #footer.vz-pat .footer-rows {
    padding: 26px var(--okraj-m) 10px;
  }

  #footer.vz-pat .footer-rows .custom-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  #footer.vz-pat .custom-footer h3,
  #footer.vz-pat .custom-footer h4 {
    margin-bottom: 10px;
    font-size: 14px;
  }

  #footer .vz-pat-znacka img {
    width: 160px;
  }

  #footer .vz-pat-znacka img[src*="logo-huro"] {
    width: 125px;
  }

  #footer .vz-pat-znacka p {
    margin: 10px 0 12px;
    font-size: 14px;
  }

  #footer .vz-pat-site {
    gap: 6px;
  }

  #footer .vz-pat-site a {
    height: 32px;
  }

  #footer .vz-pat-odkazy ul {
    gap: 8px 16px;
  }

  #footer .vz-pat-odkazy a {
    font-size: 13px;
  }

  #footer .vz-pat-sl--kontakt ul {
    gap: 10px;
  }

  #footer .vz-pat-sl--kontakt li {
    font-size: 14px;
  }

  #footer .vz-pat-doba {
    font-size: 12px;
  }

  #footer.vz-pat .footer-bottom > .container {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px var(--okraj-m) 24px;
    font-size: 12px;
  }
}


/* ==========================================================
   DETAIL PRODUKTU (převzato z vlnenezbozi.css, záloha 2. 10. 2026)
   ========================================================== */

/* ----------------------------------------------------------
   DETAIL PRODUKTU – GALERIE GRID 2×2 (+ video)
   Aktivní jen když JS přidá body.vzg-on → bez JS zůstane
   původní galerie Shoptetu.
   ---------------------------------------------------------- */

/* Jen desktop (od 768 px). Na mobilu zůstává původní galerie Jupiteru. */

/* skrytí původní galerie (levý sloupec náhledů + hlavní obrázek) */
@media (min-width: 768px) {
  .vzg-on .p-thumbs-wrapper,
  .vzg-on .p-image-wrapper .p-thumbnails-wrapper,
  .vzg-on .p-image #wrap {
    display: none !important;
  }

  .vzg-on .p-image {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* mobil: náš grid schovat */
@media (max-width: 767px) {
  .vzg {
    display: none !important;
  }
}

.vzg {
  --vzg-gap: 16px;
  --vzg-fit: cover;            /* contain = celé foto bez ořezu */
  --vzg-border: #e6e6e6;
  --vzg-btn-bg: #3e4f64;
  --vzg-btn-text: #fff;
  width: 100%;
}

.vzg__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vzg-gap);
}

.vzg[data-count="1"] .vzg__grid {
  grid-template-columns: 1fr;
}

.vzg .vzg__cell {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--vzg-border);
  background: #fff;
  cursor: zoom-in;
}

.vzg .vzg__cell img,
.vzg .vzg__cell video,
.vzg .vzg__cell iframe {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: var(--vzg-fit);
  display: block;
  border: 0;
  margin: 0;
}

.vzg .vzg__cell--video {
  cursor: pointer;
  background: #000;
}

/* skrytí nativního ovládání i v Safari */
.vzg .vzg__cell--video video::-webkit-media-controls {
  display: none !important;
}

.vzg .vzg__cell--video video {
  object-fit: cover;
}

.vzg .vzg__cell--hidden {
  display: none !important;
}

.vzg .vzg__cell:focus-visible,
.vzg__more:focus-visible {
  outline: 2px solid var(--vzg-btn-bg);
  outline-offset: 2px;
}

.vzg__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: var(--vzg-gap) 0 0;
  padding: 12px 16px;
  background: var(--vzg-btn-bg);
  border: 0;
  border-radius: 0;
  color: var(--vzg-btn-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
}

.vzg__more:hover {
  filter: brightness(1.12);
}

.vzg__more svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}


/* ----------------------------------------------------------
   DETAIL PRODUKTU – STICKY PRAVÝ SLOUPEC
   Zapne JS (body.vzg-sticky) po kliknutí na „+N další“.
   Zastaví se na konci .p-detail-inner (nad taby).
   ---------------------------------------------------------- */
@media (min-width: 768px) {
  /* overflow-x: hidden na .overall-wrapper z něj dělá scroll kontejner
     a sticky pak nefunguje → clip ořízne stejně, ale sticky nerozbije */
  .vzg-sticky .overall-wrapper {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .vzg-sticky .p-detail-inner .p-data-wrapper {
    position: sticky;
    top: var(--vzg-sticky-top, 20px);
    align-self: flex-start;
  }
}


/* ----------------------------------------------------------
   JUPITER STICKY HLAVIČKA – jen hlavní foto vlevo
   ---------------------------------------------------------- */
.fix-detail-header .left .vzg-fixhead-img {
  display: block;
  width: 100%;
  height: 60px;
  max-width: 100%;
  object-fit: contain;
}


/* ==========================================================
   DETAIL PRODUKTU – PŘESTAVBA (zadání 02-detail-produktu.md)
   Spuštěno 13. 10. 2026 (02, krok 23), dřív jen v náhledu: pravidla pod
   html.vz-detail (třídu vz-detail dává vz.js jen na detailu).
   Formulář vždy .p-detail-inner #product-detail-form.
   ========================================================== */

/* ---------- krok 4: rozvržení (manuál 04 › Mřížka a Responzivita) ---------- */
@media (min-width: 1200px) {
  html.vz-detail .p-detail-inner {
    column-gap: 40px;
  }

  html.vz-detail .p-detail-inner .p-image-wrapper {
    flex: 0 0 calc((100% - 40px) * .6);
    max-width: none;
    padding: 0;
  }

  html.vz-detail .p-detail-inner .p-data-wrapper {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
}

/* od okna 1 440: galerie 790, mezera 40, sloupec 530 */
@media (min-width: 1440px) {
  html.vz-detail .p-detail-inner .p-image-wrapper {
    flex: 0 0 790px;
  }

  html.vz-detail .p-detail-inner .p-data-wrapper {
    flex: 1 1 530px;
  }
}

/* název 18 px pod drobečky jako v maketě (dnes margin-bottom 48 px) */
html.vz-detail .breadcrumbs {
  margin-bottom: 18px;
}

/* tři skupiny se svislou mezerou 10 px a linkou mezi nimi (07 › Sloupec nákupu) */
html.vz-detail .p-detail-inner .vz-skupina {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

html.vz-detail .p-detail-inner .vz-skupina--1 {
  padding-top: 0;
  border-top: 0;
}

html.vz-detail .p-detail-inner .vz-skupina--3:empty {
  display: none;
}

/* ---------- krok 5: skupina 1 ---------- */
/* display nechat Jupiteru: na telefonu hlavičku sloupce skrývá a ukazuje kopii nad fotkou */
html.vz-detail .p-detail-inner .p-detail-inner-header {
  margin: 0;
}

html.vz-detail .p-detail-inner .p-detail-inner-header > * + * {
  margin-top: 10px;
}

html.vz-detail .p-detail-inner .p-detail-inner-header h1,
html.vz-detail .p-detail-inner-header-mobile .h1 {
  margin: 0;
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ink);
}

html.vz-detail .p-detail-inner .p-detail-inner-header .ratings-and-brand {
  display: none;
}

/* pilulka hodnocení (07 › Odznak hodnocení, produkt) */
html.vz-detail .vz-hodnoceni {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 3px 14px 3px 3px;
  border-radius: var(--r-pill);
  background: var(--vlna);
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

html.vz-detail .vz-hodnoceni .vz-medaile {
  width: 30px;
  height: 30px;
  font-size: 13px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}

html.vz-detail .vz-hodnoceni .vz-hvezdy {
  font-size: 14px;
}

html.vz-detail .vz-hodnoceni b {
  font-weight: 700;
  color: var(--ink);
}

/* mobil (maketa moderni-mobil): menší pilulka bez podílu pěti hvězdiček */
@media (max-width: 767px) {
  html.vz-detail .vz-hodnoceni {
    gap: 8px;
    height: auto;
    padding: 3px 12px 3px 3px;
    font-size: 13px;
  }

  html.vz-detail .vz-hodnoceni .vz-medaile {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  html.vz-detail .vz-hodnoceni .vz-hvezdy {
    font-size: 12px;
  }

  html.vz-detail .vz-hodnoceni__tecka,
  html.vz-detail .vz-hodnoceni__pct {
    display: none;
  }
}

/* štítky u názvu (07 › Štítky na produktu) */
html.vz-detail .vz-stitky {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

html.vz-detail .vz-stitek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: var(--r-stitek);
  font-size: 13px;
  font-weight: 600;
}

html.vz-detail .vz-stitek svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.vz-detail .vz-stitek--akce {
  background: var(--sale-soft);
  color: var(--sale);
}

html.vz-detail .vz-stitek--novinka {
  background: var(--novinka);
  color: var(--ink);
}

html.vz-detail .vz-stitek--video {
  background: var(--mlha);
  color: var(--action);
}

/* Jupiter dává krátkému popisu (i vnořeným blokům se stejnou třídou) spodní linku */
html.vz-detail .p-detail-inner .p-short-description,
html.vz-detail .p-detail-inner .p-short-description .p-short-description {
  padding: 0;
  border: 0;
}

html.vz-detail .p-detail-inner .p-short-description {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

html.vz-detail .p-detail-inner .p-short-description p {
  margin: 0;
}

html.vz-detail .p-detail-inner .p-short-description a.vice {
  display: none;
}

/* ---------- krok 6: výběr velikosti ---------- */
/* nativní select zůstává v DOM (odesílá velikost), jen se skryje */
html.vz-detail .vz-velikosti + .p-variants-block {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html.vz-detail .vz-velikosti__hl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

html.vz-detail .vz-velikosti__nadpis {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

html.vz-detail .vz-velikosti__tabulka {
  font-size: 15px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html.vz-detail .vz-velikosti__mrizka {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

html.vz-detail .vz-velikost {
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-control);
  border-radius: var(--r-volba);
  background: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

html.vz-detail .vz-velikost:hover {
  border-color: var(--ink);
}

html.vz-detail .vz-velikost[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  font-weight: 700;
}

/* vyprodaná: §9 bod 19, do rozhodnutí var(--line) místo #EEEEEE z makety */
html.vz-detail .vz-velikost[aria-disabled="true"] {
  border-color: var(--line);
  color: var(--faint);
  text-decoration: line-through;
  cursor: default;
}

html.vz-detail .vz-velikosti__chyba {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink);
}

html.vz-detail .vz-velikosti__chyba:empty {
  display: none;
}

/* ---------- krok 7: cena ---------- */
/* dlaždice a cena pod sebou s mezerou 18 px; ne gap: ve formuláři jsou řádkové
   span[itemprop] s mikrodaty, flex by mezi ně dal mezery */
html.vz-detail .p-detail-inner #product-detail-form .vz-velikosti + .p-variants-block + .p-to-cart-block,
html.vz-detail .p-detail-inner #product-detail-form .vz-velikosti ~ .p-to-cart-block {
  margin-top: 18px;
}

html.vz-detail .p-detail-inner #product-detail-form .p-variants-block:not(:has(select)) {
  display: none;
}

html.vz-detail .p-detail-inner #product-detail-form .p-to-cart-block {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

html.vz-detail .p-detail-inner #product-detail-form .p-final-price-wrapper {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 4px;
  padding: 0;
  text-align: left;
}

html.vz-detail .p-final-price-wrapper > .price-standard,
html.vz-detail .p-final-price-wrapper > .price-save,
html.vz-detail .p-final-price-wrapper > .price-additional,
html.vz-detail .p-final-price-wrapper > .price-measure,
html.vz-detail .p-final-price-wrapper .pr-list-unit {
  display: none;
}

html.vz-detail .vz-cena {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

html.vz-detail .vz-cena .price-final,
html.vz-detail .vz-cena .price-final-holder {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}

html.vz-detail .vz-sleva .vz-cena .price-final,
html.vz-detail .vz-sleva .vz-cena .price-final-holder {
  color: var(--sale);
}

html.vz-detail .vz-usetrite {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--sale-soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--sale);
}

html.vz-detail .vz-dph {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

html.vz-detail .vz-dph:empty {
  display: none;
}

html.vz-detail .vz-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--faint);
  border-radius: 50%;
  background: none;
  cursor: help;
}

html.vz-detail .vz-info__i {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}

/* vysvětlivka klepnutím i najetím (07 › Cena, návrh) */
html.vz-detail .vz-info__bublina {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 5;
  display: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  transform: translateX(-50%);
}

html.vz-detail .vz-info:hover .vz-info__bublina,
html.vz-detail .vz-info:focus-visible .vz-info__bublina,
html.vz-detail .vz-info[aria-expanded="true"] .vz-info__bublina {
  display: block;
}

/* ---------- krok 9: množství a tlačítko (07 › Tlačítka) ---------- */
html.vz-detail .p-detail-inner #product-detail-form .add-to-cart {
  grid-column: 1;
  justify-self: start;
  width: 120px;
  margin: 0;
}

html.vz-detail .p-detail-inner #product-detail-form .quantity {
  width: 120px;
  height: 56px;
  border: 1px solid var(--line-control);
  border-radius: var(--r-tlacitko);
  background: var(--white);
}

html.vz-detail .p-detail-inner #product-detail-form .quantity input {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

html.vz-detail .p-detail-inner #product-detail-form .quantity button {
  background: none;
  font-size: 20px;
  color: var(--muted);
}

html.vz-detail .p-detail-inner #product-detail-form .add-to-cart-button {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-tlacitko);
  background: var(--buy);
  box-shadow: 0 8px 20px rgba(47, 107, 79, .28);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--white);
  transition: background .15s;
}

html.vz-detail .p-detail-inner #product-detail-form .add-to-cart-button:hover {
  background: var(--buy-hover);
}

/* Jupiter (CZ): .cs .add-to-cart-button span{font-size:0 !important} a span::after{content:"Koupit"} */
html.vz-detail .p-detail-inner #product-detail-form .add-to-cart-button .vz-tl-text {
  font-size: 16px !important;
  letter-spacing: normal;
}

html.vz-detail .p-detail-inner #product-detail-form .add-to-cart-button .vz-tl-text::after {
  content: none;
}

html.vz-detail .p-detail-inner #product-detail-form .add-to-cart-button svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- krok 10: dostupnost a datum doručení ---------- */
html.vz-detail .p-detail-inner #product-detail-form .shipping-options-layout {
  display: none;
}

html.vz-detail .vz-dostupnost {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 15px;
  color: var(--ink);
}

html.vz-detail .vz-dostupnost__pred {
  color: var(--text);
}

html.vz-detail .vz-dostupnost__stav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}

html.vz-detail .vz-dostupnost__stav--ok {
  color: var(--ok);
}

html.vz-detail .vz-dostupnost__stav--ok::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

html.vz-detail .vz-dostupnost__datum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html.vz-detail .vz-dostupnost__datum b {
  font-weight: 700;
}

/* ---------- krok 11: doprava a výhody ---------- */
html.vz-detail .vz-doruceni,
html.vz-detail .vz-vyhody {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}

html.vz-detail .vz-doruceni__zpusoby {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

html.vz-detail .vz-doruceni__zpusoby div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

html.vz-detail .vz-doruceni__zpusoby b {
  margin-left: auto;
  padding-left: 12px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink);
}

html.vz-detail .vz-doruceni__zdarma {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

html.vz-detail .vz-doruceni__odkaz,
html.vz-detail .vz-vyhody a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html.vz-detail .vz-doruceni__odkaz {
  font-weight: 600;
}

html.vz-detail .vz-vyhody span {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: var(--ink);
}

html.vz-detail .vz-skupina svg {
  flex: none;
}

html.vz-detail .vz-dostupnost__datum svg,
html.vz-detail .vz-doruceni svg,
html.vz-detail .vz-vyhody svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* pruh Jupiteru (.fix-detail-header) s kopií formuláře a záložek skrýt i na desktopu
   (§9 bod 7, rozhodnuto 13. 10. 2026: maketa ho nemá, nákupní sloupec je nahoře) */
html.vz-detail body.type-detail .fix-detail-header {
  display: none !important;
}

/* ---------- krok 12: galerie ---------- */
html.vz-detail .vzg {
  --vzg-gap: 8px;
  --vzg-fit: contain;
  --vzg-border: var(--line);
}

html.vz-detail .vzg__grid {
  align-content: start;
}

html.vz-detail .vzg .vzg__cell {
  border-radius: var(--r-tlacitko);
  background: var(--white);
}

/* štítky z příznaků na fotce skrýt, zůstává jen sleva v rohu první dlaždice */
html.vz-detail .p-detail-inner .p-image-wrapper .flags-default,
html.vz-detail .p-detail-inner .p-image-wrapper .flags-extra {
  display: none;
}

html.vz-detail .vz-foto-sleva {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--sale);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}

html.vz-detail .vzg__more {
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line-control);
  border-radius: var(--r-volba);
  background: var(--white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

html.vz-detail .vzg__more:hover {
  filter: none;
  border-color: var(--ink);
}

html.vz-detail .vzg__more svg {
  width: 18px;
  height: 18px;
}

/* ---------- krok 13: podobné produkty (08 › Pás podobných) ---------- */
html.vz-detail.vz-ma-podobne .products-alternative-wrapper,
html.vz-detail .p-detail-tabs-wrapper .vz-zal-skryt {
  display: none !important;
}

html.vz-detail .vz-podobne {
  position: relative;
  margin: 32px 0 0;
  padding: 28px 0 30px;
}

/* horní linka přes celou šířku okna */
html.vz-detail .vz-podobne::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  border-top: 1px solid var(--line);
  transform: translateX(-50%);
}

html.vz-detail .vz-podobne__hl {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 20px;
}

html.vz-detail .vz-podobne__hl h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ink);
}

html.vz-detail .vz-podobne__vse {
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html.vz-detail .vz-podobne__rada {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

html.vz-detail .vz-pkarta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-karta);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
}

html.vz-detail .vz-pkarta:hover {
  border-color: var(--line-control);
}

html.vz-detail .vz-pkarta img {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: var(--r-pole);
  object-fit: contain;
}

html.vz-detail .vz-pkarta__txt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

html.vz-detail .vz-pkarta__nazev {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

html.vz-detail .vz-pkarta__cena {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

html.vz-detail .vz-pkarta__cena b {
  font-size: 16px;
  font-weight: 800;
}

html.vz-detail .vz-pkarta__cena b.vz-sleva {
  color: var(--sale);
}

html.vz-detail .vz-pkarta__cena s {
  font-size: 13px;
  color: var(--muted);
}

/* ---------- krok 14: pás záložek a sekce (07 › Záložky detailu) ---------- */
@media (min-width: 768px) {
  html.vz-detail .p-detail-tabs-wrapper .shp-tabs-row {
    position: relative;
    z-index: 0; /* vlastní vrstva: plocha ::before (z-index -1) zůstane nad pozadím stránky */
    margin: 10px 0 34px;
    padding: 8px 0;
  }

  /* plocha vlna přes celou šířku okna */
  html.vz-detail .p-detail-tabs-wrapper .shp-tabs-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    z-index: -1;
    width: 100vw;
    background: var(--vlna);
    transform: translateX(-50%);
  }

  html.vz-detail .vz-zalozky {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  html.vz-detail .vz-zalozky > li {
    flex: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  html.vz-detail .vz-zalozky > li > a.shp-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 18px;
    border: 0;
    border-radius: var(--r-pole);
    background: none;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    color: var(--text);
  }

  html.vz-detail .vz-zalozky > li > a.shp-tab-link::before,
  html.vz-detail .vz-zalozky > li > a.shp-tab-link::after {
    display: none;
  }

  html.vz-detail .vz-zalozky > li.active > a.shp-tab-link {
    background: var(--white);
    box-shadow: 0 1px 2px rgba(22, 25, 29, .06), 0 6px 16px rgba(22, 25, 29, .07);
    color: var(--ink);
  }

  html.vz-detail .vz-zalozky svg {
    flex: none;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html.vz-detail .vz-zalozky a[href="#ratingTab"] svg {
    fill: var(--med);
    stroke: var(--med);
  }

  html.vz-detail .vz-zalozky b {
    font-weight: 700;
    color: var(--ink);
  }

  html.vz-detail .vz-zalozky em {
    padding: 1px 8px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .75);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
  }

  /* sekce pod pásem: Jupiter je na desktopu skládá pod sebe */
  html.vz-detail .p-detail-tabs-wrapper .tab-pane {
    padding: 48px 0;
    border-top: 1px solid var(--line);
  }

  html.vz-detail .p-detail-tabs-wrapper #description {
    padding-top: 0;
    border-top: 0;
  }

  html.vz-detail .p-detail-tabs-wrapper .tab-pane > h2,
  html.vz-detail .p-detail-tabs-wrapper #extendedDescription h2 {
    margin: 0 0 22px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--ink);
  }
}

/* nadpis „Popis produktu“ nad popisem (šablona popisu, zadání 03) jen pro čtečky:
   název sekce nese pás záložek */
html.vz-detail #description h2.popis-nadpis {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Související soubory (PDF) v maketě nejsou (§9 bod 16) */
html.vz-detail .p-detail-tabs-wrapper #relatedFiles,
html.vz-detail .p-detail-tabs-wrapper .rate-wrapper-in-description,
html.vz-detail .vz-par-skryt {
  display: none !important;
}

/* ---------- krok 16: parametry ve dvou sloupcích ---------- */
html.vz-detail .vz-parametry,
html.vz-detail .vz-parametry tbody {
  display: block;
  width: 100%;
}

html.vz-detail .vz-parametry tbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
}

html.vz-detail .vz-parametry tr,
html.vz-detail .vz-parametry tr:nth-child(n) {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-size: 15px;
}

html.vz-detail .vz-parametry th,
html.vz-detail .vz-parametry td {
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

html.vz-detail .vz-parametry th {
  color: var(--muted);
  white-space: nowrap;
}

html.vz-detail .vz-parametry th .row-header-label-colon {
  display: none;
}

html.vz-detail .vz-parametry td,
html.vz-detail .vz-parametry td a {
  font-weight: 600;
  text-align: right;
  color: var(--ink);
}

/* pořadí řádků jako v maketě (desktop plní mřížku po řádcích) */
html.vz-detail .vz-parametry tr { order: 10; }
html.vz-detail .vz-parametry tr[data-vz-par="Pohlaví"] { order: 1; }
html.vz-detail .vz-parametry tr[data-vz-par="Svršek"] { order: 2; }
html.vz-detail .vz-parametry tr[data-vz-par="Kategorie"] { order: 3; }
html.vz-detail .vz-parametry tr[data-vz-par="Podšívka a stélka"] { order: 4; }
html.vz-detail .vz-parametry tr[data-vz-par="Dostupné velikosti"] { order: 5; }
html.vz-detail .vz-parametry tr[data-vz-par="Podešev"] { order: 6; }

@media (max-width: 767px) {
  html.vz-detail .vz-parametry tbody {
    grid-template-columns: 1fr;
  }

  html.vz-detail .vz-parametry tr[data-vz-par="Kategorie"] { order: 2; }
  html.vz-detail .vz-parametry tr[data-vz-par="Svršek"] { order: 3; }
  html.vz-detail .vz-parametry tr[data-vz-par="Podešev"] { order: 5; }
  html.vz-detail .vz-parametry tr[data-vz-par="Dostupné velikosti"] { order: 6; }
}

/* ---------- krok 17: video (náhled, přehrání na YouTube) ---------- */
html.vz-detail .vz-video {
  position: relative;
  display: block;
  max-width: 860px;
  overflow: hidden;
  border-radius: var(--r-karta);
}

html.vz-detail .vz-video img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

html.vz-detail .vz-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
}

html.vz-detail .vz-video__play::after {
  content: "";
  margin-left: 6px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 24px solid var(--ink);
}

html.vz-detail .vz-video__pozn {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- mobil: podobné a video (§4) ---------- */
@media (max-width: 767px) {
  html.vz-detail .vz-podobne {
    margin-top: 16px;
    padding: 24px 0;
  }

  html.vz-detail .vz-podobne__vse {
    margin-left: 0;
    font-size: 14px;
  }

  /* vodorovný pás s přichycením karet (04 › Responzivita) */
  html.vz-detail .vz-podobne__rada {
    display: flex;
    gap: 12px;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
  }

  html.vz-detail .vz-podobne__rada::-webkit-scrollbar {
    display: none;
  }

  html.vz-detail .vz-pkarta {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  html.vz-detail .vz-pkarta img {
    width: 72px;
    height: 72px;
  }

  html.vz-detail .vz-video {
    border-radius: var(--r-tlacitko);
  }

  html.vz-detail .vz-video__play {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
  }

  html.vz-detail .vz-video__play::after {
    border-top-width: 11px;
    border-bottom-width: 11px;
    border-left-width: 18px;
  }
}

/* galerie: hlavní (produktová) fotka celá, ostatní (interiér) vyplní dlaždici (§4 › Galerie) */
html.vz-detail .vzg .vzg__cell:not(:first-child) img {
  object-fit: cover;
}

/* ---------- krok 21: mobilní plovoucí lišta ---------- */
#vz-lista {
  display: none;
}

@media (max-width: 767px) {
  html.vz-detail body.type-detail {
    padding-bottom: 96px;
  }

  html.vz-detail #vz-lista {
    position: fixed;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 64px;
    padding: 8px 8px 8px 14px;
    border-radius: var(--r-karta);
    background: var(--white);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
    transform: translateY(140%);
    transition: transform .25s;
  }

  html.vz-detail #vz-lista.vz-lista--videt {
    transform: none;
  }

  html.vz-detail .vz-lista__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  html.vz-detail .vz-lista__cena {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
    white-space: nowrap;
  }

  html.vz-detail .vz-lista__cena.vz-sleva {
    color: var(--sale);
  }

  html.vz-detail .vz-lista__pod {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
  }

  html.vz-detail .vz-lista__tl {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    margin-left: auto;
    padding: 0 16px;
    border: 0;
    border-radius: var(--r-volba);
    background: var(--buy);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    cursor: pointer;
  }

  html.vz-detail .vz-lista__tl svg {
    flex: none;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: var(--white);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* ---------- krok 18: hodnocení produktu (08 › Recenze) ---------- */
/* blok recenzí obchodu pod hodnocením produktu (div.hodnoceni, vlastní skript) v maketě
   není; skrytý (§9 bod 9, rozhodnuto 13. 10. 2026) */
html.vz-detail .p-detail > .hodnoceni {
  display: none;
}

@media (min-width: 768px) {
  html.vz-detail #ratingTab.vz-hodnoceni-sekce {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }

  html.vz-detail #ratingTab.vz-hodnoceni-sekce > h2 {
    grid-column: 1 / -1;
  }

  html.vz-detail #ratingTab.vz-hodnoceni-sekce > #ratingWrapper {
    grid-column: 1;
    grid-row: 2 / span 2;
    width: auto;
    max-width: none;
  }

  html.vz-detail #ratingTab.vz-hodnoceni-sekce > :not(h2):not(#ratingWrapper) {
    grid-column: 2;
  }

  /* řádky mřížky výslovně: nadpis · souhrn | seznam · odkaz pod seznamem */
  html.vz-detail #ratingTab.vz-hodnoceni-sekce > h2 { grid-row: 1; }
  html.vz-detail #ratingTab.vz-hodnoceni-sekce > #ratingsList { grid-row: 2; }
  html.vz-detail #ratingTab.vz-hodnoceni-sekce > .vz-recenze-vse,
  html.vz-detail #ratingTab.vz-hodnoceni-sekce > .listingControls { grid-row: 3; }
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce #ratingWrapper {
  margin: 0;
  padding: 22px;
  border-radius: var(--r-karta);
  background: var(--vlna) !important;
}

/* Jupiter vkládá do souhrnu vlastní nadpis s počtem; nad mřížkou je nadpis sekce */
html.vz-detail #ratingTab.vz-hodnoceni-sekce #ratingWrapper > h2 {
  display: none;
}

/* Jupiterova ikona postavy 48 px (.vote-wrap::before) místo iniciál */
html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-wrap::before {
  display: none;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce > h2 {
  display: block !important;
}

/* řádek rozložení: „5 ★“ | pruh | počet (Jupiter číslo skrývá a kreslí dvě hvězdy) */
html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-star {
  flex: 0 0 34px;
  width: 34px;
  height: auto;
  margin: 0;
  white-space: nowrap;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-star::before,
html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-star::after,
html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-star .star {
  display: none;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-value {
  display: inline;
  font-size: 13px;
  color: var(--text);
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-value::after {
  content: "\00a0\2605";
  color: var(--med);
}

/* kolečko s iniciálou místo avataru */
html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-pic {
  display: block !important;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-initials {
  display: flex !important;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* pořadí v kartě: průměr, rozložení hvězdiček, tlačítko */
html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-average-wrap {
  display: contents;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .votes { order: 2; }
html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-form-trigger { order: 3; }

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-average-inner {
  order: 1;
  margin: 0;
  padding: 0;
  background: none;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  text-align: left;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-average {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: 1 / span 3;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--med);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-star-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .stars-label {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

html.vz-detail .vz-souhrn-pct {
  font-size: 13px;
  color: var(--text);
}

/* rozložení hvězdiček: 34 px | pruh | 24 px */
html.vz-detail #ratingTab.vz-hodnoceni-sekce .votes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--text);
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-list .rate-star {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* místo vpravo pro počet; Jupiter/Shoptet kreslí pod blok vlastní dráhu */
html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-block {
  display: block;
  flex: 1 1 auto;
  margin: 0;
  padding-right: 32px;
  background: none;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-bar {
  position: relative;
  display: block;
  width: auto !important; /* Jupiter dává pruhu šířku podle procenta, výplň kreslí ::before */
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(22, 25, 29, .08);
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rate-bar-width, 0);
  border-radius: inherit;
  background: var(--med);
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-bar::after {
  display: none;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-count {
  position: absolute;
  top: 50%;
  right: -32px;
  display: block;
  width: 24px;
  transform: translateY(-50%);
  text-align: right;
  font-size: 13px;
  color: var(--text);
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-form-trigger {
  margin: 4px 0 0;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .rate-form-trigger .btn {
  width: 100%;
  height: 46px;
  border: 1px solid var(--ink);
  border-radius: var(--r-volba);
  background: var(--white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

/* seznam recenzí */
html.vz-detail #ratingTab.vz-hodnoceni-sekce #ratingsList .vote-wrap {
  margin: 0;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce #ratingsList .vote-wrap:first-child {
  padding-top: 0;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-header {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-pic {
  position: static;
  flex: 0 0 32px;
  width: 32px !important;
  min-width: 0 !important;
  height: 32px !important;
  margin: 0;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-pic::before,
html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-pic::after {
  display: none;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-pic img {
  display: none;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-initials {
  position: static;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-summary {
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-rating {
  display: contents;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-time {
  order: 2;
  display: inline;
  width: auto;
  font-size: 13px;
  color: var(--muted);
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-rating .stars {
  order: 3;
  margin-left: auto;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-delimeter {
  display: none;
}

html.vz-detail #ratingTab.vz-hodnoceni-sekce .vote-content {
  margin: 8px 0 0 42px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

html.vz-detail #ratingTab.vz-recenze-zkracene .vz-recenze-dalsi,
html.vz-detail #ratingTab.vz-recenze-zkracene .listingControls,
html.vz-detail #ratingTab.vz-recenze-zkracene .all-votes {
  display: none;
}

html.vz-detail .vz-recenze-vse {
  grid-column: 2;
  justify-self: start;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- krok 19: související produkty ---------- */
html.vz-detail .vz-ma-souv > .products,
html.vz-detail .vz-ma-souv > .product-slider-pagination,
html.vz-detail .vz-ma-souv > .product-slider-navigation {
  display: none !important;
}

html.vz-detail .p-detail .products-related-wrapper.vz-ma-souv {
  width: auto;
  margin: 0;
  padding: 48px 0;
  border-top: 1px solid var(--line);
}

html.vz-detail .vz-ma-souv .products-related-header {
  margin: 0 0 22px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-align: left;
  color: var(--ink);
}

html.vz-detail .vz-souv__pod {
  margin: -14px 0 20px;
  font-size: 15px;
  color: var(--muted);
}

html.vz-detail .vz-souv {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

html.vz-detail .vz-souv__karta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

html.vz-detail .vz-souv__foto {
  display: block;
  margin-bottom: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-tlacitko);
  background: var(--white);
}

html.vz-detail .vz-souv__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

html.vz-detail .vz-souv__nazev {
  display: -webkit-box;
  min-height: 2.7em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}

html.vz-detail .vz-souv__cena {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

html.vz-detail .vz-souv__cena b {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}

html.vz-detail .vz-souv__cena b.vz-sleva {
  color: var(--sale);
}

html.vz-detail .vz-souv__cena s {
  font-size: 13px;
  color: var(--muted);
}

html.vz-detail .vz-souv__dost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

html.vz-detail .vz-souv__dost--ok {
  color: var(--ok);
}

html.vz-detail .vz-souv__dost--ok::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

html.vz-detail .vz-souv__tl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin-top: auto;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: var(--r-volba);
  background: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

html.vz-detail .vz-souv__tl--koupit {
  border-color: var(--buy);
  background: var(--buy);
  color: var(--white);
}

html.vz-detail .vz-souv__tl--koupit:hover {
  background: var(--buy-hover);
}

html.vz-detail .vz-souv__tl svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  html.vz-detail .p-detail .products-related-wrapper.vz-ma-souv {
    padding: 30px 0;
  }

  html.vz-detail .vz-souv__pod {
    margin-bottom: 16px;
    font-size: 13px;
  }

  html.vz-detail .vz-souv {
    display: flex;
    gap: 14px;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
  }

  html.vz-detail .vz-souv::-webkit-scrollbar {
    display: none;
  }

  html.vz-detail .vz-souv__karta {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
}

/* ---------- §4 mobil detailu ---------- */
#vz-zalozky,
.vz-sek-h-m {
  display: none;
}

/* sekce pod záložkami: po skoku nadpis pod lepicími lištami (desktop nic nelepí) */
html.vz-detail .p-detail-tabs-wrapper .tab-pane,
html.vz-detail .p-detail .products-related-wrapper {
  scroll-margin-top: 16px;
}

@media (max-width: 767px) {
  /* lepicí pás záložek pod hlavičkou 58 px (07 › Mobilní lepicí lišty) */
  html.vz-detail #vz-zalozky {
    position: sticky;
    top: 58px;
    z-index: 15;
    display: block;
    margin: 0 -16px;
    background: var(--vlna);
  }

  html.vz-detail #vz-zalozky .vz-zal-pas {
    position: relative;
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html.vz-detail #vz-zalozky .vz-zal-pas::-webkit-scrollbar {
    display: none;
  }

  /* přechod do medové na kraji, kam pás pokračuje */
  html.vz-detail #vz-zalozky::before,
  html.vz-detail #vz-zalozky::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 48px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
  }

  html.vz-detail #vz-zalozky::before {
    left: 0;
    background: linear-gradient(to left, rgba(251, 243, 227, 0), var(--vlna) 70%);
  }

  html.vz-detail #vz-zalozky::after {
    right: 0;
    background: linear-gradient(to right, rgba(251, 243, 227, 0), var(--vlna) 70%);
  }

  html.vz-detail #vz-zalozky.vz-dal-vlevo::before,
  html.vz-detail #vz-zalozky.vz-dal-vpravo::after {
    opacity: 1;
  }

  html.vz-detail #vz-zalozky a {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--r-pole);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--text);
  }

  html.vz-detail #vz-zalozky a.vz-aktivni {
    background: var(--white);
    box-shadow: 0 1px 2px rgba(22, 25, 29, .06), 0 6px 16px rgba(22, 25, 29, .07);
    color: var(--ink);
  }

  html.vz-detail #vz-zalozky svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html.vz-detail #vz-zalozky a[href="#ratingTab"] svg {
    fill: var(--med);
    stroke: var(--med);
  }

  html.vz-detail #vz-zalozky b {
    font-weight: 700;
    color: var(--ink);
  }

  /* telefon (body.mobile): akordeon Shoptetu otevřít celý, hlavičky skrýt, navigace je pás */
  html.vz-detail body.mobile .p-detail-tabs-wrapper .shp-accordion-content {
    display: block !important;
    height: auto !important;
  }

  html.vz-detail body.mobile .p-detail-tabs-wrapper .shp-accordion-link,
  html.vz-detail body.mobile .p-detail-tabs-wrapper .shp-accordion:has(> .shp-accordion-link[href="#relatedFiles"]) {
    display: none !important;
  }

  html.vz-detail body.mobile .p-detail-tabs-wrapper .shp-accordion {
    margin: 0;
    padding: 30px 0;
    border: 0;
    border-top: 1px solid var(--line);
    scroll-margin-top: 46px;
  }

  html.vz-detail body.mobile .p-detail-tabs-wrapper .shp-accordion:first-child,
  html.vz-detail body.mobile .p-detail-tabs-wrapper .shp-accordion:has(> .shp-accordion-link[href="#extendedDescription"]) {
    border-top: 0;
  }

  html.vz-detail body.mobile .p-detail-tabs-wrapper .shp-accordion .tab-pane {
    padding: 0;
    border: 0;
  }

  html.vz-detail body.mobile .p-detail-tabs-wrapper .shp-accordion-content .vz-sek-h-m {
    display: block;
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--ink);
  }

  /* Jupiterův řádek záložek s ☰ nahrazuje pás */
  html.vz-detail .p-detail-tabs-wrapper .shp-tabs-row {
    display: none;
  }

  /* hlavička 58 + pás 46 (html má scroll-padding-top 66 ze zadání 01) */
  html.vz-detail .p-detail-tabs-wrapper .tab-pane,
  html.vz-detail .p-detail .products-related-wrapper {
    scroll-margin-top: 46px;
  }

  /* sekce */
  html.vz-detail .p-detail-tabs-wrapper .tab-pane {
    padding: 30px 0;
    border-top: 1px solid var(--line);
  }

  html.vz-detail .p-detail-tabs-wrapper #description {
    border-top: 0;
  }

  html.vz-detail .p-detail-tabs-wrapper .tab-pane > h2,
  html.vz-detail .p-detail-tabs-wrapper #extendedDescription h2 {
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--ink);
  }

  html.vz-detail #extendedDescription .vz-sek-h-m {
    display: block;
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--ink);
  }

  /* název, hodnocení a štítky nad fotkou */
  html.vz-detail .p-detail-inner-header-mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }

  html.vz-detail .p-detail-inner-header-mobile .h1 {
    font-size: 22px;
    line-height: 1.2;
  }

  html.vz-detail .p-detail-inner-header-mobile .ratings-and-brand,
  html.vz-detail .p-detail-inner .p-detail-inner-header .vz-hodnoceni,
  html.vz-detail .p-detail-inner .p-detail-inner-header .vz-stitky {
    display: none;
  }

  html.vz-detail .vz-stitek {
    height: 24px;
    padding: 0 8px;
    gap: 5px;
    font-size: 12px;
  }

  html.vz-detail .vz-stitek svg {
    width: 12px;
    height: 12px;
  }

  html.vz-detail .p-detail-inner .p-short-description {
    font-size: 15px;
  }

  /* galerie: jedna fotka 1 : 1, contain, karta s linkou */
  html.vz-detail .p-detail-inner .p-image {
    position: relative;
  }

  html.vz-detail .p-detail-inner .p-image #wrap,
  html.vz-detail .p-detail-inner .p-image .p-main-image {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-karta);
    background: var(--white);
  }

  html.vz-detail .p-detail-inner .p-image .p-main-image {
    border: 0;
    border-radius: 0;
  }

  html.vz-detail .p-detail-inner .p-image .p-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  html.vz-detail .p-detail-inner .p-image .vz-foto-sleva {
    top: 10px;
    left: 10px;
    padding: 3px 8px;
  }

  /* náhledy: Jupiterova řada, jen zaoblení a aktivní rámeček */
  html.vz-detail .p-detail-inner .p-thumbnails a.p-thumbnail {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-volba);
  }

  html.vz-detail .p-detail-inner .p-thumbnails a.p-thumbnail.highlighted {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
  }

  /* skupina nákupu (§4) */
  html.vz-detail .p-detail-inner .vz-skupina {
    gap: 12px;
  }

  html.vz-detail .vz-velikosti__mrizka {
    gap: 5px;
  }

  html.vz-detail .vz-velikost {
    height: 44px;
    border-radius: var(--r-pole);
    font-size: 15px;
    font-weight: 400;
  }

  html.vz-detail .vz-cena .price-final,
  html.vz-detail .vz-cena .price-final-holder {
    font-size: 32px;
  }

  html.vz-detail .vz-usetrite {
    padding: 3px 8px;
  }

  html.vz-detail .p-detail-inner #product-detail-form .p-to-cart-block {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  html.vz-detail .p-detail-inner #product-detail-form .add-to-cart,
  html.vz-detail .p-detail-inner #product-detail-form .quantity {
    width: 104px;
  }

  html.vz-detail .p-detail-inner #product-detail-form .quantity {
    height: 52px;
    border-radius: var(--r-volba);
  }

  html.vz-detail .p-detail-inner #product-detail-form .quantity button {
    font-size: 18px;
  }

  html.vz-detail .p-detail-inner #product-detail-form .add-to-cart-button {
    height: 52px;
    border-radius: var(--r-volba);
    box-shadow: 0 8px 18px rgba(47, 107, 79, .26);
  }

  html.vz-detail .p-detail-inner #product-detail-form .add-to-cart-button svg {
    width: 21px;
    height: 21px;
  }

  html.vz-detail .vz-dostupnost {
    font-size: 14px;
  }

  /* skupina doručení (§4) */
  html.vz-detail .vz-doruceni,
  html.vz-detail .vz-vyhody {
    gap: 8px;
    font-size: 14px;
  }

  html.vz-detail .vz-doruceni__odkaz {
    font-size: 14px;
  }

  html.vz-detail .vz-dostupnost__datum svg,
  html.vz-detail .vz-doruceni svg,
  html.vz-detail .vz-vyhody svg {
    width: 19px;
    height: 19px;
  }
}