/* ==========================================================
   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-body);
    line-height:var(--sh-line-height-heading);

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


/* číslo kroku — kolečko v naší žluté (světle zelená se na webu jinak
   nepoužívá, v košíku působila cize) */

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-on-dark);
    color:var(--sh-color-on-cta-on-dark);

    font-family:var(--sh-font-family-body);
    font-size:var(--sh-text-base);
    font-weight:var(--sh-font-weight-bold);
    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-forest) !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-on-dark) !important;
    color:var(--sh-color-on-cta-on-dark) !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-forest);
    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-xl);
    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: 0 !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-on-cta) !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-on-cta) !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-on-cta);

    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-on-cta);
    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 — odkaz se šipkou (ne tlačítko), stejný
   vzor jako ostatní odkazy „→“; nadpis boxu „Zákaznický účet“ je
   o stupeň větší, v nadpisovém písmu
========================================================== */

.co-contact-information .form-group:has(.login-from-cart) :where(label, span, strong, p, div):not(.login-from-cart){
    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-heading);
    line-height: 1.2;
    color: var(--sh-color-text);
}

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

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

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow:none !important;
    padding: 0 !important;
    margin-top: var(--sh-space-xs);

    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-transform: none;
    letter-spacing: normal;
    text-decoration:none !important;

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

.login-from-cart::after{
    content:"→";
    display:inline-block;
    font-family:var(--sh-font-family-body);
    font-size:1em;
    text-decoration:none;
    transition:var(--sh-transition);
}

.login-from-cart:hover::after{
    transform:translateX(4px);
}

a.btn.btn-primary.login-from-cart:hover{
    background: transparent !important;
    border: 0 !important;
    color: var(--sh-color-accent-hover) !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-mark);
}

/* označení vybrané metody a odkaz „Zvolte odběrné místo“ červeně
   (muchomůrka): lucerna na pískovcové kartě nebyla čitelná. main-14
   barví kroužek, tečku, název vybrané metody (label > span b) i odkazy
   přes --color-secondary → stačí ho v kartě lokálně přepsat; odkazy
   v kartě navíc výslovně, kdyby je šablona barvila jinak. Cena „ZDARMA“
   zůstává zelená i u vybrané metody. */
.shipping-billing-table .radio-wrapper {
    --color-secondary: var(--sh-color-mark);
}

.shipping-billing-table .radio-wrapper label a:not(.btn),
.shipping-billing-table .radio-wrapper .sublabel,
.shipping-billing-table .radio-wrapper .sublabel a,
.shipping-billing-table .radio-wrapper .shipping-options a {
    color: var(--sh-color-mark) !important;
}

.shipping-billing-table .radio-wrapper.active .for-free,
.shipping-billing-table .radio-wrapper .for-free {
    color: var(--sh-color-accent) !important;
}

/* 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-on-cta) !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-body);
    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-body);
    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;
}

/* varianta / parametry pod názvem produktu („Balení: 500 g“): šablona
   dává 12 px, vedle většího názvu to působilo drobně */
/* :not(.cart-p-availability) — dostupnost („Momentálně nedostupné“) je
   taky <div> v .p-name a má vlastní menší velikost výš (.cart-p-availability) */
.cart-table .p-name > div:not(.cart-p-availability),
.cart-table .p-name .p-code {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-body);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text-muted);
}


/* „Dopravu máte zdarma!“ — i přímo <strong>/<b> v .extra bez <span>,
   šablona je dává tučně; stejný normální řez jako zbytek věty */
.extras-wrapper .extra strong,
.extras-wrapper .extra b {
    font-weight: var(--sh-font-weight-body);
}


/* ==========================================================
   „ZPĚT DO OBCHODU“ — sekundární podtržený odkaz
   Stejný vzor jako druhá akce v heru na homepage (.sh-hero__link):
   tučný Arial v barvě textu s 2px podtržením, žádné verzálky, nezalamuje
   se (v úzkém panelu se dřív lámalo na dva řádky). Platí pro odkaz
   .next-step-back v souhrnu košíku.
========================================================== */

.cart-content .next-step a.next-step-back,
#checkoutSidebar a.next-step-back,
.summary-wrapper a.next-step-back,
.next-step a.next-step-back.btn {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 0 4px !important;

    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px 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);
    font-weight: var(--sh-font-weight-bold);
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;

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

.cart-content .next-step a.next-step-back:hover,
#checkoutSidebar a.next-step-back:hover,
.summary-wrapper a.next-step-back:hover,
.next-step a.next-step-back.btn:hover {
    border-bottom-color: var(--sh-color-accent) !important;
    color: var(--sh-color-accent) !important;
    background: transparent !important;
    transform: none !important;
}


