/*
 * OKPaliva.cz — responsive overrides for the legacy theme
 * Breakpoints: tablet (≤991px), mobile (≤767px), small mobile (≤520px)
 */

/* ==========================================================================
   Slider: <img> tag instead of background-image (all breakpoints)
   ========================================================================== */

.flexslider .slideshow__slide {
    position: relative;
    overflow: hidden;
    height: 100%;
}
/* <picture> obal kolem banneru nesmí rozbít výškový řetězec pro height: 100% */
.flexslider .slideshow__slide picture {
    display: block;
    width: 100%;
    height: 100%;
}
.flexslider .slideshow__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.flexslider .slideshow__text-wrap {
    position: absolute;
    inset: 0;
}

/* ==========================================================================
   Sticky header — subtle shadow when pinned to top
   ========================================================================== */

.header.is-ticky {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #fff;
}

/* Neutralize theme's negative-margin "bleed" hacks on category/collection header */
.collection-page .page-header,
.template-collection .page-header {
    margin: 0 0 15px !important;
}

/* ==========================================================================
   CMS content tables: make them horizontally scrollable on small viewports.
   Source: editor-inserted <table> on CMS pages (zpusoby-a-ceny-doruceni,
   zpracovani-osobnich-udaju, product description tabs) has rigid column
   widths and overflows the page on mobile. Wrap the table in a horizontal
   scroll container instead of letting it push the body wider.
   ========================================================================== */
@media (max-width: 991px) {
    main table,
    .product-tabs table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* The rule above targets CMS tables. On the cart, display:block turns the
       table into a shrink-to-fit box, so the row stopped at 3/4 of the width
       while the summary below it spanned the full row. */
    .template-cart #cart table {
        display: table;
        width: 100%;
        overflow-x: visible;
    }
}

/* CMS content images (product description tabs, page bodies) carry inline
   width/height attributes from the editor (e.g. width:1200px; height:253px),
   which squashes them on narrow viewports. Force aspect-ratio preservation. */
#myTabContent img,
.tab-pane img,
[id^="idTab"] img,
main .cms-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   Dropdown side-cart: bottom action buttons (Přejít do košíku / Zpět do obchodu)
   The "Zpět do obchodu" wrapper reuses `.continue-shoping`
   (so JS .continue-shoping a click handler closes the panel),
   but that class also drives the dropdown header (90px height, line-height 90px,
   white-floated icon link). Neutralize those rules in the .wrap-btcart context.
   ========================================================================== */

.header-cart .wrap-btcart {
    height: auto;
}

/* ==========================================================================
   Cart page (/kosik): responsive layout fixes ≤991px.
   - Tablet (768–991px): stack summary below product table (Bootstrap col-sm
     would otherwise squeeze the product name cell to 1 word/line).
   - All ≤991px: full-width CTA, properly formatted "Cena celkem" block,
     forced-inline qty controls (theme's narrow .qty cell wraps the +/- buttons
     vertically on small mobile widths).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .template-cart .cart-list,
    .template-cart .subtotal-container {
        float: none;
        width: 100%;
    }
    .template-cart .subtotal-container .cart-buttons {
        margin-top: 16px !important;
    }
}

@media (max-width: 991px) {
    /* CTA always full-width and visually prominent */
    .template-cart .subtotal-container #checkout {
        width: 100%;
    }
    /* "Cena celkem:" label + price on one tidy row */
    .template-cart .subtotal {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        flex-wrap: wrap;
    }
    .template-cart .subtotal .t-title,
    .template-cart .subtotal .price {
        margin: 0;
    }
    /* Qty controls: keep buttons + input inline horizontally, no wrap */
    #cart table tr td.qty {
        width: auto !important;
        min-width: 120px;
        white-space: nowrap;
    }
    #cart table tr td.qty button,
    #cart table tr td.qty input {
        float: none !important;
        display: inline-block !important;
        vertical-align: middle;
    }
    /* Stacked under the table, the summary spans the full row, so its grey
       background (styles.css) bled into the 15px gutter and did not line up
       with the cart table. Swap the padding for a margin so it does. */
    .template-cart #cart .subtotal-container {
        width: auto;
        margin: 24px 15px 0;
        padding: 20px 15px;
    }
}
.header-cart .wrap-btcart .actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
}
.header-cart .wrap-btcart .actions .harman_btn4 {
    display: block;
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0 15px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
}
.header-cart .wrap-btcart .actions .view-cart {
    /* Reset inherited .continue-shoping rules */
    height: auto;
    line-height: normal;
    width: 100%;
    padding: 0;
    background: transparent;
}
.header-cart .wrap-btcart .actions .view-cart a {
    /* Override .continue-shoping a (float: right; color: #fff; font-size: 20px) */
    float: none;
    color: #333;
    font-size: 14px;
}
#dropdown-cart > .note {
    margin: 15px 15px 0;
}
/* styles-settings.css greys this out with !important */
.header-cart #dropdown-cart .summary p.total span {
    color: #333 !important;
}
.header-cart #dropdown-cart .summary p.total .label {
    font-size: 16px;
    font-weight: 700;
}
.header-cart #dropdown-cart .summary p.total .price {
    font-size: 20px;
    font-weight: 800;
}


