/* Květinářství Pytlík — doplňkové produkty a příplatky (upsell) */

.pytlik-addons {
    margin: 30px 0 10px;
}

.pytlik-addons__title {
    margin-bottom: 15px;
}

/* --- doplňky v pravém sloupci detailu -------------------------------- */
/* Sekce sedí tam, kde krátký popis končí a začíná volba vzkazu. Je to úzký
   sloupec, takže karty z výpisu kategorie se překládají na řádky: obrázek,
   název, cena, tlačítko. Selektory jdou přes .products-block, protože šablona
   kartám vnucuje šířku sloupce mřížky. */

.pytlik-addons--side {
    margin: 18px 0 22px;
    padding: 14px 16px 6px;
    border: 1px solid #e6efe4;
    border-radius: 10px;
    background: #fbfdfa;
}

.pytlik-addons--side .pytlik-addons__title {
    margin: 0 0 6px;
    font-size: 17px;
}

/* Karty stojí vedle sebe jako nabídka v košíku: nahoře produkt, pod ním cena
   a tlačítko přes celou šířku. Dřív to byly řádky pod sebou, protože sekce
   seděla v úzkém sloupci nad formulářem; pod nákupním blokem je místa dost. */
.pytlik-addons--side .products-block {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.pytlik-addons--side .products-block .product {
    flex: 1 1 170px;
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

.pytlik-addons--side .products-block .product .p {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: none;
}

.pytlik-addons--side .products-block .product .image {
    width: 100%;
    height: 104px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
}

/* Srdíčka jsou fotky na šířku, kytice na výšku — contain je nezkreslí ani neuřízne. */
.pytlik-addons--side .products-block .product .image img {
    width: 100%;
    height: 100%;
    padding: 2px;
    object-fit: contain;
}

.pytlik-addons--side .products-block .product .p-in,
.pytlik-addons--side .products-block .product .p-in-in {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pytlik-addons--side .products-block .product .name {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
}

/* Hvězdičky a dostupnost tu jen zabírají místo — název, cena a tlačítko stačí. */
.pytlik-addons--side .products-block .product .ratings-wrapper,
.pytlik-addons--side .products-block .product .flags,
.pytlik-addons--side .products-block .product .p-desc,
.pytlik-addons--side .products-block .product .availability {
    display: none;
}

/* Cena nad tlačítkem, obojí přes celou šířku karty. */
.pytlik-addons--side .products-block .product .p-bottom,
.pytlik-addons--side .products-block .product .p-bottom > * {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    width: auto;
    margin: 0;
    padding: 0;
}

/* Dolů se odtlačí celý blok s cenou a tlačítkem, ne jeho části zvlášť —
   jinak se cena od tlačítka odtrhne na opačné konce karty. */
.pytlik-addons--side .products-block .product .p-bottom {
    margin-top: auto;
}

.pytlik-addons--side .products-block .product .prices,
.pytlik-addons--side .products-block .product .p-tools,
.pytlik-addons--side .products-block .product .price-final {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.pytlik-addons--side .products-block .product .price-final {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.pytlik-addons--side .products-block .product .p-tools .btn {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
}

/* Počet kusů si u doplňku nikdo nenastavuje — jedno kliknutí stačí. */
.pytlik-addons--side .products-block .product .quantity,
.pytlik-addons--side .products-block .product .increase,
.pytlik-addons--side .products-block .product .decrease {
    display: none;
}

/* Šablona dává `.p-tools` svislý padding 22 px — v kartě z toho je díra mezi
   cenou a tlačítkem. Šířku tlačítka si taky drží sama, proto `!important`. */
.pytlik-addons--side .products-block .product .p-tools {
    padding: 0;
}

.pytlik-addons--side .products-block .product .btn.add-to-cart-button {
    display: block !important;
    width: 100% !important;
    min-width: 0;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
}

/* Na mobilu se vejdou dvě karty vedle sebe, obrázek stačí nižší. */
@media (max-width: 543px) {
    .pytlik-addons--side .products-block .product {
        flex: 1 1 130px;
    }

    .pytlik-addons--side .products-block .product .image {
        height: 84px;
    }
}

/* --- popup ---------------------------------------------------------- */

.pytlik-upsell {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .5);
}

.pytlik-upsell__box {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
}

.pytlik-upsell__close {
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 0;
    font-size: 32px;
    line-height: 1;
    color: #666;
    background: none;
    border: 0;
    cursor: pointer;
}

.pytlik-upsell__close:hover {
    color: #000;
}

.pytlik-upsell__title {
    margin: 0 30px 20px 0;
}

.pytlik-upsell__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

body.pytlik-upsell-open {
    overflow: hidden;
}

/* Karty v popupu jsou kompaktnější, ať se okno vejde na obrazovku. */
.pytlik-upsell .products-block .image img {
    max-height: 120px;
    width: auto;
}

.pytlik-upsell .products-block .ratings-wrapper,
.pytlik-upsell .products-block .p-desc {
    display: none;
}

/* --- příplatky v popupu --------------------------------------------- */

.pytlik-surcharge__group + .pytlik-surcharge__group {
    margin-top: 20px;
}

.pytlik-surcharge__label {
    margin: 0 0 10px;
}

.pytlik-surcharge__options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Název vlevo, cena vpravo na stejném řádku — dlaždice je pak nižší a cena
   se čte rovnou u volby, ne pod ní. */
.pytlik-surcharge__option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    min-width: 150px;
    padding: 14px 18px;
    text-align: left;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
}

.pytlik-surcharge__option:hover {
    border-color: #89bf81;
}

.pytlik-surcharge__option.is-selected {
    background: #f2f8f1;
    border-color: #89bf81;
}

.pytlik-surcharge__option-name {
    font-weight: 600;
}

.pytlik-surcharge__option-price {
    font-size: 14px;
    color: #666;
}

.pytlik-surcharge .dkLabNote,
.pytlik-surcharge textarea {
    width: 100%;
    margin-top: 12px;
}

#dkLabNoteMainWrapper {
    margin-top: 12px;
}

/* --- nabídka v košíku ------------------------------------------------ */

.cart-table a.show-related.pytlik-toggle-hidden {
    display: none;
}

/* Nabídka je návrh, ne obsah košíku — musí být na první pohled odlišená.
   Patří k položce nad sebou, takže mezi nimi čára není; dělí se až pod nabídkou. */
.cart-table tr.pytlik-related-styled > td {
    padding: 0 0 16px;
    border-top: 0;
    border-bottom: 1px solid #dadada;
}

/* Ať se čára pod nabídkou nesečte s čárou další položky. */
.cart-table tr.pytlik-related-styled + tr > td {
    border-top: 0;
}

.pytlik-related-box {
    padding: 12px 14px 14px;
    background: #f4f8f3;
    border: 1px solid #e2ece0;
    border-radius: 8px;
}

.pytlik-related-head {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
    padding: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #4a6b45;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.pytlik-related-head::after {
    content: "\e911";
    font-family: shoptet;
    font-size: 10px;
    transition: transform .2s;
}

.pytlik-related-box.is-collapsed .pytlik-related-head {
    padding-bottom: 0;
}

.pytlik-related-box.is-collapsed .pytlik-related-head::after {
    transform: rotate(180deg);
}

.pytlik-related-box.is-collapsed .pytlik-related-grid {
    display: none;
}

.pytlik-related-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pytlik-related-grid .cart-related-product {
    display: flex;
    flex: 1 1 220px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
}

.pytlik-related-grid .cart-related-img {
    flex: 0 0 auto;
}

.pytlik-related-grid .cart-related-img img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
}

.pytlik-related-grid .cart-related-info {
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.pytlik-related-grid .cart-related-name {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.3;
}

.pytlik-related-grid .cart-related-availability {
    display: none;
}

.pytlik-related-grid .cart-related-button {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    margin-top: 0;
}

.pytlik-related-grid .cart-related-button .price-final {
    font-size: 15px;
    white-space: nowrap;
}

.pytlik-related-grid .cart-related-button .btn {
    padding: 5px 12px;
    font-size: 13px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .pytlik-upsell__box {
        padding: 20px 15px;
    }

    .pytlik-upsell__actions .btn {
        flex: 1 1 100%;
        text-align: center;
    }

    .pytlik-surcharge__option,
    .pytlik-velikost__volba {
        flex: 1 1 100%;
    }

    .pytlik-related-grid {
        padding: 10px;
    }

    .pytlik-related-grid .cart-related-product {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    /* Shoptet si na mobilu tlačítkový blok sráží do sloupce, proto specifičtější selektor. */
    .pytlik-related-box .pytlik-related-grid .cart-related-button {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* --- varianty jako dlaždice ------------------------------------------ */

/* Rozbalovátko zůstává v DOM kvůli Shoptetí logice ceny a dostupnosti,
   jen se schová — klikají se dlaždice nad ním. */
.pytlik-variants-visible #simple-variants-select {
    display: none;
}

/* Jediná varianta se nevybírá, jen zabírá místo — u růží ji navíc zdvojuje
   přepínač velikosti květu. Blok mizí i s popiskem „Varianta:",
   rozbalovátko zůstává v DOM, aby formulář dál posílal priceId. */
.pytlik-jedna-varianta .p-detail-inner .variant-list {
    display: none;
}

.pytlik-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.pytlik-variants__option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    padding: 12px 18px;
    text-align: left;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
}

.pytlik-variants__option:hover {
    border-color: #89bf81;
}

.pytlik-variants__option.is-selected {
    background: #f2f8f1;
    border-color: #89bf81;
}

.pytlik-variants__name {
    font-weight: 600;
}

.pytlik-variants__price {
    font-size: 14px;
    color: #666;
}

/* --- množstevní sleva jako dlaždice ----------------------------------- */

/* Pásma vedle sebe místo pod sebou: ve stejné výšce se vejdou všechna tři
   a je z nich vidět, o kolik cena klesne s dalšími kusy. */
.pytlik-sleva {
    padding: 0;
    background: none;
}

.pytlik-sleva .quantity-discounts__headline {
    margin-bottom: 10px;
    font-weight: 600;
}

.pytlik-sleva .quantity-discounts__table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    /* Delší pásmo („50 a více ks" se štítkem) se zalomí na dva řádky a bylo by
       vyšší než sousedi — dlaždice se proto natahují na výšku nejvyšší z nich. */
    align-items: stretch;
}

.pytlik-sleva .quantity-discounts__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
}

/* Pásmo, ve kterém zákazník právě je — stejné zvýraznění jako u variant. */
.pytlik-sleva .quantity-discounts__item--highlighted {
    background: #f2f8f1;
    border-color: #89bf81;
}

.pytlik-sleva .quantity-discounts__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.pytlik-sleva__odznak {
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #89bf81;
    border-radius: 20px;
}

.pytlik-sleva .quantity-discounts__price-wrapper {
    /* Šablona cenu tlačí doprava k druhému okraji řádku; v dlaždici patří pod
       množství, na které se vztahuje. */
    text-align: left;
    font-size: 14px;
    color: #666;
}

.pytlik-sleva .quantity-discounts__price {
    font-size: 16px;
    font-weight: 600;
    color: #1f1f1f;
}

/* Na úzkém displeji se tři dlaždice do mřížky nevejdou vyrovnaně — pásma tedy
   jdou pod sebe a v každém řádku stojí množství vlevo a cena vpravo. */
@media (max-width: 575px) {
    .pytlik-sleva .quantity-discounts__table {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pytlik-sleva .quantity-discounts__item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 14px;
    }

    .pytlik-sleva .quantity-discounts__price-wrapper {
        text-align: right;
        white-space: nowrap;
    }
}

/* Ukáže se, až sleva opravdu naskočí (přepíná doplnky.js). */
.pytlik-sleva .quantity-discounts__save {
    display: none;
    margin-top: 10px;
    text-align: right;
    color: #4a6b45;
}

.pytlik-sleva .quantity-discounts__save.is-visible {
    display: block;
}

/* --- poznámka k většímu množství ------------------------------------- */

.pytlik-bulk-note {
    display: none;
    margin: 14px 0 0;
    padding: 10px 14px;
    font-size: 14px;
    color: #4a6b45;
    background: #f4f8f3;
    border: 1px solid #e2ece0;
    border-radius: 8px;
}

.pytlik-bulk-note.is-visible {
    display: block;
}

/* --- příplatky na detailu produktu ------------------------------------ */

/* Rozbalovátko zůstává kvůli přepočtu ceny, klikají se dlaždice nad ním. */
.pytlik-surcharge-visible .p-detail-inner .surcharge-list select.surcharge-parameter {
    display: none;
}

.p-detail-inner .surcharge-list .pytlik-surcharge {
    margin-top: 8px;
}

.p-detail-inner .surcharge-list .pytlik-surcharge__option {
    min-width: 130px;
    padding: 12px 16px;
}

/* Pole na vzkaz naskočí až po volbě „Ano" — pak má vypadat jako součást volby. */
.p-detail-inner .surcharge-list #dkLabNoteMainWrapper {
    margin-top: 14px;
}

