/* ==========================================================
   HEADER COLORS
========================================================== */

#header {
    /* --color-primary and --colors-foregrounds-content-primary removed:
       already set to the same values globally in my_base.css */
    --color-tertiary-hover: var(--sh-color-text);
}

#header,
#header .header-top,
#header .header-bottom,
#header .header-top-wrapper,
#header .header-bottom-wrapper,
#header .navigation-wrapper,
#header .navigation-in,
#header .navigation-buttons,
#header .navigation-tools,
#header .search-form,
#header .search,
#header .login-wrapper,
#header .login,
#header .currency,
#header .toggle-window,
#header .top-nav-button,
#header .top-nav-button-login,
#header .navigation-buttons a,
#header .navigation-buttons button {
    background: var(--sh-color-bg) !important;
    border: none !important;
    box-shadow: none !important;
}

#header .toggle-window:hover,
#header .toggle-window:focus,
#header .top-nav-button:hover,
#header .top-nav-button:focus,
#header .top-nav-button-login:hover,
#header .top-nav-button-login:focus,
#header .navigation-buttons a:hover,
#header .navigation-buttons button:hover {
    background: rgba(46, 37, 34, .05) !important;
}

/* košík má navíc třídu "btn" (globální pill tlačítko) — sjednocení
   se search/login ikonami, které "btn" nemají */
#header .navigation-buttons a.cart-count {
    padding: 0;
    border-radius: 0;
}

#header .navigation-buttons a.cart-count:hover {
    transform: none;
    box-shadow: none;
}

/* ==========================================================
   HEADER SPACING
========================================================== */

/* jen na desktopu/tabletu, kde .header-bottom skutečně obsahuje
   viditelný řádek kategorií — na mobilu je jeho obsah schovaný do
   hamburger menu, ale tenhle padding by na (skoro) prázdném divu dál
   přidával fantomovou výšku a hlavička (position:fixed na mobilu)
   pak byla vyšší, než kolik Shoptet rezervuje na .overall-wrapper
   (padding-top:60px) — obsah stránky se pak schovával pod hlavičku */
@media (min-width: 768px) {
    #header .header-bottom,
    #header .header-bottom-wrapper {
        padding-bottom: var(--sh-space-xs);
    }
}

/* ==========================================================
   LOGO
========================================================== */

.site-name img {
    width: clamp(140px, 12vw, 220px);
    height: auto;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
}

/* pod 1200px je kontejner loga užší, takže mu necháváme
   pevnou šířku podle breakpointu, aby Shoptetovo max-height
   z main-14.css obrázek nedeformovalo */
@media (max-width: 1199px){

    .site-name img {
        width: 130px;
    }

}

@media (max-width: 767px){

    .site-name img {
        width: 110px;
    }

}




/* MENU */

