/* ==========================================================
   KOŠÍK – KROKY OBJEDNÁVKY
========================================================== */

ol.cart-header{

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;

    gap:var(--sh-space-md);

    margin:0 0 var(--sh-space-md);
    padding:0;

    list-style:none;
}


/* jednotlivé kroky */

ol.cart-header > li{

    flex:0 1 auto;

    margin:0;
    padding:0;

}


/* obsah kroku */

ol.cart-header > li > a,
ol.cart-header > li > strong{

    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center;
    justify-content:flex-start;

    gap:var(--sh-space-sm);

    margin:0;
    padding:0 !important;

    background:transparent !important;
    border:none !important;
    border-radius:0 !important;

    color:var(--sh-color-text-muted);

    font-family:var(--sh-font-family-headings);
    font-size:var(--sh-text-xl);
    font-weight:var(--sh-font-weight-medium);
    line-height:var(--sh-line-height-heading);

    text-align:left;
    text-decoration:none;
}


/* číslo kroku */

ol.cart-header > li > a::before,
ol.cart-header > li > strong::before{

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 52px;

    width:48px;
    height:48px;

    margin:0 !important;

    border:none !important;
    border-radius:var(--sh-radius-btn) !important;

    background:var(--sh-color-cta-subtle);
    color:var(--sh-color-text);

    font-family:var(--sh-font-family-headings);
    font-size:var(--sh-text-lg);
    font-weight:var(--sh-font-weight-medium);
    line-height:1;

    box-shadow:none !important;
}


/* aktivní krok */

ol.cart-header > li.active > a,
ol.cart-header > li.active > strong{

    background:transparent !important;
    color:var(--sh-color-text) !important;

}

ol.cart-header > li.active > a::before,
ol.cart-header > li.active > strong::before{

    background:var(--sh-color-cta) !important;
    color:var(--sh-color-text-inverse) !important;

}

/* dokončený krok – Shoptet ho barví defaultní zelenou, sjednoceno se stylem webu */
ol.cart-header > li.completed > a,
ol.cart-header > li.completed > strong{

    color:var(--sh-color-text) !important;

}

ol.cart-header > li.completed > a::before,
ol.cart-header > li.completed > strong::before{

    background:var(--sh-color-cta-subtle) !important;
    color:var(--sh-color-text) !important;

}


/* text */

ol.cart-header > li span{

    margin:0;
    padding:0 !important;

    white-space:nowrap;

}


/* hover neaktivního kroku */

ol.cart-header > li > a:hover{

    color: var(--sh-color-accent);

}

ol.cart-header > li > a:hover::before{

    background:var(--sh-color-cta);
    color:var(--sh-color-text-inverse);

}

/* responzivita kroků – menší kruhy/text a užší mezery, ať se řádek
   nezalamuje ošklivě přes sebe na menších obrazovkách */
@media (max-width: 767px){

    ol.cart-header{
        gap: var(--sh-space-sm);
        justify-content: flex-start;
    }

    ol.cart-header > li > a,
    ol.cart-header > li > strong{
        gap: var(--sh-space-xs);
        font-size: clamp(1.05rem, 0.85rem + 2.4vw, var(--sh-text-xl));
    }

    ol.cart-header > li > a::before,
    ol.cart-header > li > strong::before{
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: var(--sh-text-base);
    }

}


/* buňka "Součet" (cena + křížek na odebrání) – display:flex přímo na
   <td> ji vyřadil z tabulkového řádku (prohlížeč ji obalí anonymní
   buňkou a zarovná nahoru), takže cena+křížek pak seděly výš než
   zbytek řádku (obrázek/název, množství). Buňka zůstává normální
   table-cell se svým vlastním vertical-align:middle (main-14) a
   zarovnání ceny s křížkem MEZI SEBOU řeší inline-flex na obou –
   ten na rozdíl od display:flex na buňce dál funguje jako běžný
   inline prvek v řádku textu, jen s spolehlivým vlastním centrováním. */
.cart-table td.p-total .price-final,
.cart-table td.p-total form.inline {
    display: inline-flex;
    align-items: center;
    height: 28px;
    vertical-align: middle;
}

/* .remove-item už má vlastní padding:4px jako klikací plochu — margin-left
   navíc na form.inline (jeho obalu) přidával neviditelnou mezeru napravo
   od ceny i v řádcích, kde formulář sám nemá žádnou vizuální šířku */

/* křížek pro odebrání položky – menší klikací plocha a ikona */

.cart-table .remove-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.cart-table .remove-item::before {
    /* !important: Shoptet má na mobilu vlastní pravidlo
       .cart-table .inline.delete-cart-item .remove-item:before
       se 4 třídami, které by jinak naši 2třídovou specificitu přebilo */
    font-size: clamp(9px, 1.5vw, 12px) !important;
    /* ikonový font má vyšší výchozí line-height, kvůli kterému znak
       vizuálně "plaval" nahoře v tlačítku i přes align-items:center */
    line-height: 1 !important;
}