.p-detail-inner .surcharge-list .dkLabNoteHeader span {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #4a6b45;
}

.p-detail-inner .surcharge-list .dkLabNoteTextArea {
    width: 100%;
    max-width: 460px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.p-detail-inner .surcharge-list .dkLabNoteTextArea:focus {
    border-color: #89bf81;
}

/* --- jeden vzkaz = jedna kytice -------------------------------------- */

.pytlik-note-limit {
    display: none;
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #6b7a69;
}

.pytlik-note-limit.is-visible {
    display: block;
}

/* Zamčený počet: pořád čitelný, ale je vidět, že se s ním nehýbe. */
.pytlik-quantity-locked .increase,
.pytlik-quantity-locked .decrease {
    opacity: .35;
    pointer-events: none;
}

.pytlik-quantity-locked input {
    pointer-events: none;
    background: #f7f7f7;
}

.dkLabNoteTextArea.pytlik-note-missing {
    border-color: #c51d1d;
    background: #fdf6f6;
}

.pytlik-note-error {
    margin: 6px 0 0;
    font-size: 13px;
    color: #c51d1d;
}

/* --- osobní vzkazy u položky v košíku -------------------------------- */
/* Vzkazy vypisuje doplněk dkLab („Poznámka a příloha k produktu"). Ve výchozím
   stavu je to řádek „Množství: 1 ❌“ a pod ním podtržený text — vedle zbytku
   košíku to působí jako chyba. Přestavuje se to jen stylem, protože doplněk
   si obsah překresluje sám při každé změně košíku.

   Selektory jsou bez obalu záměrně: stejný výpis je v tabulce košíku,
   v rozbalovacím košíku v hlavičce i v košíku na mobilu. */

.cart-table .main-link-surcharges,
.cart-widget-product-surcharges {
    display: block;
    margin-top: 2px;
    color: #6b7a69;
    font-size: 13px;
}

.dkLabCartNoteDetails {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.dkLabCartNoteDetail,
.dkLabCartNoteDetails > .dkLabCartNoteDetail:nth-last-of-type(1) {
    position: relative;
    /* !important — doplněk si řádku vnucuje padding: 5px 0 selektorem přes body. */
    padding: 10px 36px 10px 18px !important;
    border: 1px solid #dfeadd;
    border-left: 3px solid #89bf81;
    border-radius: 8px;
    background: #f7fbf6;
    font-size: 13px;
    line-height: 1.45;
}

/* Množství říká něco jen tehdy, když je kusů se stejným vzkazem víc. */
.dkLabCartNoteDetail[data-dklab-part-amount="1"] .dkLabCartAmount {
    display: none;
}

/* Jakmile má položka vzkazů několik, patří počet ke každému z nich — jinak
   není poznat, který kus dostane který vzkaz. */
.dkLabCartNoteDetails:has(> .dkLabCartNoteDetail + .dkLabCartNoteDetail) .dkLabCartAmount {
    display: inline-block;
}

.dkLabCartAmount {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #89bf81;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.dkLabNoteTextDetailTitle {
    display: block;
    color: #4a6b45;
    font-size: 12px;
    font-weight: 600;
}

.dkLabNoteTextDetailTitle:after {
    content: none;                      /* doplněk lepí za popisek dvojtečku */
}

/* Vzkaz je text od zákazníka, ne odkaz — podtržení se ukáže až po najetí,
   aby zůstalo poznat, že se klikem dá přepsat. */
.dkLabNoteTextDetailNote {
    display: block;
    color: #1f1f1f;
    font-style: italic;
    text-decoration: none;
}

.dkLabNoteTextDetailNote:before { content: '\201E'; }
.dkLabNoteTextDetailNote:after { content: '\201C'; }
.dkLabNoteTextDetailNote:hover { text-decoration: underline; }

.dkLabNoteDetailRemovePart {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 16px;
    height: 16px;
    margin: 0;
    opacity: .4;
}

.dkLabNoteDetailRemovePart:hover {
    opacity: 1;
}

.dkLabNoteDetailRemovePart:before,
.dkLabNoteDetailRemovePart:after {
    top: 7px;
    left: 1px;
    width: 14px;
}

/* V rozbalovacím košíku jde všechno těsně za sebou, takže vzkazy jedné položky
   splývaly se sousední položkou. Čára mezi produkty a vzduch kolem karet je
   rozdělí stejně jako v košíku. */
.cart-widget-product + .cart-widget-product {
    border-top: 1px solid #ececec;
}

.cart-widget-product .dkLabCartNoteDetails {
    gap: 8px;
    margin: 8px 0 4px;
}

/* Kus bez vyplněného vzkazu: doplněk hlásí „Bez poznámky a přílohy“, což u kytice
   mate — přílohy se tu nepoužívají. Původní text se schová velikostí písma. */
.dkLabCartNoteDetail small:has(> .dkLabCartAmount) {
    font-size: 0;
}

.dkLabCartNoteDetail small:has(> .dkLabCartAmount):before {
    content: 'Bez vzkazu';
    color: #8a8a8a;
    font-size: 13px;
    font-style: italic;
}

/* --- termín dodání na detailu ---------------------------------------- */

.pytlik-dodani__kdy {
    color: #4a6b45;
    font-weight: 600;
}

/* --- carousel jako karty 9:16 ----------------------------------------- */
/* Bannery stojí vedle sebe jako karty na výšku; text a tlačítko jsou HTML
   (Název banneru / Text banneru / Text odkazu v administraci), ne součást
   obrázku, takže se dají číst i na mobilu a jdou kdykoli přepsat. */

.pytlik-carousel {
    position: relative;
    overflow: visible;
}

.pytlik-carousel .carousel-inner {
    display: flex;
    /* Pás je užší než obsahová šířka, ať karty nelezou k okrajům stránky
       a šipky měly kam sednout. */
    width: 90%;
    margin: 0 auto;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.pytlik-carousel .carousel-inner::-webkit-scrollbar {
    display: none;
}

/* Karty určují výšku pásu samy, jinak by je stretch natáhl na výšku kontejneru.
   !important u výšky je pojistka: šablona dopočítává pásu inline min-height
   podle slidu přes celou šířku (u karet z toho vyjde přes dva tisíce pixelů
   prázdna). JS ji maže taky, tohle drží i než se stihne načíst. */
.pytlik-carousel .carousel-inner {
    align-items: flex-start;
    height: auto !important;
    min-height: 0 !important;
}

/* Šablona slidy překrývá a posouvá; tady stojí vedle sebe. */
.pytlik-carousel .carousel-inner .item {
    min-width: 0;
    overflow: hidden;
    position: relative !important;
    left: auto !important;
    display: block !important;
    flex: 0 0 calc((100% - 48px) / 4);
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    scroll-snap-align: start;
}

.pytlik-carousel .item > a {
    position: relative;
    display: block;
    overflow: hidden;
    /* Plakáty od klientky jsou 2:3 (1024×1536); v 9:16 by se ořezávaly. */
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 14px;
}

/* !important — šablona obrázku v carouselu vnucuje výšku podle poměru slidu. */
.pytlik-carousel .item img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

/* Text sedí nahoře nad fotkou, na bílém podkladu, ať je čitelný vždy.
   Karty jsou fotky bez grafiky — na samotné fotce by se vínové písmo ztratilo,
   tak pod ním leží skoro krytá bílá, která dole měkce vyprchá do fotky.
   Vínová je vzatá z plakátů od klientky (nadpisy #9c2643, vlna #af3f5d), takže
   nadpis, popisek i tlačítko drží jednu rodinu barev. */
.pytlik-carousel .extended-banner-texts {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 22px 44px;
    /* Tlačítko sedí hned pod textem, ne zarovnané s ostatními kartami:
       s různě dlouhým nadpisem by nad ním zůstávala pokaždé jinak velká díra.
       Mezeru drží `gap`, takže je od popisku všude stejná. Minimální výška je
       tu jen kvůli plynulému přechodu bílé do fotky, ne kvůli zarovnání. */
    min-height: 42%;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, .84) 0%,
        rgba(255, 255, 255, .78) 55%,
        rgba(255, 255, 255, .48) 82%,
        rgba(255, 255, 255, 0) 100%);
    color: #7a2338;
}


/* Nadpis, popisek i tlačítko má šablona napozicované absolutně přes celý slide;
   v kartě mají stát pod sebou. */
.pytlik-carousel .extended-banner-texts {
    bottom: auto !important;
    height: auto !important;
}

.pytlik-carousel .extended-banner-title,
.pytlik-carousel .extended-banner-text,
.pytlik-carousel .extended-banner-link {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

/* Šablona dává nadpisu i popisku `padding: 40px` ze všech stran. Odsazení od
   kraje karty má na starosti obalový blok, jinak text odskočí od tlačítka
   o dalších 40 px a svislé odsazení kartu nafoukne o víc než sto pixelů. */
.pytlik-carousel .extended-banner-title,
.pytlik-carousel .extended-banner-text {
    padding: 0 !important;
}

.pytlik-carousel .extended-banner-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: #7a2338;
}

.pytlik-carousel .extended-banner-text {
    font-size: 15px;
    line-height: 1.4;
    color: #8a4152;
}

.pytlik-carousel .extended-banner-link {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    background: #af3f5d;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.pytlik-carousel .item > a:hover .extended-banner-link {
    background: #7a2338;
}

/* Šipky sedí na okraji pásu; ven ze stránky nesmí, jinak se objeví vodorovný
   posuvník přes celý web. */
.pytlik-carousel .carousel-control {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 8px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    opacity: 1;
    text-shadow: none;
}

.pytlik-carousel .carousel-control.right {
    right: 8px;
    left: auto;
}

.pytlik-carousel .carousel-control::before {
    content: "\e90f";
    display: block;
    font-family: shoptet;
    font-size: 12px;
    line-height: 40px;
    color: #af3f5d;
    text-align: center;
}

.pytlik-carousel .carousel-control.right::before {
    content: "\e910";
}

/* Když se všechny karty vejdou vedle sebe, není kam posouvat — šipky by
   klikaly naprázdno, tak zmizí. Na kraji pásu zešedne jen ta krajní. */
.pytlik-carousel.pytlik-bez-sipek .carousel-control {
    display: none;
}

.pytlik-carousel .carousel-control.pytlik-na-kraji {
    opacity: .35;
    pointer-events: none;
}

@media (max-width: 991px) {
    .pytlik-carousel .carousel-inner .item {
        flex: 0 0 calc((100% - 16px) / 2);
    }
}

@media (max-width: 543px) {
    .pytlik-carousel .carousel-inner .item {
        flex: 0 0 78%;
    }

    .pytlik-carousel .extended-banner-title {
        font-size: 21px;
    }

    .pytlik-carousel .carousel-control {
        display: none;             /* na mobilu se posouvá prstem */
    }
}

/* ---------------------------------------------------------------------- */
/* Pokladna                                                                */
/* ---------------------------------------------------------------------- */

/* Země se v pokladně nikde nevybírá, pole je zamčené a e-shop doručuje jen po
   Česku — v adrese je to jen řádek navíc. Hodnotu nese skryté `billCountryId`
   ve fieldsetu, takže se do objednávky dostane i bez něj. */
.co-billing-address .form-group:has(#billCountryId) {
    display: none !important;
}

/* Poznámka „* Povinná pole" má v šabloně zarovnání doprava, kde visí vedle
   sloupce s poli. Patří nad první políčko, tedy k jeho levému okraji. */
.co-box .form-legend {
    margin-bottom: 10px;
    text-align: left;
}

/* Vyplněné pole: šablona popisek zmenší a posadí dovnitř rámečku, kde sedí
   natěsno na textu i na horní hraně. Rozestup se dorovná, výška políčka
   zůstává stejná. */
.smart-label-wrapper.populated > label {
    top: 6px;
}

.smart-label-wrapper.populated .form-control {
    padding-top: 30px;
    padding-bottom: 6px;
}

/* ---------------------------------------------------------------------- */
/* Okno pro výpočet ceny dopravy                                           */
/* ---------------------------------------------------------------------- */

/* Okno se v šabloně kreslí pod hlavičku e-shopu, takže mu menu překrývá nadpis
   i křížek. */
.popup {
    z-index: 9999 !important;
}

/* Šablona okno natahuje na celou výšku obrazovky (`height: calc(100vh - 80px)`),
   takže pod obsahem zůstane pás prázdna. Výšku si určí obsah. */
.popup .content {
    height: auto !important;
    max-height: calc(100vh - 80px);
    max-width: 560px;
    overflow-y: auto;
    padding: 28px 28px 0 !important;
}

.popup .content > h2 {
    margin: 0 0 34px;
    padding-right: 40px;
    font-size: 22px;
    line-height: 1.3;
}

/* Popisek pole sedí absolutně nad jeho horní hranou, takže první pole vyjíždí
   nahoru k nadpisu — mezera se počítá od popisku, ne od rámečku. */
.popup .wrapper {
    padding-top: 6px;
}

.popup .wrapper > .box {
    padding-bottom: 8px !important;
}

/* Zákazník prodejnu nevybírá — hledá se sama podle zadané adresy (viz
   `najdiNejblizsi` v doplnky.js) a vypisuje se mezi výsledky. Doplněk ji ale
   ovládá přes tenhle výběr, takže musí zůstat v dokumentu. */
.popup .form-group--pobocka {
    display: none !important;
}

/* Výběr pobočky je nativní select se šedým pozadím — srovnává se s ostatními
   políčky pokladny a dostává vlastní šipku. */
.popup #pobocka {
    width: 100%;
    background: #fff;
    border: 1px solid #d8ddd6;
    border-radius: 4px;
    box-shadow: none;
    color: #23291f;
    cursor: pointer;
}

