/* Final layout fixes: footer alignment and full-width desktop cart. */

.site-footer .footer-widgets {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: clamp(24px, 4vw, 72px) !important;
}

.site-footer .footer-widgets::before,
.site-footer .footer-widgets::after {
    display: none !important;
    content: none !important;
}

.site-footer .footer-widgets .block {
    align-self: start !important;
}

.site-footer .footer-widget-3 {
    grid-column: auto !important;
}

@media (max-width: 560px) {
    .site-footer .footer-widgets {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (min-width: 769px) {
    body.woocommerce-cart #content > .col-full {
        width: min(94vw, 1680px) !important;
        max-width: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 24px !important;
        padding-left: 24px !important;
    }

    body.woocommerce-cart #primary,
    body.woocommerce-cart #main,
    body.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
    body.woocommerce-cart .wc-block-components-sidebar-layout {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body.woocommerce-cart .wc-block-components-sidebar-layout {
        grid-template-columns: minmax(0, 1fr) clamp(340px, 24vw, 420px) !important;
        gap: 32px !important;
        align-items: start !important;
    }

    body.woocommerce-cart .wc-block-components-main {
        width: 100% !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    body.woocommerce-cart .wc-block-cart__sidebar {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.woocommerce-cart .vertikal-cart-columns {
        grid-template-columns: 160px minmax(320px, 1fr) 130px 210px 150px !important;
        width: 100% !important;
    }

    body.woocommerce-cart .wc-block-cart-items__row {
        grid-template-columns: 160px minmax(0, 1fr) 150px !important;
        width: 100% !important;
    }

    body.woocommerce-cart .wc-block-cart-item__image {
        width: 160px !important;
    }

    body.woocommerce-cart .wc-block-cart-item__image img {
        width: 138px !important;
        height: 138px !important;
    }

    body.woocommerce-cart .wc-block-cart-item__wrap {
        grid-template-columns: minmax(320px, 1fr) 130px 210px !important;
        gap: 16px !important;
        width: 100% !important;
    }

    body.woocommerce-cart .wc-block-cart-item__quantity {
        min-width: 200px !important;
        justify-content: space-between !important;
    }

    body.woocommerce-cart .wc-block-cart-item__total {
        position: relative !important;
        z-index: 1 !important;
        width: 150px !important;
        min-width: 150px !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
        background: #fff !important;
        text-align: center !important;
    }
}

/* Mobile header and hero: keep every control inside the viewport and reserve
   separate zones for copy, arrows, call-to-action and slider dots. */
@media (max-width: 768px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .storefront-primary-navigation > .col-full {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-right: 12px !important;
        margin-left: 12px !important;
        gap: 10px !important;
    }

    .vertikal-catalog-dropdown {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: calc(100% - 72px) !important;
        min-width: 0 !important;
    }

    .vertikal-catalog-dropdown .catalog-toggle {
        width: auto !important;
        max-width: 100% !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 9px 14px !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .main-navigation {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 62px !important;
        min-width: 50px !important;
        margin: 0 0 0 auto !important;
    }

    .main-navigation .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 56px !important;
        min-width: 56px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 8px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .vertikal-banner-section,
    .vertikal-banner-grid,
    .vertikal-banner-slider,
    .vertikal-banner-slider .slider-slides,
    .vertikal-banner-slider .slide {
        width: 100% !important;
        max-width: 100% !important;
    }

    .vertikal-banner-slider,
    .vertikal-banner-slider .slide {
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
    }

    .vertikal-banner-slider .slide {
        padding: 16px 48px 28px !important;
        background-position: center !important;
    }

    .vertikal-banner-slider .slide-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        width: 100% !important;
        height: 186px !important;
        min-height: 186px !important;
        max-height: 186px !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .vertikal-banner-slider .slide h1,
    .vertikal-banner-slider .slide h2,
    .vertikal-banner-slider .slide-content h1,
    .vertikal-banner-slider .slide-content h2 {
        width: 100% !important;
        max-width: 230px !important;
        margin: 0 0 7px !important;
        font-size: 22px !important;
        line-height: 1.12 !important;
    }

    .vertikal-banner-slider .slide p,
    .vertikal-banner-slider .slide-content p {
        width: 100% !important;
        max-width: 230px !important;
        margin: 0 0 10px !important;
        font-size: 13px !important;
        line-height: 1.28 !important;
    }

    .vertikal-banner-slider .slide-content a,
    .vertikal-banner-slider .slide-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 144px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 9px 14px !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .vertikal-banner-slider .slider-prev,
    .vertikal-banner-slider .slider-next {
        top: 50% !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
    }

    .vertikal-banner-slider .slider-prev {
        left: 8px !important;
    }

    .vertikal-banner-slider .slider-next {
        right: 8px !important;
    }

    .vertikal-banner-slider .slider-dots {
        bottom: 10px !important;
    }
}

@media (max-width: 360px) {
    .vertikal-banner-slider .slide {
        padding-right: 42px !important;
        padding-left: 42px !important;
    }

    .vertikal-banner-slider .slide h1,
    .vertikal-banner-slider .slide h2,
    .vertikal-banner-slider .slide-content h1,
    .vertikal-banner-slider .slide-content h2 {
        font-size: 20px !important;
    }

    .vertikal-banner-slider .slide p,
    .vertikal-banner-slider .slide-content p {
        font-size: 12px !important;
    }
}