/* ============================================================
   Ski & Cyklo centrum — DETAIL PRODUKTU (sloučený soubor, v4)
   Vzniklo sloučením 10 dílčích souborů — pořadí sekcí přesně
   odpovídá původnímu pořadí <link> tagů, kaskáda je identická.

   v4 — tlačítko Kompletní popis na střed (doplněk sekce 12)

   v3 — nová sekce 12 (bublina krátkého popisu, akční pilulky
   pod galerií; spolupracuje s detail-layout-1.js)

   v2 — nová sekce 11:
   - skrytí kódu produktu/varianty v hlavičce detailu
   - datum doručení bez přerušovaného podtržení
   - benefit karty pod galerií (svislý sloupec; přesouvá
     nakupni-zona.js, jen desktop)

   Obsah (v tomto pořadí):
   1)  payment-tiles-11      — splátkové karty HC/Essox/SkipPay/Twisto + modal
   2)  darky-produkt-1       — sekce „Zdarma od nás dostanete"
   3)  delivery-note-4       — blok Předpokládané doručení + přepis v košíku
   4)  produkt-ikony         — pilulky Tisk / Zeptat se / Hlídat / Sdílet
   5)  nakupni-zona-6        — rytmus zóny, dostupnost, stepper, košík…
                               (MUSÍ být až za darky a delivery-note)
   6)  sticky-lista-1        — plovoucí bublina s cenou na mobilu
   7)  benefit-bannery-2     — trust karty Autorizovaný prodejce / 14 dní…
   8)  souvisejici-produkty-1 — kompaktní cross-sell karty
   9)  detail-parametry-1    — restyl tabulky Doplňkové parametry
   10) product-detail-1      — řádek pod nadpisem (příznaky, hvězdy, značka)

   Pozn.: pravidla horní lišty, původně na konci payment-tiles,
   jsou přesunuta do global-1.css (patří tam logicky).
   ============================================================ */


/* ############################################################
   1) SPLÁTKOVÉ SLUŽBY — karty + modal
   (původně samostatný soubor: payment-tiles-11.css)
   ############################################################ */

/* Schování původních widgetů (klik zůstává funkční pro programové volání) */
#HcCalculater{
  position:absolute !important; width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  white-space:nowrap !important; border:0 !important; padding:0 !important; margin:0 !important;
}
#essoxPaymentsCalculate, #essoxSpreadedInstallment { display:none !important; }
.twistoPay.twistoProductDetailBanner { display:none !important; }
skip-pay-placement, sp-banner { display:none !important; }
#pmt-old, .legacy-payment-box { display:none !important; }

/* ============================================================
   Splátkové služby — malé karty
   Stejná kartičková řeč jako sekce dárků: bílá karta, šedý
   rámeček, radius 12, modrý rámeček na hoveru. Logo 20 px,
   název, drobný popisek (texty popisků generuje JS).
   ============================================================ */

#pmt {
  display: block;
  margin-top: 10px;
  font-family: inherit;
}

#pmt .pmt-g {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#pmt .pmt-i {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 11px 8px 10px;
  border: 1px solid #e4e7ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

#pmt .pmt-i:hover {
  transform: none;
  border-color: #2b7fd4;
  box-shadow: none;
}

#pmt .pmt-b {
  display: block;
  width: auto;
  height: 20px;
  margin: 0 0 6px;
}

/* Home Credit má bílé logo — potřebuje barevný čip, jinak zmizí */
#pmt .hc .pmt-b {
  height: 14px;
  padding: 4px 8px;
  background: #c03528;
  border-radius: 6px;
  box-sizing: content-box;
}

#pmt .pmt-l {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  color: #16191d;
  text-align: center;
}

/* Popisek — Kalkulačka splátek / Jak to funguje */
#pmt .pmt-s {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.3;
  color: #646e78;
  text-align: center;
}

/* Mobil */
@media (max-width: 700px) {
  #pmt .pmt-g {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Modal */
#pmt-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); z-index:999999; }
#pmt-modal.open { display:flex; }
#pmt-modal .pmt-modal-box { position:relative; max-width:min(92vw,980px); max-height:92vh;
  background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:auto; }
#pmt-modal img { display:block; max-width:100%; height:auto; }
#pmt-modal .pmt-modal-close { position:absolute; top:8px; right:10px; border:0; background:transparent;
  font-size:24px; line-height:1; cursor:pointer; }

/* Blokace kliků na pozadí (košík apod.) při otevřeném modalu */
body.modal-open { overflow:hidden; }
body.modal-open .add-to-cart,
body.modal-open .add-to-cart-button,
body.modal-open form[action*="cart"],
body.modal-open button[type="submit"] { pointer-events:none !important; }



/* ############################################################
   2) DÁRKY K PRODUKTU — Zdarma od nás dostanete
   (původně samostatný soubor: darky-produkt-1.css)
   ############################################################ */