/* ==========================================================
   TLAČÍTKA V SOUHRNU KOŠÍKU — stejně jako tlačítka v heru
   „Pokračovat“: velikost a řez z tokenů tlačítek (text-sm, bold,
   verzálky, .06em) — dřív bylo větší a působilo tlustě.
   „Zpět do obchodu“: sekundární podtržený odkaz (jako druhá akce v heru),
   s mezerou vedle tlačítka. Selektory s .btn.btn-lg a !important kvůli
   main-14 (.next-step .btn.btn-lg, a.btn) — jinak výš nechytalo.
========================================================== */

.next-step .btn.btn-lg.next-step-forward,
.next-step .btn.btn-lg.next-step-finish,
.next-step a.next-step-forward,
.next-step a.next-step-finish {
    font-family: var(--sh-btn-font-family) !important;
    font-size: var(--sh-text-sm) !important;
    font-weight: var(--sh-btn-font-weight) !important;
    letter-spacing: var(--sh-btn-letter-spacing) !important;
    text-transform: var(--sh-btn-text-transform) !important;
}

.next-step .btn.btn-lg.next-step-back,
.next-step a.next-step-back,
#checkoutSidebar .next-step a:not(.next-step-forward):not(.next-step-finish) {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;

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

    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid var(--sh-color-text) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: var(--sh-font-family-body) !important;
    font-size: var(--sh-text-base) !important;
    font-weight: var(--sh-font-weight-bold) !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;

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

.next-step .btn.btn-lg.next-step-back:hover,
.next-step a.next-step-back:hover,
#checkoutSidebar .next-step a:not(.next-step-forward):not(.next-step-finish):hover {
    border-bottom-color: var(--sh-color-accent) !important;
    color: var(--sh-color-accent) !important;
    background: transparent !important;
    transform: none !important;
}


/* ==========================================================
   REKAPITULACE OBJEDNÁVKY — všechny částky jedním písmem a velikostí
   Celkem za zboží, doprava / platba (ZDARMA, 59 Kč…), Celkem k úhradě
   i Cena bez DPH mají stejnou rodinu a velikost (--sh-text-base).
   Dřív bylo „Celkem k úhradě“ v --sh-text-lg (menší než ostatní řádky
   v --sh-text-base) a doprava s „ZDARMA“ jinou velikostí; liší se jen
   tučný řez celkové částky a tlumená barva řádku bez DPH.
========================================================== */

.order-summary-item,
.order-summary-item *,
.order-summary-item.price,
.order-summary-item.price *,
.order-summary-item.helper,
.order-summary-item.helper *,
.order-recapitulation strong,
.order-recapitulation strong span,
.recapitulation-single,
.recapitulation-single *,
.recapitulation-single strong,
.recapitulation-single strong span {
    font-family: var(--sh-font-family-body) !important;
    font-size: var(--sh-text-base) !important;
    letter-spacing: normal !important;
}

/* tučně zůstává jen celková částka */
.order-summary-item.price .price.price-primary,
.order-summary-item.price [data-price-total-wv] {
    font-weight: var(--sh-font-weight-bold) !important;
}


/* „Zpět do obchodu“ v souhrnu košíku (.next-step--cart) — rodič má třídu
   .next-step--cart; předchozí pravidla výš prohrávala s
   ".ordering-process .next-step a.next-step-back.btn.btn-lg" (barva
   accent s !important), proto je tady o jednu třídu specifičtější.
   Ověřeno živě: podtržení 2 px, tučný řez, mezera vpravo. */
