/** ==========================================================================
 ** 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-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-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;
    /* Fotka a popis 50 / 50. minmax(0, …) místo samotného 1fr, aby široký
       obsah (konfigurátor, dlouhé názvy) nemohl sloupec roztáhnout. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 20px;
    position: relative;
}

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

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

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

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

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

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

.type-detail .shp-tabs-wrapper .row .shp-tabs-row {
    border-right: none;
    width: 100%;
}

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

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

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

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


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

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

#carousel .scroll-bottom {
    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: var(--text-vyrazny);
    font-weight: 400;
    color: var(--text-color);
}

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

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

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

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

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

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

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

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

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

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

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

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

.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-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: var(--text-zakladni);
    font-weight: 500;
    margin: 0;
    min-height: unset;
}

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

.products-block.products .product .prices {
    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;
}

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

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

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

/** Product configurator **/
.product-conf__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;
}

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

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

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

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

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

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

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

.product-conf__name {
    font-size: 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;
}

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

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

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

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

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

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

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

@media (max-width: 1380px) {
    .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 {
        padding-left: 0;
        padding-right: 0;
    }

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

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

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

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

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

    .contact-banner img {
        order: 2;
    }

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

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

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

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

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

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

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

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

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

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

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

    .search fieldset {
        overflow: unset !important;
    }

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

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

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

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

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

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

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

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


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

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

.render-form input[type="file"]::file-selector-button {
    font-size: 14px;
    background: var(--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.
 ** ========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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


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

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

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

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

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


/** ==========================================================================
 ** PRODUKTOVÁ KARTA – revize podle předlohy (č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: var(--text-vyrazny);
    font-weight: 600;
}


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


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


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

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

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

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

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


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

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


/** --- 2) Blok produktů --------------------------------------------------- */
/* Carbon: padding 0 0 40px 1px, margin 0 0 30px */
#products-1.products-block,
#products-2.products-block {
    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: var(--mrizka-mezera);
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
}

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

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

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

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

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

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

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


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

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

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

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

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

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

.hp-review__avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    background: var(--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: var(--text-drobny);
    letter-spacing: 1px;
    line-height: 1;
    color: #ddd0c4;
}

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

/* Štítek „OVĚŘENO" – vpravo od jména, stylem podobný štítkům u produktů */
.hp-review__verified {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-drobny);
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #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: var(--text-zakladni);
    line-height: 1.65;
    color: #3d3833;
    margin: 0;
    /* Doleva, ne do bloku – v úzkém sloupci dělal blok velké mezery
       mezi slovy. */
    text-align: left;
}

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

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

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

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

}


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

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

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

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

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

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

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


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

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

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

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

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

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

.hp-category__icon {
    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: var(--text-zakladni);
    font-weight: 600;
    line-height: 1.35;
    color: var(--primary-color);
}

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

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

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

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


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

/** --- Novinky: srovnat šířku s ostatními sekcemi -------------------------- */
/* Blok byl o 30 px širší než zbytek stránky (1265 vs 1235). Důvod: .hp-news
   je přímý potomek <body>, ne .content-wrapper.container jako ostatní sekce,
   takže se na něj nevztahoval kontejnerový padding 0 15px ani max-width.
   Napodobujeme tedy kontejner: 1640 px minus 2× 15 px = 1610 px obsahu,
   což přesně odpovídá šířce zbytku stránky. */
