/** ==========================================================================
 ** style-simon-bannery.css  –  TESTOVACÍ VARIANTA
 ** ==========================================================================
 ** Kopie style-simon.css, ze které je ODSTRANĚNO 10 pravidel upravujících
 ** horní banner ("Banner: top" = div.next-to-carousel-banners, uvnitř #kategorie):
 **
 **   1. .next-to-carousel-banners .banner-wrapper { padding: 0 }
 **   2. #kategorie                      – grid, 3 sloupce, gap 2rem
 **   3. #kategorie img                  – max-width 3rem !important
 **   4. #kategorie .box                 – position/top/transition
 **   5. .overall-wrapper                – overflow unset + flex   (@media >1201px)
 **   6. #kategorie .box:hover           – posun o 15 px dolů      (@media >1201px)
 **   7. .box                            – bílé pozadí, padding 1.25rem (obecné!)
 **   8. #kategorie                      – 2 sloupce               (@media <1200px)
 **   9. .next-to-carousel-banners …     – width 100%              (@media 768–992px)
 **  10. #kategorie                      – 1 sloupec               (@media <640px)
 **
 ** PONECHÁNY jsou obě dnešní úpravy (na konci souboru):
 **   – univerzální reset zaoblení (hranaté rohy)
 **   – zrušení přibližování obrázků při najetí myší
 **
 ** POZOR – dva vedlejší efekty odstranění:
 **   • Pravidlo č. 7 (.box) je obecné a používá ho i kontaktní stránka.
 **     Bez něj ztratí bílé pozadí a odsazení i boxy v kontaktech.
 **     (.box--tertiary zůstává, ale nastavuje jen barvu pozadí.)
 **   • Pravidlo č. 5 mění obal CELÉ stránky (.overall-wrapper). Bez něj se
 **     může jinak chovat i layout mimo banner.
 ** ========================================================================== */

:root {
    --text-color: #110e0a;
    --template-font: 'Amulya';
    --template-headings-font: 'Amulya';
    --primary-color:#bc6125;
    --secondary-color: #fdebe9;
    --tertiary-color: #f9e7dd;
    --complementary-color: #efd7ca;
}

/** Override base template styles **/
.external-fonts-loaded body,
body,
body.blank-mode {
    color: var(--text-color);
    background: #FFFFFF;
}

body {
    counter-reset: section;
}

.breadcrumbs-wrapper .breadcrumbs>span>a.navigation-bullet:before,
.breadcrumbs-wrapper .breadcrumbs>span>span.navigation-bullet:before {
    /* sipka.svg na webu není – šipka doprava z naší sady */
    background-image: url('/user/documents/assets/ui-ikony/sipka-doprava.svg');
    margin-top: 0;
}

#header .header-top .top-nav-button-account:before,
#header .header-top .top-nav-button-login:before {
    background-image: url('/user/documents/assets/ui-ikony/uzivatel.svg');
}

#header .navigation-buttons .btn.cart-count:before {
    background-image: url('/user/documents/assets/ui-ikony/kosik.svg');
}

#header .search-form .search-toggle {
    background-image: url('/user/documents/assets/ui-ikony/hledat.svg');
}
.site-msg.information {
    background: var(--secondary-color);
}
.slick-slider .slick-arrow:after {
    background: none!important;
}

.carousel-control.left:before,
.slick-slider .slick-arrow.slick-prev:before {
    background-image: url('/user/documents/assets/ui-ikony/sipka-vlevo.svg') !important;
}

.carousel-control.right:before,
.slick-slider .slick-arrow.slick-next:before {
    background-image: url('/user/documents/assets/ui-ikony/sipka-doprava.svg') !important;
}

#carousel .item .extended-banner-texts {
    padding: 40px;
    max-width: 1610px;
}

.carousel .carousel-control {
    border-radius: 0;
    overflow: hidden;
}

.carousel:hover .carousel-control {
    opacity: 0.5;
}

.extended-banner-texts {
    position:relative;
    background:none
}

.slick-slider .slick-arrow.slick-next {
    margin-top: -24px !important;
}
.carousel-control:hover:before {
    filter: invert(1);
}

.products-block.slick-slider .slick-arrow {
    top: 50%;
    z-index: 999;
    transform: translateY(-100px);
}

.category-title, .in-klient h1, h1 {
    font-weight: 500;
}

.h4.homepage-group-title,
h4.homepage-group-title {
    font-weight: 600;
}

.type-index .products:before {
    background: #FFFFFF;
}

iframe {
    border-radius: 0;
    overflow: hidden;
}

.homepage-box.welcome-wrapper {
    display: none;
}

.hp-news .news-wrapper .news-item {
    background: transparent;
}


.hp-news .news-wrapper .news-item .text .read-more:hover {
    color: var(--color-primary);
}

.hp-news .news-wrapper .news-item .text .read-more:hover::after {
    background: var(--color-primary);
}

div#newsWrapper .title {
    font-weight: 600;
    font-size: 1.125rem;
} 
.news-item .text .description p {
    margin-top: 0;
}

#newsWrapper .news-item .text .read-more {
    font-size: 1rem;
    font-weight: 500;
    padding: 6px 0;
}

.product-top {
    margin: 0;
    display: grid;
    /* Fotka a popis 50 / 50. minmax(0, …) místo samotného 1fr, aby široký
       obsah (konfigurátor, dlouhé názvy) nemohl sloupec roztáhnout. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 20px;
    position: relative;
}

.product-top .col-xs-12:first-child {
    display: none;
}

.p-detail div.col-xs-12 {
    max-width: 100%;
}

.p-detail .p-image-wrapper {
    float: unset;
    display: flex;
    flex-direction: initial;
}

.p-detail .p-thumbnails>div {
    width: 100%;
    height: auto;
    position: static;
}

/* .p-detail div.col-xs-12.p-info-wrapper {
    padding: 24px 20px 64px !important;
    flex-direction: initial;
} */

.p-detail div.col-xs-12.p-info-wrapper {
    padding: 24px 20px 64px !important;
}

.type-detail .shp-tabs-wrapper .row .shp-tabs-row {
    border-right: none;
    width: 100%;
    /* Odstup od popisu drží jen #tab-content (36 px) */
    margin-bottom: 0;
}

.type-detail .shp-tabs-wrapper #p-detail-tabs {
    background: var(--secondary-color);
    border-radius: 0;
    padding: .75rem 1.5rem;
    flex-direction: row;
}

.type-detail .shp-tabs-wrapper .shp-tabs-row .shp-tabs-holder li a {
    font-size: 1rem;
    line-height: 1;
    border-bottom: none;
}

.type-detail .shp-tabs-wrapper .shp-tabs-row .shp-tabs-holder li.active a:before {
    display: none;
}

.one-column-body.type-detail h1:before {
    content: unset;
}

.product-top .p-final-price-wrapper {
    margin-top: 0;
}

.product-top .availability-label {
    font-size: 1rem;
}

.p-detail .price-line .price-final {
    font-size: 2em;
}

.product-top .p-detail-info .p-short-description {
    font-size: 1rem;
}

.product-top .add-to-cart button.add-to-cart-button {
    font-family: var(--template-font);
    text-transform: none;
    background: var(--color-primary);
}

.copyright .podpis {
    display: none !important;
}

footer .footer-socials .facebook a:before {
    background: url('/user/documents/assets/ui-ikony/facebook.svg');
    width: 24px;
    height: 24px;
    /* background-size: px; */
}

footer .footer-socials .instagram a:before {
    background: url('/user/documents/assets/ui-ikony/instagram.svg');
    width: 24px;
    height: 24px;
    /* background-size: px; */
}

.contact-banner .mail:before,
footer .footer-contacts .contact-box li .mail:before {
    background: url('/user/documents/assets/ui-ikony/mail.svg') no-repeat 50%;
    width: 24px;
    height: 24px;

}
.contact-banner .tel:before,
footer .footer-contacts .contact-box li .tel:before {
    background: url('/user/documents/assets/ui-ikony/telefon.svg') no-repeat 50%;
    width: 24px;
    height: 24px;
}

.footer-links-icons {
    display: none;
}

body footer .container.footer-bottom .copyright a {
    font-weight: 500;}

    
body footer .container.footer-bottom {
    align-items: flex-end;
}

body footer .container.footer-bottom #signature a {
    text-decoration: none;
}

body footer .container.footer-bottom .copyright {
    text-align: right;
    margin-bottom: 0;
}

.footer-banners {
    line-height: normal!important;
}

.contact-banner {
    position: relative;
}

.banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: 100%;
    text-align: left;
    padding: 5rem 3rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}


.contact-banner p {
    margin-bottom: auto;
}

.contact-wrapper a {
    font-weight: 500;
    font-size: 1rem;
}

.contact-wrapper a:hover {
    text-decoration: underline;
}

.contact-banner a {
    display: block!important;
}


.contact-wrapper {
    position: relative;
    width: 100%;
    display: flex;
}

.contact-wrapper >div {
    margin-right: 3rem;
    background:var(--secondary-color);
    padding: 1.5rem 1.5rem 1.5rem 4.5rem;
    border-radius: 0;
    position: relative;
}

.popup-widget.cart-widget {
    border-radius: 0!important;
}

/* Odstup patičky od kontaktního banneru nad ní. Dřív tu bylo 250 px, protože
   banner do patičky zajížděl (vytažený nahoru marginem -250px a vrácený zpět
   posunem translateY(55%)). Kvůli tomu měl jeho obal jen 117 px místo 367 a
   ležel o 47 px výš než banner sám – barevný pás se pak nedal na obal pověsit,
   protože neseděl na obsahu. Posun je pryč, banner stojí normálně v toku
   a patičce stačí běžné odsazení. */
.in-index footer {
    padding-top: 48px;
}

.footer-banners.banner-wrapper .footer-banner>img, .footer-banners .footer-banner.only-img, .contact-banner img {
    opacity:1!important
}


.flags .flag {
    border-radius: 0;
}

.flags .flag.flag-custom1, .flags .flag.flag-custom2, .flags .flag.flag-custom3, .flags .flag.flag-custom4, .flags .flag.flag-custom5, .flags .flag.flag-custom6 {
    color:white
}

#carousel .scroll-bottom {
    filter: invert(1);
}

#carousel  .scroll-bottom {
    background: url(/user/documents/assets/ui-ikony/sipka-dolu.svg) center / contain no-repeat !important;
    width: 2rem;
    height: 2rem;
}

#carousel  .scroll-bottom img {
    display: none;
}

#carousel .carousel-indicators {
    max-width: 1560px;
}

.carousel-indicators .active {
    background-color: #bc6125;
}

.h4.homepage-group-title:before, h4.homepage-group-title:before {
    display: none;
}

.search fieldset{
    position: relative;
    border-radius: 0;
    overflow: hidden;
    padding: 0;
}

.search .search-form button{
    position: absolute;
    height: 100%;
    right: 0;
    top:0;
    padding: 0 30px;
}

.search form  input {
    margin-bottom: 0;
    height: 50px;
    background:none!important;
    border: solid 1px #bc6125;
    border-radius: 0;
}

.search form .form-control:focus {
    border: solid 1px #bc6125;
    border-radius: 0;
    outline: none;
}

@media (min-width: 992px) {
    .admin-logged #header .search-form.hovered fieldset {
        margin-top: 0;
    }

    .admin-logged #header .search-form.hovered .search-toggle {
        top: 60px;
    }

    #header .search-form.hovered fieldset {
        border-radius: 0 !important;
    }

    #header .search-form.hovered fieldset input {
        border-radius: 0 !important;
    }

    #header .search-form.hovered fieldset button {
        border-radius: 0 !important;
        background:#bc6125
    }
}

.quantity, .product-top .quantity {
    border: none;
    background: #fdebe938;
    border-radius: 0;
    margin-right: 0.5rem!important;
}

.quantity .decrease:hover, .quantity .increase:hover {
    background: none!important;
}

.quantity .decrease:hover::before, .quantity .increase:hover::before {
    opacity: 0.5;
}

.btn, .product-top .add-to-cart button.add-to-cart-button, .fixed-cart-line .fcl-form .btn, .cart-content .next-step.next-step--cart a.btn, .cart-content .next-step a, .cart-content .next-step button {
    border-radius: 0!important;
    box-shadow: none;
}

.product-top .add-to-cart button.add-to-cart-button:hover, .fixed-cart-line .fcl-form .btn:hover, .cart-content .next-step button:hover{
    /* tlačítka košíku při najetí tmavší hnědá jako „Přidat do košíku"
       u postelí – nikdy černá */
    background: #a9571f !important;
    background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
}

.msg .container:before{
    display: none!important;
}

.fixed-cart-line .fcl-form .btn {
    font-size: .875rem;
    font-weight: 600;
}

.ordering-process .checkout-box-wrapper .contact-box ul li span.tel:before {
    background: url('/user/documents/assets/ui-ikony/telefon.svg') no-repeat 50%;
}

.ordering-process .checkout-box-wrapper .contact-box ul li span.facebook:before {
    content: url('/user/documents/assets/ui-ikony/facebook.svg');
    width: 14px;
}

.ordering-process .checkout-box-wrapper .contact-box ul li span.instagram:before {
    content: url('/user/documents/assets/ui-ikony/instagram.svg');
}


/** hp categories **/

/** Main menu **/
#navigation ul.menu-level-1>li>a {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#navigation ul.menu-level-1>li.menu-item-683>a::before {
    content: '';
    background: url('/user/documents/assets/ui-ikony/postele.svg') 50% no-repeat;
    background-size: 100% auto;
    width: 26px;
    height: 18px;
    margin-right: 8px;
    display: block;
}



#navigation ul.menu-level-1>li.menu-item-710>a::before {
    content: '';
    background: url('/user/documents/assets/ui-ikony/hmotnost.svg') 50% no-repeat;
    background-size: 100% auto;
    width: 17px;
    height: 18px;
    margin-right: 8px;
    display: block;
}

#navigation ul.menu-level-1>li.menu-item-722>a::before {
    content: '';
    background: url('/user/documents/assets/ui-ikony/srdce.svg') 50% no-repeat;
    background-size: 100% auto;
    width: 21px;
    height: 18px;
    margin-right: 8px;
    display: block;
}

#navigation ul.menu-level-1>li.menu-item-external-14>a::before {
    content: '';
    background: url('/user/documents/assets/ui-ikony/vizualizace.svg') 50% no-repeat;
    background-size: 100% auto;
    width: 24px;
    height: 18px;
    margin-right: 8px;
    display: block;
}

#navigation ul.menu-level-1>li.menu-item-725>a::before {
    content: '';
    background: url('/user/documents/assets/ui-ikony/informace.svg') 50% no-repeat;
    background-size: 100% auto;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: block;
}

#navigation ul.menu-level-1>li.menu-item-29>a::before {
    content: '';
    background: url('/user/documents/assets/ui-ikony/telefon.svg') 50% no-repeat;
    background-size: 100% auto;
    width: 22px;
    height: 18px;
    margin-right: 8px;
    display: block;
}









/** Benefits **/

/* margin-bottom (100px) přesunuto do bloku LIŠTA KONKURENČNÍCH VÝHOD
   na konci souboru, kde je odsazení i rozvržení lišty pohromadě. */
.benefitBanner.position--benefitHomepage {
	position:relative;
}

.homepage-group-title.homepage-products-heading-2, #products-1, #products-2, .in-index main.content {
position:relative
}

.benefitBanner {
    background: transparent;
}

.benefitBanner .benefitBanner__item {
    text-align: left;
    padding: 20px 60px;
    flex-direction: row;
    align-items: flex-start;
}

.benefitBanner .benefitBanner__picture {
    width: auto;
    height: auto;
    margin-right: 1rem !important;
}

.benefitBanner .benefitBanner__picture img {
    width: 100%;
    max-height: 32px;
}

.benefitBanner .benefitBanner__item .benefitBanner__title {
    font-size: var(--text-vyrazny);
    font-weight: 400;
    color: var(--text-color);
}

.benefitBanner .benefitBanner__item .benefitBanner__data {
    font-size: var(--text-drobny);
    color: var(--text-color);
    margin-top: 0;
}

.type-product .benefitBanner .benefitBanner__item {
    flex-direction: row;
    padding: 20px;
}

.type-detail .benefitBanner:before {
    display: none;
}

.type-detail .benefitBanner {
    padding: 50px 0 0;
    margin-bottom: 0;
}

/* Lišta v detailu nese i třídu z titulky (přidává ji custom-caster-v3.js),
   takže vypadá 1:1 jako tam – odsazení drží nadpis a margin lišty */
.type-detail .benefitBanner.position--benefitHomepage {
    padding: 0;
}

/* Nad nadpisem už je odsazení produktového bloku (64 px pod galerií),
   odsazení sekce z titulky by se k němu přičetlo */
.type-detail .benefitBanner__nadpis.homepage-group-title.h4 {
    padding-top: 0 !important;
}

/* Popis začíná na levé hraně webu (jako menu, lišta výhod i bloky pod ním),
   od menu 36 px – stejně jako nadpis sekce od jejího obsahu */
.type-detail .shp-tabs-wrapper #tab-content {
    padding: var(--sekce-mezera) 0 0;
    background:none;
}

/* „Detailní popis produktu" jako nadpis sekce (Jak to probíhá, Parametry…):
   stejná velikost a řez, na střed, od obsahu 36 px */
.type-detail .shp-tabs-wrapper .basic-description > h3:first-child {
    margin: 0 0 var(--sekce-mezera) !important;
    padding: 0;
    font-size: var(--sekce-nadpis) !important;
    font-weight: 600 !important;
    line-height: 1.2;
    text-align: center;
    color: var(--text-color);
}

@media (max-width: 797px) {
    .type-detail .shp-tabs-wrapper .basic-description > h3:first-child {
        font-size: 20px !important;
    }
}

/* Fotka je čtverec vysoký přesně jako text vedle ní. Mřížka natáhne buňku
   s fotkou na výšku řádku (tu určuje text), aspect-ratio z výšky dopočte
   šířku. Obrázek je v buňce absolutně, takže do výšky řádku nemluví –
   jinak by se buňka roztáhla na jeho skutečnou velikost (500 px).
   min-width je pojistka pro prohlížeče, které by šířku z výšky nespočítaly.

   Rozestupy: fotka má od okraje boxu jen úzký lem 8 px, od textu 24 px.
   Text má navíc 12 px nahoře i dole – fotka je tak o kus vyšší než text
   a text vedle ní sedí na středu. */
.product-help {
    overflow: hidden;
    background: var(--secondary-color);
    border-radius: 0;
    padding: 8px 24px 8px 8px;
    margin: 1rem 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    gap: 24px;
}

.product-help__content {
    padding: 12px 0;
}

.product-help__img {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
    min-width: 48px;
    /* Na užším desktopu (kolem 1000 px) se text zalomí do víc řádků a fotka
       by rostla s ním (až 126 px). Nad 96 px už zůstane a sedí na středu. */
    max-height: 96px;
    align-self: center;
}

.product-help img {
    position: absolute;
    inset: 0;
    border-radius: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

/* Na mobilu by se to zacyklilo: úzký text se zalomí do víc řádků, fotka
   podle něj vyroste a textu ubere další místo (vycházelo 143 × 143 px).
   Tam je proto pevný menší čtverec, svisle na středu textu. */
@media (max-width: 767.98px) {
    .product-help {
        align-items: center;
        padding-right: 16px;
        gap: 16px;
    }

    .product-help__img {
        width: 72px;
        height: 72px;
    }
}

/* Rytmus textu: nadpis, pod ním 6 px dva drobné řádky se stejným
   řádkováním (dřív se nadpis lepil na text a řádky měly každý jinou výšku) */
.product-help h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    padding: 0;
    margin: 0 0 6px !important;
}

.product-help__content {
    font-size: var(--text-drobny);
    line-height: 1.55;
    color: var(--text-color);
}

.product-help__content strong {
    display: block;
    font-weight: 600;
}

/* Zalomení za tučným řádkem je navíc – tučný řádek je už blok */
.product-help__content strong + br {
    display: none;
}

.product-help__content a {
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.product-accessories h3 {
    margin-top: 0;
}

.product-accessories .name {
    text-decoration: none;
}

.product-accessories .prices {
    margin-bottom: .5rem;
}

.product-accessories .btn-primary {
    font-family: var(--template-font);
    min-height: 35px;
    padding: 0 12px;
}


/** Homepage global **/

.homepage-section-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.homepage-section-content--left {
    padding-right: 64px;
}

.homepage-section-title {
    font-size: 40px;
    margin-bottom: 20px;
}

.homepage-section-image img {
    max-width: 50vw;
}

.homepage-section-text {
    font-size: 1rem;
    color: #585653;
}


/** Homepage banners **/
.banners-row #carousel .carousel-inner .item::before {
    content: '';
    background: linear-gradient(325deg, rgba(20, 22, 23, .5) 0%, rgba(20, 22, 23, 0) 64%),
        linear-gradient(35deg, rgba(0, 0, 0, .5) 0%, rgba(20, 22, 23, 0) 64%);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.banners-row #carousel .carousel-control {
    z-index: 2;
}

#carousel .item .extended-banner-texts .extended-banner-title {
    font-size: 4em;
    font-weight: 600;
    color: #fff;
}

#carousel .extended-banner-texts .extended-banner-link {
    line-height: 1.2;
    background: var(--primary-color);
    color: #fff;
    border-radius: 0;
    padding: 14px 20px;
    font-size: 1rem;
}

#carousel .extended-banner-texts .extended-banner-link::after {
    content: unset;
}

@media (min-width: 992px) {
    #carousel .item img {
        max-height: 550px;
    }
}

@media (min-width: 1400px) {
    #carousel .item img {
        max-height: 80vH!important;
    }
}


/** Homepage categories **/
.homepage-category {
    display: flex;
}

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


#tooltipArrow,
#tooltipArrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

#tooltipArrow {
    visibility: hidden;
}

#tooltipArrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
}

.product-conf__info--tooltip[data-popper-placement^='top']>#tooltipArrow {
    bottom: -4px;
}

.product-conf__info--tooltip[data-popper-placement^='bottom']>#tooltipArrow {
    top: -4px;
}

.product-conf__info--tooltip[data-popper-placement^='left']>#tooltipArrow {
    right: -4px;
}

.product-conf__info--tooltip[data-popper-placement^='right']>#tooltipArrow {
    left: -4px;
}

.product > div {
    background: white;
    border-radius: 0;
    box-shadow: 0 3px 30px rgb(213 213 213 / 8%);
}

.flags .flag.flag-new {
    background:#e6a072!important;
    color:white!important;
}

.flags .flag.flag-tip {
     background: var(--secondary-color)!important;
     color: var(--color-primary)!important;
}

.products-block.products .product {
    background: transparent;
}

.products-block.products .product:hover {
    box-shadow: none;
}

.products-block.products .product .p .name {
    font-size: var(--text-zakladni);
    font-weight: 500;
    margin: 0;
    min-height: unset;
}

.products-block.products .product .p .name span {
    text-align: center;
    width: 100%;
}


.products-block.products .product .prices.in-discount, .products-block.products .product .prices.in-discount .discount-side {
    flex-direction: row-reverse;
    align-items: center;
}

.products-block.products .product .prices.in-discount .price-side, .products-block.products .product .prices.in-discount .discount-side {
    background: none;
    min-width: unset;
    flex: unset;
    padding: 0;
}
.products-block.products .product .prices.in-discount .price-side .price-final strong {
    color: var(--primary-color);
}
.products-block.products .product .prices.in-discount .percents {
    font-size: .9em;
    font-weight: 600;
    padding: 5px 12px;
    background: var(--primary-color);
    width: max-content;
    border-radius: 0;
}

.products-block.products .product .prices {
    margin-bottom: 0;
}

 /** Category page **/

 .type-category #productsTop .product, .type-category #productsTop .product:hover, .type-category .subcategories.with-image li, .type-category .subcategories li {
    border: 0 !important;
}

 .type-category #productsTop .product, .type-category .subcategories li {
    padding: 0 1rem 1rem 0 !important;
    background: none !important;
}

 .type-category #productsTop .product >div, .type-category .subcategories.with-image li, .type-category .subcategories li > a {
    background-color: white;
    border-radius: 0;
    transition: transform ease-in 0.15s;
 }

 .type-category #productsTop .product > div:hover, .type-category .subcategories.with-image li, .type-category .subcategories li > a:hover {
    transform: scale(0.98);
 }

 aside.sidebar .box {
border-radius: 0;
border:none
}

/** Product detail **/

.p-detail {
    border-radius: 0;
    /* overflow: hidden; */
}

.product-top .p-final-price-wrapper.in-discount .discount-side {
    background: none;
}

.product-top .p-final-price-wrapper.in-discount .discount-side .price-save {
    background: var(--primary-color);
    color: white;
    border-radius: 0;
}

.product-top .p-final-price-wrapper.in-discount .price-side {
    background:none;
}

.product-top .p-final-price-wrapper.in-discount .price-side .price-final .price-final-holder {
    padding: 10px 0;
    color: var(--primary-color)!important;
    font-weight: 600;
}

.p-info-wrapper h1 {
    font-weight: 500;
    margin-bottom: 0;
    order: -2;
}

/* Galerie jede se stránkou: výška přilepené hlavičky (--hlavicka-vyska,
   blok 12) + 20 px mezera. Kde se zastaví, řeší blok DETAIL PRODUKTU –
   galerie na konci souboru. */
.sticky-top {
    position: sticky;
    top: calc(var(--hlavicka-vyska, 80px) + 20px);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}

/* Upozornění u zavěšených postelí – 1:1 jako upozornění v popisu produktu
   (vložené v administraci): světle fialová plocha, fialový pruh 6 px na
   levé hraně a černý text. Fialová je vyhrazená jen pro upozornění, aby se
   nepletla s hnědou akcí a meruňkovou plochou.
   Text je v info-detail-produktu.json (upozorneni.beton). */
.alert-beton {
    --upozorneni: #bba9e2;
    --upozorneni-plocha: #eee9f8;
    display: flex;
    align-items: stretch;
    margin: 28px 0 0;
    padding: 0;
    background: var(--upozorneni-plocha);
    border-radius: 0;
}

.alert-beton__icon {
    flex: 0 0 6px;
    width: 6px;
    background: var(--upozorneni);
}

.alert-beton__text {
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-color);
}


.flag-pouze-pro-betonovy-strop {
    display: none !important;
}

.type-detail .detail-parameters .custom-variants-list .custom-variants .variant.active {
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 2px var(--color-primary);
}

/** Product configurator **/

.product-conf__row {
    padding: 20px 0;
}

/* .product-conf__row[data-grouped="true"] h3 {
    width: calc(50% - 4px);
    display: inline-flex;
    align-items: center;
} */

.product-conf__info {
    display: inline-flex;
}

.product-conf__info--btn {
    background: none !important;
    width: 22px !important;
    height: 22px;
    min-height: unset !important;
    padding: 0 !important;
}

.product-conf__info--tooltip {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    background-color: #110e0a;
    border-radius: 0;
    padding: 8px 16px;
    display: none;
}

.product-conf__info--tooltip[data-show] {
    display: block;
}

.product-conf__row[data-grouped="true"] .product-conf__nav {
    /* width: calc(50% - 4px);
    margin-left: auto; */
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
}

/* .product-conf .product-conf__row:nth-of-type(odd) {
    border-left: 1px solid #f9e7dd;
}

.product-conf .product-conf__row:nth-of-type(even) {
    border-right: 1px solid #f9e7dd;
} */

.product-conf__row h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
    position: relative;
}

.product-conf__row h3::before {
    /* content: counter(section) "."; */
    content: counter(section);
    counter-increment: section;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    background: #bc6125;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.product-conf__row[data-grouped="true"] .product-conf__items {
    overflow: hidden;
    max-height: 340px;
    position: relative;
}

.product-conf__row[data-grouped="true"] .product-conf__items.showMore {
    overflow: unset;
    max-height: unset;
}

.product-conf__row[data-grouped="true"] .product-conf__items:not(.showMore)::after {
    content: '';
    background: #ffffff;
    background: #ffffff;
    background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=0);
    height: 80px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.product-conf__items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.product-conf__item {
    max-width: calc(50% - 16px);
    flex: 0 0 calc(50% - 16px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    position: relative;
    cursor: pointer;
}

.product-conf__item.selected::after {
    content: '';
    background: var(--color-primary) url('/user/documents/assets/ui-ikony/fajfka-bila.svg') 50% no-repeat;
    background-size: 50%;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 64px;
    bottom: -10px;
}

.modal-body .product-conf__items {
    gap: 8px;
}

.modal-body .product-conf__item {
    max-width: calc(25% - 6px);
    flex: 0 0 calc(25% - 6px);
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.modal-body .product-conf__item[data-func] {
    display: none;
}

.modal-body .product-conf__item.selected::after {
    left: unset;
    right: 20px;
    bottom: 17px;
}

.modal-body .product-conf__img {
    width: 100%;
    height: auto;
    max-height: 340px;
    flex: 0 0 auto;
}

.modal-body .product-conf__img button {
    display: none;
}

.modal-body .product-conf__content {
    color: #fff;
    background: rgba(0, 0, 0, .5);
    padding: 10px 40px 10px 20px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Výběr rozměru / výšky v konfigurátoru.
   Šablona mu dává pevnou výšku 40 px – s odsazením 12 px nahoře i dole
   zbylo na text 15 px, řádek ale potřebuje 22 px, takže byl text useknutý.
   Výška se proto dopočítá z obsahu (min. 48 px).
   Vpravo stačí místo na šipku (44 px). Dřív tu bylo napevno 163 px, takže
   z 294 px šířky zbylo na text jen 113 px a delší volba by se ořízla.
   Šířka se řídí nejdelší volbou, nejméně 280 px, nejvýš šířka sloupce. */
.product-conf__select select {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px !important;
    color: var(--text-color);
    border-color: #efd7ca;
    border-radius: 0;
    height: auto !important;
    min-height: 48px;
    min-width: 280px;
    max-width: 100%;
    padding: 12px 44px 12px 18px !important;
    cursor: pointer;
}

.product-conf__img {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    position: relative;
}

.product-conf__img img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.product-conf__img button {
    background: #fff !important;
    border-bottom-left-radius: 0 !important;
    min-height: unset !important;
    padding: 5px !important;
    position: absolute;
    top: 0;
    right: 0;
}

.product-conf__img button:hover {
    background: var(--color-primary) !important;
}

.product-conf__img button img {
    max-width: 12px !important;
}

.product-conf__content {
    display: flex;
    flex-direction: column;
}

.product-conf__name {
    font-size: 16px;
    font-weight: 500;
}

.product-conf__nav {
    margin-bottom: 2rem;
}

.product-conf__nav ul {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.product-conf__nav li {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-primary);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1 1 auto;
    cursor: pointer;
}

.product-conf__nav li.selected {
    background: #fdebe9;
}

.product-conf__nav li button {
    font-size: 14px;
    font-weight: 500;
    background: #e6a072;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
}

.product-conf__summary {
    width: 100%;
    display: flex;
}

.product-conf__totals {
    border: 1px solid #f9e7dd;
    border-radius: 0;
    width: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.product-conf__selecteditem,
.product-conf__availability {
    font-size: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}


.product-conf__selecteditem .price {
    text-align: right;
    flex: 0 1 18%;
}

.product-conf__selecteditem:last-child {
    margin-bottom: 1rem;
}

.product-conf__prices {
    font-size: 22px;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.product-conf__prices .price {
    font-weight: 600;
    white-space: nowrap;
}

.product-conf__actions button {
    font-family: var(--template-font);
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #fff !important;
    background: var(--color-primary) !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    padding: 22px !important;
    cursor: pointer !important;
}

.product-conf__actions button:hover {
    background: var(--color-primary-hover) !important;
}

.product-conf__actions #confAvailability {
    margin-top: 1rem;
}

.product-conf__actions #confAvailability .availability-label {
    margin-bottom: 0;
}

.showMoreGrouped {
    font-weight: 600 !important;
    color: var(--text-color) !important;
    background: unset !important;
    padding: 0 !important;
    position: absolute;
    left: 50%;
    bottom: -18px;
    z-index: 1;
    transform: translateX(-50%);
}

.showMoreGrouped.active {
    bottom: -46px;
}

#productAccessories .flags {
    display: none;
}


/** checkout **/

#order-shipping-methods label, #order-billing-methods label {
    border: none !important;
    border-radius: 0;
    overflow: hidden;
}

#colorbox[role=dialog] form input, #colorbox[role=dialog] form textarea {
    min-height: 55px;
    border-radius: 0;
}

#colorbox[role=dialog] form input.btn {
    padding: 6px 1.5rem;
    margin-bottom: 10px;
}
#checkoutContent .form-group .form-control, #checkoutContent .phone-combined-input .country-flags, form .form-group input {
        border-radius: 0;
        min-height: 50px;
    }

    form .form-control:focus, form textarea {
        border-radius: 0!important;
    }
.cart-widget.popup-widget #continue-order-button {
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
}
#checkoutContent .phone-combined-input .country-flags {
    display: flex;
    align-items: center;
     min-height: 50px;
}

.country-flags-inner {
    top:6px
}

/** contact **/
.form-group>input.form-control, .form-group>select.form-control {
    max-width: 100%;
}

.in-kontakty h2 {
    margin-top: 0;
}

.in-kontakty h3 {
    margin: 0;
}

.in-kontakty p {
    word-wrap: break-word;
    margin:.5rem 0 1rem;
}

.form-wrapper {
    padding: 1.5rem;    
}

.form-wrapper>p {
    display: none;
}


.contact-box h2 {
    font-size: 1.3125rem;
}

@media (min-width:1201px) {
    .form-wrapper {
        padding: 1.5rem 3rem;
    }
}

/** 4W modals **/
/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Vertikální centrování */
.modal-overlay.vertical-center {
    align-items: center;
}

/* Modal Container */
.modal-container {
    background: #fff;
    border-radius: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 98vw;
    width: 100%;
    max-height: 98vh;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.modal-overlay.active .modal-container {
    transform: translateY(0);
}

/* Modal Header */
.modal-header {
    position: relative;
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

/* Close Button */
.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    color: #666;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background-color: #f5f5f5;
    color: #333;
}

.modal-close:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Modal Body */
.modal-body {
    padding: 20px;
    max-height: calc(90vh - 40px);
    overflow-y: auto;
}

/* Modal bez headeru */
.modal-container.no-header .modal-body {
    max-height: calc(90vh - 40px);
    padding-top: 50px;
}

.modal-container.no-header .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
}

.modal-container.no-padding .modal-body {
    padding: 0;
}

/* FAQs */
.faq-item label::before{display: none !important;}
.faq-item label + div{display: none;}
.faq-item input:checked + label + div{display: block;}
/* Časté otázky: otázka jako na detailu produktu (16 px, 600, řádkování 1,4),
   linka #DBDBDA, najetí meruňkovou linkou jako volby v objednávce */
.faq-item{border: 1px solid #DBDBDA;margin-bottom: 12px;transition: border-color .15s linear;}
.faq-item label{margin: 0 !important;cursor: pointer;padding: 16px 52px 16px 20px !important;width: 100%;color: var(--text-color) !important;background-color: #fff;font-size: var(--text-zakladni);font-weight: 600;line-height: 1.4;position: relative !important;display: inline-block;}
.faq-item:hover{border-color: var(--primary-color);}
.faq-item label::after{content: "\e911" !important;font-family: shoptet !important;right: 20px;position: absolute !important;line-height: 1 !important;font-size: 14px !important;top: 50% !important;margin-top: -8px;-webkit-transform: rotate(180deg) !important;transform: rotate(180deg) !important;background: none !important;color: var(--text-color) !important;left: auto !important;}
.faq-item input:checked + label::after{-webkit-transform: rotate(0deg) !important;transform: rotate(0deg) !important;}
/* Rozbalená otázka: šablonové zaškrtávátko pod šipkou barvilo podklad zeleně */
.faq-item input:checked + label::after{background-color: transparent !important;border: 0 !important;box-shadow: none !important;}
/* Odpověď běžným textem webu (16 px / 1,6) jako na detailu produktu */
.faq-item input:checked + label + div{font-size: var(--text-zakladni);line-height: 1.6;padding: 0 20px 20px;}
.faq-item label + div p{font-size: inherit;line-height: inherit;}
.faq-item input{display: none;}


/* Responsive design */
@media (max-width: 768px) {
    .modal-container {
        max-width: 95vw;
        margin: 10px;
    }
    
    .modal-header {
        padding: 15px;
    }
    
    .modal-body {
        padding: 15px;
        max-height: calc(90vh - 100px);
    }
    
    .modal-container.no-header .modal-body {
        max-height: calc(90vh - 30px);
        padding-top: 45px;
    }
}

@media (min-width: 1201px) {
#carousel .item .extended-banner-texts {
    padding: 40px 60px;
}

#carousel .carousel-indicators {
    max-width: 1520px;
}
}
/* Custom šířky */
.modal-container.modal-sm { max-width: 400px; }
.modal-container.modal-md { max-width: 600px; }
.modal-container.modal-lg { max-width: 800px; }
.modal-container.modal-xl { max-width: 1200px; }
.modal-container.modal-full { max-width: 100%; }

/* Disable body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/** respo **/
@media (min-width:1655px) {
    #carousel .item .extended-banner-texts {
        left: calc((100% - 1610px) / 2);
        transform: none;
    }
}

@media (max-width:946px) {
    .p-detail .p-image-wrapper {
        flex-direction: column !important;
    }

    .product-top {
        display: block;
    }

    .section-desc {
        width: 100%;
        max-width: 100%;
    }

    .in-index footer {
        padding-top: 20px;
    }

    .banner-content {
        width: 100%;
        padding: 2rem 2rem 3rem;
        position: static;
        order: 1;
    }

    .contact-wrapper {
        flex-direction: column;
        gap: 1rem;
    }

    .contact-wrapper > div {
        margin-right: 0;
    }

    .benefitBanner .benefitBanner__picture {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 1380px) {
    
    .benefitBanner .benefitBanner__item {
        padding: 20px;
    }
}

@media (max-width: 1200px) {
    /* Šířku nakonec určuje pravidlo s !important v bloku 12/25, ale podle
       tohoto šablona při načtení počítá, kolik položek menu se vejde (bez
       něj zůstala na tabletu poslední položka přes „Více" a lupu) */
    #navigation {
        width: calc(100% - 430px);
    }

    #carousel .item .extended-banner-texts {
        background: unset;
    }

    #carousel .item .extended-banner-texts .extended-banner-title {
        color: #fff !important;
    }
}

@media (max-width:797px) {
    .btn.btn-primary {
        padding: 0 24px !important;
    }

    #content-wrapper {
        margin-top: 40px;
    }

    
    #carousel .item .extended-banner-texts {
        background: #fdebe9;
    }

    #carousel .item .extended-banner-texts .extended-banner-title {
        color: var(--text-color) !important;
    }

    .product-top {
        display: flex;
        flex-direction: column;
    }

    .product-top .col-xs-12:first-child {
        display: block;
    }

    .p-detail .p-image-wrapper {
        display: block;
    }

    .p-detail div.col-xs-12.p-info-wrapper {
        padding: 0 !important;
    }

    /** Product configurator **/
    .product-conf__nav ul {
        flex-wrap: wrap;
    }

    .product-conf__totals {
        padding: 16px;
    }

    .product-conf__selecteditem,
    .product-conf__availability {
        font-size: 14px;
    }

    .product-conf__selecteditem .name,
    .product-conf__availability .name {
        max-width: 72%;
    }

    .product-conf__prices {
        font-size: 18px;
    }

    .modal-body .product-conf__item {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .h4.homepage-group-title,
    h4.homepage-group-title,
    .hp-news h1, .hp-news .nadpis-z-h1 {
        padding-left: 0;
        padding-right: 0;
    }

    .section-desc {
        max-width: 100%;
        display: none;
    }

    /* Spodní odsazení lišty výhod řeší blok LIŠTA KONKURENČNÍCH VÝHOD na konci
       souboru (margin-bottom: 0 !important). Tady bylo 2rem. */

    .benefitBanner .benefitBanner__item {
        padding: 15px 0;
    }

    .benefitBanner .benefitBanner__picture {
        width: auto;
        height: auto;
    }

    .contact-banner {
        display: flex;
        flex-direction: column;
    }

    .contact-banner img {
        order: 2;
    }

    .banner-content {
        width: 100%;
        padding: 2rem 2rem 3rem;
        position: static;
        order: 1;
    }

    .contact-wrapper {
        flex-direction: column;
        gap: 1rem;
    }

    .contact-wrapper > div {
        margin-right: 0;
    }

    body footer .container.footer-bottom .copyright a {
        text-align: center;
    }

    .slick-slider .slick-arrow.slick-next {
        margin-top: 0 !important;
    }

    .listSorting .listSorting__controls li button {
        color: var(--text-color);
    }

    .cp-section--sm .cp-text-center {
        max-width: 100% !important;
    }

    .cp-container div[style*="40px 80px 40px 0"] {
        padding: 40px 0 !important;
    }

    .cp-container-wide div[style*="60px 48px 20px"] {
        padding: 60px 18px 20px !important;
    }

    .cp-team-photo {
        min-height: unset !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .cp-team-photo img {
        position: relative !important;
        top: unset !important;
    }

    .search fieldset {
        overflow: unset !important;
    }

    #header .search-form fieldset input {
        border-radius: 0 !important;
    }

    #header .search-form fieldset button {
        background: var(--primary-color);
    }

    .type-detail .benefitBanner {
        padding: 0;
    }

    .type-product .benefitBanner .benefitBanner__item {
        padding: 10px;
        flex-direction: column;
    }

    footer .site-name {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    footer .site-name>a img {
        max-width: 180px;
    }

    footer .site-name .footer-socials {
        margin: 0;
    }

    footer .site-name .footer-socials a {
        margin-left: 22px;
        margin-right: 0;
    }
}


/** Kontaktní formulář - doplňek **/
.render-form input[type="text"].form-control,
.render-form input[type="email"].form-control,
.render-form input[type="tel"].form-control,
.render-form textarea.form-control {
    font-family: var(--template-font);
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    height: 40px;
    min-height: 50px;
    padding: 10px 15px;
    margin-bottom: 10px;
    display: block;
}

.render-form input[type="file"] {
    border: 1px solid #ededed;
    border-radius: 0;
    min-height: 34px !important;
    padding: 0;
}

.render-form input[type="file"]::file-selector-button {
    font-size: 14px;
    background: var(--secondary-color);
    border: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 8px 16px;
    margin-right: 12px;
}

.render-form textarea.form-control {
    min-height: 120px;
}

.render-form button[type="submit"] {
    width: auto;
    min-height: 55px;
    border: none !important;
    display: -ms-flexbox!important;
    display: flex !important;
    cursor: pointer;
    padding: 0 45px;
    color: #fff !important;
    background: var(--color-primary) !important;
    border-radius: 0;
    text-transform: none;
    font-weight: 500;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-decoration: none;
    transition: .3s;
    font-size: 14px;
    letter-spacing: .5;
    text-shadow: none;
    -webkit-appearance: none;
}

.info-text--small {
    font-size: 12px;
}

/** ==========================================================================
 ** SJEDNOCENÍ VZHLEDU – přepis šablony Classic + nadstavby Carbon
 ** Přidáno 1. 8. 2026.
 ** Tento blok musí zůstat NA KONCI souboru – spoléhá na to, že jde poslední
 ** a přebíjí tím pravidla šablony.
 ** ========================================================================== */

/** --- 1) Hranaté rohy všude ------------------------------------------------
 ** Vlastní zaoblení v tomto souboru je už vynulované, ale šablona
 ** Classic/Carbon si zaobluje spoustu svých prvků sama (tlačítka, inputy,
 ** karty, tečky karuselu, widgety). Proto univerzální reset.
 ** Důsledek: hranaté jsou nově i tečky pod karuselem a kulaté tlačítko
 ** „scroll dolů" v banneru.
 */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/** --- 2) Zrušení přibližování obrázků při najetí myší ----------------------
 ** Carbon (screen.min.css) zvětšuje obrázky na scale(1.05) až scale(1.1).
 ** Pozor: část obrázků je vycentrovaná přes transform: translate(-50%,-50%),
 ** takže se nedá plošně nasadit „transform: none" – obrázek by odskočil.
 ** Proto dvě skupiny podle toho, jaký mají klidový stav.
 */

/** 2a) Obrázky, které mají v klidu transform: none nebo scale(1) → none.
 **     Bannery (karusel, patička, mezibannery, kategorie) a Instagram widget.
 */
#carousel .banner-wrapper a:hover img,
#carousel .footer-banner a:hover img,
#carousel .item a:hover img,
.footer-banners .banner-wrapper a:hover img,
.footer-banners .footer-banner a:hover img,
.footer-banners .item a:hover img,
.footer-banners .slick-list a:hover img,
.middle-banners-wrapper .banner-wrapper a:hover img,
.middle-banners-wrapper .footer-banner a:hover img,
.middle-banners-wrapper .item a:hover img,
.next-to-carousel-banners .banner-wrapper a:hover img,
.next-to-carousel-banners .footer-banner a:hover img,
.next-to-carousel-banners .item a:hover img,
.type-category .banner-category .banner-wrapper a:hover img,
.type-category .banner-category .footer-banner a:hover img,
.type-category .banner-category .item a:hover img,
.type-index .body-banners .banner-wrapper a:hover img,
.type-index .body-banners .footer-banner a:hover img,
.type-index .body-banners .item a:hover img,
footer .custom-footer .instagram-line .instagram-widget > a:hover img,
.st-art-imgs-default .hp-news .news-wrapper .news-item .image:hover img,
.st-art-imgs-default.type-posts-listing .news-wrapper .news-item .image:hover img {
    transform: none !important;
}

/** 2b) Obrázky novinek a článků – v klidu jsou vycentrované přes
 **     translate(-50%,-50%), takže se ruší jen scale a centrování zůstává.
 */
.homepage-blog-wrapper.blog-wrapper .news-item .image a:hover img,
.homepage-blog-wrapper .news-wrapper .news-item .image a:hover img,
.hp-news.blog-wrapper .news-item .image a:hover img,
.hp-news .news-wrapper .news-item .image a:hover img,
.type-posts-listing.blog-wrapper .news-item .image a:hover img,
.type-posts-listing .news-wrapper .news-item .image a:hover img {
    transform: translate(-50%, -50%) !important;
}

/** 2c) Výjimka: PRVNÍ článek ve výpisu novinek má jiný klidový stav
 **     (position: relative; transform: none), proto se musí řešit zvlášť.
 **     Ověřeno na /nase-novinky/.
 */
.type-posts-listing .news-wrapper .news-item:first-child .image a:hover img {
    transform: none !important;
}

/** 2d) Vypnutí 1,5s přechodu, aby po najetí nezůstávala žádná prodleva. */
#carousel .item a img,
.footer-banners a img,
.middle-banners-wrapper a img,
.next-to-carousel-banners a img,
.type-category .banner-category a img,
.type-index .body-banners a img,
.news-wrapper .news-item .image img {
    transition: none !important;
}


/** ==========================================================================
 ** HORNÍ BANNERY – layout 1 velký vlevo + 2 malé vpravo (jako Benlemi)
 ** ==========================================================================
 ** Řeší se gridem uvnitř .next-to-carousel-banners, do HTML se nesahá.
 ** Caster nemá karusel (.wide-carousel je prázdný), takže hlavní banner
 ** je PRVNÍ .banner-wrapper – ne carousel jako na Benlemi.
 **
 ** Pořadí bannerů v administraci:
 **   1. = velký vlevo      2. = pravý horní      3. = pravý dolní
 **   4. = jen tablet a mobil (≤1200 px), na desktopu skrytý
 **   5. a další = skryté všude
 **
 ** !important je tu záměrně – šablona Carbon má na tyhle prvky vlastní
 ** pravidla s vyšší specificitou a část z nich layout rozbíjí (viz níže).
 ** Díky !important je jedno, v jakém pořadí se soubor načte.
 ** ========================================================================== */

/* --top-banners-gap se nastavuje o úroveň výš, na .row.banners-row: stejnou
   hodnotu potřebuje i okraj bílé karty (blok HORNÍ BANNERY – bílá karta). */
.next-to-carousel-banners {
    display: grid !important;
    /* Sloupce nejsou 2fr 1fr, ale o kousek posunuté – proč, viz výpočet
       u .banner-wrapper níž. Odchylka je odvozená z mezery, takže když se
       --top-banners-gap změní, poměry se dopočítají samy.
       Součet zůstává přesně 100 %: pro mezeru 20 px vyjde
       66,6667 % + 0,513 + 33,3333 % − 20,513 + 20 = 100 %. */
    grid-template-columns:
        calc(66.6667% + var(--top-banners-gap) * 0.025641)
        calc(33.3333% - var(--top-banners-gap) * 1.025641) !important;
    grid-template-rows: auto auto !important;
    gap: var(--top-banners-gap) !important;
    /* Výška se nezadává – vypočítá se z poměru stran bannerů. Dřív tu bylo
       pevných 520 px a to byl přesně ten problém: na užším okně se rám
       zužoval, ale výšku si držel, takže cover ukrajoval obrázek po stranách
       (při okně kolem 1250 px zmizelo 26 % šířky). */
    height: auto !important;

    /* Roztažení na plnou šířku .banners-row.
       Carbon jinak drží max-width: 1680px + margin: 0 auto, což blok zužuje
       a centruje. width/flex je tu proto, že .banners-row je flex kontejner
       a položka by se jinak roztáhla jen na šířku obsahu. */
    max-width: none !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    /* ⚠ KRITICKÉ: Carbon nastavuje .next-to-carousel-banners { align-items: flex-start }
       kvůli původnímu flex layoutu. V gridu to způsobí, že se bannery NEROZTÁHNOU
       na výšku buňky, nechají si poměr obrázku (906×552) a přetečou z bloku ven.
       Bez tohohle řádku je layout rozsypaný. */
    align-items: stretch !important;
    justify-items: stretch !important;
}

/* Řádek s bannery úplně bez okrajů.
   Carbon dává .type-index .banners-row margin-top: 40px a Bootstrap k tomu
   záporné boční okraje (-10px), kterými řádek přesahoval přes okolní obsah.
   margin: 0 ruší obojí – bannery teď lícují s obsahem pod nimi. */
.row.banners-row {
    margin: 0 !important;
}

.banners-row .wide-carousel {
    padding: 0 !important;
}

/* Prázdný carousel by jinak nad bannery držel místo.
   POZOR: :empty nestačí – v šabloně je uvnitř .wide-carousel odřádkování,
   tedy textový uzel, a :empty na takový element NESEDÍ. Proto ještě
   :not(:has(*)) = "nemá žádné potomky-elementy" (bílé znaky nevadí).
   Záměrně jako dvě samostatná pravidla: kdyby prohlížeč :has() neuměl,
   zahodí jen to druhé, ne obě. */
.banners-row .wide-carousel:empty {
    display: none;
}

.banners-row .wide-carousel:not(:has(*)) {
    display: none;
}

/** Poměr stran rámu = poměr stran obrázku, takže cover nemá co ukrojit.
 **
 ** Proč nejsou sloupce 2fr 1fr:
 ** Velký banner je vysoký jako oba malé plus mezera mezi nimi. Aby všechny tři
 ** vyšly ve stejném poměru r, musí platit
 **     W1 / r = 2 · (W2 / r) + mezera     →     W1 = 2 · W2 + r · mezera
 ** Velký sloupec tedy není přesně dvojnásobek malého, ale je o r × 20 px širší.
 ** Dosazením do W1 + W2 + mezera = 100 % vyjde
 **     W2 = (100 % − 20 · (1 + r)) / 3 = 33,3333 % − 20,513 px
 **     W1 = 66,6667 % + 0,513 px
 ** S 2fr 1fr by malé bannery byly o 2 % mimo poměr a taky by se ořezávaly. */
.next-to-carousel-banners .banner-wrapper {
    aspect-ratio: 1080 / 520;
    overflow: hidden;
    /* Carbon dává wrapperům padding: 0 35px, margin-bottom: 20px a background: #fff */
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    /* bez tohohle grid položka přeteče, když je obrázek vyšší než buňka */
    min-width: 0;
    min-height: 0;
}

/* 1. banner = velký vlevo, přes obě řádky */
.next-to-carousel-banners .banner-wrapper:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: block !important;
}

/* 2. a 3. banner = pravý sloupec pod sebou */
.next-to-carousel-banners .banner-wrapper:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
}

.next-to-carousel-banners .banner-wrapper:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
}

/* 4. je jen pro tablet a mobil, 5. a další se neukazují (blok doladění) */

/* Obrázek vyplní buňku a ořízne se – funguje i s <a> obalem (Benlemi styl) */
.next-to-carousel-banners .banner-wrapper > a,
.next-to-carousel-banners .banner-wrapper > span > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.next-to-carousel-banners .banner-wrapper img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block !important;
}

/** --- MOBIL (≤797 px) ------------------------------------------------------ */
/* Který banner je na tabletu a mobilu vidět, řeší blok HORNÍ BANNERY –
   doladění níž (jen čtvrtý, v poměru 1080 : 520). */
@media (max-width: 797px) {
    /* Carbon skrývá obrázky přes opacity:0 a odkrývá je až animací AOS.
       Banner, který byl předtím display:none, se k animaci nemusí dostat
       a zůstal by neviditelný – proto ho tady odkryjeme natvrdo. */
    .next-to-carousel-banners .banner-wrapper img {
        opacity: 1 !important;
    }
}


/** ==========================================================================
 ** LIŠTA BENEFITŮ + PRODUKTOVÁ KARTA NA TITULCE
 ** ==========================================================================
 ** Barvy tlačítka „Zobrazit" se ladí tady na jednom místě:
 **   pozadí  = --secondary-color (#fdebe9, jílově růžová)
 **   text    = --primary-color   (#bc6125, meruňková/hnědá)
 ** Alternativy z palety, kdyby růžová byla moc světlá:
 **   --tertiary-color #f9e7dd (béžová) | --complementary-color #efd7ca (tmavší)
 ** ========================================================================== */

/** --- 1) Lišta benefitů – spodní odsazení --------------------------------- */
/* Přesunuto na konec souboru do bloku LIŠTA KONKURENČNÍCH VÝHOD, kde se teď
   řeší odsazení i rozvržení pohromadě. Tady bylo margin-bottom: 20px. */


/** --- 2a) Zrušení posunu produktu dolů při najetí ------------------------- */
/* Carbon: .products-block.products .product:hover { top: 15px } */
.products-block.products .product:hover,
.products-block.products .product:focus-within {
    top: 0 !important;
}


/** --- 2b) Přepnutí na třetí fotku při najetí ------------------------------ */
/* Druhou fotku do karty dokládá initProductPhotoSwap() v custom-caster-v2.js –
   bere třetí obrázek z galerie produktu. U produktů, které tolik fotek nemají,
   se žádná nedoloží a při najetí se nic nestane.
   Přechod tu není schválně: fotka se překlopí rázem, animace obrázků jsou
   na webu všude vypnuté.
   overflow tu záměrně NENÍ, aby se neořízly štítky. */
.products-block.products .product a.image {
    position: relative;
}

.products-block.products .product a.image .p-hover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    opacity: 0;
}

.products-block.products .product a.image:hover .p-hover-img,
.products-block.products .product a.image:focus-within .p-hover-img {
    opacity: 1;
}


/** --- 3b) Název produktu doleva ------------------------------------------ */
.products-block.products .product .p .name,
.products-block.products .product .p .name span {
    text-align: left !important;
    width: 100%;
}


/** --- 3c) Cena meruňkovou, zarovnaná doleva ------------------------------ */
.products-block.products .product .prices {
    justify-content: flex-start !important;
}

.products-block.products .product .prices .price-final,
.products-block.products .product .prices .price-final strong {
    color: var(--primary-color) !important;
    font-weight: 600;
}


/** --- 3d) Tlačítko „Zobrazit" -------------------------------------------- */
/* ⚠ Samotný prvek do stránky vkládá custom-simon.js (funkce
   addProductDetailButtons). Shoptet ho nevykresluje – karta má třídu
   .no-buttons, tlačítka jsou v administraci vypnutá. Bez nasazeného JS
   se tenhle styl nemá na co aplikovat. */
.products-block.products .product .p-bottom {
    /* Carbon má flex-direction: column – proto byla cena nad tlačítkem */
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--karta-mezera);
}

.products-block.products .product .p-bottom > [data-micro="offer"] {
    flex: 1 1 auto;
    min-width: 0;
}

.products-block.products .product .p-detail-btn {
    flex: 0 0 auto;
    font-family: var(--template-font);
    font-size: var(--text-drobny);
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .3px;
    color: var(--primary-color) !important;
    background: var(--secondary-color);
    border: none;
    padding: 12px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.products-block.products .product .p-detail-btn:hover,
.products-block.products .product .p-detail-btn:focus {
    color: #fff !important;
    background: var(--primary-color);
}

@media (max-width: 797px) {
    .products-block.products .product .p-detail-btn {
        padding: 10px 16px;
    }
}


/** ==========================================================================
 ** PRODUKTOVÁ KARTA – revize podle předlohy (fotky 4:3)
 ** ========================================================================== */

/** --- 5) Vynulování odsazení karty --------------------------------------- */
/* Carbon: .p margin 1px, .p-in padding 0 25px 20px */
.products-block.products .product .p {
    margin: 0 !important;
}

.products-block.products .product .p-in {
    padding: 0 !important;
}

.products-block.products .product a.image {
    margin: 0 !important;
    padding: 0 !important;
}


/** --- 6) Fotka produktu 4:3 přes celou šířku karty ------------------------ */
/* Shoptet do karty posílá zmenšeninu 423×318 (4:3). Fotka se jen roztáhne
   na šířku karty a výšku si dopočte sama – nic se neořezává.
   ⚠ Dvě pravidla Carbonu, která by kartu zúžila:
     .products-block.products .product .image        → width: calc(100% - 50px)
     .products-block.products .slick-list .product .image → max-width: 360px
   To druhé má vyšší specificitu než náš selektor, proto !important. */
.products-block.products .product a.image {
    display: block;
    /* ⚠ .p je flex sloupec – bez flex: 0 0 auto by se obrázek smrštil */
    flex: 0 0 auto;
    width: 100% !important;
    max-width: none !important;
}

.products-block.products .product a.image img {
    width: 100% !important;
    display: block;
}


/** --- 2) Cena: „od" menším písmem, částka větším ------------------------- */
.products-block.products .product .prices .price-final strong {
    font-size: var(--text-vyrazny);
    font-weight: 600;
}


/** --- 3) Skrytí dostupnosti ---------------------------------------------- */
/* Dnes ji karta nevykresluje vůbec – tohle je pojistka, kdyby se
   „Skladem" / „Odesíláme do…" v administraci někdy zapnulo. */
.products-block.products .product .availability,
.products-block.products .product .availability-label,
.products-block.products .product .availability-value,
.products-block.products .product .delivery-time,
.products-block.products .product .p-desc {
    display: none !important;
}


/** --- Mezery po vynulování paddingu -------------------------------------- */
/* Bez .p-in paddingu by text lepil na okraj karty */
.products-block.products .product .p-in-in {
    padding-top: 14px;
    padding-bottom: 20px;
}


/** --- Cena a tlačítko vždy na spodní hraně karty -------------------------- */
/* Bez tohohle sedí cena hned pod názvem, takže karta s jednořádkovým názvem
   má tlačítko o řádek výš než karta s dvouřádkovým.
   Řetěz musí držet celý, jinak nefunguje nic:
     .slick-track  – flex se stretch, dělá Carbon → slidy mají stejnou výšku
     .product      – flex sloupec, aby se .p mělo do čeho roztáhnout
                     (height: 100 % tu NEfunguje, .product nemá určenou výšku)
     .p a .p-in    – rostou
     .p-in-in      – neroste, drží se obsahu
     .p-bottom     – ⚠ Carbon mu dává flex-grow, takže volné místo SPOLKNE
                     a naroste místo aby se odsunul. flex: 0 0 auto to vypne,
                     margin-top: auto pak mezeru přesune nad něj. */
.products-block.products .product {
    display: flex;
    flex-direction: column;
}

.products-block.products .product .p {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

.products-block.products .product .p-in {
    flex: 1 1 auto !important;
}

.products-block.products .product .p-in-in {
    flex: 0 0 auto;
}

.products-block.products .product .p-bottom {
    flex: 0 0 auto !important;
    margin-top: auto !important;
}


/** ==========================================================================
 ** SEKCE S PRODUKTY NA TITULCE – vynulování odsazení
 ** ==========================================================================
 ** Aplikováno na obě skupiny (-1 i -2). Kdyby to mělo platit jen pro první,
 ** stačí z každého selektoru smazat variantu s dvojkou.
 ** ========================================================================== */

/** --- 1) Nadpis skupiny – svislé odsazení 20 px -------------------------- */
/* Carbon má padding: 50px 45px 25px. Boční 45 px zůstává. */
.homepage-group-title.homepage-products-heading-1,
.homepage-group-title.homepage-products-heading-2 {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
}


/** --- 2) Blok produktů --------------------------------------------------- */
/* Carbon: padding 0 0 40px 1px, margin 0 0 30px */
#products-1.products-block,
#products-2.products-block {
    margin-bottom: 40px !important;
}


/** --- 3+4+5) Z karuselu mřížka se zalamováním --------------------------- */
/* Karusel se nevypíná v JS – Shoptet si slick inicializuje sám a při resize
   znovu přepočítává. Místo boje o timing se jeho výstup přebije v CSS.
   Co je potřeba přebít (vše zapisuje slick inline):
     .slick-track  width: 4016px  → 100 %
     .slick-track  transform: translate3d(-2008px,0,0) → none  (posuv karuselu)
     .slick-slide  width: 989px   → auto (šířku určí mřížka)
   .slick-list má overflow: hidden, aby ořezával odscrollované slidy –
   při zalamování by ořízl druhý řádek, proto visible + height: auto.

   Mezera je fixních 20 px z gap. Slidy mají nulový padding, takže fotka
   vyplní celou šířku karty (dřív ji odsazoval padding, kterým se dělala
   mezera). Krajní karty tím lícují s okraji bloku.

   Počet sloupců: 4 na desktopu, 3 na tabletu, 2 na mobilu – nikdy 1. */
/* ⚠ Carbon má na .slick-list DVĚ deklarace width, obě s !important:
       width: 100% !important;
       width: calc(100% + 20px) !important;   ← poslední vyhrává
   Těch 20 px navíc původně kompenzoval záporný margin 0 -10px. Ten tu
   vynulováváme, takže se musí srovnat i šířka – jinak blok s produkty
   přečnívá o 20 px proti banneru a liště benefitů nad ním. */
#products-1 .slick-list,
#products-2 .slick-list {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
}

#products-1.products-block,
#products-2.products-block {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#products-1 .slick-track,
#products-2 .slick-track {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mrizka-mezera);
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
}

#products-1 .product.slick-slide,
#products-2 .product.slick-slide {
    box-sizing: border-box;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* ⚠ slick.css má na tracku clearfix:
     .slick-track:before, .slick-track:after { display: table; content: '' }
   Ve flexu se pseudo-elementy ignorují, ale v GRIDU se z nich stanou
   plnohodnotné položky mřížky – ::before zabere první buňku a ::after
   další. Karty se tím posunou o jednu doprava a první buňka zůstane
   prázdná. Musí pryč. */
#products-1 .slick-track::before,
#products-1 .slick-track::after,
#products-2 .slick-track::before,
#products-2 .slick-track::after {
    display: none !important;
    content: none !important;
}

/* Ovládání karuselu už nemá co ovládat */
#products-1 .slick-dots,
#products-1 .slick-arrow,
#products-2 .slick-dots,
#products-2 .slick-arrow,
#products-1 .slick-cloned,
#products-2 .slick-cloned {
    display: none !important;
}

/* Produkty jsou čtyři. Tři sloupce by čtvrtý nechaly samotný na druhém řádku,
   proto se pod 1200 px přechází rovnou na mřížku 2×2.

   Karta je zastropovaná na 390 px a mřížka se centruje – dvě karty přes celý
   tablet by byly o polovinu větší než na desktopu. 390 px odpovídá kartě
   z desktopové čtveřice: (1610 − 3 × 20) / 4 = 387,5.

   Strop se nedá dát přes max-width na .slick-track – ten si šířku drží a
   nezmenší se. Proto se stropují rovnou sloupce a mřížka se srovná na střed
   přes justify-content. min() s calc() je tam kvůli užším tabletům: jakmile
   by dva sloupce po 390 px přetekly, spočítá se z dostupné šířky. */
@media (max-width: 1200px) {
    #products-1 .slick-track,
    #products-2 .slick-track {
        grid-template-columns: repeat(2, minmax(0, min(390px, calc((100% - 20px) / 2))));
        justify-content: center;
    }
}

/* Mobil má stejné dva sloupce jako tablet, jen bez omezení šířky (na 800 px
   stejně nikdy nedosáhne), takže se tu už nic nenastavuje. */


/** ==========================================================================
 ** RECENZE – „Co o nás říkají zákazníci" (přestavěno 2. 8. 2026)
 ** ==========================================================================
 ** Původní karusel je zazálohovaný ve style-recenze.css / custom-recenze.js.
 ** Markup generuje initReviewsCarousel() v custom-simon.js.
 ** ========================================================================== */

.hp-reviews-wrapper {
    padding: 0 !important;
    background: #ebefe6;
}

.hp-reviews-wrapper .homepage-group-title {
    text-align: center;
    padding-top: 40px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0;
}

/** --- Mřížka recenzí ----------------------------------------------------- */
/* Stejné dělení jako u produktů: 4 / 3 / 2 sloupce, mezera 20 px */
.hp-reviews {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mrizka-mezera);
    align-items: stretch;
    padding-bottom: 10px;
}

.hp-review {
    background: #fff;
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}

/* Hlavička karty: kroužek s ikonou + jméno se hvězdičkami + štítek Ověřeno.
   Ikony jsou vložené jako prázdný <i> a obarvené přes mask – jako <img>
   by je nešlo přebarvit, SVG si nese vlastní barvu. */
.hp-review__head {
    display: flex;
    align-items: center;
    gap: var(--karta-mezera);
    margin-bottom: 14px;
}

.hp-review__avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    background: var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hp-review__icon {
    width: 16px;
    height: 16px;
    display: block;
    background-color: var(--primary-color);
    -webkit-mask: url('/user/documents/assets/ui-ikony/uzivatel.svg') no-repeat center / contain;
    mask: url('/user/documents/assets/ui-ikony/uzivatel.svg') no-repeat center / contain;
}

.hp-review__ident {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hp-review__name {
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color);
}

.hp-review__stars {
    font-size: var(--text-drobny);
    letter-spacing: 1px;
    line-height: 1;
    color: #ddd0c4;
}

.hp-review__stars .is-on {
    color: #f5a623;
}

/* Štítek „OVĚŘENO" – vpravo od jména, stylem podobný štítkům u produktů */
.hp-review__verified {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-drobny);
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #4F5E3F;
    background: #ebefe6;
    border-radius: 0 !important;
    padding: 5px 11px;
    white-space: nowrap;
}

.hp-review__check {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    display: block;
    background-color: #4F5E3F;
    -webkit-mask: url('/user/documents/assets/ui-ikony/fajfka.svg') no-repeat center / contain;
    mask: url('/user/documents/assets/ui-ikony/fajfka.svg') no-repeat center / contain;
}

.hp-review__text {
    font-size: var(--text-zakladni);
    line-height: 1.65;
    color: var(--text-color);
    margin: 0;
    /* Doleva, ne do bloku – v úzkém sloupci dělal blok velké mezery
       mezi slovy. */
    text-align: left;
}

/* Pod 1200 px se zobrazují jen dvě první recenze vedle sebe. Tři sloupce
   nechávaly čtvrtou recenzi samotnou na druhém řádku a zbytek řádku prázdný.
   Strop sloupce i centrování jsou stejné jako u produktové mřížky, aby na sebe
   obě sekce navazovaly – vysvětlení je u ní. */
@media (max-width: 1200px) {
    .hp-reviews {
        grid-template-columns: repeat(2, minmax(0, min(390px, calc((100% - 20px) / 2))));
        justify-content: center;
    }

    .hp-review:nth-child(n+3) {
        display: none !important;
    }
}

@media (max-width: 797px) {
    .hp-reviews {
        padding-bottom: var(--sekce-odsazeni);
    }

    .hp-review {
        padding: 18px 18px 20px;
    }

}


/** ==========================================================================
 ** VIDEA – „Prohlédněte si naši práci"
 ** ==========================================================================
 ** Sekce stojí na barevném pásu. Vlastní odsazení nemá – shora ho drží
 ** odsazení nadpisu, zdola odsazení mřížky videí, takže barva dýchá z obou
 ** stran stejně jako u recenzí a rytmus sekcí zůstává na jedné proměnné.
 ** Markup generuje initWorkVideos() v custom-caster-v2.js.
 ** ========================================================================== */

.hp-videos-wrapper {
    padding: 0 !important;
    background: #f8f1d5;
}

.hp-videos-wrapper .homepage-group-title {
    text-align: center;
    padding-top: 40px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0;
}

.hp-videos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mrizka-mezera);
    margin-top: 32px;
    /* Drží zároveň dvě věci: spodní okraj barevného pásu, aby se o něj videa
       neopírala, a odstup od novinek, které jdou hned pod nimi. */
    padding-bottom: var(--sekce-odsazeni);
}

/* Shorts jsou na výšku – 9:16 drží rám bez ohledu na šířku sloupce
   a zabrání poskočení layoutu při načítání přehrávače. */
.hp-video {
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #000;
}

.hp-video iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

/* Na mobilu 2 vedle sebe. Sloupců schválně neubývá dřív:
   čím širší sloupec, tím vyšší video, a tři na šířku by sekci
   neúměrně natáhly. */
@media (max-width: 797px) {
    .hp-videos {
        grid-template-columns: repeat(2, 1fr);
    }
}


/** ==========================================================================
 ** KATEGORIE pod videi – „Pro malé i pro dospělé"
 ** ==========================================================================
 ** 6 dlaždic ve dvou řadách po třech, ikona nad názvem.
 ** Markup generuje initCategoriesSection() v custom-simon.js.
 **
 ** Ikony jsou vložené přes CSS mask s proměnnou --ikona, kterou nastavuje
 ** JS inline u každé dlaždice. Barvu tak určuje jediná vlastnost a nezáleží
 ** na tom, jakou barvu nese samotné SVG.
 ** ========================================================================== */

.hp-categories-wrapper {
    padding: 0 !important;
    background: #FFFFFF;
}

.hp-categories-wrapper .homepage-group-title {
    text-align: center;
    padding-top: 40px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0;
}

.hp-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mrizka-mezera);
    margin-top: 32px;
    /* Boční padding se nuluje záměrně – něco v šabloně mřížce přidávalo
       15 px z každé strany a dlaždice pak nelícovaly s okraji sekce. */
    padding: 0 0 60px !important;
    margin-left: 0;
    margin-right: 0;
}

.hp-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--karta-mezera);
    background: #f8f1d5;
    padding: 30px 24px;
    text-align: center;
    text-decoration: none !important;
    color: var(--primary-color);
    /* Žádný pohyb ani přechod – jen okamžitá změna odstínu při najetí,
       aby bylo poznat, že jde o odkaz. */
    position: static;
    top: auto;
    transform: none !important;
    animation: none !important;
}

.hp-category:hover,
.hp-category:focus {
    /* Pozadí se při najetí nemění – dlaždice si drží svou barvu z bloku
       „Barevné dlaždice kategorií“ níž. Odezvu dělá linka po spodní hraně
       v bloku HOVER DLAŽDIC KATEGORIÍ na konci souboru. */
    color: var(--primary-color);
    top: auto;
    transform: none !important;
}

.hp-category__icon {
    display: block;
    background-color: var(--primary-color);
    -webkit-mask: var(--ikona) no-repeat center / contain;
    mask: var(--ikona) no-repeat center / contain;
}

.hp-category__title {
    font-size: var(--text-zakladni);
    font-weight: 600;
    line-height: 1.35;
    color: var(--primary-color);
}

@media (max-width: 797px) {
    .hp-categories {
        grid-template-columns: repeat(2, 1fr);
        padding-bottom: var(--sekce-odsazeni);
    }

    .hp-category {
        padding: 22px 14px;
    }

    .hp-category__icon {
        width: 44px;
        height: 36px;
    }

    .hp-category__title {
        font-size: var(--text-drobny);
    }
}


/** ==========================================================================
 ** ŠÍŘKA NOVINEK + KONTAKTNÍ BANNER „Potřebujete poradit s výběrem?"
 ** ==========================================================================
 */

/** --- Novinky: srovnat šířku s ostatními sekcemi -------------------------- */
/* Blok byl o 30 px širší než zbytek stránky (1265 vs 1235). Důvod: .hp-news
   je přímý potomek <body>, ne .content-wrapper.container jako ostatní sekce,
   takže se na něj nevztahoval kontejnerový padding 0 15px ani max-width.
   Napodobujeme tedy kontejner: 1640 px minus 2× 15 px = 1610 px obsahu,
   což přesně odpovídá šířce zbytku stránky. */
.hp-news {
    box-sizing: border-box;
}


/** --- Kontaktní banner --------------------------------------------------- */
/* Barevný pás přes celou šířku okna, stejně jako u sekcí videí a recenzí:
   barvu nese obal bannerů, obsah uvnitř zůstává v ose stránky.
   Obal je jinak zúžený na 1640 px (to mu dává šablona), takže barva dřív
   končila tam, kde končí obsah. Obal drží na titulce jen tenhle jediný
   banner, jinde na webu vůbec není – přebarvit se tedy nemá co jiného.
   Odstín je ten, který má zapečený i obrázek banneru, aby na sebe plocha
   a obrázek navazovaly – tedy brandová béžová, ta samá, kterou nese
   --tertiary-color (#f9e7dd). */
.footer-banners.banner-wrapper {
    max-width: none !important;
    background: var(--secondary-color);
}

.footer-banners .footer-banner .contact-banner,
.contact-banner {
    max-width: 1610px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Obrázek dosedá přímo na spodní hranu barevného pásu. Jako řádkový prvek
   (inline) stál na účaří písma a pod ním zůstávalo 5 px místa pro
   „dotahy" písmen. Fotka postavy v SVG sahá až k jeho spodnímu okraji,
   takže víc není potřeba. Pod 1200 px obrázek skrývá pravidlo
   s !important níž v souboru – tohle ho neodkryje. */
.contact-banner .contact-banner__img {
    display: block;
}

/* Hranatě – zaoblení i případný ořez pryč */
.contact-banner,
.contact-banner img,
.contact-banner .banner-content,
.contact-banner .contact-wrapper > div {
    border-radius: 0 !important;
}

/* Žádná animace – obrázek měl transition 0.4s kvůli hoveru šablony */
.contact-banner img,
.contact-banner a,
.contact-banner .contact-wrapper > div {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Obsah: místo rozprostření (space-around) srovnat nahoru a mezery
   řídit ručně – tím se stáhne velká díra mezi nadpisem a kontakty. */
.contact-banner .banner-content {
    justify-content: center;
    gap: var(--mrizka-mezera);
    padding: 56px 48px;
}

.contact-banner h2 {
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.contact-banner .banner-content > p {
    font-size: var(--text-zakladni);
    line-height: 1.5;
    color: #585653;
    max-width: 46ch;
    margin: 0;
}

/* Kontaktní kanály: bez růžového pozadí, větší a vzdušnější */
.contact-wrapper {
    margin-top: 10px;
    gap: 56px;
}

/* Mřížka místo flexu: <a> a <span> jsou sourozenci, takže ikona drží levý
   sloupec přes obě řádky a vpravo je nahoře hodnota, pod ní dostupnost. */
.contact-banner .contact-wrapper > div {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--karta-mezera);
    row-gap: 2px;
    align-items: center;
}

/* Ikona byla absolutně umístěná vlevo v odsazení boxu; teď je z ní
   normální položka flexu a barví se přes mask, ať sedí s brandem. */
.contact-banner .tel:before,
.contact-banner .mail:before {
    content: '';
    position: static !important;
    left: auto !important;
    top: auto !important;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    flex: 0 0 auto;
    width: 42px !important;
    height: 42px !important;
    background: var(--primary-color) !important;
}

.contact-banner .tel:before {
    -webkit-mask: url('/user/documents/assets/ui-ikony/telefon.svg') no-repeat center / contain;
    mask: url('/user/documents/assets/ui-ikony/telefon.svg') no-repeat center / contain;
}

.contact-banner .mail:before {
    -webkit-mask: url('/user/documents/assets/ui-ikony/mail.svg') no-repeat center / contain;
    mask: url('/user/documents/assets/ui-ikony/mail.svg') no-repeat center / contain;
}

/* Hodnota (číslo, e-mail) výrazně, poznámka pod ní tlumeně */
.contact-banner .contact-wrapper a {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--text-vyrazny) !important;
    font-weight: 600;
    line-height: 1.25;
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

.contact-banner .contact-wrapper a:hover {
    color: var(--primary-color) !important;
}

.contact-banner .contact-wrapper span {
    grid-column: 2;
    grid-row: 2;
    display: block;
    font-size: var(--text-drobny);
    line-height: 1.3;
    color: #585653;
}

@media (max-width: 946px) {
    .hp-news {
        margin-bottom: 50px !important;
    }

    .contact-banner .banner-content {
        padding: 32px 24px 36px;
        gap: var(--karta-mezera);
    }

    .contact-banner h2 {
        font-size: 1.5rem;
    }

    .contact-wrapper {
        gap: 18px;
        margin-top: 6px;
    }
}


/** ==========================================================================
 ** FINÁLNÍ ÚPRAVY – odsouhlaseno 3. 8. 2026
 ** ==========================================================================
 ** Tenhle soubor vznikl kopií style-simon-bannery.css. Blok níže obsahuje
 ** schválené změny a musí zůstat na konci souboru.
 **
 ** Rytmus sekcí se ladí proměnnými hned pod tímhle komentářem.
 ** ========================================================================== */

:root {
    /* Svislé odsazení sekce shora i zdola */
    --sekce-odsazeni: 72px;
    /* Mezera mezi nadpisem sekce a jejím obsahem */
    --sekce-mezera: 36px;
    /* Velikost nadpisu a podnadpisu sekce */
    /* Tři velikosti textu pro celou titulku. Nadpis a podnadpis sekce mají
       vlastní hodnoty níž – ty do těchto tří sad nepatří. */
    --text-vyrazny: 1.125rem;
    --text-zakladni: 1rem;
    --text-drobny: .875rem;

    /* Mezera mezi kartami v mřížce a uvnitř karty */
    --mrizka-mezera: 20px;
    --karta-mezera: 14px;

    --sekce-nadpis: 2.25rem;
    --sekce-podnadpis: 1rem;
    /* Jednotný přechod pro všechna tlačítka */
    --prechod-tlacitka: background-color .15s linear, color .15s linear;
}


/** --- 1-4) Animace ------------------------------------------------------- */
/* AOS vypíná JS třídou st-animations-disable. Tohle je pojistka, kdyby se
   sem dostal prvek, který se přesto rozjíždí. */
[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Jediný, všude stejný přechod na tlačítkách */
.btn,
button,
.p-detail-btn,
.hp-news__more-btn {
    transition: var(--prechod-tlacitka) !important;
}

/* Obrázky se při najetí nehýbou nikde */
a:hover img,
a:focus img,
.footer-banners a:hover img,
#navigation a:hover img {
    transform: none !important;
    transition: none !important;
}

/* Dlaždice kategorií a karty produktů úplně bez přechodu */
.hp-category,
.hp-category:hover,
.products-block.products .product,
.products-block.products .product > div,
.type-category #productsTop .product > div {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}


/** --- 13) Kontaktní banner hranatý ---------------------------------------- */
/* Zaoblení 20 px se zkoušelo, ale nakonec zůstává hranatý jako zbytek webu. */
.contact-banner,
.contact-banner img,
.contact-banner .banner-content {
    border-radius: 0 !important;
    overflow: hidden;
}


/** --- 15-18) Jednotný rytmus sekcí --------------------------------------- */
/* Sekce dřív měly odsazení 40/50/60/70 px a rozdíly se kompenzovaly marginy
   na navazujících prvcích. Teď má každá sekce stejné odsazení, vnitřní prvky
   nulové, a rytmus tak drží jedna proměnná. */
.hp-reviews-wrapper,
.hp-videos-wrapper,
.hp-categories-wrapper {
    padding: 0 !important;
}

/* background: none je kvůli podstránkám. Šablona dává nadpisům mimo titulku
   šedou plochu #fafafa a ta se v barevném pásu sekce objevila jako světlý
   obdélník kolem nadpisu. Na titulce nevadila, protože tam se pravidlo
   neuplatní. */
.hp-reviews-wrapper .homepage-group-title,
.hp-videos-wrapper .homepage-group-title,
.hp-categories-wrapper .homepage-group-title,
.homepage-group-title.homepage-products-heading-1,
.homepage-group-title.homepage-products-heading-2 {
    padding: var(--sekce-odsazeni) 0 0 !important;
    margin: 0 !important;
    text-align: center;
    background: none !important;
}

/* Nadpisy sekcí jednotně */
.h4.homepage-group-title,
h4.homepage-group-title,
.hp-reviews-wrapper .homepage-group-title,
.hp-videos-wrapper .homepage-group-title,
.hp-categories-wrapper .homepage-group-title,
.contact-banner h2 {
    font-size: var(--sekce-nadpis) !important;
    font-weight: 600;
    line-height: 1.2;
}

/* Podnadpisy jednotně: stejná šířka, velikost i barva */
.section-desc {
    font-size: var(--sekce-podnadpis) !important;
    font-weight: 400;
    line-height: 1.55;
    color: #585653;
    max-width: 56ch !important;
    margin: 10px auto 0 !important;
}

/* Mezera mezi nadpisem a obsahem sekce */
.hp-reviews,
.hp-videos,
.hp-categories {
    margin-top: var(--sekce-mezera) !important;
    padding-bottom: var(--sekce-odsazeni) !important;
}


/** --- 19) Bílé pozadí fotek produktů ------------------------------------- */
/* Část produktů má PNG s průhledností, část JPG. Bez tohohle se pozadí liší. */
.products-block.products .product a.image {
    background: #FFFFFF;
}


/** --- 29-30) Barevné dlaždice kategorií ---------------------------------- */
/* Každá kategorie jinou jemnou barvou ze světlé palety. */
.hp-category:nth-child(1) { background: #f9e7dd; }
.hp-category:nth-child(2) { background: #eee9f8; }
.hp-category:nth-child(3) { background: #e6f2f9; }
.hp-category:nth-child(4) { background: #ebefe6; }
.hp-category:nth-child(5) { background: #f8f1d5; }
.hp-category:nth-child(6) { background: #efd7ca; }

/* Ikony mají různé poměry stran, pevný rám je opticky srovná. */
.hp-category__icon {
    width: 52px !important;
    height: 52px !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}


/** ==========================================================================
 ** DOLADĚNÍ – 3. 8. 2026 (druhé kolo)
 ** ========================================================================== */

/** --- 1) Recenze bez odsazení -------------------------------------------- */
.hp-reviews {
    padding: 0 !important;
}

/** --- 2) Mezera nad mřížkou produktů ------------------------------------- */
/* Stejných 36 px jako mezi nadpisem a obsahem v ostatních sekcích. */
#products-1 .slick-list,
#products-2 .slick-list {
    margin-top: var(--sekce-mezera) !important;
}

/** --- 3) Kategorie bez přebarvení při najetí ----------------------------- */
/* Šest pravidel, která tu vracela každé dlaždici její barvu, je pryč: vracela
   ji jen proto, že ji dva jiné bloky při najetí přebarvovaly. Obě přebarvení
   jsou taky pryč, takže barvu drží rovnou definice dlaždic a kaskáda je
   o tři vrstvy mělčí. Odezvu na najetí dělá blok na konci souboru. */

/** --- 4) Kategorie bez spodního odsazení --------------------------------- */
.hp-categories {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/** ==========================================================================
 ** DOLADĚNÍ – 3. 8. 2026 (třetí kolo)
 ** ==========================================================================
 ** Rytmus sekcí se posouvá: nadpis má nahoře 36 px, sekce dole 72 px.
 ** Sekce novinek je záměrně vynechaná – zůstává tak, jak byla
 ** ve style-simon-bannery.css.
 ** ========================================================================== */

:root {
    /* Odsazení nad nadpisem sekce */
    --sekce-odsazeni-nahoru: 36px;
}

/** --- 2+4) Nadpisy sekcí: 36 px nahoře ----------------------------------- */
.hp-reviews-wrapper .homepage-group-title,
.hp-videos-wrapper .homepage-group-title,
.hp-categories-wrapper .homepage-group-title,
.homepage-group-title.homepage-products-heading-1,
.homepage-group-title.homepage-products-heading-2,
.homepage-group-title.h4 {
    padding-top: var(--sekce-odsazeni-nahoru) !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

/** --- 1) Kategorie: odsazení dole na obalu -------------------------------- */
/* Dokud byla sekce videí bílá, stačilo odsazení shora na jejím nadpisu a
   kategorie mohly končit na hraně obalu. Videa teď stojí na barevném pásu,
   takže hrana obalu je zároveň hranou barvy a dlaždice se o ni opíraly.
   Stejnou hodnotu drží zespodu i recenze – mezera před oběma pásy je pak
   stejná. */
.hp-categories-wrapper {
    padding-bottom: var(--sekce-odsazeni) !important;
}

/** --- 3) Blok produktů ---------------------------------------------------- */
#products-1.products-block,
#products-2.products-block {
    margin: 0 !important;
    padding: 0 0 36px !important;
}


/** ==========================================================================
 ** DOLADĚNÍ – 3. 8. 2026 (čtvrté kolo)
 ** ========================================================================== */

/** --- 1) Šířka obalu článků na 1610 px ----------------------------------- */
/* Řetěz je .hp-news > main.content > .content-inner > #newsWrapper.
   .content-inner má max-width 1640 a padding 0 15px, tedy 1610 px obsahu –
   přesně to, co mají ostatní sekce. Jediné, co obal článků rozšiřovalo,
   byl jeho vlastní margin 0 -20px ze šablony, kterým přesahoval o 40 px.
   Nic dalšího v řetězu se tedy nastavovat nemusí. */
.hp-news #newsWrapper,
.hp-news .news-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/** --- Odsazení pod nadpisem novinek --------------------------------------- */
/* .sectionDescription je na stránce jediná – obaluje nadpis Novinky. */
.sectionDescription {
    margin-bottom: 6px !important;
}


/** --- Obal patičkového banneru bez zaoblení ------------------------------- */
/* .footer-banner je jen bootstrapový sloupec kolem banneru. Zaoblení se na
   něm projevit nemá – to drží .contact-banner uvnitř. */
.footer-banners .footer-banner,
.footer-banners .footer-banner.only-img,
.footer-banners .footer-banner > span {
    border-radius: 0 !important;
}


/** ==========================================================================
 ** HORNÍ BANNERY – doladění
 ** ========================================================================== */

/** --- 2) Žádné zaoblení rohů --------------------------------------------- */
/* Univerzální reset používá zkrácený zápis border-radius, který se dá přebít
   jednotlivými vlastnostmi (border-bottom-left-radius apod.) s vyšší
   specificitou. Proto se tu nulují všechny čtyři rohy zvlášť. */
.banners-row,
.banners-row .banner-wrapper,
.banners-row .banner-wrapper a,
.banners-row .banner-wrapper img,
.next-to-carousel-banners,
.next-to-carousel-banners .banner-wrapper,
.next-to-carousel-banners .banner-wrapper a,
.next-to-carousel-banners .banner-wrapper img,
.wide-carousel,
.wide-carousel img,
#carousel .item,
#carousel .item img {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    clip-path: none !important;
}

/** --- 3) Mobil a tablet: jen čtvrtý banner ------------------------------ */
/* Desktop ukazuje 1.–3. banner, tablet a mobil jen 4. (v administraci
   samostatný banner pro malé obrazovky). Pátý a další se nezobrazují nikde. */
.next-to-carousel-banners .banner-wrapper:nth-child(n+4) {
    display: none !important;
}

@media (max-width: 1200px) {
    .next-to-carousel-banners {
        display: block !important;
        height: auto !important;
    }

    /* Vše skrýt... */
    .next-to-carousel-banners .banner-wrapper,
    .next-to-carousel-banners .banner-wrapper:nth-child(1),
    .next-to-carousel-banners .banner-wrapper:nth-child(2),
    .next-to-carousel-banners .banner-wrapper:nth-child(3) {
        display: none !important;
    }

    /* ...a nechat jen čtvrtý, v jeho vlastním poměru stran. Když čtvrtý
       v administraci chybí (bannery jsou nejvýš tři), zůstane první –
       :nth-last-child(-n+3) sedí jen tehdy, když bannery jsou nejvýš tři. */
    .next-to-carousel-banners .banner-wrapper:nth-child(4),
    .next-to-carousel-banners .banner-wrapper:nth-child(1):nth-last-child(-n+3) {
        display: block !important;
        aspect-ratio: 1080 / 520 !important;
        width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* Čtvrtý byl na desktopu skrytý, animace AOS ho nemusí odkrýt */
    .next-to-carousel-banners .banner-wrapper img {
        opacity: 1 !important;
    }

    /* Shoptet dává obrázkům banneru min-height: 200px (drží místo, než se
       doloadují). Na telefonu je ale rám vysoký jen ~161 px, takže se obrázek
       do těch 200 px roztáhl, object-fit: cover mu uřízl pruhy po stranách
       a overflow: hidden pak ještě vršek se spodkem. Tady se minimum ruší,
       aby obrázek vyplnil rám přesně a nic se neořezávalo. */
    .next-to-carousel-banners .banner-wrapper img {
        min-height: 0 !important;
    }
}


/** --- Mobilní rytmus ------------------------------------------------------ */
/* Místo desítek jednotlivých výjimek se na mobilu zmenší rovnou proměnné,
   ze kterých rytmus vychází. Sekce, mřížky i mezery pod nadpisy se tím
   posunou najednou a nikde se nemůže zapomenout. */
@media (max-width: 797px) {
    :root {
        --sekce-odsazeni: 36px;
        --sekce-mezera: 22px;
        --mrizka-mezera: 14px;
    }
}


/** ==========================================================================
 ** TABLET A MOBIL
 ** ==========================================================================
 ** Hranice odpovídají těm, které soubor už používá:
 **   tablet = 798–1200 px, mobil = do 797 px
 ** Co má platit pro obojí, je v bloku do 1200 px; mobil pak jen doplňuje.
 ** ========================================================================== */

@media (max-width: 1200px) {

    /** --- T5+T6) Kontaktní banner: bez fotky, vše na střed ---------------- */
    /* Barvu plochy drží základní definice banneru výš v souboru, tady se
       schovává jen fotka. */
    /* Vysoká specificita záměrně – ať pravidlo vyhraje bez ohledu na to,
       co na obrázek sahá z šablony. */
    .contact-banner > img,
    .contact-banner .contact-banner__img,
    .footer-banners .footer-banner .contact-banner > img,
    .footer-banners .footer-banner .contact-banner .contact-banner__img,
    .footer-banners .footer-banner.only-img .contact-banner > img {
        display: none !important;
    }

    .contact-banner .banner-content {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        padding: 40px 24px !important;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .contact-banner h2 {
        font-size: var(--sekce-nadpis) !important;
    }

    .contact-banner .banner-content > p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Telefon a e-mail vedle sebe, ne pod sebou */
    .contact-banner .contact-wrapper {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: var(--mrizka-mezera) !important;
        margin-top: 6px !important;
    }

    .contact-banner .contact-wrapper > div {
        text-align: left;
    }
}


@media (max-width: 797px) {

    /** --- M2) Nadpisy 20 px ----------------------------------------------- */
    .h4.homepage-group-title,
    h4.homepage-group-title,
    .hp-reviews-wrapper .homepage-group-title,
    .hp-videos-wrapper .homepage-group-title,
    .hp-categories-wrapper .homepage-group-title,
    .homepage-group-title.h4,
    .hp-news h1, .hp-news .nadpis-z-h1,
    .contact-banner h2 {
        font-size: 20px !important;
    }

    /** --- M3) Karta produktu ---------------------------------------------- */
    /* Pod fotkou štítky, název, dekory a cena – vše zarovnané doleva jako
       štítky; pod cenou tlačítko (na mobilu do 767 px schované, blok 31). */
    .products-block.products .product .p .name,
    .products-block.products .product .p .name span {
        text-align: left !important;
    }

    .products-block.products .product .p-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .products-block.products .product .p-bottom > [data-micro="offer"] {
        width: 100%;
    }

    .products-block.products .product .prices {
        justify-content: flex-start !important;
    }

    .products-block.products .product .p-detail-btn {
        width: 100%;
        justify-content: center;
    }

    /** --- M4) Recenze: dvě pod sebou -------------------------------------- */
    /* Skrytí třetí a další recenze je společné s tabletem, řeší ho blok
       pro ≤1200 px u výpisu recenzí. Tady se jen srovnají do jednoho sloupce. */
    .hp-reviews {
        grid-template-columns: 1fr !important;
    }

}


/** ==========================================================================
 ** OPRAVY – tablet a mobil
 ** ========================================================================== */

/** --- 2) Odsazení banneru shora ------------------------------------------ */
/* Odsazení drží řádek s bannery, ne samotný blok bannerů – jinak se sčítala.
   Kolik ho je, řeší blok HORNÍ BANNERY – bílá karta na konci souboru. */
.next-to-carousel-banners {
    margin-top: 0 !important;
}


/** --- 1) Kontaktní banner: mobil zpět do původní podoby ------------------ */
/* Rozvržení „vše na střed, fotka pryč, kanály vedle sebe" je určené jen pro
   tablet. Na mobilu se v úzkém sloupci telefon lámal přes čtyři řádky, proto
   se tu obnovuje původní podoba: fotka pod textem, kanály pod sebou. */
@media (max-width: 797px) {
    .contact-banner {
        display: flex;
        flex-direction: column;
    }

    .contact-banner .banner-content {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        padding: 2rem 2rem 3rem !important;
        order: 1;
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .contact-banner .banner-content > p {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .contact-banner .contact-wrapper {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: flex-start;
        gap: var(--mrizka-mezera) !important;
    }
}


/** ==========================================================================
 ** OBRÁZKY – žádná reakce na najetí myší
 ** ========================================================================== */

/** --- Žádné hovery na obrázcích ------------------------------------------ */
/* Obrázky se při najetí nesmí nijak měnit – ani zvětšit, ani ztmavit,
   ani zprůhlednit. transition se ruší i v klidovém stavu, aby po sobě
   nezůstala žádná prodleva. */
img {
    transition: none !important;
}

a:hover img,
a:focus img,
a:active img,
.image:hover img,
.banner-wrapper:hover img,
.news-item:hover img,
.product:hover img,
.hp-category:hover img,
li:hover img {
    filter: none !important;
    opacity: 1 !important;
    transition: none !important;
}


/** --- Výjimka ze zaoblení: spojovací linka na stránce Příběh --------------- */
/* Linka mezi bloky je poskládaná z pseudo-elementů .cpConnLR / .cpConnRL,
   které jsou definované v inline <style> přímo na té stránce. Univerzální
   reset zaoblení na konci tohoto souboru je přebil, protože inline pravidla
   nemají !important – tady se jim proto zakulacení vrací zpět.
   Hodnoty odpovídají původní definici na stránce. */
.cpConnLR::before {
    border-radius: 0 0 0 32px !important;
}

.cpConnLR::after {
    border-radius: 0 32px 0 0 !important;
}

.cpConnRL::before {
    border-radius: 0 0 32px 0 !important;
}

.cpConnRL::after {
    border-radius: 32px 0 0 0 !important;
}


/** ==========================================================================
 ** LIŠTA KONKURENČNÍCH VÝHOD – jediné závazné místo
 ** ==========================================================================
 ** Šablona lištu staví jako flexbox s wrapem: čtyři položky se dělí o šířku
 ** poměrem 1 1 0, takže při delším textu ujedou z osy a při páté výhodě se
 ** zlomí do druhého řádku. Tenhle blok ji převádí na stejnou mřížku, jakou
 ** používají nejoblíbenější produkty a recenze, a je poslední v souboru,
 ** takže přebíjí dřívější pravidla i jejich media varianty.
 **
 ** Struktura z Shoptetu:
 **   .benefitBanner.position--benefitHomepage
 **     └ .benefitBanner__item  (přímý potomek, jeden na výhodu)
 **         ├ .benefitBanner__picture > img
 **         └ .benefitBanner__content > .benefitBanner__title + __data
 ** ========================================================================== */

/** --- Nadpis sekce -------------------------------------------------------- */
/* Značkování vkládá initBenefitsHeading() v custom-caster.js. Velikost,
   tloušťku i horní odsazení nese dvojice tříd homepage-group-title + h4,
   stejně jako u recenzí, videí a kategorií – tady se dorovnává jen zarovnání
   na střed, které mají ostatní sekce navázané na svůj obal (.hp-*-wrapper). */
.benefitBanner__nadpis {
    text-align: center;
}

/* Číslo v nadpisu. Velikost je v em, takže se drží zbytku nadpisu i poté,
   co se na mobilu celý nadpis zmenší na 20 px. */
.benefitBanner__nadpis-cislo {
    font-size: 1.3em;
    color: var(--primary-color);
}


/** --- 3) Odsazení lišty + 4) čtyři sloupce s mezerou 20 px ---------------- */
/* Odsazení: shora i zespodu 36 px. Obě hodnoty jsou jen tady – dřívější
   margin-bottom (100px u definice šablony, 20px v bloku FINÁLNÍ ÚPRAVY,
   2rem na mobilu) je odsud pryč, aby se odsazení nastavovalo na jednom místě.
   !important je nutné kvůli mobilní variantě, která by jinak přebila spodek.
   Dělení sloupců je stejné jako u produktů a recenzí: 4 / 3 / 2.
   stretch (ne start) drží všechny dlaždice stejně vysoké i když se nadpis
   v jedné z nich zalomí na dva řádky. */
.benefitBanner.position--benefitHomepage {
    margin-top: 36px !important;
    margin-bottom: 36px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mrizka-mezera);
    align-items: stretch;
    /* Na tabletu a mobilu jsou dlaždice ve dvou řadách – 1fr srovná i řady
       mezi sebou, aby spodní nebyla nižší než horní. */
    grid-auto-rows: 1fr;
}

/** --- 2) Položka: jen rozvržení, žádný vzhled ----------------------------- */
/* Tady zůstává výhradně to, co drží výhodu pohromadě v buňce mřížky – pozadí,
   řez písma ani barvy tu záměrně nejsou, aby zbyl čistý podklad na hraní.
   Barevné dlaždice, které tu byly předtím, jsou zazálohované ve
   style-vyhody-dlazdice.css a stačí je vložit zpátky na konec souboru.

   padding je zpátky na 0, jak byl původně zadaný – vnitřní odsazení dávalo
   smysl jen kvůli barevné ploše.
   !important přebíjí varianty pro ≤1380 px (20px) a ≤797 px (15px 0);
   ty zůstávají kvůli liště v detailu produktu. */
.benefitBanner.position--benefitHomepage .benefitBanner__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* Víc než --karta-mezera (14px): ta počítá s prvky velikosti řádku textu,
       zatímco kresba je tu trojnásobná a při 14px se o text opírá. */
    gap: 18px;
    text-align: left;
    /* Carbon dává položce pod 992 px width: 50 %, aby se do flexboxu vešly dvě
       vedle sebe. V mřížce by z toho byla položka přes půl buňky. */
    width: auto !important;
    max-width: none !important;
}

/** --- 1) Ikona: pevný rám, bez odsazení ----------------------------------- */
/* Šablona má na obrázku margin-bottom 20px, kvůli kterému položka narostla
   o prázdný pruh pod ikonou.
   Pevný rám je tu proto, že jednotlivé SVG mají hodně různé poměry stran
   (51×51, 25×25, 14×25, 28×25, 1000×1000) – bez něj by každá dlaždice
   odsazovala text jinak. Kresbu do rámu vepíše mask-size: contain.
   Konkrétní rozměr rámu určuje blok LIŠTA VÝHOD na konci souboru. */
.benefitBanner .benefitBanner__picture {
    margin-bottom: 0 !important;
}

.benefitBanner.position--benefitHomepage .benefitBanner__picture {
    flex: 0 0 auto;
    position: relative;
    margin: 0 !important;
}

/* Kresbu i její barvu řeší blok LIŠTA VÝHOD na konci souboru; tenhle obrázek
   z administrace se u přiřazených výhod skrývá. */
.benefitBanner.position--benefitHomepage .benefitBanner__img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain;
}

/** --- Texty ---------------------------------------------------------------
 ** Záměrně tu nic není – velikosti, řez i barvu textů řeší blok LIŠTA VÝHOD
 ** na konci souboru, aby byl vzhled lišty na jednom místě.
 ** ----------------------------------------------------------------------- */

/** --- 5) Nejvýše čtyři výhody --------------------------------------------- */
/* Kdyby jich v administraci přibylo, pátá a další se nevykreslí – jinak by
   se lišta zlomila do druhého řádku a rozhodila rytmus stránky. */
.benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(n+5) {
    display: none !important;
}

/* Na tabletu 2×2, ne 3+1 – výhody jsou vždycky čtyři, takže tři sloupce
   nechají čtvrtou dlaždici samotnou na druhém řádku. */
@media (max-width: 1200px) {
    .benefitBanner.position--benefitHomepage {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Na mobilu jsou sloupce zhruba o polovinu užší, takže se stáhnou i mezery.
   Sloupce se tu nenastavují – dvojici drží už blok pro ≤1200 px.
   Velikosti písma tu taky nic nemění; nadpis i popisek zůstávají na tom,
   co jim dává základní definice lišty. */

/** ==========================================================================
 ** NEJPRODÁVANĚJŠÍ – bez rozbalovacího tlačítka
 ** ========================================================================== */

/** --- „Zobrazit více produktů" pryč --------------------------------------- */
/* Lišta nejprodávanějších má být ukázka, ne druhý výpis: zůstává jen první
   řada, kterou šablona označí jako .active (na 1440 px tři z deseti produktů).
   Zbylé produkty zůstávají skryté samy od sebe – šablona je odkrývá až
   kliknutím, které už není čím vyvolat.
   Schovává se celý .button-wrapper, ne jen samotné tlačítko: wrapper je jinak
   prázdný blok, ale tlačítko si nese margin-top 15 px, takže by po něm zbylo
   33 px prázdna (měřeno na /postele/).
   Spolu s tímhle pravidlem zmizelo i dřívější přebarvení tlačítka pro ≤797 px
   (.toggle-top-products { color: var(--text-color) } v respo bloku) – stylovat
   neviditelné tlačítko nemá smysl. */
.products-top-wrapper .button-wrapper {
    display: none !important;
}


/** ==========================================================================
 ** VÝPIS KATEGORIÍ – karta jako na titulce
 ** ==========================================================================
 ** Vzhled karty (fotka 4:3, název vlevo na dva řádky, meruňková
 ** cena, tlačítko „Zobrazit") drží bloky PRODUKTY NA TITULCE výš v souboru.
 ** Cílí na .products-block.products .product a výpis kategorie má na
 ** #products třídy products products-page products-block, takže se na něj
 ** vztahují taky – změřeno na /postele/, karta 328 px, fotka 328×247,
 ** cena 18 px meruňková, stejně jako titulka.
 **
 ** Zbývají proto jen dvě věci, ve kterých se výpis od titulky liší:
 **   1. tlačítko na detail vůbec neexistovalo – vkládá ho custom-caster.js
 **      (addProductDetailButtons + watchCategoryProducts kvůli AJAXu),
 **   2. na mobilu šablona dává jednu kartu na řádek.
 **
 ** Sloupce – naměřeno:
 **   1440 px  3 karty (331 px) – víc se vedle postranního panelu nevejde
 **    900 px  2 karty (237 px) – dává šablona sama, nic se nenastavuje
 **    390 px  1 karta          – jediné, co se tu mění
 ** ========================================================================== */

/** --- Mobil: dvě karty vedle sebe jako na titulce ------------------------- */
/* Odsazení uvnitř karty (šablona: 15px 10px 0) jde pryč – v poloviční buňce
   by ukrajovalo z fotky a titulka ho taky nemá. Mezery mezi kartami drží
   jejich margin 0 10px 20px, který zůstává.
   calc(50% - 20px): výpis je na 390px displeji široký 350 px → karta 155 px
   a mezera 20 px, stejně jako mezi sloupci na titulce. Zbytek mobilní
   podoby (název i cena na střed, tlačítko pod cenou přes celou šířku)
   už dělají pravidla titulky a šablony, proto se tu neopakuje. */
@media (max-width: 797px) {
    /* body.type-category drží změnu na kategoriích: stejné značkování
       (#products.products-page) má i vyhledávání a výpis podle štítků, kam
       tlačítko z JS nesahá – dvousloupcová mřížka bez něj by tam byla půlka
       práce. */
    body.type-category #products.products-page .product {
        width: calc(50% - 20px) !important;
        padding: 0 !important;
    }
}
/** ==========================================================================
 ** KATEGORIE – FILTROVAT a ŘAZENÍ jako dvojice tlačítek
 ** ==========================================================================
 ** Předloha: benlemi.cz. Tam jsou to vlastní prvky #filterToggleDesktop
 ** a #sortToggle, které si web dokresluje JS. Caster je nemá a nepotřebuje –
 ** obojí už na stránce je, jen to nevypadá jako tlačítko:
 **
 **   FILTROVAT  #filters-wrapper .filters-unveil-button-wrapper a.unveil-button
 **              Text „Filtrovat" kreslí ::after Carbonu, ikonu ::before.
 **              Vysouvací panel s filtry otevírá Shoptet sám přes data-unveil,
 **              takže se na logiku nesahá a tlačítko se jen přebarví.
 **   ŘAZENÍ     #category-header .listSorting
 **              Rozbalovací seznam bez kousku JS: ul má overflow: hidden
 **              a výšku jednoho řádku, aktivní volba je v něm absolutně
 **              nahoře a Shoptet rozbaluje přes :hover { overflow: visible }.
 **              Proto se tu jen přidává :focus-within – na dotyku otevře
 **              seznam ťuknutí (aktivní volba pokrývá celou plochu tlačítka).
 **
 ** Hranice 767 px není zvolená, ale daná šablonou: od 768 px výš Caster
 ** vysouvací filtr vypíná (#filters-wrapper display: none) a filtry sedí
 ** v postranním panelu. Dvojice tlačítek proto dává smysl jen pod ní;
 ** na tabletu zůstává samotné ŘAZENÍ vpravo nad výpisem.
 **
 ** Barvy podle dvojice, kterou web používá na „Interiér na míru / Náš příběh"
 ** i na „Zobrazit" u produktů: hlavní akce plná výplň, vedlejší obráceně.
 **
 ** Ikony jsou kresby vložené rovnou do stylu (data URI) a obarvené maskou,
 ** stejně jako ikony v liště výhod – tím se obejdeme bez dalších souborů
 ** a barvu drží paleta, ne obsah SVG.
 ** ========================================================================== */

@media (max-width: 1200px) {
    /** --- Plocha obou tlačítek -------------------------------------------- */
    /* Vlastní text prvku se nikde nepoužívá – píše ho pseudo-element:
       u filtru ::after Carbonu, u řazení náš vlastní ::before. */
    body.type-category #filters-wrapper a.unveil-button {
        display: flex;
        align-items: center;
        width: 100%;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        font-family: var(--template-font);
        font-size: 0 !important;
    }

    /** --- FILTROVAT: hlavní akce, plná výplň ------------------------------ */
    body.type-category #filters-wrapper a.unveil-button {
        background: var(--primary-color);
    }

    body.type-category #filters-wrapper a.unveil-button::after {
        font-size: .875rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .3px;
        line-height: 1;
        height: auto;
        /* Carbon barví text vlastním pravidlem, proto !important */
        color: #fff !important;
    }

    /* Ikona vpravo. Carbon sem dává glyf z fontu „icons" i obrázek na pozadí –
       obojí přebíjí prázdný content a maska s vlastní kresbou. */
    body.type-category #filters-wrapper a.unveil-button::before {
        content: "" !important;
        order: 2;
        margin: 0 0 0 auto !important;
        width: 20px;
        height: 20px;
        font-size: 0 !important;
        background: var(--secondary-color) !important;
        -webkit-mask: url('/user/documents/assets/ui-ikony/filtr.svg') center / contain no-repeat;
        mask: url('/user/documents/assets/ui-ikony/filtr.svg') center / contain no-repeat;
    }

}

/** ==========================================================================
 ** KATEGORIE – ŘAZENÍ jako tlačítko
 ** ==========================================================================
 ** Stejný prvek jako v dvojici FILTROVAT / ŘAZENÍ, už ale bez omezení na úzká
 ** okna – na širokém okně vypadá řazení stejně jako na mobilu. Šířku řeší až
 ** blok níž: na mobilu půlka řádku, od tabletu výš pevných 220 px.
 ** ========================================================================== */

/** --- Plocha tlačítka ------------------------------------------------------ */
/* Vlastní text prvku se nikde nepoužívá – píše ho pseudo-element ::before. */
body.type-category #category-header .listSorting .listSorting__control--current {
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    font-family: var(--template-font);
    font-size: 0 !important;
}

body.type-category #category-header .listSorting {
    /* Šablona blok posouvá o 1 px nahoru kvůli zarovnání s textem */
    top: 0;
    min-width: 0;
}

/* Výška jednoho řádku = výška tlačítka. Odsazení shora drží místo pro
   aktivní volbu, která leží nad seznamem absolutně; zbytek seznamu čeká
   schovaný v overflow. display: block je tu proti společnému pravidlu
   výš – ve flexu by se položky seřadily vedle sebe. */
body.type-category #category-header .listSorting .listSorting__controls {
    display: block;
    width: 100% !important;
    height: 46px;
    padding-top: 46px;
    background: var(--secondary-color);
    overflow: hidden;
}

/* Ikona seznamu, kterou Carbon kreslí vlevo od volby – dvojice má mít
   jen jednu ikonu, a to vpravo jako u filtru. */
body.type-category #category-header .listSorting .listSorting__controls::before {
    display: none;
}

body.type-category #category-header .listSorting .listSorting__control--current::before {
    content: "Řazení";
    font-size: .875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--primary-color);
}

/* Šipku dolů, kterou má Carbon jako obrázek na pozadí, nahrazuje ikona
   pořadí z naší sady (poradi.svg) – stejně velká jako ikona filtru. */
body.type-category #category-header .listSorting .listSorting__control--current::after {
    content: "" !important;
    margin-left: auto;
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-color) !important;
    -webkit-mask: url('/user/documents/assets/ui-ikony/poradi.svg') center / 18px auto no-repeat;
    mask: url('/user/documents/assets/ui-ikony/poradi.svg') center / 18px auto no-repeat;
}

/* Rozbalení: hover má Shoptet, focus-within je kvůli dotyku a klávesnici */
body.type-category #category-header .listSorting .listSorting__controls:hover,
body.type-category #category-header .listSorting .listSorting__controls:focus-within {
    overflow: visible;
}

/* Rozbalený seznam má bílé pozadí ze šablony, chybí mu jen obrys, aby se
   na bílé stránce neztratil, a šířka přes celou plochu tlačítka.
   První položka je aktivní volba (to absolutní tlačítko), ta obrys nemá. */
body.type-category #category-header .listSorting .listSorting__controls li:not(:first-child) {
    width: 100%;
    border: 1px solid var(--complementary-color);
    border-top: none;
}

body.type-category #category-header .listSorting .listSorting__controls li button:not(.listSorting__control--current) {
    width: 100%;
    height: 40px;
    padding: 0 16px;
}

/* Šablona dává poslednímu řádku 5 px pod text, takže byl o kus vyšší */
body.type-category #category-header .listSorting .listSorting__controls li:last-child {
    padding-bottom: 0;
}


/** --- Mobil (do 768 px): dvojice 50/50 ------------------------------------ */
/* Obal kategorie je flexbox se zalamováním, takže stačí oběma prvkům dát
   stejný podíl. V HTML je řazení první, proto order.
   column-gap působí jen mezi sousedy v řádku – výpis produktů pod nimi
   i ovládání stránkování jsou samostatné řádky a mezera se jich netýká. */
/* Hranice je 767.98, ne 767: u zmenšeného okna vychází šířka rozvržení
   nezaokrouhleně (např. 767,33 px) a při „max-width: 767px“ by pravidla
   na hranici vypadla — ověřeno matchMedia přímo na stránce. */
@media (max-width: 767.98px) {
    body.type-category .category-content-wrapper {
        column-gap: 10px;
    }

    body.type-category .category-content-wrapper #filters-wrapper {
        /* Záporně, ne 1 a 2: výpis produktů i ovládání stránkování mají
           výchozí order 0, takže při kladných hodnotách skončil celý řádek
           pod výpisem. */
        order: -2;
        /* Podíl musí být zapsaný v procentech, ne jako 1 1 0. Zalomení řádku
           flexbox počítá z flex-basis PŘED smrštěním: s nulovým základem by
           se oběma tlačítkům i celý výpis produktů „vešly“ do jednoho řádku
           a tlačítka by se smrskla na šířku ikony. */
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        /* Šablona má vpravo 40 px, kvůli kterým by dvojice nebyla symetrická */
        margin: 20px 0 !important;
    }

    body.type-category .category-content-wrapper #category-header {
        order: -1;
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        margin: 20px 0;
    }

    body.type-category #filters-wrapper .filters-wrapper,
    body.type-category #filters-wrapper .filters-unveil-button-wrapper {
        width: 100%;
        margin: 0 !important;
    }

    body.type-category #category-header .listSorting {
        flex: 1 1 auto;
        width: 100%;
    }
}

/** --- Od tabletu výš: ŘAZENÍ na pravý kraj -------------------------------- */
/* Řazení má pevnou šířku, aby se netáhlo přes celý řádek, a auto margin ho
   odsune doprava. Zbytek řádku patří tlačítku FILTROVAT (jen od 1201 px);
   pod tím zůstane řazení samo vpravo.
   Auto margin, ne justify-content: řádek patří šabloně a ta si ho může
   přenastavit, kdežto margin na samé položce nemá kdo přebít. */
@media (min-width: 768px) {
    body.type-category #category-header .listSorting {
        order: 2;
        width: 220px;
        margin-left: auto;
    }
}
/** ==========================================================================
 ** VÝPIS KATEGORIÍ – jen „Načíst dalších", nic víc
 ** ==========================================================================
 ** Pod výpisem měla šablona tři ovládací prvky pod sebou: tlačítko
 ** „Načíst 9 dalších", stránkování a „Nahoru". K procházení stačí první
 ** z nich, zbylé dva jen natahovaly patu výpisu (156 px → 48 px).
 **
 ** Schovává se, nemaže: odkazy na další strany zůstávají v HTML, takže si
 ** vyhledávače pořád projdou celou kategorii.
 ** ========================================================================== */

body.type-category .listingControls .pagination,
body.type-category .listingControls .goToTop {
    display: none !important;
}

/** --- Tlačítko „Načíst další" --------------------------------------------- */
/* Šablona mu dává Arial a plnou hnědou výplň. Tady mluví stejnou řečí jako
   „Zobrazit" na kartě produktu: verzálky v našem písmu, v klidu světlá plocha
   s hnědým textem a po najetí se barvy prohodí. */
body.type-category .listingControls .loadMore__button {
    font-family: var(--template-font) !important;
    font-size: var(--text-drobny) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--primary-color) !important;
    background: var(--secondary-color) !important;
    border: 0 !important;
    transition: background .2s ease, color .2s ease;
}

/* opacity: 1 je tu kvůli šabloně – ta tlačítku při najetí nastavuje 0,7
   a hnědá se pak přes bílou stránku vyředí do bledě terakotové (naměřeno
   rgb(208, 144, 102) místo rgb(188, 97, 37)). Barvu samotnou přebít nestačí,
   protože se neředí barva, ale celý prvek. */
body.type-category .listingControls .loadMore__button:hover,
body.type-category .listingControls .loadMore__button:focus,
body.type-category .listingControls .loadMore__button:active {
    color: #fff !important;
    background: var(--primary-color) !important;
    opacity: 1 !important;
}


/** ==========================================================================
 ** KARTY PRODUKTŮ – „od" před cenou
 ** ==========================================================================
 ** Ceny na kartách jsou výchozí konfigurace, ne konečná částka – „od" to
 ** říká dřív, než zákazník otevře detail.
 **
 ** Shoptet ho sám nevypisuje (ověřeno: 0 z 22 cen ve výpisu ho mělo), takže
 ** nehrozí „od od“. Kdyby se v administraci někdy zapnuly varianty s cenou
 ** od–do, bude potřeba tohle pravidlo omezit nebo zrušit.
 **
 ** Záměrně přes .products (ne .products-block): vedle titulky a výpisu
 ** kategorie to pokryje i lištu nejprodávanějších a související zboží
 ** v detailu, aby cena nikde neříkala něco jiného. Cena v samotném detailu
 ** produktu má vlastní značkování a zůstává beze změny.
 **
 ** Velikost částky (1.125rem) řeší blok PRODUKTOVÁ KARTA výš v souboru;
 ** tady se nastavuje jen předsádka.
 ** ========================================================================== */

.products .product .price-final::before {
    content: "od";
    /* Mezera vychází ze dvou zdrojů: ~3,5 px dělá už zlom řádku před <strong>
       ve zdroji šablony, zbytek tenhle margin. Dohromady 7 px. */
    margin-right: .25em;
    font-size: .875rem;
    /* Stejný řez jako částka – liší se jen velikostí */
    font-weight: 600;
}
/** ==========================================================================
 ** HOVER DLAŽDIC KATEGORIÍ – linka po spodní hraně
 ** ==========================================================================
 ** Dlaždice dlouho neměly na najetí žádnou odezvu. Ze šesti zkoušených
 ** variant vyhrála tahle: 3px linka v meruňkové po spodní hraně. Nic se
 ** neposouvá, nemění velikost ani barvu plochy – hranatá linka sedí k webu
 ** bez zaoblení a nejsrozumitelněji říká, že jde o odkaz.
 **
 ** Kreslí se dovnitř (inset), takže nemění rozměr dlaždice ani mřížku.
 **
 ** transition potřebuje !important: blok „Dlaždice kategorií a karty produktů
 ** úplně bez přechodu“ výš v souboru vypíná přechody plošně přes
 ** transition: none !important. Povoluje se jen box-shadow, nic jiného –
 ** obrázky a posuny zůstávají bez animace, jak mají.
 **
 ** :focus-visible, ne :focus – po ťuknutí na dotyku by linka zůstala svítit,
 ** dokud by zákazník neklikl jinam.
 ** ========================================================================== */

.hp-category {
    transition: box-shadow .16s ease !important;
}

.hp-category:hover,
.hp-category:focus-visible {
    box-shadow: inset 0 -3px 0 var(--primary-color);
}
/** ==========================================================================
 ** ŠTÍTKY – text vedle ikony
 ** ==========================================================================
 ** Dřív byl štítek jen barevná plocha s kresbou uprostřed a text se odsouval
 ** pryč (text-indent: -9999px). Teď nese text i ikonu vedle sebe.
 **
 ** Kresby jsou jednobarevné SVG (assets/img/flags/), takže se obarvují maskou
 ** na ::before. Barvu bere z currentColor – stačí tedy změnit barvu textu
 ** a ikona ji převezme.
 **
 ** Mezera mezi ikonou a textem je margin na ikoně, ne gap: v detailu za text
 ** navazuje ::after s dovětkem „ocelové konstrukce“ a gap by ho odsadil
 ** stejně daleko jako ikonu, místo obyčejné mezery mezi slovy.
 **
 ** Štítky v kartách výpisu sedí nad názvem produktu, ne na fotce –
 ** z obrázku je vyndává moveProductFlags() v custom-caster-v2.js.
 ** ========================================================================== */

/** --- Tvar a plocha ------------------------------------------------------- */
.flags .flag.flag-dozivotni-zaruka,
.flags .flag.flag-vyrabime-na-miru {
    display: inline-flex;
    align-items: center;
    /* Šablona dává štítkům pevnou šířku a výšku kvůli kresbě na pozadí */
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 12px !important;
    font-family: var(--template-font);
    font-size: .875rem !important;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-indent: 0 !important;
    /* Hranaté jako zbytek webu – přebíjí i zaoblení, které tu bylo dřív */
    border-radius: 0 !important;
    background-image: none !important;
}

/** --- Ikona --------------------------------------------------------------- */
.flags .flag.flag-dozivotni-zaruka::before,
.flags .flag.flag-vyrabime-na-miru::before {
    content: "";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-right: 8px;
    background-color: currentColor;
    -webkit-mask: var(--ikona) no-repeat center / contain;
    mask: var(--ikona) no-repeat center / contain;
}

/** --- Barvy --------------------------------------------------------------- */
/* Inline background-color, které štítkům vkládá Shoptet, přebíjí !important */
.flags .flag.flag-dozivotni-zaruka {
    --ikona: url("/user/documents/assets/img/flags/zaruka.svg");
    background-color: #4b5d9d !important;
    color: var(--secondary-color) !important;
}

.flags .flag.flag-vyrabime-na-miru {
    --ikona: url("/user/documents/assets/ui-ikony/na-miru.svg");
    background-color: #e5c84d !important;
    color: var(--primary-color) !important;
}

/** --- Detail produktu: delší znění záruky --------------------------------- */
/* V administraci je štítek pojmenovaný krátce, aby se vešel do karty.
   V detailu je místa dost, tak se dovětek dopisuje tady. Kdyby se štítek
   někdy přejmenoval na dlouhý název, tohle jediné pravidlo se smaže.
   Na začátku je pevná mezera (\00a0), ne obyčejná: štítek je inline-flex,
   dovětek je v něm samostatná položka a obyčejnou mezeru na jejím začátku
   prohlížeč zahodí – vycházelo „zárukaocelové“. */
.p-detail .flags .flag.flag-dozivotni-zaruka::after {
    content: "\00a0ocelové konstrukce";
}

/** --- Karta ve výpisu: menší a bez dovětku -------------------------------- */
.products-block .flags .flag.flag-dozivotni-zaruka,
.products-block .flags .flag.flag-vyrabime-na-miru {
    padding: 5px 9px !important;
    /* Štítky jsou o stupeň menší než drobná sada schválně: sedí na kartě
       široké 155 px na mobilu, kde by 14 px text zabral celou šířku. */
    font-size: .75rem !important;
}

.products-block .flags .flag.flag-dozivotni-zaruka::before,
.products-block .flags .flag.flag-vyrabime-na-miru::before {
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

/** --- Řádek štítků nad názvem --------------------------------------------- */
/* Ve fotce byly absolutně umístěné; po přesunu nad název jsou v běžném toku.
   Zalamování je kvůli mobilu: na kartě kolem 155 px se dva štítky vedle sebe
   nevejdou a musí jít pod sebe. */
.products-block.products .product .flags,
.products-block.products .product .flags.flags-default {
    position: static !important;
    /* !important kvůli šabloně: pod 797 px štítky v kartě schovává, protože
       počítá s tím, že sedí na fotce a tam by překážely. Nad názvem místo mají. */
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0 !important;
    padding: 0;
    /* Carbon drží obal štítků na max-width: 50 %, aby se ve fotce vlezl vedle
       ceny. V řádku nad názvem by kvůli tomu štítky zbytečně padaly pod sebe. */
    width: auto;
    max-width: none !important;
}

/* Šablona dává každému štítku margin 0 10px 8px 0, který by se sčítal
   s mezerou mřížky – v kartě drží odstup jen gap. V detailu produktu
   margin zůstává, tam dělá mezeru 10 px a sedí. */
.products-block.products .product .flags .flag {
    margin: 0 !important;
}

/* Štítek „Pouze pro betonový strop“ je skrytý (hlášku místo něj vypisuje
   custom-caster-v2.js v detailu), ale jako prázdná flex položka by si bral
   mezeru v řádku. */
.flags .flag.flag-pouze-pro-betonovy-strop {
    display: none !important;
}


/** ==========================================================================
 ** TITULKA – rytmus kolem prohozených sekcí
 ** ==========================================================================
 ** Pořadí sekcí je recenze → kategorie → videa → novinky
 ** (skládá je initWorkVideos() a initCategoriesSection() v custom-caster-v2.js).
 **
 ** Barevný pás mají recenze a videa, mezi nimi jsou kategorie na bílé.
 ** Recenzím se musí dorovnat spodní odsazení: jejich mřížka končí přesně na
 ** hraně obalu a dokud pod nimi pokračoval pás ve stejné barvě, nevadilo to –
 ** proti bílým kategoriím by se ale karty o hranu opíraly. Nahoře ho drží
 ** odsazení nadpisu, takže barva dýchá z obou stran stejně.
 **
 ** Pod videi následují rovnou novinky; odstup drží odsazení jejich nadpisu,
 ** stejně jako mezi ostatními sekcemi.
 ** ========================================================================== */

.hp-reviews-wrapper {
    padding-bottom: var(--sekce-odsazeni) !important;
}
/** ==========================================================================
 ** ČLÁNKY NA TITULCE – jediné závazné místo
 ** ==========================================================================
 ** Pravidla pro tuhle sekci byla ve třech blocích, které se navzájem
 ** přebíjely – proto se chovala pokaždé jinak. Tenhle blok ji popisuje celou.
 **
 ** Karusel vypíná a články ořezává zrusKaruselNovinek() v custom-caster-v2.js,
 ** takže ve wrapperu zůstanou tři nejnovější a nic víc. Pravidla proto nikde
 ** nepočítají pořadí ani nerozlišují klony – jediné, co se tu ještě schovává,
 ** je třetí článek na užších obrazovkách.
 **
 ** Počty článků: desktop 3 vedle sebe, tablet a mobil 1.
 ** ========================================================================== */

/** --- Obal a šířka -------------------------------------------------------- */
/* .content-inner uvnitř .hp-news už drží max-width 1640 a padding 0 15px,
   tedy stejných 1610 px obsahu jako zbytek stránky. Vlastní omezení na
   .hp-news by se s ním zdvojilo, proto se ruší. */
.hp-news {
    max-width: none !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: var(--sekce-odsazeni) !important;
}

/* Obal článků měl ze šablony margin 0 -20px a přesahoval o 40 px */
.hp-news #newsWrapper,
.hp-news .news-wrapper {
    margin: var(--sekce-mezera) 0 0 !important;
    width: auto !important;
    max-width: none !important;
}

.hp-news .listingControls {
    display: none !important;
}

/* Šablona pod články vykresluje vlastní odkaz „Zobrazit vše" na ten samý
   výpis jako naše tlačítko – jinak by tam byly dva pod sebou. */
.hp-news .show-all {
    display: none !important;
}

/** --- Nadpis a podnadpis -------------------------------------------------- */
/* Podnadpis vypisuje šablona uvnitř <h1>; když ho nepošle, doplní ho
   doplnPodnadpisNovinek() na stejné místo. Vzhled i skrytí na mobilu tak
   drží společné pravidlo pro .section-desc jako u ostatních sekcí. */
.hp-news .sectionDescription {
    margin-bottom: 6px !important;
    text-align: center;
}

.hp-news h1, .hp-news .nadpis-z-h1 {
    font-size: var(--sekce-nadpis) !important;
    font-weight: 600;
    line-height: 1.2;
    padding-top: var(--sekce-odsazeni-nahoru) !important;
    margin: 0 !important;
}


/** --- Mřížka -------------------------------------------------------------- */
/* Po vypnutí karuselu leží .news-item rovnou ve wrapperu. Varianta pro
   .slick-track je tu jen jako pojistka, kdyby se karusel vrátil. */
.hp-news .news-wrapper,
.hp-news .news-wrapper .slick-track {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mrizka-mezera);
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    float: none !important;
}

.hp-news .news-wrapper .slick-list {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
}

/* slick.css má na tracku clearfix ::before/::after – v gridu by se z nich
   staly položky mřížky a články by se posunuly o jednu doprava. */
.hp-news .news-wrapper .slick-track::before,
.hp-news .news-wrapper .slick-track::after {
    display: none !important;
    content: none !important;
}

/* Se .news-wrapper v selektoru: šablona má na kartě článku vlastní
   display s !important a bez něj by naše pravidlo prohrálo – na užších
   obrazovkách pak zmizely všechny články najednou. */
.hp-news .news-wrapper .news-item {
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column;
    text-align: left !important;
}

/* Ovládání karuselu, kdyby se přece jen vykreslilo. Články ani klony se
   neskrývají – zrusKaruselNovinek() je rovnou maže z DOM. */
.hp-news .slick-arrow,
.hp-news .slick-dots {
    display: none !important;
}

/** --- Náhled článku ------------------------------------------------------- */
/* Rozměry náhledu (pevná výška 275 px, obrázek vycentrovaný) dává šablona –
   vlastní okno 4:3 je od 5. vlny pryč. Přibližování při najetí ruší
   blok 2b nahoře. */

/** --- Text článku --------------------------------------------------------- */
/* Bez vodorovného odsazení – nadpis i perex začínají u okraje fotky.
   Šablona na tabletu a mobilu přidávala 20 px z obou stran, takže text
   neseděl pod fotkou. */
.hp-news .news-item .text {
    padding-top: 14px;
    text-align: left !important;
}

.hp-news .news-wrapper .news-item .text {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Nadpis vždy na dvou řádcích – jednořádkový si výšku dorovná, takže perex
   i spodek karty začínají u všech článků na stejné úrovni. */
.hp-news .news-item .text .title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 2.7em !important;
    line-height: 1.35 !important;
    margin: 0 0 10px !important;
    text-align: left !important;
}

/* Šablona má na perexu line-clamp: 5, proto stejný selektor s !important */
.hp-news .news-wrapper .news-item .text .description {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}

/* Odkaz „Číst článek" je zbytečný – klikací je fotka i nadpis */
.hp-news .news-item .read-more {
    display: none !important;
}

/** --- Tlačítko „Zobrazit více" -------------------------------------------- */
.hp-news__more {
    display: flex;
    justify-content: center;
    margin-top: var(--sekce-mezera);
}

.hp-news__more-btn {
    font-family: var(--template-font);
    font-size: var(--text-drobny);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none !important;
    color: var(--primary-color) !important;
    background: var(--secondary-color);
    padding: 14px 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--prechod-tlacitka) !important;
}

.hp-news__more-btn:hover,
.hp-news__more-btn:focus {
    color: #fff !important;
    background: var(--primary-color);
}

/** --- Tablet: jeden článek jako na mobilu --------------------------------- */
/* Dva články vedle sebe se na tabletu mačkaly – nadpis se lámal po slovech
   a z perexu zbylo pár slov. Tablet má proto stejnou podobu jako mobil:
   jeden článek, fotka nahoře, pod ní nadpis a perex. Karta je ale široká
   nejvýš 560 px a stojí na středu – přes celou šířku tabletu by fotka 4 : 3
   měla až 970 × 728 px. Telefon je užší než 560 px, takže tam karta vyplní
   celou šířku sama; vlastní pravidlo pro mobil proto nepotřebuje. */
@media (max-width: 1200px) {
    .hp-news .news-wrapper,
    .hp-news .news-wrapper .slick-track {
        grid-template-columns: minmax(0, 560px);
        justify-content: center;
    }

    .hp-news .news-wrapper .news-item:nth-child(n+2) {
        display: none !important;
    }
}

@media (max-width: 797px) {
    .hp-news h1, .hp-news .nadpis-z-h1 {
        font-size: 20px !important;
    }

}
/** ==========================================================================
 ** LIŠTA VÝHOD
 ** ==========================================================================
 ** Kresba vlevo, text vedle ní, celé v brandové hnědé – žádné barevné plochy.
 **
 ** Kresby jsou naše (assets/img/flags/), ne ty z administrace: ty mají každá
 ** jiný poměr stran i ořez a v řadě vedle sebe nedrží linku. Obarvují se
 ** maskou přes currentColor, takže barvu celé položky stačí určit jednou.
 **
 ** Kterou kresbu výhoda dostane, rozhoduje třída, kterou jí přidá
 ** stylujBenefity() v custom-caster-v2.js podle jejího názvu. Výhodě, kterou
 ** se přiřadit nepovede, zůstane obrázek z administrace tak, jak je.
 **
 ** Hierarchie písma: název je základní velikost v polotučném řezu, upřesnění
 ** pod ním drobná – tedy stejné dva stupně, na kterých stojí zbytek titulky.
 ** Na mobilu jde obojí o stupeň dolů, protože dlaždice je tam poloviční.
 ** ========================================================================== */

/** --- Položka -------------------------------------------------------------- */
/* Barva položky slouží jen kresbě – ta se obarvuje maskou přes currentColor.
   Texty si berou vlastní barvu níž. */
.benefitBanner.position--benefitHomepage .benefitBanner__item {
    padding: 0 !important;
    background: none !important;
    color: var(--primary-color);
}

/** --- Kresba --------------------------------------------------------------- */
.benefitBanner__item.je-zaruka {
    --vyhoda-ikona: url("/user/documents/assets/img/flags/zaruka.svg");
}

.benefitBanner__item.je-na-miru {
    --vyhoda-ikona: url("/user/documents/assets/ui-ikony/na-miru.svg");
}

.benefitBanner__item.je-montaz {
    --vyhoda-ikona: url("/user/documents/assets/ui-ikony/montaz.svg");
}

.benefitBanner__item.je-v-cesku {
    --vyhoda-ikona: url("/user/documents/assets/ui-ikony/srdce.svg");
}

/* Kresba nese sdělení dřív než text, takže je výrazně větší než řádek vedle ní
   – zhruba dva a půl jeho výšky. Rám je čtvercový a pevný, aby kresby držely
   stejnou velikost bez ohledu na svůj poměr stran. */
.benefitBanner.position--benefitHomepage .benefitBanner__picture {
    width: 44px !important;
    height: 44px !important;
}

/* Obrázek z administrace se schová a na jeho místo se vykreslí naše kresba.
   Bez přiřazené třídy zůstane vidět původní. */
.benefitBanner.position--benefitHomepage .benefitBanner__item[class*="je-"] .benefitBanner__img {
    visibility: hidden;
}

.benefitBanner.position--benefitHomepage .benefitBanner__item[class*="je-"] .benefitBanner__picture::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    -webkit-mask: var(--vyhoda-ikona) no-repeat center / contain;
    mask: var(--vyhoda-ikona) no-repeat center / contain;
}

/** --- Texty ---------------------------------------------------------------- */
/* Černá jako zbytek běžného textu na webu – barvu nese jen kresba vedle nich. */
.benefitBanner.position--benefitHomepage .benefitBanner__title,
.benefitBanner.position--benefitHomepage .benefitBanner__data {
    color: var(--text-color) !important;
}

.benefitBanner.position--benefitHomepage .benefitBanner__title {
    font-size: var(--text-zakladni) !important;
    font-weight: 600;
    line-height: 1.25;
}

.benefitBanner.position--benefitHomepage .benefitBanner__data {
    font-size: var(--text-drobny) !important;
    font-weight: 400;
    line-height: 1.3;
    /* Upřesnění pod názvem má být tišší, ale pořád čitelné */
    opacity: .8;
}

/** --- Tablet a mobil ------------------------------------------------------- */
/* Dva sloupce drží mřížka výš v souboru; tady se jen srazí kresba, aby proti
   kratšímu řádku textu nepůsobila předimenzovaně. */
@media (max-width: 1200px) {
    .benefitBanner.position--benefitHomepage .benefitBanner__picture {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Dlaždice je na mobilu široká kolem 165 px. Kresba i text tu proto jdou
   o stupeň dolů – jinak by na řádek zbylo tak málo místa, že by se název
   lámal po jednom slově. */
@media (max-width: 797px) {
    .benefitBanner.position--benefitHomepage .benefitBanner__picture {
        width: 32px !important;
        height: 32px !important;
    }

    .benefitBanner.position--benefitHomepage .benefitBanner__title {
        font-size: var(--text-drobny) !important;
    }

    /* Upřesnění pod názvem stejně velké (14 px – nejmenší čtený text),
       tišší ho dělá průhlednost */
    .benefitBanner.position--benefitHomepage .benefitBanner__data {
        font-size: var(--text-drobny) !important;
    }
}
/** ==========================================================================
 ** HORNÍ BANNERY – bez karty
 ** ==========================================================================
 ** Bannery stojí přímo na bílé stránce – bez rámečku, podkladu a stínu.
 ** Kresba za bannery (bg-hp-top.svg) je zrušená, karta, která bannery
 ** z kresby zvedala, proto taky.
 **
 ** Na řádku zůstává jen proměnná, ze které žije mezera mezi bannery
 ** (20 px, od 1200 px dolů 12 px), a odsazení shora.
 ** ========================================================================== */

.row.banners-row {
    --top-banners-gap: 20px;

    margin-top: 20px !important;
}

/* Mezera se od tabletu dolů zmenšuje, odsazení shora se naopak zvětšuje –
   hlavička je na užším okně blíž a bannery by se na ni lepily. */
@media (max-width: 1200px) {
    .row.banners-row {
        --top-banners-gap: 12px;
    }
}

@media (min-width: 798px) and (max-width: 1200px) {
    .row.banners-row {
        margin-top: 40px !important;
    }
}

@media (max-width: 797px) {
    .row.banners-row {
        margin-top: 80px !important;
    }
}
/** ==========================================================================
 ** KATEGORIE – text a filtry v duchu titulky
 ** ==========================================================================
 ** Výpis kategorie si nesl vzhled ze šablony: čtrnáct různých velikostí písma
 ** a filtry poskládané z rámečků a šedých ploch, které se jinde na webu
 ** nevyskytují. Tenhle blok je srovnává na to, co používá titulka.
 **
 ** Stupně písma jsou čtyři a všechny už v souboru existují:
 **   nadpis stránky   --sekce-nadpis   36 px / 600
 **   nadpis bloku     --text-vyrazny   18 px / 600
 **   běžný text       --text-zakladni  16 px
 **   drobnosti        --text-drobny    14 px
 ** Pátý stupeň (0,75 rem) nese jen počet u filtru – je to údaj ke štítku,
 ** ne samostatný text.
 **
 ** Nadpisy skupin ve filtru jsou o stupeň níž než nadpisy bloků v obsahu:
 ** v 300px sloupci by osmnáctka přebila samotné štítky.
 ** ========================================================================== */

/** --- Drobečková navigace -------------------------------------------------- */
/* Šedou #fafafa nahrazuje brandová béžová (--tertiary-color), stejná jako pás
   kontaktního banneru. Šablona měla odsazení 20/20/10, což lištu tlačilo
   k hlavičce a text v ní seděl nakřivo – teď je symetrické. Lišta je střední
   (14 px nad i pod textem, celkem ~49 px), aby nad obsahem stránky nepřevažovala.
   Selektor vypadá zbytečně složitě, ale není: šablona si obojí drží vlastním
   !important se stejnou vahou jako .breadcrumbs-wrapper.container, takže ho
   přebíjí až o stupeň těžší zápis. body[class] ten stupeň dodá a přitom platí
   na všech typech stránek – tělo má třídu vždycky. */
body[class] .breadcrumbs-wrapper.container {
    background: var(--secondary-color) !important;
    padding: 14px 20px !important;
}

/* Šablona vnitřek lišty vytahuje o 10 px nahoru (margin-top: -10px), takže
   text seděl mimo střed. Odsazení lišty je symetrické, tak ať je symetrický
   i výsledek. */
body[class] .breadcrumbs-wrapper.container .breadcrumbs {
    margin: 0 !important;
}

/* Na desktopu mají odkazy a poslední položka ze šablony vlastní padding
   10 px shora i zdola, na mobilu ne – lišta pak byla na desktopu o 20 px
   vyšší (59 místo 41 px). Svislé odsazení nese jen lišta, vodorovné
   (mezera kolem šipek) zůstává šabloně. */
body[class] .breadcrumbs-wrapper.container .breadcrumbs > span > a,
body[class] .breadcrumbs-wrapper.container .breadcrumbs > span > span[itemprop="name"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Samotné pozadí lišty nestačí: šedý pruh kreslí šablona pseudoelementem přes
   celou šířku okna (position: absolute, width: 100vw, z-index: -1), který leží
   nad ním. Na mobilu a tabletu ho šablona nepoužívá – proto tam béžová prošla
   a na desktopu ne. */
body[class] .breadcrumbs-wrapper.container::before {
    background: var(--secondary-color) !important;
}

/** --- Nadpisy -------------------------------------------------------------- */
body.type-category .category-title {
    font-size: var(--sekce-nadpis) !important;
    font-weight: 600;
    line-height: 1.2;
}

/** --- Text kategorie ------------------------------------------------------- */
/* Popis kategorie plave na 15 px, tučné pasáže na 15/700 – obojí jde na
   základní velikost. Řádkování je vyšší, protože jde o souvislý text,
   ne o popisky v kartě. */
body.type-category .category-perex,
body.type-category .category-perex p,
body.type-category .category-perex li,
body.type-category .category-perex strong {
    font-size: var(--text-zakladni) !important;
    line-height: 1.6;
}

/* Nadpisy uvnitř popisu i nad blokem produktů. Musí být až za předchozím
   pravidlem, jinak by je přebilo. */
body.type-category .products-top-header,
body.type-category .category-perex h2,
body.type-category .category-perex h3,
body.type-category .category-perex h4 {
    font-size: var(--text-vyrazny) !important;
    font-weight: 600 !important;
    line-height: 1.3;
}

/* Karty v bloku „Nejprodávanější" měly vlastní velikosti (15,4/400 a 14/400),
   zatímco na titulce mají 16/500 a 14/600. Tady se dorovnávají. */
body.type-category .products-top-wrapper .product .name span,
body.type-category .products-top-wrapper .product .name {
    font-size: var(--text-zakladni) !important;
    font-weight: 500 !important;
}

/* Barva i řez jako u karet ve výpisu – ty si hnědou berou z bloku karet,
   sem ale nedosáhne, protože lišta nejprodávanějších nemá třídu
   .products-block. */
body.type-category .products-top-wrapper .product .price-final,
body.type-category .products-top-wrapper .product .price-final strong {
    font-size: var(--text-drobny) !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
}

/** --- Řazení --------------------------------------------------------------- */
body.type-category #category-header .listSorting button {
    font-size: var(--text-drobny) !important;
}

/** --- Filtry: nadpisy skupin ----------------------------------------------- */
/* Přes #filters, ne přes .box-filters – šablona nastavuje velikost pravidlem
   s id a samotné třídy ho nepřebijí. */
body.type-category #filters h4,
body.type-category #filters h4 span {
    font-size: var(--text-zakladni) !important;
    font-weight: 600 !important;
    color: var(--text-color) !important;
}

/** --- Filtry: štítky -------------------------------------------------------- */
/* Béžová plocha (#F9E7DD = --tertiary-color) a hnědý text (--primary-color).
   Rámeček se ukáže jen při najetí – jinak je průhledný, ne nulový, takže se
   štítek při najetí nikam neposune. Šablona i dřívější verze tohohle bloku
   štítky barvily jinak (střídání šesti pastelových ploch, zelený přetah
   a fajfka u vybrané možnosti) – vše je pryč.

   Vybraná možnost se obrací: hnědá plocha a světlý text, stejně jako
   dvojice tlačítek FILTROVAT / ŘAZENÍ. Jinak by nebylo poznat, co je
   zaškrtnuté. */
body.type-category .filter-label {
    padding: 7px 12px !important;
    font-size: var(--text-drobny) !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    background: var(--secondary-color) !important;
    border: 1px solid transparent !important;
    transition: var(--prechod-tlacitka), border-color .15s linear;
}

/* Pojistka proti výplni ze šablony, která štítek hledá přes celou cestu
   sekce filtru – těžší selektor než samotné .filter-label. */
body.type-category .filter-section fieldset > div .filter-label {
    background: var(--secondary-color) !important;
}

body.type-category .filter-label:hover {
    border-color: var(--primary-color) !important;
}

body.type-category .filters input[type="checkbox"]:checked + .filter-label,
body.type-category .filters input[type="radio"]:checked + .filter-label {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Zelený přetah (::before) a fajfka v rohu (::after) ze šablony */
body.type-category .filter-label::before,
body.type-category .filter-label::after {
    display: none !important;
}

/* Počet produktů u možnosti: číslo hned za názvem, ve stejné barvě jako
   text štítku – hnědé na béžové, u vybrané možnosti #FDEBE9 na hnědé.
   Šablona ho kreslila jako samostatnou plošku u pravé hrany štítku
   (32 px odsazení vpravo). */
body.type-category .filter-count {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin-left: .4em !important;
    padding: 0 !important;
    background: none !important;
    color: var(--primary-color) !important;
    font-size: .75rem !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

body.type-category .filters input:checked + .filter-label .filter-count {
    color: #fff !important;
}

/** --- Podkategorie jako dlaždice z titulky ---------------------------------- */
/* Značkování i vzhled dlaždic jsou sdílené s titulkou (překresluje je
   prekresliPodkategorie() v custom-caster-v2.js). Tady se mění jen odsazení:
   na titulce je mřížka samostatná sekce a nese odstup celé sekce, uvnitř
   obsahu kategorie by z toho byla díra. */
body.type-category .hp-categories {
    margin-top: 24px !important;
    padding-bottom: 0 !important;
}

/** --- Filtry: cenové posuvníky --------------------------------------------- */
body.type-category .slider-header {
    font-size: var(--text-drobny) !important;
}

body.type-category #slider {
    height: 3px !important;
    background: var(--complementary-color) !important;
}

/* Táhla byla bílé čtverce 24 px s kresbou uvnitř. Tady jsou to plné hnědé
   čtverečky – drží se rozsahu, který mají pod sebou, a nic navíc nekreslí. */
body.type-category #slider.ui-slider .ui-slider-handle {
    width: 14px !important;
    height: 14px !important;
    top: -6px !important;
    margin-left: -7px !important;
    background: var(--primary-color) !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
/** ==========================================================================
 ** KATEGORIE – filtry na vyžádání (od 768 px)
 ** ==========================================================================
 ** Postranní panel s filtry je ve výchozím stavu zavřený – do výpisu se
 ** tak vejde o sloupec víc. Otevírá (a zase zavírá) ho tlačítko FILTROVAT
 ** vlevo nad výpisem. Tlačítko vkládá initFiltrovatDesktop()
 ** v custom-caster-v2.js a přepíná třídu .filtry-otevrene na <body>.
 **
 ** Zavřený je výchozí stav přímo tady, ne až po spuštění JS – jinak by
 ** stránka při načtení poskočila z otevřeného panelu na zavřený.
 **
 ** Hranice je 768 px, ne 1201: šablona od 768 px výš vypíná svoje vysouvací
 ** tlačítko (#filters-wrapper) a panel nechává stát vedle výpisu. Mezi 768
 ** a 1200 px tak dřív vznikl mezistav – panel viděl, tlačítko nikde a nebylo
 ** čím ho zavřít. Teď se chová celý ten rozsah stejně jako široké okno.
 **
 ** Sloupce podle šířky okna a stavu panelu:
 **   od 1201 px   zavřeno 4 karty, otevřeno 3
 **   768–1200 px  zavřeno 3 karty, otevřeno 2
 ** Šířka se počítá z procent minus 20 px, což je vodorovný margin karty
 ** (2× 10 px) – stejné číslo drží i mobilní dvojice o kus výš v souboru.
 **
 ** Pod 768 px zůstává podoba ze šablony: panel otevírá její vysouvací
 ** tlačítko v dvojici FILTROVAT / ŘAZENÍ.
 ** ========================================================================== */

/** --- „, Strana 2" v nadpisu ----------------------------------------------- */
/* Šablona ho dopisuje do H1 při stránkování. Do nadpisu kategorie nepatří,
   navíc se objeví až po „Načíst další". Je to vlastní element, takže stačí
   schovat – text nadpisu zůstane netknutý pro vyhledávače. */

/** --- Počet položek -------------------------------------------------------- */
body.type-category #category-header .listItemsTotal {
    display: none !important;
}

@media (min-width: 768px) {
    /** --- Panel s filtry: zavřený, dokud se neklikne -------------------- */
    /* Sbaluje se šířkou, ne display: none. Filtry totiž Shoptet po načtení
       teprve přesouvá ze skrytého #filters-wrapper do panelu a na neviditelný
       cíl je nepřesune – zůstaly by dole ve výpisu jako rozbalovací tlačítko
       z mobilu. Se šířkou 0 panel v layoutu nic nezabírá, ale pro skript
       je pořád vidět. */
    body.type-category .sidebar-left {
        width: 0 !important;
        padding: 0 !important;
        /* Odsazení od výpisu má smysl jen u otevřeného panelu; u sbaleného
           by posunulo celý obsah o 30 px doprava proti nadpisu a drobečkům. */
        margin-right: 0 !important;
        overflow: hidden !important;
    }

    body.type-category.filtry-otevrene .sidebar-left {
        width: 300px !important;
        margin-right: 30px !important;
        overflow: visible !important;
    }

    /* Obsah si od šablony bere pevnou šířku, ve které je panel započítaný
       (100 % − 330 px). Se sbaleným panelem by po něm zůstala díra, proto ať
       si šířku bere z toho, co zbude – přesně jak to šablona dělá sama nad
       1200 px. */
    body.type-category .content-wrapper-in #content {
        flex: 1 1 auto !important;
        width: auto !important;
    }

    /* Panel jede se stránkou, aby byl při procházení výpisu pořád po ruce.
       Výška je omezená na okno a zbytek si panel odroluje sám – rozbalené
       filtry jsou vyšší než obrazovka.
       Odsazení 110 px drží místo pro hlavičku, která se při odrolování
       přilepí k hornímu okraji. */
    body.type-category.filtry-otevrene .sidebar-inner {
        position: sticky;
        top: 110px;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
    }

    /* Bez tohohle by lepení nefungovalo: obal stránky má overflow: hidden,
       což z něj dělá posuvný kontejner, a sticky se pak lepí k němu místo
       k oknu – panel prostě odjede pryč (ověřeno, po odrolování o 1200 px
       byl na -1012 px). clip ořízne přetékající obsah stejně jako hidden,
       ale posuvný kontejner z prvku neudělá. */
    body.type-category .overall-wrapper {
        overflow: clip;
    }

    /** --- Tlačítko FILTROVAT -------------------------------------------- */
    /* Stejná plocha i barvy jako u mobilní dvojice FILTROVAT / ŘAZENÍ. Vlevo
       ho drží order: 0, doprava řazení odsune jeho vlastní auto margin.
       Barvy potřebují !important – šablona si na tlačítka v hlavičce výpisu
       sahá vlastními pravidly. Podoba je jedna pro oba stavy: že jsou filtry
       otevřené, je vidět na panelu vedle výpisu, takže přebarvování tlačítka
       by byl jen další stav navíc. */
    /* Řádek se nesmí zalomit. Po zalomení odsune auto margin ŘAZENÍ samo
       doprava a z dvojice je schod – vidět to je při silném přiblížení, kdy
       se s otevřeným panelem na řádek dvakrát 220 px nevejde. Obě tlačítka
       proto smí zmenšit (flex-shrink), místo aby se zalomila. */
    body.type-category #category-header {
        flex-wrap: nowrap;
    }

    body.type-category #category-header .listSorting {
        flex: 0 1 220px !important;
        min-width: 0;
    }

    body.type-category #category-header .filtry-tlacitko {
        display: flex;
        align-items: center;
        gap: 10px;
        order: 0;
        flex: 0 1 220px;
        min-width: 0;
        height: 46px;
        padding: 0 16px;
        border: 0;
        background: var(--primary-color) !important;
        color: #fff !important;
        font-family: var(--template-font);
        font-size: .875rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .3px;
        cursor: pointer;
        /* Při zmenšení se má utáhnout plocha, ne zalomit nápis. */
        white-space: nowrap;
    }

    body.type-category #category-header .filtry-tlacitko::after {
        content: "";
        margin-left: auto;
        /* Kresba si drží rozměr i v zúženém tlačítku. */
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        background: var(--secondary-color) !important;
        -webkit-mask: url('/user/documents/assets/ui-ikony/filtr.svg') center / contain no-repeat;
        mask: url('/user/documents/assets/ui-ikony/filtr.svg') center / contain no-repeat;
    }

    /** --- Mřížka výpisu -------------------------------------------------- */
    body.type-category #products.products-page .product {
        width: calc(25% - 20px) !important;
    }

    body.type-category.filtry-otevrene #products.products-page .product {
        width: calc(33.3333% - 20px) !important;
    }
}

/* Na tabletu je o sloupec míň – čtyři karty by na 900px okně vyšly po 205 px
   a fotka by byla menší než na mobilu. */
@media (min-width: 768px) and (max-width: 1200px) {
    body.type-category #products.products-page .product {
        width: calc(33.3333% - 20px) !important;
    }

    body.type-category.filtry-otevrene #products.products-page .product {
        width: calc(50% - 20px) !important;
    }
}

/* Pod 768 px tlačítko nepatří – tam filtry otevírá vysouvací tlačítko
   ze šablony a naše by bylo druhé v řadě. */
@media (max-width: 767.98px) {
    body.type-category #category-header .filtry-tlacitko {
        display: none;
    }
}
/** ==========================================================================
 ** VYSOUVACÍ MENU – bez položky „Produkty"
 ** ==========================================================================
 ** „Produkty" není ručně zařazená položka menu, ale nadřazená kategorie,
 ** kterou Shoptet do seznamu přidává sám (li.appended-category). Ve
 ** vysouvacím menu je zbytečná: obsahuje jen Postele a Příslušenství a
 ** Postele jsou hned pod ní jako samostatná položka.
 **
 ** Jen do 1200 px. Na širokém okně je ta položka v přetékacím seznamu „Více“
 ** vedle hlavního menu, kde místo neubírá.
 ** ========================================================================== */

@media (max-width: 1200px) {
    #navigation .menu-level-1 > li.appended-category {
        display: none !important;
    }
}


/* Detail: blok „O nás" má na detailu vlastní skladbu (.pd-onas, viz blok
   DETAIL PRODUKTU – spodek stránky). Konec detailu nese jen časová osa,
   odsazení šablony pod ní (15 / 30 px .p-detail, záložky, obsah záložky)
   se vynulují a mezeru k recenzím drží jejich vlastní odsazení. */
.type-detail .p-detail {
    padding-bottom: 0 !important;
}

.type-detail .p-detail .p-detail-tabs-wrapper {
    margin-bottom: 0 !important;
}

.type-detail .p-detail #tab-content {
    padding-bottom: 0 !important;
}

.type-detail .p-detail #tab-content .tab-pane > :last-child,
.type-detail .p-detail #tab-content .description-inner > :last-child,
.type-detail .p-detail #tab-content .basic-description > :last-child {
    margin-bottom: 0 !important;
}



/* Stejně jako nadpisy ostatních sekcí (viz „Nadpisy sekcí jednotně") */

/* Rytmus textu: mezi odstavci 16 px, kolem textu (pod nadpisem a nad
   tlačítky) 24 px – nadpis i tlačítka se tak od textu zřetelně oddělí. */







/* Fotky mají každá jiný poměr stran (na šířku i na výšku) – rám 4:3 je
   srovná a přebytek se ořízne od středu. */

/* Třetí fotka má to podstatné nahoře */

@media (max-width: 946px) {
    
    
    /* Na střed jen nadpis a tlačítka – prostý text zůstává vlevo */
    
    }

@media (max-width: 797px) {
    /* Nadpis 20 px jako všechny nadpisy sekcí na mobilu (blok M2) */
    
    /* Obě tlačítka v jednom řádku, stejně široká – s odsazením 30 px se
       nevešla vedle sebe a každé viselo na středu jinak široké. Odsazení
       jako u tlačítka „Zobrazit" na mobilu. */
    
    
    /* Carbon dává novinkám na mobilu padding-bottom 35 px navíc k jejich
       margin-bottom – nad touto sekcí tak bylo 71 px, pod ní 36 px. */
    .hp-news {
        padding-bottom: 0 !important;
    }
}


/** ==========================================================================
 ** KATEGORIE – recenze bez barvy + kontaktní banner pod nimi
 ** ==========================================================================
 ** Banner „Potřebujete poradit s výběrem?" vkládá na stránku kategorie
 ** initCategoryContactBanner() v custom-caster-v2.js. Vzhled přebírá beze
 ** změny z titulky (.footer-banners, .contact-banner).
 **
 ** Recenze mají na kategorii bílé pozadí: jejich zelený pás by se hned pod
 ** sebou tloukl s béžovým pásem banneru. Karty zůstávají bílé se stínem,
 ** stejně jako karty produktů ve výpisu nad nimi.
 **
 ** Patička dostává stejné odsazení od banneru jako na titulce
 ** (viz .in-index footer) – šablona ho jinde nedává.
 ** ========================================================================== */

.type-category .hp-reviews-wrapper {
    background: #FFFFFF;
}


/** ==========================================================================
 ** DETAIL PRODUKTU – spodek stránky
 ** ==========================================================================
 ** Popis produktu → Výroba na míru → Jak to probíhá → Recenze → Parametry
 ** → Časté otázky → O nás → Potřebujete poradit.
 ** Skládá initSpodekDetailu() v custom-caster-v3.js; menu nad popisem
 ** na bloky jen roluje (záložky se nepřepínají).
 ** ========================================================================== */

/* Bílé sekce pod popisem (obal z obalSekce() v custom-caster-v3.js):
   odstup 72 px shora nese obal, nadpis k tomu nic nepřidává. Zespodu nic –
   další sekce si odstup drží sama, poslední (O nás) má i spodní. */
.pd-sekce {
    padding: var(--sekce-odsazeni) 0 0;
}

.type-detail .pd-sekce .homepage-group-title.h4 {
    padding-top: 0 !important;
    text-align: center;
}

/* Barevné pásy (recenze zeleně, ukázky realizací béžově) jako na titulce:
   od sekce nad nimi 72 px bílé, uvnitř pásu nadpis 72 px od horní hrany
   (36 px obal + 36 px nadpis), zespodu 72 px drží pravidla z titulky. */
.type-detail .hp-reviews-wrapper,
.type-detail .hp-videos-wrapper {
    margin-top: var(--sekce-odsazeni);
    padding-top: calc(var(--sekce-odsazeni) - var(--sekce-odsazeni-nahoru)) !important;
}

.type-detail .hp-reviews-wrapper .homepage-group-title.h4,
.type-detail .hp-videos-wrapper .homepage-group-title.h4 {
    padding-top: var(--sekce-odsazeni-nahoru) !important;
}


.pd-parametry-wrapper .homepage-group-title.h4 {
    padding-top: 0 !important;
}

/* Popis přes celou šířku webu – šablona obsahu nechávala místo po boční
   liště záložek (100 % − 280 / 230 px) a textu 40 px zprava */
.type-detail .shp-tabs-wrapper .row .shp-tabs-row + div {
    width: 100%;
}

.type-detail .shp-tabs-wrapper .basic-description {
    padding-right: 0;
}

.pd-parametry {
    margin: var(--sekce-mezera) 0 0;
}

/* Tabulka jako seznam řádků ve dvou sloupcích (čte se shora dolů, pak
   druhý sloupec) – 16 parametrů tak zabere polovinu výšky. Řádek je
   název vlevo, hodnota vpravo, oddělené linkou ve světlé meruňce.
   Vysvětlivky z otazníků vkládá initSpodekDetailu() jako drobný šedý
   text pod název – tooltip na najetí myší by na mobilu nešel otevřít. */
.pd-parametry .detail-parameters {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
}

/* Dva sloupce v mřížce: řádky vedle sebe mají stejnou výšku, takže linky
   v obou sloupcích sedí na stejné úrovni i u parametrů s vysvětlivkou */
.pd-parametry .detail-parameters tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 64px;
}

.pd-parametry .detail-parameters tr {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    column-gap: 24px;
    padding: 18px 0;
    border: 0 !important;
    border-bottom: 1px solid #F9E7DD !important;
    background: none !important;
}

.pd-parametry .detail-parameters th,
.pd-parametry .detail-parameters td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    color: var(--text-color);
    background: none !important;
    border: 0 !important;
}

.pd-parametry .detail-parameters th {
    font-weight: 600;
}

.pd-parametry .row-header-label-colon {
    display: none;
}

.pd-parametry__hint {
    display: block;
    margin-top: 2px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--pd-text2);
}

.pd-parametry .detail-parameters td a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.type-detail footer {
    padding-top: 48px;
}

@media (max-width: 946px) {
    .type-detail footer {
        padding-top: 20px;
    }
}

/* Pod 992 px jeden sloupec, na mobilu název nad hodnotou */
@media (max-width: 991.98px) {
    .pd-parametry .detail-parameters tbody {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .pd-parametry .detail-parameters tr {
        grid-template-columns: 1fr;
        row-gap: 4px;
        padding: 14px 0;
    }
}

/** --- Časová osa „Jak to probíhá" (initPostup) ------------------------------
   Čtyři kroky vedle sebe, mezi čtverci s ikonami linka ve světlé meruňce.
   Poslední krok (Spíte) je cíl – plný čtverec. Na mobilu osa svisle,
   ikona vlevo a linka pod ní. */

.type-detail .pd-postup .homepage-group-title.h4 {
    padding-top: 0 !important;
    text-align: center;
}

.pd-postup__osa {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: var(--sekce-mezera) 0 0;
    padding: 0;
    list-style: none;
}

.pd-postup__krok {
    position: relative;
    margin: 0;
    text-align: center;
}

/* Linka od čtverce ke čtverci, 8 px od každého: start 50 % + 32 + 8,
   konec u dalšího čtverce o sloupec (100 % + mezera 32) dál */
.pd-postup__krok:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 31px;
    left: calc(50% + 40px);
    width: calc(100% - 48px);
    height: 2px;
    background: var(--secondary-color);
}

.pd-postup__ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid var(--tertiary-color);
}

.pd-postup__krok:last-child .pd-postup__ikona {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.pd-postup__cislo {
    display: block;
    margin-top: 16px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.type-detail .pd-postup__nazev {
    margin: 4px 0 8px !important;
    padding: 0;
    font-size: 1.25rem !important;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-color);
}

.pd-postup__text {
    max-width: 280px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pd-text2);
}

.pd-postup__termin {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .pd-postup__osa {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pd-postup__krok {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 16px;
        text-align: left;
    }

    .pd-postup__ikona {
        grid-row: 1 / span 3;
        width: 56px;
        height: 56px;
    }

    /* Svislá linka pod čtvercem až k dalšímu kroku */
    .pd-postup__krok:not(:last-child)::after {
        top: 64px;
        left: 27px;
        width: 2px;
        height: calc(100% - 48px);
    }

    .pd-postup__cislo {
        margin-top: 2px;
    }

    .pd-postup__text {
        max-width: none;
        margin: 0;
    }
}

/* Popis vložený z Wordu / webu nese vlastní písmo (Exo 2, Source Sans 3)
   přímo v atributu style – všude se vrací Amulya */
.type-detail .basic-description *,
.pd-parametry * {
    font-family: inherit !important;
}

.type-category footer {
    padding-top: 48px;
}

@media (max-width: 946px) {
    .type-category footer {
        padding-top: 20px;
    }
}


/** ==========================================================================
 ** DETAIL PRODUKTU – odsazení od drobečkové navigace
 ** ==========================================================================
 ** Detail drobečkovou navigaci má (viz blok „DROBEČKOVÁ NAVIGACE jen na
 ** kategoriích a detailu produktu" na konci souboru). Fotka dosedala přímo
 ** na béžovou lištu – odstup je stejný jako na titulce mezi hlavičkou
 ** a bannery (20 px, viz .row.banners-row).
 **
 ** Jen tam, kde jsou fotka a popis vedle sebe (od 947 px). Pod tím je nad
 ** fotkou nadpis produktu, který si odstup od lišty drží sám.
 **
 ** Pravý sloupec měl vlastní padding-top 24 px, takže nadpis začínal níž
 ** než fotka. Ruší se – nadpis i fotka teď začínají na stejné výšce.
 ** ========================================================================== */

@media (min-width: 947px) {
    body.type-product .product-top {
        margin-top: 20px !important;
    }

    body.type-product .p-detail div.col-xs-12.p-info-wrapper {
        padding-top: 0 !important;
    }
}


/** ==========================================================================
 ** DETAIL PRODUKTU – galerie
 ** ==========================================================================
 ** Náhledy bez šipek: všechny se vypíšou a zalomí do řádků, na mobilu stejně
 ** jako na desktopu. Šipky ze šablony tu stejně nic neposouvaly – posouvaly
 ** jen mobilní pás náhledů (9999em široký), který je taky pryč.
 **
 ** Náhledy jsou 4:3 a celé, jako hlavní fotka – místo šablonového čtverce
 ** 100 × 100 dostanou zmenšeninu 423 × 318 (initNahledyGalerie() v JS).
 **
 ** Na desktopu galerie jede se stránkou (.sticky-top, obal přidává JS) až
 ** do konce obsahu pravého sloupce (dnes odkaz „Zeptat se"). Sticky se
 ** zastaví na spodní hraně svého sloupce, a ta je o odsazení pravého
 ** sloupce níž, proto initGalerieDoKonceSloupce() v JS sloupci nastaví
 ** --galerie-konec = vzdálenost od posledního prvku ke spodku pravého
 ** sloupce a sloupec se o ni zkrátí.
 ** Margin, ne padding: padding sloupce drží šablona vlastním pravidlem.
 ** ========================================================================== */

.p-detail .p-thumbnails .thumbnail-prev,
.p-detail .p-thumbnails .thumbnail-next {
    display: none !important;
}

/* Šablona drží pás náhledů na pevné výšce 80 px a 45 px od krajů kvůli
   šipkám – druhý řádek náhledů by se ořízl. Spodní okraj (10 px) pryč,
   aby galerie končila spodní hranou náhledů – na desktopu pak na konci
   rolování sedí přesně vedle posledního prvku pravého sloupce. */
.p-detail .p-thumbnails {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Další fotky pod hlavní: dvě vedle sebe, každá na polovinu šířky hlavní
   fotky, 4:3 jako ona. Fotka, která je právě velká (.highlighted), se mezi
   nimi neukazuje – byla by tam dvakrát. Mezera 12 px pod hlavní fotkou
   i mezi náhledy. Skryté odkazy pro lightbox (.cbox-gal) mají display:
   none, do mřížky nevstupují. Klik otevře fotku ve zvětšení (JS). */
.p-detail .p-thumbnails-wrapper {
    margin-top: 12px !important;
}

.p-detail .p-thumbnails-inner {
    left: 0 !important;
    transform: none !important;
}

.p-detail .p-thumbnails-inner > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Clearfix šablony (::before/::after s obsahem) by v mřížce zabral první
   buňku – dřív v řádku dělal ten malý odskok náhledů zleva */
.p-detail .p-thumbnails-inner > div::before,
.p-detail .p-thumbnails-inner > div::after {
    display: none !important;
}

.p-detail .p-thumbnails a.p-thumbnail {
    width: auto !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    border: 0 !important;
    cursor: zoom-in;
}

.p-detail .p-thumbnails a.p-thumbnail.highlighted {
    display: none !important;
}

/* Fotka je celá, jako hlavní: initNahledyGalerie() v JS podstrčí
   zmenšeninu 423 × 318 (4:3), takže rám vyplní bez ořezu. contain je
   pojistka, kdyby se načetla fotka v jiném poměru.
   Šablona ji centrovala posunem (left: 50 % + translateX(-50 %)); přes
   celou šířku rámu ho nepotřebuje, a bez posunu se nemá co pohnout ani
   při najetí myší. */
.p-detail .p-thumbnails a.p-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    left: 0 !important;
    transform: none !important;
    object-fit: contain;
}

/* Obal stránky má ze šablony overflow: hidden, se kterým sticky nefunguje
   (lepí se k obalu místo k oknu). clip ořízne stejně, ale sticky nechá žít –
   stejně jako na kategorii. */
body.type-product .overall-wrapper {
    overflow: clip;
}

@media (min-width: 947px) {
    body.type-product .p-image-wrapper {
        margin-bottom: var(--galerie-konec, 0px);
    }
}


/** ==========================================================================
 ** DETAIL PRODUKTU – název, štítky, popis, konfigurátor
 ** ==========================================================================
 ** Rozestupy ze stejných proměnných jako zbytek webu:
 **   název → štítky → popis → tlačítko   --mrizka-mezera (20 px, mobil 14 px)
 **   tlačítko → první krok konfigurátoru  28 px – drží blok DETAIL PRODUKTU –
 **                                        PRAVÝ SLOUPEC na konci souboru
 ** Odstavce popisu si drží své 16 px, to je rytmus textu, ne bloků.
 ** Dřív tu bylo 35 / 31 / 26 / 25 px, každé z jiného pravidla šablony.
 **
 ** Název produktu vypadá jako nadpisy sekcí na titulce – řeší ho společné
 ** pravidlo v bloku NADPISY STRÁNEK. Tady se ruší jen jeho spodní odsazení
 ** (20 px), mezeru pod ním nese okraj štítků.
 ** ========================================================================== */

body.type-product .p-info-wrapper h1 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Štítky: mezera mezi nimi přes gap, ne marginy jednotlivých štítků
   (0 10px 8px 0 ze šablony – spodních 8 px se přičítalo k mezeře pod nimi). */
body.type-product .p-detail-info .flags {
    gap: 10px;
    margin: var(--mrizka-mezera) 0 0 !important;
}

body.type-product .p-detail-info .flags .flag {
    margin: 0 !important;
}

/* Šablona má na štítcích clearfix (::before/::after s display: table).
   Ve flexu z nich jsou neviditelné položky a gap před nimi odsouval první
   štítek o 10 px doprava. */
body.type-product .p-detail-info .flags::before,
body.type-product .p-detail-info .flags::after {
    display: none !important;
}

/* Popis lícuje s názvem – šablona ho odsazovala o 5 px zleva. */
body.type-product .p-short-description {
    padding: 0 !important;
    margin-top: var(--mrizka-mezera) !important;
}

body.type-product .p-short-description > p:first-child {
    margin-top: 0 !important;
}

body.type-product .p-short-description > p:last-of-type {
    margin-bottom: 0 !important;
}

/** --- Tlačítko „Celý popis produktu" (dřív odkaz „Detailní informace") -----
 ** Vedlejší akce, proto stejně jako „Zobrazit více" u novinek: béžová
 ** plocha, hnědé verzálky, po najetí se barvy prohodí. Šipka dolů říká,
 ** že tlačítko posouvá stránku níž, ne že otevírá novou.
 ** Výška 45 px – dost na dotyk (min. 44 px). Text i posun na záložku Popis
 ** řeší initTlacitkoPopis() v JS.
 ** ----------------------------------------------------------------------- */
.p-short-description a.p-popis-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    width: auto !important;
    margin: var(--mrizka-mezera) 0 0 !important;
    padding: 14px 24px !important;
    font-family: var(--template-font);
    font-size: var(--text-drobny) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none !important;
    color: var(--primary-color) !important;
    background: var(--secondary-color);
    cursor: pointer;
    transition: var(--prechod-tlacitka) !important;
}

/* Šipka místo šablonové šipky z fontu (ta se nevykreslovala). Barvu bere
   z textu, takže se při najetí přebarví s ním. */
.p-short-description a.p-popis-btn::after {
    content: "" !important;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    font-size: 0 !important;
    transform: none !important;
    background: currentColor !important;
    -webkit-mask: url('/user/documents/assets/ui-ikony/sipka-dolu.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/sipka-dolu.svg') center / contain no-repeat;
}

.p-short-description a.p-popis-btn:hover,
.p-short-description a.p-popis-btn:focus-visible {
    color: #fff !important;
    background: var(--primary-color);
}

.p-short-description a.p-popis-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}


/** ==========================================================================
 ** DROBEČKOVÁ NAVIGACE jen na kategoriích a detailu produktu
 ** ==========================================================================
 ** Lišta se zobrazuje jen na kategoriích a na detailu produktu, všude jinde
 ** je skrytá.
 **
 ** Lišta ale zároveň držela odstup obsahu od hlavičky – na mobilu je
 ** hlavička připevněná (position: fixed) a místo pod ní rezervoval horní
 ** okraj lišty. Bez ní by obsah zajel pod hlavičku. Stránky bez lišty proto
 ** dostávají vlastní odsazení obsahu: 20 px pod hlavičkou, stejně jako
 ** bannery na titulce.
 **
 ** Hlavičku připevňuje šablona do 767 px šířky okna (Carbon: @media
 ** max-width 767px, #header position: fixed, výška 60 px) – proto i hranice
 ** pravidla: 80 px = 60 px hlavička + 20 px mezera. (Záporný okraj nadpisu,
 ** který šablona na mobilu dávala, ruší blok „NADPISY STRÁNEK" níž.)
 **
 ** Titulka (type-index) lištu nemá a odstup si drží sama (.row.banners-row).
 ** !important – šablona si odsazení obsahu na mobilu drží vlastním.
 ** ========================================================================== */

body:not(.type-category):not(.type-product) .breadcrumbs-wrapper {
    display: none !important;
}

body:not(.type-category):not(.type-product):not(.type-index) #content-wrapper {
    padding-top: 20px !important;
}

@media (max-width: 767px) {
    body:not(.type-category):not(.type-product):not(.type-index) #content-wrapper {
        margin-top: 0 !important;
        padding-top: 80px !important;
    }
}


/** ==========================================================================
 ** NADPISY STRÁNEK – stejně jako nadpis kategorie
 ** ==========================================================================
 ** Hlavní nadpis každé stránky (stránky jako FAQ, články, detail produktu…)
 ** vypadá jako nadpis kategorie (body.type-category .category-title):
 ** 36 px (--sekce-nadpis), tloušťka 600, řádkování 1,2, barva textu webu
 ** (--text-color) – 1:1 s nadpisy sekcí na titulce.
 ** Šablona měla 38–39 px / 500, na mobilu u stránek jen 25 px.
 **
 ** Šedý pás za nadpisem stránek (#fafafa přes celou šířku okna) kreslí
 ** šablona pseudoelementem h1::before – schovává se. S ním odchází i jeho
 ** odsazení: horní okraj a padding (na mobilu −23 px / 17 px) se nulují,
 ** u stránek i spodní padding 20 px. Pod nadpisem tak zůstává 35 px jako
 ** u kategorie.
 **
 ** Titulka (type-index) má nadpisy sekcí s vlastním stylem, kategorie má
 ** svůj nadpis už nastavený – obojí se tu vynechává.
 ** ========================================================================== */

body:not(.type-index):not(.type-category) #content h1 {
    font-size: var(--sekce-nadpis) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--text-color) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body:not(.type-index):not(.type-category) #content h1::before {
    display: none !important;
}

body.type-page #content h1 {
    padding-bottom: 0 !important;
}


/** ==========================================================================
 ** KONTAKTY – stránka /kontakty/
 ** ==========================================================================
 ** HTML stránky je v administraci (Stránky → Kontakty), předloha je
 ** v poznamky/kontakty-stranka.html. Třídy .kontakt-* jsou jen tady.
 **
 ** Stejná řeč jako zbytek webu:
 **   – box „Potřebujete poradit" jako „Chcete atypický rozměr" v detailu
 **     produktu: béžová plocha, čtvercová fotka vlevo s lemem 8 px,
 **   – ostatní bloky jsou bílé karty s tenkým béžovým rámečkem,
 **   – nadpisy 21 px / 600, text 16 px (--text-zakladni), mezery mezi
 **     kartami 20 px (--mrizka-mezera).
 ** ========================================================================== */

.kontakt h2 {
    font-size: 1.3125rem !important;
    font-weight: 600 !important;
    line-height: 1.25;
    margin: 0 0 12px !important;
}

.kontakt h3 {
    font-size: var(--text-zakladni) !important;
    font-weight: 600 !important;
    line-height: 1.3;
    margin: 0 0 8px !important;
}

.kontakt p {
    font-size: var(--text-zakladni);
    line-height: 1.6;
    margin: 0 0 12px !important;
}

.kontakt a {
    color: var(--primary-color);
    text-decoration: none;
}

.kontakt a:hover,
.kontakt a:focus {
    text-decoration: underline;
}

/** --- Poradce: fotka + výzva ---------------------------------------------- */
.kontakt-poradce {
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: center;
    gap: 20px;
    padding: 8px 20px 8px 8px;
    margin-bottom: var(--mrizka-mezera);
    background: var(--secondary-color);
}

.kontakt-poradce__foto {
    display: block;
    width: 112px;
    height: 112px !important;
    object-fit: cover;
    object-position: center top;
}

.kontakt-poradce__text p {
    margin-bottom: 0 !important;
}

/** --- Karty ---------------------------------------------------------------- */
.kontakt-karta,
.kontakt .kontakt-formular {
    background: #FFFFFF;
    border: 1px solid var(--tertiary-color);
    padding: 24px;
    margin-bottom: var(--mrizka-mezera);
}

.kontakt-karta > :last-child {
    margin-bottom: 0 !important;
}

.kontakt-karta small {
    display: block;
    font-size: var(--text-drobny);
    line-height: 1.5;
    color: #585653;
}

/* E-mail a telefon – hlavní kanály, proto výrazněji */
.kontakt-karta__spojeni a {
    font-weight: 600;
}

/** --- Platby: Kč a EUR vedle sebe, když je místo --------------------------- */
/* 250 px = celý řádek „IBAN: CZ…“ v drobném písmu. V levém sloupci na
   desktopu (kolem 400 px) jsou tak platby pod sebou, na mobilu vedle sebe
   jen tam, kde se IBAN vejde na jeden řádek. */
.kontakt-platby {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.kontakt-platby p {
    font-size: var(--text-drobny);
    line-height: 1.5;
    margin: 0 0 6px !important;
    /* IBAN je jedno dlouhé slovo – v úzkém sloupci se smí zalomit kdekoli */
    overflow-wrap: anywhere;
}

/** --- Formulář --------------------------------------------------------------- */
.kontakt .kontakt-formular {
    padding: 24px 32px;
}

/* Pod 1200 px je levý sloupec úzký (kolem 340 px) – s fotkou 112 px se
   text vedle ní lámal do šesti řádků. */
@media (max-width: 1199px) {
    .kontakt-poradce {
        grid-template-columns: 88px 1fr;
        gap: 16px;
        padding-right: 16px;
    }

    .kontakt-poradce__foto {
        width: 88px;
        height: 88px !important;
    }
}

@media (max-width: 767px) {
    .kontakt-karta,
    .kontakt .kontakt-formular {
        padding: 20px;
    }
}

/** ==========================================================================
 ** DETAIL PRODUKTU – PRAVÝ SLOUPEC: konfigurátor, souhrn, dotaz
 ** ==========================================================================
 ** Schváleno 24. 9. 2026. Chování dotváří initPravaStrana() a spol.
 ** v custom-caster-v3.js, texty bublin (i) jsou v
 ** upload/params/textace/info-detail-produktu.json.
 **
 ** Barvy jen z grafického manuálu (caster.visualbook.pro/barvy):
 **   Sušená meruňka #BC6125 (akce, vybráno), #F9E7DD (plocha vybraného),
 **   Uhlí #110E0A (text), Šalvěj #AEBF9B (hotový krok, termín dodání),
 **   neutrální #585653 (sekundární text), #A09F9D (linky), #DBDBDA (prvky UI).
 ** Tvary hranaté jako zbytek webu.
 ** ========================================================================== */

body.type-product {
    --pd-prvek: #DBDBDA;
    --pd-linka: #A09F9D;
    --pd-text2: #585653;
    --pd-salvej: #AEBF9B;
    --pd-salvej-25: #EBEFE6;
    --pd-odsazeni: 40px;
    --pd-ikona-check: url('/user/documents/assets/ui-ikony/fajfka.svg');
}

/** --- Krátký popis: seznam výhod ----------------------------------------- */
/* HTML je obyčejný <ul><li> z administrace, bez tříd – vzhled jen odsud. */
body.type-product .p-short-description ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    margin: 16px 0 0 !important;
    padding: 0 !important;
}

/* Obyčejný text s ikonou vlevo – ve flexu by se <strong> a zbytek věty
   rozpadly do dvou sloupců. */
body.type-product .p-short-description li {
    position: relative;
    margin: 0;
    padding: 0 0 0 30px;
    font-size: var(--text-zakladni);
    line-height: 1.45;
}

body.type-product .p-short-description li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background: var(--secondary-color);
}

/* Fajfka přes čtvereček – dvě vrstvy v jednom pseudoelementu nejdou,
   proto ::after nad ::before. */
body.type-product .p-short-description li::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    -webkit-mask: var(--pd-ikona-check) center / contain no-repeat;
    mask: var(--pd-ikona-check) center / contain no-repeat;
}

body.type-product .p-short-description li strong {
    font-weight: 600;
}


/** --- Konfigurátor: kroky ------------------------------------------------- */
body.type-product .product-conf .product-conf__divider {
    display: none;
}

/* Rozestupy konfigurátoru – jeden rytmus:
     tlačítko „Celý popis" → 1. krok   28 px
     krok → krok                       32 px (2 × 16 px)
     nadpis kroku → volby              16 px
     poslední krok → souhrn            32 px
   Kroky dělí jen mezera, bez šedých čar. */
body.type-product .product-conf > .product-conf__row {
    padding: 16px 0 !important;
}

body.type-product .product-conf > .product-conf__row:first-child {
    margin-top: 0;
    padding-top: 28px !important;
}

body.type-product .product-conf .product-conf__row h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px !important;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Číslo kroku – hranatý čtverec jako zbytek webu. Hotový krok dostane
   fajfku na šalvějové ploše, ať je z dálky vidět, co ještě chybí. */
body.type-product .product-conf .product-conf__row h3::before {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    border-radius: 0 !important;
}

body.type-product .product-conf .product-conf__row.is-done h3::before {
    content: "";
    background-color: var(--pd-salvej);
    background-position: center;
    background-size: 16px;
    background-repeat: no-repeat;
    background-image: url('/user/documents/assets/ui-ikony/fajfka-jilova.svg');
}

/* Štítek „Povinné" vpravo v hlavičce kroku (doplňuje JS) se ukazuje jen
   u povinného kroku, který chybí, když zákazník klikne do košíku – spolu
   s hláškou pod nadpisem, takže chyba není řečená jen barvou. */
body.type-product .product-conf__value {
    display: none;
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--pd-text2);
    transition: color .15s linear;
}


body.type-product .product-conf__row.has-error .product-conf__value {
    display: block;
}

/* Bubliny (i) – texty jsou v upload/params/textace/info-detail-produktu.json. Šířka omezená,
   aby se dlouhý text (dostupnost) nerozlil přes půl obrazovky. */
body.type-product .product-conf__info--tooltip {
    max-width: 320px;
    padding: 10px 14px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    z-index: 20;
}

body.type-product .product-conf .product-conf__row h3 .product-conf__info {
    margin-left: -4px;
}

body.type-product .product-conf > .product-conf__row > .product-conf__items,
body.type-product .product-conf > .product-conf__row > .product-conf__nav {
    margin-left: var(--pd-odsazeni);
}

/* Mezeru pod nadpisem drží jen jeho margin (16 px) */
body.type-product .product-conf > .product-conf__row > .product-conf__items,
body.type-product .product-conf > .product-conf__row > .product-conf__nav {
    margin-top: 0;
}


/** --- Volby (dlaždice) ---------------------------------------------------- */
body.type-product .product-conf .product-conf__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Dlaždice bez stálého rámečku: obrys až při najetí, hnědý u vybrané.
   Rámeček je průhledný, ne nulový, aby dlaždice při změně neposkočila. */
body.type-product .product-conf .product-conf__item {
    max-width: none;
    flex: none;
    gap: 12px;
    padding: 8px;
    background: #fff;
    border: 1px solid transparent;
    transition: border-color .15s linear, background-color .15s linear, box-shadow .15s linear;
}

body.type-product .product-conf .product-conf__item:hover {
    border-color: var(--pd-linka);
}

body.type-product .product-conf .product-conf__item.selected {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
    background: var(--secondary-color);
}

/* Bez fajfky v rohu – vybranou volbu nese hnědý rámeček a plocha */
body.type-product .product-conf .product-conf__item.selected::after {
    content: none !important;
    display: none !important;
}

body.type-product .product-conf .product-conf__img {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
}

body.type-product .product-conf .product-conf__content {
    min-width: 0;
}

body.type-product .product-conf .product-conf__name {
    font-size: var(--text-drobny);
    font-weight: 500;
    line-height: 1.35;
}

body.type-product .product-conf .product-conf__price {
    margin-top: 2px;
    font-size: .875rem;
    color: var(--pd-text2);
}

/* Lupa u obrázku volby – světlá meruňka a hnědá ikona, při najetí
   obráceně. Ikona je maska, aby šla přebarvit (SVG je černé). */
body.type-product .product-conf .product-conf__img button {
    top: auto !important;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    background: var(--secondary-color) !important;
    transition: var(--prechod-tlacitka);
}

body.type-product .product-conf .product-conf__img button img {
    display: none !important;
}

body.type-product .product-conf .product-conf__img button::before {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    -webkit-mask: url('/user/documents/assets/ui-ikony/hledat.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/hledat.svg') center / contain no-repeat;
    transition: background-color .15s linear;
}

body.type-product .product-conf .product-conf__img button:hover {
    background: var(--primary-color) !important;
}

body.type-product .product-conf .product-conf__img button:hover::before {
    background: #fff;
}


/** --- Výběr rozměru / výšky ----------------------------------------------- */
body.type-product .product-conf .product-conf__select select {
    width: 100%;
    max-width: 240px;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 8px 36px 8px 12px !important;
    font-size: var(--text-drobny);
    font-weight: 500;
    color: var(--text-color);
    background-color: #fff;
    border: 1px solid var(--pd-prvek);
    transition: border-color .15s linear;
}

body.type-product .product-conf .product-conf__select select:hover {
    border-color: var(--pd-linka);
}

body.type-product .product-conf .product-conf__select.selected select {
    border-color: var(--primary-color);
}

body.type-product .product-conf .product-conf__select select:focus-visible,
body.type-product .product-conf .product-conf__item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}


/** --- Dekory: skupiny v záložkách a seznam vzorků --------------------------
 ** Původní podoba webu – záložky s hnědým podtržením a vzorky jako dlaždice
 ** se jménem a cenou, stejné jako u ostatních kroků. Jen uhlazená: záložky
 ** stejně široké, bez šedých rámečků, vzorky ve stejné dlaždici jako
 ** pozice postele a příslušenství.
 ** ----------------------------------------------------------------------- */
body.type-product .product-conf__row[data-grouped="true"] .product-conf__nav {
    display: block;
    width: auto;
    margin-bottom: 16px;
}

body.type-product .product-conf__nav ul {
    display: flex;
    gap: 8px;
    border: 0;
}

body.type-product .product-conf__nav li {
    flex: 1 1 0;
    justify-content: center;
    padding: 12px 10px;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-align: center;
    text-transform: uppercase;
    color: var(--pd-text2);
    background: none;
    border: 0;
    border-bottom: 2px solid var(--primary-color);
    transition: background-color .15s linear, color .15s linear;
}

body.type-product .product-conf__nav li:hover {
    color: var(--text-color);
}

body.type-product .product-conf__nav li.selected {
    color: var(--primary-color);
    background: var(--secondary-color);
}

/* Vzorky – dlaždice se čtvercovým vzorkem, obrázek se vyjme z toku,
   jinak by ho fotka vzorku na výšku natáhla */
body.type-product .product-conf__row[data-grouped="true"] .product-conf__img {
    overflow: hidden;
}

body.type-product .product-conf__row[data-grouped="true"] .product-conf__img > img {
    position: absolute;
    inset: 0;
    outline: 1px solid rgba(17, 14, 10, .08);
    outline-offset: -1px;
}

/* „Celá kolekce" – ikona palety na světlé ploše */
body.type-product .product-conf__row[data-grouped="true"] .product-conf__item[data-func] .product-conf__img {
    background: var(--secondary-color);
}

/* Ikona palety hnědá – SVG je černé, proto se obrázek schová a kresba
   se vykreslí maskou v barvě webu */
body.type-product .product-conf__row[data-grouped="true"] .product-conf__item[data-func] .product-conf__img > img {
    visibility: hidden;
}

body.type-product .product-conf__row[data-grouped="true"] .product-conf__item[data-func] .product-conf__img::before {
    content: "";
    position: absolute;
    inset: 20%;
    background: var(--primary-color);
    -webkit-mask: url('/user/documents/assets/icons/palette.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/icons/palette.svg') center / contain no-repeat;
}

/* Zkrácený seznam: přechod do bílé a tlačítko na spodní hraně */
body.type-product .product-conf__row[data-grouped="true"] .product-conf__items {
    max-height: 340px;
}

/* Rozbalený seznam roste s obsahem a odsune všechno pod sebou;
   „Zobrazit méně" pak sedí na jeho konci */
body.type-product .product-conf__row[data-grouped="true"] .product-conf__items.showMore {
    max-height: none;
    overflow: visible;
}

/* Přechod do bílé nad lupami vzorků (ty mají z-index 1), tlačítko
   „Zobrazit všech…" ještě nad ním */
body.type-product .product-conf__row[data-grouped="true"] .product-conf__items:not(.showMore)::after {
    height: 90px;
    z-index: 2;
}

/* „Zobrazit všech 28 dekorů" – text se šipkou na spodní hraně, nad
   přechodem do bílé. Text i počet doplňuje JS. */
body.type-product .product-conf .showMoreGrouped {
    z-index: 3;
    bottom: 4px;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 40px !important;
    height: auto !important;
    padding: 0 12px !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--primary-color) !important;
    background: none !important;
    border: 0 !important;
}

body.type-product .product-conf .showMoreGrouped::after {
    content: "";
    width: 10px;
    height: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .15s linear;
}

body.type-product .product-conf .showMoreGrouped.active::after {
    transform: rotate(180deg);
}

body.type-product .product-conf .showMoreGrouped:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.type-product .product-conf__row[data-grouped="true"] .product-conf__items.showMore {
    padding-bottom: 48px;
}

body.type-product .product-conf .showMoreGrouped.active {
    bottom: 0;
}


/** --- Souhrn: dostupnost, doprava, cena, košík ---------------------------- */
body.type-product .product-conf__summary {
    margin-top: 16px;
}

body.type-product .product-conf__totals {
    padding: 24px !important;
    background: #fff;
    border: 1px solid var(--tertiary-color) !important;
}

body.type-product .product-conf__availability {
    align-items: center;
    margin-bottom: 12px;
    font-size: var(--text-zakladni);
}

body.type-product .product-conf__availability .name {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.type-product .product-conf__availability .value {
    font-weight: 600;
    white-space: nowrap;
}

/* 8–12 týdnů zelenou z palety (Šalvěj), bez pozadí. Text jde měnit
   v info-detail-produktu.json (souhrn.dostupnost_termin). */
body.type-product #confAvailability .availability-label {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: var(--text-zakladni);
    font-weight: 700;
    text-transform: none;
    color: var(--pd-salvej) !important;
    background: none;
}

/* Doprava a montáž pod celkovou cenou – tišší řádek */
body.type-product .product-conf__delivery {
    margin: 0 0 20px;
    font-size: var(--text-drobny);
    color: var(--pd-text2);
}

body.type-product .product-conf__delivery .value {
    font-weight: 600;
    color: var(--text-color);
}

body.type-product .product-conf__info--tooltip.is-prazdny {
    display: none !important;
}

/* Vybrané příplatky – tišší řádky nad celkovou cenou */
/* :has, ne :empty – obal obsahuje mezery a :empty by platil jen bez nich */
body.type-product .product-conf__selecteditems:has(.product-conf__selecteditem) {
    margin-top: 12px;
}

body.type-product .product-conf__selecteditem {
    font-size: var(--text-drobny);
    color: var(--pd-text2);
    margin-bottom: 4px;
}

body.type-product .product-conf__selecteditem:last-child {
    margin-bottom: 0;
}

/* Nad linkou 12 + 4 = 16 px, pod ní 16 px */
body.type-product .product-conf__prices {
    margin: 4px 0 6px;
    padding-top: 16px;
    border-top: 1px solid var(--tertiary-color);
}

body.type-product .product-conf__prices .name {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Pod cenou je řádek Doprava a montáž (dřív poznámka s hvězdičkou) */
body.type-product .product-conf__prices {
    align-items: center;
}

body.type-product .product-conf__prices .price {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary-color);
}

/* Hlavní akce */
body.type-product .product-conf__actions button#addToCart {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 16px 24px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    text-transform: uppercase;
    /* Hnědá plocha, bílý text a ikona; při najetí lehce ztmaví */
    color: #fff !important;
    background: var(--primary-color) !important;
    transition: var(--prechod-tlacitka) !important;
}

body.type-product .product-conf__actions button#addToCart::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url('/user/documents/assets/ui-ikony/kosik.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/kosik.svg') center / contain no-repeat;
}

body.type-product .product-conf__actions button#addToCart:hover,
body.type-product .product-conf__actions button#addToCart:focus-visible {
    background: #a9571f !important;
    background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
}

/* Vedlejší akce – dotaz s předvyplněnou konfigurací.
   Pravidlo .product-conf__actions button ve v3 barví všechna tlačítka
   v akcích plnou hnědou s !important – vedlejší akce ho musí přebít. */
body.type-product .product-conf__actions button.product-conf__ask {
    color: var(--primary-color) !important;
    background: #fff !important;
    border: 1px solid var(--tertiary-color) !important;
    padding: 13px 24px !important;
    font-size: var(--text-drobny) !important;
    font-weight: 500 !important;
}

/* Při najetí jako „Parametry" – plocha světlou meruňkou (přebíjí
   i obecný hover .product-conf__actions button:hover ze šablony) */
body.type-product .product-conf__actions button.product-conf__ask:hover,
body.type-product .product-conf__actions button.product-conf__ask:focus-visible {
    color: var(--primary-color) !important;
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

body.type-product .product-conf__ask {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    padding: 12px 24px;
    font-family: var(--template-font);
    font-size: var(--text-drobny);
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid var(--tertiary-color);
    cursor: pointer;
    transition: var(--prechod-tlacitka);
}

body.type-product .product-conf__ask::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url('/user/documents/assets/ui-ikony/recenze.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/recenze.svg') center / contain no-repeat;
}

body.type-product .product-conf__ask:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Původní ikonka „Zeptat se" pod boxem – nahrazená tlačítkem v souhrnu */
body.type-product .p-info-wrapper:has(.product-conf__ask) .social-buttons-wrapper {
    display: none !important;
}

body.type-product .product-help {
    margin-top: 16px !important;
}


/** --- Tlačítko „Parametry" vedle „Celý popis produktu" ---------------------
 ** Vedlejší akce ve stejném stylu jako „Zeptat se na tuto konfiguraci":
 ** bílá plocha, rámeček světlou meruňkou, hnědý text; při najetí plocha
 ** světlou meruňkou. Šipka dolů jako u „Celý popis" –
 ** obě tlačítka posouvají stránku k záložkám. Vkládá initParametry().
 ** ----------------------------------------------------------------------- */
.p-short-description a.p-parametry-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: var(--mrizka-mezera) 0 0 10px !important;
    padding: 13px 24px !important;
    font-family: var(--template-font);
    font-size: var(--text-drobny) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--primary-color) !important;
    background: #fff;
    border: 1px solid var(--tertiary-color);
    cursor: pointer;
    transition: var(--prechod-tlacitka) !important;
}

.p-short-description a.p-parametry-btn::after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url('/user/documents/assets/ui-ikony/sipka-dolu.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/sipka-dolu.svg') center / contain no-repeat;
}

.p-short-description a.p-parametry-btn:hover,
.p-short-description a.p-parametry-btn:focus-visible {
    background: var(--secondary-color);
}

.p-short-description a.p-parametry-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* „Hodnocení" – zelená plocha jako pás recenzí (#ebefe6), tmavě šalvějový
   text; při najetí plocha šalvějí */
.p-short-description a.p-hodnoceni-btn {
    color: #4f5e3f !important;
    background: #ebefe6;
    border-color: #ebefe6;
}

.p-short-description a.p-hodnoceni-btn:hover,
.p-short-description a.p-hodnoceni-btn:focus-visible {
    color: var(--text-color) !important;
    background: var(--sage-color, #AEBF9B);
    border-color: var(--sage-color, #AEBF9B);
}

.p-short-description a.p-hodnoceni-btn:focus-visible {
    outline-color: #4f5e3f;
}


/** --- Náhled vzorku (lupa) ----------------------------------------------------
 ** Místo fotky vzorku v plné velikosti (774 × 1304 px s posuvníky) karta:
 ** vzorek vlevo, vpravo skupina, název, příplatek a tlačítko „Vybrat".
 ** Staví ji initNahledVzorku().
 ** ----------------------------------------------------------------------- */
/* Vzorek zabírá asi 3/5 karty – kolem 540 px, na nízké obrazovce
   ho drží výška okna */
#vzorekPopup .modal-container {
    max-width: 960px;
}

#vzorekPopup .modal-container.no-header .modal-body {
    padding: 24px !important;
    max-height: none;
    overflow: visible;
}

#vzorekPopup .modal-close {
    top: 8px !important;
    right: 8px !important;
    width: 40px;
    height: 40px;
    font-size: 28px;
    color: var(--text-color);
}

#vzorekPopup .vzorek-nahled {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    gap: 28px;
    text-align: left;
}

#vzorekPopup .vzorek-nahled__foto {
    position: relative;
    width: 100%;
    max-width: calc(90vh - 48px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(17, 14, 10, .08);
}

#vzorekPopup .vzorek-nahled__foto img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Příslušenství je fotka výrobku, ne vzorek materiálu – celá, neořezaná */
#vzorekPopup .vzorek-nahled.is-doplnek .vzorek-nahled__foto img {
    object-fit: contain;
}

#vzorekPopup .vzorek-nahled__stitek {
    display: block;
    margin-bottom: 6px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--primary-color);
}

#vzorekPopup .vzorek-nahled__nazev {
    margin: 0 0 6px;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
}

#vzorekPopup .vzorek-nahled__cena {
    display: block;
    margin-bottom: 24px;
    font-size: var(--text-zakladni);
    font-weight: 600;
    color: var(--primary-color);
}

/* Popis příslušenství (dřív v bublině (i) u názvu) */
#vzorekPopup .vzorek-nahled__popis {
    margin: -8px 0 24px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pd-text2);
}

#vzorekPopup .vzorek-nahled__vybrat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    font-family: var(--template-font);
    font-size: var(--text-drobny);
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #fff;
    background: var(--primary-color);
    border: 0;
    cursor: pointer;
    transition: var(--prechod-tlacitka);
}

#vzorekPopup .vzorek-nahled__vybrat:hover,
#vzorekPopup .vzorek-nahled__vybrat:focus-visible {
    background: var(--text-color);
}

#vzorekPopup .vzorek-nahled__vybrat.is-vybrano {
    color: var(--primary-color);
    background: var(--secondary-color);
    cursor: default;
}


/** --- Přehled materiálů („Celá kolekce") ----------------------------------
 ** Mřížka všech vzorků skupiny ve stejném stylu jako dlaždice konfigurátoru
 ** a náhled vzorku: čtvercový vzorek, pod ním název a příplatek, vybraný
 ** vzorek s hnědým rámečkem na světlé meruňce. Klik vybere a zavře.
 ** ----------------------------------------------------------------------- */
#palettePopup .modal-container {
    max-width: 1120px;
}

#palettePopup .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--tertiary-color);
}

#palettePopup .modal-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-color);
}

#palettePopup .modal-close {
    width: 40px;
    height: 40px;
    font-size: 28px;
    color: var(--text-color);
}

#palettePopup .modal-close:hover {
    background: var(--secondary-color);
}

#palettePopup .modal-body {
    padding: 24px;
    text-align: left;
}

#palettePopup .modal-body .product-conf__items {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    max-height: none;
    overflow: visible;
}

#palettePopup .modal-body .product-conf__items::after {
    content: none;
}

#palettePopup .modal-body .product-conf__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: none;
    padding: 8px;
    background: #fff;
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color .15s linear, background-color .15s linear, box-shadow .15s linear;
}

#palettePopup .modal-body .product-conf__item[data-func] {
    display: none;
}

#palettePopup .modal-body .product-conf__item:hover {
    border-color: var(--pd-linka);
}

#palettePopup .modal-body .product-conf__item.selected {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
    background: var(--secondary-color);
}

#palettePopup .modal-body .product-conf__item.selected::after {
    content: none !important;
    display: none !important;
}

#palettePopup .modal-body .product-conf__img {
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

#palettePopup .modal-body .product-conf__img > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    outline: 1px solid rgba(17, 14, 10, .08);
    outline-offset: -1px;
}

#palettePopup .modal-body .product-conf__content {
    position: static;
    padding: 0 2px 2px;
    color: var(--text-color);
    background: none;
}

#palettePopup .modal-body .product-conf__name {
    font-size: var(--text-drobny);
    font-weight: 500;
    line-height: 1.35;
}

#palettePopup .modal-body .product-conf__price {
    margin-top: 2px;
    font-size: .875rem;
    color: var(--pd-text2);
}

/* Kapitoly skupin (Neutrální, Dřevodekory, Masivní dýha) */
#palettePopup .paleta-kapitola + .paleta-kapitola {
    margin-top: 40px;
}

#palettePopup .paleta-kapitola__nazev {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
}

#palettePopup .paleta-kapitola__pocet {
    font-size: .875rem;
    font-weight: 500;
    color: var(--pd-text2);
}

@media (max-width: 1100px) {
    #palettePopup .modal-body .product-conf__items {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 797px) {
    #palettePopup .modal-body {
        padding: 16px;
    }

    #palettePopup .modal-body .product-conf__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #palettePopup .modal-body .product-conf__item {
        max-width: none;
        flex: none;
    }
}


/** --- Formulář „Zeptejte se na konfiguraci" (colorbox) ---------------------
   initFormularDotazu(). Jednotné odsazení 32 px od okrajů, karta produktu
   s konfigurací a cenou vpravo, pole 48 px s popisky nad nimi, prázdné
   pole dotazu s nápovědou. Křížek jako u ostatních oken webu. */
/* Colorbox má vlastní odsazení 20 px (a podle něj počítá velikost okna),
   formulář k němu přidá 12 px – dohromady 32 px od okrajů */
#colorbox .dotaz-caster {
    padding: 12px 12px 17px;
}

#colorbox .dotaz-caster *,
#colorbox .dotaz-caster *::before,
#colorbox .dotaz-caster *::after {
    box-sizing: border-box;
}

#colorbox:has(.dotaz-caster) #cboxClose {
    top: 16px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    background: #fff url('/user/documents/assets/ui-ikony/krizek.svg') center / 20px no-repeat !important;
    font-size: 0 !important;
    color: transparent !important;
    border: 0 !important;
    transition: background-color .15s linear;
}

#colorbox:has(.dotaz-caster) #cboxClose::before,
#colorbox:has(.dotaz-caster) #cboxClose::after {
    display: none !important;
}

#colorbox:has(.dotaz-caster) #cboxClose:hover,
#colorbox:has(.dotaz-caster) #cboxClose:focus-visible {
    background-color: var(--secondary-color) !important;
}

#colorbox .dotaz-caster h1 {
    margin: 0 48px 6px 0 !important;
    padding: 0 !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.25;
}

#colorbox .dotaz-produkt {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin: 0 0 24px;
    padding: 16px;
    background: var(--secondary-color);
}

#colorbox .dotaz-produkt img {
    width: 72px;
    height: 72px !important;
    object-fit: cover;
    background: #fff;
}

#colorbox .dotaz-produkt__nazev {
    display: block;
    margin-bottom: 4px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color);
}

#colorbox .dotaz-produkt__volby {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--text-color);
}

#colorbox .dotaz-produkt__volby span,
#colorbox .dotaz-produkt__prazdne {
    color: var(--pd-text2);
}

#colorbox .dotaz-produkt .dotaz-cena {
    align-self: start;
    font-size: 1.125rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--primary-color);
}

#colorbox .dotaz-caster .form-legend {
    display: none;
}

#colorbox .dotaz-caster fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

#colorbox .dotaz-caster fieldset > *:not(.dotaz-pul) {
    grid-column: 1 / -1;
}

#colorbox .dotaz-caster .form-group {
    margin-bottom: 16px;
}

#colorbox .dotaz-caster label {
    display: block;
    position: static !important;
    margin: 0 0 6px !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    color: var(--text-color) !important;
    transform: none !important;
}

#colorbox .dotaz-caster .has-error .form-control {
    border-color: #9B2C17 !important;
}

#colorbox .dotaz-caster .dotaz-chyba {
    margin: 6px 0 0;
    font-size: .875rem;
    line-height: 1.4;
    color: #9B2C17;
}

/* Šablona polím nechává 25 px zprava na ikonku validace – tady by
   nelícovala s tlačítkem pod nimi */
#colorbox .dotaz-caster .form-control {
    width: 100%;
    max-width: none !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: var(--text-zakladni) !important;
    /* Šablona dává textu v polích bílou – na bílém poli nebyl vidět */
    color: var(--text-color) !important;
    background: #fff !important;
    border: 1px solid #DBDBDA !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color .15s linear;
}

#colorbox .dotaz-caster .form-control::placeholder {
    color: #A09F9D;
    opacity: 1;
}

#colorbox .dotaz-caster textarea.form-control {
    min-height: 140px !important;
    height: auto !important;
    line-height: 1.5;
    resize: vertical;
}

#colorbox .dotaz-caster .form-control:hover {
    border-color: #A09F9D !important;
}

#colorbox .dotaz-caster .form-control:focus {
    border-color: var(--primary-color) !important;
    outline: 3px solid var(--tertiary-color);
    outline-offset: 0;
}

#colorbox .dotaz-caster .consents {
    margin-bottom: 20px;
}

#colorbox .dotaz-caster .consents .label {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--pd-text2);
}

#colorbox .dotaz-caster .consents .label a {
    color: var(--pd-text2);
    text-decoration: underline;
}

#colorbox .dotaz-caster .submit-wrapper {
    margin-bottom: 0;
}

#colorbox .dotaz-caster .submit-wrapper .btn {
    width: 100%;
    min-height: 52px;
    font-size: var(--text-drobny) !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--primary-color) !important;
    border: 0 !important;
    border-radius: 0 !important;
    transition: var(--prechod-tlacitka);
}

#colorbox .dotaz-caster .submit-wrapper .btn:hover,
#colorbox .dotaz-caster .submit-wrapper .btn:focus-visible {
    background: #a9571f !important;
    background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
}

@media (max-width: 575.98px) {
    #colorbox .dotaz-caster {
        padding: 4px 0 5px;
    }

    #colorbox:has(.dotaz-caster) #cboxClose {
        top: 8px !important;
        right: 8px !important;
    }



    #colorbox .dotaz-produkt .dotaz-cena {
        grid-column: 2;
    }
}


/** --- Tablet a mobil ------------------------------------------------------ */
@media (max-width: 797px) {
    body.type-product {
        --pd-odsazeni: 0px;
    }

    body.type-product .p-short-description ul {
        grid-template-columns: 1fr;
    }

    /* „Parametry" se na úzkém displeji zalomí pod „Celý popis" –
       zarovnat vlevo, mezera 10 px jako mezi tlačítky v souhrnu */
    .p-short-description a.p-parametry-btn {
        margin: 10px 0 0 !important;
    }

    body.type-product .product-conf__row[data-merged="true"] .product-conf__items {
        grid-template-columns: 1fr;
    }

    body.type-product .product-conf__nav li {
        padding: 11px 4px;
        font-size: .75rem;
        letter-spacing: 0;
    }

    body.type-product .product-conf__totals {
        padding: 18px !important;
    }

    body.type-product .product-conf__prices .price {
        font-size: 1.5rem;
    }

    /* Vedlejší tlačítko na jeden řádek */
    body.type-product .product-conf__actions button.product-conf__ask {
        padding: 12px 14px !important;
        font-size: .875rem !important;
        letter-spacing: 0;
        white-space: nowrap;
    }

    #colorbox .dotaz-caster fieldset {
        grid-template-columns: 1fr;
    }

    #vzorekPopup .vzorek-nahled {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}


/** ==========================================================================
 ** DETAIL PRODUKTU – lišta „Přidat do košíku" dole
 ** ==========================================================================
 ** Vkládá initListaKosiku() v custom-caster-v3.js. Vyjede zdola, jakmile
 ** zákazník odroluje pod tlačítko konfigurátoru. Tlačítko je stejné jako
 ** hlavní (hnědá plocha, ikona košíku, velká písmena); dokud chybí povinný
 ** krok, jmenuje se „Dokončit konfiguraci" a má šipku nahoru – po kliknutí
 ** stránka sjede k prvnímu chybějícímu kroku.
 **
 ** Když je lišta vidět, dostane <body> odsazení zespodu, aby nezakryla
 ** konec stránky (patičku). Hlavička má z-index 9999, lišta pod ní.
 ** Kdo má omezené animace, lišta se jen objeví bez vyjetí.
 ** ========================================================================== */

.pd-lista {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    background: #fff;
    border-top: 1px solid var(--tertiary-color);
    box-shadow: 0 -6px 20px rgba(17, 14, 10, .06);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .25s ease-out, visibility 0s linear .25s;
}

.pd-lista.is-videt {
    transform: none;
    visibility: visible;
    transition: transform .25s ease-out, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .pd-lista,
    .pd-lista.is-videt {
        transition: none;
    }
}

.pd-lista__vnitrek {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1640px;
    margin: 0 auto;
    padding: 12px 15px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.pd-lista__obr {
    flex: 0 0 56px;
    width: 56px;
    height: 56px !important;
    object-fit: cover;
}

.pd-lista__info {
    flex: 1 1 auto;
    min-width: 0;
}

.pd-lista__nazev {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-color);
}

.pd-lista__stav {
    margin-top: 2px;
    overflow: hidden;
    font-size: .875rem;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--pd-text2);
}

.pd-lista.is-hotovo .pd-lista__stav::before {
    content: "✓ ";
    font-weight: 700;
    color: #6f8a55;
}

.pd-lista__cena {
    flex: 0 0 auto;
    font-size: 1.375rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--primary-color);
}

.pd-lista__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    font-family: var(--template-font);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #fff;
    background: var(--primary-color);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: var(--prechod-tlacitka);
}

.pd-lista__btn::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url('/user/documents/assets/ui-ikony/kosik.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/kosik.svg') center / contain no-repeat;
}

/* Dokud chybí krok: šipka nahoru místo košíku */
.pd-lista:not(.is-hotovo) .pd-lista__btn::before {
    -webkit-mask: url('/user/documents/assets/ui-ikony/sipka-nahoru.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/sipka-nahoru.svg') center / contain no-repeat;
}

.pd-lista__btn:hover,
.pd-lista__btn:focus-visible {
    background: #a9571f;
    background: color-mix(in srgb, var(--primary-color) 88%, #000);
}

.pd-lista__btn:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 2px;
}

/* Konec stránky nesmí zůstat pod lištou (lišta je vysoká 81 px) */
body.ma-listu {
    padding-bottom: 88px;
}

/* Mobil: bez fotky a stavového řádku, název nad cenou, tlačítko vpravo */
@media (max-width: 767.98px) {
    .pd-lista__vnitrek {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 0;
    }

    .pd-lista__obr,
    .pd-lista__stav {
        display: none;
    }

    .pd-lista__info {
        grid-column: 1;
        grid-row: 1;
    }

    .pd-lista__nazev {
        font-size: .875rem;
        font-weight: 500;
        color: var(--pd-text2);
    }

    .pd-lista__cena {
        grid-column: 1;
        font-size: 1.125rem;
    }

    .pd-lista__btn {
        grid-column: 2;
        grid-row: 1 / span 2;
        font-size: .875rem;
    }

}


/* Menu nad popisem vždy v jednom řádku – když se položky nevejdou, dá se
   posouvat do strany (šablona je lámala do dvou řádků s dírami).
   Useknutá poslední položka napovídá, že menu pokračuje. */
.type-detail .shp-tabs-wrapper #p-detail-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.type-detail .shp-tabs-wrapper #p-detail-tabs::-webkit-scrollbar {
    display: none;
}

.type-detail .shp-tabs-wrapper #p-detail-tabs li {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.type-detail .shp-tabs-wrapper #p-detail-tabs li a {
    white-space: nowrap;
}

@media (max-width: 767.98px) {

    .type-detail .shp-tabs-wrapper #p-detail-tabs li a {
        padding: 0 !important;
    }
}


/** ==========================================================================
 ** DETAIL PRODUKTU – popis, Výroba na míru, menu sekcí
 ** ==========================================================================
 ** initPopis(), initVyrobaNaMiru() a initMenuDetailu() v custom-caster-v3.js.
 ** Popis je prostý text ze správy přes celou šířku webu.
 ** ========================================================================== */

.pd-popis__obsah {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-color);
}

.type-detail .pd-popis__obsah p {
    margin: 0 0 16px;
    font-size: inherit;
    line-height: inherit;
}

.type-detail .pd-popis__obsah > :last-child {
    margin-bottom: 0;
}

.pd-popis__obsah strong {
    font-weight: 600;
}


/** --- Výroba na míru -------------------------------------------------------- */

.type-detail .pd-vyroba .homepage-group-title.h4 {
    padding-top: 0 !important;
    text-align: center;
}

.pd-vyroba__karty {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: var(--sekce-mezera) 0 0;
    padding: 0;
    list-style: none;
}

.pd-vyroba__karta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--tertiary-color);
}

.pd-vyroba__ikona {
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--primary-color);
    background: var(--secondary-color);
}

.pd-vyroba__nazev {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color);
}

.pd-vyroba__zaver {
    margin: 32px 0 0;
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
    color: var(--pd-text2);
}

.pd-vyroba__odkaz {
    margin-left: 6px;
    font-weight: 600;
    color: var(--primary-color) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .pd-vyroba__karty {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .pd-vyroba__karty {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pd-vyroba__karta {
        padding: 12px 16px;
    }

    .pd-vyroba__ikona {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .pd-vyroba__zaver {
        text-align: left;
    }
}


/** --- Menu sekcí (nad popisem i přichycené pod hlavičkou) -------------------
   Položky na středu jako nadpisy sekcí. Aktivní sekce je tmavá a podtržená
   hnědou – podtržení je text-decoration, takže nic neposkočí. */
/* Pás menu přes celou šířku okna – rozšiřuje ho stín, clip-path ho
   ořízne jen nahoře a dole (stejně jako přichycené menu) */
.type-detail .shp-tabs-wrapper #p-detail-tabs {
    justify-content: flex-start;
    gap: clamp(20px, 2.2vw, 40px);
    box-shadow: 0 0 0 100vmax var(--secondary-color);
    clip-path: inset(0 -100vmax);
}

/* Na střed přes automatické okraje krajních položek: když se menu nevejde,
   začíná u levé hrany a posouvá se (justify-content: center by první
   položky schoval za levý okraj, kam už posunout nejde) */
.type-detail .shp-tabs-wrapper #p-detail-tabs li:first-child,
.pd-menu-pevne a:first-child {
    margin-left: auto !important;
}

.type-detail .shp-tabs-wrapper #p-detail-tabs li:last-child,
.pd-menu-pevne a:last-child {
    margin-right: auto !important;
}

/* Obal menu ze šablony ořezával přesah – pás by skončil na hraně obsahu */
.type-detail .shp-tabs-wrapper .shp-tabs-holder {
    overflow: visible !important;
}

.type-detail .shp-tabs-wrapper #p-detail-tabs li a,
.pd-menu-pevne a {
    font-size: .9375rem !important;
    font-weight: 500;
    color: var(--pd-text2) !important;
    text-decoration: none;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
    transition: color .15s linear;
}

.type-detail .shp-tabs-wrapper #p-detail-tabs li a:hover,
.type-detail .shp-tabs-wrapper #p-detail-tabs li a:focus-visible,
.pd-menu-pevne a:hover,
.pd-menu-pevne a:focus-visible {
    color: var(--primary-color) !important;
}

.type-detail .shp-tabs-wrapper #p-detail-tabs li a.is-aktivni,
.pd-menu-pevne a.is-aktivni {
    color: var(--text-color) !important;
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
}

.pd-menu-pevne {
    position: fixed;
    left: 0;
    right: 0;
    /* hned pod přilepenou hlavičkou (blok 12) */
    top: var(--hlavicka-vyska, 80px);
    /* pod hlavičkou (1000) i ztmavením otevřeného hledání (999) – s 9500
       se podmenu Postele z hlavičky schovalo pod tohle menu */
    z-index: 998;
    background: var(--secondary-color);
    box-shadow: 0 6px 16px rgba(17, 14, 10, .06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}

.pd-menu-pevne.is-videt {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s, transform .2s, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .pd-menu-pevne,
    .pd-menu-pevne.is-videt {
        transition: none;
        transform: none;
    }
}

.pd-menu-pevne__vnitrek {
    display: flex;
    justify-content: flex-start;
    gap: clamp(20px, 2.2vw, 40px);
    max-width: 1640px;
    margin: 0 auto;
    padding: 0 15px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pd-menu-pevne__vnitrek::-webkit-scrollbar {
    display: none;
}

.pd-menu-pevne a {
    flex: 0 0 auto;
    padding: 16px 0;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .type-detail .shp-tabs-wrapper #p-detail-tabs,
    .pd-menu-pevne__vnitrek {
        gap: 24px;
    }

    .pd-menu-pevne a {
        padding: 13px 0;
    }
}


/** ==========================================================================
 ** DETAIL PRODUKTU – Časté otázky (initCasteOtazky)
 ** ==========================================================================
 ** Otázky ze stránky /faq/, všechny najednou ve dvou sloupcích. Nad každou
 ** kategorií drobný hnědý nadpis velkými písmeny, otázky oddělují linky
 ** ve světlé meruňce, rozbalují se plusem vpravo (nativní <details>).
 ** Sloupce se rozbalují nezávisle – otevřená odpověď neodsune ten druhý.
 ** ========================================================================== */

.pd-faq-wrapper .homepage-group-title.h4,
.pd-onas-wrapper .homepage-group-title.h4 {
    padding-top: 0 !important;
    text-align: center;
}

.pd-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0 64px;
    margin-top: var(--sekce-mezera);
}

.pd-faq__skupina + .pd-faq__skupina {
    margin-top: 40px;
}

.type-detail .pd-faq__kategorie-nazev {
    margin: 0 !important;
    padding: 0 0 12px;
    font-size: .75rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary-color);
    border-bottom: 1px solid var(--tertiary-color);
}

.pd-faq__polozka {
    border-bottom: 1px solid var(--tertiary-color);
}

.pd-faq__otazka {
    position: relative;
    display: block;
    padding: 18px 44px 18px 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-color);
    list-style: none;
    cursor: pointer;
    transition: color .15s linear;
}

.pd-faq__otazka::-webkit-details-marker {
    display: none;
}

/* Plus vpravo, po rozbalení se otočí na křížek – bez posunu textu */
.pd-faq__otazka::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: var(--primary-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s ease-out;
}

.pd-faq__polozka[open] > .pd-faq__otazka::after {
    transform: rotate(45deg);
}

.pd-faq__otazka:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.pd-faq__odpoved {
    padding: 0 44px 20px 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--pd-text2);
}

.pd-faq__odpoved p {
    margin: 0 0 12px;
}

.pd-faq__odpoved > :last-child {
    margin-bottom: 0;
}

.pd-faq__odpoved strong {
    font-weight: 600;
    color: var(--text-color);
}

.pd-faq__odpoved a {
    color: var(--primary-color);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .pd-faq__otazka::after {
        transition: none;
    }
}

@media (max-width: 991.98px) {
    .pd-faq {
        grid-template-columns: 1fr;
    }

    .pd-faq__sloupec + .pd-faq__sloupec {
        margin-top: 40px;
    }

    .pd-faq__otazka {
        padding: 16px 40px 16px 0;
    }

    .pd-faq__odpoved {
        padding-right: 0;
    }
}


/** ==========================================================================
 ** DETAIL PRODUKTU – „Tvoříme interiéry na míru už 25 let" (initONasDetail)
 ** ==========================================================================
 ** Mezi recenzemi a bannerem „Potřebujete poradit". Bílé pozadí, nadpis
 ** na střed jako ostatní sekce. Vlevo mozaika čtyř
 ** fotek (tým přes dva sloupce nahoře, rodina přes dva dole), vpravo úvod,
 ** tři důvody s ikonami a dvě tlačítka: hlavní hnědé, vedlejší ve světlé
 ** meruňce.
 ** ========================================================================== */

/* Nad blokem končí zelený pás recenzí – odstup sekce shora i zdola */
.pd-onas-wrapper {
    padding: var(--sekce-odsazeni) 0;
    background: #fff;
}

.pd-onas {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
    margin-top: var(--sekce-mezera);
}

/* Dvě řady: široká fotka 2 : 1 vedle čtverce a obráceně. Šířky jsou
   v poměru 2 : 1 (flex 2 a 1) a výšku dopočítá aspect-ratio – obě fotky
   v řadě tak vyjdou stejně vysoké a přesně ve svém poměru, bez ořezu,
   na jakékoli šířce. Fotky mají 1200 × 600 a 600 × 600 px. */
.pd-onas__rada {
    display: flex;
    gap: 12px;
}

.pd-onas__rada + .pd-onas__rada {
    margin-top: 12px;
}

.pd-onas__fotky img {
    display: block;
    min-width: 0;
    height: auto !important;
    object-fit: cover;
}

.pd-onas__foto--siroka {
    flex: 2 1 0;
    aspect-ratio: 2 / 1;
}

.pd-onas__foto--ctverec {
    flex: 1 1 0;
    aspect-ratio: 1 / 1;
}

.pd-onas__uvod {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color);
}

.pd-onas__uvod + .pd-onas__uvod {
    margin-top: 12px;
}

.pd-onas__uvod strong {
    font-weight: 600;
}

.pd-onas__duvody {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 28px 0 32px;
    padding: 28px 0 0;
    list-style: none;
    border-top: 1px solid var(--tertiary-color);
}

.pd-onas__duvod {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin: 0;
}

.pd-onas__ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--primary-color);
    background: var(--secondary-color);
}

.pd-onas__duvod-nazev {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color);
}

.pd-onas__duvod-text {
    display: block;
    margin-top: 2px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pd-text2);
}

.pd-onas__tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pd-onas__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 28px;
    font-family: var(--template-font);
    font-size: var(--text-drobny);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 0;
    transition: var(--prechod-tlacitka);
}

.pd-onas__btn--hlavni {
    color: #fff !important;
    background: var(--primary-color);
}

.pd-onas__btn--hlavni:hover,
.pd-onas__btn--hlavni:focus-visible {
    background: #a9571f;
    background: color-mix(in srgb, var(--primary-color) 88%, #000);
}

.pd-onas__btn--vedlejsi {
    color: var(--primary-color) !important;
    background: var(--secondary-color);
}

/* Stejně jako „Celý popis produktu": při najetí hnědá plocha, bílý text */
.pd-onas__btn--vedlejsi:hover,
.pd-onas__btn--vedlejsi:focus-visible {
    color: #fff !important;
    background: var(--primary-color);
}

.pd-onas__btn:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    /* minmax(0, …) – jinak by sloupec držel plnou šířku fotek (1200 px) */
    .pd-onas {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

@media (max-width: 575.98px) {
    /* Mobil: široké fotky přes celou šířku, čtverce vedle sebe mezi nimi */
    .pd-onas__fotky {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .pd-onas__rada {
        display: contents;
    }

    .pd-onas__foto--siroka {
        grid-column: 1 / -1;
        width: 100%;
    }

    .pd-onas__foto--ctverec {
        width: 100%;
    }

    .pd-onas__tlacitka .pd-onas__btn {
        flex: 1 1 0;
        padding: 14px 12px;
        text-align: center;
    }
}

/* Úzký mobil: tlačítka pod sebou přes celou šířku – vedle sebe se
   „Interiér na míru" lámalo na dva řádky */
@media (max-width: 479.98px) {
    .pd-onas__tlacitka {
        flex-direction: column;
    }

    .pd-onas__tlacitka .pd-onas__btn {
        flex: 0 0 auto;
        width: 100%;
    }
}


/** ==========================================================================
 ** DETAIL PRODUKTU – Doživotní záruka (initZaruka)
 ** ==========================================================================
 ** Přes celou šířku webu na bílém pozadí: vlevo velký odznak záruky
 ** (assets/img/usp-stitky/usp-stitek-zaruka.svg), vpravo text s odkazem přes
 ** zbytek šířky webu. Na mobilu pod sebou.
 ** ========================================================================== */

.pd-zaruka {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: center;
    gap: 64px;
    margin-top: var(--sekce-mezera);
}

.pd-zaruka__odznak {
    display: block;
    width: 280px;
    height: 280px !important;
}

.pd-zaruka__text {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color);
}

.pd-zaruka__text strong {
    font-weight: 600;
}

/* „Nosnost 500 kg, to je například:" – čtyři čtvercové dlaždice na světlé
   meruňce, velké číslo hnědě, popis pod ním */
.pd-zaruka__priklady-nadpis {
    margin: 8px 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.pd-zaruka__priklady {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.pd-zaruka__priklad {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 16px 20px;
    background: var(--secondary-color);
}

.pd-zaruka__priklad::before {
    content: none !important;
}

.pd-zaruka__cislo {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

.pd-zaruka__popis {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text-color);
}

.pd-zaruka__odkaz {
    display: inline-block;
    margin-top: 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1199.98px) {
    .pd-zaruka {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 40px;
    }

    .pd-zaruka__odznak {
        width: 220px;
        height: 220px !important;
    }
}

@media (max-width: 767.98px) {
    .pd-zaruka {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 24px;
    }

    .pd-zaruka__odznak {
        width: 160px;
        height: 160px !important;
    }

    .pd-zaruka__obsah {
        justify-self: stretch;
    }

    .pd-zaruka__priklady {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .pd-zaruka__priklad {
        padding: 14px 16px;
    }

    .pd-zaruka__cislo {
        font-size: 1.5rem;
    }
}



/* Naše ikony (assets/icons, assets/img/flags) v průběhu objednávky
   a v „Upravíme na míru" – SVG jako maska, barva z currentColor */
.pd-ikona {
    display: block;
    width: 28px;
    height: 28px;
    background: currentColor;
    -webkit-mask: var(--ikona) center / contain no-repeat;
    mask: var(--ikona) center / contain no-repeat;
}

.pd-vyroba__ikona .pd-ikona,
.pd-onas__ikona .pd-ikona {
    width: 24px;
    height: 24px;
}


/* Příslušenství: bublina (i) u názvu skrytá – její text ukazuje náhled
   v lupě (initNahledVzorku) */
body.type-product .product-conf__row[data-merged="true"] .product-conf__name .product-conf__info {
    display: none !important;
}


/** ==========================================================================
 ** DETAIL PRODUKTU – zvětšení fotek (initZvetseniFotek)
 ** ==========================================================================
 ** Stejné okno jako náhled dekoru (#vzorekPopup): bez hlavičky, bílá karta
 ** s odsazením 24 px, křížek vpravo nahoře. Fotka 4:3 celá (contain), pod
 ** ní pořadí ve stylu štítku náhledu a čtvercové šipky jako tlačítka webu.
 ** ========================================================================== */


#fotoPopup .modal-container.no-header .modal-body {
    max-height: none;
    overflow: visible;
}

#fotoPopup .modal-close {
    width: 40px;
    height: 40px;
    color: var(--text-color);
    background: #fff;
}

.foto-nahled__foto {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(17, 14, 10, .08);
    touch-action: pan-y;
}

.foto-nahled__foto img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}



.foto-nahled__sipky {
    display: flex;
    gap: 8px;
}

.foto-nahled__sipka {
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid var(--tertiary-color);
    border-radius: 0;
    cursor: pointer;
    transition: var(--prechod-tlacitka);
}

.foto-nahled__sipka::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: auto;
    background: currentColor;
    -webkit-mask: url('/user/documents/assets/ui-ikony/sipka-vlevo.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/sipka-vlevo.svg') center / contain no-repeat;
}

.foto-nahled__sipka--dal::before {
    transform: rotate(180deg);
}

.foto-nahled__sipka:hover,
.foto-nahled__sipka:focus-visible {
    background: var(--secondary-color);
}

/* Hlavní fotka i náhledy se dají rozkliknout */
body.type-product .p-detail .p-image,
body.type-product .p-detail .p-image a {
    cursor: zoom-in;
}

@media (max-width: 575.98px) {
    #fotoPopup .modal-container.no-header .modal-body {
        padding: 16px !important;
    }
}


/* Hvězdičky u „Hodnocení" v menu sekcí */
.pd-menu-hvezdy {
    margin-left: 6px;
    font-size: .875rem;
    letter-spacing: 1px;
    color: #e5c84d;
    text-decoration: none;
    display: inline-block;
}

.pd-menu-hvezdy__prazdne {
    color: var(--pd-prvek, #DBDBDA);
}


/** ==========================================================================
 ** DETAIL PRODUKTU – sjednocení typografie a tlačítek
 ** ==========================================================================
 ** Kontrola celého detailu (ui-ux-pro-max: jednotná typografická škála,
 ** stejné prvky vypadají stejně). Bloky vznikaly postupně a rozjely se:
 **   – běžný text 16 / 17 px a řádkování 1,7 / 1,75 → vše 16 px / 1,7,
 **     barva uhlí (krátký popis měl čistou černou),
 **   – šedý doplňkový text 15 px s řádkováním 1,5–1,7 → 16 px / 1,6
 **     (celý web: běžný text 16 px, drobný 14 px),
 **   – podnadpisy sekcí měly jinou šedou (#6f645b) než ostatní šedý
 **     text → #585653 jako všude na detailu (titulka beze změny),
 **   – drobné štítky verzálkami 11 / 12 / 13 px → 12 px, prostrkání .06em,
 **   – vedlejší tlačítka vysoká 44 / 45 / 48 px → 48 px jako „Zeptat se",
 **     hlavní tlačítka menší velikosti 14 px / 600 (lišta měla 15 px,
 **     „Interiér na míru" 500).
 ** Rozestupy sekcí (72 px mezi sekcemi, 36 px nadpis → obsah) jsou
 ** přeměřené a sedí všude.
 ** ========================================================================== */

/* Běžný text */
body.type-product .p-short-description p,
body.type-product .p-short-description li,
.pd-popis__obsah,
.pd-zaruka__text,
.pd-onas__uvod {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--text-color) !important;
}

/* Šedý doplňkový text */
.pd-postup__text,
.pd-faq__odpoved,
.pd-onas__duvod-text,
.pd-vyroba__zaver,
#vzorekPopup .vzorek-nahled__popis {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--pd-text2) !important;
}

/* Podnadpisy sekcí stejnou šedou jako ostatní šedý text na detailu */
body.type-product .homepage-group-title .section-desc {
    color: var(--pd-text2) !important;
}

/* Drobné štítky verzálkami */
.pd-postup__cislo,
.type-detail .pd-faq__kategorie-nazev,
#vzorekPopup .vzorek-nahled__stitek {
    font-size: .75rem !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
    color: var(--primary-color) !important;
}

/* Vedlejší tlačítka 48 px */
.p-short-description a.p-popis-btn,
.p-short-description a.p-parametry-btn {
    min-height: 48px;
}

/* Hlavní tlačítka menší velikosti (lišta na mobilu má vlastní 13 px) */
.pd-onas__btn--hlavni {
    font-weight: 600 !important;
}

@media (min-width: 768px) {
    .pd-lista__btn {
        font-size: var(--text-drobny) !important;
        font-weight: 600 !important;
    }
}


/* Konfigurátor na mobilu: vedle 64px vzorku zbývalo na název dekoru jen
   ~67 px a lámal se po slovech do 3–4 řádků. Dekory proto svisle – vzorek
   jako pruh přes celou šířku dlaždice, pod ním název a cena; příslušenství
   (dlouhé názvy) v jednom sloupci. */
@media (max-width: 575.98px) {
    body.type-product .product-conf__row[data-grouped="true"] .product-conf__item {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    body.type-product .product-conf__row[data-grouped="true"] .product-conf__img {
        width: 100%;
        height: 64px;
        flex: none;
    }

    body.type-product .product-conf__row[data-grouped="true"] .product-conf__item[data-func] .product-conf__img::before {
        inset: 14px;
    }

    body.type-product .product-conf__row[data-merged="true"] .product-conf__items {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Textové odkazy v sekcích („Zeptat se na úpravu", „Zjistit více
   o doživotní záruce") – při najetí ztmavnou do barvy textu, stejně
   jako ostatní hnědé odkazy */
.pd-vyroba__odkaz,
.pd-zaruka__odkaz {
    transition: color .15s linear, text-decoration-color .15s linear;
}

.pd-vyroba__odkaz:hover,
.pd-vyroba__odkaz:focus-visible,
.pd-zaruka__odkaz:hover,
.pd-zaruka__odkaz:focus-visible {
    color: var(--text-color) !important;
}


/* Konfigurátor pod fotkou (okno do 946 px): náhledy malé, pět v řadě
   (1/5 šířky hlavní fotky), mezi nimi i ta, která je právě velká –
   s hnědým rámečkem. Klik náhled vymění za hlavní fotku (šablona),
   zvětšení otevře až klik na hlavní fotku. */
@media (max-width: 946.98px) {
    .p-detail .p-thumbnails-wrapper {
        margin-top: 8px !important;
    }

    .p-detail .p-thumbnails-inner > div {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }

    .p-detail .p-thumbnails a.p-thumbnail {
        cursor: pointer;
        outline: 1px solid transparent;
        outline-offset: -1px;
        transition: outline-color .15s linear, opacity .15s linear;
    }

    .p-detail .p-thumbnails a.p-thumbnail:hover {
        outline-color: var(--pd-linka);
    }

    .p-detail .p-thumbnails a.p-thumbnail.highlighted {
        display: block !important;
        outline: 2px solid var(--primary-color);
        outline-offset: -2px;
    }
}

@media (max-width: 575.98px) {
    .p-detail .p-thumbnails-inner > div {
        gap: 6px;
    }
}

/* Zvětšení fotek: na desktopu bez pořadí a šipek – listuje se šipkami na
   klávesnici; na mobilu zůstávají (tažení prstem + tlačítka) */


/** ==========================================================================
 ** DETAIL PRODUKTU – mobil a lišta výhod (doladění)
 ** ========================================================================== */

/* Spodní lišta: kratší text tlačítka na mobilu („Konfigurovat",
   „Do košíku") */
.pd-lista__txt-kratky {
    display: none;
}

/* Lišta výhod („Proč už více jak 12 000 klientů…") jako sekce: nad
   nadpisem 72 px, nadpis → výhody 36 px, výhody → menu 72 px
   (mobil 36 / 22 / 36) */
.type-detail .benefitBanner.position--benefitHomepage {
    margin-top: var(--sekce-mezera) !important;
    margin-bottom: 0 !important;
}

.type-detail .p-detail + .shp-tabs-wrapper,
.type-detail .shp-tabs-wrapper.p-detail-tabs-wrapper {
    margin-top: var(--sekce-odsazeni) !important;
}

@media (max-width: 767.98px) {
    /* Zeptat se na konfiguraci bez ikony – na úzkém tlačítku překážela */
    body.type-product .product-conf__ask::before {
        display: none !important;
    }

    /* Rozměr a výška přes celou šířku – v úzkém poli se text nedal číst */
    body.type-product .product-conf .product-conf__select,
    body.type-product .product-conf .product-conf__select select {
        width: 100%;
        max-width: none;
    }

    /* Pás menu vyšší – 48 px, pohodlné na palec */
    .type-detail .shp-tabs-wrapper #p-detail-tabs {
        padding: 0 15px !important;
        align-items: center;
    }

    .type-detail .shp-tabs-wrapper #p-detail-tabs li a {
        display: flex !important;
        align-items: center;
        min-height: 52px;
    }

    /* Spodní lišta nižší: jen cena a tlačítko, krátký text */
    .pd-lista__info {
        display: none;
    }

    .pd-lista__cena {
        grid-row: 1 / span 2;
        align-self: center;
    }

    .pd-lista__vnitrek {
        padding: 8px 15px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .pd-lista__btn {
        min-height: 40px;
        padding: 8px 16px;
    }

    .pd-lista__txt {
        display: none;
    }

    .pd-lista__txt-kratky {
        display: inline;
    }

    body.ma-listu {
        padding-bottom: 60px;
    }
}

/* Menu hned pod lištou výhod – šablona mu přidávala ještě 20 px shora */
.type-detail .p-detail-tabs-wrapper .shp-tabs-row {
    margin-top: 0 !important;
}

@media (max-width: 767.98px) {
    /* Výběr přes obě buňky mřížky voleb */
    body.type-product .product-conf .product-conf__items > .product-conf__select {
        grid-column: 1 / -1;
    }

    /* Tlačítka pod popisem → upozornění 28 px jako upozornění → krok 1.
       Mezi sloupci je na mobilu 20 px mezera, upozornění dodá zbytek. */
    body.type-product .alert-beton {
        margin-top: 8px;
    }

    /* Nad nadpisem „Proč už…" 36 px jako mezi ostatními sekcemi
       (produktový blok končí 24 px pod posledním prvkem) */
    .type-detail .benefitBanner__nadpis.homepage-group-title.h4 {
        margin-top: 12px !important;
    }
}

@media (max-width: 767.98px) {
    /* Přichycené menu pod hlavičkou taky o kus vyšší (48 px) */
    .pd-menu-pevne a {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
}

@media (min-width: 768px) {
    /* Nad nadpisem „Proč už…" 72 px jako mezi sekcemi (produktový blok
       končí 64 px pod galerií) */
    .type-detail .benefitBanner__nadpis.homepage-group-title.h4 {
        margin-top: 8px !important;
    }
}


/** --- Štítek „Povinné" u nevyplněného kroku --------------------------------
 ** Fialový text (bez rámečku) jako upozornění nad konfigurátorem, jen po
 ** pokusu o přidání do košíku s chybějícím krokem; každé ~2,5 s lehce cukne,
 ** dokud zákazník krok nevyplní (JS pak třídu has-error sundá).
 ** Na užších obrazovkách (do 1199 px) je štítek pod nadpisem – v řádku by
 ** se nadpis zalomil a (i) by odskočilo na konec bloku. */
body.type-product .product-conf__row.has-error .product-conf__value {
    font-weight: 700;
    color: #bba9e2;
    background: none;
    animation: povinne-cuknuti 2.4s ease-in-out .4s infinite;
}

/* Bez chyby štítek není vidět nikdy – ani „Povinné", ani „Volitelné" */
body.type-product .product-conf__row:not(.has-error) .product-conf__value {
    display: none !important;
}

@keyframes povinne-cuknuti {
    0%, 72%, 100% { transform: translateX(0); }
    76% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
    84% { transform: translateX(-2px); }
    88% { transform: translateX(2px); }
    92% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    body.type-product .product-conf__row.has-error .product-conf__value {
        animation: none;
    }
}

@media (max-width: 1199.98px) {
    body.type-product .product-conf .product-conf__row h3 {
        display: grid;
        grid-template-columns: 28px auto auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        column-gap: 12px;
        row-gap: 8px;
    }

    body.type-product .product-conf .product-conf__row h3 .product-conf__value {
        grid-column: 2 / -1;
        grid-row: 2;
        margin-left: 0;
    }
}

/* Lupa šablony (cloud-zoom) při přejetí po hlavní fotce – na mobilu
   a tabletu (a na dotykových zařízeních) pryč. Klik / ťuknutí dál otevře
   zvětšení fotky (initZvetseniFotek). */
@media (max-width: 1024px), (hover: none) {
    body.type-product .p-image .mousetrap,
    body.type-product #cloud-zoom-big,
    body.type-product .cloud-zoom-big,
    body.type-product .cloud-zoom-lens,
    body.type-product .cloud-zoom-title {
        display: none !important;
    }
}


/** ==========================================================================
 ** DETAIL PRODUKTU – produkty bez konfigurátoru (matrace, doplňky)
 ** ========================================================================== */

/* Kód a dostupnost „Zvolte variantu" dokud varianta není zvolená jen
   zahlcovaly – kód je skrytý jako u postelí, dostupnost se ukáže až
   k vybrané variantě */
body.type-product .p-info-wrapper .p-code {
    display: none !important;
}

body.type-product .availability-value:has(> .default-variant:not(.noDisplay)) {
    display: none !important;
}

/* „Přidat do košíku" stejně jako u postelí: velká písmena, 16 px 600,
   přes zbytek řádku vedle množství */
body.type-product .p-info-wrapper .add-to-cart {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

body.type-product .p-info-wrapper .add-to-cart .add-to-cart-button {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    min-height: 56px;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase;
}

/* „Zeptat se na produkt" (produkty bez konfigurátoru) – najetí jako
   u „Zeptat se na tuto konfiguraci" */
body.type-product .pd-zeptat-jednoduchy:hover,
body.type-product .pd-zeptat-jednoduchy:focus-visible {
    background: var(--secondary-color);
}

/* Cena nad „Přidat do košíku" (JS ji přesune a dá jí .pd-cena-dole) –
   hnědá jako celková cena v souhrnu postelí, bez DPH drobně pod ní */
body.type-product .p-info-wrapper .pd-cena-dole {
    order: 0 !important;
    margin: 28px 0 12px !important;
    padding: 0 !important;
}

body.type-product .pd-cena-dole .price-final {
    font-size: 1.625rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    color: var(--primary-color) !important;
}

body.type-product .pd-cena-dole .price-additional,
body.type-product .pd-cena-dole .price-measure {
    font-size: .875rem;
    color: var(--pd-text2);
}

@media (max-width: 767.98px) {
    /* Varianty → cena 28 px (na mobilu je mezi sloupci ještě 20 px),
       cena → tlačítko 12 px bez vnitřního odsazení šablony */
    body.type-product .p-info-wrapper .pd-cena-dole {
        margin: 8px 0 12px !important;
    }

    body.type-product .p-info-wrapper .add-to-cart {
        padding-top: 0 !important;
        gap: 8px;
    }

    /* „Přidat do košíku" v jednom řádku */
    body.type-product .p-info-wrapper .add-to-cart .add-to-cart-button {
        padding: 0 12px !important;
        font-size: .875rem !important;
        white-space: nowrap;
    }
}

@media (max-width: 575.98px) {
    /* Detail produktu / Parametry / Příběhy klientů – na mobilu pod sebou
       stejně široké (dřív tři různé šířky), rozestup 8 px */
    body.type-product .p-short-description a.p-popis-btn,
    body.type-product .p-short-description a.p-parametry-btn {
        display: flex !important;
        justify-content: center;
        width: 100%;
    }

    body.type-product .p-short-description a.p-parametry-btn {
        margin: 8px 0 0 !important;
    }
}


/** ==========================================================================
 ** 4. VLNA
 ** ==========================================================================
 ** Úpravy 4. vlny jsou pohromadě tady na konci, aby šly snadno dohledat
 ** a aby přebily starší pravidla bez dalšího zvyšování specifičnosti.
 ** ========================================================================== */


/** --- 1) Videa: náhled místo přehrávače ----------------------------------- */
/* Přehrávač YouTube se načte až po kliknutí (youtubeNahledHtml v JS).
   Do té doby je na jeho místě obrázek s tlačítkem – hranaté terakotové
   tlačítko jako ostatní akce na webu, ne červené logo YouTube. */
.yt-nahled {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}

.yt-nahled__obrazek {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s ease;
}

.yt-nahled__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    background: var(--primary-color);
    transition: background-color .2s ease;
}

/* Trojúhelník „přehrát", opticky posunutý doprava (jeho těžiště není ve středu) */
.yt-nahled__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-35%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
}

.yt-nahled:hover .yt-nahled__obrazek,
.yt-nahled:focus-visible .yt-nahled__obrazek {
    opacity: .85;
}

.yt-nahled:hover .yt-nahled__play,
.yt-nahled:focus-visible .yt-nahled__play {
    background: #a5521d;
}

.yt-nahled:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

/* Běžná videa (popisy produktů, články) na šířku 16:9, na střed */
.yt-nahled--sirka {
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

.yt-prehravac {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.yt-prehravac--sirka {
    height: auto;
    aspect-ratio: 16 / 9;
}

@media (max-width: 797px) {
    .yt-nahled__play {
        width: 52px;
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yt-nahled__obrazek,
    .yt-nahled__play {
        transition: none;
    }
}


/** --- 2) Název produktu v kartě celý -------------------------------------- */
/* Šablona zkracuje název na dva řádky (line-clamp). Na mobilu je karta
   úzká a delší názvy („Zavěšená patrová postel, rohová, s peřiňákem –
   dvoulůžko") končily trojtečkou uprostřed – zákazník nepoznal, která
   varianta to je. Název se proto vypíše celý, ve všech výpisech: titulka,
   kategorie, nejprodávanější i související produkty na detailu. */
.products-block .product .p .name,
.products-block .product .p .name span,
.products-top-wrapper .product .name,
.products-top-wrapper .product .name span,
.products-related .product .name,
.products-related .product .name span {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: none !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    text-overflow: clip !important;
}


/** --- 3) Příběhy klientů: zkrácený text a posuvný pás na mobilu ----------- */
/* Jedna dlouhá recenze natahovala celou řadu karet. Text se zkrátí
   a zbytek otevře tlačítko „Číst dál" – to JS ukáže jen u recenzí,
   které se opravdu nevešly (initCistDal). */
.hp-review__text {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp-review.is-rozbaleno .hp-review__text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
    overflow: visible;
}

/* Textové tlačítko, ale s plochou 44 px na dotyk */
.hp-review__vice {
    align-self: flex-start;
    min-height: 44px;
    margin: 4px 0 -12px;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--text-drobny);
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.hp-review__vice:hover {
    color: #a5521d;
}

.hp-review__vice:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hp-review__vice[hidden] {
    display: none;
}

/* Mobil: všechny recenze v pásu, který se posouvá prstem do stran.
   Karta má 85 % šířky, takže kus další vykukuje a je vidět, že pás
   pokračuje. Pás jde až k okrajům displeje (záporný okraj = odsazení
   kontejneru), první karta ale začíná zarovnaná s nadpisem. */
@media (max-width: 797px) {
    /* justify-content: blok pro ≤1200 px mřížku centruje – v pásu by
       centrování posunulo první kartu mimo dosah posuvníku */
    .hp-reviews {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 12px;
        margin-left: calc(-1 * var(--pas-okraj, 20px));
        margin-right: calc(-1 * var(--pas-okraj, 20px));
        /* zespodu nic – odstup drží obal sekce (.hp-reviews-wrapper) */
        padding: 0 var(--pas-okraj, 20px) !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--pas-okraj, 20px);
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .hp-reviews::-webkit-scrollbar {
        display: none;
    }

    .hp-review,
    .hp-review:nth-child(n+3) {
        display: flex !important;
        /* strop 340 px – pás platí až do 797 px a na tabletu by jedna
           karta zabrala skoro celou šířku */
        flex: 0 0 min(85%, 340px);
        scroll-snap-align: start;
    }

    .hp-review__text {
        -webkit-line-clamp: 7;
        line-clamp: 7;
    }

    /* Videa stejně jako recenze: pás posouvaný prstem do stran. Video je
       na výšku 9 : 16, karta proto jen 62 % (strop 240 px) – vedle sebe je
       vidět jedno celé a kus dalšího a pás nebude vyšší než displej.
       Odstup zespodu drží .hp-videos (padding-bottom), mění se jen boky. */
    .hp-videos {
        display: flex !important;
        gap: 12px;
        margin-left: calc(-1 * var(--pas-okraj, 20px));
        margin-right: calc(-1 * var(--pas-okraj, 20px));
        padding-left: var(--pas-okraj, 20px) !important;
        padding-right: var(--pas-okraj, 20px) !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--pas-okraj, 20px);
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .hp-videos::-webkit-scrollbar {
        display: none;
    }

    .hp-video {
        flex: 0 0 min(62%, 240px);
        scroll-snap-align: start;
    }
}


/** --- 4) „Tvoříme interiéry na míru už 25 let" na titulce ------------------ */
/* Titulka má od 4. vlny stejný blok jako detail (.pd-onas). Barvy, které
   má detail nastavené na body.type-product, se tu doplní na obal bloku. */
.pd-onas-wrapper {
    --pd-text2: #585653;
}

/* Shora odsazují novinky svým spodním okrajem, sekce sama jen zdola */
.hp-onas-wrapper {
    padding-top: 0 !important;
}


/** --- 5) Detail: zvolená pozice v rohu hlavní fotky ----------------------- */
/* Fotky ukazují jen jednu stranu postele – štítek říká, která pozice je
   právě zvolená (initStitekVarianty). Na klik nereaguje, fotka pod ním
   se dál otevírá ve zvětšení. */
body.type-product .p-detail .p-image {
    position: relative;
}

.pd-varianta-stitek {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 7px 12px;
    font-size: var(--text-drobny);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: var(--primary-color);
    pointer-events: none;
}

.pd-varianta-stitek[hidden] {
    display: none;
}

/* Na náhledech menší. Náhled je odkaz – štítek se pozicuje k němu. */
.p-thumbnails a.p-thumbnail {
    position: relative;
}

.pd-varianta-stitek--nahled {
    top: 6px;
    right: 6px;
    padding: 4px 7px;
    font-size: .75rem;
}

/* Pod 947 px jsou náhledy malé v řadě (60–80 px) – štítek by zakryl
   půl fotky, stačí ten na hlavní fotce */
@media (max-width: 946.98px) {
    .pd-varianta-stitek--nahled {
        display: none;
    }
}

@media (max-width: 797px) {
    .pd-varianta-stitek {
        top: 8px;
        right: 8px;
        padding: 5px 10px;
        font-size: .75rem;
    }
}


/** --- 6) Ceny zvolených voleb vždy na jednom řádku ------------------------ */
/* Cena měla pevných 18 % šířky a na mobilu se lámala („1 000" / „Kč").
   Teď si vezme, kolik potřebuje, a zalomit se smí jen název volby. */
.product-conf__selecteditem .name {
    flex: 1 1 auto;
    min-width: 0;
}

.product-conf__selecteditem .price,
.product-conf__price,
.product-conf__prices .price {
    flex: 0 0 auto;
    white-space: nowrap;
}


/** --- 7) Větší plochy na ťuknutí (mobil) ---------------------------------- */
/* Ikony v hlavičce (33 × 34 px), (i) v konfigurátoru (22 × 22 px) a lupa
   u dekorů (24 × 24 px) byly menší než doporučených 44 × 44 px. Vzhled
   zůstává – zvětšuje se jen neviditelná klikací plocha (pseudoprvek
   na střed ikony). Jen pro dotykové ovládání: myší by větší plocha
   u (i) zbytečně chytala najetí vedle ikony. */
@media (pointer: coarse), (max-width: 991.98px) {
    header a.toggle-window::after,
    .product-conf__info--btn::after,
    body.type-product .product-conf .product-conf__img button::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    .product-conf__info--btn {
        position: relative;
    }
}


/** --- 8) Zvětšená fotka: šipky a křížek na fotce ------------------------ */
/* Ovládání leží přímo na fotce a všechny tři prvky jsou stejné: čtverec
   48 px (na mobilu 44 px – dotykové minimum), bílý s linkou, 12 px od
   okraje fotky. Šipky na svislém středu, křížek v pravém horním rohu –
   lícují spolu i s okrajem fotky. Při najetí se vybarví hnědou jako
   ostatní tlačítka webu.
   Pořadí „Fotka 2 z 5" pod fotkou zmizelo, okno je tak jen bílý rámeček
   24 px kolem fotky 4:3. Šířka okna se odvozuje od výšky okna prohlížeče,
   aby se fotka vešla celá i na nízkých displejích (1440 × 900). */
#fotoPopup {
    --foto-ovladani: 48px;
    --foto-odsazeni: 12px;
    --foto-ramecek: 24px;
}

#fotoPopup .modal-container {
    max-width: min(1160px, calc((90vh - 2 * var(--foto-ramecek)) * 4 / 3 + 2 * var(--foto-ramecek)));
}

/* Bílý rámeček kolem fotky – z téže proměnné se počítá poloha křížku */
#fotoPopup .modal-container.no-header .modal-body {
    padding: var(--foto-ramecek) !important;
}

#fotoPopup .foto-nahled__foto .foto-nahled__sipky {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--foto-odsazeni);
    right: var(--foto-odsazeni);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    pointer-events: none;
}

#fotoPopup .foto-nahled__sipka,
#fotoPopup .modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--foto-ovladani) !important;
    height: var(--foto-ovladani) !important;
    padding: 0;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid #DBDBDA;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(17, 14, 10, .10);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

#fotoPopup .foto-nahled__sipka::before {
    width: 20px;
    height: 20px;
    margin: 0;
}

/* Křížek: v rohu fotky (bílý rámeček okna + 12 px od okraje fotky) */
#fotoPopup .modal-close {
    position: absolute;
    top: calc(var(--foto-ramecek) + var(--foto-odsazeni)) !important;
    right: calc(var(--foto-ramecek) + var(--foto-odsazeni)) !important;
    z-index: 3;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

#fotoPopup .foto-nahled__sipka:hover,
#fotoPopup .modal-close:hover {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

#fotoPopup .foto-nahled__sipka:focus-visible,
#fotoPopup .modal-close:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}


/* Štítek pozice ve zvětšení: vlevo nahoře, ať se nepere s křížkem */
#fotoPopup .foto-nahled__stitek {
    top: var(--foto-odsazeni);
    right: auto;
    left: var(--foto-odsazeni);
}

/* Mobil: užší rámeček i okraj kolem okna – fotka je co nejširší */
@media (max-width: 575.98px) {
    #fotoPopup {
        --foto-ovladani: 44px;
        --foto-odsazeni: 8px;
        --foto-ramecek: 8px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #fotoPopup .foto-nahled__sipka,
    #fotoPopup .modal-close {
        transition: none;
    }
}



/** --- 9) Dotaz k produktu: formulář Webotvůrců ---------------------------- */
/* Formulář doplňku (initFormularWebotvurci) vypadá jako dřívější formulář
   Shoptetu: popisky 14 px tučně, pole 48 px s linkou #DBDBDA (dědí
   pravidla #colorbox .dotaz-caster .form-control výše), mezi poli 16 px,
   e-mail s telefonem vedle sebe. Navíc výběr fotky a zaškrtávací souhlas. */

/* Mřížka doplňku: řádky i skupiny měly každý vlastní okraj (14 + 14 +
   2 × 4 px) – mezera mezi poli tak byla skoro dvojnásobná. Rytmus teď
   drží jen skupina pole. */
#colorbox .dotaz-caster .dotaz-wt .formeo-row-wrap,
#colorbox .dotaz-caster .dotaz-wt .formeo-row,
#colorbox .dotaz-caster .dotaz-wt .formeo-column {
    margin: 0 !important;
    padding: 0 !important;
}

#colorbox .dotaz-caster .dotaz-wt .formeo-row {
    display: flex;
    gap: 16px;
}

#colorbox .dotaz-caster .dotaz-wt .formeo-column {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
}

#colorbox .dotaz-caster .dotaz-wt .f-field-group {
    margin: 0 0 16px !important;
}

/* Povinné pole: hvězdička hned za popiskem v barvě chyby */
#colorbox .dotaz-caster .dotaz-wt .text-error {
    margin-left: 2px;
    color: #9B2C17;
}

/* Pole „Produkt" vyplňuje skript, klient ho nevidí (produkt je na kartě) */
#colorbox .dotaz-caster .dotaz-wt .dotaz-wt__skryte {
    display: none !important;
}

/* Výběr fotky (initVyberFotky): jeden řádek vysoký jako ostatní pole
   (48 px) – ikona, „Přidat fotku prostoru" a šedé „nepovinné". Popisek
   nad polem odpadl, text řádku ho zastoupí. Po výběru název souboru
   a vpravo křížek na odebrání. Skutečné pole je skryté, ale dosažitelné
   z klávesnice – fokus se ukáže na řádku. */
#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__popisek,
body .formeo .foto-vyber .dotaz-soubor__popisek {
    display: none !important;
}

#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__input,
body .formeo .foto-vyber .dotaz-soubor__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Skupina drží křížek „odebrat" v pravé části řádku */
#colorbox .dotaz-caster .dotaz-wt .f-field-group:has(.dotaz-soubor),
body .formeo .foto-vyber {
    position: relative;
}

#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor,
body .formeo .foto-vyber label.dotaz-soubor {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 48px 0 14px;
    font-size: var(--text-zakladni) !important;
    font-weight: 400 !important;
    background: #fff;
    border: 1px dashed #A09F9D;
    cursor: pointer;
    transition: border-color .15s linear, background-color .15s linear;
}

/* Bez fotky není co odebírat – „nepovinné" sedí až u pravého okraje */
#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor:not(.is-vybrano),
body .formeo .foto-vyber label.dotaz-soubor:not(.is-vybrano) {
    padding-right: 14px;
}

#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor:hover,
body .formeo .foto-vyber label.dotaz-soubor:hover,
#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor.is-nad,
body .formeo .foto-vyber label.dotaz-soubor.is-nad {
    border-color: var(--primary-color);
    background: #FDF6F2;
}

#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__input:focus-visible + label.dotaz-soubor,
body .formeo .foto-vyber .dotaz-soubor__input:focus-visible + label.dotaz-soubor {
    border-color: var(--primary-color);
    outline: 3px solid var(--tertiary-color);
}

#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor.is-vybrano,
body .formeo .foto-vyber label.dotaz-soubor.is-vybrano {
    border-style: solid;
    border-color: #AEBF9B;
    background: #F5F8F1;
}

#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__ikona,
body .formeo .foto-vyber .dotaz-soubor__ikona {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M3 5h18v14H3z'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='16' cy='9' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M3 5h18v14H3z'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='16' cy='9' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor.is-vybrano .dotaz-soubor__ikona,
body .formeo .foto-vyber label.dotaz-soubor.is-vybrano .dotaz-soubor__ikona {
    background: #6f8a55;
}

#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__nazev,
body .formeo .foto-vyber .dotaz-soubor__nazev {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-color);
}

#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__nepovinne,
body .formeo .foto-vyber .dotaz-soubor__nepovinne {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .875rem;
    color: var(--pd-text2);
}

#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__nepovinne[hidden],
body .formeo .foto-vyber .dotaz-soubor__nepovinne[hidden] {
    display: none;
}

/* Křížek 48 × 48 px v pravé části řádku (dotyková plocha) */
#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__odebrat,
body .formeo .foto-vyber .dotaz-soubor__odebrat {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__odebrat::before,
body .formeo .foto-vyber .dotaz-soubor__odebrat::before {
    content: "";
    position: absolute;
    inset: 15px;
    background: var(--text-color);
    -webkit-mask: url('/user/documents/assets/ui-ikony/krizek.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/krizek.svg') center / contain no-repeat;
}

#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__odebrat:hover::before,
body .formeo .foto-vyber .dotaz-soubor__odebrat:hover::before,
#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__odebrat:focus-visible::before,
body .formeo .foto-vyber .dotaz-soubor__odebrat:focus-visible::before {
    background: var(--primary-color);
}

#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__odebrat[hidden],
body .formeo .foto-vyber .dotaz-soubor__odebrat[hidden],
#colorbox .dotaz-caster .dotaz-wt .dotaz-chyba[hidden] {
    display: none;
}

/* Souhlas: zaškrtávací políčko 20 px a celý text jako jedna klikací
   plocha (label k poli). Text drobný a šedý jako dřív u formuláře
   Shoptetu. Šablona skutečné pole schovává (nulová velikost) a čtverec
   kreslí přes label::before – na to se tu navazuje: čtverec v barvách
   webu, po zaškrtnutí hnědý s bílou fajfkou. */
#colorbox .dotaz-caster .dotaz-wt .f-checkbox {
    position: relative;
}

#colorbox .dotaz-caster .dotaz-wt .f-checkbox label {
    position: relative;
    display: block !important;
    min-height: 22px;
    margin: 0 !important;
    padding: 1px 0 0 32px !important;
    font-size: .875rem !important;
    font-weight: 400 !important;
    line-height: 1.55;
    color: var(--pd-text2) !important;
    cursor: pointer;
}

#colorbox .dotaz-caster .dotaz-wt .f-checkbox label::before {
    content: "" !important;
    position: absolute !important;
    top: 1px !important;
    left: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    /* šablona čtverec centruje posunem o půl výšky – tady sedí na prvním řádku */
    transform: none !important;
    background: #fff !important;
    border: 1px solid #A09F9D !important;
    border-radius: 0 !important;
    transition: background-color .15s linear, border-color .15s linear;
}

#colorbox .dotaz-caster .dotaz-wt .f-checkbox label::after {
    display: none !important;
}

#colorbox .dotaz-caster .dotaz-wt .f-checkbox label:hover::before {
    border-color: var(--primary-color) !important;
}

#colorbox .dotaz-caster .dotaz-wt .f-checkbox input:checked + label::before {
    background: var(--primary-color) url('/user/documents/assets/ui-ikony/fajfka-bila.svg') center / 14px no-repeat !important;
    border-color: var(--primary-color) !important;
}

#colorbox .dotaz-caster .dotaz-wt .f-checkbox input:focus-visible + label::before {
    outline: 3px solid var(--tertiary-color);
    outline-offset: 1px;
}

#colorbox .dotaz-caster .dotaz-wt .f-checkbox label a {
    color: var(--pd-text2);
    text-decoration: underline;
}

/* Tlačítko jako dřív „Odeslat dotaz" – přes celou šířku, 52 px */
#colorbox .dotaz-caster .dotaz-wt button[type="submit"] {
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    font-size: var(--text-drobny) !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--primary-color) !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: var(--prechod-tlacitka);
}

#colorbox .dotaz-caster .dotaz-wt button[type="submit"]:hover,
#colorbox .dotaz-caster .dotaz-wt button[type="submit"]:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
}

/* Poslední skupina (tlačítko) bez spodního okraje – konec okna drží
   odsazení karty */
#colorbox .dotaz-caster .dotaz-wt .formeo-row-wrap:has(button[type="submit"]) .f-field-group {
    margin-bottom: 0 !important;
}

/* Upozornění k fotce (formát, velikost) – fialová upozornění webu,
   ne červená chyba: fotka je nepovinná a dotaz jde odeslat i tak */
#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__hlaska,
body .formeo .foto-vyber .dotaz-soubor__hlaska {
    margin: 8px 0 0;
    padding: 10px 12px;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--text-color);
    background: #eee9f8;
    border-left: 3px solid #bba9e2;
}

#colorbox .dotaz-caster .dotaz-wt .dotaz-soubor__hlaska[hidden],
body .formeo .foto-vyber .dotaz-soubor__hlaska[hidden] {
    display: none;
}

/* Převod fotky (HEIC → JPG) běží – plocha čeká, kurzor to říká taky */
#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor.is-prace,
body .formeo .foto-vyber label.dotaz-soubor.is-prace {
    cursor: progress;
    border-style: solid;
    border-color: #bba9e2;
}

/* Obal formuláře doplňku má vlastní spodní okraj 32 px – pod tlačítkem
   pak zůstávala prázdná plocha navíc k odsazení okna */
#colorbox .dotaz-caster .dotaz-wt .render-form {
    margin-bottom: 0 !important;
}


/** --- 10) Dotaz k produktu: okno připíchnuté, stránka pod ním stojí ------- */
/* Colorbox je ve výchozím stavu umístěný v dokumentu – při posouvání jela
   celá stránka i s oknem a posun propadal až do menu. Standard u modálních
   oken: stránka pod oknem se zamkne a okno stojí uprostřed obrazovky.
   Okno se nikde neposouvá – formulář je proto zhuštěný tak, aby se
   vešel celý (viz konec bloku). Třídy přidává a ubírá initFormularDotazu():
   .dotaz-otevreno hned při otevření, .dotaz-pripraveno když je formulář
   hotový. */

/* Zamyká se jen <html>. S overflow: hidden i na <body> se z body stal
   vlastní posuvný kontejner a galerie na detailu (position: sticky)
   po otevření okna odskočila. */
html.dotaz-otevreno {
    overflow: hidden !important;
}

/* Bez posuvníku by stránka pod oknem poskočila o jeho šířku doprava */
html.dotaz-otevreno body {
    padding-right: var(--scrollbar-width, 0px);
}

/* Okno je průhledné, dokud se do něj nenačte formulář – pak se jednou
   plynule ukáže už v konečné velikosti (dřív se při načítání třikrát
   přeskládalo) */
html.dotaz-otevreno #colorbox {
    position: fixed !important;
    top: 50% !important;
    height: auto !important;
    transform: translateY(-50%);
    transition: opacity .2s ease;
}

html.dotaz-otevreno:not(.dotaz-pripraveno) #colorbox {
    opacity: 0 !important;
}

/* Colorbox si průhlednost při otevírání řídí sám a po naší skryté fázi
   by okno zůstalo neviditelné – hotové okno je proto vidět vždy */
html.dotaz-otevreno.dotaz-pripraveno #colorbox {
    opacity: 1 !important;
}

html.dotaz-otevreno #colorbox #cboxWrapper,
html.dotaz-otevreno #colorbox #cboxContent,
html.dotaz-otevreno #colorbox #cboxMiddleLeft,
html.dotaz-otevreno #colorbox #cboxMiddleRight {
    height: auto !important;
}

/* Obsah okna bez vlastního posuvníku. Šířku mu počítá colorbox bez
   odsazení (content-box) – border-box by obsah zúžil o 40 px a vpravo
   by zůstal širší okraj než vlevo. Dvě ID – šablona má na obsahu
   colorboxu vlastní overflow s !important. */
html.dotaz-otevreno #colorbox #cboxLoadedContent {
    height: auto !important;
    overflow: visible !important;
}

/* Pojistka jen pro hodně nízké obrazovky (telefon na šířku, malé
   notebooky s lištami), kam se okno ani zhuštěné nevejde: tam se obsah
   okna posune, jinak by tlačítko „Odeslat" zůstalo mimo obrazovku. */
@media (max-height: 659px) {
    html.dotaz-otevreno #colorbox #cboxLoadedContent {
        max-height: calc(100vh - 72px);
        max-height: calc(100dvh - 72px);
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.dotaz-otevreno #colorbox {
        transition: none;
    }
}

/* Zhuštění okna, aby se vešlo celé: pole na dotaz nižší, nadpis blíž
   ke kartě produktu (podnadpis zmizel) */
#colorbox .dotaz-caster h1 {
    margin-bottom: 16px !important;
}

#colorbox .dotaz-caster .dotaz-wt textarea.form-control {
    min-height: 112px !important;
}

/* Mobil: menší nadpis, kompaktní karta produktu, mezery 12 px –
   okno se vejde i na běžný telefon (375 × 667 a víc) */
@media (max-width: 575.98px) {
    #colorbox .dotaz-caster h1 {
        font-size: 1.25rem !important;
        margin-bottom: 12px !important;
    }

    #colorbox .dotaz-produkt {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 4px 12px;
        margin-bottom: 16px;
        padding: 10px 12px;
    }

    #colorbox .dotaz-produkt img {
        width: 48px;
        height: 48px !important;
    }

    #colorbox .dotaz-produkt__nazev {
        font-size: .875rem;
    }

    #colorbox .dotaz-caster label {
        margin-bottom: 4px !important;
    }

    #colorbox .dotaz-caster .dotaz-wt .f-field-group {
        margin-bottom: 12px !important;
    }

    #colorbox .dotaz-caster .dotaz-wt .formeo-row {
        gap: 12px;
    }

    #colorbox .dotaz-caster .dotaz-wt textarea.form-control {
        min-height: 88px !important;
    }
}

/* Nízké telefony (iPhone SE, 8 – výška do 760 px): ještě hustší, aby se
   okno vešlo bez posouvání – karta produktu na jeden řádek s cenou
   vpravo, nižší pole na dotaz, mezery 10 px */
@media (max-width: 575.98px) and (max-height: 760px) {
    #colorbox .dotaz-caster h1 {
        margin-bottom: 10px !important;
    }

    #colorbox .dotaz-produkt {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        align-items: center;
        margin-bottom: 12px;
        padding: 8px 10px;
    }

    #colorbox .dotaz-produkt img {
        width: 40px;
        height: 40px !important;
    }

    #colorbox .dotaz-produkt .dotaz-cena {
        grid-column: auto;
        align-self: center;
        font-size: .9375rem;
    }

    #colorbox .dotaz-produkt__volby {
        display: none;
    }

    #colorbox .dotaz-caster .dotaz-wt .f-field-group {
        margin-bottom: 10px !important;
    }

    /* Výšku dává počet řádků (rows) – tady pevná, ať se předepsaný úvod
       vejde bez posuvníku v poli */
    #colorbox .dotaz-caster .dotaz-wt textarea.form-control {
        height: 88px !important;
        min-height: 88px !important;
    }

    html.dotaz-otevreno #colorbox #cboxLoadedContent {
        padding-top: 14px !important;
    }
}


/** --- 11) Bez zákaznických účtů ------------------------------------------- */
/* Klienti se nepřihlašují ani neregistrují (initBezUctu v JS). Tady se
   prvky účtu schovají hned při vykreslení stránky, ještě než je JS
   odstraní – jinak by ikonka a odkazy na okamžik problikly. */
.top-nav-button-login,
[data-target="login"],
#login,
form[action*="/action/Customer/Login"],
a[href*="/login/"],
a[href*="/registrace/"],
a[href*="/klient/"] {
    display: none !important;
}


/** --- 12) Hlavička a menu -------------------------------------------------- */
/* Nadmenu, nové položky menu a doplněk mobilního panelu vkládá initMenu().
   Kontaktní bublina z hlavičky zmizela – telefon a e-mail jsou v nadmenu.

   Výška přilepené hlavičky je v --hlavicka-vyska: na desktopu nadmenu
   40 px + hlavní řádek 80 px. Počítá s ní galerie a lišta sekcí na detailu
   i posuny ke kotvám v JS (hlavickaVyska) – při změně výšky se upraví jen
   tady. */
:root {
    --hlavicka-vyska: 80px;
    --nadmenu-vyska: 40px;
}

/* Nadmenu – hnědý pruh, bílé písmo v běžné velikosti textu */
.nadmenu {
    background: var(--primary-color);
    font-size: var(--text-zakladni);
    line-height: 1.2;
    color: #fff;
}

.nadmenu__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--nadmenu-vyska);
}

.nadmenu__kontakt,
.nadmenu__odkazy {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nadmenu__kontakt {
    gap: 10px;
}

/* Výška řádku celým číslem (16 × 1,2 = 19,2 px stavělo text na půl pixelu)
   a bez přechodů: šablona dává odkazům transition: all a prohlížeč text
   během přechodu přichytil o pixel výš – po odjetí myši tam zůstal */
.nadmenu a {
    line-height: 20px;
    color: #fff;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: none !important;
}

.nadmenu a:hover,
.nadmenu a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.nadmenu a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.nadmenu__tel,
.nadmenu__mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* E-mail odsazený od provozní doby telefonu jako samostatná skupina */
.nadmenu__mail {
    margin-left: 22px;
}

.nadmenu__tel::before,
.nadmenu__mail::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--ikona) center / contain no-repeat;
    mask: var(--ikona) center / contain no-repeat;
}

.nadmenu__tel::before {
    --ikona: url('/user/documents/assets/ui-ikony/telefon.svg');
}

.nadmenu__mail::before {
    --ikona: url('/user/documents/assets/ui-ikony/mail.svg');
}

.nadmenu__pozn {
    font-size: var(--text-drobny);
    color: #fff;
}

/* Ikonky doplněných položek menu – stejná sada jako u položek šablony */
#navigation ul.menu-level-1 > li.menu-item-patrove > a::before,
#navigation ul.menu-level-1 > li.menu-item-detske > a::before,
#navigation ul.menu-level-1 > li.menu-item-pribehy > a::before {
    content: '';
    display: block;
    height: 18px;
    margin-right: 8px;
    background: 50% / 100% auto no-repeat;
}

/* Patrové a dětské postele mají ikonku své kategorie (jako v kategoriích
   na úvodní stránce). Ty jsou hnědé – filtr je zčerní jako ostatní ikonky
   menu. */
#navigation ul.menu-level-1 > li.menu-item-patrove > a::before {
    width: 15px;
    background-image: url('/user/documents/assets/ui-ikony/zavesna-postel.svg');
    background-size: contain;
    filter: brightness(0);
}

#navigation ul.menu-level-1 > li.menu-item-detske > a::before {
    width: 11px;
    background-image: url('/user/documents/assets/ui-ikony/detsky-pokojicek.svg');
    background-size: contain;
    filter: brightness(0);
}

#navigation ul.menu-level-1 > li.menu-item-pribehy > a::before {
    width: 21px;
    background-image: url('/user/documents/assets/ui-ikony/srdce.svg');
}

/* Doplněk mobilního panelu (odkazy z nadmenu a kontakt) – jen na mobilu */
.menu-doplnek {
    display: none;
}

@media (min-width: 768px) {
    /* nadmenu 40 + hlavní řádek 80 – číslem, ne calc(): čte ji i JS */
    :root {
        --hlavicka-vyska: 120px;
    }

    /* Sticky v obalu s overflow: hidden nefunguje – clip ořízne stejně,
       ale přilepení nebrání (na kategorii a detailu už platilo dřív) */
    .overall-wrapper {
        overflow: clip !important;
    }

    /* Šablona s .fixed-menu přidá stránce shora 80 px za hlavičku, která
       jí vypadla z toku – sticky hlavička z toku nevypadává, takže by
       obsah o 80 px poskočil */
    body {
        padding-top: 0 !important;
    }

    /* Přilepené obojí: nadmenu nahoře, hlavní řádek hned pod ním. Šablona
       hlavičku po kousku posunutí přepínala na position: fixed a měnila
       výšku (100 → 80 px) – obsah pod ní tím poskočil. Sticky zůstává
       v toku stránky a výška je pořád stejná, takže se při posouvání nic
       nehýbe. */
    .nadmenu {
        position: sticky;
        top: 0;
        z-index: 1001;
    }

    #header,
    #header.fixed-menu {
        position: sticky !important;
        top: var(--nadmenu-vyska) !important;
        left: auto !important;
        right: auto !important;
        z-index: 1000;
        transform: none !important;
        animation: none !important;
        /* Hlavička vystupuje nad stránku – jemný stín pod ní, pořád stejný
           (při posouvání se nic nepřepíná) */
        box-shadow: 0 6px 16px rgba(17, 14, 10, .08) !important;
    }

    /* Bez animací při posouvání: šablona při přepínání tříd (fixed-menu,
       scrolled, visible) prolínala a posouvala prvky hlavičky. Zůstává jen
       přechod barvy odkazů. */
    #header,
    #header *,
    #header *::before,
    #header *::after {
        transition: none !important;
    }

    /* Hrany jako obsah stránky a nadmenu (šablona měla v hlavičce 55 px,
       obsah 15 px – logo, menu a košík nelícovaly s ničím pod sebou) */
    #header .navigation-wrapper {
        max-width: 1640px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #header .navigation-wrapper,
    #header .header-top,
    #header.fixed-menu .navigation-wrapper,
    #header.fixed-menu .header-top {
        height: 80px !important;
        min-height: 80px !important;
    }

    #header #navigation .menu-level-1 > li > a,
    #header.fixed-menu #navigation .menu-level-1 > li > a {
        height: 80px !important;
        line-height: 80px !important;
    }

    /* Šablona dává menu úplně nahoře výšku i výšku řádku 100 px vystředěnou
       na 80px řádek (položky o 10 px výš) a po posunutí 80 px – položky
       poskočily. Pořád 80 px přesně přes řádek. */
    #header #navigation,
    #header.fixed-menu #navigation {
        top: 0 !important;
        height: 80px !important;
        transform: none !important;
    }

    /* Menu má víc místa – bublina vpravo zmizela */
    #navigation {
        width: calc(100% - 300px) !important;
    }

    /* Najetí na položku jako v menu sekcí na detailu: text hnědý
       a podtržený hnědou linkou. Šablonová černá linka pod položkou pryč. */
    #navigation .menu-level-1 > li > a::after {
        display: none !important;
    }

    #navigation .menu-level-1 > li > a b {
        text-decoration: none;
        text-decoration-thickness: 2px;
        text-underline-offset: 8px;
        text-decoration-color: var(--primary-color);
    }

    #header #navigation .menu-level-1 > li > a,
    #header #navigation .menu-level-1 > li > a b {
        transition: color .15s linear !important;
    }

    #navigation .menu-level-1 > li > a:hover,
    #navigation .menu-level-1 > li > a:focus-visible,
    #navigation .menu-level-1 > li.active > a {
        color: var(--primary-color) !important;
    }

    #navigation .menu-level-1 > li > a:hover b,
    #navigation .menu-level-1 > li > a:focus-visible b,
    #navigation .menu-level-1 > li.active > a b {
        color: var(--primary-color);
        text-decoration-line: underline;
    }

    /* Lupa hned vedle košíku (šablona ji měla 105 px od kraje, mezi nimi
       zbývalo 70 px prázdna). Ikonka „Více" (≡) šablony stála 395 px od
       kraje – počítala s bublinou; teď vlevo od lupy. Šablona podle její
       polohy rozhoduje, které položky se ještě vejdou. */
    #header .header-top .search-form.js-search-main {
        right: 44px !important;
    }

    .menu-helper {
        right: 104px !important;
    }

    /* Vyhledávání: místo okna přes celou stránku se od lupy doleva rozbalí
       pole přímo v hlavičce. Šablona po kliknutí na lupu přidá formuláři
       .hovered (z formuláře udělá tmavou vrstvu přes stránku a lupu
       přesune jako křížek do rohu) – tady formulář zůstává na místě. Lupa
       zůstává lupou a leží v pravém kraji pole; zavírání a hledání lupou
       řeší initHledani() v JS. */
    #header .search-form.js-search-main.hovered {
        position: absolute !important;
        top: 50% !important;
        right: 44px !important;
        bottom: auto !important;
        left: auto !important;
        width: 45px !important;
        height: 44px !important;
        transform: translateY(-50%) !important;
        background: none !important;
        display: block !important;
    }

    /* Stejný rozměr jako zavřená lupa (šablona ji zúžila na 40 px a ikonka
       uskočila) – lupa zůstává přesně na místě */
    #header .search-form.hovered .search-toggle {
        position: absolute !important;
        top: 2px !important;
        right: 0 !important;
        width: 45px !important;
        height: 40px !important;
        z-index: 3;
        /* stejná lupa jako v zavřeném stavu (šablona ji měnila na křížek) */
        background-image: url('/user/documents/assets/ui-ikony/hledat.svg') !important;
        background-size: 20px !important;
    }

    #header .search-form.hovered .search-toggle:hover {
        opacity: .64;
    }

    #header .search-form .search-toggle {
        cursor: pointer;
    }

    #header .search-form .search-toggle:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }

    #header .search-form.hovered fieldset {
        position: absolute !important;
        top: 0;
        right: 0 !important;
        width: 380px;
        max-width: none;
        height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        display: block;
        background: #fff !important;
        border: 1px solid #110E0A;
        overflow: visible;
        z-index: 2;
        animation: caster-rozbal-hledani .2s ease-out !important;
    }

    @keyframes caster-rozbal-hledani {
        from { width: 45px; opacity: 0; }
        to { width: 380px; opacity: 1; }
    }

    #header .search-form.hovered fieldset input {
        float: none;
        width: 100% !important;
        height: 42px !important;
        margin: 0;
        padding: 0 50px 0 16px !important;
        border: 0 !important;
        background: transparent;
        font-size: var(--text-zakladni);
        color: #110E0A;
    }

    #header .search-form.hovered fieldset input:focus {
        outline: none;
        box-shadow: none;
    }

    #header .search-form.hovered fieldset input::placeholder {
        color: #585653;
    }

    /* Modrý křížek prohlížeče v poli typu search – pole zavírá klik vedle
       nebo Escape */
    #header .search-form fieldset input::-webkit-search-cancel-button {
        -webkit-appearance: none;
        display: none;
    }

    /* Tlačítko „Hledat" šablony – hledá se Enterem nebo lupou */
    #header .search-form fieldset button[type="submit"] {
        display: none !important;
    }

    /* Našeptávač pod polem, horní hranou na spodní hraně hlavičky (pole je
       vystředěné v 80px řádku, pod ním zbývá 18 px) */
    #header .search-form.hovered .search-whisperer.active {
        top: calc(100% + 18px) !important;
        right: -1px;
        left: auto !important;
        width: 480px;
        max-height: calc(100vh - var(--hlavicka-vyska) - 40px) !important;
        border-top: 1px solid #DBDBDA;
        box-shadow: 0 16px 32px rgba(17, 14, 10, .12);
    }

    #header .search-form.hovered .search-whisperer > div,
    #header .search-form.hovered .search-whisperer > ul {
        padding: 16px 20px !important;
    }

    /* Rozbalovací nabídky (Postele a košík) jednotně: bílý panel přímo
       pod hlavičkou u své položky (ne přes celou šířku), tenká linka
       nahoře, stín a ztmavená stránka pod ním (ztmavení viz níže).
       Řádky nabídky mají stejné písmo jako menu, najetí podbarví řádek
       světle oranžovou a text zhnědne. */
    #header #navigation ul.menu-level-1 > li.exp > ul.menu-level-2 {
        position: absolute !important;
        top: 80px !important;
        /* ikonky řádků lícují s ikonkou „Postele" (20 px okraj panelu
           + 12 px odsazení řádku) */
        left: -32px !important;
        display: grid !important;
        /* každý název v jednom řádku */
        grid-template-columns: repeat(2, 360px);
        gap: 4px 24px;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - var(--hlavicka-vyska) - 24px) !important;
        margin: 0 !important;
        padding: 16px 20px !important;
        background: #fff;
        border-top: 1px solid #DBDBDA;
        box-shadow: 0 16px 32px rgba(17, 14, 10, .12);
        animation: caster-vysun-panel .15s ease-out !important;
    }

    #header #navigation ul.menu-level-1 > li.exp > ul.menu-level-2 > li {
        position: relative;
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: auto !important;
        min-height: 48px;
        margin: 0 !important;
        padding: 8px 12px !important;
    }


    /* Ikonky jako v hlavním menu: černé (kategorie je mají hnědé – filtr
       je zčerní), vysoké 18 px, 8 px od textu. Pole 24 px široké, aby texty
       začínaly pod sebou i u užších ikonek. */
    #header #navigation .menu-level-2 > li > a.menu-image {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 24px;
        width: 24px !important;
        height: 18px !important;
        margin: 0 !important;
    }

    #header #navigation .menu-level-2 > li > a.menu-image img {
        width: auto !important;
        height: 18px !important;
        max-width: 24px;
        object-fit: contain;
        filter: brightness(0) !important;
    }

    #header #navigation .menu-level-2 > li > div {
        width: auto !important;
        min-width: 0;
    }

    /* Šablona dává odkazům v menu při najetí okraje 20 px (posunuly by se) */
    #header #navigation .menu-level-2 > li > div > a,
    #header #navigation .menu-level-2 > li > div > a:hover {
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        /* stejná velikost jako položky hlavního menu */
        font-size: .9375rem;
        font-weight: 500;
        line-height: 1.3;
        color: #110E0A;
        text-decoration: none;
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
        text-decoration-color: var(--primary-color);
        transition: color .15s ease !important;
    }

    /* Celý řádek je klikací (ikonka i mezera kolem textu) */
    #header #navigation .menu-level-2 > li > div > a::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    /* Najetí jako v hlavním menu: text hnědý a podtržený, bez plochy */
    #header #navigation .menu-level-2 > li:hover > div > a,
    #header #navigation .menu-level-2 > li > div > a:focus-visible {
        color: var(--primary-color);
        text-decoration-line: underline;
    }

    #header #navigation .menu-level-2 > li > div > a:focus-visible {
        outline: none;
    }

    #header #navigation .menu-level-2 > li:has(a:focus-visible) {
        outline: 2px solid var(--primary-color);
        outline-offset: -2px;
    }

    /* Nabídka „Více" (≡) na užším desktopu stejně jako Postele: horní
       hranou na spodní hraně hlavičky (šablona ji měla o 10 px výš),
       linka nahoře, stejný stín, řádky s podbarvením při najetí */
    #header .menu-helper > ul {
        margin-top: 10px;
        width: 280px;
        padding: 12px;
        border: 0;
        border-top: 1px solid #DBDBDA;
        border-radius: 0;
        background: #fff;
        box-shadow: 0 16px 32px rgba(17, 14, 10, .12);
        animation: caster-vysun-panel .15s ease-out;
    }

    #header .menu-helper > ul > li {
        border-top: 0 !important;
    }

    #header .menu-helper > ul > li > a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 8px 12px;
        font-size: .9375rem;
        font-weight: 500;
        color: #110E0A;
        text-decoration: none;
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
        text-decoration-color: var(--primary-color);
        transition: color .15s ease !important;
    }

    #header .menu-helper > ul > li > a:hover,
    #header .menu-helper > ul > li > a:focus-visible {
        background: none;
        color: var(--primary-color);
    }

    #header .menu-helper > ul > li > a:hover b,
    #header .menu-helper > ul > li > a:focus-visible b {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
        text-decoration-color: var(--primary-color);
    }

    #header .menu-helper > ul > li > a b {
        font-weight: 500;
    }

    /* Okno košíku: jen fotka, celý název, cena a křížek. Konfigurace
       (varianta) by z položky dělala odstavec a počet kusů se mění
       v košíku. */
    #cart-widget.popup-widget {
        top: var(--hlavicka-vyska) !important;
        right: max(15px, calc((100% - 1640px) / 2 + 15px)) !important;
        width: 400px !important;
        margin-top: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border-top: 1px solid #DBDBDA;
        background: #fff;
        box-shadow: 0 16px 32px rgba(17, 14, 10, .12) !important;
        animation: caster-vysun-panel .15s ease-out !important;
    }

    #cart-widget .cart-widget-products {
        max-height: calc(100vh - var(--hlavicka-vyska) - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 20px !important;
    }

    #cart-widget .cart-widget-products-inner {
        padding: 0 !important;
    }

    /* Položka: fotka vlevo přes dva řádky; nahoře celý název a křížek,
       pod ním cena */
    #cart-widget .cart-widget-product {
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "foto nazev smazat"
            "foto cena cena";
        align-items: start;
        gap: 6px 14px;
        margin: 0 !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid #DBDBDA;
    }

    #cart-widget .cart-widget-product:last-child {
        border-bottom: 0;
    }

    #cart-widget .cart-widget-product-image {
        grid-area: foto;
        align-self: start;
        width: 64px !important;
        height: 64px;
        margin: 0 !important;
    }

    #cart-widget .cart-widget-product-image img {
        width: 64px;
        height: 64px;
        object-fit: cover;
    }

    #cart-widget .cart-widget-product-name {
        display: contents !important;
    }

    #cart-widget .cart-widget-product-name strong {
        grid-area: nazev;
        min-width: 0;
        font-weight: 600;
    }

    #cart-widget .cart-widget-product-name strong a {
        display: block;
        font-size: .9375rem;
        line-height: 1.35;
        color: #110E0A;
        text-decoration: none;
    }

    #cart-widget .cart-widget-product-name strong a:hover {
        color: var(--primary-color);
    }

    #cart-widget .cart-widget-product-variant,
    #cart-widget .cart-widget-product-unit,
    #cart-widget .cart-widget-product-amount {
        display: none !important;
    }

    /* Cena hnědá jako ceny na detailu */
    #cart-widget .cart-widget-product-name > span {
        grid-area: cena;
        font-weight: 600;
        white-space: nowrap;
        color: var(--primary-color);
    }

    #cart-widget .cart-widget-product-delete {
        grid-area: smazat;
        align-self: start;
        justify-self: end;
        width: auto !important;
        margin: 0 !important;
    }

    #cart-widget .cart-widget-button {
        padding: 16px 20px 20px !important;
        border-top: 1px solid #DBDBDA;
    }

    /* Tlačítko jako „Přidat do košíku" v konfigurátoru postelí: velká
       písmena, ikonka košíku, při najetí tmavší hnědá (nikdy černá) */
    #cart-widget .cart-widget-button .btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        min-height: 56px;
        padding: 16px 24px !important;
        border: 0 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: #fff !important;
        background: var(--primary-color) !important;
        transition: var(--prechod-tlacitka) !important;
    }

    #cart-widget .cart-widget-button .btn::before {
        content: "" !important;
        position: static !important;
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        margin: 0 !important;
        background: currentColor;
        -webkit-mask: url('/user/documents/assets/ui-ikony/kosik.svg') center / contain no-repeat;
        mask: url('/user/documents/assets/ui-ikony/kosik.svg') center / contain no-repeat;
        font-size: 0;
    }

    #cart-widget .cart-widget-button .btn::after {
        display: none !important;
    }

    #cart-widget .cart-widget-button .btn:hover,
    #cart-widget .cart-widget-button .btn:focus-visible {
        color: #fff !important;
        background: #a9571f !important;
        background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
    }

    @keyframes caster-vysun-panel {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: none; }
    }

    /* Ztmavení stránky pod hlavičkou, když je otevřená nabídka Postele,
       košík nebo vyhledávání. Nadmenu a hlavička zůstávají světlé (leží
       nad vrstvou), ztmavení nechytá myš – nabídka se tím nezavře. */
    body::after {
        content: "";
        position: fixed;
        top: var(--hlavicka-vyska);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        background: rgba(17, 14, 10, .4);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }

    body:has(#navigation .menu-level-1 > li.exp > ul.menu-level-2)::after,
    body:has(#header .search-form.hovered)::after,
    body.cart-window-visible::after,
    body.menu-helper-visible::after,
    body:has(.menu-helper-visible)::after {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s ease, visibility 0s;
    }
}

/* Kdo má v systému omezený pohyb, dostane nabídky, košík a vyhledávání
   bez vysouvání a prolínání – rovnou otevřené */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    #header #navigation ul.menu-level-1 > li.exp > ul.menu-level-2,
    #cart-widget.popup-widget,
    #header .search-form.hovered fieldset,
    #header .menu-helper > ul {
        animation: none !important;
    }

    body::after,
    body:has(#navigation .menu-level-1 > li.exp > ul.menu-level-2)::after,
    body:has(#header .search-form.hovered)::after,
    body.cart-window-visible::after {
        transition: none;
    }
}

/* Užší desktop: šest položek s ikonkami se vejde až od ~1300 px. Pod tím
   menu bez ikonek a s menšími mezerami; co se nevejde ani tak, přesune
   šablona do „Více" */
@media (min-width: 768px) and (max-width: 1299px) {
    #navigation ul.menu-level-1 > li > a::before {
        display: none !important;
    }

    #navigation ul.menu-level-1 > li > a {
        margin-right: 18px !important;
    }
}

/* Nadmenu na užším desktopu: provozní doba pryč, ať se kontakt
   i odkazy vejdou na jeden řádek */
@media (min-width: 768px) and (max-width: 1199px) {
    .nadmenu .nadmenu__pozn {
        display: none;
    }

    .nadmenu__mail {
        margin-left: 14px;
    }
}

@media (max-width: 767px) {
    .nadmenu {
        display: none;
    }

    /* Seznam položek měl od šablony výšku celého panelu a vlastní posuvník –
       doplněk pod ním by skončil pod spodním okrajem. Seznam je tak vysoký,
       jak potřebuje, a posouvá se celý panel. */
    #navigation .navigation-in > .menu-level-1 {
        height: auto !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    #navigation .navigation-in {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Postranní panel: pod položkami čára, pod ní odkazy z nadmenu
       a kontakt */
    #navigation .menu-doplnek {
        display: block;
        padding-top: 16px;
    }

    .menu-doplnek__odkazy {
        display: flex;
        flex-direction: column;
    }

    .menu-doplnek__odkazy a {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: .9375rem;
        color: var(--text-color);
        text-decoration: none;
    }

    /* Kontakt pod sebou: telefon, pod ním provozní doba, pak e-mail
       (vedle sebe se doba na úzkém panelu lámala) */

    .menu-doplnek__kontakt a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        font-weight: 600;
        color: var(--text-color);
        text-decoration: none;
    }

    .menu-doplnek__kontakt a::before {
        content: "";
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        background: var(--primary-color);
        -webkit-mask: var(--ikona) center / contain no-repeat;
        mask: var(--ikona) center / contain no-repeat;
    }



    /* Pod textem odkazu (za ikonkou 16 px a mezerou 8 px) */

}


/** --- 13) Patička: Blog a Náš příběh --------------------------------------- */
/* Tlačítka vedle kontaktů pod logem (initTlacitkaZapati) – vedlejší akce
   ve stylu „Zobrazit více": světlá meruňka, hnědé verzálky, po najetí
   barvy prohozené */
.zapati-tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zapati-tlacitka__btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    font-size: var(--text-drobny);
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--primary-color) !important;
    background: var(--secondary-color);
    transition: var(--prechod-tlacitka);
}

.zapati-tlacitka__btn:hover,
.zapati-tlacitka__btn:focus-visible {
    color: #fff !important;
    background: var(--primary-color);
}


/** --- 14) Detail: „Parametry" stejně jako „Detail produktu" ---------------- */
/* Obě tlačítka jen posouvají stránku níž – vypadají stejně (světlá meruňka,
   bez rámečku). „Příběhy klientů" si nechává vlastní zelenou. */
.p-short-description a.p-parametry-btn:not(.p-hodnoceni-btn) {
    padding: 14px 24px !important;
    background: var(--secondary-color);
    border: 0;
}

.p-short-description a.p-parametry-btn:not(.p-hodnoceni-btn):hover,
.p-short-description a.p-parametry-btn:not(.p-hodnoceni-btn):focus-visible {
    color: #fff !important;
    background: var(--primary-color);
}

/** --- 15) Cookie lišta: okno uprostřed v našem stylu ------------------------ */
/* Shoptet ji vkládá jako tmavý pruh dole (.siteCookies--dark --bottom).
   Tady je z ní okno uprostřed nad ztmavenou stránkou: jílová plocha,
   nadpis meruňkový, text šedý, hranaté rohy. Dokud návštěvník nevybere,
   stránka se neposouvá (html.cookie-volba, initCookieLista()).
   V prvním okně jen „Nastavení cookies" a „Souhlasím" – odmítnout jde
   v nastavení („Vše vypnout"). Nadpis a kratší text vkládá initCookieLista().
   Ztmavení stránky dělá velký stín okna – žádný další prvek není potřeba. */
html.cookie-volba,
html.cookie-volba body {
    overflow: hidden !important;
}

.siteCookies.js-siteCookies,
.siteCookies.siteCookies--dark {
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    max-height: calc(100% - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 36px !important;
    font-size: .9375rem !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    color: #585653 !important;
    background: var(--secondary-color) !important;
    border: 0;
    border-radius: 0;
    box-shadow: 0 16px 32px rgba(17, 14, 10, .16), 0 0 0 100vmax rgba(17, 14, 10, .55) !important;
}

/* Když je otevřené Nastavení cookies, první okno se schová (ztmavení
   dělá okno nastavení); po zavření křížkem se vrátí */
body:has(#colorbox .cookiesSetting__form) .siteCookies.js-siteCookies {
    visibility: hidden;
}

/* Šablonová kresba sušenky v rohu */
.siteCookies.js-siteCookies::before {
    display: none !important;
}

/* Pod sebou nadpis a text, pod nimi vpravo „Nastavení cookies" a Souhlasím */
.siteCookies.js-siteCookies .siteCookies__form {
    display: flex !important;
    /* šablona ho do 480 px staví do sloupce */
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0 20px;
    max-width: none !important;
}

.siteCookies.js-siteCookies .siteCookies__form .siteCookies__content {
    display: contents;
    width: auto !important;
    padding: 0 !important;
    text-align: left !important;
}

.siteCookies.js-siteCookies .siteCookies__text {
    order: 1;
    flex: 0 0 100%;
    padding: 0 !important;
    color: #585653 !important;
}

.siteCookies.js-siteCookies .cookie-lista__nadpis {
    display: block;
    margin: 0 0 10px;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary-color);
}

.siteCookies.js-siteCookies .cookie-lista__text {
    margin: 0;
}

.siteCookies.js-siteCookies .siteCookies__form .siteCookies__content a,
.siteCookies.js-siteCookies .siteCookies__form .siteCookies__content .siteCookies__text a {
    font-weight: 500 !important;
    color: var(--primary-color) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.siteCookies.js-siteCookies .siteCookies__form .siteCookies__content a:hover {
    text-decoration-thickness: 2px;
}

/* „Nastavení cookies" – textový odkaz před Souhlasím */
.siteCookies.js-siteCookies .siteCookies__links {
    order: 2;
    margin: 28px 0 0 !important;
}

.siteCookies.js-siteCookies .siteCookies__form .siteCookies__links .js-cookies-settings,
.siteCookies.siteCookies--dark .siteCookies__form .siteCookies__links .js-cookies-settings {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px !important;
    font-family: var(--template-font);
    font-size: .9375rem;
    font-weight: 500 !important;
    letter-spacing: 0;
    color: #585653 !important;
    background: none !important;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.siteCookies.js-siteCookies .siteCookies__form .siteCookies__links .js-cookies-settings:hover {
    color: var(--primary-color) !important;
}

.siteCookies.js-siteCookies .siteCookies__form .siteCookies__buttonWrap {
    order: 3;
    display: flex !important;
    flex-direction: row !important;
    flex: 0 0 auto;
    width: auto !important;
    margin: 28px 0 0 !important;
}

/* Odmítnout je v nastavení („Vše vypnout") */
.siteCookies.js-siteCookies .siteCookies__form .siteCookies__buttonWrap button[value="reject"] {
    display: none !important;
}

/* Souhlasím meruňkové jako „Přidat do košíku" */
.siteCookies.js-siteCookies .siteCookies__form .siteCookies__buttonWrap button[value="all"] {
    min-width: 180px !important;
    height: auto !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 12px 28px !important;
    font-family: var(--template-font);
    font-size: .9375rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    transition: var(--prechod-tlacitka);
}

.siteCookies.js-siteCookies .siteCookies__form .siteCookies__buttonWrap button[value="all"]:hover,
.siteCookies.js-siteCookies .siteCookies__form .siteCookies__buttonWrap button[value="all"]:focus-visible {
    background: #a9571f !important;
    background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
    border-color: transparent !important;
}

.siteCookies.js-siteCookies button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Mobil: Souhlasím přes celou šířku, „Nastavení cookies" nad ním uprostřed */
@media (max-width: 575.98px) {
    .siteCookies.js-siteCookies,
    .siteCookies.siteCookies--dark {
        padding: 24px 20px !important;
    }

    .siteCookies.js-siteCookies .cookie-lista__nadpis {
        font-size: 1.25rem;
    }

    .siteCookies.js-siteCookies .siteCookies__links {
        flex: 0 0 100%;
        margin: 16px 0 0 !important;
        text-align: center;
    }

    .siteCookies.js-siteCookies .siteCookies__form .siteCookies__buttonWrap {
        flex: 0 0 100%;
        margin: 8px 0 0 !important;
    }

    .siteCookies.js-siteCookies .siteCookies__form .siteCookies__buttonWrap button[value="all"] {
        width: 100% !important;
    }
}

/** --- 16) Nastavení cookies (okno po kliknutí na „Nastavení cookies") ------- */
/* Okno Shoptetu v colorboxu. Rozložení: nadpis a úvod na střed, pod nimi
   bílý panel s kategoriemi oddělenými linkami (vpravo zaškrtávátko
   „Zapnout" v rámečku), dole vlevo „Vše vypnout", vpravo „Potvrdit moje
   volby" a „Povolit vše". Barvy jílová / meruňka / šedá, hranaté. */
body:has(#colorbox .cookiesSetting__form) #cboxOverlay {
    background: rgba(17, 14, 10, .55) !important;
    opacity: 1 !important;
}

#colorbox:has(.cookiesSetting__form) #cboxWrapper,
#colorbox:has(.cookiesSetting__form) #cboxContent,
#colorbox:has(.cookiesSetting__form) #cboxLoadedContent,
#colorbox:has(.cookiesSetting__form) .colorbox-html-content {
    background: var(--secondary-color) !important;
    border-radius: 0 !important;
}

/* Colorbox odsazuje obsah 20 px od horní hrany (místo pro titulek) – nad
   oknem z toho byl pruh jiného odstínu */
#colorbox:has(.cookiesSetting__form) #cboxContent {
    margin-top: 0 !important;
    box-shadow: 0 16px 32px rgba(17, 14, 10, .16);
}

/* Okno připíchnuté uprostřed obrazovky a nejvýš na její výšku – stránka
   pod ním se neposouvá (html.cookie-volba), takže delší obsah (na mobilu)
   se posouvá uvnitř okna, jinak by tlačítka dole nešla vůbec dosáhnout */
#colorbox:has(.cookiesSetting__form) {
    position: fixed !important;
    top: 50% !important;
    height: auto !important;
    transform: translateY(-50%);
}

#colorbox:has(.cookiesSetting__form) #cboxWrapper,
#colorbox:has(.cookiesSetting__form) #cboxContent {
    height: auto !important;
}

#colorbox:has(.cookiesSetting__form) #cboxLoadedContent {
    height: auto !important;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.cookiesSetting__form {
    padding: 40px 36px 32px;
    font-family: var(--template-font);
    color: #585653;
}

.cookiesSetting__form .cookiesSetting__title {
    margin: 0 0 12px !important;
    padding: 0 32px;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--primary-color) !important;
}

.cookiesSetting__form .cookiesSetting__perex {
    max-width: 600px;
    margin: 0 auto 28px !important;
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
    color: #585653;
}

.cookiesSetting__form .cookiesSetting__data {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    border: 1px solid #DBDBDA;
}

.cookiesSetting__form .cookiesSetting__item {
    display: flex !important;
    align-items: center;
    gap: 24px;
    margin: 0 !important;
    padding: 20px 24px !important;
    border: 0 !important;
    border-top: 1px solid #DBDBDA !important;
}

.cookiesSetting__form .cookiesSetting__item:first-child {
    border-top: 0 !important;
}

.cookiesSetting__form .cookiesSetting__item__col1 {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

.cookiesSetting__form .cookiesSetting__item__name {
    margin-bottom: 4px;
    font-size: 1rem;
    color: #110E0A;
}

.cookiesSetting__form .cookiesSetting__item__name strong {
    font-weight: 600;
}

.cookiesSetting__form .cookiesSetting__item__text {
    font-size: .875rem;
    line-height: 1.6;
    color: #585653;
}

.cookiesSetting__form .cookiesSetting__item__col2 {
    flex: 0 0 auto;
    width: auto !important;
}

/* Jen zaškrtávátko (text „Zapnout" zůstává pro čtečky obrazovky),
   klikací plocha 44 × 44 px kolem něj */
.cookiesSetting__form .cookiesSetting__item__status {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    background: none;
    border: 0;
    cursor: pointer;
}

.cookiesSetting__form .cookiesSetting__item__status:hover .cookiesSetting__item__checkbox:not(:checked) {
    border-color: var(--primary-color);
}

/* Šablona skutečné zaškrtávátko schovává (display: none) a kreslí ho
   přes label – tady je vidět skutečné, hranaté, zaškrtnuté meruňkové */
.cookiesSetting__form .cookiesSetting__item__checkbox {
    display: inline-block !important;
    flex: 0 0 22px;
    position: static !important;
    box-sizing: border-box !important;
    width: 22px !important;
    height: 22px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #fff center / 16px no-repeat;
    border: 1.5px solid #585653;
    border-radius: 0;
    cursor: pointer;
}

/* Čtverec: šablona má na zaškrtávátka vlastní šířku s vyšší prioritou
   (vycházelo 19 × 22 px) – tady s ID okna a pevnou min/max šířkou */
#colorbox .cookiesSetting__form input.cookiesSetting__item__checkbox {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
}

.cookiesSetting__form .cookiesSetting__item__checkbox::before,
.cookiesSetting__form .cookiesSetting__item__checkbox::after {
    /* bez vzhledu prohlížeče Chrome kreslí i pseudo-prvky šablony – byl
       z nich bílý čtvereček v levém horním rohu okna */
    display: none !important;
    content: none !important;
}

.cookiesSetting__form .cookiesSetting__item__checkbox:checked {
    background-color: var(--primary-color);
    background-image: url('/user/documents/assets/ui-ikony/fajfka-bila.svg');
    border-color: var(--primary-color);
}

.cookiesSetting__form .cookiesSetting__item__checkbox:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.cookiesSetting__form .cookiesSetting__item__state {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Šablona kreslí vlastní zaškrtávátko přes label – je tu skutečné */
.cookiesSetting__form .cookiesSetting__item__state::before,
.cookiesSetting__form .cookiesSetting__item__state::after {
    display: none !important;
}

.cookiesSetting__form .cookiesSetting__bottom {
    display: flex !important;
    align-items: stretch;
    gap: 8px;
    margin: 28px 0 0 !important;
    padding: 0 !important;
}

.cookiesSetting__form .cookiesSetting__uncheck {
    display: flex;
    margin-right: auto;
}

.cookiesSetting__form .cookiesSetting__bottom button {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 12px 22px !important;
    font-family: var(--template-font);
    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    cursor: pointer;
    transition: var(--prechod-tlacitka), border-color .15s linear;
}

/* Vše vypnout a Potvrdit moje volby – bílé s šedou linkou */
.cookiesSetting__form .cookiesSetting__uncheckLink,
.cookiesSetting__form .cookiesSetting__button:not(.cookiesSetting__button--green) {
    color: #110E0A !important;
    background: #fff !important;
    border: 1px solid #DBDBDA !important;
}

.cookiesSetting__form .cookiesSetting__uncheckLink:hover,
.cookiesSetting__form .cookiesSetting__button:not(.cookiesSetting__button--green):hover {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Povolit vše – meruňková */
.cookiesSetting__form .cookiesSetting__button--green {
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.cookiesSetting__form .cookiesSetting__button--green:hover {
    background: #a9571f !important;
    background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
}

.cookiesSetting__form button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Křížek – kulatá šedá plocha vpravo nahoře */
#colorbox:has(.cookiesSetting__form) #cboxClose {
    top: 16px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    background-color: rgba(17, 14, 10, .06) !important;
}

#colorbox:has(.cookiesSetting__form) #cboxClose:hover {
    background-color: rgba(17, 14, 10, .12) !important;
}

/* Mobil: kategorie a tlačítka pod sebou */
@media (max-width: 575.98px) {
    /* okno colorboxu má vlastní vnitřní okraj – formulář už jen málo */
    .cookiesSetting__form {
        padding: 24px 0 8px;
    }

    .cookiesSetting__form .cookiesSetting__title {
        font-size: 1.5rem;
    }

    .cookiesSetting__form .cookiesSetting__item {
        gap: 12px;
        padding: 16px !important;
    }


    .cookiesSetting__form .cookiesSetting__bottom {
        flex-direction: column;
    }

    .cookiesSetting__form .cookiesSetting__uncheck {
        order: 3;
        margin: 0;
    }

    .cookiesSetting__form .cookiesSetting__bottom button {
        width: 100%;
    }

    .cookiesSetting__form .cookiesSetting__button--green {
        order: 1;
    }

    .cookiesSetting__form .cookiesSetting__button:not(.cookiesSetting__button--green) {
        order: 2;
    }
}

/** --- 17) Košík a objednávka ------------------------------------------------ */
/* Obsah vkládá a přejmenovává initKosik() v JS. */

/* V košíku a objednávce hlavička nejezdí se stránkou – zůstává nahoře */
@media (min-width: 768px) {
    .ordering-process .nadmenu,
    .ordering-process #header,
    .ordering-process #header.fixed-menu {
        position: relative !important;
        top: auto !important;
    }
}

/* Hlavička: z menu jen vyhledávání a košík, nadmenu zůstává. Šablona
   v objednávce tlačítka hlavičky schovává – ikonku košíku doplňuje JS. */
.ordering-process #header #navigation,
.ordering-process #header .menu-helper {
    display: none !important;
}

.ordering-process #header .navigation-buttons {
    display: flex !important;
}

/* Kroky s čísly v kroužcích přes celou šířku: aktivní meruňkový, ostatní
   bílé s šedou linkou, mezi nimi šipka */
.ordering-process ol.cart-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: none !important;
    margin: 4px 0 0 !important;
    padding: 0 0 24px !important;
    counter-reset: krok;
    background: none;
    border: 0 !important;
    border-bottom: 1px solid #DBDBDA !important;
}

.ordering-process ol.cart-header::after {
    display: none !important;
}

.ordering-process ol.cart-header li.step {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    gap: 16px;
    width: auto !important;
    margin: 0;
    counter-increment: krok;
}

.ordering-process ol.cart-header li.step:last-child {
    flex: 0 0 auto;
}

/* Šipka mezi kroky – za textem, ve zbytku místa na střed. Šipka z naší
   sady (sipka-doprava.svg) maskou v šedé; místo má celou její šířku
   (dřív 8 px pro 14px obrázek – šipka byla ořízlá). */
.ordering-process ol.cart-header li.step::after {
    content: "" !important;
    position: static !important;
    display: block !important;
    flex: 0 0 20px;
    width: 20px !important;
    height: 14px !important;
    margin: 0 auto;
    transform: none !important;
    background: #585653 !important;
    -webkit-mask: url('/user/documents/assets/ui-ikony/sipka-doprava.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/sipka-doprava.svg') center / contain no-repeat;
}

.ordering-process ol.cart-header li.step:last-child::after {
    display: none !important;
}

.ordering-process ol.cart-header li.step > a,
.ordering-process ol.cart-header li.step > strong {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 0 !important;
    border: 0 !important;
    text-decoration: none;
}

.ordering-process ol.cart-header li.step > a::before,
.ordering-process ol.cart-header li.step > strong::before {
    content: counter(krok);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    font-family: var(--template-font);
    font-size: 1rem;
    font-weight: 600;
    color: #110E0A;
    background: #fff;
    border: 1px solid #DBDBDA;
}

.ordering-process ol.cart-header li.step.active > a::before,
.ordering-process ol.cart-header li.step.active > strong::before {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Šablonová ikonka (fajfka v rámečku) před textem kroku */
.ordering-process ol.cart-header li.step a span::before,
.ordering-process ol.cart-header li.step strong span::before {
    display: none !important;
}

.ordering-process ol.cart-header li.step a span,
.ordering-process ol.cart-header li.step strong span {
    padding: 0 !important;
    font-family: var(--template-font);
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    color: #110E0A !important;
    background: none !important;
}

.ordering-process ol.cart-header li.step a:hover span {
    color: var(--primary-color) !important;
}

/* Položka: celková cena meruňková a tučně, bez „Doručení možné do" */
.ordering-process .cart-table .p-total .price-final {
    font-weight: 700 !important;
    color: var(--primary-color) !important;
}

.ordering-process .delivery-time {
    display: none !important;
}

/* Řádek položky jako mřížka s pevnými rozestupy (tabulka šablony rozdávala
   volné místo do sloupců – mezi fotkou a názvem bylo 119 px):
   fotka 4:3 | název a rozpis | počet kusů | cena a křížek, mezi nimi 24 px.
   Fotku 160 × 120 dává initFotkyKosiku (z detailu produktu). */
.ordering-process .cart-table,
.ordering-process .cart-table tbody {
    display: block !important;
    width: 100% !important;
}

.ordering-process .cart-table tr[data-micro="cartItem"] {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) auto 160px;
    grid-template-areas: "foto nazev pocet cena";
    align-items: center;
    gap: 24px;
    padding: 24px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #DBDBDA !important;
}

.ordering-process .cart-table tr[data-micro="cartItem"] > td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Velikosti písma v řádku podle stupnice webu: název, počet a cena
   základních 16 px (šablona měla 15,4 a 18,2 px), rozpis drobných 14 px */
.ordering-process .cart-table .p-name .main-link {
    font-size: var(--text-zakladni) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.ordering-process .cart-table .p-total .price-final,
.ordering-process .cart-table input.amount {
    font-size: var(--text-zakladni) !important;
}

/* Od linky pod kroky k obsahu položky 36 px (12 + 24 px odsazení řádku),
   stejně jako k formuláři v dalších krocích */
.ordering-process .cart-table {
    margin: 12px 0 0 !important;
}

/* Dostupnost a cena za kus v řádku nejsou (přebíjí i display: block výše) */
.ordering-process .cart-table tr[data-micro="cartItem"] > td.p-availability,
.ordering-process .cart-table tr[data-micro="cartItem"] > td.p-price,
.ordering-process .cart-table .p-label {
    display: none !important;
}

.ordering-process .cart-table .cart-p-image {
    grid-area: foto;
}

.ordering-process .cart-table td.p-name {
    grid-area: nazev;
}

.ordering-process .cart-table td.p-quantity {
    grid-area: pocet;
}

.ordering-process .cart-table td.p-total {
    grid-area: cena;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

/* Křížek za cenou v řádku (šablona ho stavěla absolutně přes cenu) */
.ordering-process .cart-table td.p-total form {
    position: static !important;
    margin: 0 !important;
}

.ordering-process .cart-table td.p-total .remove-item {
    margin: 0 !important;
}

.ordering-process .cart-table .cart-p-image img {
    display: block;
    width: 160px !important;
    max-width: none !important;
    height: 120px !important;
    max-height: none !important;
    object-fit: cover;
}

/* Mobil: fotka a název vedle sebe, pod nimi počet kusů vlevo a cena
   s křížkem vpravo */
@media (max-width: 767.98px) {
    .ordering-process .cart-table tr[data-micro="cartItem"] {
        grid-template-columns: 100px minmax(0, 1fr) auto;
        grid-template-areas:
            "foto nazev nazev"
            "pocet pocet cena";
        gap: 16px;
        padding: 16px 0 !important;
    }

    .ordering-process .cart-table .cart-p-image {
        align-self: start;
    }

    .ordering-process .cart-table td.p-quantity {
        justify-self: start;
    }

    .ordering-process .cart-table .cart-p-image img {
        width: 100px !important;
        height: 75px !important;
    }
}

/* Rozpis položky pod názvem (initRozpisPolozek). Původní řádky varianty
   a příplatků v odkazu jsou nahrazené rozpisem. */
.ordering-process .cart-table tr.ma-rozpis .main-link-variant,
.ordering-process .cart-table tr.ma-rozpis .main-link-surcharges {
    display: none !important;
}

.kosik-rozpis {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    line-height: 1.6;
    color: #585653;
}

/* Souhrn: bez ceny bez DPH */
.ordering-process .price-secondary {
    display: none !important;
}

/* Místo „Potřebujete pomoc?" dotaz a atypický rozměr pod Pokračovat */
.ordering-process .checkout-box-wrapper {
    display: none !important;
}

/* Košík bez pravého panelu: položky přes celou šířku, pod nimi vlevo
   pomoc, vpravo souhrn s tlačítkem (initKosikPomoc) */
.kosik-bez-panelu .cart-row > .col-md-8 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

.kosik-bez-panelu .cart-row > .sidebar-in-cart {
    display: none !important;
}

/* Šablona nechávala obsah košíku bez bočního okraje (vpravo ho dorovnával
   šedý panel až ke kraji) – teď stejné hrany jako zbytek webu */
/* šablona: .ordering-process #content-wrapper.container { padding 0 !important } */
body.kosik-bez-panelu #content-wrapper.container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.kosik-bez-panelu .cart-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.kosik-bez-panelu #content .cart-row > .col-md-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.kosik-bez-panelu .cart-row > .col-md-8 > .cart-content {
    padding: 0 !important;
}

.kosik-zaver {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: start;
    gap: 36px;
    margin-top: 36px;
    /* k patičce stejný odstup jako mezi sekcemi webu */
    padding-bottom: 72px;
}

/* Rádce: box s fotkou bílý s meruňkovou linkou (souhrn vedle je plný),
   jen tak široký, jak potřebuje text – vlevo. Pod ním drobně „Zpět do
   obchodu" (přesunutý odkaz šablony). */
.kosik-zaver__pomoc {
    max-width: 560px;
}

.kosik-zaver__pomoc .product-help {
    margin: 0 !important;
    background: #fff;
    border: 1px solid var(--tertiary-color);
}

.kosik-zaver__pomoc .next-step-back {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    min-height: 44px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    font-size: var(--text-drobny) !important;
    text-decoration: none !important;
    letter-spacing: .3px;
    color: #585653 !important;
    background: none !important;
    border: 0 !important;
    float: none !important;
}

.kosik-zaver__pomoc .next-step-back:hover {
    color: var(--primary-color) !important;
}

/* Šipka zpět před textem (šablonová ikona se po přesunu ztratila) */
.kosik-zaver__pomoc .next-step-back::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0 !important;
    background: currentColor !important;
    -webkit-mask: url('/user/documents/assets/ui-ikony/sipka-vlevo.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/sipka-vlevo.svg') center / contain no-repeat;
}

.kosik-zaver__pomoc .next-step-back span::before,
.kosik-zaver__pomoc .next-step-back span::after {
    display: none !important;
}

/* Souhrn – plná meruňková plocha, hranatý */
.kosik-zaver .summary-wrapper,
.kosik-zaver .summary-wrapper .box {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.kosik-zaver .summary-wrapper .box {
    padding: 24px !important;
    background: var(--secondary-color) !important;
}

.kosik-zaver .summary-wrapper .price-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
}

.kosik-zaver .summary-wrapper .price-wrapper > * {
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
}

.kosik-zaver .summary-wrapper .price-label.price-primary {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #110E0A !important;
}

.kosik-zaver .summary-wrapper .price.price-primary {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    color: var(--primary-color) !important;
}

/* Pokračovat v objednávce přes celou šířku */
.kosik-zaver .next-step {
    display: flex !important;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
}

.kosik-zaver .next-step .next-step-forward {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100% !important;
    min-height: 56px;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    float: none !important;
}

.kosik-zaver .next-step .next-step-forward .order-button-text {
    font-weight: 600 !important;
}

/* Šipka za textem – stejná jako u „Zpět", otočená */
.kosik-zaver .next-step .next-step-forward::after {
    content: "" !important;
    display: block !important;
    position: static !important;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    background: currentColor !important;
    -webkit-mask: url('/user/documents/assets/ui-ikony/sipka-doprava.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/sipka-doprava.svg') center / contain no-repeat;
}

.kosik-zaver .next-step .next-step-forward::before,
.kosik-zaver .next-step .next-step-forward span::before,
.kosik-zaver .next-step .next-step-forward span::after {
    display: none !important;
}

/* Zamčený krok – Kontaktní údaje, dokud není vybraná doprava a platba
   (initKosik): vypadá jako Dokončení objednávky, jen není klikací */
.ordering-process ol.cart-header li.step.krok-zamceny > strong,
.ordering-process ol.cart-header li.step.krok-zamceny > a {
    pointer-events: none;
    cursor: default;
}

/* Tablet a mobil: souhrn nahoře, pomoc pod ním */
@media (max-width: 991.98px) {
    .kosik-zaver {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .kosik-zaver__souhrn {
        order: -1;
    }

    /* text i šipka v jednom řádku i na úzkém mobilu */
    .kosik-zaver .next-step .next-step-forward {
        flex-wrap: nowrap !important;
        padding: 0 16px !important;
        font-size: .9375rem !important;
        white-space: nowrap;
    }
}

/* Mobil: bez hamburgeru (menu tu není), košík na jeho místě vpravo –
   šablona v objednávce dává lupu tam, kde jinak bývá košík */
@media (max-width: 767px) {
    .ordering-process #header .toggle-window[data-target="navigation"] {
        display: none !important;
    }

    .ordering-process #header .navigation-buttons .cart-count {
        right: 0 !important;
    }
}

/* Tablet a mobil: kroky jen s čísly, popisek jen u aktivního */
@media (max-width: 991.98px) {
    .ordering-process ol.cart-header {
        padding: 16px !important;
        gap: 8px;
    }

    .ordering-process ol.cart-header li.step {
        flex: 0 0 auto;
        gap: 8px;
    }

    .ordering-process ol.cart-header li.step::after {
        margin: 0 4px;
    }

    .ordering-process ol.cart-header li.step:not(.active) span {
        display: none !important;
    }

    .ordering-process ol.cart-header li.step > a::before,
    .ordering-process ol.cart-header li.step > strong::before {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
}

/* Úzký mobil: menší kroužky a bez šipek, ať se čtyři kroky vejdou */
@media (max-width: 575.98px) {
    .ordering-process ol.cart-header li.step::after {
        display: none !important;
    }

    .ordering-process ol.cart-header li.step > a::before,
    .ordering-process ol.cart-header li.step > strong::before {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: .9375rem;
    }

    .ordering-process ol.cart-header li.step a span,
    .ordering-process ol.cart-header li.step strong span {
        font-size: .9375rem !important;
    }
}

/** --- 18) Objednávka: Doprava a platba, Kontaktní údaje ---------------------- */
/* Stejně jako košík (blok 17): bez pravého panelu, souhrn a rádce pod
   formulářem (initKrokPomoc), rozestupy 24 / 36 / 72 px. */
.kosik-bez-panelu .cart-row > #checkoutSidebar,
.ordering-process .checkout-box {
    display: none !important;
}

/* Formulář 36 px pod kroky */
.in-krok-1 .cart-row,
.in-krok-2 .cart-row {
    margin-top: 36px !important;
}

/* Hotový krok (Rekapitulace v dalších krocích): meruňkový obrys a číslo */
.ordering-process ol.cart-header li.step.completed > a::before {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Bloky formuláře bez šedé plochy šablony, mezi nimi 36 px */
.ordering-process #checkoutContent .co-box,
.ordering-process #checkoutContent .co-box > .box,
.ordering-process #checkoutContent fieldset.box {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ordering-process #checkoutContent .cart-content > form > .co-box,
.ordering-process #checkoutContent .cart-content > form + form,
.ordering-process #checkoutContent .co-box + .co-box,
.ordering-process #checkoutContent fieldset + .co-box,
.ordering-process #checkoutContent .co-box + .form-group,
.ordering-process #checkoutContent .co-box-additional {
    margin-top: 36px !important;
}

.ordering-process #checkoutContent .cart-content > form:first-child > .co-box:first-child,
.ordering-process #checkoutContent .cart-content > form:first-child > fieldset:first-child {
    margin-top: 0 !important;
}

.ordering-process #checkoutContent h2 {
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #110E0A;
}

/* Doprava a platba: volby jako řádky s linkou, vybraná meruňkovou
   (stejně jako zvolená možnost v konfigurátoru postelí) */
.ordering-process :is(.shipping-billing-table, .doruceni) .radio-wrapper {
    margin: 0 0 8px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #DBDBDA !important;
    border-radius: 0 !important;
    transition: border-color .15s linear, background-color .15s linear;
}

.ordering-process :is(.shipping-billing-table, .doruceni) .radio-wrapper:hover {
    border-color: var(--primary-color) !important;
}

.ordering-process :is(.shipping-billing-table, .doruceni) .radio-wrapper:has(> input:checked),
.ordering-process :is(.shipping-billing-table, .doruceni) .radio-wrapper.active {
    background: var(--secondary-color) !important;
    border-color: var(--primary-color) !important;
}

.ordering-process :is(.shipping-billing-table, .doruceni) .radio-wrapper label {
    min-height: 56px;
    margin: 0 !important;
}

/* Souhrn objednávky – meruňková karta jako v košíku */
.in-krok-1 .kosik-zaver__souhrn > .cart-content,
.in-krok-2 .kosik-zaver__souhrn > .cart-content {
    margin: 0 !important;
    padding: 24px !important;
    background: var(--secondary-color) !important;
}

.kosik-zaver__souhrn .order-summary,
.kosik-zaver__souhrn .order-summary-inner {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

.kosik-zaver__souhrn .order-summary h2 {
    margin: 0 0 16px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #110E0A;
}

/* Položky jen názvem (konfigurace je v rekapitulaci košíku), počet a cena */
.kosik-zaver__souhrn .cart-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: .875rem;
}

.kosik-zaver__souhrn .cart-item > * {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.kosik-zaver__souhrn .cart-item .main-link {
    font-weight: 500;
    color: #110E0A !important;
    text-decoration: none;
}

.kosik-zaver__souhrn .cart-item .main-link-variant,
.kosik-zaver__souhrn .cart-item .main-link-surcharges {
    display: none !important;
}

.kosik-zaver__souhrn .cart-item-amount {
    color: #585653;
    white-space: nowrap;
}

.kosik-zaver__souhrn .cart-item-price {
    font-weight: 600;
    white-space: nowrap;
}

/* Řádky zboží celkem, doprava, platba: popis vlevo, hodnota vpravo */
.kosik-zaver__souhrn .order-summary-item.helper,
.kosik-zaver__souhrn .recapitulation-single {
    display: flex !important;
    justify-content: space-between;
    gap: 16px;
    margin: 0 !important;
    border: 0 !important;
}

.kosik-zaver__souhrn .order-summary-item.helper strong {
    font-weight: 500;
}

.kosik-zaver__souhrn .order-recapitulation,
.kosik-zaver__souhrn .order-recapitulation .cart-items {
    margin: 0 !important;
    padding: 0 !important;
}

/* Celkem k úhradě – velká meruňková cena */

.kosik-zaver__souhrn .price-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 !important;
}

.kosik-zaver__souhrn .price-wrapper > * {
    width: auto !important;
    margin: 0 !important;
}

.kosik-zaver__souhrn .price-label.price-primary {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #110E0A !important;
}

.kosik-zaver__souhrn .price.price-primary {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    color: var(--primary-color) !important;
}

/* Souhlas s podmínkami nad Objednat */
.kosik-zaver__souhrn .consents {
    margin: 0 0 16px !important;
    font-size: .875rem;
    line-height: 1.5;
    color: #585653;
}

.kosik-zaver__souhrn .consents a {
    color: var(--primary-color);
}

/* Objednat (krok 2) jako Pokračovat: přes celou šířku, tučně, šipka.
   „s povinností platby" zůstává – zákon ho na tlačítku vyžaduje. */
.kosik-zaver .next-step .next-step-finish {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 56px;
    margin: 0 !important;
    float: none !important;
}

.kosik-zaver .next-step .next-step-finish .order-button-text {
    font-size: 1rem;
    font-weight: 600 !important;
}

.kosik-zaver .next-step .next-step-finish .order-button-suffix {
    font-weight: 400;
    text-transform: none;
    opacity: .9;
}

/* Fakturační adresa: nadpis nahoře, pod ním „Nakupuji na firmu" (šablona
   dávala zaškrtávátko nad nadpis) */
.in-krok-2 .co-billing-address h2 {
    order: -2;
}

.in-krok-2 .co-billing-address .company-shopping {
    margin: 0 0 16px !important;
}

/* Zaškrtávátka (Doručit na jinou adresu, poznámka) 16 px pod blokem */
.in-krok-2 #checkoutContent .co-box > .form-group,
.in-krok-2 #checkoutContent .co-box-additional > .form-group {
    margin-top: 16px !important;
}

/* Země ve fakturační adrese: zakázaný výběr, který šablona označuje jako
   skrytý – zemi ukazuje řádek „Česká republika (můžete změnit v předchozím
   kroku)" pod ním */
.in-krok-2 .js-location--hidden {
    display: none !important;
}


/* Velikosti písma v krocích podle stupnice webu (šablona měla 12,6
   a 13,3 px): popisky polí drobných 14 px, pole, volby dopravy a platby
   základních 16 px (16 px v poli zároveň brání přiblížení na iPhonu),
   položky souhrnu 14 px, nadpis souhrnu 16 px jako v košíku */
.ordering-process #checkoutContent .form-group label,
.ordering-process #checkoutContent .form-group .label {
    font-size: var(--text-drobny) !important;
    font-weight: 600 !important;
    color: #110E0A;
}

.ordering-process #checkoutContent .form-control,
.ordering-process #checkoutContent select,
.ordering-process #checkoutContent textarea {
    font-size: var(--text-zakladni) !important;
}

.ordering-process :is(.shipping-billing-table, .doruceni) .shipping-billing-name,
.ordering-process :is(.shipping-billing-table, .doruceni) .payment-shipping-price {
    font-size: var(--text-zakladni) !important;
}

.ordering-process :is(.shipping-billing-table, .doruceni) .shipping-billing-name {
    font-weight: 500 !important;
}

.ordering-process #checkoutContent .kosik-zaver__souhrn .order-summary h2 {
    font-size: var(--text-zakladni) !important;
}

.kosik-zaver__souhrn .cart-item .main-link,
.kosik-zaver__souhrn .cart-item-amount,
.kosik-zaver__souhrn .cart-item-price {
    font-size: var(--text-drobny) !important;
}

/* Nadpisy bloků bez ikonek šablony (osoba, auto, peněženka…) */
.ordering-process #checkoutContent h2::before,
.ordering-process #checkoutContent h2::after,
.ordering-process #checkoutContent fieldset > h2::before {
    display: none !important;
    content: none !important;
}

/* šablona odsazuje nadpis kvůli ikonce o 65 px (.order-icon) */
body.ordering-process #checkoutContent h2,
body.ordering-process #checkoutContent h2.order-icon {
    padding-left: 0 !important;
    min-height: 0 !important;
}

/* Země doručení sloučená se způsobem dopravy (initZemeDopravy): původní
   blok s rozbalovacím seznamem i skutečné volby doprav šablony jsou skryté
   (zůstávají kvůli odeslání), vidět je seznam .doruceni */
.zeme-v-doprave .co-basic-information,
.zeme-v-doprave #order-shipping-methods {
    display: none !important;
}

/* Doprava jiné země se ještě načítá – bez ceny a nejde vybrat */
.ordering-process .doruceni .radio-wrapper.nacita label {
    cursor: progress;
    opacity: .6;
}


/* Dokud není doprava vybraná, rekapitulace ji neukazuje */
.doprava-nevybrana .kosik-zaver__souhrn #shipping-billing-summary .recapitulation-single:not(.rekap-platba) {
    display: none !important;
}

body.zeme-v-doprave #checkoutContent .cart-content > #order-form > .co-box:first-of-type {
    margin-top: 0 !important;
}

/* Zaškrtávátka voleb v našem stylu: hranatý čtverec 22 px s šedou
   linkou, vybraná volba meruňkový s bílou fajfkou (jako v nastavení
   cookies). Šablona kreslí rámeček i zelenou fajfku přes label. */
.ordering-process :is(.shipping-billing-table, .doruceni) .radio-wrapper label {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px 16px 58px !important;
    cursor: pointer;
}

.ordering-process :is(.shipping-billing-table, .doruceni) .radio-wrapper label::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    background: #fff center / 16px no-repeat !important;
    border: 1.5px solid #585653 !important;
    border-radius: 0 !important;
    box-sizing: border-box;
}

.ordering-process :is(.shipping-billing-table, .doruceni) .radio-wrapper label::after {
    display: none !important;
}

.ordering-process :is(.shipping-billing-table, .doruceni) input:checked + label::before,
.ordering-process :is(.shipping-billing-table, .doruceni) .radio-wrapper.active label::before {
    background-color: var(--primary-color) !important;
    background-image: url('/user/documents/assets/ui-ikony/fajfka-bila.svg') !important;
    border-color: var(--primary-color) !important;
}

.ordering-process :is(.shipping-billing-table, .doruceni) .payment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ordering-process :is(.shipping-billing-table, .doruceni) .not-possible-info {
    font-size: var(--text-drobny);
    font-style: normal;
    color: #585653;
}

/* Rekapitulace jako souhrn košíku: Celkem za zboží, doprava, platba,
   Celkem k úhradě – bez nadpisu a položek, bez linek mezi řádky */
.kosik-zaver__souhrn .order-summary h2,
.kosik-zaver__souhrn .order-summary-inner > .cart-items {
    display: none !important;
}

.kosik-zaver__souhrn .order-summary-item.helper,
.kosik-zaver__souhrn .recapitulation-single {
    padding: 0 0 8px !important;
    border-top: 0 !important;
    font-size: var(--text-zakladni) !important;
    color: #110E0A !important;
}

.kosik-zaver__souhrn .order-summary-item.helper strong,
.kosik-zaver__souhrn .order-summary-item.helper > div {
    font-size: var(--text-zakladni) !important;
    font-weight: 400 !important;
}

.kosik-zaver__souhrn .order-summary-item.helper > div:last-child {
    font-weight: 500 !important;
    white-space: nowrap;
}

.kosik-zaver__souhrn .order-summary-item.price {
    margin: 8px 0 16px !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgba(17, 14, 10, .12) !important;
}

/* Skrytý blok země nesmí nechat mezeru – Doprava 36 px pod kroky */
body.zeme-v-doprave #checkoutContent .cart-content > form + form {
    margin-top: 0 !important;
}

/* Ceny v rekapitulaci zarovnané k pravé hraně (šablona dávala 20 px) */
.kosik-zaver__souhrn .recapitulation-single > strong > span {
    padding: 0 !important;
}

/* Vybraná volba měla od šablony silnější spodní linku */
body.ordering-process #checkoutContent :is(.shipping-billing-table, .doruceni) .radio-wrapper {
    border-width: 1px !important;
    box-shadow: none !important;
}

/* Popisek volby bez linky šablony */
body.ordering-process #checkoutContent :is(.shipping-billing-table, .doruceni) .radio-wrapper label {
    border: 0 !important;
    box-shadow: none !important;
}

.ordering-process :is(.shipping-billing-table, .doruceni) .payment-shipping-price {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ordering-process :is(.shipping-billing-table, .doruceni) .radio-wrapper label {
        gap: 12px;
        padding: 14px 16px 14px 50px !important;
    }

    .ordering-process :is(.shipping-billing-table, .doruceni) .radio-wrapper label::before {
        left: 16px !important;
    }
}

/* Zaškrtávátka v kontaktních údajích (Nakupuji na firmu, Doručit na
   jinou adresu, poznámka) stejně jako volby dopravy a platby */
.ordering-process #checkoutContent input[type="checkbox"] + label {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
    padding-left: 34px !important;
    font-size: var(--text-drobny) !important;
    font-weight: 600 !important;
    color: #110E0A;
    cursor: pointer;
}

.ordering-process #checkoutContent input[type="checkbox"] + label::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    background: #fff center / 16px no-repeat !important;
    border: 1.5px solid #585653 !important;
    border-radius: 0 !important;
    box-sizing: border-box;
}

.ordering-process #checkoutContent input[type="checkbox"] + label::after {
    display: none !important;
}

.ordering-process #checkoutContent input[type="checkbox"]:checked + label::before {
    background-color: var(--primary-color) !important;
    background-image: url('/user/documents/assets/ui-ikony/fajfka-bila.svg') !important;
    border-color: var(--primary-color) !important;
}

.ordering-process #checkoutContent input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Nadpisy bloků v kontaktních údajích (Osobní údaje, Fakturační adresa)
   měly od šablony odsazení po ikonce s vyšší prioritou */
body.ordering-process #checkoutContent .co-box h2,
body.ordering-process #checkoutContent fieldset h2,
body.ordering-process #checkoutContent h2.header-billing {
    padding-left: 0 !important;
    background-image: none !important;
}

/* Pokračovat / Objednat v souhrnu kroků stejně jako v košíku: meruňková
   plocha, při najetí tmavší (šablona tu dávala šedé pozadí) */
.kosik-zaver .next-step .next-step-forward,
.kosik-zaver .next-step .next-step-finish {
    color: #fff !important;
    background: var(--primary-color) !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    transition: var(--prechod-tlacitka) !important;
}

.kosik-zaver .next-step .next-step-forward:hover,
.kosik-zaver .next-step .next-step-forward:focus-visible,
.kosik-zaver .next-step .next-step-finish:hover,
.kosik-zaver .next-step .next-step-finish:focus-visible {
    color: #fff !important;
    background: #a9571f !important;
    background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
}

/* Řádek dopravy v rekapitulaci (řádky Shoptetu se nepřestavují): popisek
   „Způsob dopravy:" pryč, v <strong> je cena a za ní název – název vlevo,
   cena vpravo */
.kosik-zaver__souhrn .recapitulation-single > span:first-child {
    display: none !important;
}

.kosik-zaver__souhrn .recapitulation-single > strong {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    font-size: var(--text-zakladni) !important;
    font-weight: 400 !important;
    color: #110E0A;
}

.kosik-zaver__souhrn .recapitulation-single > strong > span {
    order: 2;
    margin-left: auto;
    flex: 0 0 auto;
    font-weight: 500;
    white-space: nowrap;
}

/* Tlačítka, pole a výběry si font stránky nedědí (Pokračovat měl Arial) */
.ordering-process button,
.ordering-process input,
.ordering-process select,
.ordering-process textarea,
.ordering-process .btn,
.ordering-process .order-button-text {
    font-family: var(--template-font) !important;
}

/* Platba, kterou Shoptet pro zvolenou dopravu nepovoluje (inactive-child,
   „Tato kombinace dopravy a platby není možná"): jasně neaktivní – bílá,
   šedá linka a šedé prázdné zaškrtávátko, i když ji má Shoptet zaškrtnutou */
body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.inactive-child {
    background: #fff !important;
    border-color: #DBDBDA !important;
    cursor: not-allowed;
}

body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.inactive-child label {
    color: #A09F9D !important;
    cursor: not-allowed;
}

body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.inactive-child label::before {
    background-color: #F4F4F4 !important;
    background-image: none !important;
    border-color: #DBDBDA !important;
}

body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.inactive-child .shipping-billing-name,
body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.inactive-child .payment-shipping-price {
    color: #A09F9D !important;
}

body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.inactive-child .not-possible-info {
    color: var(--primary-color) !important;
    font-weight: 500;
}

/* Název volby i pod myší naší tmavou (šablona ho při najetí šedila) */
body.ordering-process #checkoutContent :is(.shipping-billing-table, .doruceni) .radio-wrapper:not(.inactive-child) .shipping-billing-name,
body.ordering-process #checkoutContent :is(.shipping-billing-table, .doruceni) .radio-wrapper:not(.inactive-child) label:hover .shipping-billing-name {
    color: #110E0A !important;
}

/** --- 19) Objednávka: Kontaktní údaje ------------------------------------- */
/* Stejná řeč jako Doprava a platba: přes celou šířku obsahu, pole ve dvou
   sloupcích (Jméno | E-mail, Ulice | Město…), bílá pole s šedou linkou
   jako řádky voleb, meruňková při psaní. Mezi bloky 36 px, nadpis 16 px
   nad poli, mezi poli 24 px. Mobil: jeden sloupec. */
.in-krok-2 #checkoutContent fieldset.box,
.in-krok-2 #checkoutContent .co-shipping-address {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    min-width: 0;
}

.in-krok-2 #checkoutContent fieldset.box > * {
    min-width: 0;
    margin: 0 !important;
}

/* Nadpis, zaškrtávátko a skrytá pole přes oba sloupce; nadpis má k polím
   16 px (mezera mřížky 24 px − 8 px) */
.in-krok-2 #checkoutContent fieldset.box > h2,
.in-krok-2 #checkoutContent fieldset.box > .company-shopping,
.in-krok-2 #checkoutContent fieldset.box > #company-info,
.in-krok-2 #checkoutContent fieldset.box > .sr-only,
.in-krok-2 #checkoutContent fieldset.box > .form-legend {
    grid-column: 1 / -1;
}

.in-krok-2 #checkoutContent fieldset.box > h2 {
    margin: 0 0 -8px !important;
}

/* Fakturační adresa: nadpis, Nakupuji na firmu, údaje firmy (když je
   zaškrtnuto) a pod nimi adresa */
.in-krok-2 .co-billing-address fieldset.box > .form-group {
    order: 1;
}

.in-krok-2 .co-billing-address fieldset.box > .company-shopping {
    order: -1;
}

.in-krok-2 .co-billing-address fieldset.box > #company-info {
    order: 0;
}

.in-krok-2 #company-info:not(.js-hidden) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.in-krok-2 #company-info > .form-group {
    margin: 0 !important;
}

/* Doručovací adresa: pole z vnořeného bloku rovnou do mřížky */
.in-krok-2 .co-shipping-address > .form-option-block {
    display: contents !important;
}

.in-krok-2 .co-shipping-address .form-option-block > .form-group {
    margin: 0 !important;
}

.in-krok-2 #shipping-address:not(.js-hidden) {
    margin: 24px 0 !important;
}

/* Poznámka pro prodejce přes celou šířku */
.in-krok-2 #checkoutContent #note fieldset.box {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 16px !important;
}

/* Popisek nad polem, pole přes celou šířku sloupce (šablona dávala
   popisek vedle a pole max. 500 px) */
.in-krok-2 #checkoutContent .form-group--inline {
    display: block !important;
    margin: 0 !important;
}

.in-krok-2 #checkoutContent .form-group--inline > label,
.in-krok-2 #checkoutContent .form-group--inline > .label {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    float: none !important;
    text-align: left !important;
    line-height: 1.4 !important;
}

.in-krok-2 #checkoutContent .form-control-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Povinné pole: hvězdička meruňková */
.in-krok-2 #checkoutContent .required-asterisk::after {
    color: var(--primary-color) !important;
}

/* Pole: bílé, šedá linka, hranaté, 52 px; při najetí tmavší linka,
   při psaní meruňková s jemnou září */
.in-krok-2 #checkoutContent .form-control {
    width: 100% !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    color: #110E0A !important;
    background: #fff !important;
    border: 1px solid #DBDBDA !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color .15s linear, box-shadow .15s linear;
}

.in-krok-2 #checkoutContent textarea.form-control {
    height: auto !important;
    min-height: 120px !important;
    padding: 14px 16px !important;
    line-height: 1.5;
    resize: vertical;
}

.in-krok-2 #checkoutContent .form-control:hover {
    border-color: #A09F9D !important;
}

.in-krok-2 #checkoutContent .form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(188, 97, 37, .15) !important;
    outline: 0 !important;
}

/* Chyba (Shoptet označí pole a vypíše hlášku pod něj): červená linka
   a hláška 14 px – chyba se nepozná jen podle barvy */
.in-krok-2 #checkoutContent .form-control:is(.error-field, .js-error-field) {
    border-color: #C0392B !important;
}

.in-krok-2 #checkoutContent .form-control:is(.error-field, .js-error-field):focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .15) !important;
}

.in-krok-2 #checkoutContent .msg-error {
    position: static !important;
    display: block;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    font-size: var(--text-drobny) !important;
    line-height: 1.4;
    color: #C0392B !important;
    background: none !important;
    border: 0 !important;
}

/* Telefon: předvolba s vlajkou uvnitř pole vlevo */
.in-krok-2 #checkoutContent .phone-combined-input {
    position: relative;
    display: flex;
    width: 100%;
}

.in-krok-2 #checkoutContent .phone-combined-input .country-flags {
    position: absolute !important;
    top: 1px !important;
    left: 1px !important;
    bottom: 1px !important;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 8px 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid #DBDBDA !important;
    cursor: pointer;
}

.in-krok-2 #checkoutContent .phone-combined-input .country-flags-inner {
    top: 0;
}

.in-krok-2 #checkoutContent .phone-combined-input .form-control {
    padding-left: 96px !important;
}

/* Země: jen pro čtení (mění se v předchozím kroku) – hodnota v šedé
   ploše jako zamčené pole, odkaz zpět drobně pod ní */
.in-krok-2 #checkoutContent .form-control-wrapper--with-note {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
}

.in-krok-2 #checkoutContent .form-control-wrapper--with-note > strong {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 16px;
    font-size: var(--text-zakladni);
    font-weight: 500;
    color: #110E0A;
    background: #F7F6F5;
    border: 1px solid #DBDBDA;
}

.in-krok-2 #checkoutContent .helpNote {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--text-drobny);
    font-style: normal;
    color: #585653;
}

.in-krok-2 #checkoutContent .helpNote a {
    color: var(--primary-color);
}

/* DIČ: otazník s nápovědou uvnitř pole vpravo */
.in-krok-2 #checkoutContent .form-group-hasTooltip .form-control-wrapper {
    position: relative;
}

.in-krok-2 #checkoutContent .form-group-tooltip {
    position: absolute !important;
    top: 15px !important;
    right: 14px !important;
    margin: 0 !important;
}

/* Zaškrtávátka (Nakupuji na firmu, Doručit na jinou adresu, poznámka)
   textem 16 px jako názvy voleb v Dopravě a platbě; dvě pod adresou pod
   sebou jako jeden seznam, 24 px pod polem */
.in-krok-2 #checkoutContent input[type="checkbox"] + label {
    font-size: var(--text-zakladni) !important;
    font-weight: 500 !important;
}

.in-krok-2 #checkoutContent .co-billing-address > .form-group {
    margin: 24px 0 0 !important;
}

.in-krok-2 #checkoutContent .co-box-additional {
    margin-top: 0 !important;
}

.in-krok-2 #checkoutContent .co-box-additional > .form-group {
    margin: 0 !important;
}

.in-krok-2 #checkoutContent .company-shopping input[type="checkbox"] + label {
    min-height: 32px;
}

.in-krok-2 #checkoutContent .stay-in-touch:empty {
    display: none;
}

/* Souhrn 36 px pod formulářem (jako v Dopravě a platbě) */
.in-krok-2 #checkoutContent .kosik-zaver {
    margin-top: 36px !important;
}

/* Objednat velkými písmeny jako Pokračovat v objednávce */
.kosik-zaver .next-step .next-step-finish .order-button-text {
    text-transform: uppercase;
}

/* Mobil: jeden sloupec */
@media (max-width: 767.98px) {
    .in-krok-2 #checkoutContent fieldset.box,
    .in-krok-2 #checkoutContent .co-shipping-address,
    .in-krok-2 #company-info:not(.js-hidden) {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* Pole v mřížce bez vlastních okrajů (šablona dávala blokům v .co-box
   16 px nahoře a polím 10 px dole – mezery řádků by nebyly stejné) */
body.in-krok-2 #checkoutContent fieldset.box > .form-group,
body.in-krok-2 #checkoutContent #company-info > .form-group,
body.in-krok-2 #checkoutContent .form-option-block > .form-group {
    margin: 0 !important;
}

body.in-krok-2 #checkoutContent .form-group .form-control {
    margin: 0 !important;
}

/* Země: zamčený výběr šablony i jeho popisek pryč (popisek „Země" je
   u řádku s hodnotou) */
body.in-krok-2 #checkoutContent .form-group--inline > label.js-location--hidden {
    display: none !important;
}

/* Souhlas s podmínkami nad Objednat: běžný drobný text (šablona ho měla
   jako popisek pole – tučně) */
body.ordering-process #checkoutContent .kosik-zaver__souhrn .consents .label {
    margin: 0 !important;
    font-size: var(--text-drobny) !important;
    font-weight: 400 !important;
    line-height: 1.5;
    color: #585653 !important;
}

/* Rozbalené bloky (údaje firmy, doručovací adresa, poznámka): Shoptet
   jim při zobrazení přidá třídu visible a js-hidden nechá */
.in-krok-2 #company-info.visible {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.in-krok-2 #shipping-address.visible {
    margin: 24px 0 !important;
}

/* Země fakturační adresy: u nákupu na firmu jde vybrat (výběr), jinak
   jen hodnota z předchozího kroku – Shoptet přepíná třídu
   js-location--hidden, ta musí přebít naše zobrazení obou variant */
body.in-krok-2 #checkoutContent .form-group .js-location--hidden {
    display: none !important;
}

/* Výběr (země u firmy) se šipkou – naše bílé pozadí šablonovou šipku
   přepsalo */
body.in-krok-2 #checkoutContent select.form-control {
    padding-right: 44px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23110E0A' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .in-krok-2 #company-info.visible {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* Otazník nápovědy u DIČ: hranatý, šedý obrys (šablona měla černý
   čtvereček) */
body.in-krok-2 #checkoutContent .form-group-tooltip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1 !important;
    color: #585653 !important;
    background: #fff !important;
    border: 1px solid #A09F9D !important;
    border-radius: 0 !important;
    cursor: help;
}

body.in-krok-2 #checkoutContent .form-group-tooltip:hover {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Rozbalený seznam předvoleb: hranatý, šedá linka a jemný stín jako
   rozbalovací nabídky v hlavičce (šablona měla černý zaoblený rámeček) */
body.in-krok-2 #checkoutContent .country-flags.active .country-flags-inner {
    top: -1px;
    left: -1px;
    border: 1px solid #DBDBDA;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(17, 14, 10, .12);
}

body.in-krok-2 #checkoutContent .country-flags.active .country-flag.selected,
body.in-krok-2 #checkoutContent .country-flags.active .country-flag.country-flag-preferred-last {
    border-bottom-color: #DBDBDA;
}

body.in-krok-2 #checkoutContent .country-flags.active .country-flag:hover,
body.in-krok-2 #checkoutContent .country-flags.active .country-flag:focus {
    color: var(--primary-color);
    background: var(--secondary-color);
    outline: 0;
}

/* Předvolba telefonu svisle na střed pole (šablona ji držela nahoře);
   rozbalený seznam zůstává od horní hrany */
body.in-krok-2 #checkoutContent .country-flags:not(.active) .country-flags-inner {
    top: 50%;
    transform: translateY(-50%);
}

/* DIČ: ikonka (i) vedle popisku jako na detailu produktu, bublina nad ní
   (černá, bílý text) – na najetí i na fokus z klávesnice */
body.in-krok-2 #checkoutContent .form-group-tooltip[hidden] {
    display: none !important;
}

:is(.in-krok-1, .in-krok-2) .pole-info {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
}

:is(.in-krok-1, .in-krok-2) .pole-info__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    cursor: help;
}

:is(.in-krok-1, .in-krok-2) .pole-info__btn img {
    width: 18px;
    height: 18px;
}

:is(.in-krok-1, .in-krok-2) .pole-info__btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

:is(.in-krok-1, .in-krok-2) .pole-info__bublina {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    display: none;
    width: max-content;
    max-width: 320px;
    padding: 10px 14px;
    transform: translateX(-50%);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #fff;
    background: #110E0A;
}

:is(.in-krok-1, .in-krok-2) .pole-info__bublina::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    transform: rotate(45deg);
    background: #110E0A;
}

:is(.in-krok-1, .in-krok-2) .pole-info:hover .pole-info__bublina,
:is(.in-krok-1, .in-krok-2) .pole-info:focus-within .pole-info__bublina {
    display: block;
}

/* Na úzkém displeji bublina od ikonky doprava, ať nevyjede z obrazovky */
@media (max-width: 767.98px) {
    :is(.in-krok-1, .in-krok-2) .pole-info__bublina {
        left: -60px;
        max-width: calc(100vw - 48px);
        transform: none;
    }

    :is(.in-krok-1, .in-krok-2) .pole-info__bublina::after {
        left: 71px;
    }
}

/* Firma, jiná adresa a poznámka se po zaškrtnutí ukážou hned – bez
   rozbalovací animace šablony (.js-hidden.visible, transition .3s) */
.in-krok-2 #checkoutContent .js-hidden,
.in-krok-2 #checkoutContent .js-hidden.visible,
.in-krok-2 #checkoutContent input[type="checkbox"] + label::before {
    transition: none !important;
    animation: none !important;
}

/* Blok předvolby přes celou výšku pole (šablona mu nechávala 40 px) –
   jinak by „na střed" bylo nad středem pole */
body.in-krok-2 #checkoutContent .phone-combined-input .country-flags {
    height: calc(100% - 2px) !important;
}

/* Místo pro nadmenu ještě před jeho vložením. Nadmenu vkládá JS (initMenu)
   až po načtení stránky – do té doby byla hlavička i celý obsah o 40 px
   výš a pak poskočily dolů. Hnědý pruh stejné výšky drží místo, dokud
   nadmenu nepřibude (na mobilu nadmenu není, tam ani místo). */
@media (min-width: 768px) {
    .overall-wrapper:not(:has(> .nadmenu))::before {
        content: "";
        display: block;
        height: var(--nadmenu-vyska);
        background: var(--primary-color);
    }
}

/* Košík: dokud JS nesložil rozpis položky, původní řádek varianty
   a příplatků se neukazuje (místo drží) – text se tak nepřepisuje před očima */
.ordering-process .cart-table tr:not(.ma-rozpis) .main-link-variant,
.ordering-process .cart-table tr:not(.ma-rozpis) .main-link-surcharges {
    visibility: hidden;
}

/* Košík a kroky objednávky: obsah se ukáže až hotový (ukazKosik v JS
   přidá body.kosik-hotovo po načtení stránky, nejdéle po 3 s) – jinak na
   okamžik problikne podoba šablony (pravý panel, původní kroky,
   předvybraná doprava) a pak vše přeskočí. Do té doby je pod hlavičkou
   prázdné místo (bez loaderu). Kdyby JS vůbec neproběhl, obsah se ukáže
   sám po 12 s – pojistka musí být dlouhá: skripty šablony a doplňků se na
   pomalejším připojení načítají i přes 5 s a dřívější pojistka ukázala
   neupravený obsah, který pak přeskočil (s 5 s se to dělo). */
@keyframes kosik-ukaz {
    to { visibility: visible; }
}

body.ordering-process:not(.kosik-hotovo) #content .content-inner {
    visibility: hidden;
    animation: kosik-ukaz 0s 12s forwards;
}

/** --- 20) Mobilní menu: spodní část stejně jako položky -------------------- */
/* Pod hlavními položkami pokračují odkazy z nadmenu (Časté otázky,
   Doživotní záruka) jako další řádky seznamu – stejné písmo 15 px / 500,
   výška řádku, linka a černá ikonka v poli 24 × 18 px. Kontakt je pod
   nimi v jílové kartě (stejné řádky s ikonkou, provozní doba drobně pod
   telefonem). Ikonky hlavních položek mají stejně široké pole, takže
   texty všech řádků začínají pod sebou. Ťuknutí / najetí = hnědý text
   (jako hover menu na desktopu), ikonka zůstává černá. */
@media (max-width: 767px) {
    /* Prázdný seznam akcí šablony kreslil pod položkami druhou čáru */
    #navigation .navigationActions:not(:has(li)) {
        display: none !important;
    }

    #navigation .navigation-in > .menu-level-1 > li > a {
        color: #110E0A !important;
    }

    #navigation .navigation-in > .menu-level-1 > li > a b {
        color: inherit !important;
    }

    #navigation .navigation-in > .menu-level-1 > li > a::before {
        flex: 0 0 24px;
        width: 24px !important;
        background-position: center !important;
        background-size: contain !important;
    }

    #navigation .navigation-in > .menu-level-1 > li > a:hover,
    #navigation .navigation-in > .menu-level-1 > li > a:active,
    #navigation .navigation-in > .menu-level-1 > li > a:focus-visible {
        color: var(--primary-color) !important;
    }

    #navigation .menu-doplnek {
        margin: 0 20px 32px;
        padding: 0;
        border-top: 0;
    }

    /* Odkazy jako řádky menu */
    .menu-doplnek__odkazy a,
    .menu-doplnek__kontakt a {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 0;
        padding: 12px 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 18px;
        color: #110E0A;
        text-decoration: none;
        transition: color .15s linear;
    }

    .menu-doplnek__odkazy a {
        border-bottom: 1px solid #F2F2F2;
    }

    .menu-doplnek__odkazy a::before,
    .menu-doplnek__kontakt a::before {
        content: "";
        flex: 0 0 24px;
        width: 24px;
        height: 18px;
        background: #110E0A;
        -webkit-mask: var(--ikona) center / contain no-repeat;
        mask: var(--ikona) center / contain no-repeat;
    }

    .menu-doplnek__odkazy a[href*="faq"]::before {
        --ikona: url('/user/documents/assets/ui-ikony/recenze.svg');
    }

    .menu-doplnek__odkazy a[href*="zaruka"]::before {
        --ikona: url('/user/documents/assets/img/flags/zaruka.svg');
    }

    .menu-doplnek__odkazy a:hover,
    .menu-doplnek__odkazy a:active,
    .menu-doplnek__odkazy a:focus-visible,
    .menu-doplnek__kontakt a:hover,
    .menu-doplnek__kontakt a:active,
    .menu-doplnek__kontakt a:focus-visible {
        color: var(--primary-color);
    }

    /* Kontakt: jílová karta pod odkazy, 24 px od nich */
    .menu-doplnek__kontakt {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        border-top: 0;
    }

    .menu-doplnek__kontakt .nadmenu__tel::before {
        --ikona: url('/user/documents/assets/ui-ikony/telefon.svg');
    }

    .menu-doplnek__kontakt .nadmenu__mail::before {
        --ikona: url('/user/documents/assets/ui-ikony/mail.svg');
    }

    /* Provozní doba drobně pod číslem, zarovnaná s textem (ikonka 24 +
       mezera 8 px), bez verzálek */
    .menu-doplnek__kontakt .nadmenu__pozn {
        margin: -8px 0 4px 32px;
        padding-bottom: 8px;
        font-size: var(--text-drobny);
        letter-spacing: 0;
        text-transform: none;
        color: #585653;
        border-bottom: 1px solid rgba(17, 14, 10, .08);
    }

    .menu-doplnek__kontakt .nadmenu__mail {
        margin-left: 0;
    }
}

/* Rozbalené podmenu na mobilu: nadpis „← Postele" – šipka zpět místo
   ikonky kategorie (initMenu: ťuknutí na nadpis podmenu zavře) */
@media (max-width: 767px) {
    #navigation .navigation-in > .menu-level-1 > li.ext.exp > a::before {
        background: #110E0A !important;
        filter: none !important;
        -webkit-mask: url('/user/documents/assets/ui-ikony/sipka-vlevo.svg') center / 16px auto no-repeat;
        mask: url('/user/documents/assets/ui-ikony/sipka-vlevo.svg') center / 16px auto no-repeat;
    }

    #navigation .navigation-in > .menu-level-1 > li.ext.exp > a {
        cursor: pointer;
    }
}

/** --- 21) Ikonky z nové sady (assets/ui-ikony) ----------------------------- */
/* Nové ikonky mají jiné poměry stran než původní – v menu se vejdou celé
   do pole své šířky (dřív 100 % šířky, vyšší ikonka by se ořízla) */
#navigation ul.menu-level-1 > li > a::before {
    background-size: contain !important;
    background-position: center !important;
}

/* Kontakt v patičce (sloupec Kontakt): ikonky šablony (mail-f, phone-f,
   fb-f, cart-ig) → nová sada, celé v poli šablony 25 × 20 px */
#footer .contact-box ul li > span > a::before {
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

#footer .contact-box ul li > span.mail > a::before {
    background-image: url('/user/documents/assets/ui-ikony/mail.svg') !important;
}

#footer .contact-box ul li > span.tel > a::before {
    background-image: url('/user/documents/assets/ui-ikony/telefon.svg') !important;
}

#footer .contact-box ul li > span.facebook > a::before {
    background-image: url('/user/documents/assets/ui-ikony/facebook.svg') !important;
}

#footer .contact-box ul li > span.instagram > a::before {
    background-image: url('/user/documents/assets/ui-ikony/instagram.svg') !important;
}

/** --- 22) Mobilní menu: kontakt v jílové kartě ----------------------------- */
/* Karta s telefonem a e-mailem: jílová plocha, hnědé ikonky. Každý řádek
   je ikonka (pole 24 px) svisle na střed vedle textu – u telefonu vedle
   čísla i provozní doby. Řádky bez oddělovací linky, odsazení karty je
   ze všech stran stejné (16 px). */
@media (max-width: 767px) {
    .menu-doplnek__kontakt {
        background: var(--secondary-color) !important;
    }

    .menu-doplnek__kontakt .menu-kontakt {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
        color: #110E0A;
        text-decoration: none;
    }


    .menu-doplnek__kontakt .menu-kontakt::before {
        content: "";
        flex: 0 0 24px;
        width: 24px;
        height: 20px;
        background: var(--primary-color) !important;
        -webkit-mask: var(--ikona) center / contain no-repeat;
        mask: var(--ikona) center / contain no-repeat;
    }

    .menu-doplnek__kontakt .menu-kontakt--tel::before {
        --ikona: url('/user/documents/assets/ui-ikony/telefon.svg');
    }

    .menu-doplnek__kontakt .menu-kontakt--mail::before {
        --ikona: url('/user/documents/assets/ui-ikony/mail.svg');
    }

    .menu-kontakt__text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .menu-kontakt__hodnota {
        font-size: 15px;
        font-weight: 500;
        line-height: 18px;
    }

    .menu-kontakt__pozn {
        font-size: var(--text-drobny);
        line-height: 1.3;
        color: #585653;
    }

    .menu-doplnek__kontakt .menu-kontakt:hover .menu-kontakt__hodnota,
    .menu-doplnek__kontakt .menu-kontakt:active .menu-kontakt__hodnota,
    .menu-doplnek__kontakt .menu-kontakt:focus-visible .menu-kontakt__hodnota {
        color: var(--primary-color);
    }
}

/* Kontakt blíž k odkazům (16 px), bez linky pod posledním odkazem
   (Doživotní záruka) a s nadpisem „Potřebujete poradit?" */
@media (max-width: 767px) {
    .menu-doplnek__odkazy a:last-child {
        border-bottom: 0;
    }

    .menu-doplnek__kontakt {
        margin-top: 12px !important;
        padding-top: 16px !important;
    }

    .menu-kontakt__nadpis {
        font-size: 15px;
        font-weight: 600;
        line-height: 18px;
        color: #110E0A;
    }
}

/* Rytmus uvnitř karty kontaktu: od horní hrany k nadpisu 16 px, nadpis →
   telefon 12 px, telefon → e-mail i e-mail → spodní hrana ~16 px. Řádky
   mají výšku aspoň 44 px (dotyk), text v nich na střed – proto malé
   vnitřní odsazení řádků a karta dole jen 4 px (dřív byl e-mail 24 px
   od telefonu, ale nadpis jen 16 px). */
@media (max-width: 767px) {
    .menu-doplnek__kontakt {
        padding: 16px 16px 4px !important;
    }

    .menu-kontakt__nadpis {
        margin: 0 0 8px !important;
    }

    .menu-doplnek__kontakt .menu-kontakt {
        min-height: 44px;
        padding: 4px 0 !important;
        box-sizing: border-box;
    }
}

/** --- 23) Zápatí: sloupce a spodní řádek ---------------------------------- */
/* Horní řádek s logem, sítěmi, kontaktem a tlačítky Blog / Náš příběh
   pryč (kontakt je ve sloupci Kontakt). Sloupce (Důležité informace,
   Novinky, Kontakt…) rovnoměrně přes celou šířku – kolik jich je, tolik
   stejně širokých sloupců (šablona jim dávala čtvrtiny, tři nechávaly
   vpravo díru). Pod nimi čára a spodní řádek: vlevo „Nastavení souborů
   cookies" (bez podtržení, při najetí hnědě), vpravo podpis Shoptet &
   4works. */
#footer .footer-rows > .site-name {
    display: none !important;
}

#footer .custom-footer {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 0 0 36px !important;
}

/* Od banneru nad zápatím k nadpisům sloupců 72 px (rytmus sekcí): banner
   má pod sebou 50 px, zápatí přidá 22 px a nadpisy sloupců jsou bez
   horního okraje (šablona dávala 48 + 20 px a horní řádek s logem další
   desítky) */
#footer {
    margin-top: 0 !important;
    padding-top: 22px !important;
}

#footer .custom-footer h3 {
    margin-top: 0 !important;
}

#footer .custom-footer > div {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

#footer .footer-bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 16px 32px;
    padding: 24px 15px 32px !important;
}

/* Čára přes šířku obsahu (ne přes odsazení kontejneru) */
#footer .footer-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    border-top: 1px solid #DBDBDA;
}

#footer .footer-bottom {
    position: relative;
}

#footer .footer-bottom .copyright {
    order: -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    font-size: var(--text-drobny);
    line-height: 1.4;
    text-align: left !important;
    color: #110E0A;
}

body footer .container.footer-bottom .copyright a.js-cookies-settings {
    font-weight: 400;
    color: #110E0A;
    text-decoration: none !important;
    transition: color .15s linear;
}

body footer .container.footer-bottom .copyright a.js-cookies-settings:hover,
body footer .container.footer-bottom .copyright a.js-cookies-settings:focus-visible {
    color: var(--primary-color);
}

/* Podpis vpravo: šablona mu dávala flex: 1 1 0 a výšku 0 s overflow:
   hidden (na řádku by zmizel) – vlastní šířka, plná výška, logo a „&
   4works" na jedné lince */
#footer .footer-bottom #signature {
    flex: 0 0 auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    line-height: 1 !important;
    text-align: right !important;
    white-space: nowrap;
}

#footer .footer-bottom #signature > a {
    vertical-align: middle;
}

/* Tablet: dva sloupce vedle sebe; mobil: pod sebou, spodní řádek
   pod sebou na střed */
@media (max-width: 991.98px) {
    #footer .custom-footer {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 32px;
        padding: 0 0 32px !important;
    }
}

@media (max-width: 575.98px) {
    #footer .custom-footer {
        grid-template-columns: minmax(0, 1fr);
    }

    #footer .footer-bottom {
        flex-direction: column !important;
        justify-content: center !important;
    }

    #footer .footer-bottom .copyright {
        justify-content: center;
    }
}

/** --- 24) Vyhledávání na mobilu (pruh pod hlavičkou) ----------------------- */
/* Stejné prvky jako jinde na webu: bílý pruh s linkou, pole jako pole
   v objednávce (bílé, šedá linka, 48 px, při psaní hnědá linka se září),
   lupa v poli vlevo, tlačítko jako hlavní tlačítka (hnědé, verzálky,
   naše písmo – šablona tu měla Arial). Pole a tlačítko na sebe navazují.
   Písmo v poli 16 px – menší by iPhone při psaní přiblížil. */
@media (max-width: 767px) {
    #header .search-form.js-search-main {
        padding: 12px 16px !important;
        background: #fff !important;
        border-bottom: 1px solid #DBDBDA;
        box-shadow: 0 8px 16px rgba(17, 14, 10, .06);
    }

    #header .search-form.js-search-main fieldset {
        position: relative;
        display: flex !important;
        align-items: stretch;
        width: 100%;
        margin: 0 !important;
    }

    /* Lupa v poli */
    #header .search-form.js-search-main fieldset::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 14px;
        z-index: 1;
        width: 18px;
        height: 18px;
        transform: translateY(-50%);
        background: #585653;
        -webkit-mask: url('/user/documents/assets/ui-ikony/hledat.svg') center / contain no-repeat;
        mask: url('/user/documents/assets/ui-ikony/hledat.svg') center / contain no-repeat;
        pointer-events: none;
    }

    #header .search-form.js-search-main .search-input {
        flex: 1 1 auto;
        min-width: 0;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 12px 0 42px !important;
        font-family: var(--template-font) !important;
        font-size: 16px !important;
        color: #110E0A !important;
        background: #fff !important;
        border: 1px solid #DBDBDA !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: border-color .15s linear, box-shadow .15s linear;
    }

    #header .search-form.js-search-main .search-input::placeholder {
        color: #8C8A87;
        opacity: 1;
    }

    #header .search-form.js-search-main .search-input:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(188, 97, 37, .15) !important;
        outline: 0 !important;
    }

    #header .search-form.js-search-main button[type="submit"] {
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 20px !important;
        font-family: var(--template-font) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: #fff !important;
        background: var(--primary-color) !important;
        border: 0 !important;
        border-radius: 0 !important;
        transition: var(--prechod-tlacitka) !important;
    }

    #header .search-form.js-search-main button[type="submit"]:hover,
    #header .search-form.js-search-main button[type="submit"]:focus-visible {
        background: #a9571f !important;
        background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
    }
}

/* Lupa v mobilní hlavičce z naší sady jako košík vedle ní (šablona tu
   kreslila tenkou lupu písmem ikon) */
#header .responsive-tools a.toggle-window[data-target="search"]::before {
    content: "" !important;
    display: block;
    width: 30px !important;
    height: 30px !important;
    font-size: 0 !important;
    /* 18 px – lupa je čtvercová, takže je stejně vysoká jako košík
       (20 × 18) a opticky stejně velká jako menu (20 × 15) */
    background: url('/user/documents/assets/ui-ikony/hledat.svg') center / 18px auto no-repeat !important;
    /* O 2 px blíž ke košíku: s užší lupou zůstala mezera lupa–košík
       17 px proti 16 px košík–menu a košík má navíc vlevo dole prázdný
       roh, takže mezera působila ještě větší */
    transform: translateX(2px);
}

/* Otevřené vyhledávání: místo lupy křížek (ťuknutím se zavře) */
body.search-window-visible #header .responsive-tools a.toggle-window[data-target="search"]::before {
    background-image: url('/user/documents/assets/ui-ikony/krizek.svg') !important;
    background-size: 18px auto !important;
}

/* Menu (tři čáry) stejně velké a stejně silné jako lupa a košík vedle –
   šablona ho kreslila písmem ikon jen 16 px tenkou čarou. Čáry jsou
   vložené přímo (sada ikon menu nemá), 20 × 15 px s tahem jako lupa.
   Odsazení odkazu (40 × 40 px) posadí ikonu na stejný střed jako lupu
   a košík (svisle 30 px) a se stejným rozestupem od košíku jako lupa. */
#header .responsive-tools a.toggle-window[data-target="navigation"] {
    padding: 5px 9px 5px 1px !important;
}

#header .responsive-tools a.toggle-window[data-target="navigation"]::before {
    content: "" !important;
    display: block;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    font-size: 0 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath fill='%23121a21' d='M0 0h20v1.9H0zM0 6.55h20v1.9H0zM0 13.1h20V15H0z'/%3E%3C/svg%3E") center / 20px auto no-repeat !important;
}

/* Otevřené menu: místo čar křížek jako u vyhledávání */
body.navigation-window-visible #header .responsive-tools a.toggle-window[data-target="navigation"]::before {
    background-image: url('/user/documents/assets/ui-ikony/krizek.svg') !important;
    background-size: 18px auto !important;
}


/** ==========================================================================
 ** 25) Sjednocení celého webu (kontrola všech typů stránek)
 ** ==========================================================================
 ** Typografická škála webu: běžný text 16 px, drobný 14 px, štítky
 ** verzálkami 12 px; nadpisy H1 36 px (mobil 32), nadpisy sekcí 36 / 28,
 ** nadpisy v obsahu 28 / 24, nadpisy karet a bloků 18 px – vše váha 600.
 ** Navigace a tlačítka 15 px. Text uhlí #110E0A, doplňkový šedý #585653.
 ** Tady jsou prvky šablony a obsahu z administrace, které škálu nedržely
 ** (černá #000 / #222, Arial na tlačítkách, 12,6 / 15,4 / 16,8 / 21 px…).
 ** ========================================================================== */

/* Písmo: tlačítka a pole si ho nedědí (šablona tu měla Arial – Hledat
   v zápatí, Číst více u recenzí, Zobrazit další, Načíst další, formuláře) */
button,
input,
select,
textarea,
.btn {
    font-family: var(--template-font);
}

/* Obsah z administrace (popisy, články, stránky) nese v textu vložené
   písmo a velikost („Exo 2", 16 pt) – text drží písmo a velikost odstavce */
.pd-popis__obsah [style*="font"],
.basic-description [style*="font"],
.p-short-description [style*="font"],
.news-item-detail [style*="font"],
.content-inner .text [style*="font"] {
    font-family: inherit !important;
    font-size: inherit !important;
}

/* Barva textu: šablona dávala čistou černou (menu, názvy produktů,
   nadpisy zápatí, odkazy v zápatí, výpis článků) → uhlí */
#navigation .menu-level-1 > li > a,
#navigation .menu-level-1 > li > a b,
.products .p a.name,
.products .p a.name span,
.cart-table .p-name a.main-link,
#footer .pageElement__heading,
#footer .pageElement__heading span,
#footer .custom-footer li > a,
#newsWrapper .news-item .text,
#newsWrapper .news-item .text a.title,
#newsWrapper .news-item .text .read-more,
.news-item-detail .text,
.news-item-detail .text p {
    color: var(--text-color);
}

#footer .custom-footer li > a:hover,
#footer .custom-footer li > a:focus-visible,
#newsWrapper .news-item .text a.title:hover,
#newsWrapper .news-item .text .read-more:hover {
    color: var(--primary-color);
}

/* Šablona tu barvu drží s vyšší prioritou – uhlí natvrdo (najetí hnědě) */
#footer .custom-footer li > a,
.category-top h1.category-title,
.slider-header span,
.slider-header span span {
    color: var(--text-color) !important;
}

#footer .custom-footer li > a:hover,
#footer .custom-footer li > a:focus-visible {
    color: var(--primary-color) !important;
}

/* Výpis článků: popis drobným šedým textem (byl 12,6 px na mobilu) */
#newsWrapper .news-item .text .description,
#newsWrapper .news-item .text .description p {
    font-size: var(--text-drobny);
    line-height: 1.6;
    color: #585653;
}

/* Drobečková navigace 14 px: odkazy šedé (šablona 12,6 px a slabá 300),
   aktuální stránka uhlím */
.breadcrumbs a,
.breadcrumbs a span,
.breadcrumbs > span > span:not(.navigation-bullet) {
    font-size: var(--text-drobny) !important;
    font-weight: 400 !important;
    color: #585653 !important;
}

.breadcrumbs > span:last-child > span:not(.navigation-bullet),
.breadcrumbs > span:last-child > span:not(.navigation-bullet) span {
    font-weight: 600 !important;
    color: var(--text-color) !important;
}

.breadcrumbs a:hover,
.breadcrumbs a:hover span {
    color: var(--primary-color) !important;
}

/* Nadpisy sloupců zápatí 16 px (šablona 16,8 px) */
#footer .pageElement__heading,
#footer .pageElement__heading span {
    font-size: var(--text-zakladni) !important;
}

/* Filtry: počty a čísla cenového posuvníku drobným textem */
#filters .filter-label .filter-count {
    font-size: var(--text-drobny) !important;
    color: #585653 !important;
}

.slider-header span,
.slider-header span span {
    font-size: var(--text-drobny) !important;
    font-weight: 500;
}

/* Objednat – „s povinností platby" čitelně (12,3 px → 14 px) */
.kosik-zaver .next-step .next-step-finish .order-button-suffix {
    font-size: var(--text-drobny) !important;
}

/* Nadpisy v obsahu (Časté otázky, výsledky hledání, 404, obchodní
   podmínky, kalkulačka) 28 / 24 px, 600 – šablona a stránky z administrace
   měly 21 / 25 / 27 / 30 px a váhu 700 */
.faq-wrapper .faq-section-title,
.empty-content h2,
.in-vyhledavani main.content > h2,
.terms-page h2,
.terms-section h2,
.cstr-kalk .cstr-kalk__nadpis {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--text-color) !important;
}

.in-vyhledavani main.content > h2 strong {
    font-weight: 600 !important;
    color: var(--primary-color);
}

/* Příběh: nadpisy sekcí jako nadpisy sekcí webu (36 px; byly 48 px) */
.cp-container h2,
.cp-col-6 h2 {
    font-size: 2.25rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* Nadpisy karet a bloků 18 px, 600 (jako bloky v objednávce): kontakty,
   příběh, obchodní podmínky, výsledky hledání */
.kontakt-karta h2,
.form-wrapper h2,
.kontakt-poradce__text h2,
.cp-pink-box h3,
.cp-col-6 h3,
.terms-seller-box h3,
.terms-attachment h3,
.search-results h4,
.search-results-group h4 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--text-color) !important;
}

/* Běžný text stránek z administrace 16 px (příběh, podmínky měly 15 px) */
.cp-pink-box p,
.terms-seller-grid > div {
    font-size: var(--text-zakladni) !important;
}

.terms-seller-grid > div {
    color: var(--text-color) !important;
}

.terms-seller-grid > .terms-label {
    font-weight: 600 !important;
    color: var(--text-color) !important;
}

/* Kalkulačka: hlavní tlačítko jako hlavní tlačítka webu (15 px; bylo 17) */
.cstr-kalk .cstr-kalk__cta {
    font-size: 15px !important;
}

/* Odebrání položky v košíku: křížek z naší sady */
.cart-table .remove-item::before {
    content: "" !important;
    background: url('/user/documents/assets/ui-ikony/krizek.svg') center / 14px auto no-repeat !important;
}

/* Lupa na dlaždici dekoru o kousek větší (12 → 14 px) */
.product-conf__img > button::before {
    width: 14px !important;
    height: 14px !important;
}

@media (max-width: 767.98px) {
    h1,
    .h1,
    .category-title,
    header > h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .faq-wrapper .faq-section-title,
    .empty-content h2,
    .in-vyhledavani main.content > h2,
    .terms-page h2,
    .terms-section h2,
    .cstr-kalk .cstr-kalk__nadpis {
        font-size: 1.5rem !important;
    }

    .cp-container h2,
    .cp-col-6 h2 {
        font-size: 1.75rem !important;
    }
}

/** --- Mobil a tablet: dotykové plochy ------------------------------------ */
/* Odkazy a ovládací prvky aspoň ~40 px vysoké (dřív 19–30 px):
   drobečková navigace, odkazy v zápatí, kontakty v banneru, křížek
   v košíku, (i) a lupa v konfigurátoru. Ikonky v hlavičce zůstávají
   30 px – šablona je skládá absolutně a větší by se překrývaly. */
@media (max-width: 991.98px) {
    .breadcrumbs a,
    .breadcrumbs > span > span:not(.navigation-bullet) {
        display: inline-block;
        padding: 10px 0;
    }

    #footer .custom-footer li > a,
    #footer .contact-box li > span > a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    .contact-wrapper .tel > a,
    .contact-wrapper .mail > a {
        display: inline-block;
        padding: 8px 0;
    }

    .cart-table .remove-item {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Lupa zůstává absolutně v pravém dolním rohu obrázku (rodič je
       pozicovaný) – s relative skočila do toku dlaždice vlevo nahoru */
    .product-conf__info--btn {
        position: relative;
    }

    .product-conf__info--btn::after,
    .product-conf__img > button::after {
        content: "";
        position: absolute;
        inset: -10px;
    }
}

/** --- Tablet: hlavní menu se vejde mezi logo a ikonky ------------------- */
/* Na 768–1199 px menu sahalo přes „Více" i lupu (končilo na 790 px,
   lupa začínala na 781 px). Užší pole menu – co se nevejde, přesune
   šablona do „Více". */
@media (min-width: 768px) and (max-width: 1199px) {
    #navigation {
        width: calc(100% - 360px) !important;
    }
}

/* Zavřít filtry (mobil): křížek z naší sady 16 px vedle textu – šablonový
   obrázek měl kolem kresby okraj, náš ho nemá a 39px obrázek přetékal
   z obrazovky */
#filters .filters-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
}

#filters .filters-close-btn img {
    position: static !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

/* Článek: text 16 px / 1,7 jako popis produktu (šablona 14 px, řádkování
   normal); odkazy na předchozí / další článek jako vedlejší tlačítka webu */
.news-item-detail .text p,
.news-item-detail .text li {
    font-size: var(--text-zakladni);
    line-height: 1.7;
}

.news-item-detail .next-prev .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 28px;
    font-size: var(--text-drobny);
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--primary-color) !important;
    background: var(--secondary-color) !important;
    border: 0 !important;
    border-radius: 0 !important;
    transition: var(--prechod-tlacitka);
}

.news-item-detail .next-prev .btn:hover,
.news-item-detail .next-prev .btn:focus-visible {
    color: #fff !important;
    background: var(--primary-color) !important;
}

/* Stránky z administrace (Příběh, Doživotní záruka…): tlačítka .cp-btn jako
   hlavní tlačítka webu – verzálky, 14 px / 600, 48 px, při najetí tmavší */
.content-inner a.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 28px !important;
    font-family: var(--template-font);
    font-size: var(--text-drobny) !important;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: .3px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #fff !important;
    background: var(--primary-color) !important;
    border: 0 !important;
    border-radius: 0 !important;
    transition: var(--prechod-tlacitka);
}

.content-inner a.cp-btn:hover,
.content-inner a.cp-btn:focus-visible {
    background: #a9571f !important;
    background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
}

/* Obchodní podmínky (HTML z administrace): šedé boxy a linky v barvách
   webu – boxy jílová plocha bez rámečku jako souhrn v košíku, linky
   #DBDBDA, poznámka s meruňkovou linkou, odkaz ke stažení jako vedlejší
   tlačítko */
.terms-page .terms-seller-box,
.terms-page .terms-attachment {
    background: var(--secondary-color) !important;
    border: 0 !important;
}

.terms-page .terms-note {
    background: var(--secondary-color) !important;
    border-left: 4px solid var(--primary-color) !important;
}

.terms-page .terms-nav {
    border-color: #DBDBDA !important;
}

.terms-page .terms-download-link {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    transition: var(--prechod-tlacitka);
}

.terms-page .terms-download-link:hover,
.terms-page .terms-download-link:focus-visible {
    color: #fff !important;
    background: var(--primary-color) !important;
}

/* Výsledky vyhledávání: skupiny (kategorie, články) bez odrážek, odkazy
   16 px uhlím bez podtržení (najetí hnědě), řádek aspoň 40 px na dotyk;
   „Zobrazit vše" jako textový odkaz webu – hnědě, 14 px / 600 */
.search-results-group ul {
    margin: 0 0 8px !important;
    padding: 0 !important;
    list-style: none !important;
}

.search-results-group li {
    margin: 0 !important;
    padding: 0 !important;
}

.search-results-group li::before,
.search-results-group li::marker {
    content: none !important;
}

.search-results-group li a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: var(--text-zakladni) !important;
    color: var(--text-color) !important;
    text-decoration: none !important;
    transition: color .15s linear;
}

.search-results-group li a:hover,
.search-results-group li a:focus-visible {
    color: var(--primary-color) !important;
}

.search-results-group .display-results-group {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: var(--text-drobny) !important;
    font-weight: 600;
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

/* Stránka 404: odstup od zápatí jako mezi sekcemi (72 px), text 16 px,
   „Zpět do obchodu" jako hlavní tlačítko webu */
.empty-content {
    padding-bottom: 72px !important;
}

.empty-content p {
    font-size: var(--text-zakladni);
    color: #585653;
}

.empty-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 28px !important;
    font-size: var(--text-drobny) !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--primary-color) !important;
    border: 0 !important;
    border-radius: 0 !important;
    transition: var(--prechod-tlacitka);
}

.empty-content .btn:hover,
.empty-content .btn:focus-visible {
    background: #a9571f !important;
    background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
}

/* Doživotní záruka bez odkazu pod příklady (zatím vypnutý v initZaruka):
   příklady jsou poslední v bloku, spodní mezera by jen přidala prázdno */
.pd-zaruka__obsah > .pd-zaruka__priklady:last-child {
    margin-bottom: 0;
}


/** ==========================================================================
 ** 5. VLNA
 ** ==========================================================================
 ** Úpravy 5. vlny – bloky 26 a dál. Stejně jako 4. vlna na konci souboru,
 ** aby přebily starší pravidla bez zvyšování specifičnosti.
 ** ========================================================================== */


/** --- 26) Okno po přidání do košíku (ukazPridano) -------------------------- */
/* Stejná bílá karta jako náhled vzorku (#vzorekPopup): bez hlavičky,
   křížek vpravo nahoře. Nahoře fajfka a „Přidáno do košíku", pod tím
   položka (fotka 4:3, název, volby s příplatky, kusy a cena), dole dvě
   tlačítka – vedlejší jílové a hlavní meruňkové. */
#pridanoPopup .modal-container {
    max-width: 640px;
}

#pridanoPopup .modal-container.no-header .modal-body {
    max-height: calc(100vh - 40px);
    padding: 36px !important;
    overflow-y: auto;
}

#pridanoPopup .modal-close {
    top: 8px !important;
    right: 8px !important;
    width: 44px;
    height: 44px;
    font-size: 0;
    color: var(--text-color);
}

#pridanoPopup .modal-close::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url('/user/documents/assets/ui-ikony/krizek.svg') center / contain no-repeat;
    mask: url('/user/documents/assets/ui-ikony/krizek.svg') center / contain no-repeat;
}

#pridanoPopup .modal-close:hover {
    color: var(--primary-color);
    background: none;
}

#pridanoPopup .modal-close:focus-visible,
#pridanoPopup .pridano a:focus-visible,
#pridanoPopup .pridano button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

#pridanoPopup .modal-close:focus:not(:focus-visible) {
    outline: 0;
}

.pridano__titulek {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 40px 24px 0 !important;
    padding: 0 !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    color: var(--text-color);
}

/* Fajfka v meruňkovém kroužku */
.pridano__titulek::before {
    content: "";
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    background: var(--primary-color) url('/user/documents/assets/ui-ikony/fajfka-bila.svg') center / 15px auto no-repeat;
}

.pridano__polozka {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid #DBDBDA;
    border-bottom: 1px solid #DBDBDA;
}

.pridano__foto img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.pridano__nazev {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    color: var(--text-color);
}

.pridano__volby {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: var(--text-drobny);
    line-height: 1.6;
    color: #585653;
}

.pridano__volby li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.pridano__priplatek {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pridano__cena {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid #DBDBDA;
    font-size: var(--text-drobny);
    color: #585653;
}

.pridano__cena strong {
    font-size: 1.125rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--primary-color);
}


.pridano__akce {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

.pridano__dal,
.pridano__kosik {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 20px;
    font-family: var(--template-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .3px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: var(--prechod-tlacitka);
}

.pridano__dal {
    color: var(--primary-color);
    background: var(--secondary-color);
}

.pridano__dal:hover {
    color: #fff;
    background: var(--primary-color);
}

.pridano__kosik,
.pridano__kosik:visited {
    color: #fff !important;
    background: var(--primary-color);
}

.pridano__kosik:hover {
    color: #fff !important;
    background: color-mix(in srgb, var(--primary-color) 88%, #000);
}

/* Mobil: fotka menší vedle názvu, tlačítka pod sebou – hlavní nahoře */
@media (max-width: 575.98px) {
    #pridanoPopup .modal-container.no-header .modal-body {
        padding: 24px 16px !important;
    }

    .pridano__titulek {
        font-size: 1.25rem !important;
    }

    /* Vedle fotky jen název, volby a cena pod nimi přes celou šířku */
    .pridano__polozka {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-areas:
            "foto nazev"
            "volby volby"
            "cena cena";
        align-items: center;
        gap: 12px 16px;
        padding: 16px 0;
    }

    .pridano__info {
        display: contents;
    }

    .pridano__foto {
        grid-area: foto;
    }

    .pridano__nazev {
        grid-area: nazev;
        margin: 0 !important;
        font-size: 1rem !important;
    }

    .pridano__volby {
        grid-area: volby;
        margin: 0;
    }

    .pridano__cena {
        grid-area: cena;
    }

    .pridano__akce {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pridano__kosik {
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #pridanoPopup.modal-overlay,
    #pridanoPopup .modal-container {
        transition: none;
    }
}


/** --- 27) Košík: rozpad ceny (initRozpisPolozek), řádek položky ---------- */
/* Volby varianty drobně šedě jako dřív, pod nimi rozpad ceny za kus:
   popisek vlevo, cena vpravo. */
.kosik-rozpis.s-cenami {
    max-width: 520px;
}

.kosik-rozpis__cena {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 16px;
}

.kosik-rozpis__zaklad {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #DBDBDA;
}

.kosik-rozpis__nazev {
    flex: 1 1 0;
    min-width: 0;
}

.kosik-rozpis__castka {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--text-color);
}





/* Tablet: název a rozpad přes celou šířku vedle fotky, počet kusů a cena
   pod nimi (vedle počtu a ceny zůstával rozpadu jen úzký sloupec) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ordering-process .cart-table tr[data-micro="cartItem"] {
        grid-template-columns: 160px minmax(0, 1fr) auto;
        grid-template-areas:
            "foto nazev nazev"
            "pocet pocet cena";
        row-gap: 16px;
    }

    .ordering-process .cart-table .cart-p-image {
        align-self: start;
    }

    .ordering-process .cart-table td.p-quantity {
        justify-self: start;
    }
}

/* Počet kusů, cena a křížek v jedné linii. Buňka s cenou byla blok
   (pravidlo „> td { display: block }" bylo silnější než její flex), cena
   a křížek proto seděly nahoře a na užší šířce se křížek zalomil pod cenu.
   Křížek má plochu 40 × 40 px jako ovládání počtu kusů. */
.ordering-process .cart-table tr[data-micro="cartItem"] > td.p-total,
.ordering-process .cart-table tr[data-micro="cartItem"] > td.p-quantity {
    display: flex !important;
    align-items: center;
    align-self: center;
}

.ordering-process .cart-table tr[data-micro="cartItem"] > td.p-total {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
}

.ordering-process .cart-table td.p-total .price-final {
    line-height: 1 !important;
    white-space: nowrap;
}

.ordering-process .cart-table td.p-total form,
.ordering-process .cart-table td.p-total form > .inline {
    display: flex !important;
    align-items: center;
    margin: 0 !important;
}

.ordering-process .cart-table td.p-total .remove-item {
    position: relative !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ordering-process .cart-table td.p-total .remove-item::before {
    position: static !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    transform: none !important;
}

.ordering-process .cart-table td.p-quantity form,
.ordering-process .cart-table td.p-quantity > div {
    margin: 0 !important;
}


/** --- 28) Děkovací stránka (initDekujeme) ---------------------------------- */
/* Kroky nahoře jako v objednávce (Dokončení aktivní), pod nimi úzký sloupec
   (880 px) s bílými kartami: údaje k platbě, doprava a platba, obsah
   objednávky. Původní tabulky šablony jsou schované. */
body.dekujeme-hotovo .dekujeme-puvodni {
    display: none !important;
}

/* Stejné hrany jako košík (šablona tu má obal bez bočního odsazení) */
/* šablona: .ordering-process #content-wrapper.container { padding 0 !important } */
body.in-dekujeme #content-wrapper.container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.in-dekujeme #content ol.cart-header {
    margin-bottom: 36px !important;
}

/* Hotové kroky jako „Rekapitulace" v dalších krocích: meruňkový obrys */
.in-dekujeme ol.cart-header li.step.completed > strong::before {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.dekujeme {
    max-width: 880px;
    margin: 0 auto;
    padding-bottom: 72px;
    text-align: left;
}

.dekujeme__hlava {
    margin-bottom: 36px;
    text-align: center;
}

.dekujeme__ikona {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50% !important;
    background: var(--primary-color) url('/user/documents/assets/ui-ikony/fajfka-bila.svg') center / 24px auto no-repeat;
}

.dekujeme .order-summary-heading {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 2.25rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center;
    color: var(--text-color);
}

.dekujeme__cislo,
.dekujeme__email {
    margin: 0 !important;
    font-size: var(--text-zakladni);
    line-height: 1.6;
    color: #585653;
}

.dekujeme__cislo strong {
    font-weight: 600;
    color: var(--text-color);
}

.dekujeme__karta {
    margin-top: 24px;
    padding: 36px;
    background: #fff;
    border: 1px solid #DBDBDA;
}

.dekujeme__nadpis {
    margin: 0 0 24px !important;
    padding: 0 !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    color: var(--text-color);
}

/* Údaje k platbě: údaje vlevo, QR vpravo */
.dekujeme__platba-obsah {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 36px;
}

.dekujeme__udaje {
    margin: 0;
}

.dekujeme__udaj {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 4px 16px;
    padding: 12px 0;
    border-bottom: 1px solid #DBDBDA;
}

.dekujeme__udaj:first-child {
    padding-top: 0;
}

.dekujeme__udaj:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dekujeme__udaj dt {
    font-size: var(--text-drobny);
    font-weight: 400;
    line-height: 1.4;
    color: #585653;
}

.dekujeme__udaj dd {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0;
    min-width: 0;
}

.dekujeme__hodnota {
    min-width: 0;
    font-size: var(--text-zakladni);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-color);
    overflow-wrap: anywhere;
}

/* Částka výrazně – to hlavní, co má klient zadat */
.dekujeme__udaj--castka .dekujeme__hodnota {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-color);
}

.dekujeme__kopirovat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 44px;
    padding: 8px 14px;
    font-family: var(--template-font);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 0;
    cursor: pointer;
    transition: var(--prechod-tlacitka);
}

.dekujeme__kopirovat:hover,
.dekujeme__kopirovat.is-hotovo {
    color: #fff;
    background: var(--primary-color);
}

.dekujeme__kopirovat:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.dekujeme__qr {
    margin: 0;
}

.dekujeme__qr img {
    display: block;
    width: 160px !important;
    height: 160px !important;
    margin: 0;
    image-rendering: pixelated;
}

/* Obsah objednávky: fotka, název, volby, kusy a cena */
.dekujeme__seznam {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dekujeme__polozka {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid #DBDBDA;
}

.dekujeme__polozka:first-child {
    padding-top: 0;
}

.dekujeme__polozka:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.dekujeme__foto img {
    display: block;
    width: 100px !important;
    height: 100px !important;
    object-fit: cover;
}

.dekujeme__nazev {
    margin: 0 0 6px !important;
    font-size: var(--text-zakladni);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color);
}

.dekujeme__volby {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: var(--text-drobny);
    line-height: 1.6;
    color: #585653;
}

.dekujeme__cena {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: var(--text-drobny);
    color: #585653;
}

.dekujeme__cena strong {
    font-size: var(--text-zakladni);
    font-weight: 700;
    white-space: nowrap;
    color: var(--primary-color);
}

/* Zpět do obchodu (hlavní tlačítko) a rádce vedle */
.dekujeme__akce {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    margin-top: 36px;
}

.dekujeme__akce .product-help {
    margin: 0 !important;
    background: #fff;
    border: 1px solid var(--tertiary-color);
}

.dekujeme__akce .dekujeme__zpet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #fff !important;
    background: var(--primary-color) !important;
    border: 0 !important;
    border-radius: 0 !important;
    transition: var(--prechod-tlacitka);
}

.dekujeme__akce .dekujeme__zpet:hover,
.dekujeme__akce .dekujeme__zpet:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 88%, #000) !important;
}

/* Tablet: QR pod údaji – vedle nich by se Kopírovat zalamovalo pod hodnoty */
@media (max-width: 991.98px) {
    .dekujeme__platba-obsah {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Mobil: menší odsazení karet, tlačítko nad rádcem */
@media (max-width: 767.98px) {
    .dekujeme .order-summary-heading {
        font-size: 2rem !important;
    }

    .dekujeme__karta {
        padding: 24px 16px;
    }

    .dekujeme__nadpis {
        font-size: 1.25rem !important;
    }

    .dekujeme__akce {
        grid-template-columns: 1fr;
    }

    .dekujeme__akce .dekujeme__zpet {
        width: 100%;
    }

    /* Popisek nad hodnotou, Kopírovat vedle hodnoty (IBAN se jinak
       zalamoval i s tlačítkem) */
    .dekujeme__udaj {
        grid-template-columns: 1fr;
    }

    .dekujeme__kopirovat {
        flex: 0 0 auto;
        min-width: 0;
    }
}

/* Mobil: menší fotky položek */
@media (max-width: 575.98px) {
    .dekujeme__polozka {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 16px;
    }

    .dekujeme__foto img {
        width: 72px !important;
        height: 72px !important;
    }
}


/** --- 29) Detail: fotky 6–10 mimo galerii (initFotkyDetailu) --------------- */
/* Galerie nahoře ukazuje jen 1.–5. fotku. 6. fotka je vedle popisu,
   7.–10. pod kartami „Upravíme na míru". Fotky jsou tlačítka – klik
   otevře zvětšení (initZvetseniFotek) na dané fotce. */
.p-thumbnails a.p-thumbnail.pd-nahled-mimo {
    display: none !important;
}

.pd-foto {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 0;
    cursor: zoom-in;
}

.pd-foto img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.pd-foto:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* 6. fotka vedle popisu: text vlevo, fotka vpravo, každé polovina.
   Fotka se při čtení dlouhého popisu drží pod hlavičkou a přichyceným
   menu sekcí. */
.pd-popis__mriz {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--sekce-mezera);
}

.pd-popis__foto {
    position: sticky;
    top: calc(var(--hlavicka-vyska, 120px) + 80px);
    margin: 0;
}

/* Tablet a mobil: fotka pod textem */
@media (max-width: 991.98px) {
    .pd-popis__mriz {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pd-popis__foto {
        position: static;
    }
}

/* 7.–10. fotka: „Úpravy na přání našich klientů" pod kartami úprav.
   Desktop: řada až čtyř fotek 4:3 na střed (méně fotek = užší řada,
   fotky zůstávají stejně velké). Tablet a mobil: posuvný pás jako
   recenze a videa na titulce. */
/* Nadpis pásu je stejný jako nadpisy ostatních sekcí (homepage-group-title
   + section-desc), odstup od karet úprav jako mezi sekcemi. */
.pd-vyroba__realizace {
    margin-top: var(--sekce-odsazeni);
}

/* Mezera pod nadpisem stejná jako nad kartami úprav */
.pd-vyroba__realizace .pd-vyroba__fotky {
    margin-top: var(--sekce-mezera);
}

.pd-vyroba__fotky {
    --pocet: 4;
    display: grid;
    grid-template-columns: repeat(var(--pocet), minmax(0, 1fr));
    gap: var(--mrizka-mezera, 20px);
    max-width: calc((100% + var(--mrizka-mezera, 20px)) * var(--pocet) / 4 - var(--mrizka-mezera, 20px));
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.pd-vyroba__fotky li {
    margin: 0;
    padding: 0;
}

@media (max-width: 991.98px) {
    .pd-vyroba__fotky {
        display: flex;
        gap: 16px;
        max-width: none;
        margin: 0 -15px;
        padding: 0 15px 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pd-vyroba__fotky::-webkit-scrollbar {
        display: none;
    }

    .pd-vyroba__fotky li {
        flex: 0 0 calc(45% - 8px);
        scroll-snap-align: start;
    }
}

@media (max-width: 575.98px) {
    .pd-vyroba__fotky li {
        flex-basis: 82%;
    }

    /* Jediná fotka přes celou šířku – pás by nic neposouval */
    .pd-vyroba__fotky li:only-child {
        flex-basis: 100%;
    }
}


/** --- 30) Karty produktů: ukázka dekorů pod názvem (pridejDekory) ----------- */
/* Místo štítku „Lze zvolit dekor" řada kroužků s barvami dekorů a „+N".
   Štítek zůstává v administraci jako značka – na webu je schovaný.
   Kroužky se překrývají (jako vzorník), bílý lem je od sebe odděluje.
   Řada se řídí šířkou karty (container), ne okna: celá řada (11 kroužků
   a „+62") potřebuje asi 180 px – v užší kartě (mobil) je pět vybraných
   kroužků. */
.flag-lze-zvolit-dekor {
    display: none !important;
}

.karta-dekory {
    container-type: inline-size;
    margin: 12px 0 0;
}

.karta-dekory__radek {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.karta-dekory__vzorek {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50% !important;
    /* bílý lem odděluje překryté kroužky, vnitřní linka drží světlé
       dekory na bílé kartě */
    box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgba(17, 14, 10, .14);
}

.karta-dekory__vzorek + .karta-dekory__vzorek {
    margin-left: -5px;
}

.karta-dekory__vic {
    margin-left: 8px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    color: #585653;
}

/* „+N" pro úzkou kartu (méně kroužků) – jinde schované */
.karta-dekory__vic--mobil {
    display: none;
}

@container (max-width: 179px) {
    .karta-dekory__vzorek:not(.karta-dekory__vzorek--mobil),
    .karta-dekory__vic {
        display: none;
    }

    .karta-dekory__vic.karta-dekory__vic--mobil {
        display: inline;
    }
}


/** --- 31) Karta produktu: výraznější název, odsazení ---------------------- */
/* Titulka, výpis kategorie a vyhledávání (ne lišta nejprodávanějších).
   Fotka zůstává čistá, štítky jsou jako dřív nad názvem (blok ŠTÍTKY).
   Dále:
    - název 18 px / 600 (karty v design systému), v úzké kartě 15 px,
    - kroužky dekorů těsně nad cenou – v řadě karet tak sedí v jedné
      linii, i když má jeden název tři řádky a druhý jeden,
    - .p-in bez bočního odsazení (text lícuje s fotkou), spodní okraj
      16 px (širší karta 20 px, úzká 14 px),
    - „Zobrazit" tučně, na mobilu schované (na detail vede fotka i název).
   Karta je kontejner – úpravy se řídí její šířkou, ne šířkou okna. */
.products-block.products .product .p {
    container: karta / inline-size;
}

.products-block.products .product .p-in {
    display: flex !important;
    flex-direction: column;
    padding: 0 0 16px !important;
}

.products-block.products .product .p-in-in {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto !important;
    padding-top: 16px !important;
    padding-bottom: 0 !important;
}

.products-block.products .product .p .name,
.products-block.products .product .p .name span {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* Štítky nad názvem jako dřív – jen bez vlastního odstupu od fotky,
   ten drží .p-in-in (16 px) */
.products-block.products .product .p-in > .flags {
    margin-top: 16px !important;
}

.products-block.products .product .p-in > .flags + .p-in-in {
    padding-top: 12px !important;
}

/* Kroužky dole v textové části (nad cenou), od názvu aspoň 12 px */
.products-block.products .product .p-in-in > .karta-dekory {
    margin-top: auto;
    padding-top: 12px;
}

.products-block.products .product .p-bottom {
    padding-top: 20px !important;
}

.products-block.products .product .p-detail-btn {
    font-weight: 600 !important;
}

@container karta (min-width: 300px) {
    .products-block.products .product .p-in {
        padding: 0 0 20px !important;
    }
}

/* Úzká karta (mobil): menší okraje a název */
@container karta (max-width: 199px) {
    .products-block.products .product .p-in {
        padding: 0 0 14px !important;
    }

    .products-block.products .product .p-in-in {
        padding-top: 12px !important;
    }

    .products-block.products .product .p .name,
    .products-block.products .product .p .name span {
        font-size: .9375rem !important;
    }

    .products-block.products .product .p-bottom {
        padding-top: 14px !important;
    }
}

/* Mobil: bez tlačítka „Zobrazit" – na detail vede fotka i název */
@media (max-width: 767.98px) {
    .products-block.products .product .p-detail-btn {
        display: none !important;
    }
}


/** --- 32) Formuláře: výběr víc fotek (initVyberFotky) ---------------------- */
/* Dotaz k produktu i kontaktní formulář. Řádek „Přidat fotky prostoru"
   (vpravo „nepovinné", po výběru „2 z 5"), pod ním seznam vybraných
   fotek – každá jako zelený řádek s názvem a křížkem, jako dřív jediná
   vybraná fotka. Křížek je teď v řádku fotky, ne v řádku výběru. */
/* Po pěti fotkách řádek výběru zmizí (přebíjí display: flex !important
   z okna dotazu, proto i se selektorem přes #colorbox) */
#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor[hidden],
body .formeo .foto-vyber label.dotaz-soubor[hidden] {
    display: none !important;
}

.foto-vyber label.dotaz-soubor {
    padding-right: 14px !important;
}

.foto-vyber .dotaz-soubor__seznam {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.foto-vyber .dotaz-soubor__seznam[hidden] {
    display: none;
}

.foto-vyber .dotaz-soubor__polozka {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 0 48px 0 14px;
    font-size: var(--text-drobny);
    background: #F5F8F1;
    border: 1px solid #AEBF9B;
}

.foto-vyber .dotaz-soubor__polozka .dotaz-soubor__ikona {
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    background: #6f8a55 !important;
}

.foto-vyber .dotaz-soubor__polozka .dotaz-soubor__nazev {
    font-weight: 500 !important;
}

/* Křížek 44 × 44 px vpravo v řádku fotky */
.foto-vyber .dotaz-soubor__polozka .dotaz-soubor__odebrat {
    top: 0 !important;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
}

/* Skrytá pole pro další fotky – posílá je doplněk, klient je nevidí */
.foto-vyber .dotaz-soubor__dalsi {
    display: none !important;
}


/** --- 33) Kontaktní banner: nové fotky (fotkaKontaktu) ---------------------- */
/* Desktop: široká fotka (1610 × 418), text přes její levou část jako dřív.
   Do 1200 px čtvercová fotka – dřív se tu fotka schovávala úplně.
   Tablet: text vlevo, fotka vpravo dosedá na spodní hranu pásu.
   Mobil: text, pod ním fotka. Pozadí fotek je stejné jako plocha banneru,
   takže okraje fotky nejsou vidět. */
.contact-banner .contact-banner__foto {
    display: block;
    margin: 0;
}

@media (max-width: 1200px) {
    .contact-banner {
        display: flex !important;
        flex-direction: row;
        align-items: flex-end;
    }

    /* Přebíjí schování fotky z bloku TABLET A MOBIL (T5) */
    .footer-banners .footer-banner .contact-banner .contact-banner__foto .contact-banner__img,
    .contact-banner .contact-banner__foto .contact-banner__img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
    }

    .contact-banner .contact-banner__foto {
        flex: 0 0 clamp(220px, 32%, 340px);
        order: 2;
    }

    .contact-banner .banner-content {
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
        align-self: center;
        text-align: left !important;
        align-items: flex-start !important;
    }

    .contact-banner .banner-content > p {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .contact-banner .contact-wrapper {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}

/* Mobil: fotka pod textem přes šířku pásu (nejvýš 400 px), na střed */
@media (max-width: 797px) {
    .contact-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-banner .contact-banner__foto {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .contact-banner .banner-content {
        align-self: stretch;
    }
}

/* Titulka na mobilu bez fotky – banner je tam jen text a kontakty
   (v kategorii a na detailu fotka pod textem zůstává) */
@media (max-width: 797px) {
    body.in-index .contact-banner .contact-banner__foto {
        display: none !important;
    }
}


/** --- 34) Zobrazit tučně, bílá na hnědé --------------------------------------- */
/* „Zobrazit" (karty produktů) a „Zobrazit více" (novinky) – hnědý text na
   jílové ploše tučně a velkým písmem jako ostatní tlačítka (15 px). Bílý
   text na hnědých plochách (Filtrovat, vybrané filtry, nadmenu…) je
   přímo v pravidlech výš – dřív tam byla jílová. */
.products-block.products .product .p-detail-btn,
.hp-news .hp-news__more-btn,
a.hp-news__more-btn {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px;
}


/** --- 35) Detail: Detail produktu / Parametry / Příběhy klientů ------------ */
/* Tlačítka jsou ve společném řádku .p-tlacitka (initParametry). Dřív měla
   každé vlastní okraj zleva, takže se po zalomení třetí tlačítko odsadilo
   a řádky měly různou šířku. Teď je mezi nimi jen gap a tlačítka se
   v řádku roztáhnou na celou šířku – při jakémkoli zoomu jsou řádky
   zarovnané. Text se uvnitř tlačítka nezalamuje. */
.p-short-description .p-tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--mrizka-mezera);
}

.p-short-description .p-tlacitka a.p-popis-btn,
.p-short-description .p-tlacitka a.p-parametry-btn,
body.type-product .p-short-description .p-tlacitka a.p-parametry-btn {
    flex: 1 1 auto;
    justify-content: center;
    width: auto !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    white-space: nowrap;
}

/* Mobil: pod sebou přes celou šířku jako dosud */
@media (max-width: 575.98px) {
    .p-short-description .p-tlacitka {
        flex-direction: column;
        gap: 8px;
    }
}

/* Podnadpisy sekcí jsou na mobilu skryté (blok výš, ≤797 px). U „Upravíme
   na míru" a „Úpravy na přání našich klientů" ale nesou odkaz „Zeptat se
   na úpravu", proto tady zůstávají vidět. */
@media (max-width: 797px) {
    .pd-vyroba .homepage-group-title .section-desc {
        display: block !important;
    }
}


/** --- 36) Formuláře: tlačítko „Přidat další fotku" pod seznamem fotek ------ */
/* Po první fotce je řádek výběru pod vybranými fotkami a vypadá jako
   tlačítko: hnědý text, ikonka plus, přerušovaný rámeček hnědou. Vpravo
   kolik fotek ještě jde přidat. Seznam má nahoře i dole stejnou mezeru. */
.foto-vyber .dotaz-soubor__seznam {
    margin: 0 0 6px !important;
}

#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor.is-dalsi,
body .formeo .foto-vyber label.dotaz-soubor.is-dalsi {
    border-color: var(--primary-color);
    background: #fff;
}

#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor.is-dalsi:hover,
body .formeo .foto-vyber label.dotaz-soubor.is-dalsi:hover,
#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor.is-dalsi.is-nad,
body .formeo .foto-vyber label.dotaz-soubor.is-dalsi.is-nad {
    background: #FDF6F2;
}

#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor.is-dalsi .dotaz-soubor__nazev,
body .formeo .foto-vyber label.dotaz-soubor.is-dalsi .dotaz-soubor__nazev {
    color: var(--primary-color);
}

#colorbox .dotaz-caster .dotaz-wt label.dotaz-soubor.is-dalsi .dotaz-soubor__ikona,
body .formeo .foto-vyber label.dotaz-soubor.is-dalsi .dotaz-soubor__ikona {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat;
}