.navigation-in > ul > li > a{
    font-size:clamp(16px,1vw,18px);
    text-transform: uppercase;

    border-radius:0px !important;

    background:transparent !important;

    box-shadow:inset 0 -2px transparent;

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

.navigation-in > ul > li > a:hover,
.navigation-in > ul > li.active > a{

    background: var(--sh-color-bg) !important;   /* skoro neviditelné */

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

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

/* MOBILNÍ VÝSUVNÉ MENU (pod 767px main-14 přepíná na hamburger,
   stejný <nav>/<ul> jako desktop bar, jen zobrazený jako výsuvná
   lišta) — podtržení při hoveru tu vypadá divně (přejezd myší přes
   celý řádek, ne přes krátký text v liště), tak schované. Řádky mají
   od main-14 vlastní border-radius:8px, sjednoceno na náš radius-md.
   Přidané jemné pozadí při hoveru/dotyku místo podtržení. */
@media (max-width: 767px) {

    .navigation-in > ul > li > a:hover,
    .navigation-in > ul > li.active > a {
        box-shadow: none !important;
    }

    .navigation-in ul.menu-level-1 > li,
    .navigation-in ul.navigationActions > li {
        border-radius: var(--sh-radius-md) !important;
    }

    /* main-14 dává textu položek menu (i "Přihlášení") na mobilu vlastní
       font-weight:600 — jinde je "bold" jen naše proměnná (405) */
    .navigation-in > ul > li > a > b {
        font-weight: var(--sh-font-weight-bold) !important;
    }

    .navigation-in > ul > li > a:hover {
        background: var(--sh-color-surface) !important;
    }

}

/* ŠIPKA U POLOŽEK S PODNABÍDKOU (mega menu) – Shoptet vykresluje
   span.submenu-arrow do HTML jen u položek, které podnabídku mají
   (Potraviny, Kosmetika, Úklid, Domácnost mají třídu li.ext; Kontakty
   a Blog ji nemají), takže stačí šipku stylovat, ne řešit podmínku.
   main-14 ji standardně píchá position:absolute na pravý okraj tlačítka
   (.navigation-in>ul>li a .submenu-arrow{position:absolute;right:0}) —
   přepnuto na normální tok hned za text, ať sedí vedle popisku jako
   na referenčním obrázku, ne přilepená na kraj celého menu itemu. */
.navigation-in > ul > li > a .submenu-arrow{
    /* main-14/Shoptetí JS drží tuhle šipku (v hlavní viditelné liště,
       ne v duplikátu uvnitř .menu-helper) na display:none z důvodu,
       který se nepodařilo dohledat v main-14.css — vynuceno viditelně,
       jde jen o dekorativní ikonu, nic si tím nerozbijeme */
    display: inline-block !important;
    vertical-align: middle;

    position: static !important;
    padding: 0 !important;
    margin-left: 6px;
    transform: none !important;
    transition: transform .3s ease !important;

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

/* hover na položce otočí šipku dolů → nahoru, při odjetí myši zpátky */
.navigation-in > ul > li > a:hover .submenu-arrow{
    transform: rotate(180deg) !important;
}

.navigation-in > ul > li > a .submenu-arrow::after{
    /* stejná příčina jako u .submenu-arrow display:none výše — obsah
       ikony se ve viditelné liště taky neprojevoval, tak vynuceno */
    content: "\e90e" !important;
    font-family: "shoptet" !important;
    display: inline-block !important;
    vertical-align: middle;
    line-height: 1;

    font-size: clamp(10px, .6vw, 12px);
}

/* ==========================================================
   DROPDOWN MENU
========================================================== */

.navigation-in ul.menu-level-2 {
    background: var(--sh-color-bg) !important;
    border: none !important;
    border-radius:var(--sh-radius-md) !important;
    box-shadow: none !important;

    top: 100% !important;
    padding: 0 !important;
}

.navigation-in .menu-level-2 > li > a {
    padding: 14px 28px;
    background: transparent;
}

.navigation-in .menu-level-2 > li > a:hover {
    background: rgba(46,37,34,.05);
}
.submenu-visible .navigation-in > ul > li.exp > ul {
    background: var(--sh-color-bg) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius:var(--sh-radius-md) !important;
}

/* ==========================================================
   FORCE REMOVE SUBMENU STYLES
========================================================== */

.submenu-visible .navigation-in > ul > li.ext.exp > ul,
.submenu-visible .navigation-in > ul > li.exp > ul,
.navigation-in ul.menu-level-2 {
    background: var(--sh-color-bg) !important;
    border: none !important;
    border-radius:var(--sh-radius-md) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
}

/* ==========================================================
   THIRD LINE MENU
========================================================== */


/* Mega menu – skrýt všechny obrázky ve 2. úrovni */

.navigation-in ul.menu-level-2 > li > a.menu-image {
    display: none !important;
}

/* Mega menu – skrýt 3. úroveň (podkategorie typu Kaše/Vločky/Müsli
   pod nadpisem "Snídaně") ve všech kartách, jen nadpisy kategorií
   zůstávají */
.navigation-in ul.menu-level-3 {
    display: none !important;
}

/* MEGA MENU – 4 sloupce a poslední řádek zleva */

@media (min-width: 768px) {

  .submenu-visible .navigation-in > ul > li.ext.exp > ul.menu-level-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;

    padding-top: var(--sh-space-md) !important;
    padding-bottom: var(--sh-space-md) !important;
  }

  .submenu-visible .navigation-in > ul > li.ext.exp > ul.menu-level-2 > li {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }

}

/* ==========================================================
   MEGAMENU TYPOGRAFIE
========================================================== */

/* Nadpisy kategorií – stejný styl jako položky hlavního menu
   (POTRAVINY, KOSMETIKA...), ne vlastní "heading" vzhled */
.navigation-in > ul > li.ext > ul > li > div > a{
    font-family: var(--sh-font-family-body);
    font-size: clamp(16px, 1vw, 18px);
    font-weight: var(--sh-font-weight-body);
    line-height: var(--sh-line-height-body);
    text-transform: uppercase;
    letter-spacing: normal;
    color: var(--sh-color-text);
    transition: color .2s ease;
}

/* Hover nadpisu kategorie */
.navigation-in > ul > li.ext > ul > li > div > a:hover{
    color: var(--sh-color-accent);
}

/* Podkategorie */
.navigation-in > ul > li.ext > ul > li > div > ul > li > a{
    font-size: var(--sh-text-sm);
    font-weight: var(--sh-font-weight-body);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text);
}

/* Hover */
.navigation-in > ul > li.ext > ul > li > div > ul > li > a:hover{
    color: var(--sh-color-accent);
}

/* ==========================================================
   POP UP LOGIN
========================================================== */

.user-action-in .popup-widget .popup-widget-inner {
    box-shadow: none !important;
    border: none !important;
    border-radius:var(--sh-radius-md) !important;
}

@media (min-width: 992px) {
    .user-action-in .popup-widget .popup-widget-inner {
        border-radius: 0px;
    }
}

/* přihlašovací karta – stejná řeč jako kartičky kategorií (surface),
   jen login, ne košík */
#login .popup-widget-inner {
    background: var(--sh-color-surface) !important;
    padding: var(--sh-space-card) !important;
}