/* ============================================================
   Ski & Cyklo centrum — Dárky k produktu
   Sekce „Zdarma od nás dostanete" (doplněk Dárky k objednávce
   a produktům) na detailu produktu.
   Barvy a rádiusy sladěné s design systémem popisů produktů.
   v2 — světle modrý podklad #eaf2fb, zvýrazněná hodnota služby
   ============================================================ */

.p-gifts-wrapper {
    margin: 24px 0;
    padding: clamp(16px, 2.6vw, 20px);
    background: #eaf2fb;
    border-radius: 14px;
}

.p-gifts-heading {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1c5a99;
    margin-bottom: 12px;
}

.p-gift {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #d5e5f5;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease;
}

.p-gift:last-child {
    margin-bottom: 0;
}

.p-gift:hover {
    border-color: #2b7fd4;
}

.p-gift-image {
    flex: 0 0 auto;
}

.p-gift-image img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.p-gift-name a {
    display: block;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.35;
    color: #16191d;
    text-decoration: none;
}

.p-gift-name a:hover {
    color: #2b7fd4;
    text-decoration: none;
}

.p-gift-name .nowrap {
    display: block;
    margin-top: 2px;
    font-weight: 600;
    font-size: 13px;
    color: #1c5a99;
    white-space: normal;
}


/* ############################################################
   3) PŘEDPOKLÁDANÉ DORUČENÍ — detail + košík
   (původně samostatný soubor: delivery-note-4.css)
   ############################################################ */

/* ============================================================
   Ski & Cyklo centrum — Termín doručení (v6)
   Blok „Předpokládané doručení" na detailu produktu:
   modrý podklad + bílá karta s termínem (kartu vytváří
   delivery-note.js) + poznámka o seřízení kol a lyží.
   Selektory fungují jak v tabulce parametrů (bez
   nakupni-zona.js), tak po přesunu pod tlačítko košíku
   (.sc-delivery-block, přesouvá nakupni-zona.js).
   Sladěno 1:1 se sekcí dárků (darky-produkt.css).
   ============================================================ */