.ordering-process .next-step.next-step--cart a.next-step-back.btn.btn-lg {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 var(--sh-space-md) 0 0 !important;
    padding: 0 0 4px !important;

    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid var(--sh-color-text) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: var(--sh-color-text) !important;
    font-family: var(--sh-font-family-body) !important;
    font-size: var(--sh-text-base) !important;
    font-weight: var(--sh-font-weight-bold) !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.ordering-process .next-step.next-step--cart a.next-step-back .continue-shopping {
    color: inherit !important;
    font: inherit !important;
}

.ordering-process .next-step.next-step--cart a.next-step-back.btn.btn-lg:hover,
.ordering-process .next-step.next-step--cart a.next-step-back.btn.btn-lg:focus {
    border-bottom-color: var(--sh-color-accent) !important;
    color: var(--sh-color-accent) !important;
    background: transparent !important;
    transform: none !important;
}


/* ==========================================================
   REKAPITULACE OBJEDNÁVKY NA ŽLUTÉ
   Jen box s rekapitulací (#checkoutSidebar .cart-content). Box
   „Potřebujete pomoc?“ (.checkout-box-wrapper) zůstává světle zelený,
   ať ve sloupci není žlutá dvakrát. Dělicí čára nad celkovou částkou
   je jemně ztmavená, aby se na žluté neztratila.
========================================================== */

/* Oba boxy v postranním sloupci mají třídu .cart-content; rekapitulace
   navíc .summary-wrapper, „Potřebujete pomoc?“ .checkout-box-wrapper
   (ověřeno živě). Žlutá proto jen na .summary-wrapper, pomoc výslovně
   zůstává světle zelená. */
.sidebar-in-cart .cart-content.summary-wrapper,
.cart-content.summary-wrapper,
#checkoutSidebar .cart-content.summary-wrapper {
    background-color: var(--sh-color-recap) !important;
}

.sidebar-in-cart .cart-content.checkout-box-wrapper,
.cart-content.checkout-box-wrapper,
#checkoutSidebar .cart-content.checkout-box-wrapper {
    background-color: var(--sh-color-surface) !important;
}

.sidebar-in-cart .cart-content.summary-wrapper .order-summary-item.price,
.cart-content.summary-wrapper .order-summary-item.price,
#checkoutSidebar .cart-content.summary-wrapper .order-summary-item.price {
    border-top-color: color-mix(in srgb, var(--sh-color-text) 25%, transparent);
}


/* V dalších krocích objednávky (Doprava & platba, Informace o vás) je
   „Potřebujete pomoc?“ (.checkout-box: tlačítko Skrýt/Zobrazit kontakty
   + karta s kontaktem) uvnitř rekapitulace objednávky v postranním sloupci
   (#checkoutSidebar .cart-content .order-summary). Zbytečně ji nafukuje,
   proto je tam skryté. V prvním kroku košíku zůstává jako samostatný box
   (.checkout-box-wrapper). */
#checkoutSidebar .order-summary .checkout-box,
#checkoutSidebar .cart-content .order-summary > .checkout-box {
    display: none !important;
}


/* V dalších krocích objednávky je box rekapitulace přímo
   #checkoutSidebar > .cart-content (bez .summary-wrapper, ten je jen v
   prvním kroku) — taky žlutý. */
#checkoutSidebar > .cart-content,
#checkoutSidebar .cart-content:has(> .order-summary) {
    background-color: var(--sh-color-recap) !important;
}

#checkoutSidebar > .cart-content .order-summary-item.price,
#checkoutSidebar .cart-content:has(> .order-summary) .order-summary-item.price {
    border-top-color: color-mix(in srgb, var(--sh-color-text) 25%, transparent);
}


/* Nadpisy boxů v postranním sloupci (Rekapitulace objednávky,
   Potřebujete pomoc?) — stejná velikost a písmo jako nadpisy kroků
   („Zvolte způsob dopravy“, .co-box > h2/h4 výš): Georgie,
   --sh-heading-sm, normální řez. Menší odstup pod nadpisem.
   !important kvůli h2.h4 a pravidlům šablony výš. */
.sidebar-in-cart .cart-content h2,
#checkoutSidebar .cart-content h2,
.cart-content.summary-wrapper h2,
.cart-content.checkout-box-wrapper h2 {
    font-family: var(--sh-font-family-headings) !important;
    font-size: var(--sh-heading-sm) !important;
    line-height: var(--sh-line-height-heading-sm) !important;
    font-weight: var(--sh-font-weight-heading) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin-bottom: var(--sh-space-sm) !important;
}


/* ==========================================================
   REKAPITULACE V KROCÍCH OBJEDNÁVKY — JEDNOTNÁ TYPOGRAFIE
   Položky (název, varianta, počet, cena), řádky doprava / platba,
   „Celkem za zboží“, „Celkem k úhradě“ a „Cena bez DPH“ mají dřív
   každé jiné písmo, velikost i řez (šablona dává názvům tučně, variantě
   12 px, částkám tučně…). Teď jedno: Arial, --sh-text-base, normální řez,
   řádkování 1,5. Výjimky: nadpis boxu (Georgie, výš), celková částka
   (tučně) a tlačítka (jsou mimo .order-summary).
========================================================== */

.sidebar-in-cart .order-summary :where(*):not(h2),
#checkoutSidebar .order-summary :where(*):not(h2) {
    font-family: var(--sh-font-family-body) !important;
    font-size: var(--sh-text-sm) !important;
    font-weight: var(--sh-font-weight-body) !important;
    letter-spacing: normal !important;
    line-height: var(--sh-line-height-body) !important;
    text-transform: none !important;
}