/* počítadlo množství (-/+) – užší box, číslo bez zbytečného odsazení */

.cart-table .p-quantity .quantity {
    padding-left: 20px;
    padding-right: 20px;
}

.cart-table .p-quantity .quantity input {
    /* ch místo pevných px – množství může mít až 3 desetinná místa
       (např. 0,002), pevná šířka v px je pak oříznutá */
    width: 5ch;
    min-width: 30px;
    height: 32px;
    font-size: 13px;
}

.cart-table .p-quantity .quantity .decrease,
.cart-table .p-quantity .quantity .increase {
    width: 20px;
    height: 32px;
}

.cart-table .p-quantity .quantity .decrease::before,
.cart-table .p-quantity .quantity .increase::before {
    height: 32px;
    line-height: 32px;
}


    
/* ==========================================================
   tabulka produktů
========================================================== */


    .cart-table {
        background:var(--sh-color-bg);
         }


/* Název produktu v košíku */
.cart-table .main-link{
    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-lg);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading);
    color: var(--sh-color-text);
    text-decoration: none;
    transition: color .2s ease;
}

.cart-table .main-link:hover{
    color: var(--sh-color-accent);
}

/* "Související produkty: X (od Y Kč)" pod názvem produktu – nechceme */
.cart-table .show-related {
    display: none !important;
}

/* dostupnost ("Skladem (>5 ks)") – main-14 na ni nemá vlastní
   pravidlo, dědí 12px/500 z ".cart-table .p-name>div" (myšleno pro
   variantu produktu). Barva (zelená/červená...) zůstává inline stylem
   od Shoptetu podle stavu skladem – necháváme, jen typografie je naše. */
.cart-p-availability {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-sm);
    font-weight: var(--sh-font-weight-body);
    line-height: var(--sh-line-height-body);
}

.cart-p-availability .availability-amount {
    color: var(--sh-color-text-muted);
}

/* obrázek produktu v košíku – zdroj je stejně jako jinde na detailu
   produktu pevně 1:1 (Shoptetem generovaná "related" velikost), sem
   ořízneme na 4:3 stejným trikem (aspect-ratio + object-fit:cover) */
.cart-table td.cart-p-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;

    border-radius: var(--sh-radius-md);
}

/* obrázek a název produktu zarovnané nahoru na stejnou linku – main-14
   je defaultně vertikálně centruje, tady dvě různé mechaniky podle
   layoutu: pod 767px je řádek flexbox (align-self), nad 767px je to
   klasická <table>, kde o zarovnání rozhoduje vertical-align na <td> */
@media (max-width: 767px){

    .cart-table tr>td.cart-p-image,
    .cart-table tr>td.p-name{
        align-self: flex-start;
    }

}

@media (min-width: 768px){

    .cart-table td.cart-p-image,
    .cart-table td.p-name{
        vertical-align: top;
    }

}

/* ==========================================================
  sidebar
========================================================== */


@media (min-width: 992px) {
    .id--9 .next-step {
        margin-top: 24px;}
        }

/* Nadpisy boxů v pravém sloupci košíku */
.summary-wrapper > .h4,
.checkout-box-wrapper > .h4{
    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading-sm);
    letter-spacing: normal;
    text-transform: none;
    color: var(--sh-color-text);

    margin: 0 0 var(--sh-space-md);
}

/* na 2./3. kroku (Doprava & platba, Informace o vás) sedí "Rekapitulace
   objednávky" hlouběji (#checkoutSidebar .cart-content .order-summary
   .order-summary-inner > h2.h4), takže na ni výše uvedený selektor
   necílí a zůstává na ní Shoptetovo výchozí #checkoutSidebar .cart-content h2
   (16px/700/uppercase) – stejný selektor, ale déle v souboru, aby
   vyhrál a nadpis vypadal stejně jako na 1. kroku */
#checkoutSidebar .cart-content h2 {
    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading-sm);
    letter-spacing: normal;
    text-transform: none;
    color: var(--sh-color-text);

    margin: 0 0 var(--sh-space-md);
}

.price-wrapper .price-label.price-primary,
.price-wrapper .price.price-primary {
    font-size: var(--sh-text-lg) !important;
}

.price-wrapper .price-label.price-primary, .price-wrapper .price.price-primary {
    font-weight: var(--sh-font-weight-body) !important;
}

.price-wrapper .price-label.price-primary {
    text-transform: none;
    letter-spacing: normal;
}

    /* stejná "subtle" barva jako karty způsobu dopravy/platby
       (.shipping-billing-table .radio-wrapper), místo modrošedé */
    #checkoutSidebar .cart-content, .checkout-box, .checkout-box-wrapper, .summary-wrapper {
    background-color: var(--sh-color-surface);
    border-radius: var(--sh-radius-md);
}