.hp-news {
    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 --------------------------------------------------- */
/* Barevný pás přes celou šířku okna, stejně jako u sekcí videí a recenzí:
   barvu nese obal bannerů, obsah uvnitř zůstává v ose stránky.
   Obal je jinak zúžený na 1640 px (to mu dává šablona), takže barva dřív
   končila tam, kde končí obsah. Obal drží na titulce jen tenhle jediný
   banner, jinde na webu vůbec není – přebarvit se tedy nemá co jiného.
   Odstín je ten, který má zapečený i obrázek banneru, aby na sebe plocha
   a obrázek navazovaly – tedy brandová béžová, ta samá, kterou nese
   --tertiary-color (#f9e7dd). */
.footer-banners.banner-wrapper {
    max-width: none !important;
    background: var(--tertiary-color);
}

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

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

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

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

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

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

.contact-banner .banner-content > p {
    font-size: var(--text-zakladni);
    line-height: 1.5;
    color: #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: var(--karta-mezera);
    row-gap: 2px;
    align-items: center;
}

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

.contact-banner .tel:before {
    -webkit-mask: url('/user/documents/assets/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: var(--text-vyrazny) !important;
    font-weight: 600;
    line-height: 1.25;
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

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

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

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

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

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

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


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

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

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

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


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

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

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

/* Výjimka: náhledy fotek v detailu produktu. Carbon je centruje posunem
   (left: 50 % + translateX(-50 %)) – pravidlo výš ten posun při najetí
   smazalo, left ale zůstal, a obrázek tak uskočil o půl šířky doprava.
   Posun se proto náhledům drží v klidu i při najetí stejný. */
.p-thumbnails a.p-thumbnail img,
.p-thumbnails a.p-thumbnail:hover img,
.p-thumbnails a.p-thumbnail:focus img,
.p-thumbnails a.p-thumbnail:active img {
    transform: translateX(-50%) !important;
}

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


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


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

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

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

/* Podnadpisy jednotně: stejná šířka, velikost i barva */
.section-desc {
    font-size: var(--sekce-podnadpis) !important;
    font-weight: 400;
    line-height: 1.55;
    color: #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;
}


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


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

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


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

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

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

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

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

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

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

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

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

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


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

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

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


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


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

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

/** --- 3) Mobil a tablet: jen 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;
    }
}


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


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

@media (max-width: 1200px) {

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

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

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

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

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

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


@media (max-width: 797px) {

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

    /** --- M3) Karta produktu ---------------------------------------------- */
    /* Pod fotkou štítky, název na střed, pak cena a pod ní tlačítko. */
    .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;
    }

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

}


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

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


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

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

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

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


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

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

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


/** --- 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: var(--mrizka-mezera);
    align-items: stretch;
    /* Na tabletu a mobilu jsou dlaždice ve dvou řadách – 1fr srovná i řady
       mezi sebou, aby spodní nebyla nižší než horní. */
    grid-auto-rows: 1fr;
}

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

    /* Ikona vpravo. Carbon sem dává glyf z fontu „icons" i obrázek na pozadí –
       obojí přebíjí prázdný content a maska s vlastní kresbou. */
    body.type-category #filters-wrapper a.unveil-button::before {
        content: "" !important;
        order: 2;
        margin: 0 0 0 auto !important;
        width: 20px;
        height: 20px;
        font-size: 0 !important;
        background: var(--secondary-color) !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h4M13 6h8M3 12h11M18 12h3M3 18h2M11 18h10'/%3E%3Ccircle cx='10' cy='6' r='2.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='16' cy='12' r='2.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='8' cy='18' r='2.2' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h4M13 6h8M3 12h11M18 12h3M3 18h2M11 18h10'/%3E%3Ccircle cx='10' cy='6' r='2.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='16' cy='12' r='2.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='8' cy='18' r='2.2' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
    }

}

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

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

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

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

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

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

/* Šipku dolů, kterou má Carbon jako obrázek na pozadí, nahrazuje kresba
   dvou šipek – stejný motiv jako na předloze. */
body.type-category #category-header .listSorting .listSorting__control--current::after {
    content: "" !important;
    margin-left: auto;
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-color) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M4 7l3-3 3 3'/%3E%3Cpath d='M17 20V4M14 17l3 3 3-3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M4 7l3-3 3 3'/%3E%3Cpath d='M17 20V4M14 17l3 3 3-3'/%3E%3C/svg%3E") center / contain no-repeat;
}

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