/* částky se nezalamují („32,90 / Kč“ na dva řádky) */
.sidebar-in-cart .order-summary :where([class*="price"], [class*="total"], .cart-item-price, td, span):not(h2),
#checkoutSidebar .order-summary :where([class*="price"], [class*="total"], .cart-item-price, td, span):not(h2) {
    white-space: nowrap;
}

/* jediná tučná věc: celková částka k úhradě */
.sidebar-in-cart .order-summary .order-summary-item.price .price.price-primary,
.sidebar-in-cart .order-summary .order-summary-item.price [data-price-total-wv],
#checkoutSidebar .order-summary .order-summary-item.price .price.price-primary,
#checkoutSidebar .order-summary .order-summary-item.price [data-price-total-wv] {
    font-weight: var(--sh-font-weight-bold) !important;
}

/* druhotné údaje (varianta, počet kusů, bez DPH) stejně velké, jen tlumené */
.sidebar-in-cart .order-summary :where(.p-variant, .variant, [class*="parameter"], .cart-item-unit):not(h2),
#checkoutSidebar .order-summary :where(.p-variant, .variant, [class*="parameter"], .cart-item-unit):not(h2) {
    color: var(--sh-color-text-muted);
}


/* ----------------------------------------------------------
   REKAPITULACE — struktura: zboží | mezisoučty | celkem
   Menší písmo (--sh-text-sm), položky zboží oddělené od součtů linkou,
   celková částka k úhradě o stupeň větší a tučná.
---------------------------------------------------------- */

/* blok se zbožím (název + varianta + počet + cena): od součtů ho dělí
   linka a mezera, řádky v něm jsou těsnější */
.sidebar-in-cart .order-summary .cart-items,
#checkoutSidebar .order-summary .cart-items {
    margin-bottom: var(--sh-space-sm);
    padding-bottom: var(--sh-space-xs);
    border-bottom: 1px solid color-mix(in srgb, var(--sh-color-text) 25%, transparent);
}

/* mezisoučty (Celkem za zboží, doprava, platba) těsně pod sebou */
.sidebar-in-cart .order-summary .order-summary-item.helper,
#checkoutSidebar .order-summary .order-summary-item.helper,
.sidebar-in-cart .order-summary .recapitulation-single,
#checkoutSidebar .order-summary .recapitulation-single {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* celkem k úhradě: stejná velikost jako zbytek rekapitulace
   (--sh-text-sm), jen tučně — popisek i částka */
.sidebar-in-cart .order-summary .order-summary-item.price .price-label.price-primary,
.sidebar-in-cart .order-summary .order-summary-item.price .price.price-primary,
.sidebar-in-cart .order-summary .order-summary-item.price [data-price-total-wv],
#checkoutSidebar .order-summary .order-summary-item.price .price-label.price-primary,
#checkoutSidebar .order-summary .order-summary-item.price .price.price-primary,
#checkoutSidebar .order-summary .order-summary-item.price [data-price-total-wv] {
    font-size: var(--sh-text-sm) !important;
    font-weight: var(--sh-font-weight-bold) !important;
}

/* „Cena bez DPH“: stejná velikost, normální řez, šedě (tlumená barva) */
.sidebar-in-cart .order-summary .order-summary-item.price .price-label.price-secondary,
.sidebar-in-cart .order-summary .order-summary-item.price .price.price-secondary,
.sidebar-in-cart .order-summary .order-summary-item.price .price.price-secondary *,
#checkoutSidebar .order-summary .order-summary-item.price .price-label.price-secondary,
#checkoutSidebar .order-summary .order-summary-item.price .price.price-secondary,
#checkoutSidebar .order-summary .order-summary-item.price .price.price-secondary * {
    font-size: var(--sh-text-sm) !important;
    font-weight: var(--sh-font-weight-body) !important;
    color: var(--sh-color-text-muted) !important;
}


/* ==========================================================
   DOPRAVA ZDARMA V KOŠÍKU — ikona dodávky vlevo od věty i ukazatele
   Struktura .extra: i.icon-van + span (věta + .price-range). Ikona je
   vlevo, svisle uprostřed; vpravo od ní věta a pod ní ukazatel.
========================================================== */

.extras-wrapper .extras-wrap .extra {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--sh-space-xs);
}

.extras-wrapper .extras-wrap .extra > [class*="icon-"] {
    position: static !important;
    flex: 0 0 auto;
    margin: 0 !important;
}

