/* ==========================================================
   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: 1px solid var(--sh-color-border) !important;
    border-radius: var(--sh-radius-md);
}

/* .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 – text odkaz + šipka místo tlačítka
========================================================== */

.login-from-cart{

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

    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:0 !important;

    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-medium);
    text-decoration:underline;
    text-underline-offset:3px;

    transition:color .2s ease;
}

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

.login-from-cart:hover{
    background:transparent !important;
    color: var(--sh-color-accent-hover) !important;
}

/* 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;
}

/* čá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;
}