/* mobile.css — Terra Nusa CLEAN v2 */

/* ── DEFAULT: Drawer selalu hidden di desktop ── */
@media (min-width: 769px) {
    .nav-drawer { display: none !important; }
    .hamburger-btn { display: none !important; }
    .drawer-overlay { display: none !important; }
}

.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9997;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.drawer-overlay.show { display: block; }

.hamburger-btn { display: none; }

/* ────────────────────────────────
   BASE RESET
──────────────────────────────── */
html, body {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent;
}

section, footer, header, main, nav, article, aside {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

input, select, textarea, button {
    touch-action: manipulation;
    -webkit-appearance: none;
}

.hero-brand-bar {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    background: #1a0f05 !important;
    padding: 13px 0;
    border-top: none !important;
    border-bottom: none !important;
}

.hero-brand-track {
    display: inline-flex !important;
    white-space: nowrap !important;
    animation: brandScroll 25s linear infinite !important;
    width: max-content !important;
}

.hero-brand-track span { color: #ffffff !important; }

.testimoni-track-wrapper {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

@keyframes brandScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ────────────────────────────────
   MOBILE ≤ 768px
──────────────────────────────── */
@media (max-width: 768px) {

    * {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* HEADER */
    header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000;
        width: 100% !important;
        overflow: visible !important;
    }
    header nav {
        padding: 13px 16px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
    }
    header .logo {
        font-size: 14px !important;
        letter-spacing: 3px !important;
        flex-shrink: 0;
    }
    header ul { display: none !important; }

    /* CART */
    .cart-icon-btn {
        margin-left: auto;
        min-height: 44px;
        min-width: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .cart-icon-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* HERO */
    #profil.hero, .hero {
        min-height: 60vh !important;
        background-attachment: scroll !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        padding: 0 0 40px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .hero-text {
        padding: 0 20px !important;
        max-width: 100% !important;
    }
    .hero-eyebrow {
        font-size: 9px !important;
        letter-spacing: 2px !important;
        margin-bottom: 10px !important;
    }
    .hero-text h1 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }
    .hero-brand-italic {
        font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
        margin-bottom: 14px !important;
    }
    .hero-text p {
        font-size: 0.82rem !important;
        line-height: 1.65 !important;
        margin: 0 0 22px !important;
        max-width: 100% !important;
    }
    .hero-cta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    .hero-btn-primary {
        padding: 14px 24px !important;
        font-size: 10px !important;
        min-height: 48px;
        display: inline-flex !important;
        align-items: center;
    }
    .hero-link-secondary {
        font-size: 10px !important;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
    }

    /* SHOP */
    .shop-container {
        padding: 32px 12px 48px !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .shop-header {
        flex-direction: column !important;
        gap: 6px !important;
        margin-bottom: 20px !important;
        align-items: flex-start !important;
    }
    .shop-container h2 { font-size: 1.8rem !important; margin: 0 !important; }
    .shop-eyebrow { font-size: 9px !important; }
    .shop-lihat-semua { font-size: 9px !important; margin-top: 0 !important; }

    /* PRODUCT GRID */
    .product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .product-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    .pcard-img-wrap {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    .pcard-img-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .pcard-body { padding: 8px 9px 10px !important; }
    .pcard-lokasi { font-size: 7px !important; letter-spacing: 1px !important; margin-bottom: 2px !important; }
    .pcard-nama {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .pcard-desc { display: none !important; }
    .pcard-harga-wrap { margin-bottom: 4px !important; gap: 3px !important; flex-wrap: wrap !important; }
    .pcard-harga { font-size: 0.9rem !important; font-weight: 700 !important; }
    .pcard-harga-asli { font-size: 0.65rem !important; }
    .pcard-diskon-badge { font-size: 7px !important; padding: 1px 5px !important; }
    .pcard-rating-row { margin-bottom: 3px !important; }
    .pcard-stars { font-size: 9px !important; }
    .pcard-rating-txt { font-size: 7px !important; }
    .pcard-meta-row { margin-bottom: 6px !important; }
    .pcard-sisa-stok { font-size: 7px !important; padding: 2px 6px !important; }
    .pcard-terjual { font-size: 7px !important; }
    .pcard-actions { gap: 6px !important; }
    .pcard-btn {
        font-size: 8px !important;
        letter-spacing: 0.5px !important;
        padding: 9px 0 !important;
        min-height: 36px !important;
        border-radius: 6px !important;
    }
    .pcard-wish-btn {
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }
    .pcard-wish-btn svg { width: 13px !important; height: 13px !important; }
    .pcard-badge,
    .pcard-badge-bestseller,
    .pcard-badge-premium,
    .pcard-badge-new {
        font-size: 6px !important;
        padding: 2px 6px !important;
        letter-spacing: 1px !important;
    }
    .pcard-stok-habis {
        font-size: 7px !important;
        padding: 9px 6px !important;
        min-height: 36px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* MODAL */
    .modal:not(#imageLightbox) {
        padding: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
     .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .modal-content::before { display: none !important; }
    .modal-scroll-body {
        display: block !important;
        flex: 1 !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding-bottom: 72px !important;
    }
    .modal-scroll-body::-webkit-scrollbar { display: none !important; }
    .modal-left {
        width: 100% !important;
        max-width: 100vw !important;
        height: 450px !important;
        min-height: 450px !important;
        max-height: 450px !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .modal-main-media {
        flex: 1 !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .modal-main-media img {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .modal-main-media video { display: none !important; }
    .modal-gallery {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 7px 10px !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        background: rgba(42, 26, 14, 0.06) !important;
        min-height: 58px !important;
    }
    .modal-gallery::-webkit-scrollbar { display: none !important; }
    .modal-gallery-img {
        flex-shrink: 0 !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 6px !important;
    }
.modal-right {
    width: 100% !important;
    overflow: visible !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}
.modal-body {
    padding: 10px 14px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
}
    .modal-close-btn {
        position: absolute !important;
        top: 12px !important; right: 12px !important;
        width: 36px !important; height: 36px !important;
        background: rgba(42, 26, 14, 0.55) !important;
        border-radius: 50% !important;
        color: #fff !important;
        font-size: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        z-index: 20 !important;
    }
    .modal-badge-row { margin-bottom: 6px !important; }
    .modal-nama { font-size: 1.1rem !important; margin-bottom: 4px !important; }
    .modal-desc {
        font-size: 0.78rem !important;
        line-height: 1.6 !important;
        max-height: none !important;
        overflow-y: visible !important;
        flex-shrink: 0 !important;
    }
    .modal-divider { margin: 8px 0 !important; }
    .modal-harga { font-size: 1.6rem !important; }
    .modal-harga-row { margin-bottom: 8px !important; }
    .modal-stok-row { margin-bottom: 8px !important; }
    .modal-qty-row { padding: 8px 12px !important; margin-bottom: 8px !important; }
    .modal-qty-btn { width: 32px !important; height: 32px !important; font-size: 18px !important; }
    .modal-qty-num { height: 32px !important; line-height: 32px !important; }
    .varian-pill { padding: 9px 13px !important; font-size: 10px !important; min-height: 38px !important; }
    .varian-swatch { width: 30px !important; height: 30px !important; }

    /* MODAL BTN ROW — SHOPEE STYLE */
        .modal-btn-row {
            display: flex !important;
            flex-direction: row !important;
            gap: 0 !important;
            background: #fff !important;
            padding: 10px 16px !important;
            padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
            border-top: 1px solid #e8ddd4 !important;
            margin: 0 !important;
            flex-shrink: 0 !important;
            width: 100% !important;
            z-index: 9998 !important;
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
        }
.modal-btn-row .modal-btn-add-cart {
    flex: 1 !important;
    min-height: 52px !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    background: #fff !important;
    color: #2a1a0e !important;
    border: 1.5px solid #2a1a0e !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
    .modal-btn-row .modal-btn-buy-now {
        flex: 1.6 !important;
        min-height: 52px !important;
        border-radius: 0 !important;
        font-size: 10px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        background: #1a0f05 !important;
        color: #fff !important;
        border: none !important;
        letter-spacing: 1px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .modal-btn-row .modal-btn-disabled {
        flex: 1 !important;
        min-height: 52px !important;
        border-radius: 0 !important;
        font-size: 11px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* CART DRAWER */
    .cart-overlay { align-items: flex-end !important; }
    .cart-drawer {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 88vh !important;
        border-radius: 20px 20px 0 0 !important;
        transform: translateY(30px) !important;
        opacity: 0;
    }
    .cart-drawer.open { transform: translateY(0) !important; opacity: 1 !important; }
    .cart-drawer-header { padding: 16px 16px 12px !important; }
    .cart-items-list { padding: 10px 16px !important; }
    .cart-drawer-footer {
        padding: 14px 16px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .cart-item-img { width: 60px !important; height: 60px !important; }
    .cart-item-nama { font-size: 0.9rem !important; }
    .cart-item-harga { font-size: 0.76rem !important; }
    .qty-btn { width: 34px !important; height: 34px !important; font-size: 16px !important; }
    .cart-checkout-btn { min-height: 52px !important; font-size: 11px !important; border-radius: 8px !important; }
    .cart-clear-btn { min-height: 44px !important; font-size: 10px !important; }

    /* ABOUT */
    .about-section { flex-direction: column !important; gap: 0 !important; padding: 40px 16px 48px !important; overflow: hidden !important; }
    .about-left { position: relative !important; width: 100% !important; max-width: 100% !important; min-height: unset !important; overflow: visible !important; }
    .about-img-main { width: 100% !important; height: 230px !important; border-radius: 8px !important; }
    .about-img-main img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    .about-stat-card {
        position: relative !important; right: auto !important; bottom: auto !important;
        width: 100% !important; margin-top: 12px !important;
        border-radius: 8px !important; padding: 20px 24px !important; text-align: center !important;
    }
    .about-stat-number { font-size: 2.2rem !important; }
    .about-right { width: 100% !important; margin-top: 28px !important; }
    .about-heading { font-size: clamp(1.5rem, 5vw, 1.8rem) !important; }
    .about-desc { font-size: 0.84rem !important; }
    .about-features { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 20px !important; }
    .about-feature-card { padding: 14px 12px !important; }
    .about-feature-title { font-size: 11px !important; }
    .about-feature-desc { font-size: 0.74rem !important; }

    /* CONTACT */
    .contact-section { padding: 48px 16px 56px !important; overflow: hidden !important; }
    .contact-section h2 { font-size: 2rem !important; margin-bottom: 32px !important; }
    .contact-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
    .contact-left h3 { font-size: 1.3rem !important; }
    .contact-info-item { gap: 12px !important; margin-bottom: 16px !important; }
    .contact-info-icon { width: 36px !important; height: 36px !important; font-size: 15px !important; }
    .contact-form-group input,
    .contact-form-group select,
    .contact-form-group textarea { padding: 14px !important; border-radius: 8px !important; font-size: 0.9rem !important; }
    .contact-form-group textarea { min-height: 120px !important; }
    .contact-btn {
        width: 100% !important; min-height: 52px !important; font-size: 11px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        border-radius: 4px !important;
    }

    /* FOOTER */
    .footer-new { padding: 40px 16px 0 !important; width: 100% !important; overflow: hidden !important; }
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; padding-bottom: 40px !important; }
    .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; padding: 16px 0 !important; }
    .footer-brand-desc { max-width: 100% !important; }

    /* LIGHTBOX */
    #imageLightbox .modal-content {
        background: none !important; box-shadow: none !important;
        border-radius: 0 !important; max-height: 100vh !important;
        height: auto !important; flex-direction: column !important;
    }
    #imageLightbox #lightboxImg {
        max-height: 80vh !important; border-radius: 8px !important;
        width: auto !important; max-width: 100% !important;
    }

    /* WISH TOAST */
    #wish-toast {
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        font-size: 10px !important;
        padding: 10px 20px !important;
    }

    /* MOBILE DRAWER */
    .nav-drawer {
        display: flex !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important; bottom: 0 !important;
        width: 270px !important;
        background: #1a0f05 !important;
        z-index: 9999 !important;
        transform: translateX(-100%) !important;
        transition: transform .35s cubic-bezier(.4,0,.2,1) !important;
        flex-direction: column !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
    .nav-drawer.open { transform: translateX(0) !important; visibility: visible !important; }

    .hamburger-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 6px !important;
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }
    .hamburger-btn span {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: #c9a97a !important;
        border-radius: 2px !important;
        transition: all .3s ease !important;
        position: relative !important;
    }
    .hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
    .hamburger-btn.open span:nth-child(2) { opacity: 0 !important; }
    .hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

    .drawer-head {
        padding: 22px 20px 18px !important;
        border-bottom: 1px solid rgba(201,169,122,0.12) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-shrink: 0 !important;
    }
    .drawer-logo {
        font-family: 'Cormorant Garamond', serif !important;
        font-style: italic !important;
        font-size: 22px !important;
        font-weight: 600 !important;
        letter-spacing: 3px !important;
        color: #c9a97a !important;
        text-decoration: none !important;
    }
    .drawer-section-label {
        font-family: 'Raleway', sans-serif !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 2.5px !important;
        text-transform: uppercase !important;
        color: rgba(201,169,122,0.45) !important;
        padding: 8px 20px 4px !important;
        margin: 0 !important;
    }
    .drawer-nav { flex: 1 !important; padding: 4px 0 !important; overflow-y: auto !important; }
    .drawer-nav-item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 11px 16px !important;
        font-family: 'Raleway', sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        color: rgba(255,255,255,0.6) !important;
        text-decoration: none !important;
        transition: background .15s, color .15s !important;
        border-left: 3px solid transparent !important;
        margin: 2px 0 !important;
    }
    .drawer-nav-item:hover { background: rgba(201,169,122,0.07) !important; color: rgba(255,255,255,0.9) !important; }
    .drawer-nav-item.active { color: #c9a97a !important; background: rgba(201,169,122,0.1) !important; border-left-color: #c9a97a !important; }
    .drawer-nav-icon-box {
        width: 32px !important; height: 32px !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,0.06) !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        flex-shrink: 0 !important; color: inherit !important;
    }
    .drawer-nav-item.active .drawer-nav-icon-box { background: rgba(201,169,122,0.15) !important; }
    .drawer-badge {
        margin-left: auto !important;
        background: #c9a97a !important;
        color: #1a0f05 !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        padding: 2px 7px !important;
        border-radius: 20px !important;
        letter-spacing: 0.5px !important;
    }
    .drawer-divider-line { height: 1px !important; background: rgba(201,169,122,0.1) !important; margin: 10px 16px !important; }
    .drawer-foot {
        padding: 14px 16px 20px !important;
        border-top: 1px solid rgba(201,169,122,0.1) !important;
        flex-shrink: 0 !important;
    }
    .drawer-foot-wa {
        display: flex !important; align-items: center !important; justify-content: center !important;
        gap: 10px !important;
        background: #25D366 !important;
        color: #fff !important;
        text-decoration: none !important;
        padding: 13px 16px !important;
        border-radius: 10px !important;
        font-family: 'Raleway', sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        transition: background .15s !important;
        margin-bottom: 10px !important;
    }
    .drawer-foot-wa:hover { background: #1ebe5a !important; }
    .drawer-foot-copy {
        text-align: center !important;
        font-size: 10px !important;
        color: rgba(255,255,255,0.2) !important;
        margin: 0 !important;
        letter-spacing: 1px !important;
        font-family: 'Raleway', sans-serif !important;
    }
}

/* ────────────────────────────────
   BREAKPOINT ≤ 600px
──────────────────────────────── */
@media (max-width: 600px) {
    .hero-brand-track span { font-size: 8px !important; letter-spacing: 2px !important; padding: 0 12px !important; }
    .testimoni-section { padding: 48px 0 40px !important; overflow: hidden !important; }
    .testimoni-header { padding: 0 16px !important; }
    .testimoni-header h2 { font-size: 1.5rem !important; }
    .testimoni-label { font-size: 10px !important; }
    .testimoni-card { width: 260px !important; min-width: 260px !important; padding: 20px 16px !important; }
    .tcard-pesan { font-size: 0.83rem !important; }
    .tcard-avatar { width: 40px !important; height: 40px !important; font-size: 16px !important; }
    .tcard-info strong { font-size: 0.88rem !important; }
}

/* ────────────────────────────────
   BREAKPOINT ≤ 480px
──────────────────────────────── */
@media (max-width: 480px) {
    #profil.hero, .hero { min-height: 55vh !important; padding: 0 0 32px !important; }
    .hero-text { padding: 0 16px !important; }
        .modal-left {
            height: 380px !important;
            min-height: 380px !important;
            max-height: 380px !important;
        }
    .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ────────────────────────────────
   BREAKPOINT ≤ 360px
──────────────────────────────── */
@media (max-width: 360px) {
    .product-grid { gap: 7px !important; }
    .pcard-nama { font-size: 0.73rem !important; }
    .pcard-harga { font-size: 0.82rem !important; }
    .pcard-body { padding: 6px 7px 8px !important; }
}

/* ────────────────────────────────
   DESKTOP ≥ 769px — MODAL
──────────────────────────────── */
@media (min-width: 769px) {
    .modal:not(#imageLightbox) { align-items: center !important; justify-content: center !important; padding: 24px !important; }
    .modal:not(#imageLightbox) .modal-content {
        width: min(900px, 90vw) !important;
        height: auto !important;
        max-height: 88vh !important;
        border-radius: 16px !important;
        flex-direction: row !important;
        overflow: hidden !important;
    }
    .modal:not(#imageLightbox) .modal-content::before { display: none !important; }
    .modal:not(#imageLightbox) .modal-scroll-body {
        display: flex !important; flex-direction: row !important;
        width: 100% !important; overflow: visible !important; flex: 1 !important;
    }
    .modal:not(#imageLightbox) .modal-left {
        width: 45% !important; min-width: 45% !important;
        height: auto !important; min-height: 480px !important; max-height: 88vh !important;
        flex-shrink: 0 !important;
        border-radius: 16px 0 0 16px !important;
        display: flex !important; flex-direction: column !important;
    }
    .modal:not(#imageLightbox) .modal-main-media { flex: 1 !important; height: 0 !important; min-height: 0 !important; }
    .modal:not(#imageLightbox) .modal-right {
        width: 55% !important;
        overflow: hidden !important;
        max-height: 88vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .modal:not(#imageLightbox) .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
    .modal:not(#imageLightbox) .modal-btn-row {
        position: static !important;
        flex-shrink: 0 !important;
        width: 100% !important;
    }
}

/* ────────────────────────────────
   @SUPPORTS
──────────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
    .modal:not(#imageLightbox) { background: rgba(42, 26, 14, 0.8) !important; }
    .cart-overlay { background: rgba(42, 26, 14, 0.8) !important; }
    .hero-btn-primary { background: rgba(90, 45, 15, 0.97) !important; }
    .modal-close-btn { background: rgba(42, 26, 14, 0.8) !important; }
}

@supports (padding: env(safe-area-inset-bottom)) {
    .cart-drawer-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
}

@supports not (height: 100dvh) {
    .modal-content { height: 100vh !important; max-height: 100vh !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .testimoni-track { animation: none !important; }
    .hero-brand-track { animation: none !important; }
}