/* ==========================================================================
   Header text styling (replaces inline styles removed from @header.latte)
   ========================================================================== */

/* "PŘIHLÁSIT SE" — orange/yellow call-to-action */
.header-account .text-cart {
    color: #f8bf00 !important;
    font-weight: 700;
    text-transform: uppercase;
}

/* "Můj účet" label under the user icon — bold dark, uppercase */
.header-account .price-cart-mini {
    color: #333;
    font-weight: 700;
    text-transform: uppercase;
}

/* "Odhlásit se" link (logged-in variant) */
.header-account .text-cart-container strong {
    color: #333;
    font-weight: 700;
    font-size: 12px;
}
.header-account .text-cart-container .fa-chevron-circle-right {
    color: #222;
    font-size: 12px;
    padding-left: 5px;
}

/* "Zákaznická linka:" label — bold, dark */
.menu-nav-right__label {
    color: #333;
    font-size: 19px;
    font-weight: 700;
}

/* Phone number — bold, brand green, larger */
.menu-nav-right__phone {
    color: #84bf2f;
    font-size: 22px;
    font-weight: 700;
}
.menu-nav-right__phone .fa-phone {
    margin: 0 5px;
}

/* Customer-service phone — right-aligned row inside .main-header.
   Desktop (≥992px): sits below PŘIHLÁSIT SE.
   Mobile/tablet (≤991px): hidden; phone shows as .header-phone-bar strip above the header instead. */
.menu-nav-right {
    display: block;
    padding: 8px 15px 0;
    text-align: right;
    text-decoration: none;
}
.menu-nav-right:hover,
.menu-nav-right:focus { text-decoration: none; }
.menu-nav-right .fa-phone { margin: 0 5px; }

/* Phone CTA strip — mobile/tablet only (≤991px), full viewport width above the header. */
.header-phone-bar { display: none; }