/* Plná šířka — aby blok lícoval se sekcí dárků */
.detail-parameters {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Modrý podklad — v tabulce (fallback bez nakupni-zona.js) */
.detail-parameters th:has(.delivery-time) {
    background: #eaf2fb;
    border-radius: 14px;
    padding: clamp(16px, 2.6vw, 20px);
}

/* Bílá karta s termínem (vytváří delivery-note.js) —
   stejná řeč jako karty dárků; obsah zarovnaný na střed */
.sc-delivery-card {
    background: #fff;
    border: 1px solid #d5e5f5;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
}

/* Label ve stylu nadpisu dárků, na stejném řádku jako datum */
.delivery-time-label {
    display: inline-block;
    font-size: 0;
    margin-right: 10px;
}

.delivery-time-label::before {
    content: "Předpokládané doručení";
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1c5a99;
}

html[lang="sk"] .delivery-time-label::before {
    content: "Predpokladané doručenie";
}

html[lang="en"] .delivery-time-label::before {
    content: "Estimated delivery";
}

/* Datum vedle labelu — výraznější než label, ale decentní */
.detail-parameters th:has(.delivery-time) .delivery-time,
.sc-delivery-block .delivery-time {
    display: inline-block;
    font-weight: 700;
    font-size: 15px;
    color: #16191d;
    vertical-align: baseline;
}

/* Placeholder „Zvolte variantu" na místě data — decentně,
   ať nevypadá jako termín */
.detail-parameters th:has(.delivery-time) .delivery-time .default-variant,
.sc-delivery-block .delivery-time .default-variant {
    font-size: 0;
}

.detail-parameters th:has(.delivery-time) .delivery-time .default-variant::before,
.sc-delivery-block .delivery-time .default-variant::before {
    content: "vyberte variantu";
    font-size: 13px;
    font-weight: 400;
    color: #646e78;
}

html[lang="sk"] .detail-parameters th:has(.delivery-time) .delivery-time .default-variant::before,
html[lang="sk"] .sc-delivery-block .delivery-time .default-variant::before {
    content: "vyberte variant";
}

html[lang="en"] .detail-parameters th:has(.delivery-time) .delivery-time .default-variant::before,
html[lang="en"] .sc-delivery-block .delivery-time .default-variant::before {
    content: "select a variant";
}

/* Odkaz Možnosti doručení na vlastním řádku pod datem */
.detail-parameters th:has(.delivery-time) .shipping-options,
.sc-delivery-block .shipping-options {
    display: block;
    margin-top: 6px;
    font-weight: 400;
    font-size: 13px;
}

/* Poznámka o seřízení kol a lyží — popisek pod kartou,
   zarovnaný na střed (vkládá delivery-note.js jen u kategorií
   definovaných v tom souboru) */
.sc-delivery-note {
    margin-top: 10px;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.5;
    color: #1c5a99;
    text-align: center;
}

/* ===== Košík — „Doručení možné do:" → „Předpokládané doručení:" ===== */

.cart-wrapper .delivery-time {
    font-size: 0;
}

.cart-wrapper .delivery-time::before {
    content: "Předpokládané doručení: ";
    font-size: 14px;
}

.cart-wrapper .delivery-time strong {
    font-size: 14px;
}

html[lang="sk"] .cart-wrapper .delivery-time::before {
    content: "Predpokladané doručenie: ";
}

html[lang="en"] .cart-wrapper .delivery-time::before {
    content: "Estimated delivery: ";
}


/* ############################################################
   4) AKČNÍ PILULKY — Tisk / Zeptat se / Hlídat / Sdílet
   (původně samostatný soubor: produkt-ikony.css)
   ############################################################ */

/* ============================================================
   Ski & Cyklo centrum — akční ikony detailu produktu
   Kompaktní řádek Tisk / Zeptat se / Hlídat / Sdílet
   ve stylu pilulek z design systému popisů.
   ============================================================ */

.social-buttons-wrapper {
    margin: 16px 0 0;
}

.link-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.link-icons .link-icon {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    margin: 0;
    padding: 6px 13px;
    border: 1px solid #e4e7ea;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #646e78;
    text-transform: none;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.link-icons .link-icon:hover {
    border-color: #2b7fd4;
    color: #2b7fd4;
    text-decoration: none;
}

/* Zmenšení ikony šablony (bývá jako ::before ikonfont) */
.link-icons .link-icon::before {
    font-size: 14px;
    line-height: 1;
}

/* Popisek vedle ikony, ne pod ní */
.link-icons .link-icon span {
    display: inline;
    margin: 0;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.02em;
}


/* ############################################################
   5) NÁKUPNÍ ZÓNA — rytmus, dostupnost, stepper, košík
   (původně samostatný soubor: nakupni-zona-6.css)
   ############################################################ */

/* ============================================================
   Ski & Cyklo centrum — nákupní zóna detailu produktu (v6)
   1) Jednotný svislý rytmus celé zóny (bloky 18 px od sebe)
   2) Dostupnost jako barevný štítek (barvy automaticky
      podle stavu) + přepis placeholderu varianty
   3) Stepper množství [ − | počet | + ] + větší tlačítko
      + zneškodnění neviditelných klikacích ploch šablony
   4) Blok doručení pod tlačítkem (přesouvá nakupni-zona.js)
   5) „Přidat k porovnání" jako zvýrazněná pilulka
   6) „Detailní informace" jako viditelné tlačítko
   7) Šedá bublina pro akční pilulky (obaluje JS),
      pilulky zarovnané na střed
   ============================================================ */

/* ===== 1) Jednotný rytmus nákupní zóny ===== */

.p-info-wrapper .p-final-price-wrapper {
    margin-bottom: 10px;
}

.p-info-wrapper .availability-value {
    margin: 0 0 14px;
}

.p-info-wrapper .detail-parameters {
    margin: 0 0 4px;
}

.p-info-wrapper .add-to-cart {
    margin: 14px 0 18px;
}

.p-info-wrapper .sc-delivery-block {
    margin: 0 0 18px;
}

.p-info-wrapper .p-gifts-wrapper {
    margin: 0 0 18px;
}

.p-info-wrapper .p-short-description {
    margin: 0 0 14px;
}

.p-info-wrapper p[data-testid="productCardDescr"] {
    margin: 0 0 18px;
}

.p-info-wrapper .sc-actions-block {
    margin: 0 0 18px;
}

.p-info-wrapper #pmt {
    margin: 0 0 18px;
}

/* ===== 2) Dostupnost — barevný štítek podle stavu ===== */

/* Štítek jen u skutečných stavů (mají inline barvu);
   podklad se počítá z barvy stavu, takže funguje pro
   všechny dostupnosti bez vyjmenovávání */
.p-info-wrapper .availability-value .availability-label[style*="color"] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, #fff);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.p-info-wrapper .availability-value .availability-label[style*="color"]::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* Počet kusů decentně vedle štítku */
.p-info-wrapper .availability-value .availability-amount {
    font-size: 13px;
    font-weight: 400;
    color: #646e78;
    margin-left: 6px;
}

.p-info-wrapper .availability-value .show-tooltip,
.p-info-wrapper .availability-value .acronym {
    border-bottom: 0 !important;
    text-decoration: none !important;
}

/* Placeholder „Vyberte variantu" — bez štítku, decentně */
.p-info-wrapper .availability-value .default-variant .availability-label {
    font-size: 0;
}

.p-info-wrapper .availability-value .default-variant .availability-label::before {
    content: "Vyberte variantu";
    font-size: 14px;
    font-weight: 400;
    color: #646e78;
}

html[lang="sk"] .p-info-wrapper .availability-value .default-variant .availability-label::before {
    content: "Vyberte variant";
}

html[lang="en"] .p-info-wrapper .availability-value .default-variant .availability-label::before {
    content: "Select a variant";
}

/* ===== 3) Množství + Přidat do košíku ===== */

.p-info-wrapper .add-to-cart {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.p-info-wrapper .add-to-cart .add-to-cart-button {
    flex: 1 1 auto;
    border-radius: 10px;
    font-size: 15.5px;
    font-weight: 700;
    min-height: 48px;
}

/* Stepper: [ − | počet | + ] v jednom rámečku.
   padding: 0 ruší padding-right: 30px šablony (rezerva pro
   původní absolutní šipky) — právě ten dělal prázdný ocásek
   vpravo za plusem. fit-content navrch jistí, že se obal
   nikdy neroztáhne za obsah. */
.p-info-wrapper .add-to-cart .quantity {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    width: -moz-fit-content;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: none;
    padding: 0 !important;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 10px;
    overflow: hidden;
}

/* Uklízečka: cokoli v obalu, co není label/políčko/−/+,
   je pozůstatek šablony a dělá prázdné místo — schovat */
.p-info-wrapper .add-to-cart .quantity > *:not(label):not(.amount):not(.increase):not(.decrease) {
    display: none !important;
}

/* Kotvy tooltipů šablony — vykreslovaly se jako „XX" a
   prázdné místo, tooltip funkčnost zajišťuje JS jinde */
.p-info-wrapper .add-to-cart .quantity .increase-tooltip,
.p-info-wrapper .add-to-cart .quantity .decrease-tooltip {
    display: none;
}

/* Zneškodnění neviditelných klikacích ploch šablony —
   ::before tlačítek je roztažené absolutně přes celý stepper
   (148 px), takže každý klik trefoval minus; u některých
   prohlížečů navíc vykreslovalo vlastní šipky („××") */
.p-info-wrapper .add-to-cart .quantity .increase::before,
.p-info-wrapper .add-to-cart .quantity .increase::after,
.p-info-wrapper .add-to-cart .quantity .decrease::before,
.p-info-wrapper .add-to-cart .quantity .decrease::after {
    content: none !important;
    display: none !important;
}

.p-info-wrapper .add-to-cart .quantity label {
    display: flex;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    margin: 0;
    order: 0;
}

.p-info-wrapper .add-to-cart .quantity .amount {
    width: 46px !important;
    min-width: 0 !important;
    max-width: 46px;
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: #16191d;
    background: #fff;
    -moz-appearance: textfield;
    appearance: textfield;
}

.p-info-wrapper .add-to-cart .quantity .amount::-webkit-outer-spin-button,
.p-info-wrapper .add-to-cart .quantity .amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.p-info-wrapper .add-to-cart .quantity .increase,
.p-info-wrapper .add-to-cart .quantity .decrease {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: 36px;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: #f6f8fb;
    color: #1c5a99;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.p-info-wrapper .add-to-cart .quantity .decrease {
    order: -1;
    border-right: 1px solid #e4e7ea;
}

.p-info-wrapper .add-to-cart .quantity .increase {
    order: 1;
    border-left: 1px solid #e4e7ea;
}

.p-info-wrapper .add-to-cart .quantity .increase:hover,
.p-info-wrapper .add-to-cart .quantity .decrease:hover {
    background: #eaf2fb;
}

.p-info-wrapper .add-to-cart .quantity .increase__sign,
.p-info-wrapper .add-to-cart .quantity .decrease__sign {
    display: block;
}

/* ===== 4) Blok doručení po přesunu pod tlačítko ===== */

.sc-delivery-block {
    background: #eaf2fb;
    border-radius: 14px;
    padding: clamp(16px, 2.6vw, 20px);
}

.detail-parameters tr.sc-delivery-moved {
    display: none;
}

/* ===== 5) Akční pilulky — jednotná výška ===== */

.link-icons .link-icon,
.link-icons .dkLabComparerAddProduct {
    min-height: 32px;
    box-sizing: border-box;
}

.link-icons .dkLabComparerAddProduct {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 13px;
    border: 1px solid #d5e5f5;
    border-radius: 999px;
    background: #eaf2fb;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #1c5a99;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.link-icons .dkLabComparerAddProduct:hover {
    border-color: #2b7fd4;
}

.dkLabComparerDiv:empty,
.dkLabComparerDiv.sc-moved {
    display: none;
}

/* ===== 6) Detailní informace jako tlačítko ===== */

.p-info-wrapper p[data-testid="productCardDescr"] a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid #2b7fd4;
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: #1c5a99;
    text-decoration: none;
    transition: background 0.15s ease;
}

.p-info-wrapper p[data-testid="productCardDescr"] a:hover {
    background: #eaf2fb;
    text-decoration: none;
}

/* ===== 7) Šedá bublina: jen akční pilulky ===== */

.sc-actions-block {
    background: #f6f8fb;
    border-radius: 14px;
    padding: clamp(14px, 2.4vw, 18px);
}

.sc-actions-block .social-buttons-wrapper {
    margin: 0;
}

/* Pilulky zarovnané na střed bubliny */
.sc-actions-block .link-icons {
    justify-content: center;
}

.sc-actions-block .link-icons .link-icon {
    background: #fff;
}


/* ############################################################
   6) STICKY LIŠTA — plovoucí bublina na mobilu
   (původně samostatný soubor: sticky-lista-1.css)
   ############################################################ */

/* ============================================================
   Ski & Cyklo centrum — sticky lišta (mobil) v2
   Plovoucí bublina uprostřed obrazovky, lehce odlepená od
   spodního okraje, s cenou a tlačítkem Do košíku. Objeví se,
   až když hlavní tlačítko Přidat do košíku zmizí z obrazovky
   (řídí sticky-lista.js). Jen na mobilu (do 768 px).
   Poloprůhledná s rozostřením (frosted glass).
   ============================================================ */

#sc-sticky-bar {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 9990;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: max-content;
    min-width: 60%;
    max-width: min(420px, 84%);
    padding: 8px 8px 8px 18px;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(228, 231, 234, 0.9);
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(18, 23, 29, 0.16);
    transform: translateX(-50%) translateY(140%);
    transition: transform 0.24s ease;
}