.popup #pobocka:focus {
    border-color: #89bf81;
    outline: none;
}

.popup .form-group--pobocka {
    position: relative;
}

/* Popisek pole s adresou sedí uprostřed rámečku přesně tam, kde je nápověda
   „Zadejte adresu…" — vysadí se nahoru jako u ostatních vyplněných polí. */
.popup .smart-label-wrapper > label {
    top: 6px;
    font-size: 12px;
}

.popup .smart-label-wrapper .form-control,
.popup #pobocka {
    padding-top: 30px;
    padding-bottom: 6px;
    height: auto;
}

/* Výsledek a tlačítko vedle sebe, ať okno nekončí prázdným pruhem. */
.popup .bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 24px !important;
    text-align: left !important;
}

.popup .bottom .resultWrap {
    display: block !important;
    width: auto !important;
    flex: 1 1 200px;
}

.popup .bottom .result {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 3px 0;
}

.popup .bottom .result .metric {
    color: #6b7a69;
}

.popup .bottom .result .value {
    font-weight: 600;
    text-align: right;
}

/* Dokud není spočítaná cena, není co vkládat do košíku. */
.popup #addToCart[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* Okno šlo opustit jen výběrem adresy nebo obnovením stránky. */
.pytlik-zavrit {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7a69;
    font-size: 26px;
    line-height: 34px;
    cursor: pointer;
}

