/* Responsive */
@media(max-width: 768px) {
    .ho-menu-wrapper {
        display: block; /* Stack on mobile */
    }
    .ho-cart-sidebar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
        display: flex; /* Always flex, hide via position */
        z-index: 10001;
    }
    .ho-cart-sidebar.active {
        right: 0;
    }
    /* Hide if not active using right position, so remove display toggle */
    .ho-cart-sidebar:not(.active) {
        display: flex; /* Keep layout, just off screen */
    }

    .ho-sidebar-overlay {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 10000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        display: block;
    }
    .ho-sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .ho-product-grid { grid-template-columns: 1fr 1fr; gap: 15px; }
}

/* Responsive Adjustments */
@media(max-width: 1024px) {
    .ho-homepage-layout-grid .ho-product-grid {
        grid-template-columns: repeat(var(--ho-cols-tablet, 2), 1fr);
    }

    .ho-homepage-layout-list .ho-product-grid {
        grid-template-columns: repeat(var(--ho-cols-tablet, 1), 1fr);
    }

    .ho-homepage-layout-masonry .ho-product-grid {
        column-count: var(--ho-cols-tablet, 2);
    }

    .ho-cat-banner-split {
        grid-template-columns: 1fr;
    }

    .ho-split-content {
        padding: 30px 20px;
    }
}

@media(max-width: 768px) {


    .ho-main-banner {
        height: 350px;
    }

    .ho-main-banner-title {
        font-size: 2rem;
    }

    .ho-main-banner-subtitle {
        font-size: 1rem;
    }

    .ho-featured-cats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ho-cat-banner-hero {
        height: 200px;
    }

    .ho-cat-banner-hero .ho-banner-title {
        font-size: 1.8rem;
    }

    .ho-cat-banner-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .ho-cat-banner-split.ho-split-right .ho-split-image {
        order: 1;
    }

    .ho-sub-banner-image img {
        width: 100px;
        height: 70px;
    }

    .ho-homepage-layout-list .ho-product-card {
        grid-template-columns: 100px 1fr;
    }

    .ho-homepage-layout-masonry .ho-product-grid {
        column-count: 1;
    }
}

@media(max-width: 480px) {
    .ho-featured-cats-grid {
        grid-template-columns: 1fr;
    }

    .ho-main-banner {
        height: 250px;
    }

    .ho-sub-banner-image {
        display: none;
    }
}


/* Responsive */
@media(max-width: 768px) {
    .ho-auth-modal-container {
        flex-direction: column;
        height: auto;
        max-height: 95vh;
        overflow-y: auto;
    }
    .ho-auth-modal-left {
        width: 100%;
        height: 150px;
        padding: 20px;
        min-height: 150px;
    }
    .ho-auth-modal-left h2 { font-size: 1.8rem; }
    .ho-auth-modal-right { padding: 20px; }
}

/* Responsive */
@media(max-width: 900px) {
    .ho-checkout-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ho-form-row.three-col {
        grid-template-columns: 1fr;
    }
    .ho-checkout-right {
        order: -1; /* Option: Show cart first? Or last? Usually last in checkout flow, but first is good for summary. Let's keep last (default) for mobile flow, or maybe cart summary collapsed? Mockup desktop only shown. Standard is top or bottom. Left/Right becomes Top/Bottom. */
        order: 0; /* Natural flow: Details then Cart/Place order */
    }
}

/* ==========================================
   PRODUCT MODAL LAYOUTS
   ========================================== */