/* Starší prohlížeče bez backdrop-filter: plné bílé pozadí */
@supports not (backdrop-filter: blur(1px)) {
    #sc-sticky-bar {
        background: rgba(255, 255, 255, 0.97);
    }
}

#sc-sticky-bar.sc-visible {
    transform: translateX(-50%) translateY(0);
}

.sc-sticky-price {
    font-weight: 800;
    font-size: 16px;
    color: #16191d;
    white-space: nowrap;
}

.sc-sticky-btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    /* Barvu podkladu nastavuje JS podle skutečného tlačítka
       Přidat do košíku, tohle je jen záloha */
    background: #457a85;
}

/* Jen mobil */
@media (min-width: 768px) {
    #sc-sticky-bar {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    #sc-sticky-bar {
        display: flex;
    }
}


/* ############################################################
   7) BENEFIT BANNERY — trust karty
   (původně samostatný soubor: benefit-bannery-2.css)
   ############################################################ */

/* ============================================================
   Ski & Cyklo centrum — benefit bannery na detailu produktu (v2)
   Řádek Autorizovaný prodejce / 14 dní na vrácení / Rychlé
   doručení jako tři malé karty v jazyce nákupní zóny.
   v2 — přebití šířek obsahu ze šablony (text se lámal
   uprostřed slov, karty měly nucené rozměry).
   ============================================================ */

