/* =============================================
   RESPONSIVE.CSS — Mobile & Tablet
   ============================================= */

/* ---- TABLET (max 1024px) ---- */
@media (max-width: 1024px) {

    /* Navbar */
    .nav-container { padding: 0 20px; }
    .nav-contact-btn { display: none; }

    /* Banner FMO */
    .fmo-banner { height: 520px; }
    .fmo-banner-title { font-size: 2.2rem; }

    /* Occasion banner */
    .occasion-banner { height: 360px; }
    .occasion-banner-content { padding: 28px 32px; }
    .occasion-banner-content h2 { font-size: 1.8rem; }

    /* Occasion grid */
    .occasion-products-grid { grid-template-columns: repeat(2, 1fr); }
    .occasion-products-grid .product-card:nth-child(2n) { border-right: none; }
    .occasion-products-grid .product-card:nth-child(2n+1) { border-right: 1px solid #e8e8e8; }

    /* Product detail — TETAP 2 kolom, hanya kurangi gap */
    .pd-wrap { gap: 36px; padding-top: 36px; }
}

/* ---- MOBILE (max 430px) ---- */
@media (max-width: 430px) {

    /* ---- Navbar ---- */
    .nav-container { height: 52px; padding: 0 14px; }
    .nav-btn-label { display: none; }
    .nav-menu-label { display: none; }
    .nav-logo-img { height: 25px; }
    .nav-contact-btn { display: none; }
    .nav-divider { margin: 0 10px; }
    .nav-search-inner { padding: 10px 14px; }

    /* ---- Sidebar ---- */
    .sidebar { width: 260px; }

    /* ---- Favorites modal ---- */
    .fav-modal { width: 100%; }

    /* ---- FMO Banner ---- */
    .fmo-banner { height: 300px; }
    .fmo-banner-content { padding: 20px 18px; }
    .fmo-banner-title { font-size: 1.5rem; }
    .fmo-banner-desc { display: none; }

    /* ---- FMO Products grid ---- */
    .fmo-products-grid,
    .fmo-products-hidden { grid-template-columns: repeat(2, 1fr); }
    .fmo-pcard:nth-child(4n) { border-right: 1px solid #e8e8e8; }
    .fmo-pcard:nth-child(2n) { border-right: none; }
    .fmo-pcard-info  { padding: 8px 10px 12px; }
    .fmo-pcard-name  { font-size: 0.78rem; }
    .fmo-pcard-label { font-size: 0.65rem; }
    .fmo-pcard-price-original { font-size: 0.65rem; }
    .fmo-pcard-price { font-size: 0.8rem; }

    /* ---- Occasion sections ---- */
    .occasion-banner { height: 220px; }
    .occasion-banner-content { padding: 16px 18px; }
    .occasion-banner-content h2 { font-size: 1.1rem; }
    .occasion-banner-content p { display: none; }
    .occasion-products-grid { grid-template-columns: repeat(2, 1fr); }
    .occasion-section { margin-bottom: 40px; }

    /* ---- Product detail — 1 kolom di mobile ---- */
    .pd-breadcrumb { padding: 10px 0; font-size: 0.7rem; }
    .pd-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 16px;
        padding-bottom: 36px;
    }
    .pd-name  { font-size: 1.3rem; }
    .pd-price { font-size: 1.15rem; }
    .pd-desc  { font-size: 0.83rem; }
    .pd-main-slide img { padding: 18px; }
    .pd-thumb { width: 50px; height: 50px; }
    .pd-badges { gap: 5px; }
    .pd-badge  { font-size: 0.63rem; padding: 4px 9px; }
    .pd-note-label { width: 68px; font-size: 0.6rem; }
    .pd-note-val   { font-size: 0.76rem; }
    .pd-marketplace-btns { flex-direction: column; }
    .pd-mp-btn { flex: none; width: 100%; justify-content: center; }
    .pd-wa-promo { flex-direction: column; gap: 10px; padding: 14px; }
    .pd-wa-btn   { width: 100%; justify-content: center; }

    /* ---- Reviews ---- */
    .pd-review-form { padding: 16px 14px; }
    .pd-reviews-wrap { padding-top: 28px; padding-bottom: 40px; }
    .pd-reviews-title { font-size: 1.1rem; }
    .pd-star-btn { font-size: 1.4rem; }
    .pd-review-submit { width: 100%; }

    /* ---- Footer ---- */
    .footer-content { grid-template-columns: 1fr; gap: 20px; }
    .footer { padding: 36px 0 14px; }

    /* ---- General ---- */
    .container { padding: 0 14px; }
    .btn-selengkapnya { padding: 11px 28px; font-size: 0.82rem; }
}