/** ==========================================================================
 ** 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 {
    background-image: url('/user/documents/assets/icons/arrow-right.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/icons/user.svg');
}

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

#header .search-form .search-toggle {
    background-image: url('/user/documents/assets/icons/search.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/icons/arrow-left.svg') !important;
}

.carousel-control.right:before,
.slick-slider .slick-arrow.slick-next:before {
    background-image: url('/user/documents/assets/icons/arrow-right.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-size: 2.85em;
    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 h1 {
    font-size: 2.85em;
    font-weight: 600;
}

.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;
    grid-template-columns: 9fr 8fr;
    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%;
}

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

.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/icons/facebook.svg');
    width: 24px;
    height: 24px;
    /* background-size: px; */
}

footer .footer-socials .instagram a:before {
    background: url('/user/documents/assets/icons/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/icons/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/icons/cellphone.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 h2 {
    margin: 0;
    font-size: 1.75rem;
}

.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-banner .tel:before,
.contact-banner .mail:before {
    content: "";
    width: 36px;
    height: 36px;
    position: absolute;
    left: 1.5rem;
    top:30%
}

.contact-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    margin-top: 2rem;
}

.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;
}

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

.footer-banners .footer-banner {
    transform: translateY(55%);
    z-index: 9;
    margin-top: -250px;
}

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

.flags {
    top:1.25rem!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 {
    background: none;
    filter: invert(1);
}

#carousel  .scroll-bottom {
    background: url(/user/documents/assets/icons/arrow-right.svg) no-repeat !important;
    width: 2rem;
    height: 2rem;
    transform: rotate(90deg);
}

#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: #f9e7dd38;
    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{
    background:var(--text-color)!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/icons/phone.svg') no-repeat 50%;
}

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

.ordering-process .checkout-box-wrapper .contact-box ul li span.instagram:before {
    content: url('/user/documents/assets/icons/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/icons/beds.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-728>a::before {
    content: '';
    background: url('/user/documents/assets/icons/tables.svg') 50% no-repeat;
    background-size: 100% auto;
    width: 25px;
    height: 18px;
    margin-right: 8px;
    display: block;
}

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

#navigation ul.menu-level-1>li.menu-item-710>a::before {
    content: '';
    background: url('/user/documents/assets/icons/weight.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/icons/hearth.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/icons/eye.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/icons/info.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/icons/phone.svg') 50% no-repeat;
    background-size: 100% auto;
    width: 22px;
    height: 18px;
    margin-right: 8px;
    display: block;
}

/* Header contact */
#navigation {
    width: calc(100% - 720px);
}

.header-contact {
    margin-right: 1rem;
    background: var(--tertiary-color);
    padding: .75rem 2rem .75rem 1rem;
    border-radius: 0;
}
.in-kosik .header-contact,
.ordering-process .header-contact{
margin-right: 11rem;
}

html.scrolled-down .header-contact, html.scrolled-up .header-contact{
    padding: .5rem 1.5rem .5rem 0.5rem;}

.header-contact a {
    position: relative;
    left: 1.75rem;
    font-size: 1rem;
}

.header-contact a::before {
    content:"";
    position: absolute;
    background: url('/user/documents/assets/icons/cellphone.svg') no-repeat 50%;
    width: 20px;
    height: 20px;
    left: -1.75rem;
}

.header-contact img {
    border-radius: 0;
    margin-right: 0.75rem;
}

.header-contact span {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 300;
}

.header-contact img {
    border: solid 3px var(--secondary-color);
}


/** 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: 20px;
    font-weight: 400;
    color: var(--text-color);
}

.benefitBanner .benefitBanner__item .benefitBanner__data {
    font-size: 12px;
    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;
}

.type-detail .shp-tabs-wrapper #tab-content {
    padding: 1.5rem;
    background:none;
}

.product-help {
    overflow: hidden;
    background: var(--tertiary-color);
    border-radius: 0;
    padding: .5rem 1.5rem .5rem .5rem;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.product-help__img {
    height: 100%;
}

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

.product-help h4 {
    font-weight: 600 !important;
    padding: 0;
    margin: 0 !important;
}

.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 **/
.section-desc {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: #585653;
    max-width: 38%;
    margin: 12px auto 0;
}

.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(--tertiary-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: 1rem;
    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 {
    justify-content: center;
}

.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;
}