.benefitBanner.position--benefitProduct {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0;
    max-width: none;
}

.benefitBanner.position--benefitProduct .benefitBanner__item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 11px;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 12px;
    text-align: left;
}

.benefitBanner.position--benefitProduct .benefitBanner__picture {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
}

.benefitBanner.position--benefitProduct .benefitBanner__img {
    display: block;
    width: 38px;
    height: 38px;
    max-width: none;
    object-fit: contain;
    margin: 0;
}

/* Klíčová oprava: obsah musí zabrat celý zbytek karty,
   šablona ho drží na úzké šířce */
.benefitBanner.position--benefitProduct .benefitBanner__content {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
}

.benefitBanner.position--benefitProduct .benefitBanner__title {
    display: block;
    margin: 0 0 2px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: #16191d;
}

.benefitBanner.position--benefitProduct .benefitBanner__data {
    font-size: 12.5px;
    line-height: 1.45;
    color: #646e78;
    max-width: none;
}

/* Mobil — karty pod sebe, obsah svisle a na střed */
@media (max-width: 767.98px) {
    .benefitBanner.position--benefitProduct {
        grid-template-columns: 1fr;
    }

    .benefitBanner.position--benefitProduct .benefitBanner__item {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
    }

    .benefitBanner.position--benefitProduct .benefitBanner__content {
        text-align: center;
    }
}


/* ############################################################
   8) SOUVISEJÍCÍ PRODUKTY — kompaktní cross-sell
   (původně samostatný soubor: souvisejici-produkty-1.css)
   ############################################################ */

/* ============================================================
   Ski & Cyklo centrum — související produkty na detailu (v2)
   Kompaktnější cross-sell: menší obrázky, karty s rámečkem
   v designové rodině, bez porovnání a krátkého popisu.
   Cíleno JEN na .products-related — záložka „Podobné"
   (products-alternative) zůstává beze změny.
   v2 — silnější přebití rozměrů obrázku a výšky karty
   ze šablony.
   ============================================================ */

.products-related-header {
    font-size: 18px;
    font-weight: 700;
    color: #16191d;
    margin: 6px 0 12px;
}

.products-related .p {
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 12px;
    padding: 12px 14px;
    min-height: 0 !important;
    height: auto !important;
    transition: border-color 0.15s ease;
}

.products-related .p:hover {
    border-color: #2b7fd4;
}

/* Obrázek: pevná nízká scéna, obrázek se do ní vejde celý */
.products-related .p .image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.products-related .p .image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 130px !important;
    object-fit: contain;
    margin: 0 auto;
}