.hp-news__more-btn {
    font-family: var(--template-font);
    font-size: var(--text-drobny);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none !important;
    color: var(--primary-color) !important;
    background: var(--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: jeden článek jako na mobilu --------------------------------- */
/* Dva články vedle sebe se na tabletu mačkaly – nadpis se lámal po slovech
   a z perexu zbylo pár slov. Tablet má proto stejnou podobu jako mobil:
   jeden článek, fotka nahoře, pod ní nadpis a perex. Karta je ale široká
   nejvýš 560 px a stojí na středu – přes celou šířku tabletu by fotka 3 : 2
   měla až 970 × 650 px. Telefon je užší než 560 px, takže tam karta vyplní
   celou šířku sama; vlastní pravidlo pro mobil proto nepotřebuje. */
@media (max-width: 1200px) {
    .hp-news .news-wrapper,
    .hp-news .news-wrapper .slick-track {
        grid-template-columns: minmax(0, 560px);
        justify-content: center;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    margin-top: 20px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    body.type-category #category-header .filtry-tlacitko::after {
        content: "";
        margin-left: auto;
        /* Kresba si drží rozměr i v zúženém tlačítku. */
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        background: var(--secondary-color) !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h4M13 6h8M3 12h11M18 12h3M3 18h2M11 18h10'/%3E%3Ccircle cx='10' cy='6' r='2.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='16' cy='12' r='2.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='8' cy='18' r='2.2' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h4M13 6h8M3 12h11M18 12h3M3 18h2M11 18h10'/%3E%3Ccircle cx='10' cy='6' r='2.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='16' cy='12' r='2.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='8' cy='18' r='2.2' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
    }

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

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

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

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

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

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


/** ==========================================================================
 ** O NÁS – „Tvoříme interiéry na míru už 25 let" (pod novinkami)
 ** ==========================================================================
 ** Blok vkládá initManufactureSection() v custom-caster-v2.js hned za
 ** novinky a initManufactureDetail() na detail produktu pod záložky.
 ** Vzhled nese společná třída .manufacture-wrapper, odsazení sekce se liší
 ** podle stránky (.hp- titulka, .pd- detail) – viz konec bloku. Vrácený z verze 1 (style-caster.css) – tam byla pravidla
 ** rozházená v sedmi místech souboru, tady jsou pohromadě.
 **
 ** Text vlevo, 4 fotky 2 × 2 vpravo. Od 946 px dolů pod sebou a text na
 ** střed. Odsazení shora dává novinkám jejich margin-bottom
 ** (--sekce-odsazeni), zdola tady totéž, takže sekce drží rytmus titulky.
 **
 ** Tlačítka jsou ve stylu „Zobrazit" u produktů: velká písmena, plochá
 ** výplň. „Interiér na míru" je hlavní akce (plná terakota), „Náš příběh"
 ** vedlejší (obrácené barvy).
 ** ========================================================================== */

.manufacture-wrapper {
    background: #FFFFFF;
}

/* Titulka: shora odsazuje novinky svým margin-bottom, zdola sekce sama */
.hp-manufacture-wrapper {
    padding: 0 0 var(--sekce-odsazeni) !important;
}

/* Detail: mezera nad blokem se počítá od posledního řádku popisu – obsah
   záložek nemá rámeček ani pozadí. Šablona ji skládala ze čtyř odsazení,
   na desktopu a mobilu jinak (15 / 30 px .p-detail, 0 / 10 px záložky,
   24 px obsah záložky, 0 / 14 px poslední odstavec), takže vycházela
   71 px, resp. 78 px. Když je blok na stránce, odsazení se vynulují a
   mezeru nese jen --sekce-odsazeni, stejně jako na titulce.
   :has() drží úpravu jen tam, kde blok opravdu je – bez něj by se detail
   přilepil k patičce. Patička má vlastní margin-top 15 px, proto dole
   o 15 px méně. */
.p-detail:has(+ .pd-manufacture-wrapper) {
    padding-bottom: 0 !important;
}

.p-detail:has(+ .pd-manufacture-wrapper) .p-detail-tabs-wrapper {
    margin-bottom: 0 !important;
}

.p-detail:has(+ .pd-manufacture-wrapper) #tab-content {
    padding-bottom: 0 !important;
}

.p-detail:has(+ .pd-manufacture-wrapper) #tab-content .tab-pane > :last-child,
.p-detail:has(+ .pd-manufacture-wrapper) #tab-content .description-inner > :last-child,
.p-detail:has(+ .pd-manufacture-wrapper) #tab-content .basic-description > :last-child {
    margin-bottom: 0 !important;
}

.pd-manufacture-wrapper {
    padding: var(--sekce-odsazeni) 0 calc(var(--sekce-odsazeni) - 15px);
}

.manufacture-wrapper .block-manufacture {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6rem;
    padding: 0 !important;
}

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

/* Stejně jako nadpisy ostatních sekcí (viz „Nadpisy sekcí jednotně") */
.manufacture-wrapper .block-manufacture__left h3 {
    font-size: var(--sekce-nadpis) !important;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 24px;
}

/* Rytmus textu: mezi odstavci 16 px, kolem textu (pod nadpisem a nad
   tlačítky) 24 px – nadpis i tlačítka se tak od textu zřetelně oddělí. */
.manufacture-wrapper .block-manufacture__left p {
    font-size: var(--text-zakladni);
    line-height: 1.65;
    text-align: left;
    margin: 0 0 16px;
}

.manufacture-wrapper .block-manufacture__left p:last-of-type {
    margin-bottom: 0;
}

.manufacture-wrapper .block-manufacture__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.manufacture-wrapper .block-manufacture__left .btn {
    font-family: var(--template-font);
    font-size: var(--text-drobny) !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;
    /* Šablona dává .btn vlastní řádkování – tlačítka pak byla 70 px vysoká */
    line-height: 1.2 !important;
    height: auto !important;
    padding: 14px 30px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.manufacture-wrapper .block-manufacture__left .btn-primary,
.manufacture-wrapper .block-manufacture__left .btn-secondary:hover,
.manufacture-wrapper .block-manufacture__left .btn-secondary:focus {
    color: var(--secondary-color) !important;
    background: var(--primary-color) !important;
}

.manufacture-wrapper .block-manufacture__left .btn-secondary,
.manufacture-wrapper .block-manufacture__left .btn-primary:hover,
.manufacture-wrapper .block-manufacture__left .btn-primary:focus {
    color: var(--primary-color) !important;
    background: var(--secondary-color) !important;
}

.manufacture-wrapper .block-manufacture__right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--mrizka-mezera);
}

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