@media screen and (max-width: 991px) {
    .menu-nav-right { display: none !important; }

    /* Use position: sticky on the outermost header wrapper so it can span the full
       scrollable area of its parent (.wrapper-container, which contains the whole page).
       Sticky requires no clipping ancestor, so also override wrapper-container's overflow.
       All header containers get height: auto so they grow with content instead of being
       pinned to theme's 80px which doesn't fit phone strip + icons row. */
    .wrapper-container { overflow: visible !important; }
    #shopify-section-header {
        position: sticky !important;
        top: 0;
        z-index: 1050;
        background: #fff;
    }
    #shopify-section-header,
    .header-container,
    #header-content,
    #header-content .header {
        height: auto !important;
    }
    #header-content .header {
        position: static !important;
    }

    /* Pure-flex mobile/tablet header — kill all absolute positioning from theme.
       Layout: burger (order -2) + search (order -1) | logo (flex: 1 center) | wishlist/cart (right).
       Burger in .menu-nav is hidden on mobile (its sibling copy in .main-header is the visible one). */
    #header-content.mobile-minimal .main-header {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 60px;
        width: 100%;
    }
    /* Tablet (768–991): slightly taller default, shrink when sticky-scrolled. */
    @media (min-width: 768px) {
        #header-content.mobile-minimal .main-header { min-height: 80px; }
        #header-content.mobile-minimal .header.is-ticky .main-header { min-height: 60px; }
    }
    #header-content.mobile-minimal .logo-container,
    #header-content.mobile-minimal .header.is-ticky .logo-container {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 auto;
        text-align: center;
        line-height: 1;
        margin: 0 !important;
        padding: 0 !important;
    }
    #header-content.mobile-minimal .logo-container .logo-sticky,
    #header-content.mobile-minimal .header.is-ticky .logo-container .logo-sticky {
        display: inline-block !important;
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        line-height: 1 !important;
        width: auto !important;
        margin: 0 !important;
    }
    #header-content.mobile-minimal .logo-container .logo-sticky img,
    #header-content.mobile-minimal .header.is-ticky .logo-container .logo-sticky img {
        display: inline-block !important;
        max-height: 40px;
        width: auto !important;
        margin: 0 !important;
    }
    #header-content.mobile-minimal .header__burger-mobile {
        order: -2;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 0;
        font-size: 22px;
        line-height: 1;
        flex: 0 0 auto;
    }
    /* Swap burger → X when off-canvas menu is open */
    body.off-canvas-active #header-content.mobile-minimal .header__burger-mobile .clever-icon-menu-1:before {
        content: "\c067";
    }
    #header-content.mobile-minimal .search-top-container {
        order: -1;
        position: static !important;
        width: 36px !important;
        height: 36px;
        float: none !important;
        padding: 0 !important;
        flex: 0 0 auto;
    }
    #header-content.mobile-minimal .search-top-container #search-top {
        position: static !important;
        width: 36px;
        height: 36px;
    }
    #header-content.mobile-minimal .search-top-container .icon-search {
        position: static !important;
        top: auto !important;
        left: auto !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }
    #header-content.mobile-minimal .search-top-container .icon-search i {
        display: inline-block;
        width: auto;
        font-size: 22px;
        line-height: 1;
    }
    /* Open search form fills the full white header area (covers logo + icons).
       Without this the form is a thin 50px strip overlapping the row. */
    #header-content.mobile-minimal .header-inner .search-form {
        top: 0 !important;
        left: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important;
        background: #fff !important;
        padding: 0 50px 0 15px !important;
        display: flex;
        align-items: center;
        z-index: 1000;
    }
    #header-content.mobile-minimal .header-inner .search-form .header-search-icon { display: none; }
    #header-content.mobile-minimal .header-inner .search-form .searchbox,
    #header-content.mobile-minimal .header-inner .search-form .searchbox form,
    #header-content.mobile-minimal .header-inner .search-form .search-bar { width: 100%; }
    #header-content.mobile-minimal .header-inner .search-form input[type=text] {
        position: static !important;
        width: 100% !important;
        height: 40px !important;
        border: 1px solid #e5e5e5 !important;
        padding: 0 12px !important;
        background: #fff !important;
    }
    #header-content.mobile-minimal .header-inner .search-form .search-close {
        top: 50% !important;
        right: 15px !important;
        left: auto !important;
        transform: translate(0, -50%) !important;
    }
    #header-content.mobile-minimal .header-cart-container {
        position: static !important;
        width: auto !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    /* Hide the menu-nav copy of the burger — only the one inside .main-header is visible. */
    #header-content.mobile-minimal .menu-nav .toggle-me .navbar-toggle.btn-menu-canvas { display: none !important; }
    /* Hide theme's #off-canvas-button (X) on mobile — our .header__burger-mobile handles both states. */
    #header-content.mobile-minimal #off-canvas-button { display: none !important; }

    /* Offcanvas menu: push content below our taller header (phone strip + main). */
    #offcanvas.active { padding-top: 120px !important; }


    .header-phone-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 12px;
        background: #84bf2f;
        color: #fff !important;
        font-size: 15px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
    }
    .header-phone-bar:hover,
    .header-phone-bar:focus {
        background: #6fa425;
        color: #fff !important;
        text-decoration: none;
    }
    .header-phone-bar .fa-phone { font-size: 16px; }
    .header-phone-bar strong { font-weight: 700; color: #fff; }
    .header-phone-bar__number { font-weight: 700; letter-spacing: 0.5px; font-size: 16px; }
}


/* ==========================================================================
   TABLET (≤ 991px)
   ========================================================================== */

