/**
 * ===================================================================
 * Deli Snacks Theme - Mobile Responsive Styles (Verified)
 * ===================================================================
 * This file adapts the desktop design for smaller screens. It has
 * been verified against the theme's templates and rendered HTML.
 *
 * Breakpoint: 782px and below
 */

@media (max-width: 1024px) {
    /* --- 1. Global Layout & Typography --- */
    /* Switch the main grid to a single column layout */
    .homepage-layout-grid {
        display: flex;
        flex-direction: column;
    }
    .homepage-content-column {
        order: 1;
        /* Show content first */
    }
    .homepage-sidebar-column {
        order: 2;
        /* Show cart section below content */
        margin-top: 2rem;
        padding: 0 1rem;
    }
    .product-world-container {
        padding: 0;
    }
    .site-logo-container {
        padding-top: 1rem;
    }
    .homepage-hero {
        margin-bottom: 0;
    }
    .hero-image-container {
        height: 10rem;
        width: calc(100% + 2rem);
        transform: translate(-1rem);
    }
    /* --- 2. Header & Top Bar --- */
    /* Stack items in the top bar */
    .top-bar .inner {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;
        padding-top: 0;
    }
    .top-bar-left {
        background: #821814;
        color: #fff;
        display: flex;
        padding: 0.375rem 0rem;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        align-self: stretch;
    }
    body .site-logo {
        width: 5rem;
        height: 5rem
    }
    .opening-hours-message::before {
        content: "";
        display: inline-block;
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M12 1.07191C13.2066 1.7686 14.2104 2.76833 14.9119 3.97215C15.6134 5.17597 15.9883 6.54213 15.9995 7.93538C16.0108 9.32864 15.658 10.7007 14.976 11.9157C14.2941 13.1307 13.3066 14.1465 12.1114 14.8626C10.9162 15.5787 9.55469 15.9702 8.16168 15.9984C6.76866 16.0266 5.39244 15.6904 4.16924 15.0233C2.94605 14.3562 1.9183 13.3811 1.18773 12.1947C0.45717 11.0083 0.0491274 9.65168 0.00400009 8.25911L0 7.99991L0.00400009 7.74071C0.0488026 6.35911 0.450838 5.01268 1.17091 3.83271C1.89098 2.65273 2.90452 1.67948 4.11271 1.00782C5.3209 0.336164 6.68252 -0.0109686 8.0648 0.000264196C9.44709 0.011497 10.8029 0.380712 12 1.07191ZM8 3.19991C7.80405 3.19994 7.61493 3.27188 7.4685 3.40209C7.32207 3.53229 7.22853 3.71171 7.2056 3.90631L7.2 3.99991V7.99991L7.2072 8.10471C7.22544 8.24351 7.27978 8.37509 7.3648 8.48631L7.4344 8.56631L9.8344 10.9663L9.9096 11.0319C10.0499 11.1408 10.2224 11.1998 10.4 11.1998C10.5776 11.1998 10.7501 11.1408 10.8904 11.0319L10.9656 10.9655L11.032 10.8903C11.1409 10.75 11.1999 10.5775 11.1999 10.3999C11.1999 10.2223 11.1409 10.0498 11.032 9.90951L10.9656 9.83431L8.8 7.66791V3.99991L8.7944 3.90631C8.77147 3.71171 8.67793 3.53229 8.5315 3.40209C8.38507 3.27188 8.19595 3.19994 8 3.19991Z" fill="%23FFFFFF"/></svg>');
        background-repeat: no-repeat;
        background-size: contain;
        display: none;
    }
    #masthead {
        padding: 0;
    }
    /* --- 3. Product Filters & Search --- */
    .product-filters-section {
        padding-top: 1rem;
    }
    .product-categories-nav-parent {
        margin-top: 1.5rem;
    }
    .product-filters-section .section-title {
        margin-top: 0.5rem;
        margin-bottom: 1.5rem;
        padding-top: 0;
    }
    /* Make sure the category navigation fades work correctly on mobile */
    .product-categories-nav-parent.is-scrolling::before {
        left: -1rem;
        /* Adjust for parent padding */
    }
    .product-categories-nav-parent.is-at-end::after {
        right: -1rem;
        /* Adjust for parent padding */
    }
    /* --- 4. Product Carousel & Lists --- */
    #featured-products-section .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    #featured-products-section .products-carousel .product-card {
        flex: 0 0 70%;
        /* Show one and a bit cards */
        max-width: 16.75rem;
        min-width: unset;
    }
    .product-list-section {}
    .product-card .product-image {
        width: 5.4375rem;
        height: 4.1875rem;
    }
    .product-card-content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        overflow: hidden;
    }
    li.product-card {
        position: relative;
    }
    .product-carousel-section .product-card .product-add-to-cart {
        position: absolute;
        right: 0;
        top: 1rem;
        right: 1rem;
    }
    .product-carousel-section .product-card .product-details {
        gap: 1.5rem;
        margin-top: auto;
    }
    .product-carousel-section .product-card {
        align-items: stretch;
    }
    body .products-carousel-parent::before, body .products-carousel-parent::after {
        display: none;
    }
    .product-carousel-section .product-card .price-wrapper {
        margin-top: auto;
    }
    /* Stack product list items vertically */
    .product-list-item .product-item-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .product-list-item .product-image {
        order: 1;
        width: 100%;
        margin-bottom: 1rem;
    }
    .product-list-item .product-text-details {
        order: 2;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .product-list-item .product-add-to-cart {
        order: 3;
        position: relative;
        width: 100%;
    }
    .product-list-item .product-add-to-cart .button {
        display: flex;
        justify-content: center;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    .product-list-item .product-description {
        max-width: 100%;
    }
    /* --- 5. Sidebar Cart -> Mobile Cart Overlay --- */
    /* Hide the original sticky container on mobile */
    .sidebar-cart-sticky-container {
        display: none;
    }
    /* Mobile "View Cart" button fixed at the bottom */
    body:not(.woocommerce-checkout):not(.woocommerce-cart) .mobile-cart-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 400px;
        z-index: 998;
        background: #f9b206;
        border-radius: 7.5rem;
        font-weight: 600;
        color: #262626;
        padding: 1.0625rem 1.5rem;
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
        border: none;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: opacity 0.3s, visibility 0.3s;
    }
    /* When cart is empty, hide the floating button */
    .empty-cart .mobile-cart-toggle {
        opacity: 0;
        visibility: hidden;
    }
    body.mobile-cart-open .mobile-cart-toggle {
        display: none;
    }
    /* The main overlay container */
    .mobile-cart-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    body.mobile-cart-open .mobile-cart-overlay {
        opacity: 1;
        visibility: visible;
    }
    /* Re-style the existing #deli-sidebar-cart for the slide-up panel */
    #deli-sidebar-cart {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.35s ease-in-out;
        display: flex;
        flex-direction: column;
    }
    body.mobile-cart-open #deli-sidebar-cart {
        transform: translateY(0);
    }
    /* Center the empty cart message properly */
    .deli-cart__empty-message {
        padding: 4rem 1rem;
        /* Add more padding for better vertical centering */
    }
    /* Add a close button to the mobile cart header */
    .deli-cart__header {
        position: relative;
    }
    .deli-cart__close-btn {
        position: absolute;
        top: 0;
        right: 0;
        background: transparent;
        border: none;
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        font-size: 1.125rem;
        padding: 0;
        text-align: center;
        cursor: pointer;
    }
    /* Make the cart body scrollable */
    .deli-cart__body {
        overflow-y: auto;
        padding-bottom: 0;
    }
    /* Style the footer within the overlay */
    .deli-cart__footer {
        border-top: 1px solid #eee;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
        margin-top: auto;
        /* Push footer to the bottom of the flex container */
    }
    .product-filters-section {
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
    }
    .product-list-section {
        margin-top: 1.5rem;
    }
    .product-carousel-section, .product-list-section {
        margin-bottom: 1.5rem;
    }
    .section-header .section-title {
        margin-bottom: 0
    }
    .section-header {
        margin-bottom: 1.5rem
    }
    .product-list-item .description-wrapper {
        display: none;
    }
    .product-list-item .product-item-content {
        gap: 1rem;
    }
    body .woocommerce-product-search .search-field {
        font-size: 0.75rem;
    }
    .scrolled-past-header .product-filters-section {
        border-bottom: 1px solid #efedea;
    }
    .product-filters-section {
        position: sticky;
        top: -4.375rem;
        background: #faf6f1;
        z-index: 2;
    }
    html {
        scroll-padding-top: 11.375rem;
    }
    .scrolled-past-header .product-filters-section:before {
        position: absolute;
        width: 1rem;
        left: -1rem;
        top: 0;
        height: 100%;
        background-color: #faf6f1;
        pointer-events: none;
        content: "";
    }
    .scrolled-past-header .product-filters-section:after {
        position: absolute;
        width: 1rem;
        right: -1rem;
        top: 0;
        height: 100%;
        background-color: #faf6f1;
        pointer-events: none;
        content: "";
    }
    .homepage-layout-grid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