.sticky-top {
    position: sticky;
    top: 10px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}

.flag-dozivotni-zaruka {
    text-indent: -9999px;
    white-space: nowrap;
    background-image: url('/user/documents/assets/img/dozivotni-zaruka.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 0 !important;
    background-size: 78%;
    width: 160px;
    height: auto;
    max-width: unset;
    min-height: 70px;
    padding: 22px 0 !important;
}

.flag-vyrabime-na-miru {
    text-indent: -9999px;
    white-space: nowrap;
    background-image: url('/user/documents/assets/img/vyrabime-na-miru.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 0 !important;
    background-size: 78%;
    width: 124px;
    height: auto;
    max-width: unset;
    min-height: 70px;
    padding: 22px 0 !important;
}

.alert-beton {
    background: #f9dddd;
    border-radius: 0;
    padding: 1rem;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alert-beton__icon {
    display: flex;
}

.alert-beton__icon img {
    width: 30px;
}

.alert-beton__text {
    font-size: 16px;
    font-weight: 500;
}

.products-block .flag-dozivotni-zaruka {
    font-size: 0;
    background-image: url('/user/documents/assets/img/dozivotnizaruka.svg');
    padding: 12px 0 !important;
    min-height: unset;
    width: 94px;
    height: 34px;
    background-size: 70%;
}

.products-block .flag-vyrabime-na-miru {
    font-size: 0;
    background-image: url('/user/documents/assets/img/vyrabime-na-miru.svg');
    padding: 12px 0 !important;
    min-height: unset;
    width: 94px;
    height: 34px;
    background-size: 62%;
}

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

/* .products-block .flag-dozivotni-zaruka {
    background: #be5718 url(/user/documents/assets/img/dozivotnizaruka.svg) center center !important;
    padding: 12px 0 !important;
    min-height: unset;
    background-repeat: no-repeat !important;
    background-size: 72% !important;
    width: 80px;
    height: 34px;
} */

.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__title {
    font-size: 40px;
    font-weight: 600;
}

.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/icons/check-white.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;
}

.product-conf__select select {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    border-color: #efd7ca;
    border-radius: 0;
    padding: 12px 163px 12px 18px;
    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: 15px;
    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: #f9e7dd;
}

.product-conf__nav li button {
    font-size: 13px;
    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 .name {
    flex: 0 1 82%;
}

.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__prices .price-info {
    font-size: 12px;
}

.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;
}

#materialPopup .modal-body {
    text-align: center;
}

.block-manufacture {
    /* background: #fff;
    border-radius: 0;
    box-shadow: 0 3px 30px rgb(213, 213, 213, .08); */
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6rem;
}

.block-manufacture__left {
    width: calc(50% - 3rem);
    flex: 0 0 auto;
}

.block-manufacture__right {
    width: calc(50% - 3rem);
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 1rem;
}

.block-manufacture__right img {
    width: 100%;
    height: 100% !important;
    max-height: 282px;
    object-fit: cover;
}

.block-manufacture__right img:nth-child(3) {
    object-position: top;
}

.block-manufacture__left h3 {
    font-size: 32px;
}

.block-manufacture__left .btn-primary,
.block-manufacture__left .btn-secondary {
    margin-top: 1rem;
    display: inline-flex !important;
}

.block-manufacture__left .btn-secondary {
    color: #000 !important;
    background: #fdebe9;
    min-height: 55px;
    padding: 0 45px;
}

.block-manufacture__left .btn-secondary:hover {
    color: #fff !important;
}



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

.box--tertiary {
    background: var(--tertiary-color);
}

.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;padding: 0 20px;}
.faq-item{border: 1px solid #dadada;margin-bottom: 12px;}
.faq-item label{margin: 0 !important;cursor: pointer;padding: 16px 52px 16px 20px !important;width: 100%;color: #222 !important;background-color: #fff;font-size: 20px;position: relative !important;display: inline-block;}
.faq-item:hover{box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.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: #222 !important;left: auto !important;}
.faq-item input:checked + label::after{-webkit-transform: rotate(0deg) !important;transform: rotate(0deg) !important;}
.faq-item:not(.not-last){margin-bottom: 12px;}
.faq-item input{display: none;}

body.template-04 .faq-item label::after {content: "\e620" !important;}

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

     /** Manufacture block **/
    .block-manufacture {
        padding: 1rem;
        flex-direction: column;
        gap: 3rem;
    }

    .block-manufacture__left,
    .block-manufacture__right {
        width: 100%;
    }

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

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

    .footer-banners .footer-banner {
        margin-top: 0;
        transform: unset;
    }

    .banner-content {
        background: #f9e7dd;
        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) {
    .header-contact {
        display: none !important;
    }

    .benefitBanner .benefitBanner__item {
        padding: 20px;
    }
}

@media (max-width: 1200px) {
    #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;
    }

    .header-contact {
        display: none !important;
    }

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

    #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 .p-thumbnails>div {
        width: 9999em;
        height: 80px;
        position: absolute;
    }

    .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: 13px;
    }

    .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 {
        font-size: 2em;
        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 {
        background: #f9e7dd;
        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;
    }

    .products-top-wrapper .button-wrapper .toggle-top-products {
        color: var(--text-color);
    }

    .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(--tertiary-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;
}

/** VÝJIMKA – dva kulaté odznáčky, které fungují jako ikona, ne jako kontejner:
 **   .product-conf__row h3::before  = číslo kroku v konfigurátoru
 **   .product-conf__item.selected   = oranžová fajfka u vybrané dlaždice
 ** Chceš-li hranaté i tyhle, stačí změnit 50% na 0 – nebo celý blok smazat.
 */
.product-conf__row h3::before,
.product-conf__item.selected::after {
    border-radius: 50% !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. = POUZE PRO MOBIL (čtvercový, na PC a tabletu 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.
 ** ========================================================================== */

.next-to-carousel-banners {
    --top-banners-gap: 20px;

    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. a další se na PC a tabletu neukazují (4. je mobilní kreativa) */
.next-to-carousel-banners .banner-wrapper:nth-child(n+4) {
    display: none !important;
}

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

/* Užší desktop / tablet na šířku – menší mezera mezi bannery.
   Výška se tu nenastavuje, řídí ji poměr stran (dřív tu bylo 380 px). */
@media (max-width: 1200px) {
    .next-to-carousel-banners {
        --top-banners-gap: 12px;
    }
}

/** --- MOBIL (≤797 px) – jen 4. banner, čtvercový -------------------------- */
@media (max-width: 797px) {
    .next-to-carousel-banners {
        display: block !important;
        height: auto !important;
    }

    /* schovat všechny... */
    .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 ukázat jen ten čtvrtý, ve čtverci */
    .next-to-carousel-banners .banner-wrapper:nth-child(4) {
        display: block !important;
        aspect-ratio: 1 / 1;
    }

    /* POJISTKA: když 4. banner v administraci není (jsou jen 1–3),
       zobrazí se místo něj první – ať mobil nezůstane prázdný. */
    .next-to-carousel-banners .banner-wrapper:first-child:nth-last-child(-n+3) {
        display: block !important;
        aspect-ratio: 1 / 1;
    }

    /* 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 druhou fotku při najetí ----------------------------- */
/* ⚠ Aktivuje se AŽ ve chvíli, kdy jsou v kartě dva <img>. Dnes Shoptet
   vykresluje jen jeden – druhý se zapíná v administraci (počet obrázků
   ve výpisu = 2). Dokud tam druhý není, tahle pravidla nic nedělají.
   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 img + img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity .25s ease;
}

.products-block.products .product a.image:hover img + img {
    opacity: 1;
}


/** --- 3a) Štítky --------------------------------------------------------- */
.products-block.products .product .flags.flags-default {
    margin-left: 10px;
    margin-top: -8px;
}

/* Vyšší specificita než .flag-dozivotni-zaruka { padding: 22px 0 !important }
   a než univerzální reset zaoblení na konci souboru. */
.products-block.products .product .flags .flag,
.products-block .flags.flags-default .flag {
    border-radius: 20px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}


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

.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: .875rem;
    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;
        font-size: .8125rem;
    }
}


/** ==========================================================================
 ** PRODUKTOVÁ KARTA – revize podle předlohy (čtvercové fotky)
 ** ========================================================================== */

/** --- 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) Čtvercová fotka produktu ---------------------------------------- */
/* Rám je vždy 1:1 a fotka ho VYPLNÍ (object-fit: cover) – přebytek se ořízne
   symetricky od středu. U skutečně čtvercových fotek se neořízne nic.
   U dnešních 4:3 (423×318) se odřízne zhruba čtvrtina šířky, po ~41 px
   z každé strany. Důležité prvky kompozice proto drž blíž ke středu. */
/* ⚠ Dvě pravidla Carbonu, která tomu brání:
     .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.
   height musí zůstat auto, aby výšku určil aspect-ratio. */
.products-block.products .product a.image {
    aspect-ratio: 1 / 1 !important;
    display: block;
    overflow: hidden;
    /* ⚠ .p je flex sloupec – bez flex: 0 0 auto by se obrázek smrštil
       a poměr 1:1 by se nedodržel */
    flex: 0 0 auto;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
}

.products-block.products .product a.image img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
}


/** --- 2) Cena: „od" menším písmem, částka větším ------------------------- */
.products-block.products .product .prices .price-final strong {
    font-size: 1.125rem;
    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 {
    padding: 0 !important;
    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: 20px;
    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: #f9e7dd;
}

.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: 20px;
    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: 10px;
    margin-bottom: 14px;
}

.hp-review__avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    background: var(--tertiary-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/icons/user.svg') no-repeat center / contain;
    mask: url('/user/documents/assets/icons/user.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: 13px;
    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: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #aebf9b;
    background: #ebefe6;
    border-radius: 20px !important;
    padding: 5px 11px;
    white-space: nowrap;
}

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

.hp-review__text {
    font-size: 15px;
    line-height: 1.65;
    color: #3d3833;
    margin: 0;
    text-align: justify;
    /* V úzkém sloupci dělá zarovnání do bloku velké mezery mezi slovy.
       Dělení slov je tlumí; stránka má lang="cs", takže se použijí
       česká pravidla dělení. */
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* 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 {
        gap: 14px;
        padding-bottom: 32px;
    }

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

}


/** ==========================================================================
 ** VIDEA – „Prohlédněte si naši práci"
 ** ==========================================================================
 ** Navazuje na sekci recenzí a má stejné pozadí, takže obě tvoří jeden
 ** souvislý oranžový pás – proto nahoře žádný padding navíc.
 ** Markup generuje initWorkVideos() v custom-simon.js.
 ** ========================================================================== */

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

.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: 20px;
    margin-top: 32px;
    padding-bottom: 60px;
}

/* 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);
        gap: 14px;
        margin-top: 22px;
        padding-bottom: 36px;
    }
}


/** ==========================================================================
 ** 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: 20px;
    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: 14px;
    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;
    transition: none !important;
    animation: none !important;
}

.hp-category:hover,
.hp-category:focus {
    background: #f3e9c2;
    color: var(--primary-color);
    top: auto;
    transform: none !important;
}

.hp-category__icon {
    width: 56px;
    height: 46px;
    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: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--primary-color);
}

@media (max-width: 797px) {
    .hp-categories {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-top: 22px;
        padding-bottom: 36px;
    }

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

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

    .hp-category__title {
        font-size: .9375rem;
    }
}


/** ==========================================================================
 ** Blok „Tvoříme interiéry na míru" na titulce (pod kategoriemi)
 ** ==========================================================================
 ** Samotný .block-manufacture je nastylovaný výš v souboru a používá se
 ** i na stránce kategorie a v detailu produktu. Tady je jen obal, který
 ** mu na titulce dá bílé pozadí a svislé odsazení.
 ** ========================================================================== */

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

.hp-manufacture-wrapper .block-manufacture {
    padding: 20px 0 70px;
}

@media (max-width: 946px) {
    .hp-manufacture-wrapper .block-manufacture {
        padding: 10px 0 40px;
    }
}


/** ==========================================================================
 ** NOVINKY na titulce – z karuselu mřížka o třech článcích
 ** ==========================================================================
 ** Stejný postup jako u produktů: slick zůstává inicializovaný a jen se
 ** přebije jeho výstup, protože Shoptet ho sám inicializuje a při změně
 ** velikosti okna přepočítává.
 **
 ** Přebít je potřeba (vše zapisuje slick inline):
 **   .slick-track  width: 7650px → 100 %
 **   .slick-track  transform: translate3d(-6375px,0,0) → none
 **   .news-item    width: 1235px → auto
 ** ========================================================================== */

.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;
}

.hp-news .news-wrapper .slick-track {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    float: none !important;
}

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

.hp-news .news-item.slick-slide {
    box-sizing: border-box;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column;
}

/* Jen tři nejnovější – zbytek se nevykresluje */
.hp-news .news-item.slick-slide:nth-child(n+4) {
    display: none !important;
}

/* Karusel už nemá co ovládat */
.hp-news .slick-arrow,
.hp-news .slick-dots,
.hp-news .slick-cloned {
    display: none !important;
}

/* „Číst článek" pryč – celý název i obrázek jsou odkaz */
.hp-news .news-item .read-more {
    display: none !important;
}

/* Krátký perex – tři řádky, zbytek se ořízne.
   Selektor musí kopírovat ten z šablony
   (.hp-news .news-wrapper .news-item .text .description → line-clamp: 5),
   jinak vyhraje ona a perex zůstane na pěti řádcích. */
.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;
}

/** --- Tlačítko „Zobrazit více" ------------------------------------------- */
.hp-news__more {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

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

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

/* Na tabletu dva sloupce – třetí článek se zalomí pod ně.
   Zůstávají tři, jak má; skrývá se až čtvrtý a další. */
@media (max-width: 1200px) {
    .hp-news .news-wrapper .slick-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 797px) {
    .hp-news .news-wrapper .slick-track {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hp-news__more {
        margin-top: 22px;
    }
}


/** ==========================================================================
 ** ŠÍŘ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 {
    max-width: 1640px !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 90px !important;
    box-sizing: border-box;
}


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

/* 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: 18px;
    padding: 56px 48px;
}

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

.contact-banner .banner-content > p {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: #6f645b;
    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: 14px;
    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/icons/cellphone.svg') no-repeat center / contain;
    mask: url('/user/documents/assets/icons/cellphone.svg') no-repeat center / contain;
}

.contact-banner .mail:before {
    -webkit-mask: url('/user/documents/assets/icons/mail.svg') no-repeat center / contain;
    mask: url('/user/documents/assets/icons/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: 1.375rem !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: .875rem;
    line-height: 1.3;
    color: #8a7f76;
}

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

    .contact-banner .banner-content {
        padding: 32px 24px 36px;
        gap: 14px;
    }

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

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

    .contact-banner .contact-wrapper a {
        font-size: 1.125rem !important;
    }
}


/** ==========================================================================
 ** 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 */
    --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,
.block-manufacture__left .btn-primary,
.block-manufacture__left .btn-secondary {
    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;
}


/** --- 5-6) Barevné štítky ------------------------------------------------ */
/* Štítky jsou obrázky na pozadí, ne text. Barvu kresby proto řešíme maskou
   na pseudo-elementu a pozadí necháváme na samotném štítku. */
.flags .flag.flag-dozivotni-zaruka,
.flags .flag.flag-vyrabime-na-miru {
    background-image: none !important;
    position: relative;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
}

.flags .flag.flag-dozivotni-zaruka {
    background-color: #4b5d9d !important;
}

.flags .flag.flag-vyrabime-na-miru {
    background-color: #e5c84d !important;
}

.flags .flag.flag-dozivotni-zaruka::after,
.flags .flag.flag-vyrabime-na-miru::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-indent: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.flags .flag.flag-dozivotni-zaruka::after {
    background-color: #fdebe9;
    -webkit-mask-image: url("/user/documents/assets/img/dozivotni-zaruka.svg");
    mask-image: url("/user/documents/assets/img/dozivotni-zaruka.svg");
    -webkit-mask-size: 78%;
    mask-size: 78%;
}

.flags .flag.flag-vyrabime-na-miru::after {
    background-color: #bc6125;
    -webkit-mask-image: url("/user/documents/assets/img/vyrabime-na-miru.svg");
    mask-image: url("/user/documents/assets/img/vyrabime-na-miru.svg");
    -webkit-mask-size: 78%;
    mask-size: 78%;
}

/* Ve výpisu produktů je štítek menší a používá jinou kresbu */
.products-block .flags .flag.flag-dozivotni-zaruka::after {
    -webkit-mask-image: url("/user/documents/assets/img/dozivotnizaruka.svg");
    mask-image: url("/user/documents/assets/img/dozivotnizaruka.svg");
    -webkit-mask-size: 70%;
    mask-size: 70%;
}

.products-block .flags .flag.flag-vyrabime-na-miru::after {
    -webkit-mask-size: 62%;
    mask-size: 62%;
}


/** --- 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,
.hp-manufacture-wrapper {
    padding: 0 !important;
}

.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;
}

/* 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: #6f645b;
    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;
}

.hp-manufacture-wrapper .block-manufacture {
    padding: var(--sekce-odsazeni) 0 !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;
}


/** --- 23) Ikony v liště výhod v brandové barvě --------------------------- */
/* Cestu k obrázku přenáší do --ikona funkce colorizeBenefitIcons() v JS. */
.benefitBanner .benefitBanner__picture.is-masked {
    position: relative;
}

.benefitBanner .benefitBanner__picture.is-masked img {
    visibility: hidden;
}

.benefitBanner .benefitBanner__picture.is-masked::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    -webkit-mask: var(--ikona) no-repeat center / contain;
    mask: var(--ikona) no-repeat center / contain;
}


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

.hp-category:hover,
.hp-category:focus {
    background: var(--complementary-color);
}

/* 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 jakéhokoli hoveru --------------------------------- */
/* Zůstává jen kurzor jako ukazovátko, což dělá prohlížeč sám u odkazu. */
.hp-category:hover,
.hp-category:focus {
    background: inherit;
}

.hp-category:nth-child(1):hover { background: #f9e7dd; }
.hp-category:nth-child(2):hover { background: #eee9f8; }
.hp-category:nth-child(3):hover { background: #e6f2f9; }
.hp-category:nth-child(4):hover { background: #ebefe6; }
.hp-category:nth-child(5):hover { background: #f8f1d5; }
.hp-category:nth-child(6):hover { background: #efd7ca; }

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

/** --- 5) Blok o výrobě bez horního odsazení ------------------------------ */
.hp-manufacture-wrapper .block-manufacture,
.block-manufacture {
    padding-top: 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 -------------------------------- */
/* Mřížka samotná zůstává bez odsazení (viz předchozí kolo), prostor pod
   sekcí drží její obal. */
.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;
    width: auto !important;
    max-width: none !important;
}

/** --- 2) Blok o výrobě: odsazení dole ------------------------------------ */
.hp-manufacture-wrapper .block-manufacture,
.block-manufacture {
    padding-bottom: 32px !important;
}


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


/** ==========================================================================
 ** Tlačítka v bloku „Tvoříme interiéry na míru"
 ** ==========================================================================
 ** Stejný styl jako tlačítko „Zobrazit" u produktů: velká písmena, plochá
 ** výplň, bez jakékoli reakce na najetí myší.
 **
 ** „Interiér na míru" je hlavní akce, takže má plnou výplň.
 ** „Náš příběh" je vedlejší, takže má světlou variantu – tedy obrácené barvy.
 ** ========================================================================== */

.block-manufacture__left .btn-primary,
.block-manufacture__left .btn-secondary {
    font-family: var(--template-font);
    font-size: .875rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    /* line-height je nutné srovnat – šablona dává .btn vlastní řádkování,
       kvůli kterému tlačítka vycházela 70 px vysoká místo ~45 */
    line-height: 1.2 !important;
    height: auto !important;
    padding: 14px 30px !important;
    margin-top: 1rem;
    margin-right: 10px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* Žádná reakce na najetí – ani přechod, ani změna barvy */
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Hlavní akce: plná výplň */
.block-manufacture__left .btn-primary,
.block-manufacture__left .btn-primary:hover,
.block-manufacture__left .btn-primary:focus,
.block-manufacture__left .btn-primary:active {
    color: var(--secondary-color) !important;
    background: var(--primary-color) !important;
}

/* Vedlejší akce: obrácené barvy */
.block-manufacture__left .btn-secondary,
.block-manufacture__left .btn-secondary:hover,
.block-manufacture__left .btn-secondary:focus,
.block-manufacture__left .btn-secondary:active {
    color: var(--primary-color) !important;
    background: var(--secondary-color) !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í
 ** ========================================================================== */

/** --- 1) Odsazení řádku s bannery shora ---------------------------------- */
.row.banners-row {
    margin-top: 20px !important;
}

/** --- 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 první banner -------------------------------- */
/* Čtvrtý a další se nezobrazují nikde a nikdy. */
.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(2),
    .next-to-carousel-banners .banner-wrapper:nth-child(3),
    .next-to-carousel-banners .banner-wrapper:nth-child(4) {
        display: none !important;
    }

    /* ...a nechat jen první, v jeho vlastním poměru stran.
       Hodnota je stejná jako na desktopu, jen zapsaná s !important – druhý
       selektor je tu kvůli pravidlu z dřívějška, které mělo vyšší specificitu
       a nastavovalo prvnímu banneru čtverec. */
    .next-to-carousel-banners .banner-wrapper:nth-child(1),
    .next-to-carousel-banners .banner-wrapper:first-child:nth-last-child(-n+3) {
        display: block !important;
        aspect-ratio: 1080 / 520 !important;
        width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !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;
    }
}


/** ==========================================================================
 ** 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) {

    /** --- T2) Kategorie: menší odsazení dole ------------------------------ */
    .hp-categories-wrapper {
        padding-bottom: 16px !important;
    }

    /** --- T3) Blok o výrobě na střed -------------------------------------- */
    .block-manufacture__left {
        text-align: center;
    }

    .block-manufacture__left .btn-primary,
    .block-manufacture__left .btn-secondary {
        margin-left: 5px;
        margin-right: 5px;
    }

    /** --- T5+T6) Kontaktní banner: bez fotky, vše na střed ---------------- */
    /* Fotka poradkyně nese i pozadí banneru, takže se místo ní nastavuje
       barva – jinak by text zůstal na bílé ploše. */
    .contact-banner {
        background: var(--tertiary-color);
    }

    /* 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: 40px !important;
        margin-top: 6px !important;
    }

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


@media (max-width: 797px) {

    /** --- M1) Odsazení řádku s bannery ------------------------------------ */
    .row.banners-row {
        margin-top: 80px !important;
    }

    /** --- 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,
    .contact-banner h2,
    .block-manufacture__left h3 {
        font-size: 20px !important;
    }

    /** --- M3) Karta produktu ---------------------------------------------- */
    /* Štítky pryč, pod fotkou název na střed, pak cena a pod ní tlačítko. */
    .products-block.products .product .flags {
        display: none !important;
    }

    .products-block.products .product .p .name,
    .products-block.products .product .p .name span {
        text-align: center !important;
    }

    .products-block.products .product .p-bottom {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px;
    }

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

    .products-block.products .product .prices {
        justify-content: center !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;
    }

    /** --- M5) Blok o výrobě na střed -------------------------------------- */
    .block-manufacture__left,
    .block-manufacture__left p {
        text-align: center;
    }

}


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

/** --- 2) Odsazení banneru shora ------------------------------------------ */
/* Odsazení drží řádek s bannery, ne samotný blok bannerů – jinak se sčítala. */
.next-to-carousel-banners {
    margin-top: 0 !important;
}

@media (min-width: 798px) and (max-width: 1200px) {
    .row.banners-row {
        margin-top: 40px !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;
        background: transparent !important;
    }

    .contact-banner .banner-content {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        background: #f9e7dd;
        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: 1rem !important;
    }
}


/** ==========================================================================
 ** ČLÁNKY NA TITULCE – jediné závazné místo
 ** ==========================================================================
 ** Pravidla pro tuhle sekci byla roztroušená na 36 místech v pěti různých
 ** media kontextech a přebíjela se navzájem – proto se chovala pokaždé jinak.
 ** Tenhle blok ji popisuje celou a je poslední, takže platí on.
 **
 ** Chování je stejné na všech zařízeních, liší se jen počet článků:
 **   desktop (nad 1200 px) … 3 články ve třech sloupcích
 **   tablet a mobil         … 1 nejnovější článek
 ** Tlačítko „Zobrazit více" je pod články vždy.
 ** ========================================================================== */

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

/** --- Nadpis sekce -------------------------------------------------------- */
.hp-news .sectionDescription {
    margin-bottom: 6px !important;
    text-align: center;
}

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

.hp-news .news-wrapper .slick-track {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    float: none !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;
}

.hp-news .news-item.slick-slide {
    box-sizing: border-box;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column;
    text-align: center;
}

/* Zobrazují se první tři, ostatní se ani nevykreslují */
.hp-news .news-item.slick-slide:nth-child(n+4),
.hp-news .slick-cloned,
.hp-news .slick-arrow,
.hp-news .slick-dots {
    display: none !important;
}

/** --- Náhled článku ------------------------------------------------------- */
/* Pevné okno 3:2 a fotka přes celou plochu. height: auto je nutné – šablona
   má na .image pevných 275 px a pevná výška přebíjí aspect-ratio. */
.hp-news .news-item .image {
    aspect-ratio: 3 / 2;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block;
    overflow: hidden;
    position: relative;
}

.hp-news .news-item .image a {
    display: block;
    width: 100%;
    height: 100%;
}

.hp-news .news-item .image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block;
}

/* Žádná reakce na najetí myší.
   ⚠ Selektory musí obsahovat i .news-wrapper. Dřívější pravidlo
   .hp-news .news-wrapper .news-item .image a:hover img nastavuje
   translate(-50%,-50%), což platilo, dokud byl obrázek absolutně
   vycentrovaný. Teď je v normálním toku, takže by ho ten posun odsunul
   o půlku vlastního rozměru – a přesně tak vypadala ta deformace.
   Bez .news-wrapper má naše pravidlo nižší specificitu a prohraje. */
.hp-news .news-wrapper .news-item .image a:hover img,
.hp-news .news-wrapper .news-item .image a:focus img,
.hp-news .news-wrapper .news-item .image a:active img,
.hp-news .news-wrapper .news-item .image:hover img,
.hp-news .news-wrapper .news-item:hover .image img {
    transform: none !important;
    transition: none !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    object-fit: cover !important;
}

/** --- Text článku --------------------------------------------------------- */
.hp-news .news-item .text {
    padding-top: 14px;
    text-align: center;
}

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

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

/* 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: .875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none !important;
    color: var(--primary-color) !important;
    background: var(--tertiary-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 a mobil: jeden nejnovější článek ----------------------------- */
@media (max-width: 1200px) {
    .hp-news .news-wrapper .slick-track {
        grid-template-columns: 1fr !important;
    }

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

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

    .hp-news #newsWrapper,
    .hp-news .news-wrapper {
        margin-top: 22px !important;
    }

    .hp-news__more {
        margin-top: 22px;
    }
}


/** ==========================================================================
 ** ČLÁNKY – zarovnání a hovery na obrázcích
 ** ========================================================================== */

/** --- Text vlevo, karta na střed ----------------------------------------- */
/* Rozdíl proti minulému kolu: na střed se zarovnává KARTA, ne text v ní.
   Text zůstává zarovnaný vlevo, jak má být u delších nadpisů a perexů. */
.hp-news .news-item.slick-slide,
.hp-news .news-item .text,
.hp-news .news-item .text .title,
.hp-news .news-wrapper .news-item .text .description {
    text-align: left !important;
}

/* Na desktopu karty vyplňují tři sloupce, není co centrovat.
   Na tabletu a mobilu je článek jediný – omezí se šířkou zhruba na velikost
   desktopové karty a vycentruje se, aby se neroztáhl přes celý řádek. */
@media (max-width: 1200px) {
    .hp-news .news-wrapper .slick-track {
        justify-items: center;
    }

    .hp-news .news-item.slick-slide {
        max-width: 420px;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


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


/** --- Kontakt v hlavičce zaoblený ----------------------------------------- */
/* Vyšší specificita než univerzální reset border-radius na konci souboru. */
.header-contact,
.header-contact.d-flex {
    border-radius: 20px !important;
    overflow: hidden;
}


/** --- 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: 20px;
    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 {
    padding: 0 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    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. */
.benefitBanner .benefitBanner__picture {
    margin-bottom: 0 !important;
}

.benefitBanner.position--benefitHomepage .benefitBanner__picture {
    flex: 0 0 auto;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
}

/* Barvu kresby tu nic nepřepisuje – zůstává výchozí --primary-color z bloku 23,
   kde masku nasazuje colorizeBenefitIcons() z custom-caster.js. */
.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í. Nadpis i popisek si berou vzhled ze základní definice
 ** lišty výš v souboru (ř. ~708 a ~714): nadpis 20px/400, popisek 12px, oba
 ** ve --text-color. Verzálky, prostrkání a barvy, které tu byly předtím,
 ** najdeš v záloze style-vyhody-dlazdice.css.
 ** ----------------------------------------------------------------------- */

/** --- 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. */
@media (max-width: 797px) {
    .benefitBanner.position--benefitHomepage {
        gap: 12px;
    }

    .benefitBanner.position--benefitHomepage .benefitBanner__item {
        gap: 10px;
    }
}