.pytlik-zavrit:hover {
    background: #f1f3ef;
    color: #23291f;
}

.popup .content {
    position: relative;
}

@media (max-width: 600px) {
    .popup {
        padding: 16px !important;
    }

    .popup .content {
        padding: 22px 18px 0 !important;
    }
}

/* Platební loga v boxu „Přijímáme online platby" — klonovaná z patičky, takže
   velikosti si drží šablona sama a tady zbývá je jen vystředit pod nadpis. */
.pytlik-platby {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
}

.pytlik-platby .footer-logotypes:last-child {
    margin-bottom: 0;
}

/* Přepínač velikosti květu na detailu růže — klasická a velkokvětá jsou dva
   samostatné produkty, tady vypadají jako varianty jednoho. Popisek i dlaždice
   kopírují příplatek („Osobní vzkaz"), který stojí hned pod ním — dvě různě
   vypadající volby vedle sebe by působily, že jedna k produktu nepatří. */
.pytlik-velikost {
    margin: 0 0 18px;
}

.pytlik-velikost__popisek {
    display: block;
    margin-bottom: 10px;
    color: #1f1f1f;
    font-size: 16px;
    font-weight: 500;
}

.pytlik-velikost__volby {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pytlik-velikost__volba {
    display: flex;
    min-width: 130px;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    color: #1f1f1f;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.pytlik-velikost__volba:hover,
.pytlik-velikost__volba:focus {
    border-color: #89bf81;
    color: #1f1f1f;
    text-decoration: none;
}

.pytlik-velikost__volba.is-selected,
.pytlik-velikost__volba.is-selected:hover {
    border-color: #89bf81;
    background: #f2f8f1;
    cursor: default;
}

/* Rozvoz má vlastní dopravu pro každou prodejnu, aby pobočka byla v objednávce
   — zákazník ale vybírá jedinou, tu ostatní schová doplněk. Kdyby CSS nedojelo,
   uvidí tři rozvozy a vybere si sám; cena je u všech stejná (nese ji položka
   v košíku), takže se tím nic nerozbije. */
.radio-wrapper.pytlik-kuryr-skryty {
    display: none;
}

/* Adresa prodejny pod osobním odběrem — šablona popis dopravy schová do
   bublinky u otazníku, kam zákazník nekliká. */
.radio-wrapper label .pytlik-prodejna-adresa {
    display: block;
    margin-top: 2px;
    color: #6b7a69;
    font-size: 14px;
    font-weight: 400;
}

/* Zadaná adresa doručení pod volbou dopravy — dřív ji zákazník uviděl až
   v posledním kroku a nešla přepsat. */
.pytlik-adresa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    padding: 0 0 12px 42px;
    margin-top: -6px;
    font-size: 14px;
}

.pytlik-adresa__text {
    color: #4a6b45;
}

.pytlik-adresa__zmena {
    padding: 0;
    border: 0;
    background: none;
    color: #6b7a69;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.pytlik-adresa__zmena:hover {
    color: #4a6b45;
}

/* Vysvětlení k výběru data — v seznamu jsou jen pracovní dny a zákazník
   potřebuje vědět, že v sobotu si pro kytici může přijít na prodejnu. */
.pytlik-termin-note {
    margin: -2px 0 14px;
    color: #6b7a69;
    font-size: 14px;
    line-height: 1.5;
}

/* Bez data a času objednávka nemá termín — dokud chybí, nejde dál. */
.pytlik-termin-chyba {
    margin: -6px 0 14px;
    color: #c0392b;
    font-size: 14px;
    font-weight: 600;
}

/* Velkokvětá růže se ve výpisu neukazuje — barvu vybírá karta, velikost až
   přepínač na detailu. Produkt zůstává v e-shopu, jen se nenabízí dvakrát. */
.pytlik-skryta-velikost {
    display: none !important;
}