/* Balast pryč: porovnání a krátký popis u cross-sellu
   nedávají smysl */
.products-related .dkLabComparerProductDiv,
.products-related .p-desc {
    display: none !important;
}

/* Kompaktnější texty */
.products-related .p .name {
    font-size: 14px;
    line-height: 1.35;
    min-height: 0;
}

.products-related .p-in,
.products-related .p-bottom {
    min-height: 0;
}

.products-related .availability {
    font-size: 12.5px;
}

.products-related .price-final strong {
    font-size: 16px;
}


/* ############################################################
   9) DOPLŇKOVÉ PARAMETRY — restyl tabulky
   (původně samostatný soubor: detail-parametry-1.css)
   ############################################################ */

/* ============================================================
   Ski & Cyklo centrum — Doplňkové parametry na detailu produktu
   Restyl standardní šoptetí tabulky table.detail-parameters
   do stejného designu jako boxy Předpokládané doručení,
   Dárky a tlačítko Přidat do košíku (zaoblená karta, jemné
   modré linky, modrá #1c5a99).

   v5:
   - Oprava šířky: Shoptet mezi ~1200–1400px přesouvá tento box
     do záložky Popis a dává mu jen 1/3 šířky vedle popisného
     textu (.description-inner je flex row, .extended-description
     má flex-basis 33%), což zbytečně zalamovalo delší hodnoty.
     Box se teď v této situaci zalomí na vlastní řádek přes
     celou šířku.
   - Víceřádkové hodnoty (např. Pláště s předním a zadním
     pláštěm): každá hodnota na vlastním řádku, oddělené jemnou
     šedou čárou. Vyžaduje doprovodný JS (detail-parametry.js),
     protože Shoptet tyto hodnoty vykresluje jako čistý text bez
     oddělovacích elementů.
   ============================================================ */
/* Nadpis „Doplňkové parametry" — malý modrý titulek
   ve stylu ZDARMA OD NÁS DOSTANETE */
#product-detail .detail-parameters-wrapper > h4,
#product-detail .extended-description + h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1c5a99;
    margin-bottom: 12px;
}
/* NOVÉ v5 — mezi ~1200-1400px šířky okna Shoptet vykresluje
   parametry uvnitř záložky Popis, vedle popisného textu, jen
   na 1/3 šířky (viz komentář výše). Necháme box zalomit na
   vlastní řádek přes celou šířku místo mačkání vedle textu. */
.description-inner {
    flex-wrap: wrap;
}
.description-inner .extended-description {
    flex: 1 1 100%;
    max-width: 100%;
}
/* Tabulka jako zaoblená karta */
table.detail-parameters {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #d7e6f8;
    border-radius: 14px;
    overflow: hidden;
}
/* Oddělení řádků jemnou linkou (kromě prvního) */
table.detail-parameters tr + tr th,
table.detail-parameters tr + tr td {
    border-top: 1px solid #e9f2fc;
}
/* Prázdný "reset" řádek hned pod výběrem varianty (obsahuje jen
   skrytý <div class="no-display"><a>Reset</a></div>). Dokud je
   prázdný, padding i horní linku vynulujeme, aby nevytvářel
   bílý proužek. Jakmile Shoptet třídu "no-display" odstraní
   (varianta je nedostupná a řádek se má ukázat), selektor
   přestane sedět a řádek se vrátí do normálu. */
table.detail-parameters tr.variant-list + tr:has(.no-display) td,
table.detail-parameters tr.variant-list + tr:has(.no-display) th {
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
}
/* Levý sloupec — popisky: světle modrý podklad,
   normální řez, klidná šedomodrá */
table.detail-parameters th {
    background: #f5f9fe;
    font-weight: 400;
    color: #4a5b6e;
    text-align: left;
    padding: 10px 16px;
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}
/* Skutečná struktura Shoptetu: uvnitř th je jeden
   <span class="row-header-label"> a v něm tři sourozenci —
   ikona nápovědy (.show-tooltip.question-tooltip, PRVNÍ),
   text popisku, a samostatný <span class="row-header-label-colon">
   s dvojtečkou (POSLEDNÍ). Flex + order přeuspořádá pořadí
   beze zásahu do samotného textu/dvojtečky. */
table.detail-parameters th .row-header-label {
    display: flex;
    align-items: center;
}
table.detail-parameters th .row-header-label-colon {
    order: 1;
}
/* Pravý sloupec — hodnoty: tučně, tmavě */
table.detail-parameters td {
    padding: 10px 16px;
    font-weight: 700;
    color: #17324d;
    vertical-align: middle;
}
/* Odkazy v hodnotách (kategorie, barva, průměr kol…) */
table.detail-parameters td a {
    color: #1c5a99;
    font-weight: 700;
    text-decoration: none;
}
table.detail-parameters td a:hover {
    text-decoration: underline;
}
/* NOVÉ v5 — víceřádkové hodnoty (rozdělené JS souborem
   detail-parametry.js na jednotlivé .param-value-item).
   Každá hodnota na vlastním řádku, oddělené jemnou šedou čárou. */
