/* 
    HorantaKoop Responsive CSS
    --------------------------------------------------------------
*/

/* Tablet Landscape and smaller (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-md);
    }
    
    /* Adjust grid for tablets */
    .horanta-checkout-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* Tablet Portrait and smaller (max-width: 768px) */
@media screen and (max-width: 768px) {
    /* Header & Navigation */
    .site-header {
        flex-wrap: wrap;
        padding: var(--spacing-sm);
    }
    
    .site-branding {
        flex: 1;
    }

    .header-actions {
        margin-left: auto; /* Push to right */
        order: 2;
    }
    
    .menu-toggle {
        display: block; /* Show hamburger */
        order: 3;
        margin-left: var(--spacing-sm);
    }
    
    .main-navigation {
        order: 4;
        width: 100%;
        flex-basis: 100%;
    }

    .main-navigation ul {
        display: none; /* Hidden by default */
        flex-direction: column;
        width: 100%;
        background-color: var(--surface-color);
        box-shadow: var(--shadow-md);
        margin-top: var(--spacing-sm);
    }

    .main-navigation.toggled ul {
        display: flex;
    }

    .main-navigation ul li {
        margin: 0;
        border-top: 1px solid var(--border-color);
    }
    
    .main-navigation ul li a {
        padding: var(--spacing-sm);
        display: block;
    }
    
    /* Dropdowns in Mobile */
    .main-navigation ul ul {
        position: static;
        box-shadow: none;
        background-color: #f9f9f9;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none; /* Hidden until toggled via JS */
    }
    
    .main-navigation ul li.active > ul {
        display: block;
    }

    /* Hero Slider */
    .hero-slider-wrapper {
        height: 400px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-text {
        font-size: 1rem;
    }
    
    /* Layout */
    .col2-set .col-1, 
    .col2-set .col-2 {
        width: 100%;
        float: none;
    }

    /* WooCommerce Product Grid - 2 Columns */
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {
        width: 48% !important;
        margin-right: 4% !important;
        float: left;
    }
    
    .woocommerce ul.products li.product:nth-child(2n) {
        margin-right: 0 !important;
        float: right;
    }
}

/* Mobile Devices (max-width: 480px) */
@media screen and (max-width: 480px) {
    /* Hero Slider */
    .hero-slider-wrapper {
        height: 300px;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .slider-arrow {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    /* WooCommerce Product Grid - 1 Column */
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {
        width: 100% !important;
        margin-right: 0 !important;
        float: none;
    }
    
    /* Footer */
    .footer-widgets {
        grid-template-columns: 1fr; /* Stack widgets */
    }
    
    /* Cart Table */
    .shop_table.cart .product-thumbnail {
        display: none;
    }
    
    /* Buttons */
    .button, button, input[type="submit"] {
        width: 100%; /* Full width buttons for easier touch */
        text-align: center;
    }
}