/* .checkout-box ("Potřebujete pomoc?") vynechán z rámečku výš — tlačítko
   samo o sobě je dost výrazné, rámeček navíc kolem něj vypadal jako
   duplicitní/nechtěná linka */
#checkoutSidebar .cart-content, .checkout-box-wrapper, .summary-wrapper {
    border: 1px solid var(--sh-color-border) !important;
}

/* .checkout-box vynechán z paddingu — obaluje tlačítko "Potřebujete
   pomoc?" (btn-block, přes celou šířku); padding kolem něj ho zbytečně
   zužoval a text se zalamoval na dva řádky */
.checkout-box-wrapper, .summary-wrapper, #checkoutSidebar .cart-content {
    padding: var(--sh-space-sm) !important;
}

/* ==========================================================
   DOPRAVA & PLATBA – přepracováno z jednoho barevného boxu
   na kartu ke každé metodě zvlášť (viz sekce níže)
========================================================== */

/* tlačítko "Hledat" v okně výběru výdejního místa (Balíkovna, Zásilkovna
   apod.) — id má na začátku číslo dopravce (1-search-button,
   2-search-button...), proto se necílí přes ID, jen přes třídy.
   main-14 na něj dává vlastní --color-secondary/--colors-foregrounds-*,
   které z nějakého důvodu nevycházejí naše šípkové, takže přebito
   napřímo našimi tokeny. */
.btn.btn-primary.delivery-point-picker,
input.btn.btn-primary.delivery-point-picker {
    background: var(--sh-color-cta) !important;
    border-color: var(--sh-color-cta) !important;
    color: var(--sh-color-text-inverse) !important;
    border-radius: var(--sh-radius-btn) !important;
}

.btn.btn-primary.delivery-point-picker:hover,
input.btn.btn-primary.delivery-point-picker:hover {
    background: var(--sh-color-cta-hover) !important;
    border-color: var(--sh-color-cta-hover) !important;
    color: var(--sh-color-text-inverse) !important;
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);
}

.ordering-process .co-box {
    background-color: transparent;
    border-radius: 0;
    padding: 0 !important;
}

/* Shoptet dává na tomto rozmezí co-boxu vlastní boční margin navíc
   k paddingu výše — na mobilu/tabletu ho nechceme */
@media (min-width: 480px) and (max-width: 767px){

    .ordering-process .co-box {
        margin-left: 0;
        margin-right: 0;
    }

}

.checkout-box {
    padding: 0 !important;
}


/* padding-left dává smysl jen když .col-md-4 stojí vedle .col-md-8
   (od 992px – Bootstrap breakpoint, kdy přestává být stackované pod košíkem) */
@media (min-width: 992px){

    .col-md-4 {
        padding-left: var(--sh-space-lg) !important;
    }

}

/* pod 992px se .col-md-4 (souhrn/sidebar) zalomí pod obsah košíku –
   bez mezery na něj nalepený */
@media (max-width: 991px){

    .sidebar-in-cart,
    #checkoutSidebar {
        margin-top: var(--sh-space-md);
    }

}

/* main-14 má na 767px dvě pravidla se stejnou specificitou pro levý
   padding sloupců řádku (.row.cart-row>div i .row>div) – to druhé,
   obecnější, je v main-14.css deklarované později, takže v cascade
   vyhrává ono a levý padding zůstává 8px místo 0. !important to jistí. */
@media (max-width: 767px){

    .content-wrapper.container .row.cart-row>div,
    .ordering-process .content-wrapper.container {
        padding-left: 0 !important;
    }

}

.next-step-back{
    background:transparent !important;
    border:none !important;
    border-radius: 0px !important;
    box-shadow:none !important;
    padding:0 !important;
    margin-right: 16px;
    font-family:var(--sh-font-family-body);
    font-size:var(--sh-text-base);
    font-weight:var(--sh-font-weight-body);
    text-decoration:none;
    color: var(--sh-color-accent);

    transition:
        color .2s ease,
        box-shadow .2s ease;
}

.next-step-back:hover{

    background:transparent !important;
    color: var(--sh-color-accent);
    box-shadow:inset 0 -2px var(--sh-color-accent) !important;
}

.next-step-forward,
.next-step-finish{

    border-radius:var(--sh-radius-btn);

    background:var(--sh-color-cta) !important;

    color:var(--sh-color-text-inverse);

    font-family:var(--sh-font-family-headings);
    font-size:var(--sh-text-base);
    font-weight:var(--sh-font-weight-body);

    text-transform:none;

    transition:var(--sh-transition);
}

.next-step-forward:hover,
.next-step-finish:hover{

    background:var(--sh-color-cta-hover);

    color:var(--sh-color-text-inverse);
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);
}

