.wt-gift-bar {
    position: relative;
    display: block;
    width: 100%;
}

.ordering-process .wt-gift-bar {
    order: 4;
    margin-top: 16px;
}

.wt-gift-bar__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 20px;
    background-color: #E8E5DD;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
}

.wt-gift-bar__progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background-color: #5E9B82;
    transition: width 0.3s ease;
}

.wt-gift-bar__track {
    position: absolute;
    top: 50%;
    z-index: 50;
    width: 77px;
    height: 57px;
    transform: translate(-50%, -45%);
}

.wt-gift-bar__icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wt-gift-bar__text {
    position: absolute;
    top: 50%;
    margin-left: 30px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 44px);
    transform: translateY(-50%);
    white-space: nowrap;
    color: #1A1937;
}

.wt-gift-bar__info {
    display: inline-flex;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: none;
    background: none;
}

.wt-gift-bar__info img {
    display: block;
    width: 100%;
    height: 100%;
}

.wt-gift-bar__link {
    color: #000;
    font-weight: 700;
    text-decoration: underline;
}

.wt-gift-bar__link:hover,
.wt-gift-bar__link:focus {
    text-decoration: none;
}

.wt-gift-bar__amount {
    font-weight: 700;
}

.wt-gift-bar--reached .wt-gift-bar__inner {
    background-color: #5E9B82;
}

.wt-gift-bar__reached-text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 88px);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    color: #ffffff;
}

.wt-gift-bar__track--reached {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    transform: none;
    margin-right: 4px;
}

.wt-gift-bar__close {
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 1;
    display: inline-flex;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    transform: translateY(-50%);
    cursor: pointer;
}

.wt-gift-bar__close img {
    display: block;
    width: 100%;
    height: 100%;
}

.wt-gift-bar__tooltip {
    position: absolute;
    left: 0;
    z-index: 20;
    display: flex;
    gap: 12px;
    width: 320px;
    max-width: calc(100vw - 40px);
    padding: 16px;
    background-color: #313131;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.wt-gift-bar__tooltip[hidden] {
    display: none;
}

.wt-gift-bar__tooltip-image {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.wt-gift-bar__tooltip-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
}

.wt-gift-bar__tooltip .wt-gift-bar__tooltip-link,
.wt-gift-bar__tooltip .wt-gift-bar__tooltip-link:link,
.wt-gift-bar__tooltip .wt-gift-bar__tooltip-link:visited {
    color: #ffffff !important;
    text-decoration: underline;
}

.wt-gift-bar__tooltip .wt-gift-bar__tooltip-link:hover,
.wt-gift-bar__tooltip .wt-gift-bar__tooltip-link:focus {
    color: #ffffff !important;
    text-decoration: none;
}

.wt-gift-bar__tooltip-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #E8E5DD;
}

@media (max-width: 767px) {
    /* Na mobilu opustíme absolutní pixel-layout (JS nastavuje left v px podle
       šířky a track jede za progressem) – text se pak nevejde na jeden řádek
       a přetéká. Ikonu ukotvíme staticky vlevo a text necháme zalomit. */
    .wt-gift-bar__inner {
        height: auto;
        min-height: 44px;
        padding: 8px 16px;
    }

    .wt-gift-bar__progress-fill {
        top: 0;
        bottom: 0;
        height: auto;
    }

    /* Ikona dárku ukotvená vlevo, nezávisle na dopočítané pozici z JS. */
    .wt-gift-bar__track {
        top: 50%;
        left: 8px !important;
        width: 44px;
        height: 33px;
        transform: translateY(-50%);
    }

    /* Text zůstane absolutní a vertikálně centrovaný, ale s pevným left
       (místo pixelu dopočteného z JS) a se zalomením místo nowrap. */
    .wt-gift-bar__text {
        left: 56px !important;
        margin-left: 0;
        max-width: calc(100% - 72px);
        font-size: 12px;
        white-space: normal;
    }

    .wt-gift-bar__reached-text {
        font-size: 12px;
        max-width: calc(100% - 76px);
    }

    .wt-gift-bar__close {
        right: 16px;
    }
}

.wt-product-tip {
    display: flex;
    order: 8;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.wt-product-tip__icon {
    display: block;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.wt-product-tip__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #1A1937;
}

.wt-product-tip__text strong {
    font-weight: 700;
}

.wt-cart-widget-bar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
}

.wt-cart-widget-bar__icon {
    display: block;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.wt-cart-widget-bar__text-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.wt-cart-widget-bar__text {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.4;
}

.wt-cart-widget-bar__amount {
    font-weight: 700;
}

.wt-cart-widget-bar__progress {
    height: 6px;
    border-radius: 3px;
    background-color: #E8E5DD;
    overflow: hidden;
}

.wt-cart-widget-bar__progress-fill {
    height: 100%;
    border-radius: 3px;
    background-color: #5E9B82;
    transition: width 0.3s ease;
}

.wt-cart-widget-bar--reached {
    align-items: center;
}

.wt-cart-widget-bar--reached .wt-cart-widget-bar__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.wt-cart-widget-bar__firework {
    display: block;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    object-fit: contain;
}
   .co-contact-information .login-button {
    background-color: #254733;
    border-color: #254733;
    color: #fff;
    text-decoration: none;
}

.co-contact-information .login-button:hover {
    text-decoration: underline;
}

/* Rozpad hodnocení podle počtu hvězd (#ratingWrapper). Shoptet do markupu
   vypisuje podíl každého stupně jako custom property na .rate-bar
   (style="--rate-bar-width: 42%"), jenže šablona tu proměnnou nikde nečte —
   .rate-bar má jen height a border-radius, takže se vykreslí 0 px široký.
   Tmavá výplň proto vznikala až obarvením .rate-block, což je ale dráha, ne
   vyplněná část, a všechny řádky tak vypadaly na 100 %.
   Tady se .rate-block vrací světlá dráha a šířku bere .rate-bar z proměnné. */
   #ratingWrapper .rate-block {
    background-color: #E8EDEA;
}

#ratingWrapper .rate-bar {
    width: var(--rate-bar-width, 0%);
    /* .rate-block je flex kontejner, bez tohohle by flex-basis přebil width */
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    background-color: #254733;
    transition: width 0.3s ease;
}

/* .rate-count sedí uvnitř .rate-bar, ale je pozicovaný absolutně vůči
   .rate-list, takže se šířkou pruhu nehýbe a u 0% se neořízne. */
#ratingWrapper .rate-bar .rate-count {
    white-space: nowrap;
}
/* ==========================================================================
   wt-cart.css — úpravy košíku (olivie.cz), mobilní zobrazení
   --------------------------------------------------------------------------
   Řeší dvě místa se samostatným markupem: stránku košíku (.in-kosik) a
   vyskakovací okno košíku (#cart-widget), které se otevírá kdekoli na webu.
   Obojí jen v mobilním breakpointu, desktop zůstává beze změny. Barvy a ikony
   jsou nahoře v proměnných na :root, ať se dají doladit na jednom místě.

   Bloky doplňkových služeb a doporučených produktů vykresluje aplikace FV
   Studio, která si svůj styl přidává až za tento soubor. Na shodné
   specificitě by tedy vyhrála ona — proto u nich sahám po delších
   selektorech a !important. Jinde se obojímu vyhýbám.
   ========================================================================== */
   body.in-kosik .cart-table .related {
    padding-left: 0px;
}