table.detail-parameters td .param-value-item {
    display: block;
}
table.detail-parameters td .param-value-item + .param-value-item {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e4e9;
}
/* Víc vzduchu u prvního a hlavně posledního řádku,
   aby obsah nelepil na zaoblené hrany karty */
table.detail-parameters tr:first-child th,
table.detail-parameters tr:first-child td {
    padding-top: 15px;
}
table.detail-parameters tr:last-child th,
table.detail-parameters tr:last-child td {
    padding-bottom: 18px;
}
/* Odsazení celé karty od dalšího obsahu */
table.detail-parameters {
    margin-bottom: 24px;
}
/* Jemné zvýraznění řádku pod kurzorem — :not(.variant-list)
   vylučuje řádek výběru varianty (S/M/L pilulky), kde
   podbarvení nechceme; normální parametry (Kategorie, Záruka…)
   si hover drží dál. */
table.detail-parameters tr:not(.variant-list):hover th,
table.detail-parameters tr:not(.variant-list):hover td {
    background-color: #eef6ff;
}
table.detail-parameters tr:not(.variant-list):hover th {
    background-color: #e8f2fd;
}
/* Otazníky s nápovědou — místo plného modrého kolečka
   decentní světlý kroužek s modrým otazníkem, menší
   a opticky sladěný s popiskem.
   order: 2 posune ikonu AŽ ZA text i za dvojtečku
   (výsledné pořadí: "Popisek" → order 0 (výchozí) →
   ":" → order 1 → " ?" → order 2). */
table.detail-parameters th .show-tooltip.question-tooltip,
table.detail-parameters th .tooltip,
table.detail-parameters th [data-toggle="tooltip"],
table.detail-parameters th .question-tooltip,
table.detail-parameters th .tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    margin-left: 7px;
    margin-right: 0;
    order: 2;
    flex-shrink: 0;
    background: #e5f0fc !important;
    color: #1c5a99 !important;
    border: none;
    border-radius: 50%;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    opacity: 0.9;
    cursor: help;
}
table.detail-parameters th .show-tooltip.question-tooltip:hover,
table.detail-parameters th .tooltip:hover,
table.detail-parameters th [data-toggle="tooltip"]:hover,
table.detail-parameters th .question-tooltip:hover,
table.detail-parameters th .tooltip-icon:hover {
    background: #1c5a99 !important;
    color: #fff !important;
    opacity: 1;
}
/* Mobil — menší odsazení, popisky se smí zalamovat */
@media (max-width: 767px) {
    table.detail-parameters th,
    table.detail-parameters td {
        padding: 8px 12px;
    }
    table.detail-parameters th {
        white-space: normal;
    }
}


/* ############################################################
   10) ŘÁDEK POD NADPISEM — příznaky, hodnocení, značka
   (původně samostatný soubor: product-detail-1.css)
   ############################################################ */

/* ============================================================
   Ski & Cyklo centrum — detail produktu: řádek pod nadpisem
   (příznaky jako Novinka/Akce, hvězdičkové hodnocení, značka).

   Nahrazuje výchozí Shoptet vzhled (textové "|" oddělovače,
   plochý sytý štítek, šedé hvězdičky) designem sladěným se
   zbytkem stránky — jemné pilulky, brand modrá #1c5a99,
   světle modré linky #d7e6f8.

   Barva příznaků (Novinka/Akce/Sleva/Doprava zdarma…) se
   NEnastavuje natvrdo podle názvu — každý typ příznaku má ve
   Shoptetu svou vlastní originální barvu (různou pro každý
   typ). Tady jen měníme TVAR (pilulka), samotnou barvu pozadí/
   textu dopočítává doprovodný JS soubor (p-detail-flags.js)
   z PŮVODNÍ barvy daného příznaku — funguje tedy automaticky
   pro libovolný typ příznaku, i budoucí, bez úprav CSS.
   ============================================================ */

.p-detail-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 8px;
    margin: 10px 0 18px;
}

/* Zrušit výchozí textové "|" oddělovače (Shoptet je vkládá
   přes ::before jako obyčejný znak "|") */
.p-detail-info .stars-wrapper::before,
.p-detail-info > div::before {
    content: none !important;
}

/* Jemná svislá čára mezi skupinami (příznaky / hodnocení /
   značka) místo pipe znaku */
.p-detail-info > div {
    display: flex;
    align-items: center;
}
.p-detail-info > div:not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #d7e6f8;
}

/* Hvězdičkové hodnocení — barvu necháváme původní (zlatá u
   vyplněných, šedá u prázdných), protože je to silně zavedená
   konvence pro "hodnocení" a modrá by splynula se zbytkem
   stránky. Řešíme jen rozestupy. */