@media screen and (max-width: 991px) {

    .block-megamenu { display: none !important; }

    .slideshow { width: 100% !important; float: none !important; }

    /* Slider pagination bullets sit at bottom: -11px on desktop (hidden until hover).
       On tablet/mobile there is no hover — pull them inside the slider image. */
    .flexslider .flex-control-nav {
        visibility: visible !important;
        bottom: 12px !important;
        right: 0 !important;
        text-align: center !important;
    }
    .flexslider .flex-control-paging li a:not(.flex-active) {
        background-color: #f0f0f0;
    }

    /* Homepage category banners */
    /* Banner grid 2×2 with equal inner gap (respects container width so it aligns with slider). */
    /* Slider + banner: full container width, no lateral padding (drop theme's 15px right pad). */
    .slideshow-wrapper .flexslider { padding-left: 0 !important; padding-right: 0 !important; }
    .home5-block-collection > .container { padding-left: 0 !important; padding-right: 0 !important; }
    .home5-block-collection .row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 0; }

    /* Product carousel nav — move arrows from top-right corner to centered row below items. */
    .grids-slider .owl-controls {
        position: static !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 16px;
        top: auto !important;
        transform: none !important;
    }
    .grids-slider .owl-buttons {
        position: static !important;
        display: inline-flex;
        gap: 12px;
    }
    .grids-slider .owl-buttons .owl-prev,
    .grids-slider .owl-buttons .owl-next {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
    }
    .home5-block-collection .row::before,
    .home5-block-collection .row::after { display: none; }
    .home5-block-collection .col-sm-3 { width: auto; padding: 0; float: none; }
    .home5-block-collection .home-collection-wrapper h2 { font-size: 14px; }
    .home5-block-collection .home-collection-wrapper h2 strong { font-size: 18px; }

    /* Homepage product tabs — horizontal scroll */
    .tabs-product-home.grid .tabs-layout-1 {
        display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        position: relative;
    }
    .tabs-product-home.grid .tabs-layout-1 ul.nav.nav-tabs {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        float: none !important;
        padding: 0 !important;
        min-width: 100%;
        gap: 4px;
    }
    .tabs-product-home.grid .nav-tabs > li { margin: 0 !important; padding: 0 !important; }
    .tabs-product-home.grid .nav-tabs > li > a {
        font-size: 12px !important;
        padding: 8px 12px !important;
        white-space: nowrap;
    }
    .tabs-product .tabs-title { font-size: 24px; }

    /* Benefits bar — 2 columns */
    .block-icon.icon-left .row { display: flex; flex-wrap: wrap; }
    .block-icon.icon-left .feature-box-item {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 10px;
    }
    .feature-box-info h4 { font-size: 11px !important; line-height: 1.4 !important; }

    /* Heureka reviews — 2 columns */
    .heureka-reviews { padding: 40px 15px; }
    .heureka-reviews .left,
    .heureka-reviews .right { float: none; width: 100%; }
    .heureka-reviews .left { margin-bottom: 20px; }
    .heureka-reviews .right .item { width: 48%; margin: 0 1% 40px; }
    .heureka-reviews .right .item:nth-child(n+3) { display: none; }

    /* Footer */
    .footer-columns { display: flex; flex-wrap: wrap; }
    .footer-columns > .col-md-6 { width: 50%; float: left; }
    .footer-layout-1 .footer-link-content .col-md-2,
    .footer-layout-1 .footer-link-content .col-md-3 { width: 33.333%; float: left; }
    .footer-layout-1 .footer-link-content .col-md-4 {
        width: 100%; float: left; margin-top: 20px;
    }
}


/* ==========================================================================
   TABLET ONLY (768–991px) — scoped fixes that must not leak to mobile
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 991px) {

    /* Category listing: truncate product description to keep rows aligned.
       Theme hides it at ≤860px, so re-enable and clamp to 3 lines. */
    .collection-page .products-grid.product-grid-item .short-description,
    .products-grid .product-content p.short-description {
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        height: auto !important;
        max-height: calc(1.4em * 3);
        font-size: 12px;
        line-height: 1.4;
        margin: 4px 0 8px;
        color: #555;
    }

    /* Product detail: widen palette selector box for tablet readability.
       The orange-bordered box (.product-tabs.delivery-tabs) already fills the
       column but internal padding and tap targets are cramped at this width. */
    .product .product-shop .product-tabs.delivery-tabs {
        width: 100%;
        margin: 16px 0;
    }
    .product .product-shop .product-tabs.delivery-tabs .tab-content { padding: 16px 20px; }
    .product .product-shop .weight-select a {
        padding: 10px 16px;
        font-size: 14px;
    }
    /* Quantity input + Koupit button larger for easier tapping */
    .product .product-shop .count input[type="text"],
    .product .product-shop #frm-addToCartForm-count {
        width: 80px !important;
        height: 52px !important;
        font-size: 18px !important;
        text-align: center;
    }
    .product .product-shop .buy button[type="submit"],
    .product .product-shop .buy .btn {
        padding: 14px 28px !important;
        font-size: 16px !important;
        font-weight: 700;
    }
}