/* Shoptet form. redesign zrušil .login-wrapper — tlačítko a odkazy
   jsou teď samostatní sourozenci (.form-group.submit-wrapper a
   .alternative-links), proto se bez téhle úpravy jen zalamují pod
   sebe. Formulář jako flex + order je vrátí zpět vedle sebe
   (odkazy vlevo, tlačítko vpravo díky margin-left:auto). */
#login #formLoginIncluded{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--sh-space-sm) var(--sh-space-md);
}

#login .form-group.smart-label-wrapper{
    flex:1 1 100%;
}

#login .alternative-links{
    order:1;
    flex:1 1 auto;
    margin:0;

    display:flex;
    flex-direction:column;
    gap:var(--sh-space-xs);
}

#login .alternative-links a{
    font-family:var(--sh-font-family-body);
    font-size:var(--sh-text-sm);
    color:var(--sh-color-accent);
    transition:var(--sh-transition);
}

#login .alternative-links a:hover{
    color:var(--sh-color-accent-hover);
}

#login .form-group.submit-wrapper{
    order:2;
    flex:0 0 auto;
    margin:0 0 0 auto;
}

#login .form-group.submit-wrapper .btn{
    background:var(--sh-color-cta) !important;
    color:var(--sh-color-text-inverse) !important;
    border:none !important;
    border-radius:var(--sh-radius-btn) !important;

    padding:14px 28px;

    font-family:var(--sh-font-family-body);
    font-weight:var(--sh-font-weight-medium);

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

#login .form-group.submit-wrapper .btn:hover{
    background:var(--sh-color-cta-hover) !important;
    transform:var(--sh-btn-hover-transform);
    box-shadow:var(--sh-btn-hover-shadow);
}

/* ==========================================================
   PŘIHLÁŠENÍ / REGISTRACE – SAMOSTATNÉ STRÁNKY (mobil)
   Na mobilu Shoptet přesměruje na vlastní stránku místo popupu
   (#login výše je jen desktopový popup) — jiná struktura, jiné
   selektory.
========================================================== */

/* nadpis "Přihlášení"/"Registrace" — main-14 ho středuje a dává mu
   pevných 32px, sjednoceno na náš heading token jako u category-title */
.content-inner:has(#formLogin) h1,
.content-inner:has(#register-form) h1 {
    text-align: left !important;
    font-size: var(--sh-heading-md);
    line-height: var(--sh-line-height-heading);
    font-weight: var(--sh-font-weight-heading);
}

/* tlačítko Přihlásit se / Registrovat — odstup od polí nad ním i
   od odkazů/textu pod ním */
#formLogin .form-group.submit-wrapper,
#register-form .form-group.submit-wrapper {
    margin-top: var(--sh-space-sm) !important;
    margin-bottom: var(--sh-space-sm) !important;
}

/* Registrace – "Odebírat newsletter" a "Potvrzení" mají od main-14
   zbytečně velký margin-bottom, zaškrtávátko/text pod nimi je pak
   zbytečně daleko */
#register-form h2 {
    margin-bottom: var(--sh-space-xs) !important;
}

/* ==========================================================
   POP UP SEARCH
========================================================== */


/* popup vyhledávání */
.popup-widget.search-widget{
    border-radius: var(--sh-radius-md);
    overflow: visible;
}