/* Třetí fotka má to podstatné nahoře */
.manufacture-wrapper .block-manufacture__right img:nth-child(3) {
    object-position: top;
}

@media (max-width: 946px) {
    .manufacture-wrapper .block-manufacture {
        flex-direction: column;
        gap: var(--sekce-mezera);
    }

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

    /* Na střed jen nadpis a tlačítka – prostý text zůstává vlevo */
    .manufacture-wrapper .block-manufacture__left h3 {
        text-align: center;
    }

    .manufacture-wrapper .block-manufacture__buttons {
        justify-content: center;
    }
}

@media (max-width: 797px) {
    /* Nadpis 20 px jako všechny nadpisy sekcí na mobilu (blok M2) */
    .manufacture-wrapper .block-manufacture__left h3 {
        font-size: 20px !important;
    }

    /* Obě tlačítka v jednom řádku, stejně široká – s odsazením 30 px se
       nevešla vedle sebe a každé viselo na středu jinak široké. Odsazení
       jako u tlačítka „Zobrazit" na mobilu. */
    .manufacture-wrapper .block-manufacture__buttons {
        flex-wrap: nowrap;
    }

    .manufacture-wrapper .block-manufacture__left .btn {
        flex: 1 1 0;
        padding: 14px 12px !important;
    }

    /* Carbon dává novinkám na mobilu padding-bottom 35 px navíc k jejich
       margin-bottom – nad touto sekcí tak bylo 71 px, pod ní 36 px. */
    .hp-news {
        padding-bottom: 0 !important;
    }
}


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

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

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

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


/** ==========================================================================
 ** DETAIL PRODUKTU – hlavní fotka ve čtverci 1 : 1
 ** ==========================================================================
 ** Rámeček hlavní fotky je vždy čtvercový a fotka se do něj vejde celá:
 ** čtvercová ho vyplní, jiný poměr stran zůstane celý s bílými okraji
 ** (object-fit: contain).
 **
 ** Shoptet do detailu posílá zmenšeninu 1024 × 768 (4 : 3), do které
 ** čtvercové fotky vkládá s bílými pruhy po stranách. Ve čtverci by pak
 ** fotka zabrala jen tři čtvrtiny šířky. Proto initHlavniFotka()
 ** v custom-caster-v2.js podstrčí obrázku originál ve skutečném poměru.
 **
 ** Výška se ruší na všech třech obalech – šablona ji odvozuje z obrázku
 ** a držela by rámeček ve 4 : 3. Čtverec drží aspect-ratio odkazu.
 ** ========================================================================== */

body.type-product .p-image,
body.type-product .p-image #wrap {
    height: auto !important;
}

body.type-product .p-image a.p-main-image {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
}

body.type-product .p-image a.p-main-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}


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

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

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