@media (max-width: 767px) {
    body .site #masthead {
        padding: 0 1rem;
        padding-top: 46px;
        display: flex;
        justify-content: space-between;
    }
    body .site .top-bar {
        display: flex;
        align-items: center;
        border: 0;
    }
    body .site .top-bar .inner {
        padding: 0;
    }
    body .site .top-bar-left {
        position: absolute;
        width: 100%;
        left: 0;
        top: -0;
    }
    body .site .top-bar-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
    }
    body .site .phone-order {
        flex-direction: column;
    }
    .woocommerce-checkout .entry-content {
        padding-left: unset;
        padding-right: unset;
    }
    .woocommerce-checkout .site-main {
        padding: 0 1rem;
    }
    body .site #primary .deli-address-street {
        width: 100%;
    }
    body .site #primary .deli-address-housenr {
        width: calc(50% - 0.5rem);
    }
    body .site #primary .deli-address-postcode {
        width: calc(50% - 0.5rem);
    }
    body .deli-product-modal-image {
        height: 12rem;
    }
    body .site #primary .form-row.validate-phone, body .site #primary .form-row.validate-email {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .site-footer {
        padding-bottom: 7.5rem;
    }
    body:not(.woocommerce-page) article.page.type-page {
        font-size: 0.875rem;
    }
}
@media (max-width: 480px) {
    .quantity-selector {
        padding: 0.875rem 1rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 0.75rem;
    }
    .deli-product-modal-footer .quantity-selector .quantity-input {
        width: 1rem;
        font-size: 0.75rem;
        line-height: 1.375rem;
    }
    .deli-modal-add-to-cart-button {
        font-size: 0.75rem;
        padding: 0.875rem 1rem;
        line-height: 1.5rem;
    }
}
@media (max-width: 768px) {
    body.woocommerce-order-received .woocommerce-order-overview {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    body.woocommerce-order-received .woocommerce-order-overview li {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: baseline;
        border-bottom: 1px solid #efedea;
        padding-bottom: 1rem;
    }
    body.woocommerce-order-received .woocommerce-order-overview li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    body.woocommerce-order-received .woocommerce-order-overview li strong {
        margin-top: 0;
    }
    body.woocommerce-order-received .shop_table tr {
        flex-direction: column;
        align-items: flex-start;
    }
    body.woocommerce-order-received .entry-content {
        padding-left: 0;
        padding-right: 0;
    }
    body.woocommerce-order-received article {}
}
@media (max-width: 1280px) {
    body .mobile-break {
        display: block;
    }
}