/* na mobilu je popup position:fixed s top+bottom (main-14) — výška je
   tak omezená na výšku obrazovky, ale s overflow:visible obsah delší
   než obrazovka jen přeteče mimo viditelnou plochu bez možnosti
   se k němu proscrollovat. Na desktopu necháno beze změny (visible
   tam nezpůsobuje problém, výška popupu se do obrazovky vejde). */
@media (max-width: 767px) {
    .popup-widget.search-widget{
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================
   SEARCH POPUP
========================================================== */

/* formulář */

.popup-widget.search-widget form{

    max-width:760px;
    width:100%;
    margin:0 auto;

}


/* wrapper */

.popup-widget.search-widget .search-form-input-group{

    display:flex;
    align-items:center;

    width:100%;
    max-width:760px;

    margin:0 auto;

}


/* ikona */

.popup-widget.search-widget .search-input-icon{

    display:none;

}

/* input */

.popup-widget.search-widget .search-input{

    background:transparent !important;

    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
    border-bottom:1px solid var(--sh-color-accent) !important;

    border-radius:0 !important;

    box-shadow:none !important;
    outline:none !important;

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

}

/* focus */

.popup-widget.search-widget .search-input:focus{

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

    box-shadow:none !important;
    outline:none !important;

}

/* placeholder */

.popup-widget.search-widget .search-input::placeholder{

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

}

/* tlačítko */

.popup-widget.search-widget .search-button{

    margin-left:20px;
    min-width:auto;

    border:none !important;

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

    padding:12px 40px !important;

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

    transition:var(--sh-transition);


}


/* hover */

.popup-widget.search-widget .search-button:hover{

    background:var(--sh-color-cta-hover) !important;
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);

}

/* close button*/

.popup-widget.search-widget .search-widget-close{

    width:32px;
    height:32px;

    font-size:18px;

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

    background:transparent !important;
    border:none;

    transition:var(--sh-transition);

}

.popup-widget.search-widget .search-widget-close:hover,
.popup-widget.search-widget .search-widget-close:focus{

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

    background:transparent !important;
    box-shadow:none;

}

.popup-widget.search-widget .search-widget-close.toggle-window:hover,
.popup-widget.search-widget .search-widget-close.toggle-window:focus{

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

}

/* ==========================================================
   SEARCH POPUP – PRODUCT LAYOUT
========================================================== */

/* container */

.searchWhisperer.active {
border-radius:var(--sh-radius-md);
background: var(--sh-color-bg)
}

.searchWhisperer__products {
border-radius:var(--sh-radius-md)
}

/* na mobilu main-14 dává .searchWhisperer__products padding 24px 24px 8px
   (viz main-14: ".searchWhisperer__products{border-radius:8px;
   margin-bottom:24px;order:1;padding:24px 24px 8px}") — na mobilu je to
   zbytečný okraj navíc k dost úzkému popupu, na desktopu ponecháno */
@media (max-width: 767px) {
    .searchWhisperer__products {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* obrázek u produktu ve výsledcích – main-14 dává jen max-width/flex-basis,
   samotný <img> je 1:1 (podle šířky/výšky v HTML) — vynuceno na 4:3.
   Mezera od textu už dělá padding-left na .searchWhisperer__product_infoWrapper
   níže, margin-right tu jen pro jistotu, kdyby wrapper mezeru nedal. */
.searchWhisperer__product__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-right: var(--sh-space-sm);
}

.searchWhisperer__product__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.searchWhisperer__products .searchWhisperer__products__heading {
  font-size: var(--sh-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading);
    color: var(--sh-color-text);
}

.searchWhisperer__additionalResults .searchWhisperer__additionalResults__heading {
    font-size: var(--sh-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading);
    color: var(--sh-color-text);
}


/* levá část (obrázek + název + cena) */

.popup-widget.search-widget .searchWhisperer__product_infoWrapper{

    flex:1 1 auto;
    min-width:0;

    padding-left:24px;

}


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

/* "Nalezeno v kategoriích" / "Nalezeno ve značkách" – schovat ikonu
   (folder/štítek, obyč. <i> před textem) a sjednotit vzhled textu se
   .searchWhisperer__product__name */
.searchWhisperer__additionalResults__listItem i {
    display: none;
}

.searchWhisperer__additionalResults__link {
    font-family: var(--sh-font-family-body);
    font-weight: var(--sh-font-weight-bold) !important;
    color: var(--sh-color-text);
}


/* pravá část (cena + quantity + tlačítko) */

.popup-widget.search-widget .searchWhisperer__product__cart{

    flex:0 0 auto;

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

    padding-top:0;
}

/* ums_forms_redesign přešel z --off na --on, tenhle margin byl
   scopovaný na starou variantu a přestal fungovat — bez :where() */
.searchWhisperer__product__cart .quantity {
    margin-right: 8px;
}

/* na desktopu trochu mezery mezi cenou a quantity/tlačítkem vpravo */
@media (min-width: 768px) {
    .popup-widget.search-widget .searchWhisperer__product__price {
        margin-right: var(--sh-space-sm);
    }
}

/* MOBIL — main-14 dává .searchWhisperer__product flex-wrap:nowrap
   (jeden neohebný řádek: obrázek + název + cena + quantity + tlačítko
   vedle sebe), což se na úzké obrazovce nevejde a všechno se namačká
   přes sebe. .infoWrapper má flex:1 1 auto (roste a zabere celý
   zbývající prostor v řádku) — stačí tedy povolit zalamování a cena
   + tlačítko samy spadnou na 2. řádek, protože už se do 1. nevejdou. */
@media (max-width: 767px) {
    .popup-widget.search-widget .searchWhisperer__product {
        flex-wrap: wrap;
        row-gap: var(--sh-space-xs);
    }

    /* main-14 dává ceně padding-top:16px (kompenzace pro původní
       jednořádkové zarovnání) — s obrázkem/tlačítkem stejně vysoká
       řada už to nepotřebuje, jen to cenu posouvalo mimo střed */
    .popup-widget.search-widget .searchWhisperer__product__price {
        padding-top: 0 !important;
        align-self: center;
    }

    .popup-widget.search-widget .searchWhisperer__product__cart {
        align-self: center;
    }
}

.popup-widget.search-widget .add-to-cart-button{

    float:none;

    height:auto;
    margin:0 !important;
    width:auto !important;

    display:flex;
    align-items:center;
}

.searchWhisperer__products .searchWhisperer__products__list
.searchWhisperer__products__listItem a .searchWhisperer__product__cart{

   flex:0 0 auto;
    padding:0 8px 0 0;
}

.searchWhisperer__products .searchWhisperer__products__list .searchWhisperer__products__listItem a .searchWhisperer__product__infoWrapper {
padding-left: 0;
padding-right: 16px;
}

.p-tools .btn, .p-tools .btn-cart, .add-to-cart-button {
    margin-top: 0 !important;
}

/* stejná šipka a styl jako .sh-delivery-feature__link na homepage
   (icon-arrow-right, \e90c) — Shoptet už tenhle glyf sám používá,
   jen doladěno na stejnou barvu/mezeru/velikost jako u delivery bloku */
.searchWhisperer__buttonWrapper .btn.searchWhisperer__button:after {
    content: "\e90c" !important;
    font-size: var(--sh-text-base);
    margin-left: 6px;
    color: var(--sh-color-cta);
}


/* ==========================================================
   POP UP CART
========================================================== */

/* popup */

.user-action-in .popup-widget{

    border-radius:var(--sh-radius-md) !important;
    overflow:visible;
    box-shadow:none !important;

}

.user-action-in .popup-widget .popup-widget-inner{

    box-shadow:none !important;

}

.user-action-cart.popup-widget::before{

    display:none !important;

}


/* skrýt obrázek */

.popup-widget.cart-widget .cart-widget-product-image{

    display:none !important;

}


/* produkt */

.popup-widget.cart-widget .cart-widget-product{

    padding:16px 0;
    table-layout:auto !important;

}


/* název + cena */

.popup-widget.cart-widget .cart-widget-product-name-and-price{

    /* main-14/naše width:auto necháváme flex položce jen "shrink-wrap"
       vlastní obsah (flex-grow:0) — u krátkého názvu produktu zbytečná
       mezera, u dlouhého názvu přetečení/tlačení na quantity stepper.
       flex:1 + min-width:0 dá každému řádku stejný, předvídatelný
       sloupec bez ohledu na délku názvu. */
    width:auto !important;
    flex: 1 1 0 !important;
    min-width: 0;
    padding-right:var(--sh-space-sm) !important;

}

/* .quantity (product.css) má stejné pozadí jako teď má celý popup
   (--sh-color-surface), takže uvnitř košíku splývalo — přebarveno jen
   tady, globální .quantity na detailu produktu zůstává beze změny */
.popup-widget.cart-widget .quantity{

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

}

/* product.css dává -/+ tlačítkům vlastní pevné pozadí (--sh-color-surface)
   — tady v košíku to vytvářelo dvě různé barvy vedle sebe (obal cta-subtle,
   tlačítka surface). Sjednoceno na jedno pozadí; hover pak mění jen barvu
   textu/čísla (viz globální pravidlo .quantity .increase:hover v
   product.css, tam už background jde na transparent). */
.popup-widget.cart-widget .quantity .decrease,
.popup-widget.cart-widget .quantity .increase,
.popup-widget.cart-widget .quantity input {

    background: transparent !important;

}


/* tlačítko */

.popup-widget.cart-widget #continue-order-button{

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

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

    font-family:var(--sh-font-family-body);
    font-weight:var(--sh-font-weight-medium);

}

.popup-widget.cart-widget #continue-order-button:hover{

    background:var(--sh-color-cta-hover) !important;
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);

}