/* main-14 má ".next-step .btn.btn-lg{padding:10px 20px}" – 3 třídy,
   vyšší specificita než naše ".next-step-forward" o samotě, proto tady
   znovu s vyšší specificitou (+ shodné s paddingem ostatních tlačítek) */
.next-step .btn.btn-lg.next-step-forward,
.next-step .btn.btn-lg.next-step-finish{
    /* main-14 dává .btn-lg pevnou height:60px + line-height:36px/50px
       (podle toho, jestli je to a.btn.btn-lg) – s naším line-height:1.75
       z base.css .btn se to prakticky vždy pere o výšku navíc, proto
       height:auto a vlastní menší line-height jen pro tohle tlačítko */
    height: auto;
    line-height: var(--sh-line-height-heading-sm);
    padding: 14px 28px;
}

/* sjednocení stylu šipek napříč webem – Shoptet používá pro tato
   tlačítka jinou (tučnější) sadu ikon (\e90a-\e90d) než zbytek webu
   (\e90e-\e911, "chevron" styl) */
.id--16 .next-step-finish:after,
.id--16 .next-step-forward:after,
.id--9 .next-step-finish:after,
.id--9 .next-step-forward:after{
    content:"\e910" !important;
    font-size: 0.7em;
}

/* "Objednat" + "s povinností platby" — sjednocený styl a jeden řádek
   (Shoptet je defaultně staví pod sebe: order-button-text 18px uppercase
   nahoře, order-button-suffix 14px normal s záporným margin-top pod ním) */
.order-button-suffix{

    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
    text-transform:inherit;

    margin:0;
    padding:0;

}

/* main-14: .next-step-finish{display:flex;flex-direction:column} –
   proto byl button úzký a vysoký (spany "Objednat" / "s povinností
   platby" pod sebou). row je řadí vedle sebe na jeden řádek. */
.next-step-finish{
    flex-direction: row;
    white-space:nowrap;
    gap: 6px;
}


.continue-shopping{
color: var(--sh-color-accent)
    }

.continue-shopping,
.order-button-text{

    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    text-transform:inherit;
    }


/* ==========================================================
   KROK 2–3 – NADPISY SEKCÍ
========================================================== */

/* main-14 má vlastní pravidlo ":where(.ums_forms_redesign--on).ordering-process
   .co-box>h2:first-child" s pevnými hodnotami (24px/600/28px) — vyšší
   specificita, proto !important */
.co-box > h4,
.co-box .order-icon,
.co-box > h2:first-child,
.co-box .header-billing{
    font-family: var(--sh-font-family-headings) !important;
    font-size: var(--sh-heading-sm) !important;
    font-weight: var(--sh-font-weight-heading) !important;
    line-height: var(--sh-line-height-heading-sm) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--sh-color-text) !important;

    margin: var(--sh-space-md) 0 var(--sh-space-sm) !important;
}

/* ikony před nadpisy krok 1–3 (dopravka, platba, osobní údaje,
   fakturační adresa...) pryč. main-14 je skrývá jen jako ::before
   (.co-box h2:before{display:none}), skutečné ikony jsou ale vložené
   přímo do HTML (svg/i jako první potomek nadpisu) – proto content:none
   nestačilo, musí se schovat celý první element uvnitř nadpisu. */
.co-box h2 > *:first-child,
.co-box h4 > *:first-child{
    display: none !important;
}

@media (min-width: 766px) {
    :where(.ums_forms_redesign--off).ordering-process .co-box .header-billing, :where(.ums_forms_redesign--off).ordering-process .co-box>h4:first-child {
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading-sm);

    }
}

:where(body.ums_homepage_cart_checkout_headings--on) #checkoutSidebar .cart-content h2 {

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading-sm);
    letter-spacing: normal;
    text-transform: none;
    color: var(--sh-color-text);

    margin: 0 0 var(--sh-space-sm);

}

/*=====================================================
   TLAČÍTKO ZPĚT POUZE TEXTOVÝ ODKAZ
========================================================== */

.ordering-process .next-step a.next-step-back.btn.btn-lg{

    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:inset 0 -2px transparent !important;

    padding:0 0 4px !important;
    margin-right:var(--sh-space-sm);

    color: var(--sh-color-accent) !important;

    font-family:var(--sh-font-family-body);
    font-size:var(--sh-text-base);
    font-weight:var(--sh-font-weight-body);

    text-decoration:none !important;

    transition:
        color .2s ease,
        box-shadow .2s ease;
}

.ordering-process .next-step a.next-step-back.btn.btn-lg:hover,
.ordering-process .next-step a.next-step-back.btn.btn-lg:focus{

    background:transparent !important;
    border:none !important;

    color: var(--sh-color-accent-hover) !important;

    box-shadow:
        inset 0 -2px var(--sh-color-accent-hover) !important;
}

