@media (max-width: 900px) {
    :root {
        --header-height: 54px;
    }

    .hero {
        margin-top: 0 !important;
        min-height: 100vh !important;
        padding-top: 88px !important;
    }

    .section {
        padding-block: var(--space-2xl) !important;
    }

    .section__header {
        margin-bottom: var(--space-xl) !important;
    }

    .hero__content {
        max-width: 92% !important;
    }

    .hero__subtitle {
        margin-bottom: var(--space-xl) !important;
    }

    .hero__actions {
        margin-top: var(--space-lg) !important;
        row-gap: var(--space-md) !important;
    }

    .site-title {
        font-size: 1.3rem !important;
    }

    .site-branding .custom-logo {
        max-height: 46px;
        width: auto;
    }

    .menu-toggle {
        display: flex !important;
        z-index: 1002;
    }

    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-fast);
        z-index: 995;
    }

    .mobile-menu-open .mobile-menu-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .primary-navigation {
        display: none !important;
        position: fixed !important;
        top: calc(var(--header-height) + 14px) !important;
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
        z-index: 1001 !important;
        background: rgba(10, 10, 10, 0.98) !important;
        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;
    }

    .primary-navigation.open {
        display: block !important;
        position: fixed !important;
        top: calc(var(--header-height) + 14px) !important;
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: calc(100vh - var(--header-height) - 34px) !important;
        overflow-y: auto;
        border-radius: 20px !important;
        border: 1px solid rgba(212, 175, 55, 0.3) !important;
        padding: 40px 25px !important;
        height: auto !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 1) !important;
        animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .primary-navigation.open .nav-menu {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 25px !important;
        text-align: left !important;
    }

    .primary-navigation.open .nav-menu li {
        width: 100%;
    }

    .primary-navigation.open .nav-menu li a {
        font-size: 1rem !important;
        letter-spacing: 0.1em !important;
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    .primary-navigation.open .menu-item-has-children > .sub-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 6px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
    }

    .primary-navigation.open .menu-item-has-children.submenu-open > .sub-menu,
    .primary-navigation.open .menu-item-has-children.active > .sub-menu {
        opacity: 1;
        visibility: visible;
        max-height: 520px;
        padding: 4px 0 8px !important;
    }

    .primary-navigation.open .menu-item-has-children.submenu-open > a svg {
        transform: rotate(180deg);
    }

    .btn--hero-explore {
        padding: 14px 32px !important;
        font-size: 0.76rem !important;
    }

    /* Mobile overrides for carousel */
    #destacados .featured-products-carousel > .product-card {
        flex: 0 0 78% !important;
        max-width: 78% !important;
    }

    #destacados .product-card__image-wrap {
        aspect-ratio: 4 / 3 !important;
    }

    #destacados .product-card__title {
        font-size: 0.98rem !important;
        margin-bottom: 6px !important;
    }

    #destacados .product-card__notes {
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        margin-bottom: var(--space-sm) !important;
        flex: 0 0 auto !important;
    }

    #destacados .product-card__tags {
        display: none !important;
    }

    #destacados .product-card__footer {
        padding-top: var(--space-sm) !important;
    }

    #destacados .product-card__price {
        font-size: 1.05rem !important;
    }

    .products-grid {
        row-gap: var(--space-md) !important;
    }

    .product-card__body {
        padding: var(--space-md) !important;
    }

    .single-product .site-main > .container {
        max-width: 100% !important;
        padding-inline: 0 !important;
    }

    .single-product .single-product-layout {
        gap: var(--space-lg) !important;
    }

    .single-product .product-gallery,
    .single-product .product-info {
        width: 100%;
    }

    .single-product .product-gallery__main {
        border-left: 0;
        border-right: 0;
    }

    .single-product .product-gallery__thumbs,
    .single-product .product-info,
    .single-product .woocommerce-breadcrumb,
    .single-product .related,
    .single-product .up-sells {
        padding-inline: var(--space-md);
    }

    .site-footer {
        padding-top: var(--space-xl);
    }

    .site-footer .container {
        padding-inline: var(--space-md);
    }

    .footer__grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    .footer__brand,
    .footer__col,
    .footer__col--newsletter {
        text-align: center;
    }

    .footer__logo {
        align-items: center;
    }

    .footer__logo-name {
        font-size: 1.65rem;
    }

    .footer__tagline {
        max-width: none;
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .footer__social {
        justify-content: center;
    }

    .footer__col-title {
        margin-bottom: var(--space-lg);
    }

    .footer__col-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer__links {
        align-items: center;
        gap: var(--space-sm);
    }

    .footer__links a:hover {
        padding-left: 0;
    }

    .footer__col--newsletter {
        padding: var(--space-lg);
    }

    .footer__newsletter-desc {
        text-align: center;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

}

@media (max-width: 400px) {
    #destacados .featured-products-carousel > .product-card {
        flex-basis: 84%;
        max-width: 84%;
    }

    .footer__social-link {
        width: 38px;
        height: 38px;
    }

    .footer__logo-name {
        font-size: 1.45rem;
    }
}

.btn--hero-explore {
    border: 1px solid rgba(255, 230, 160, 0.45) !important;
    background: linear-gradient(135deg, rgba(255, 236, 170, 0.92) 0%, rgba(212, 175, 55, 0.86) 52%, rgba(168, 124, 22, 0.9) 100%) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 10px 28px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    position: relative;
}

.btn--hero-explore::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 3px;
    background: linear-gradient(120deg, transparent 10%, rgba(255, 255, 255, 0.45) 38%, transparent 62%);
    transform: translateX(-140%);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.btn--hero-explore:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(212, 175, 55, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.btn--hero-explore:hover::after {
    transform: translateX(140%);
}

.btn--hero-explore svg {
    transition: transform var(--transition-fast);
}

.btn--hero-explore:hover svg {
    transform: translateX(2px);
}

@media (max-width: 600px) {
    .btn--hero-explore {
        width: 100%;
        max-width: 320px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .interactive-logo::before,
    .interactive-logo::after {
        opacity: 0 !important;
        background: none !important;
        filter: none !important;
    }
}