.cart-widget, .cart-widget-button {
    background-color: var(--sh-color-surface);
}

/* .cart-widget-bottom (tlačítko "Pokračovat" + pruh dopravy zdarma
   pod ním) má od main-14 pevnou výšku 120px (position:absolute,
   viz komentář u .cart-free-shipping níže) – sahat na tu výšku je
   riskantní (musí sedět na .cart-widget-products a .full margin-bottom
   dohromady). Místo toho uvolněno místo uvnitř stejného rozpočtu:
   main-14 dává tlačítku zbytečně dvojitý padding (24px na wrapperu
   navíc k 16px na samotném odkazu) – zmenšeno na wrapperu, ať zbyde
   reálný prostor na padding-top pruhu dopravy zdarma. */
.popup-widget-inner.cart-widget-inner .cart-widget-bottom .cart-widget-button {
    /* pozor: .cart-widget-bottom má od main-14 pevných 120px výšky
       (position:absolute) sdílených s pruhem dopravy zdarma pod
       tlačítkem — když tenhle padding vyroste moc, může se to začít
       s pruhem prát/přesahovat. Zvednuto z původních 4px dole, ale
       kdyby to po nahrání vypadalo přeplácnutě, budeme muset ubrat. */
    padding: 12px 24px 20px;
    box-sizing: border-box;
}