.extras-wrapper .extras-wrap .extra > span:not([class*="icon-"]) {
    flex: 1 1 auto;
    min-width: 0;
}

.extras-wrapper .extras-wrap .extra .price-range {
    display: block;
    width: auto;
    margin-left: 0 !important;
    margin-top: var(--sh-space-xs) !important;
    margin-bottom: 0 !important;
}


/* ==========================================================
   ROZBALOVANÁ POLE (firma, poznámka pro prodejce)
   Shoptet je rozbaluje jQuery slideDown (výška + okraje se mění po
   krocích, formulář pod nimi „přiletí“). Výšku držíme na auto a pole
   jen jemně vyblednou a sjedou o pár pixelů — žádné skákání obsahu.
========================================================== */

@keyframes sh-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.ordering-process .js-hidden.visible,
.ordering-process #company-info,
.ordering-process .co-box [class*="remark"].visible,
.ordering-process .co-box [id*="remark"].visible {
    height: auto !important;
    overflow: visible !important;
    animation: sh-reveal .4s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .ordering-process .js-hidden.visible,
    .ordering-process #company-info {
        animation: none;
    }
}


/* ==========================================================
   REKAPITULACE VE 3. KROKU — jedna dělicí čára, tučná částka,
   tlačítka pod sebou
========================================================== */

/* mezi platbou a celkem k úhradě má zůstat jen čára nad „Celkem k úhradě“
   (.order-summary-item.price); zbylé okraje souhrnu dopravy a platby pryč */
#checkoutSidebar .order-recapitulation,
#checkoutSidebar .order-recapitulation .recapitulation-single,
#checkoutSidebar .order-recapitulation .recapitulation-single.last {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

#checkoutSidebar .order-summary-item.price {
    border-top: 1px solid color-mix(in srgb, var(--sh-color-text) 25%, transparent) !important;
}

/* částka k úhradě tučně ve všech krocích (label i částka i vnořené prvky) */
#checkoutSidebar .price-wrapper .price-primary,
#checkoutSidebar .price-wrapper .price-primary *,
.sidebar-in-cart .price-wrapper .price-primary,
.sidebar-in-cart .price-wrapper .price-primary * {
    font-weight: var(--sh-font-weight-bold) !important;
}

/* tlačítka: hlavní akce přes celou šířku (text se může zalomit),
   „Zpět“ jako odkaz pod ní, vycentrovaný — žádné řádkové vedle sebe */
#checkoutSidebar .next-step {
    display: flex !important;
    flex-direction: column-reverse !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--sh-space-sm);
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#checkoutSidebar .next-step .next-step-forward,
#checkoutSidebar .next-step .next-step-finish {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: var(--sh-space-sm) !important;
    padding-right: var(--sh-space-sm) !important;
    white-space: normal !important;
    text-align: center;
    justify-content: center;
    line-height: 1.25;
}

#checkoutSidebar .next-step a.next-step-back {
    align-self: center !important;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}


/* ==========================================================
   TLAČÍTKA „ZPĚT“ / „ZPĚT DO OBCHODU“ — světle zelené tlačítko
   Všechny tři kroky + souhrn košíku: obrys v barvě textu, průhledná
   výplň, na hoveru světle zelená (ne podtržený odkaz). Selektory
   s prefixem body přebíjejí předchozí podtržené varianty výš.
========================================================== */

body .ordering-process .next-step a.next-step-back.btn.btn-lg,
body .ordering-process .next-step.next-step--cart a.next-step-back.btn.btn-lg,
body #checkoutSidebar .next-step a.next-step-back,
body .cart-content .next-step a.next-step-back {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--sh-color-surface) !important;
    border: 0 !important;
    border-radius: var(--sh-radius-btn) !important;
    box-shadow: none !important;
    padding: 12px var(--sh-space-sm) !important;
    color: var(--sh-color-text) !important;
    font-family: var(--sh-btn-font-family);
    font-weight: var(--sh-btn-font-weight);
    text-transform: var(--sh-btn-text-transform);
    letter-spacing: var(--sh-btn-letter-spacing);
    text-decoration: none !important;
    transition: var(--sh-transition);
}

body .ordering-process .next-step a.next-step-back.btn.btn-lg:hover,
body .ordering-process .next-step a.next-step-back.btn.btn-lg:focus,
body .ordering-process .next-step.next-step--cart a.next-step-back.btn.btn-lg:hover,
body #checkoutSidebar .next-step a.next-step-back:hover,
body .cart-content .next-step a.next-step-back:hover {
    background: color-mix(in srgb, var(--sh-color-surface), var(--sh-color-text) 8%) !important;
    border-color: transparent !important;
    color: var(--sh-color-text) !important;
    box-shadow: none !important;
}