.p-detail-info .stars-wrapper {
    gap: 7px;
}
.p-detail-info .stars-label,
.p-detail-info .stars-label span {
    color: #646e78;
    font-size: 13px;
}
.p-detail-info .stars-link {
    color: #1c5a99;
    font-size: 13px;
    text-decoration: none;
}
.p-detail-info .stars-link:hover {
    text-decoration: underline;
}

/* Značka — stejný vzor jako popisek/hodnota v tabulce
   parametrů (šedý popisek, tučná modrá hodnota jako odkaz).
   Shoptet vykresluje "Značka: " jako text a název značky jako
   <span> uvnitř téhož odkazu, takže jde stylovat zvlášť. */
.p-detail-info > div:last-child a {
    color: #646e78;
    font-weight: 400;
    font-size: 13px;
    text-decoration: none;
}
.p-detail-info > div:last-child a span {
    color: #1c5a99;
    font-weight: 700;
}
.p-detail-info > div:last-child a:hover {
    text-decoration: underline;
}

/* Příznaky (Novinka, Akce, Sleva, Doprava zdarma…) jako
   jemné pilulky. Barvu pozadí/textu/okraje nastavuje JS
   (p-detail-flags.js) podle původní barvy KAŽDÉHO příznaku —
   tady jen tvar. */
.p-detail-info .flags {
    gap: 8px;
}
.p-detail-info .flag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
}


/* ############################################################
   11) DOLADĚNÍ v2 — kód varianty, datum doručení, benefit
       karty pod galerií
   ############################################################ */

/* Kód produktu/varianty v hlavičce detailu (span.p-code,
   Shoptet do něj po výběru varianty vypisuje interní kód
   typu ZERO16_2025 GRN) — pro zákazníka bez hodnoty, skrýt.
   Element zůstává v DOM, JS s ním může dál pracovat. */
#product-detail .p-code {
    display: none !important;
}

/* Datum doručení — šablona mu dává třídu .acronym/.show-tooltip
   s přerušovaným podtržením (styl tooltipu). Tooltip na hover
   zůstává funkční, jen sjednocujeme vzhled s okolím.
   Stejný přístup jako u dostupnosti v sekci 5. */
.sc-delivery-block .delivery-time .show-tooltip,
.sc-delivery-block .delivery-time .acronym,
.detail-parameters th:has(.delivery-time) .show-tooltip,
.detail-parameters th:has(.delivery-time) .acronym {
    border-bottom: 0 !important;
    text-decoration: none !important;
}

/* Benefit karty přesunuté pod galerii (přesouvá nakupni-zona.js,
   jen na desktopu ≥ 992 px — na mobilu zůstávají na původním
   místě, aby neodsouvaly cenu a košík).
   V užším sloupci karty pod sebe; vodorovné rozložení karty
   (ikona vlevo, text vpravo) už řeší sekce 7. */
.p-image-wrapper .benefitBanner.position--benefitProduct {
    grid-template-columns: 1fr;
    margin: 22px 0 0;
}


/* ############################################################
   12) DOLADĚNÍ v3 — krátký popis jako bublina, bloky pod
       galerií (spolupracuje s detail-layout-1.js)
   ############################################################ */

/* Rytmus: krátký popis přesunutý nad dárky (přesouvá
   detail-layout-1.js) drží stejnou mezeru jako ostatní bloky */
.p-info-wrapper .p-short-description {
    margin: 0 0 18px;
}

/* Krátký popis jako bublina — bílá karta s jemným modrým
   rámečkem, text na střed. Přes :not(:has([style])) se
   aplikuje JEN na produkty s holým textem bez inline stylů —
   ručně nastylované krátké popisy (starší produkty s vlastním
   boxem) zůstávají beze změny, dokud z nich inline styly
   nesmažeš; pak je převezme tenhle globální design. */
.p-info-wrapper .p-short-description:not(:has([style])) {
    background: #fff;
    border: 1px solid #d7e6f8;
    border-radius: 14px;
    padding: clamp(16px, 2.6vw, 20px);
    text-align: center;
    font-size: 14.5px;
    line-height: 1.55;
    color: #4a5b6e;
}

.p-info-wrapper .p-short-description:not(:has([style])) p {
    margin: 0;
}

.p-info-wrapper .p-short-description:not(:has([style])) p + p {
    margin-top: 8px;
}

.p-info-wrapper .p-short-description:not(:has([style])) strong,
.p-info-wrapper .p-short-description:not(:has([style])) b {
    color: #16191d;
}

/* Akční bublina po přesunu pod galerii (přesouvá
   detail-layout-1.js) — výchozí mezera nad ní; přesnou hodnotu
   pro zarovnání s pravým sloupcem dopočítává JS inline. */
.p-image-wrapper .sc-actions-block {
    margin: 10px 0 0;
}

/* Tlačítko „Kompletní popis a parametry" — po přesunu mezi
   krátký popis a dárky (přesouvá detail-layout-3.js) je
   zarovnané na střed; užší pilulka na kraji působila ztraceně. */
.p-info-wrapper p[data-testid="productCardDescr"] {
    text-align: center;
}