.cart-widget-bottom {
    background-color: var(--sh-color-surface);
}

/* horní část s produkty – stejná barva jako spodní lišta (ať vypadá
   jako jeden celek) + stejná řeč jako kartičky kategorií (surface +
   jemný okraj kolem celého popupu) */
.popup-widget.cart-widget .popup-widget-inner {
    background-color: var(--sh-color-surface);
    border: none !important;
}

/* pruh "Dopravu máte zdarma!" – main-14 dává textu napevno 14px/600/16px
   (viz .popup-widget-inner.cart-widget-inner .cart-widget-bottom
   .cart-free-shipping), tak samou selector-chain přebíjíme našimi
   proměnnými; stejný styl jako na stránce košíku (cart.css:
   .extras-wrapper .extra span / span strong). Barevné pozadí bloku
   úmyslně nechceme. */
.cart-free-shipping {
    color: var(--sh-color-text);
}

/* main-14 dává font-size/weight/line-height přímo na VNITŘNÍ div
   (.cart-free-shipping > div), ne na .cart-free-shipping samotný —
   proto se předchozí pokus (styl jen na .cart-free-shipping) neprojevil,
   dědění z rodiče prohrává s explicitním pravidlem na potomkovi.
   Stejný styl jako na stránce košíku (cart.css: .extras-wrapper .extra
   span / span strong). */
.popup-widget-inner.cart-widget-inner .cart-widget-bottom .cart-free-shipping > div {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-medium);
    letter-spacing: normal;
    line-height: var(--sh-line-height-body);

    /* main-14 dává vnitřnímu divu jen 8px levý/pravý padding —
       sjednoceno na 24px, ať text lícuje se stejným okrajem jako
       .cart-widget-inner (ten má padding: 24px) a produkty nad ním.
       padding-top navíc pro odstup od posledního produktu nad pruhem. */
    padding-left: 24px;
    padding-right: 24px;
    padding-top: var(--sh-space-lg);
}

.popup-widget-inner.cart-widget-inner .cart-widget-bottom .cart-free-shipping > div 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 – stejný odstup jako na stránce košíku
   (cart.css: .extras-wrapper .extra .price-range) */
.popup-widget-inner.cart-widget-inner .cart-widget-bottom .cart-free-shipping .price-range {
    margin-top: var(--sh-space-xs);
    margin-bottom: 0;
}