/* „Zpět“ outline — vyšší specificita: starší pravidlo výš
   (#checkoutSidebar .next-step a:not(.next-step-forward):not(.next-step-finish))
   má ID a prohrávala s ním předchozí varianta bez zdvojených tříd */
#checkoutSidebar .next-step a.next-step-back.btn.btn-lg.btn-lg,
#checkoutSidebar .next-step.next-step a.next-step-back.btn,
.ordering-process .next-step a.next-step-back.btn.btn-lg.btn-lg.btn-lg,
.ordering-process .next-step.next-step--cart a.next-step-back.btn.btn-lg.btn-lg {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    background: var(--sh-color-surface) !important;
    border: 0 !important;
    border-radius: var(--sh-radius-btn) !important;
    box-shadow: none !important;
    padding: 12px var(--sh-space-sm) !important;
    margin: 0 !important;
    color: var(--sh-color-text) !important;
    font-family: var(--sh-btn-font-family) !important;
    font-weight: var(--sh-btn-font-weight) !important;
    text-transform: var(--sh-btn-text-transform) !important;
    letter-spacing: var(--sh-btn-letter-spacing) !important;
    text-decoration: none !important;
}

#checkoutSidebar .next-step a.next-step-back.btn.btn-lg.btn-lg:hover,
#checkoutSidebar .next-step.next-step a.next-step-back.btn:hover,
.ordering-process .next-step a.next-step-back.btn.btn-lg.btn-lg.btn-lg:hover,
.ordering-process .next-step.next-step--cart a.next-step-back.btn.btn-lg.btn-lg:hover {
    background: color-mix(in srgb, var(--sh-color-surface), var(--sh-color-text) 8%) !important;
    border-color: transparent !important;
    color: var(--sh-color-text) !important;
    box-shadow: none !important;
}


/* 3. krok: rekapitulace má DVA bloky .cart-items (1. zboží, 2. doprava +
   platba). Druhý končí čárou a hned pod ním je ještě čára nad „Celkem
   k úhradě“ — dvojitá linka. Druhému bloku okraj bereme. */
#checkoutSidebar .order-summary .cart-items ~ .cart-items,
.sidebar-in-cart .order-summary .cart-items ~ .cart-items {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}


/* „Zpět“ v postranním souhrnu zarovnané doleva (ne na střed) */
#checkoutSidebar .next-step.next-step a.next-step-back.btn.btn-lg {
    align-self: flex-start !important;
}


/* „Zpět“ stejná velikost písma jako hlavní tlačítko (text-sm), bez zalamování */
#checkoutSidebar .next-step.next-step a.next-step-back.btn.btn-lg,
.ordering-process .next-step a.next-step-back.btn.btn-lg.btn-lg.btn-lg {
    font-size: var(--sh-text-sm) !important;
    white-space: nowrap;
}


/* ikona dodávky na úrovni prvního řádku věty (věta se může zalomit na 2 řádky) */
.extras-wrapper .extras-wrap .extra {
    align-items: flex-start !important;
}

.extras-wrapper .extras-wrap .extra > [class*="icon-"] {
    margin-top: 2px !important;
}


/* ==========================================================
   TLAČÍTKA POD SEBOU — hlavní akce nahoře, „Zpět“ pod ní; obě stejně
   vysoké a široké, s mezerou. Platí i pro souhrn v košíku
   (.next-step--cart), kde byla dřív vedle sebe a každé jiné.
========================================================== */

.ordering-process .next-step,
.sidebar-in-cart .next-step,
.summary-wrapper .next-step {
    display: flex !important;
    flex-direction: column-reverse !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--sh-space-xs) !important;
}

body .ordering-process .next-step a.next-step-back.btn.btn-lg.btn-lg.btn-lg,
body .sidebar-in-cart .next-step a.next-step-back.btn.btn-lg.btn-lg,
body .summary-wrapper .next-step a.next-step-back.btn.btn-lg.btn-lg,
body .ordering-process .next-step .btn.btn-lg.next-step-forward,
body .ordering-process .next-step .btn.btn-lg.next-step-finish,
body .sidebar-in-cart .next-step .btn.btn-lg.next-step-forward,
body .summary-wrapper .next-step .btn.btn-lg.next-step-forward {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 var(--sh-space-sm) !important;
    line-height: 1.2 !important;
    font-size: var(--sh-text-sm) !important;
    text-align: center;
}


