/* ==========================================================
   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;
  }

  /* 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)
   Jen v náhledu (html.vz-nahled) do rozhodnutí bodu 19 a §9 bod 6.
   Formulář Shoptetu (odeslání, souhlas, captcha) zůstává beze změny.
   ---------------------------------------------------------- */
html.vz-nahled #footer .custom-footer__newsletter {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--vlna);
}

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

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

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

html.vz-nahled #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;
}

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

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

html.vz-nahled #footer #formNewsletterWidget {
  width: auto;
  margin: 0;
  padding: 0;
}

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

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

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

html.vz-nahled #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) */
html.vz-nahled #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;
}

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

/* obálka 20 px jen v poli e-mailu (ne v poli captchy) */
html.vz-nahled #footer #formNewsletterWidget .form-control-wrapper:has(#newsletterWidget)::before {
  content: "";
  position: absolute;
  z-index: 1;
  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.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} */
html.vz-nahled #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);
}

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

html.vz-nahled #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) */
html.vz-nahled #footer #formNewsletterWidget .consents,
html.vz-nahled #footer #formNewsletterWidget .consents label {
  font-size: 12px;
  line-height: 1.45;
  color: var(--bridlice);
}

html.vz-nahled #footer #formNewsletterWidget > fieldset > .consents {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

  html.vz-nahled #footer #formNewsletterWidget .form-control-wrapper:has(#newsletterWidget)::before {
    width: 18px;
    height: 18px;
    margin-top: -9px;
  }
}


/* ----------------------------------------------------------
   PATIČKA (krok 18; manuál 08 › Patička, návrh) – jen v náhledu.
   Barvy jen přes proměnné --pat-*: rozhodnutí bodu 19 = změna tohoto bloku.
   ---------------------------------------------------------- */
html.vz-nahled #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) */
html.vz-nahled #footer.vz-pat .custom-footer > div:not(.vz-pat-sl),
html.vz-nahled #footer.vz-pat .custom-footer__contact {
  display: none !important;
}

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

/* .footer-rows je .container: plochu roztáhnout přes celou šířku okna */
html.vz-nahled #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);
}

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

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

/* sloupce bez Jupiterova mobilního akordeonu (max-height:70px, overflow, linka) */
html.vz-nahled #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);
}

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

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

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

/* titulky sloupců i ostatních prvků (platby, Heureka) na tmavé */
html.vz-nahled #footer.vz-pat .custom-footer h3,
html.vz-nahled #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 */
html.vz-nahled #footer .vz-pat-znacka img {
  display: block;
  width: 190px;
  height: auto;
}

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

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

html.vz-nahled #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 */
html.vz-nahled #footer .vz-pat-odkazy ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.vz-nahled #footer .vz-pat-odkazy li {
  margin: 0;
  padding: 0;
  border: 0;
}

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

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

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

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

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

html.vz-nahled #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;
}

html.vz-nahled #footer .vz-pat-tel::before { --ikona: var(--i-telefon); }
html.vz-nahled #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"); }
html.vz-nahled #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"); }

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

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

/* spodní řádek: © vlevo, Vytvořil Shoptet vpravo */
html.vz-nahled #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 */
html.vz-nahled #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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  html.vz-nahled #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;
}