/*=====================================================
   PŘIHLÁSIT SE DO MÉHO ÚČTU – skutečné tlačítko se šipkou, stejný
   vzor jako segmentační tlačítka na homepage / "Náš zlínský spolek"
   (světlá výplň, na hoveru plná CTA), ne podtržený textový odkaz
========================================================== */

a.btn.btn-primary.login-from-cart{

    display:inline-flex;
    align-items:center;
    gap:6px;

    background: var(--sh-color-cta-subtle-deep) !important;
    border:1.5px solid var(--sh-color-cta-subtle-deep) !important;
    border-radius: var(--sh-radius-btn) !important;
    box-shadow:none !important;
    padding:14px 28px !important;

    color: var(--sh-color-text) !important;

    font-family:var(--sh-font-family-headings);
    font-size:var(--sh-text-base);
    font-weight:var(--sh-font-weight-heading);
    text-decoration:none !important;

    transition:var(--sh-transition);
}

.login-from-cart::after{
    content:"\e910";
    font-family:shoptet;
    font-size:0.7em;
    text-decoration:none;
}

a.btn.btn-primary.login-from-cart:hover{
    background: var(--sh-color-cta) !important;
    border-color: var(--sh-color-cta) !important;
    color: var(--sh-color-text-inverse) !important;
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);
}

/* box "Zákaznický účet" – vlastní karta stejně jako u metod dopravy/
   platby výše; :has() cílí přesně tenhle form-group (obsahuje odkaz
   .login-from-cart), ne každý form-group--inline v kroku 3 */
.co-contact-information .form-group:has(.login-from-cart){

    max-width: var(--form-fields-width-lg);

    background-color: var(--sh-color-surface);
    border-radius: var(--sh-radius-md);

    padding: var(--sh-space-s);

}

/* ==========================================================
   KROK 2–3 – ZPŮSOB DOPRAVY / PLATBY – POPISKY
========================================================== */

.billing-name {
    font-weight: var(--sh-font-weight-bold) !important;
}

/* každá metoda dopravy/platby je teď samostatná karta místo řádku
   v jednom velkém barevném boxu (viz .ordering-process .co-box výše) */
.shipping-billing-table .radio-wrapper {
    background-color: var(--sh-color-surface);
    border-radius: var(--sh-radius-md);
    margin-bottom: var(--sh-space-xs);

    padding-left: var(--sh-space-s) !important;
    padding-right: var(--sh-space-s) !important;
}

.shipping-billing-table .radio-wrapper:last-child {
    margin-bottom: 0;
}

/* vybraná metoda – jen jemně tmavší pozadí + tenký obrys v barvě webu,
   ať to není velký barevný skok oproti nevybraným kartám */
.shipping-billing-table .radio-wrapper.active {
    background-color: color-mix(in srgb, var(--sh-color-surface), var(--sh-color-text) 8%);
    box-shadow: inset 0 0 0 1.5px var(--sh-color-cta);
}

/* padding-top/bottom u tohoto labelu záměrně ponechán na výchozí
   hodnotě main-14 (20px) — zmenšení rozhodilo zarovnání viditelného
   rádia (kresleného přes label::before, skutečný <input> je vizuálně
   skrytý 1x1px prvek) a nešlo snadno bezpečně dořešit */

/* ==========================================================
   POTŘEBUJETE POMOC – ZAROVNÁNÍ ŠIPKY
========================================================== */

/* šipka (::after, \e90e) měla jiný line-height než text vedle sebe,
   takže neseděla na střed — flex + align-items to řeší bez ohledu na
   rozdílnou velikost písma ikony a textu */
.checkout-box .toggle-contacts {
    display: flex;
    align-items: center;
}

.checkout-box .toggle-contacts::after {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* ==========================================================
   POTŘEBUJETE POMOC – JEMNÝ FADE MÍSTO SCALE
========================================================== */

.checkout-box .toggle-contacts + .box {
    transform: translateY(-8px) !important;
    opacity: 0 !important;
    transition: opacity .35s ease, transform .35s ease !important;
}

.checkout-box .toggle-contacts.expanded + .box,
.checkout-box .toggle-contacts + .box.visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* ==========================================================
   REKAPITULACE OBJEDNÁVKY – POLOŽKY
========================================================== */

.cart-items {
    margin-bottom: var(--sh-space-sm);
}

.cart-item {
    border-bottom: 1px solid var(--sh-color-border);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-name,
.cart-item-amount,
.cart-item-price {
    padding: var(--sh-space-sm) 0 !important;
    border: none !important;
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-sm);
    color: var(--sh-color-text);
    vertical-align: middle;
}

.cart-item-name .main-link {
    font-size: var(--sh-text-sm);
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-text);
}

/* Vypadat jako samostatný "štítek" nejde hezky udělat, dokud je to
   table-cell (obarvilo by se celé hranaté pole buňky) — necháno bez
   pozadí. Hlavní oprava: main-14 dává buňce pevných 60px, do kterých
   se "0,002 kg" nevejde -- proto přetékalo/nesedělo do buňky. */