/* ==========================================================
   TLAČÍTKA VEDLE SEBE (košík, kroky 1–2) — Zpět vlevo, hlavní akce
   vpravo, obě stejně vysoké, s mezerou, bez roztažení na celou šířku.
   Poslední krok (dlouhé „Objednat s povinností platby“) zůstává pod
   sebou. Šipka u „Pokračovat“ pryč.
========================================================== */

body .ordering-process .next-step:not(:has(.next-step-finish)),
body .sidebar-in-cart .next-step:not(:has(.next-step-finish)),
body .summary-wrapper .next-step:not(:has(.next-step-finish)) {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--sh-space-sm) !important;
}

body .ordering-process .next-step:not(:has(.next-step-finish)) a.next-step-back.btn.btn-lg.btn-lg.btn-lg,
body .sidebar-in-cart .next-step:not(:has(.next-step-finish)) a.next-step-back.btn.btn-lg.btn-lg,
body .summary-wrapper .next-step:not(:has(.next-step-finish)) a.next-step-back.btn.btn-lg.btn-lg,
body .ordering-process .next-step:not(:has(.next-step-finish)) .btn.btn-lg.next-step-forward,
body .sidebar-in-cart .next-step:not(:has(.next-step-finish)) .btn.btn-lg.next-step-forward,
body .summary-wrapper .next-step:not(:has(.next-step-finish)) .btn.btn-lg.next-step-forward {
    width: auto !important;
    flex: 0 1 auto !important;
    align-self: center !important;
    padding: 0 var(--sh-space-sm) !important;
    white-space: nowrap !important;
}

/* bez šipky u Pokračovat / Objednat */
.next-step-forward::after,
.next-step-finish::after,
.id--16 .next-step-forward::after,
.id--16 .next-step-finish::after,
.id--9 .next-step-forward::after,
.id--9 .next-step-finish::after {
    content: none !important;
    display: none !important;
}


/* tlačítka pod sebou (poslední krok): menší mezera mezi nimi */
body .ordering-process .next-step:has(.next-step-finish) {
    gap: 8px !important;
}

body .ordering-process .next-step:has(.next-step-finish) > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ==========================================================
   JEDNOTNÁ VÝŠKA TLAČÍTEK NEXT-STEP (košík i kroky 1–3)
   Všechna tlačítka (Zpět, Zpět do obchodu, Pokračovat, Objednat) mají
   stejnou pevnou výšku a svislý padding 0 — výška už nezávisí na
   řádkování ani na tom, který krok je zrovna vidět. Selektory s ID
   a zdvojenými třídami přebíjejí všechny starší varianty výš.
========================================================== */

#checkoutSidebar .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
#checkoutSidebar .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward,
#checkoutSidebar .next-step.next-step .btn.btn-lg.btn-lg.next-step-finish,
body .sidebar-in-cart .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
body .sidebar-in-cart .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward,
body .summary-wrapper .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
body .summary-wrapper .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward {
    box-sizing: border-box !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: var(--sh-space-sm) !important;
    padding-right: var(--sh-space-sm) !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: var(--sh-text-sm) !important;
    font-weight: var(--sh-btn-font-weight) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* v posledním kroku hlavní tlačítko může mít dva řádky (text se zalomí) */
#checkoutSidebar .next-step.next-step .btn.btn-lg.btn-lg.next-step-finish {
    height: auto !important;
    max-height: none !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}


/* tučnost tlačítek next-step: napevno běžný řez (nezávisle na tokenu
   --sh-btn-font-weight v base.css, který se mohl načíst ze staré verze);
   .order-button-text uvnitř dědí */
#checkoutSidebar .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
#checkoutSidebar .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward,
#checkoutSidebar .next-step.next-step .btn.btn-lg.btn-lg.next-step-finish,
#checkoutSidebar .next-step.next-step .btn.btn-lg.btn-lg .order-button-text,
#checkoutSidebar .next-step.next-step .btn.btn-lg.btn-lg .order-button-suffix,
body .sidebar-in-cart .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
body .sidebar-in-cart .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward,
body .summary-wrapper .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
body .summary-wrapper .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward {
    font-weight: var(--sh-btn-font-weight) !important;
}


/* VÝŠKA TLAČÍTEK jako ve 2. kroku: výšku určuje padding 14px 28px
   a řádkování nadpisů, ne pevných 56 px (přebíjí blok výš). Zpět i hlavní
   tlačítko mají shodný padding, takže jsou všude stejně vysoká. */