/* ==========================================================================
   MOBILE (≤ 767px)
   ========================================================================== */

@media screen and (max-width: 767px) {

    /* Prevent horizontal scroll from theme's off-screen elements (cart dropdown, etc.).
       Use `overflow-x: clip` instead of `hidden` — `hidden` creates a scroll container
       which breaks `position: sticky` on descendants. `clip` prevents overflow without that side-effect. */
    html, body { overflow-x: clip; }

    /* Keep Bootstrap container/row math intact: container padding must match .row -15px negative margin */
    .container { padding-left: 15px; padding-right: 15px; }

    /* Restore symmetric col-main padding (theme zeroes left padding for desktop sidebar layout) */
    .template-collection .sidebar-right .col-main,
    .template-collection .col-main { padding: 0 !important; }

    /* Suppress the floating registration/"EXTRA BONUS" popup on mobile */
    .sale-event,
    .sale-event__wrapper,
    #snippet--saleEvent { display: none !important; }

    /* ----- Header ----- */
    /* Hide customer-service phone on phones (burger header takes over) */
    .menu-nav-right { display: none !important; }

    #header-content {
        position: relative;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }
    #header-content .header-inner { padding: 6px 0; }
    /* Breathing room on the sides (row's -15 margin extends past container padding). */
    #header-content.mobile-minimal .main-header { padding-left: 12px; padding-right: 12px; box-sizing: border-box; }
    #header-content .logo img,
    #header-content .logo h1 img { max-height: 36px; }

    /* Cart badge */
    #header-content .mini-cart-count,
    #header-content .cart-count,
    #header-content .quantity,
    #header-content #cart-count {
        background: #e66b00 !important;
        color: #fff !important;
        font-weight: 700;
    }

    /* ----- Slider (<img>): show whole image instead of cropping ----- */
    .slideshow-wrapper,
    .slideshow,
    .page-header.em-effect06,
    .flexslider,
    .flexslider .slides,
    .flexslider .slides li,
    .flexslider .slideshow__slide {
        height: auto !important;
        min-height: 0 !important;
    }
    /* Slide aspect ratio 885/460 from source — let UL collapse to current image height.
       LIs are positioned absolutely over UL so their overflow doesn't inflate ancestors. */
    .flexslider .slides { aspect-ratio: 885 / 460; position: relative; overflow: hidden; }
    .flexslider .slides > li {
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100% !important;
        height: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
    .flexslider .slideshow__slide,
    .flexslider .slideshow__slide > a { height: 100%; }

    .flexslider .slideshow__image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .flexslider { padding-left: 0; padding-right: 0; }

    /* ----- Homepage category banners (2×2) — grid from ≤991 handles layout; just tune spacing ----- */
    .home5-block-collection { padding: 15px 0 30px !important; }
    .home5-block-collection .home-collection-wrapper { left: 10px !important; }
    .home5-block-collection .home-collection-wrapper h2 { font-size: 12px !important; line-height: 1.3; }
    .home5-block-collection .home-collection-wrapper h2 strong { font-size: 16px !important; }

    /* ----- Section titles with orange underline ----- */
    .tabs-product .tabs-title {
        position: relative;
        margin: 20px 0 4px !important;
        padding-bottom: 10px;
        font-size: 22px !important;
        font-weight: 700;
        text-align: center;
    }
    .tabs-product .tabs-title::after {
        content: "";
        display: block;
        width: 50px;
        height: 3px;
        margin: 8px auto 0;
        background: #e66b00;
        border-radius: var(--radius-pill);
    }
    /* Hide theme's extra <hr> separator under the title */
    .tabs-product-home hr,
    .tabs-product > hr { display: none !important; }

    /* ----- Homepage product tabs ----- */
    .tabs-product-home.grid .tabs-product { margin: 20px 0 10px; position: relative; }

    .tabs-product-home.grid .tabs-layout-1 {
        display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        margin: 8px -10px 0;
        padding: 0 10px;
        text-align: left !important;
        scroll-snap-type: x proximity;
        scroll-padding-left: 10px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .tabs-product-home.grid .tabs-layout-1::-webkit-scrollbar { display: none; }

    /* Fade hint on the right edge signaling more tabs off-screen */
    .tabs-product-home.grid .tabs-product::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 32px;
        background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.95));
        pointer-events: none;
        z-index: 3;
    }

    .tabs-product-home.grid .tabs-layout-1 ul.nav.nav-tabs {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 0 5px !important;
        gap: 6px;
    }
    .tabs-product-home.grid .nav-tabs > li {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        scroll-snap-align: start;
    }
    .tabs-product-home.grid .nav-tabs > li > a {
        display: block;
        padding: 8px 12px !important;
        font-size: 11px !important;
        white-space: nowrap;
        border-radius: var(--radius);
    }

    /* Owl carousel prev/next buttons — circular, below the carousel */
    .tabs-product-home .owl-theme .owl-controls {
        display: block !important;
        position: static !important;
        width: 100%;
        height: auto !important;
        margin: 16px 0 0 !important;
        padding: 0 !important;
        text-align: center;
    }
    .tabs-product-home .owl-theme .owl-controls .owl-buttons {
        display: inline-flex !important;
        gap: 16px;
    }
    .tabs-product-home .owl-theme .owl-controls .owl-buttons .owl-prev,
    .tabs-product-home .owl-theme .owl-controls .owl-buttons .owl-next {
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0 !important;
        background: #e66b00 !important;
        color: #fff !important;
        border-radius: 50% !important;
        font-size: 16px !important;
        line-height: 1 !important;
        opacity: 1 !important;
    }
    .tabs-product-home .owl-theme .owl-controls .owl-pagination { display: none; }

    /* Homepage product-carousel cards */
    .product-featured-content .owl-item { padding: 0 5px; }
    .product-featured-content .price-box { min-height: 60px; }
    .owl-carousel .product-content .product-title {
        height: 50px;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    .price-box .regular-product span { font-size: 16px !important; }

    /* ----- Category listing: 2-column grid ----- */
    /* Zero theme's negative-margin gutter hack on the isotope wrapper */
    .product-grid-isotope-parent { margin: 0 !important; }

    .col-main .products-grid.product-grid-item {
        display: grid !important;
        /* jeden produkt na řádek (požadavek klienta 8/2026, dřív 1fr 1fr) */
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .col-main .products-grid.product-grid-item > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Clearfix helpers inserted for desktop float layout break CSS grid slots */
    .col-main .products-grid.product-grid-item > .clearfix { display: none !important; }

    /* Hide desktop right-sidebar on mobile (off-screen but still rendered + forces scrollbars) */
    .row.main_row.sidebar-right > .col-md-3,
    .collection-right-product { display: none !important; }

    /* Category product card */
    .products-grid .grid-item.product-item {
        margin-bottom: 10px;
        padding: 8px;
        border: 1px solid #eee;
        border-radius: var(--radius);
        background: #fff;
    }
    .products-grid .product-image { margin-bottom: 8px; }
    .products-grid .product-content h3,
    .products-grid .product-title {
        margin: 4px 0 !important;
        min-height: 48px;
        font-size: 12px !important;
        line-height: 1.3 !important;
        height: auto !important;
    }
    .products-grid .product-content h3 a { color: #333; }
    .products-grid .product-content .price-box { margin: 4px 0; min-height: 50px; }
    .products-grid .price-box .regular-product,
    .products-grid .price-box .special-price { font-size: 14px !important; }
    .products-grid .price-box .old-price { font-size: 11px !important; }
    .products-grid .per-kg,
    .products-grid .price-box .price-per-kg { font-size: 10px !important; color: #777; }
    .products-grid .product-content ul.flags,
    .products-grid .product-content ul.list-unstyled {
        margin: 4px 0 !important;
        padding: 0 !important;
        font-size: 9px !important;
    }
    .products-grid .product-content ul.flags li {
        margin: 2px 2px 2px 0 !important;
        padding: 2px 4px !important;
    }
    .products-grid .product-content .btn,
    .products-grid .product-content a.btn {
        width: 100%;
        margin-top: 4px;
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* Product corner labels shrunk to fit smaller cards */
    .product-item ul.product-labels {
        top: 4px !important;
        left: 4px !important;
        transform: scale(0.75);
        transform-origin: top left;
    }

    /* Category page H1 + description */
    .collection-page h1 {
        margin: 15px 0 10px !important;
        font-size: 22px !important;
        text-align: center;
    }
    .collection-page .category-description,
    .collection-page .category-description p {
        font-size: 13px;
        line-height: 1.5;
    }

    /* ----- Product detail page ----- */
    /* Stack image gallery and product-shop vertically */
    .product .product-img-box > .col-md-6,
    .product .product-img-box > .col-sm-6,
    .product .product-shop,
    .product .product-image-mobile {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .product .product-img-box { overflow: hidden; }
    .product .product-image-mobile { margin-bottom: 15px !important; }

    /* Reset right-aligned text inherited from desktop layout */
    .product .product-shop {
        padding: 15px !important;
        text-align: left !important;
    }
    .product .product-shop h1,
    .product .product-shop header.product-title h1 {
        margin: 10px 0 4px !important;
        font-size: 22px !important;
        font-weight: 700;
        line-height: 1.25 !important;
        text-align: left;
    }
    .product .product-shop h2,
    .product .product-shop header.product-title h2 {
        margin: 0 0 12px !important;
        font-size: 14px !important;
        font-weight: 400;
        color: #777;
        text-align: left;
    }
    .product .product-shop p { margin: 6px 0; text-align: left; }
    .product .product-shop h4 { margin: 12px 0 6px; font-size: 14px; }

    .product .product-shop .regular-product,
    .product .price-box .regular-product {
        font-size: 22px !important;
        font-weight: 700;
    }

    .product .btn-cart,
    .product .add-to-cart-btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
    }

    /* Info tabs (Informace / Parametry / Doprava / Recenze) — stack vertically */
    .product ~ .nav-tabs,
    .product-info-tabs .nav-tabs {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px;
    }
    .product ~ .nav-tabs > li,
    .product-info-tabs .nav-tabs > li {
        width: 100% !important;
        margin: 0 !important;
    }
    .product ~ .nav-tabs > li > a,
    .product-info-tabs .nav-tabs > li > a {
        padding: 10px !important;
        text-align: center !important;
    }

    /* ----- Heureka reviews: horizontal scroll carousel ----- */
    .heureka-reviews { padding: 30px 10px; }
    .heureka-reviews .left h2 { margin-bottom: 5px; font-size: 22px; }
    .heureka-reviews .left a { font-size: 13px; }
    .heureka-reviews .right {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
    }
    .heureka-reviews .right .item {
        width: 260px !important;
        min-width: 260px;
        min-height: 150px;
        margin: 0 !important;
        flex-shrink: 0;
        float: none;
        scroll-snap-align: start;
    }
    .heureka-reviews .right .item:nth-child(n+3) { display: block; }
    .heureka-reviews .right .item p.description { height: 80px; font-size: 13px; }

    /* ----- Footer ----- */
    .footer-columns { display: flex; flex-wrap: wrap; }
    .footer-columns > .col-md-6 {
        width: 100% !important;
        float: none;
        padding: 0;
    }
    .footer-columns > .col-md-6:last-child { margin-top: 10px; }

    .footer-layout-1 { padding: 30px 0 0 !important; }
    .footer-layout-1 .footer-link-content .col-md-2,
    .footer-layout-1 .footer-link-content .col-md-3 { width: 50%; float: left; }
    .footer-layout-1 .footer-link-content .col-md-4 {
        width: 100%; float: left; margin-top: 15px;
    }
    .footer-layout-1 h3.module-title {
        margin-bottom: 8px;
        padding-bottom: 8px;
        font-size: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Spacing between stacked footer sections */
    .footer-layout-1 .footer-link-content > [class*="col-"] {
        margin-bottom: 20px;
    }
    .footer-layout-1 .content li,
    .footer-layout-1 .content li a { font-size: 13px; line-height: 1.8; }
    .footer-layout-1 .footer-bottom .content-footer-bottom {
        height: auto;
        padding: 15px 10px;
        font-size: 11px;
        line-height: 1.5;
        text-align: center;
    }

    .home-newsletter .newsletter { padding: 0; }
    .home-newsletter .subtitle_newsletter { font-size: 13px; line-height: 1.5; }
    .newsletter .input-group-field { font-size: 14px; }
    .newsletter .newsletter_form_content .input-group-btn {
        display: block;
        width: 100%;
    }
    .newsletter .input-group-btn > .btn {
        display: block;
        width: 100%;
        margin-top: 5px;
    }

    .footer-share-social { margin-top: 15px; }
    .footer-icon-share a { margin-right: 8px; }
}


/* ==========================================================================
   SMALL MOBILE (≤ 520px)
   ========================================================================== */

@media screen and (max-width: 520px) {

    #header-content .logo img,
    #header-content .logo h1 img { max-height: 32px; }

    .home5-block-collection .home-collection-wrapper h2 { font-size: 10px !important; }
    .home5-block-collection .home-collection-wrapper h2 strong { font-size: 13px !important; }

    /* Homepage carousel cards — smaller typography */
    .owl-carousel .product-content .product-title {
        height: 44px;
        font-size: 11px !important;
    }
    .price-box .regular-product span { font-size: 14px !important; }
    .product-item .add-to-cart-btn { padding: 8px 12px !important; font-size: 12px !important; }

    .feature-box-info h4 { font-size: 9px !important; }

    /* Category grid — smaller fonts */
    .products-grid .product-content h3,
    .products-grid .product-title { min-height: 44px; font-size: 11px !important; }
    .products-grid .price-box .regular-product,
    .products-grid .price-box .special-price { font-size: 13px !important; }

    /* Footer stacks to a single column with visual separators */
    .footer-layout-1 .footer-link-content .col-md-2,
    .footer-layout-1 .footer-link-content .col-md-3 {
        width: 100%;
        float: none;
        margin-bottom: 15px;
    }
    .footer-layout-1 .footer-link-content .col-md-4 { width: 100%; }
    .footer-layout-1 h3.module-title {
        margin-bottom: 5px;
        padding-bottom: 5px;
        font-size: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .heureka-reviews .right .item { width: 230px !important; min-width: 230px; }
    .heureka-reviews .right .item p.description { height: 70px; font-size: 12px; }

    /* Submit CTA in CMS / contact / lead forms — full-width on small mobile.
       Excludes cart qty +/-, product variant pickers and similar (those aren't type=submit). */
    main button[type="submit"]:not(.qty-btn):not(.btn-num),
    main input[type="submit"]:not(.qty-btn) {
        width: 100%;
    }
}

/* product detail: desktop shows all sections expanded (no accordion) */
@media (min-width: 992px) {
    .pd-sections .pd-acc__body { display: block !important; }
    .pd-sections .pd-acc__head { cursor: default; }
    .pd-sections .pd-acc__head .chev { display: none; }
}

/* Task 10 — responsive polish */
@media (max-width: 767px) {
    /* stepper a CTA na jednom radku: popisek tlacitka je delsi nez v mockupu
       ("Koupit s dopravou" vs "KOUPIT"), tak mu dovolime zalomeni a zuzime stepper */
    .pd-buy .pd-buy-row .pd-cta { white-space: normal; font-size: 15px; padding: 8px 12px; line-height: 1.2; height: 44px; }
    .pd-buy .pd-buy-row .pd-qty button { width: 40px; height: 44px; }
    .pd-buy .pd-buy-row .pd-qty input { width: 52px; height: 44px; }

    /* všech pět v jedné řadě jako v podkladu od klienta — zalomení na 3 + 2
       zabíralo dvakrát tolik místa, což byl přesně ten požadavek */
    .pd-features { flex-wrap: nowrap; }
    .pd-feature { flex: 1 1 20%; min-width: 0; padding: 8px 3px; font-size: 10px; }
    .pd-feature i { font-size: 17px; margin-bottom: 4px; }
}

@media (max-width: 520px) {
    /* Price down-size on small phones (title already 22px via existing !important rule) */
    .pd-price .current { font-size: 26px; }

    /* dvě hladiny se vedle sebe vejdou i na telefon, tři se zalomí na dva řádky */
    .pd-tiers__grid { flex-wrap: wrap; }
    .pd-tier { flex: 1 1 45%; }

    .pd-feature { font-size: 9px; padding: 8px 2px; }
    .pd-feature i { font-size: 15px; }
}