.cart-item-amount {
    color: var(--sh-color-text-muted);
    text-align: right !important;
    white-space: nowrap;
    width: auto !important;
    min-width: 72px;
    padding: var(--sh-space-xs) var(--sh-space-sm) !important;
}

.cart-item-price {
    min-width: 72px;
    font-weight: var(--sh-font-weight-bold);
    padding-left: var(--sh-space-sm) !important;
}

/* řádek zvoleného způsobu dopravy/platby (Hotově: ZDARMA) */
.recapitulation-shipping-billing {
    display: flex !important;
    justify-content: space-between;
    padding: 4px 0;
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-body);
    color: var(--sh-color-text);
}

.recapitulation-shipping-billing-label {
    color: var(--sh-color-text-muted);
}

/* main-14 dává "Osobní odběr"/"Hotově" (<strong>) vlastní font-weight,
   který přebije dědění z rodiče — stejný problém jako u
   .order-summary-item.helper strong níže */
.recapitulation-shipping-billing-info {
    font-weight: var(--sh-font-weight-body) !important;
}

/* řádky dopravy/platby v postranní rekapitulaci (PPL 59 Kč,
   Převodem na účet 0 Kč...) – stejný styl jako "Celkem za zboží" níže,
   main-14 na ně dává vlastní font-weight:400 a menší výchozí font-size */
.order-recapitulation strong,
.recapitulation-single strong {
    font-size: var(--sh-text-base) !important;
    font-weight: var(--sh-font-weight-body) !important;
}

/* main-14 dává vnitřnímu <span> (uvnitř <strong>, např. "ZDARMA"
   u způsobu dopravy/platby) vlastní font-weight:700 – vlastní hodnota
   na potomkovi vyhrává nad zděděným (byť !important) fontem z rodiče
   výše, proto stejná změna znovu přímo na span */
.order-recapitulation strong span,
.recapitulation-single strong span {
    font-weight: var(--sh-font-weight-body) !important;
}

/* mezera mezi řádky – na rozdíl od .order-summary-item tu main-14
   žádný vertikální padding nedává, řádky se lepily na sebe */
.recapitulation-single {
    padding: 4px 0;
}

/* souhrnné řádky (Celkem za zboží / Celkem k úhradě) */
.order-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-body);
    color: var(--sh-color-text);
}

/* main-14 cílí ".order-summary-item.helper" (2 třídy), což má vyšší
   specificitu než naše ".order-summary-item" samotné — proto 16px
   z main-14 vyhrávalo nad naším text-base. Stejná dvojtřídní
   specificita (main-14: ".order-summary-item.helper, .recapitulation-single{padding-bottom:8px}")
   držela spodní padding na 8px bez ohledu na naše zmenšení výše. */