:root {
    --wt-cart-beige: #F4F2ED;
    --wt-cart-free-shipping: #ecfff4;
    --wt-cart-total: #F3F2EE;
    --wt-cart-green: #264734;
    --wt-cart-stock: #228753;
    --wt-cart-line: #CFD1C2;
    --wt-cart-muted: #7C7A73;

    --wt-cart-icon-remove: url(https://www.olivie.sk/user/documents/upload/Images/bin.svg);
    --wt-cart-icon-related: url(https://www.olivie.sk/user/documents/upload/Images/zelena-zarovka.svg);
    --wt-cart-icon-add: url(https://www.olivie.sk/user/documents/upload/Images/kosik-ico.svg);
    --wt-cart-icon-info: url(https://www.olivie.sk/user/documents/mime/src/icon/tooltip-i.svg);
}

@media (max-width: 767px) {

    /* --- produktový řádek ---------------------------------------------- */

    body.in-kosik .cart-table tr.wt-cart-row {
        /* stretch, ne flex-start: řádek je sloupcový flex a při flex-start by
           se buňky smrskly na šířku obsahu — u krátkého názvu produktu by pak
           dostupnost neodsedla doprava. */
        align-items: stretch;
        padding: 0 0 20px 130px;
        /* Náhled je absolutně pozicovaný, do výšky řádku se tedy nepočítá,
           ale lišta souvisejících pod ním leží (má záporný levý margin).
           Rezerva musí pokrýt i výšku lišty a spodní padding (border-box):
           120px náhled + 10px odstup + 45px lišta + 20px padding = 195px. */
        min-height: 195px;
        border-bottom: none;
        margin-bottom: 0px;
    }

    /* Bez lišty souvisejících stačí vyhradit samotný náhled, jinak by pod
       ním zbylo prázdné místo po lište, která tam není. */
    body.in-kosik .cart-table tr.wt-cart-row:not(:has(.wt-cart-related)) {
        min-height: 140px;
    }

    /* Pružná rozpěra mezi obsahem a lištou souvisejících (ta má order: 90).
       Při krátkém obsahu vyplní zbytek výšky řádku — lišta sedí na dně, jak
       jí dřív zajišťoval margin-top: auto. Při dlouhém obsahu (zalomená cena
       s počtem kusů na úzkém displeji, víceřádkový název) se smrskne, ale
       nikdy pod 10px, takže lišta nikdy nesedí nalepená na obsahu.

       Odstup je poloviční oproti dřívějším 20px: lišta souvisejících patří
       k produktu nad sebou, ne mezi produkty, a při větší mezeře se opticky
       lepila spíš k následující položce. Mezera k dalšímu produktu (spodní
       padding řádku, 20px) je tím pádem dvojnásobná a příslušnost je jasná. */
    body.in-kosik .cart-table tr.wt-cart-row::after {
        content: '';
        order: 89;
        flex: 1 0 10px;
        min-height: 10px;
    }


    /* Buňka se součtem drží formulář pro odebrání položky. Necháváme ji na
       místě (formulář vložený přímo do <tr> šablona schovává) a jen z ní
       uděláme křížek v levém horním rohu řádku. */
    body.in-kosik .wt-cart-row .p-total {
        position: absolute;
        /* Koš vpravo od názvu, na pravém okraji řádku (zadání klienta), ne
           v rámu náhledu. Containing block je celý řádek, takže right: 0 je
           jeho pravá hrana — tam končí i název, který má kvůli koši pravý
           odstup (viz .main-link). Svisle na střed prvního řádku názvu:
           řádek písma 14px × 1,25 = 17,5px, ikona 21px → −2px. */
        top: -2px;
        right: 0;
        left: auto;
        width: 21px;
        height: 21px;
        margin: 0;
        padding: 0;
        z-index: 2;
    }

    body.in-kosik .wt-cart-row .p-total > .p-label,
    body.in-kosik .wt-cart-row .p-total > .price-final {
        display: none;
    }

    body.in-kosik .wt-cart-row .p-total .remove-item {
        /* Šablona tlačítko pozicuje absolutně (right: 0 + top); v boxu
           .p-total má prostě vyplnit 21 × 21px, proto statické. */
        position: static !important;
        display: block;
        width: 21px;
        height: 21px;
        margin: 0;
        padding: 0;
        border: 0;
        background: var(--wt-cart-icon-remove) no-repeat center / 21px 21px;
        text-indent: -9999px;
        overflow: hidden;
    }

    body.in-kosik .wt-cart-row .cart-p-image {
        left: 0px;
        top: 0px;
        width: 120px;
        height: 120px;
        padding: 2px;
        box-sizing: border-box;
        border-radius: 3px;
        border: 1px solid var(--wt-cart-line);
        background-color: #fff;
        /* Rám je pevný, obrázek se do něj musí vejít celý. Obsah centrujeme
           flexem, ať sedí i nižší/užší náhledy. */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    /* Shoptet obaluje náhled odkazem — bez rozměrů by se img počítalo proti
       inline elementu a přeteklo. Odkaz proto roztáhneme na celou buňku. */
    body.in-kosik .wt-cart-row .cart-p-image a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }

    body.in-kosik .wt-cart-row .cart-p-image img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Popisky sloupců dávají smysl jen v tabulkovém rozvržení. */
    body.in-kosik .wt-cart-row .p-label,
    body.in-kosik .wt-cart-row .mime-manufacturer,
    body.in-kosik .wt-cart-row .availability-amount {
        display: none;
    }

    body.in-kosik  .cart-table .p-availability
    {
        margin-bottom: 0px;
    }

    body .cart-table .cart-p-image a
    {
        background-color: transparent !important;
        border-radius: 3px;
    }

    /* Číslovka i znaménka běžným řezem — v návrhu počítadlo nekonkuruje
       ceně vedle sebe, ta jediná v řádku zůstává tučná.

       Počítadlo je jediný kus markupu, který stránka košíku sdílí s oknem
       košíku (#cart-widget), a má v obou vypadat stejně — proto jedno
       pravidlo pro obojí, ať se hodnoty nerozejdou. Šablona má v okně jinou
       velikost (číslovka 14px, plus 16px, minus 4px široký, 110px celkem). */
    body.in-kosik .quantity .amount, body.in-kosik .quantity .decrease,body.in-kosik .quantity .increase,
    body #cart-widget .quantity .amount, body #cart-widget .quantity .decrease, body #cart-widget .quantity .increase
    {
        font-weight: 400 !important;
        font-size: 16px !important;
    }

    /* Znaménka počítadla. Šablona je kreslí každé jinak: plus je textové
       „+“ v ::before, minus je obarvený obdélníček 4 × 1,5 px (bez textu).
       Sjednotit je proto nejde jedním pravidlem. */
    body.in-kosik .quantity .increase::before,
    body #cart-widget .quantity .increase::before {
        font-size: 20px;
        font-weight: 400;
    }

    /* Minus dorovnáváme na optickou šířku plusu (~10 px) a na tloušťku
       jeho čáry — ta je u běžného řezu tenčí než u ztučněného. */
    body.in-kosik .quantity .decrease::before,
    body #cart-widget .quantity .decrease::before {
        width: 10px;
        height: 1.5px;
    }

    body.in-kosik .quantity,
    body #cart-widget .quantity {
        width: 95px;
    }


    body.in-kosik .wt-cart-row .p-name {
        display: block;
        margin: 0;
    }

    body.in-kosik .wt-cart-row .main-link {
        display: block;
        /* Vpravo od názvu sedí koš (21px + mezera), text pod něj nesmí. */
        padding-right: 31px;
        font-weight: 700;
        font-size: 14px;
        /* 1.25, ne 1: dlouhý název se zalomí na víc řádků a ty se s
           line-height 1 slepí. Zalomit se smí i uvnitř slova, ať nikdy
           nepřeteče do šířky. */
        line-height: 1.25;
        overflow-wrap: anywhere;
        color: #000;
        text-decoration: none;
    }

    body.in-kosik .wt-cart-row .main-link-variant {
        display: block;
        margin-top: 6px;
        font-weight: 400;
        font-size: 12px;
        line-height: 1.3;
        color: var(--wt-cart-muted);
        text-transform: none;
    }

    /* parametr zboží + dostupnost na jednom řádku */
    body.in-kosik .wt-cart-meta {
        display: flex;
        /* Dlouhý parametr + dostupnost se na úzkém displeji smí zalomit. */
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 10px;
    }

    body.in-kosik .wt-cart-meta .product-appendix {
        display: inline-block;
        /* Rámeček je široký jen podle textu, ne přes celý řádek. Na flexovém
           potomkovi to nezařídí width: fit-content — flex-basis: auto ho
           rozšíří podle volného místa, teprve flex: 0 0 auto ho udrží na
           šířce obsahu. max-width drží dlouhý parametr uvnitř řádku, ten se
           pak zalomí (viz line-height níž). */
        flex: 0 0 auto;
        width: fit-content;
        max-width: 100%;
        box-sizing: border-box;
        padding: 7px;
        border: 1px solid var(--wt-cart-line);
        font-weight: 400;
        font-size: 11px;
        /* Dlouhý parametr se uvnitř štítku zalomí (line-height > 1, aby se
           řádky neslepily) místo aby štítek přetekl šířku řádku. */
        line-height: 1.3;
        color: #000;
        white-space: normal;
    }

    /* Dostupnost drží vlevo pod štítkem s parametrem, ať už je štítek
       jakkoli dlouhý a ať u položky vůbec je. Dřív ji margin-left: auto
       tlačil vpravo, jenže jakmile jedné položce zalomil dlouhý parametr
       štítek přes celou šířku, spadla ta dostupnost doleva a v košíku pak
       část položek měla „Skladem“ vlevo a část vpravo. Jednotné zarovnání
       vlevo drží sloupec klidný nezávisle na délce parametru. */
    body.in-kosik .wt-cart-meta .availability-label {
        flex: 0 0 auto;
        margin-left: 0;
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        letter-spacing: -0.02em;
        color: var(--wt-cart-stock);
    }

    /* Štítek se teď šířkou drží textu, ale dostupnost má i tak zůstat pod
       ním, ne vedle — jinak by u krátkého parametru skákala vedle štítku a
       u dlouhého pod něj. Dřív to zajišťoval flex: 1 0 100% na samotném
       štítku, ten ale zároveň roztahoval rámeček přes celý řádek. Zalomení
       proto přesouváme na dostupnost: ta si bere celou šířku a tím spadne
       pod štítek, zatímco rámeček zůstane široký podle textu.

       Řádek se ale nesmí zalomit u položky, která parametr nemá — proto
       :not(:first-child). Bez toho by osamocená dostupnost dostala vlastní
       řádek a odsedla si zbytečné místo. */
    body.in-kosik .wt-cart-meta .availability-label:not(:first-child) {
        flex: 1 0 100%;
    }

    /* původní cena + slevový štítek */
    body.in-kosik .wt-cart-orig {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
    }

    /* koncová cena + počet kusů */
    body.in-kosik .wt-cart-priceline {
        display: flex;
        /* Na úzkém displeji (~320px) se cena a počet kusů vedle sebe
           nevejdou — počítadlo pak spadne pod cenu a gap drží odstup. */
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 4px;
    }

    body.in-kosik .wt-cart-priceline .p-price {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        align-items: baseline;
        gap: 4px;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    body.in-kosik .wt-cart-priceline .p-price .show-tooltip,
    body.in-kosik .wt-cart-priceline .p-price .price-final,
    body.in-kosik .wt-cart-priceline .p-price .unit-value {
        display: inline;
        white-space: nowrap;
    }

    body.in-kosik .wt-cart-priceline .p-quantity {
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
    }

    body.in-kosik .wt-cart-saved {
        margin-top: 6px;
    }

    /* --- související produkty ------------------------------------------- */

    body.in-kosik .wt-cart-related {
        order: 90;
        display: flex;
        align-items: center;
        width: calc(100% + 130px);
        /* Lišta se přes záporný levý margin roztahuje i pod náhled. Svislou
           polohu jí určuje pružná rozpěra (tr::after výš) — margin-top: auto
           tu být nesmí, přebil by ji. */
        margin: 0 0 0 -130px;
        padding: 11px 38px;
        border: 1px solid var(--wt-cart-line);
        font-weight: 700;
        font-size: 13px;
        line-height: 1.6;
        color: #000;
        text-decoration: none;
        background: var(--wt-cart-icon-related) no-repeat 14px center / 17px 17px;
    }

    body.in-kosik .wt-cart-related::before {
        content: none;
    }

    body.in-kosik .wt-cart-related::after {
        content: '';
        position: absolute;
        right: 14px;
        width: 9px;
        height: 9px;
        border-right: 1.5px solid #000;
        border-bottom: 1.5px solid #000;
        transform: translateY(-3px) rotate(45deg);
    }

    body.in-kosik .cart-table tr.related td {
        padding-top: 12px;
    }

    /* Rozbalený seznam souvisejících. Šablona kreslí každou položku jako
       kartu na výšku: náhled 50px vlevo, pod ním název, dostupnost, cena a
       teprve dole plné tlačítko — 190px na položku, takže čtyři nabídky
       zabraly víc místa (713px) než celý košík nad nimi. Skládáme je do
       vodorovného řádku: náhled vlevo, texty uprostřed, cena s akcí vpravo. */
    body.in-kosik .cart-related-product {
        display: flex;
        /* Šablona kartu skládá na výšku (flex-direction: column), přepínáme
           ji na řádek — proto je směr uvedený výslovně. */
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
    }

    body.in-kosik .cart-related-product + .cart-related-product {
        border-top: 1px solid var(--wt-cart-line);
    }

    /* Kartička sdružuje náhled a texty; zbytek řádku si bere cena s akcí.
       min-width: 0 nechá dlouhý název ořezat místo aby roztlačil řádek.

       flex-wrap se musí vypnout výslovně: šablona ho má zapnutý a název se
       vedle náhledu nevejde, takže spadl pod něj a řádek vyrostl zpátky na
       původní výšku (68 + název + dostupnost = 111px). */
    body.in-kosik .cart-related-info {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    /* Název a dostupnost pod sebou vedle náhledu. Obal dopisuje wt-cart.js —
       v šabloně jsou přímými sourozenci obrázku, takže bez něj by je flex
       řádku rozstrkal vedle sebe do jedné linky. */
    body.in-kosik .wt-cart-related-text {
        flex: 1 1 auto;
        /* min-width: 0 by pustil sloupec až na nulu — na 320px z názvu
           zbylo „Stří…“. Spodní hranice mu drží čitelný název a zbytek
           ušetří ustupující náhled.

           Vyšší hranice (96px) se do 320px displeje nevejde: roztáhla
           .cart-table na 321px a s ní celou stránku do vodorovného rolování. */
        min-width: 72px;
    }

    /* Náhled je větší než původních 50px — na tom nebyl šperk poznat, což
       byla první výtka. Čtverec 68px se do zúženého řádku pořád vejde a
       neroste s ním výška: je to nejvyšší prvek řádku a určuje jeho výšku. */
    body.in-kosik .cart-related-img {
        /* Na 320px se 68px náhled, texty a cena vedle sebe nevejdou a
           sloupec s názvem se smrskl na dvě písmena. Náhled proto smí
           ustoupit až na 44px; výška zůstává 68px, ať řádky drží stejnou
           výšku bez ohledu na to, kolik místa náhledu zbylo. */
        flex: 0 1 68px;
        width: 68px;
        min-width: 44px;
        height: 68px;
    }

    body.in-kosik .cart-related-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Řezy rozlišené podle důležitosti: název běžný (dřív 700/16px, tučné
       bylo úplně všechno), dostupnost drobná, cena jako jediná tučná —
       stejná hierarchie jako u položek košíku nad seznamem.
       Dva řádky názvu stačí, delší se ořízne — u položky, kterou si zákazník
       teprve prohlíží, nemusí být celý kód i gramáž. */
    body.in-kosik .cart-related-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /* Tři řádky, ne dva: název začíná číselným kódem („9450 Stříbrný
           náhrdelník…“), který si první řádek vezme skoro celý, a na úzkém
           displeji pak ze samotného názvu zbylo „St…“. Tři řádky se do
           68px vysokého řádku pořád vejdou (3 × 15,6px), takže karta
           nevyroste. */
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin: 0;
        font-weight: 400;
        font-size: 12px;
        line-height: 1.3;
        color: #000;
    }

    body.in-kosik .cart-related-availability {
        display: block;
        margin: 4px 0 0;
        font-weight: 400;
        font-size: 11px;
        line-height: 1;
    }

    /* Cena nad akcí, obojí zarovnané doprava. Sloupec nesmí ustoupit pod
       šířku ceny, jinak se „14 500 Kč“ zalomí na dva řádky a řádek povyroste. */
    body.in-kosik .cart-related-button {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        /* Šablona dává tlačítkům margin-top: 1rem; ve sloupci ho drží gap. */
        margin: 0;
        /* Sloupec si bere šířku nejširšího prvku — u položek s tlačítkem
           „Do košíku“ je to tlačítko, ne cena. Držíme ho úzký (padding níž),
           ať zbyde na název: ten se jinak ořízne po dvou slovech. */
    }

    body.in-kosik .cart-related-button .price-final {
        margin: 0;
        font-weight: 700;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        color: #000;
    }

    body.in-kosik .cart-related-button form {
        margin: 0;
    }

    /* „Detail“ byl plnobarevné tlačítko 110 × 50px — v seznamu nabídek
       přebíjelo i tlačítka vlastního košíku. Zůstává z něj podtržený odkaz. */
    body.in-kosik .cart-related-button .btn {
        min-height: 0;
        margin: 0;
        white-space: nowrap;
    }

    /* Barvu textu má šablona jako `.btn.btn-primary { color: #fff !important }`
       — na to nestačí vyšší specificita, musí se přebít taky !important,
       jinak zůstane odkaz bílý a na béžové kartě není vidět. */
    body.in-kosik .cart-related-button .btn.btn-primary {
        padding: 0;
        border: 0;
        background: none;
        font-weight: 400;
        font-size: 12px;
        line-height: 1.2;
        color: #000 !important;
        text-decoration: underline;
    }

    /* Položky, které jdou koupit rovnou, mají místo odkazu tlačítko do
       košíku. Šablona z něj dělá absolutně pozicovaný čtverec 50 × 50px
       přilepený do rohu karty (`.cart-related-button .btn.add-to-cart-button`,
       text schovaný přes font-size: 0 a nahrazený „+“ v ::before). Ve
       vodorovném řádku nemá roh, kam by se přilepil, a čtverec by z řádku
       udělal padesátipixelový. Vracíme ho do toku jako drobné tlačítko —
       specificita musí sedět na dvě třídy prvku, samotné .btn-conversion
       je slabší než .btn.add-to-cart-button a nepřebilo by ho. */
    body.in-kosik .cart-related-button .btn.add-to-cart-button {
        position: static;
        width: auto;
        height: auto;
        /* Vodorovný padding drží tlačítko úzké: sloupec vpravo je široký
           podle nejširšího prvku a tlačítko je širší než cena, takže každý
           pixel navíc ukrajuje z názvu vlevo. */
        padding: 7px 10px;
        font-size: 12px;
        line-height: 1.2;
        /* Šablona text schovává (color: transparent + font-size: 0) a kreslí
           místo něj „+“. Tady má být čitelné „Do košíku“. */
        color: #fff;
    }

    body.in-kosik .cart-related-button .btn.add-to-cart-button::before {
        content: none;
    }

    /* Nejužší displeje (do ~360px). Sloupec vpravo je široký podle tlačítka
       „Do košíku“ (~89px) a o to je užší sloupec s názvem — na 320px z něj
       zbylo „St…“. Zkrácený popisek „Do košíku“ → „Koupit“ ušetří ~25px,
       které padnou názvu. Nad touto hranicí zůstává plný text. */
    @media (max-width: 360px) {
        body.in-kosik .cart-related-button .btn.add-to-cart-button {
            padding: 7px 8px;
            /* Text nahrazujeme přes ::after, ne z JS: šablona tlačítko po
               AJAX přepočtu košíku překresluje a nastavený text by zmizel. */
            font-size: 0;
        }

        body.in-kosik .cart-related-button .btn.add-to-cart-button::after {
            content: 'Kúpiť';
            font-size: 12px;
            line-height: 1.2;
        }
    }

    /* --- doplňkové služby ----------------------------------------------- */

    /* Nadpis „Doplňkové služby“ návrh nemá, bloky jdou hned za sebou. */
    body.in-kosik .fvDoplnek-upsell > h4,
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services > h5,
    body.in-kosik .mehub-bonus-checkout-inner-container > h4 {
        display: none !important;
    }

    /* Zaškrtnout službu jde klepnutím kamkoli na řádek (obsluhu má
       wt-cart.js), proto kurzor ruky a nevybíratelný text — jinak by
       podržený prst na mobilu označoval název místo zaškrtnutí. */
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-produkt {
        position: relative;
        margin: 0 !important;
        padding: 0 15px !important;
        background: none !important;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Podbarvená je jen zaškrtnutá služba a podbarvení jde až do kraje
       stránky. Obsahový sloupec košíku má na mobilu 15px odsazení (změřeno
       od 320 do 767 px, drží konstantní), tak ho vyrušíme záporným okrajem
       a paddingem dorovnáme text zpět, ať sedí v zákrytu s nepodbarvenými
       řádky. Stejný postup má v tomhle souboru rekapitulace ceny.

       Stav držíme dvěma cestami: :has() reaguje hned na klik, třídu
       wt-cart-service-on dopisuje wt-cart.js. Aplikace FV Studio totiž po
       zaškrtnutí vymění celý uzel a checkbox v novém markupu bývá zaškrtnutý
       jen atributem — na to :has(:checked) v některých průchodech nestačí. */
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-produkt:has(input.fvDoplnek-variant-checkbox:checked),
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-produkt.wt-cart-service-on {
        margin: 0 -15px !important;
        padding: 0 30px !important;
        background: var(--wt-cart-beige) !important;
        /* Aplikace zaškrtnuté položce kreslí ještě 1px rámeček (outline),
           návrh má jen podbarvení. */
        outline: none !important;
    }

    /* Bílá dělící linka mezi službami dávala smysl, dokud byly podbarvené
       všechny. Teď oddělujeme linkou v barvě rámečků, ale jen tam, kde na
       sebe navazují dvě nepodbarvené položky. */
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-produkt + .fvDoplnek-produkt {
        border-top: 1px solid var(--wt-cart-line);
    }

    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-produkt:has(input.fvDoplnek-variant-checkbox:checked),
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-produkt.wt-cart-service-on,
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-produkt:has(input.fvDoplnek-variant-checkbox:checked) + .fvDoplnek-produkt,
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-produkt.wt-cart-service-on + .fvDoplnek-produkt {
        border-top-color: transparent;
    }

    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-produkt > form {
        align-items: center !important;
        gap: 10px;
        margin: 0 !important;
        padding: 12px 0 !important;
    }

    /* Popis služby je v návrhu skrytý, zůstává v bublině u ikony (i). */
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-description {
        display: none !important;
    }

    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvcontent {
        display: block !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .header {
        display: flex !important;
        align-items: center;
        gap: 10px;
    }

    /* Aplikace zaškrtávátko absolutně pozicuje a text posouvá pod něj,
       vracíme ho do toku, ať funguje flex řádek. */
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .header > span:first-child {
        position: static !important;
        flex: 0 0 auto;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.in-kosik .fvDoplnek-upsell .mime-ddd-services input.fvDoplnek-variant-checkbox {
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        accent-color: var(--wt-cart-green);
    }

    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-text {
        display: flex !important;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Název drží sloupec o stejné šířce u všech služeb, ne šířku vlastního
       textu. Dřív mu flex: 0 1 auto dával šířku podle názvu (106 / 165 /
       145 px) a obrázek za ním pak u každé služby začínal jinde — obrázky
       se v seznamu nedržely v jednom sloupci a u dlouhého názvu se s ním
       navíc dotýkaly.

       Základ 165px odpovídá nejširšímu názvu („Prodloužená lhůta na vrácení
       - 90 dní"), ale sloupec musí umět ustoupit: pevných 165px se i s
       obrázkem a cenou nevejde do 320px displeje a řádek pak přetékal přes
       pravý okraj stránky. flex-shrink: 1 (+ min-width: 0, jinak by ho
       držela minimální šířka obsahu) ho na úzkém displeji zúží, na širším
       zůstane na 165px a obrázky se srovnají do sloupce. */
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-service-item-wrapper {
        /* flex-basis 100%, ne 165px: při 165px se krátký název („Dárkové
           balení") na úzkém displeji smrskl na svůj text dřív než delší
           názvy a obrázky se zase o pár px rozešly. Se 100% narazí všechny
           sloupce na max-width současně a zužují se stejně, takže obrázky
           drží jeden sloupec na každé šířce. */
        flex: 1 1 100%;
        min-width: 0;
        max-width: 165px;
    }

    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-text .name {
        font-weight: 700 !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        color: #000 !important;
    }

    /* Obrázek dostává vlastní sloupec a v něm se centruje, ať jsou náhledy
       jakkoli široké (jsou různě: krabice na šířku, obálka, kostka). Bez
       vlastního sloupce by je do řady srovnal jen jejich levý okraj a
       opticky by stejně lítaly. object-fit: contain drží celý náhled uvnitř
       sloupce, nic se neořízne. Sloupec smí na úzkém displeji zúžit stejně
       jako název, aby se řádek vešel do 320px. */
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-produkt img.fvDoplnek-product-image {
        flex: 0 1 62px;
        width: 62px !important;
        height: 54px !important;
        margin: 0 !important;
        object-fit: contain;
    }

    /* Aplikace kreslí (i) jako zelené kolečko s písmenem „i" v monospace, a
       to až v pseudoprvku ::after — vlastní <span> je bez rozměru. Ikonu
       proto kreslíme rovnou spanu a ::after schováme: pseudoprvek se nedá
       samostatně kliknout, takže by klepnutí na ikonu spadlo na řádek a
       zaškrtlo službu (řádek klik přepošle checkboxu, viz wt-cart.js). Se
       spanem jako skutečným cílem zůstává (i) svou vlastní bublinou.

       Ikona je stejná jako u poznámky k věrnostnímu programu
       (--wt-cart-icon-info) a sedí v řádku mezi náhledem a cenou. */
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-text .upsell-product-tooltip {
        flex: 0 0 auto;
        margin-left: auto;
        width: 16px !important;
        height: 16px !important;
        background: var(--wt-cart-icon-info) no-repeat center / 16px 16px !important;
        /* Uvnitř spanu je nezlomitelná mezera, která by ikonu rozšířila. */
        font-size: 0 !important;
        color: transparent !important;
    }

    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .upsell-product-tooltip::after {
        display: none !important;
    }

    /* Cena má vlastní sloupec pevné šířky a text v něm zarovnaný doprava.
       Bez toho si širší cena („149 Kč" oproti „49 Kč") ukrojí víc místa a
       o ten rozdíl se na úzkém displeji zúží sloupec s názvem — obrázky se
       pak u jednotlivých služeb rozešly o pár pixelů. Se stejně širokým
       sloupcem u všech služeb drží obrázky jeden sloupec na každé šířce. */
    body.in-kosik .fvDoplnek-upsell .mime-ddd-services .fvDoplnek-text .price {
        flex: 0 0 52px;
        text-align: right;
        font-weight: 700 !important;
        font-size: 14px !important;
        line-height: 1 !important;
        color: #000 !important;
        white-space: nowrap;
    }

    /* text na přáníčko */
    body.in-kosik .fvDoplnek-upsell .assign_product_message_wrapper {
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    body.in-kosik .fvDoplnek-upsell .assign_product_message_wrapper fieldset {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
    }

    body.in-kosik .fvDoplnek-upsell textarea.assign_product_message {
        min-height: 86px;
        padding: 12px;
        border: 1px solid var(--wt-cart-line);
        background: #fff;
        font-size: 13px;
        resize: none;
    }

    body.in-kosik .wt-cart-counter {
        margin-top: 6px;
        font-size: 11px;
        line-height: 1;
        color: var(--wt-cart-muted);
        text-align: right;
    }

    /* --- doporučené produkty -------------------------------------------- */

    body.in-kosik .fvDoplnek-upsell > h5 {
        margin: 26px 0 12px !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        line-height: 1 !important;
        color: #000 !important;
    }

    body.in-kosik .fvDoplnek-upsell .mime-add-products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    /* Záchranná brzda pro carousel šablony. Spouští se jen někdy a wt-cart.js
       ho ruší, ale než se tak stane, zabalí položky do svých obalů a nechá
       jim inline pozicování. Obaly proto vyřadíme z rozvržení a pozicování
       položek přebijeme, takže mřížka drží bez ohledu na to, jestli karusel
       zrovna běží, nebo po sobě něco nechal. */
    body.in-kosik .fvDoplnek-upsell .mime-add-products .flickity-viewport,
    body.in-kosik .fvDoplnek-upsell .mime-add-products .flickity-slider {
        display: contents;
    }

    body.in-kosik .fvDoplnek-upsell .mime-add-products .flickity-button,
    body.in-kosik .fvDoplnek-upsell .mime-add-products .flickity-page-dots {
        display: none !important;
    }

    body.in-kosik .fvDoplnek-upsell .mime-add-products .fvDoplnek-produkt {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        background: #fff !important;
    }

    body.in-kosik .fvDoplnek-upsell .mime-add-products .fvDoplnek-produkt > form {
        display: block !important;
        margin: 0 !important;
    }

    body.in-kosik .fvDoplnek-upsell .mime-add-products .fvDoplnek-produkt img.fvDoplnek-product-image {
        display: block !important;
        width: 100% !important;
        height: 120px !important;
        margin: 0 0 10px !important;
        object-fit: contain !important;
    }

    body.in-kosik .fvDoplnek-upsell .mime-add-products .fvcontent,
    body.in-kosik .fvDoplnek-upsell .mime-add-products .header,
    body.in-kosik .fvDoplnek-upsell .mime-add-products .fvDoplnek-text {
        display: block !important;
    }

    /* Zaškrtávátko nahrazuje tlačítko s ikonou košíku. */
    body.in-kosik .fvDoplnek-upsell .mime-add-products input.fvDoplnek-variant-checkbox,
    body.in-kosik .fvDoplnek-upsell .mime-add-products .fvDoplnek-description {
        display: none !important;
    }

    body.in-kosik .fvDoplnek-upsell .mime-add-products .fvDoplnek-text .name {
        display: inline !important;
        font-weight: 400 !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        color: #000 !important;
    }

    body.in-kosik .fvDoplnek-upsell .mime-add-products .fvDoplnek-text .price {
        display: flex !important;
        align-items: center;
        min-height: 34px;
        margin: 8px 0 0 !important;
        padding: 0 44px 0 0 !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        color: #000 !important;
    }

    body.in-kosik .fvDoplnek-upsell .mime-add-products .fvDoplnek-produkt > .btn {
        position: absolute !important;
        right: 10px !important;
        bottom: 10px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--wt-cart-icon-add) no-repeat center / 34px 34px !important;
        font-size: 0 !important;
        overflow: hidden;
    }

    /* --- dárky a slevy --------------------------------------------------- */

    body.in-kosik .cart-summary > .h4 {
        margin: 26px 0 12px;
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        color: #000;
    }

    body.in-kosik .cart-summary .extras-wrapper {
        display: block;
    }

    body.in-kosik .cart-summary .extras-col {
        width: 100%;
        padding: 0;
    }

    body.in-kosik .extra.delivery {
        margin: 0;
        padding: 14px 16px;
        background: var(--wt-cart-free-shipping);
        font-size: 13px;
        line-height: 1.4;
        text-align: center;
    }

    body.in-kosik .extra.delivery .price-range {
        display: none;
    }

    /* Ikona (i) a text vedle sebe, ikona svisle na střed textu. Dřív ji
       držel absolutní ::before přilepený k hornímu okraji — u zkráceného
       dvouřádkového textu (viz rewriteLoyalty() ve wt-cart.js) pak ikona
       seděla u prvního řádku místo uprostřed. Flex to zvládne bez ohledu na
       to, na kolik řádků se text zrovna zalomí. */
    body.in-kosik .wt-cart-loyalty {
        display: flex;
        align-items: center;
        gap: 15px;
        margin: 14px 0 0;
        padding: 0;
    }

    body.in-kosik .wt-cart-loyalty::before {
        content: '';
        flex: 0 0 auto;
        width: 25px;
        height: 25px;
        background: var(--wt-cart-icon-info) no-repeat center / 25px 25px;
    }

    body.in-kosik .wt-cart-loyalty a {
        color: black;
        font-weight: 700;
    }

    body.in-kosik .wt-cart-loyalty p {
        /* Aplikace odstavci nastavuje margin-bottom inline; rewriteLoyalty()
           ho odstraňuje, tohle je pojistka pro průchod, kde by skript ještě
           neproběhl. */
        margin: 0 !important;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.35;
        color: #000;
    }

    /* --- rekapitulace ceny ------------------------------------------------ */

    body.in-kosik .summary-wrapper {
        padding-top: 0;
        background: none;
        background: var(--wt-cart-total);
    }

    body.in-kosik .summary-wrapper > .box {
        padding: 0;
        border: 0;
        background: none;
    }

    body.in-kosik .summary-wrapper .price-wrapper {
        justify-content: space-between;
        gap: 10px;
        margin: 10px -15px 0;
        padding: 13px 15px;
        border-top: 1px solid #CECCC3;
    }

    /* Cenu bez DPH návrh neuvádí. */
    body.in-kosik .summary-wrapper .price-secondary {
        display: none;
    }

    /* Popisek i text tlačítka měníme v CSS, ne skriptem: shoptetí přepočet
       rekapitulace tyto prvky vykresluje znovu a změnu z JS by vrátil zpět. */
    body.in-kosik .summary-wrapper .price-label.price-primary {
        /* Popisek je v šabloně blokový a při vyšší ceně vedle sebe by seděl u
           horní hrany řádku. Flexem ho svísle vystředíme v rámci buňky. */
        display: flex;
        align-items: center;
        align-self: stretch;
        margin: 0;
        font-size: 0;
    }

    body.in-kosik .summary-wrapper .price-label.price-primary::after {
        content: 'Zaplatíte celkom (vr. DPH):';
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        color: #000;
    }

    body.in-kosik .summary-wrapper .price.price-primary {
        margin: 0;
        font-weight: 700;
        font-size: 22px;
        line-height: 1;
        color: #000;
    }

    /* --- slevový kupón ---------------------------------------------------- */

    body.in-kosik .wt-cart-coupon {
        /* Kupón jede přes celou šířku boxu, stejně jako tlačítko pod ním. */
        display: block;
        width: 100%;
        margin: 0 0 14px;
        padding: 0;
    }

    body.in-kosik .wt-cart-coupon .discount-code-title {
        display: none;
    }

    body.in-kosik .wt-cart-coupon .input-group {
        display: flex;
        width: 100%;
        max-width: inherit;
        margin: 0;
    }

    body.in-kosik .wt-cart-coupon .form-control {
        /* Pole a tlačítko sedí těsně vedle sebe, proto žádný radius ani mezera. */
        flex: 1 1 auto;
        min-width: 0;
        height: 40px;
        padding: 0 12px;
        border: 1px solid var(--wt-cart-line);
        border-radius: 0;
        background: #F8F8F8;
        font-family: 'Open Sans', Arial, sans-serif;
        font-weight: 400;
        font-size: 13px;
        line-height: 38px;
        color: #000;
        box-shadow: none;
    }

    body.in-kosik .wt-cart-coupon .form-control::placeholder {
        font-size: 13px;
        color: #898C79;
        opacity: 1;
    }

    body.in-kosik .wt-cart-coupon .form-control:focus {
        border-color: var(--wt-cart-line);
        background: #F8F8F8;
        box-shadow: none;
    }

    body.in-kosik .wt-cart-coupon .btn {
        /* Poměr 242 : 127 px z návrhu, ale roztažený na celou šířku boxu —
           procenta místo pevné šířky, ať to sedí na každém displeji. */
        flex: 0 0 34.4%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        padding: 0 10px;
        border: 0;
        border-radius: 0;
        background: #429C67;
        text-align: center;
        font-family: 'Prizma Premium', 'Adjusted Arial Fallback Prizma', Arial, sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: #fff;
    }

    /* --- nezapomněli jste něco (DKlab Favourites) ------------------------- */

    /* Aplikace DKlab Favourites vlastní <h2> vůbec nestylizuje, takže dědí
       obří 40px z globálního stylu nadpisů — na mobilu to působilo jako
       hlavní nadpis stránky a při rychlém projetí dolů mohlo hlavní CTA
       (Pokračovat v objednávce) vypadnout z prvního dojezdu. Textaci zkracuje
       wt-cart.js (rewriteTexts), tady jen zmenšujeme písmo na běžný headline.
       Aplikace si CSS načítá až za tento soubor, proto !important. */
    body.in-kosik #dkLabFavCartWrapper #dkLabFavCartHeader h2 {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 20px 0 !important;
    }

    /* --- pokračovat v objednávce ------------------------------------------ */

    /* Odkaz zpět do obchodu ani kontaktní box návrh na mobilu nemá. */
    body.in-kosik .next-step .next-step-back,
    body.in-kosik .sidebar-in-cart .checkout-box-wrapper {
        display: none !important;
    }

    body.in-kosik .summary-wrapper .next-step {
        display: block;
        margin: 16px 0 0;
        padding: 0;
    }

    body.in-kosik .summary-wrapper .next-step-forward {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 86px;
        padding: 10px 20px;
        border: 0;
        border-radius: 0;
        background: var(--wt-cart-green);
        font-size: 0;
    }

    body.in-kosik .summary-wrapper .next-step-forward::after {
        content: 'Pokračovať v objednávke';
        font-family: 'Prizma Premium', 'Adjusted Arial Fallback Prizma', Arial, sans-serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: -0.03em;
        color: #fff;
    }

    /* ======================================================================
       OKNO KOŠÍKU (#cart-widget)
       ----------------------------------------------------------------------
       Samostatný markup s vlastními třídami (cart-widget-*, mime-cart-*),
       se stránkou košíku nesdílí skoro nic. Vizuál přebíráme ze stránky,
       aby obojí vypadalo stejně.
       ====================================================================== */

    /* --- posuvná oblast s patičkou ---------------------------------------- */

    /* Obal .wt-cart-window-scroll dopisuje wt-cart.js (moveWindowFooter):
       přebírá roli posuvné oblasti od .cart-widget-inner a má v sobě inner
       i díly patičky, aby patička rolovala s obsahem místo aby ho ořezávala
       (proč ne jinak, viz komentář ve skriptu). Záporné okraje s paddingem
       jsou převzaté z inneru: posuvník sedí na hraně panelu. */
    body #cart-widget .wt-cart-window-scroll {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        margin: 0 -15px;
        padding: 0 15px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Inner uvnitř obalu už neroluje ani neodsazuje. Roste, ale nesmrskává
       se: krátký obsah tak drží patičku dole jako dřív, dlouhý ji odsune. */
    body #cart-widget .wt-cart-window-scroll > .cart-widget-inner {
        flex: 1 0 auto;
        margin: 0;
        padding: 0;
        overflow: visible;
    }


    /* --- produktový řádek ---------------------------------------------- */

    body #cart-widget .cart-widget-product {
        display: block;
        position: relative;
        /* Stejná geometrie jako řádek na stránce košíku: náhled 120px na
           levém okraji, text od 130px. Rezerva na výšku náhledu — ten je
           absolutně pozicovaný a do výšky řádku se nepočítá; bez ní by u
           položky s krátkým obsahem vyjela lišta souvisejících na náhled. */
        min-height: 120px;
        padding: 0 0 20px 130px;
        /* Bez linek: stránka košíku řádky neodděluje a šablona okna kreslí
           horní linku (#cacaca), která se s lištou souvisejících zdvojovala. */
        border-top: 0;
        border-bottom: 0;
    }

    /* Rám náhledu jako na stránce košíku (.cart-p-image): 120px, 2px
       vnitřní odstup, tenký rámeček, obsah centrovaný. Šablona okna má
       100px a odkaz podbarvuje (#fafafa) — podklad má být bílý. */
    body #cart-widget .cart-widget-product-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 120px;
        height: 120px;
        padding: 2px;
        box-sizing: border-box;
        border: 1px solid var(--wt-cart-line);
        border-radius: 3px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #cart-widget .cart-widget-product-image a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border-radius: 3px;
        background-color: transparent !important;
    }

    body #cart-widget .cart-widget-product-image img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Koš vpravo od názvu na pravém okraji řádku — stejně jako .p-total na
       stránce košíku; název má kvůli němu pravý odstup (viz strong a). */
    body #cart-widget .cart-widget-product-delete {
        position: absolute;
        top: -2px;
        right: 0;
        left: auto;
        width: 21px;
        height: 21px;
        margin: 0;
        padding: 0;
        z-index: 2;
    }

    body #cart-widget .cart-widget-product-delete .remove-item {
        width: 21px;
        height: 21px;
        padding: 0;
        border: 0;
        background: var(--wt-cart-icon-remove) no-repeat center / 21px 21px;
        text-indent: -9999px;
        overflow: hidden;
    }

    /* Šablona dává buňce s názvem pevnou šířku 62 px. */
    body #cart-widget .cart-widget-product-name {
        display: block;
        width: auto !important;
        margin: 0;
    }

    /* Šablona odkaz s názvem ořezává na dvě řádky (height + overflow), čímž
       spolkne i řádek s variantou. Na stránce košíku variantu zobrazujeme,
       takže ořez rušíme. */
    body #cart-widget .cart-widget-product-name strong a {
        display: block;
        /* Vpravo od názvu sedí koš (21px + mezera), text pod něj nesmí. */
        padding-right: 31px;
        height: auto;
        max-height: none;
        overflow: visible;
        -webkit-line-clamp: none;
        font-weight: 700;
        font-size: 14px;
        /* 1.25 jako .main-link na stránce košíku — dvouřádkový název se
           s line-height 1 slepil. */
        line-height: 1.25;
        color: #000;
        text-decoration: none;
    }

    body #cart-widget .cart-widget-product-variant {
        display: block;
        margin-top: 6px;
        font-weight: 400;
        font-size: 12px;
        line-height: 1.3;
        color: var(--wt-cart-muted);
        text-transform: none;
    }

    /* Parametr zboží („Ag 925; ≤1,4 g.“). Šablona ho má uvnitř odkazu s
       názvem, wt-cart.js ho stěhuje pod variantu do .wt-cart-window-meta —
       stejné místo i rámeček jako .wt-cart-meta na stránce košíku. Pravidlo
       platí pro obě polohy, ať štítek vypadá stejně i než skript doběhne. */
    body #cart-widget .wt-cart-window-meta {
        margin-top: 10px;
    }

    body #cart-widget .cart-widget-product .product-appendix {
        display: inline-block;
        width: fit-content;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 7px;
        border: 1px solid var(--wt-cart-line);
        background: none;
        font-weight: 400;
        font-size: 11px;
        line-height: 1.3;
        color: #000;
        white-space: normal;
    }

    /* cena a počet kusů skládá do jednoho řádku wt-cart.js */
    body #cart-widget .wt-cart-window-priceline {
        display: flex;
        /* Stejně jako na stránce košíku: na úzkém displeji (~320px) se cena
           a počet kusů vedle sebe nevejdou — bez zalomení počítadlo vyjelo
           z okna (řádek měl 346px v 320px širokém panelu) a „/ ks“ se
           lámalo na dva řádky. */
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 12px;
    }

    /* Cenu šablona absolutně pozicuje, vracíme ji do toku řádku. */
    body #cart-widget .wt-cart-window-priceline [data-testid="cartWidgetProductPrice"] {
        position: static !important;
        display: inline-block;
        font-weight: 700;
        font-size: 18px;
        line-height: 1;
        color: #000;
        white-space: nowrap;
    }

    body #cart-widget .wt-cart-window-priceline .cart-widget-product-unit {
        display: block;
        margin-right: auto;
        font-size: 14px;
        line-height: 1;
        white-space: nowrap;
        color: #000;
    }

    body #cart-widget .wt-cart-window-priceline .cart-widget-product-unit::before {
        content: '/ ';
    }

    body #cart-widget .wt-cart-window-priceline .cart-widget-product-amount {
        position: static;
        flex: 0 0 auto;
        margin: 0;
    }

    /* --- „Hodilo by se k sobě“ ------------------------------------------ */

    body #cart-widget .mime-rel-products__btn {
        display: flex;
        align-items: center;
        width: 100%;
        margin: 16px 0;
        padding: 11px 38px;
        border: 1px solid var(--wt-cart-line);
        border-radius: 0;
        font-weight: 700;
        font-size: 13px;
        line-height: 1.6;
        color: #000;
        text-align: left;
        background: var(--wt-cart-icon-related) no-repeat 14px center / 17px 17px;
    }

    body #cart-widget .mime-rel-products__btn::before {
        content: none;
    }

    /* Popisek lišty. Aplikace text tlačítka přepisuje při každém kliknutí
       (názvem vybraného slidu, po sbalení svým „Hodilo by se k sobě:“),
       takže text nastavený skriptem by do dalšího průchodu problikával.
       Popisek proto kreslí ::before z atributu, který dopisuje wt-cart.js
       (rebuildWindowRelated) — stejný postup jako u textů rekapitulace na
       stránce košíku. Dokud atribut není, zůstává text aplikace. */
    body #cart-widget .mime-rel-products__btn[data-wt-related-label] {
        font-size: 0;
    }

    body #cart-widget .mime-rel-products__btn[data-wt-related-label]::before {
        content: attr(data-wt-related-label);
        font-weight: 700;
        font-size: 13px;
        line-height: 1.6;
        color: #000;
    }

    /* Šipka jako u .wt-cart-related na stránce košíku. Aplikace kreslí do
       ::after vlastní šipku jako SVG na pozadí (arrow-short-down.svg,
       top: 50%, při rozbalení otočená) — bez vynulování pozadí a top se
       její obrázek zmenšil do našeho 9px čtverce a otočil o 45°. */
    body #cart-widget .mime-rel-products__btn::after {
        content: '';
        position: absolute;
        top: auto;
        right: 14px;
        width: 9px;
        height: 9px;
        border-right: 1.5px solid #000;
        border-bottom: 1.5px solid #000;
        background: none;
        transform: translateY(-3px) rotate(45deg);
        transition: none;
    }

    /* Rozbalený seznam. Aplikace ho kreslí jako karusel (Flickity): jeden
       velký náhled 147 × 118px, název schovaný (.hidden) a promítaný do
       lišty místo popisku, cena jako „14500 / ks“. Na stránce košíku je to
       seznam kompaktních řádků, tak ho skládáme stejně: náhled | název |
       cena s tlačítkem. Karusel ruší wt-cart.js (rebuildWindowRelated);
       tady je stejná záchranná brzda jako u upsellu na stránce košíku —
       obaly karuselu vyřadíme z rozvržení a pozicování položek přebijeme,
       ať seznam drží, i kdyby karusel zrovna běžel nebo po sobě něco
       nechal. */
    body #cart-widget .mime-rel-products {
        margin: 0 0 16px;
        padding: 0;
    }

    /* Sbalená lišta drží 16px odstup od další položky; rozbalený seznam má
       být pod lištou ve stejných 12px jako na stránce košíku. */
    body #cart-widget .mime-rel-products__btn.is-active {
        margin-bottom: 12px;
    }

    body #cart-widget .mime-rel-products .flickity-viewport,
    body #cart-widget .mime-rel-products .flickity-slider {
        display: contents;
    }

    body #cart-widget .mime-rel-products .flickity-button,
    body #cart-widget .mime-rel-products .flickity-page-dots {
        display: none !important;
    }

    body #cart-widget .mime-rel-product {
        position: static !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        background: var(--wt-cart-beige);
    }

    body #cart-widget .mime-rel-product + .mime-rel-product {
        border-top: 1px solid var(--wt-cart-line);
    }

    /* Cena a tlačítko nemají společný obal, do pravého sloupce je sází
       mřížka — na rozdíl od stránky košíku tu není co obalovat skriptem.
       Rozměry jsou stejné jako u .cart-related-product na stránce košíku:
       náhled 68px (na úzkém displeji smí ustoupit na 44px), sloupec názvu
       nejmíň 72px. */
    body #cart-widget .mime-rel-product__wrap {
        display: grid;
        grid-template-columns: minmax(44px, 68px) minmax(72px, 1fr) auto;
        grid-template-areas:
            'img name price'
            'img name btn';
        align-items: center;
        column-gap: 12px;
        row-gap: 6px;
        width: auto !important;
        padding: 10px 12px;
        text-align: left;
    }

    body #cart-widget .mime-rel-product__link {
        grid-area: img;
        display: block;
        width: 100%;
        height: 68px;
    }

    body #cart-widget .mime-rel-product__img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Název aplikace schovává (.hidden), protože ho ukazuje v liště. Lišta
       má teď pevný popisek, název patří k řádku. Tři řádky jako na stránce
       košíku: název začíná kódem produktu, který si první řádek vezme. */
    body #cart-widget .mime-rel-product__name.hidden {
        display: -webkit-box !important;
    }

    body #cart-widget .mime-rel-product__name {
        grid-area: name;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin: 0;
        font-weight: 400;
        font-size: 12px;
        line-height: 1.3;
        color: #000;
    }

    body #cart-widget .mime-rel-product__price {
        grid-area: price;
        justify-self: end;
        align-self: end;
        margin: 0;
        font-weight: 700;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        color: #000;
    }

    /* Tlačítko jako „Do košíku“ na stránce košíku. Popisek „Přidat do
       košíku“ nahrazujeme přes ::after — je delší a v úzkém sloupci by
       ukrajoval z názvu; na nejužších displejích se krátí na „Koupit“
       stejně jako na stránce košíku. */
    body #cart-widget .mime-rel-product__btn {
        grid-area: btn;
        justify-self: end;
        align-self: start;
        width: auto;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 7px 10px;
        border: 0;
        border-radius: 0;
        background: var(--wt-cart-green);
        font-family: 'Prizma Premium', 'Adjusted Arial Fallback Prizma', Arial, sans-serif;
        font-weight: 500;
        font-size: 0;
        line-height: 1.2;
        color: #fff;
        white-space: nowrap;
    }

    body #cart-widget .mime-rel-product__btn::after {
        content: 'Do košíka';
        font-size: 12px;
        line-height: 1.2;
    }

    @media (max-width: 360px) {
        body #cart-widget .mime-rel-product__btn {
            padding: 7px 8px;
        }

        body #cart-widget .mime-rel-product__btn::after {
            content: 'Kúpiť';
        }
    }

    /* --- doprava zdarma -------------------------------------------------- */

    body #cart-widget .cart-free-shipping {
        margin: 0;
        padding: 0px !important;
        background: var(--wt-cart-free-shipping);
        text-align: center;
    }

    body #cart-widget .cart-free-shipping .price-range {
        display: none;
    }

    /* --- rekapitulace ceny ------------------------------------------------ */

    body #cart-widget .mime-cart-footer {
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 16px -15px 0;
        padding: 13px 15px;
        background: var(--wt-cart-total);
    }

    /* Popisek přepisujeme v CSS ze stejného důvodu jako na stránce košíku. */
    body #cart-widget .mime-cart-total {
        margin: 0;
        font-size: 0;
        line-height: 1 !important;
    }

    body #cart-widget .mime-cart-total::after {
        content: 'Zaplatíte celkom (vr. DPH):';
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        color: #000;
    }

    body #cart-widget .mime-cart-total-price {
        margin: 0;
        font-weight: 700;
        font-size: 22px;
        line-height: 1;
        color: #000;
    }

    /* --- slevový kupón ---------------------------------------------------- */

    body #cart-widget .mime-coupon-form {
        margin: 14px 0 0;
    }

    body #cart-widget .mime-coupon-form label {
        display: none;
    }

    body #cart-widget .mime-coupon-form__inner {
        display: flex;
        margin: 0;
    }

    body #cart-widget .mime-coupon-form .form-control {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        height: 44px;
        border: 1px solid var(--wt-cart-line);
        background: #fff;
        font-size: 13px;
    }

    body #cart-widget .mime-coupon-form .btn {
        flex: 0 0 auto;
        height: 44px;
        padding: 0 22px;
        border: 0;
        border-radius: 0;
        font-family: 'Prizma Premium', 'Adjusted Arial Fallback Prizma', Arial, sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: #fff;
    }

    /* --- tlačítka --------------------------------------------------------- */


    body.cart-window-visible #cart-widget .cart-widget-button #continue-order-button {
            min-height: inherit;
    }

}