#checkoutSidebar .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
#checkoutSidebar .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward,
#checkoutSidebar .next-step.next-step .btn.btn-lg.btn-lg.next-step-finish,
body .sidebar-in-cart .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
body .sidebar-in-cart .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward,
body .summary-wrapper .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
body .summary-wrapper .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    line-height: var(--sh-line-height-heading-sm) !important;
}


/* Úzký sloupec (tablet, malé okno): tlačítka vedle sebe se nevejdou →
   zalomí se pod sebe (hlavní akce nahoře, Zpět pod ní) místo přetékání */
body .ordering-process .next-step:not(:has(.next-step-finish)),
body .sidebar-in-cart .next-step:not(:has(.next-step-finish)),
body .summary-wrapper .next-step:not(:has(.next-step-finish)),
#checkoutSidebar .next-step:not(:has(.next-step-finish)) {
    flex-direction: row !important;
    flex-wrap: wrap-reverse !important;
    justify-content: flex-start !important;
    row-gap: 8px !important;
    column-gap: var(--sh-space-sm) !important;
}

#checkoutSidebar .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
#checkoutSidebar .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward,
body .sidebar-in-cart .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
body .sidebar-in-cart .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward,
body .summary-wrapper .next-step.next-step a.next-step-back.btn.btn-lg.btn-lg,
body .summary-wrapper .next-step.next-step .btn.btn-lg.btn-lg.next-step-forward {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}


/* ==========================================================
   REKAPITULACE OBJEDNÁVKY — TMAVÝ BOX
   Barva boxu je v tokenu --sh-color-recap (base.css; zkoušena
   muchomůrka i noc). Text a dělicí čáry světlé; tlačítko „Pokračovat“
   zůstává lucerna (tmavý text, dobrý kontrast). „Potřebujete pomoc?“
   (.checkout-box-wrapper) zůstává pískovcová. Přebíjí pravidla výš
   (žlutá) a main-14 → !important a prefix body.
========================================================== */

body .sidebar-in-cart .cart-content.summary-wrapper,
body .cart-content.summary-wrapper,
body #checkoutSidebar > .cart-content:not(.checkout-box-wrapper),
body #checkoutSidebar .cart-content:has(> .order-summary) {
    background-color: var(--sh-color-recap) !important;
    color: var(--sh-color-text-inverse) !important;
}

body .cart-content.summary-wrapper *:not(.btn):not(.btn *),
body #checkoutSidebar > .cart-content:not(.checkout-box-wrapper) *:not(.btn):not(.btn *),
body #checkoutSidebar .cart-content:has(> .order-summary) *:not(.btn):not(.btn *) {
    color: var(--sh-color-text-inverse) !important;
}

body .cart-content.summary-wrapper .order-summary-item.price,
body #checkoutSidebar > .cart-content:not(.checkout-box-wrapper) .order-summary-item.price,
body #checkoutSidebar .cart-content:has(> .order-summary) .order-summary-item.price {
    border-top-color: color-mix(in srgb, var(--sh-color-text-inverse) 35%, transparent) !important;
}

/* „Zpět do obchodu“ je odkaz s podtržením v barvě textu → světlé */
body .cart-content.summary-wrapper a.next-step-back,
body #checkoutSidebar > .cart-content:not(.checkout-box-wrapper) a.next-step-back,
body #checkoutSidebar .cart-content:has(> .order-summary) a.next-step-back {
    border-bottom-color: var(--sh-color-text-inverse) !important;
}

body .cart-content.summary-wrapper a.next-step-back:hover,
body #checkoutSidebar > .cart-content:not(.checkout-box-wrapper) a.next-step-back:hover,
body #checkoutSidebar .cart-content:has(> .order-summary) a.next-step-back:hover {
    border-bottom-color: var(--sh-color-cta-on-dark) !important;
    color: var(--sh-color-cta-on-dark) !important;
}


/* ==========================================================
   MOJE OBJEDNÁVKA (/moje-objednavka/) — tlačítko „Zobrazit objednávku“
   Formulář je Shoptetův React widget v shadow DOM (.reactWidget-orderWithdraw),
   běžné CSS stránky dovnitř nedosáhne. Dovnitř ale prostupují CSS proměnné,
   a tlačítko bere barvu textu z --Global-Foregrounds-Content-White (bílá na
   lucerně nečitelná). Přepsáno jen na hostiteli widgetu — jinde na webu ta
   proměnná zůstává.
========================================================== */

.orderWithdraw,
.orderWithdraw--page,
.reactWidget-orderWithdraw {
    --Global-Foregrounds-Content-White: var(--sh-color-on-cta) !important;
}