.order-summary-item.helper {
    font-size: var(--sh-text-base) !important;
    font-weight: var(--sh-font-weight-body) !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.recapitulation-single {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.order-summary-item.price {
    margin-top: var(--sh-space-xs);
    padding-top: var(--sh-space-sm);
    border-top: 1px solid var(--sh-color-border);
    font-weight: var(--sh-font-weight-bold);
    font-size: var(--sh-text-lg) !important;
}

/* "Celkem za zboží:" je v HTML obalené v <strong> — náš globální reset
   (base.css: strong,b{font-weight:...}) ho jinak dělá tučnější než
   sousední částku vedle, i když má stejný řádek vypadat jednotně */
.order-summary-item.helper strong {
    font-weight: var(--sh-font-weight-body) !important;
}

/* ==========================================================
   MALÁ TLAČÍTKA (.btn-xs) — např. "Zvolte pobočku" u výdejních míst
========================================================== */

/* main-14 dává .btn-xs skoro nulový svislý padding (jen font-size:12px/
   line-height:16px drží výšku) - tlačítko je tak vizuálně stlačené.
   Platí pro .btn-xs kdekoli na webu, ne jen v košíku - všechny CSS
   soubory se načítají globálně. */
.btn.btn-xs,
a.btn.btn-xs {
    padding: var(--sh-space-xs) var(--sh-space-sm) !important;
}

/* částka "Celkem k úhradě" má být viditelně tučná */
.order-summary-item.price .price.price-primary,
.order-summary-item.price [data-price-total-wv] {
    font-weight: var(--sh-font-weight-bold) !important;
}

/* ==========================================================
   DÁRKY A SLEVY (slevový kupón + doprava zdarma)
========================================================== */

/* main-14 dává .cart-summary (obal celého bloku "Dárky a slevy")
   boční padding:16px pod 768px a padding:0 až od 768px výš – tady
   chceme 0 i pod touhle hranicí, ať obsah lícuje se zbytkem stránky
   stejně jako na desktopu */
@media (max-width: 767px) {
    .cart-summary {
        padding: 0 !important;
    }
}

/* ikony – Shoptet má pro .icon-van (a další) několik konkurenčních
   pravidel s vlastním font-size/height/margin z jiných částí šablonu
   (homepage, patička…), která by jinak s ikonou slevy neladila.
   !important + reset height/line-height, ať mají obě ikony stejnou
   opticky vnímanou velikost bez ohledu na to, které z nich vyhraje. */
.extras-wrapper [class*=" icon-"],
.extras-wrapper [class^="icon-"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 20px !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
    min-width: 24px;
    margin: 0 var(--sh-space-xs) 0 0 !important;

    color: var(--sh-color-accent);
}

/* ikona dodávky zpátky – obecné pravidlo výše (font-size/height/
   margin/color) ji sjednotí s ostatními ikonami v bloku, takže už
   proti main-14 neladí a schovávat ji není potřeba */

/* pole slevového kupónu – stejný styl jako ostatní inputy webu
   (newsletter v patičce, vyhledávání v hlavičce) */
.extras-wrapper .discount-coupon .form-control {
    height: 44px !important;
    padding: 0 !important;

    background: transparent !important;

    border: none !important;
    border-bottom: 1px solid var(--sh-color-text) !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    color: var(--sh-color-text);

    transition: var(--sh-transition);
}

.extras-wrapper .discount-coupon .form-control::placeholder {
    color: var(--sh-color-text);
}

.extras-wrapper .discount-coupon .form-control:focus,
.extras-wrapper .discount-coupon .form-control:focus-visible {
    border-bottom-color: var(--sh-color-accent) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* tlačítko "Přidat" – compact-form ho v main-14 vizuálně spojuje s
   inputem (levé rohy 0, bez levého borderu); teď když je input jen
   podtržený, ten spoj nedává smysl. Odpojeno mezerou + plnou pilulkou,
   stejně jako tlačítko "Hledat" ve vyhledávacím popupu (header.css). */
.extras-wrapper .discount-coupon .btn {
    margin-left: var(--sh-space-sm);
    min-width: auto;

    /* stejná výška jako input (44px) – main-14 řadí input+tlačítko
       na .discount-coupon form přes align-items:center, ale tlačítko
       je s naším paddingem/line-height vyšší než input, takže "sedí"
       jen opticky náhodně; se stejnou výškou lícují spodní hrany obou */
    height: 44px;

    border: none !important;
    border-radius: var(--sh-radius-btn) !important;

    padding: 0 28px !important;

    background: var(--sh-color-cta) !important;
    color: var(--sh-color-text-inverse) !important;

    transition: var(--sh-transition);
}

.extras-wrapper .discount-coupon .btn:hover {
    background: var(--sh-color-cta-hover) !important;
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);
}

/* ---------- už vložený kupón ----------
   Markup: .applied-coupon__heading (label) + .applied-coupon (<strong>
   popisek + <form> s "x" tlačítkem na odebrání). Obecné pravidlo výše
   (.discount-coupon .btn, padding 12px 28px — určené pro tlačítko
   "Přidat" vedle inputu) dělá z malého "x" zbytečně velkou pilulku na
   vlastním řádku pod textem. Tady ho zmenšujeme na malé kulaté
   tlačítko a dáváme popisek + "x" vedle sebe na jeden řádek. */
.extras-wrapper .discount-coupon .applied-coupon__heading {
    margin: 0 0 var(--sh-space-xs);

    font-size: var(--sh-text-sm);
    font-weight: var(--sh-font-weight-bold);
    text-transform: none;
    letter-spacing: normal;
    color: var(--sh-color-text);
}

.extras-wrapper .discount-coupon .applied-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sh-space-sm);

    /* stejná "subtle" barva jako karty způsobu dopravy/platby
       (.shipping-billing-table .radio-wrapper), místo modrošedé */
    background: var(--sh-color-surface);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-xs) var(--sh-space-sm);
}

/* na tabletu/mobilu main-14 zmenšuje spodní okraje uvnitř .extras-wrap
   (viz i .cart-summary padding níže), takže box vloženého kupónu
   a věta "Objednejte ještě za..." pod ním sedí skoro na sobě –
   přidán vlastní odstup */
@media (max-width: 991px) {
    .extras-wrapper .discount-coupon .applied-coupon {
        margin-bottom: var(--sh-space-sm);
    }
}

.extras-wrapper .discount-coupon .applied-coupon strong {
    font-weight: var(--sh-font-weight-medium);
    color: var(--sh-color-text);
}

/* main-14 dává .discount-coupon form (spolu s .extra.delivery/.discount/
   .gift a .free-gift) margin-bottom:32px + min-height:40px — uvnitř
   .applied-coupon to zbytečně nafukuje výšku modrého boxu dolů */
