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

/* 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;
    }
    /* Hide the empty <th class="item"> placeholder when image col is hidden */
    #cart table th.item {
        display: none;
    }
}
.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;
}


/* ==========================================================================
   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: 2px;
    }
    /* 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: 4px;
    }

    /* 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;
        grid-template-columns: 1fr 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: 6px;
        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) {
    /* Allow feature icons to wrap into 2 rows on narrow viewports
       (5 items × flex:1 can get very narrow; 30% gives ~3 per row) */
    .pd-features { flex-wrap: wrap; }
    .pd-feature { flex: 1 1 30%; }
}

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