/* ===== WHATSAPP BUTTON ===== */
.whatsapp-btn {
    position: fixed; bottom: 32px; right: 32px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    border: none; cursor: pointer; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(37,211,102,0.4);
    transition: all 0.3s;
}
.whatsapp-btn:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,0.5); }
.whatsapp-btn svg { width: 28px; height: 28px; fill: #fff; }

/* ===== BACK TO TOP ===== */
.back-to-top {
    position: fixed; bottom: 32px; right: 32px;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--primary); color: #fff;
    border: none; cursor: pointer; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(20,83,45,0.3);
    opacity: 0; transform: translateY(20px);
    transition: all 0.3s; pointer-events: none;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--primary-dark); transform: translateY(-2px); }
.back-to-top svg { width: 22px; height: 22px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .promo-banner { flex-direction: column; gap: 8px; padding: 12px 20px; text-align: center; }
    .testimonial-card { flex: 0 0 100%; }
    .trust-bar { gap: 24px; padding: 24px 20px; }

    .navbar { padding: 0 20px; }
    .hamburger { display: block; }
    .nav-search { display: none; }
    .nav-links {
        display: none; position: absolute; top: 68px; left: 0; right: 0;
        background: #fff; flex-direction: column; gap: 0;
        border-bottom: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        padding: 8px 0;
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 12px 24px; font-size: 16px; }
    .nav-links a.active::after { display: none; }
    .featured-grid { gap: 16px; }
    .featured-card { width: 240px; }
    .occasion-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .instagram-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .premium-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .premium-section .section-title { font-size: 2.2rem; }
    .premium-card-img { height: 220px; }
    .shop-layout { grid-template-columns: 1fr; }
    .filter-sidebar {
        display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        z-index: 300; border-radius: 0; height: 100vh; overflow-y: auto;
        padding: 80px 24px 24px;
    }
    .filter-sidebar.open { display: block; }
    .filter-close {
        display: block;
        position: absolute; top: 20px; right: 20px; background: none; border: none;
        font-size: 24px; cursor: pointer; color: var(--text-light);
    }
    .mobile-filter-toggle {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
        background: var(--bg-card); font-size: 14px; cursor: pointer; color: var(--text);
    }
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-layout { grid-template-columns: 1fr; }
    .cart-layout { grid-template-columns: 1fr; }
    .checkout-layout { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero h1 { font-size: 32px; }
    .hero-social-proof { flex-direction: column; gap: 12px; }
    .hero-ctas { flex-direction: column; align-items: center; }
    .btn-hero-outline { width: 240px; text-align: center; }
    .section { padding: 40px 20px; }
    .whatsapp-btn { bottom: 20px; right: 20px; width: 48px; height: 48px; }
    .back-to-top { bottom: 20px; right: 20px; width: 44px; height: 44px; }
}

@media (max-width: 600px) {
    .premium-grid { grid-template-columns: 1fr; gap: 20px; }
    .premium-section { padding: 60px 16px; }
    .premium-section .section-title { font-size: 1.8rem; }
    .premium-card-img { height: 240px; }
    .btn-premium { padding: 14px 32px; font-size: 0.9rem; }
}