.extras-wrapper .discount-coupon .applied-coupon form {
    margin-bottom: 0;
    min-height: auto;
}

.extras-wrapper .discount-coupon .applied-coupon form fieldset {
    display: block;
    border: none;
    margin: 0;
    padding: 0;
}

/* "x" je teď jen křížek bez pozadí/pilulky */
.extras-wrapper .discount-coupon .applied-coupon .btn {
    width: 28px;
    height: 28px;
    min-width: 28px !important;
    padding: 0 !important;
    margin-left: 0 !important;
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent !important;
    color: var(--sh-color-text-muted) !important;

    font-size: var(--sh-text-sm);
    line-height: 1;
}

.extras-wrapper .discount-coupon .applied-coupon .btn:hover {
    background: transparent !important;
    color: var(--sh-color-accent) !important;
    transform: none;
    box-shadow: none;
}

/* kontejner celé věty – main-14 dává font-size:12px/line-height:16px
   napevno, řádkování ať jede podle naší proměnné */
.extras-wrapper .extras-wrap {
    line-height: var(--sh-line-height-body);
}

/* zarovnání s levým blokem (kupón) na desktopu – main-14 dává
   ".extras-wrap .extra" od 1200px nahoře margin-top:16px, zatímco
   ".discount-coupon form" žádný nemá, takže věta o dopravě sedí o
   16px níž než input/tlačítko kupónu. Zároveň ikona dodávky (vlastní
   inline-flex box, line-height:1) a text věty (line-height těla webu,
   1.75) mají jinou "optickou" základnu – flex řádek na .extra srovná
   oba spolehlivě, .price-range je vynucen na vlastní řádek pod nimi. */
@media (min-width: 1200px) {
    .extras-wrapper .extras-wrap .extra {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 0;
    }

    .extras-wrapper .extra .price-range {
        flex-basis: 100%;
    }
}

/* "Objednejte ještě za X Kč a budete mít dopravu ZDARMA" – celá věta
   stejným stylem */
.extras-wrapper .extra span {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-medium);
    letter-spacing: normal;
    color: var(--sh-color-text);
}

/* "470,24 Kč" / "ZDARMA" – tučně, jinak stejné jako zbytek věty */
.extras-wrapper .extra span strong {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-bold);
    letter-spacing: normal;
    color: var(--sh-color-text);
}

/* ukazatel do dopravy zdarma – ať nesedí hned pod textem, ale hned
   pod ním je konec wrapperu, takže dole žádná mezera navíc */
.extras-wrapper .extra .price-range {
    margin-top: var(--sh-space-xs);
    margin-bottom: 0;
}

/* ==========================================================
   KONTAKTNÍ BOX V KOŠÍKU ("Potřebujete pomoc?")
========================================================== */

.contact-box img {
    border-radius: 50%;
}

/* main-14: .cart-inner .contact-box [class*="icon-"] má font-size:20px
   (bez !important) a barvu přes var(--colors-foregrounds-icons-primary)
   - obojí nižší/rovná specificita, ale !important pro jistotu */
.contact-box .icon-message,
.contact-box .icon-phone {
    display: none !important;
}

/* ==========================================================
   DĚKOVNÁ STRÁNKA: skrýt platební údaje (platba převodem)
========================================================== */

/* Zboží se prodává na váhu, skutečná cena se zjistí až po navážení.
   Platební údaje (účet, IBAN, BIC, variabilní symbol, QR kód) proto
   zákazník dostane až na zálohové faktuře, ne hned po objednávce.
   Jen vizuální skrytí - údaje zůstávají v HTML stránky. Levý sloupec
   (doprava, platba, částka) zůstává. Skrývá se celý blok
   .recapitulation-table-payment i samotný QR obrázek, kdyby ho Shoptet
   vykreslil mimo tento blok. */
.co-payment-method .recapitulation-table-payment,
.co-payment-method img.qrcode {
    display: none !important;
}

/* Text pod rekapitulací ("Rekapitulaci Vám zašleme i e-mailem.") nejde
   v administraci změnit, proto se původní text schová (font-size: 0) a
   místo něj se přes ::before zobrazí vlastní. Cílí se jen na ten jediný
   řádek, který hned předchází "Děkujeme!" (.summary-thx), aby se nezasáhly
   žádné řádky se součty v obsahu objednávky. main-14 dává řádku
   display:flex a font 14px/600, specificita zde je vyšší. */
.recapitulation-wrapper > .order-summary-item.total:has(+ .summary-thx) {
    justify-content: center;
    font-size: 0;
    line-height: 0;
}

.recapitulation-wrapper > .order-summary-item.total:has(+ .summary-thx)::before {
    content: "Některé produkty prodáváme na váhu, proto objednávky nejdříve kontrolujeme a platební údaje pošleme e-mailem až po navážení přesného množství.";
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-medium);
    line-height: var(--sh-line-height-body);
    text-align: center;
}