/* ========================================
   HEXA-PERFORMANCE — RESPONSIVE STYLES
   Mobile-First Breakpoints
   ======================================== */

/* ----------------------------------------
   MOBILE (max-width: 767px)
   ---------------------------------------- */
@media (max-width: 767px) {
    :root {
        --font-size-4xl: 2.25rem;
        --font-size-3xl: 1.75rem;
        --font-size-2xl: 1.5rem;
        --font-size-xl: 1.25rem;
        --header-height: 60px;
        --space-3xl: 3rem;
        --space-2xl: 2rem;
    }

    .hexa-container {
        padding: 0 var(--space-md);
    }

    /* Header */
    .hexa-nav__hamburger {
        display: flex;
    }

    .hexa-nav__menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--color-primary);
        z-index: var(--z-overlay);
        padding: calc(var(--header-height) + var(--space-xl)) var(--space-xl) var(--space-xl);
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        overflow-y: auto;
    }

    .hexa-nav__menu.active {
        transform: translateX(0);
    }

    .hexa-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .hexa-menu > li {
        width: 100%;
        border-bottom: 1px solid var(--color-border);
    }

    .hexa-menu > li > a {
        display: block;
        padding: var(--space-lg) 0;
        font-size: var(--font-size-lg);
    }

    .hexa-menu > li > a::after {
        display: none;
    }

    .hexa-menu .sub-menu {
        position: static;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        padding: 0 0 var(--space-md) var(--space-md);
        min-width: 0;
    }

    .hexa-menu .sub-menu a {
        padding: var(--space-sm) 0;
    }

    /* Hero */
    .hexa-hero {
        min-height: 70vh;
    }

    .hexa-hero__content {
        padding: var(--space-2xl) 0;
    }

    /* Category Grid */
    .hexa-categories__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .hexa-category-card {
        aspect-ratio: 16 / 9;
    }

    /* About Section */
    .hexa-about__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .hexa-about__visual {
        display: none;
    }

    .hexa-about__content .hexa-section__tag,
    .hexa-about__content .hexa-section__title {
        text-align: center;
    }

    /* Social Feed */
    .hexa-social-feed__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .hexa-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    /* Shop */
    .hexa-shop__layout {
        grid-template-columns: 1fr;
    }

    .hexa-filter-toggle {
        display: inline-flex;
    }

    .hexa-shop-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: var(--z-overlay);
        background: var(--color-primary);
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        overflow-y: auto;
    }

    .hexa-shop-sidebar.active {
        transform: translateX(0);
    }

    .hexa-shop-sidebar__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-lg);
        border-bottom: 1px solid var(--color-border);
    }

    .hexa-shop-sidebar__inner {
        padding: 0 var(--space-lg) var(--space-lg);
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    /* Single Product */
    .hexa-product__main {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .hexa-product__gallery {
        position: static;
    }

    .hexa-product__related .products {
        grid-template-columns: repeat(2, 1fr);
    }

    .hexa-product__cart-form .cart {
        flex-direction: column;
    }

    .hexa-product__cart-form .quantity {
        width: 100%;
        justify-content: center;
    }

    /* Posts */
    .hexa-posts-grid {
        grid-template-columns: 1fr;
    }

    /* Mini-Cart */
    .hexa-mini-cart__panel {
        width: 100%;
        max-width: 100vw;
    }
}

/* ----------------------------------------
   TABLET (768px - 1023px)
   ---------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --font-size-4xl: 3rem;
    }

    /* Category Grid */
    .hexa-categories__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* About */
    .hexa-about__grid {
        grid-template-columns: 1fr;
    }

    .hexa-about__visual {
        display: none;
    }

    /* Footer */
    .hexa-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Shop */
    .hexa-shop__layout {
        grid-template-columns: 220px 1fr;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Single Product - Related */
    .hexa-product__related .products {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----------------------------------------
   DESKTOP (1024px - 1439px)
   ---------------------------------------- */
@media (min-width: 1024px) and (max-width: 1439px) {
    .hexa-nav__hamburger {
        display: none;
    }
}

/* ----------------------------------------
   LARGE DESKTOP (1440px+)
   ---------------------------------------- */
@media (min-width: 1440px) {
    :root {
        --container-max: 1440px;
    }

    .hexa-hero__title {
        font-size: 4.5rem;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ----------------------------------------
   TOUCH DEVICE OPTIMIZATIONS
   ---------------------------------------- */
@media (hover: none) {
    .hexa-product-card__actions {
        transform: translateY(0);
        background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    }

    .hexa-product-card__img--back {
        display: none;
    }

    .hexa-product__zoom-lens {
        display: none !important;
    }

    .hexa-category-card__arrow {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ----------------------------------------
   PRINT
   ---------------------------------------- */
@media print {
    .hexa-header,
    .hexa-footer,
    .hexa-mini-cart,
    .hexa-modal,
    .hexa-search-overlay,
    .hexa-topbar {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .hexa-product__main {
        grid-template-columns: 1fr 1fr;
    }
}