/* ==========================================================================
   /produk — PHONE layer (<= 767.98px)
   Loaded after products.min.css and products-desktop.css. Everything is scoped
   to the phone breakpoint; tablet/desktop are untouched. (2026-09-21)
   ========================================================================== */

/* ---- off-canvas filter panel (tablet AND phone) ----
   The preset pills were only styled inside the >=992px sidebar block, so in
   the off-canvas panel they rendered as bare grey browser buttons; and
   .form-input's near-white border vanished on a white panel. Not media-scoped
   because the panel is used from 0 up to 991px. */
#filterOffcanvas .filter-price-presets { display: flex; flex-wrap: wrap; gap: .45rem; }
#filterOffcanvas .filter-price-preset-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 38px;
    padding: .4rem .85rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#filterOffcanvas .filter-price-preset-btn.active { background: #111827; border-color: #111827; color: var(--color-action, #ffef33); font-weight: 700; }
#filterOffcanvas .form-input,
#filterOffcanvas .form-select {
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background-color: #fff;
    color: #111827;
}
#filterOffcanvas .form-input:focus,
#filterOffcanvas .form-select:focus { border-color: #111827; box-shadow: 0 0 0 3px rgba(255, 235, 0, .45); outline: 0; }

@media (max-width: 767.98px) {
    .marketplace-page { --m-surface: #fbf8ff; --m-container: #eeedf7; --m-container-high: #e8e7f1; --m-container-low: #f4f2fd; --m-ink: #1a1b22; --m-muted: #5f5e60; --m-yellow: #facc15; --m-red: #b91a24; --m-radius: .75rem; background: var(--m-surface); color: var(--m-ink); overflow-x:clip; }
    

    
    /* Mobile catalog specific overrides matching code.html grid */
    .marketplace-page .products-main { padding-bottom: 88px; padding-top: 12px; }
    .marketplace-page .mref-bottom-nav { display: none !important; }
    .marketplace-page .mref-load-more-btn { width:100%; padding:12px 16px; border:0; border-radius:12px; background:#e8e7f1; color:#1a1b22; font-size:12px; font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.05); }
    .marketplace-page .mref-load-more-btn i { margin-right:6px; }
    .marketplace-page .produk-mobile-catalog-heading { display:none; } /* replaced by filter/sort subheader */
    .marketplace-page .products-toolbar { display:none !important; }
    
    .marketplace-page .products-layout { display:block; }
    .marketplace-page .products-main { width:100%; }

    /* Catalog subheader: title + count left, native sort select right */
    .marketplace-page .mref-catalog-subheader { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 12px 10px; margin-top:0; }
    .marketplace-page .mref-catalog-title { min-width:0; }
    .marketplace-page .mref-catalog-subheader strong { display:block; font-size:17px; line-height:1.2; font-weight:800; letter-spacing:-.01em; color:var(--m-ink); }
    .marketplace-page .mref-catalog-subheader small { display:block; margin-top:2px; color:var(--m-muted); font-size:12px; line-height:1.3; }
    .marketplace-page .mref-sort-pill { position:relative; flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:38px; margin:0; padding:0 12px; border:1px solid #e4e3ec; border-radius:12px; background:#fff; color:var(--m-ink); font-size:12.5px; font-weight:700; box-shadow:0 1px 2px rgba(26,27,34,.04); cursor:pointer; }
    .marketplace-page .mref-sort-pill i { font-size:12px; color:var(--m-muted); pointer-events:none; }
    .marketplace-page .mref-sort-pill select { appearance:none; -webkit-appearance:none; max-width:128px; border:0; background:transparent; color:inherit; font:inherit; padding:0; outline:0; cursor:pointer; text-overflow:ellipsis; }
    .marketplace-page .mref-sort-pill:focus-within { border-color:var(--m-ink); }

    /* Quick filters: Filter button | divider | toggle pills (real links) */
    .marketplace-page .mref-filter-pills { display:flex; align-items:center; gap:8px; overflow-x:auto; margin-bottom:12px; padding:0 12px 2px; scrollbar-width:none; }
    .marketplace-page .mref-filter-pills::-webkit-scrollbar { display:none; }
    .marketplace-page .mref-filter-main,
    .marketplace-page .mref-quick-pill { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border:1px solid #e4e3ec; border-radius:999px; background:#fff; color:var(--m-ink); font-size:12.5px; font-weight:700; white-space:nowrap; text-decoration:none; transition:background .15s, border-color .15s, color .15s; }
    .marketplace-page .mref-filter-main { border-color:var(--m-ink); background:var(--m-ink); color:#fff; }
    .marketplace-page .mref-filter-main i { color:var(--m-yellow); }
    .marketplace-page .mref-filter-num { min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--m-yellow); color:var(--m-ink); font-size:10.5px; font-weight:800; line-height:18px; text-align:center; }
    .marketplace-page .mref-filter-divider { flex:0 0 1px; height:20px; background:#e4e3ec; }
    .marketplace-page .mref-quick-pill i { font-size:12px; color:var(--m-muted); }
    .marketplace-page .mref-quick-pill .bi-star-fill { color:#f59e0b; }
    .marketplace-page .mref-quick-pill.is-active { border-color:var(--m-yellow); background:#fef9c3; color:#713f12; }
    .marketplace-page .mref-quick-pill.is-active i { color:#a16207; }
    .marketplace-page .mref-quick-pill .mref-quick-x { font-size:10px; }
    .marketplace-page .mref-filter-main:active,
    .marketplace-page .mref-quick-pill:active,
    .marketplace-page .mref-sort-pill:active { transform:scale(.97); }
    .marketplace-page .load-more-wrapper { display:block; margin:16px 12px 0 !important; }
    .marketplace-page .produk-end-m { margin:24px 12px; }
    /* Grid */
    .marketplace-page .products-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; padding: 0 12px; }
    
    /* Product Card reference match */
    .marketplace-page .product-card { 
        min-width: 0; 
        overflow: hidden; 
        border: 1px solid #eeedf7; 
        border-radius: .75rem; 
        background: #ffffff; 
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 4px;
    }
    
    /* Image Section */
    .marketplace-page .product-card-image { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: .5rem; overflow: hidden; background: #e8e7f1; flex-shrink:0; }
    .marketplace-page .product-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
    
    /* Badges inside Image */
    .marketplace-page .product-card-image .badge-diskon,
    .marketplace-page .product-card-image .badge-flash-sale { position: absolute; top: 6px; left: 6px; background: #b91a24; color: #ffffff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border:0; line-height: 12px; z-index:2; }
    
    .marketplace-page .product-card-image .badge-gratis { position: absolute; top: 6px; left: 6px; background: #facc15; color: #1a1b22; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border:0; line-height: 12px; z-index:2; }
    
    .marketplace-page .product-card-image .badge-new { position: absolute; top: 6px; left: 6px; background: #22c55e; color: #ffffff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border:0; line-height: 12px; z-index:2; }

    /* Fix multiple badges stacking */
    .marketplace-page .product-card-image .product-badges-right { display:block; position:absolute; top:6px; left:6px; z-index:2; }
    .marketplace-page .product-card-image .product-badges-right .badge-diskon { position:static; }
    .marketplace-page .product-card-image > .product-badges:not(.product-badges-right) { position:absolute; top:6px; left:6px; z-index:2; display:flex; gap:3px; flex-wrap:wrap; max-width:70%; }
    .marketplace-page .product-card-image > .product-badges:not(.product-badges-right) .badge { position:static; }
    
    /* Type Badge (Physical/Digital) */
    .marketplace-page .product-type-badge { position: absolute; bottom: 6px; left: 6px; font-size: 9px; padding: 2px 8px; border-radius: 999px; display: flex; align-items: center; gap: 4px; font-weight: 600; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); z-index:2; }
    .marketplace-page .product-card[data-type="digital"] .product-type-badge { background: #facc15; color: #1a1b22; }
    .marketplace-page .product-card[data-type="physical"] .product-type-badge { background: rgba(47,48,56,0.8); color: #f1effa; backdrop-filter: blur(4px); }
    .marketplace-page .product-card[data-type="service"] .product-type-badge { background: #10b981; color: #ffffff; }
    
    /* Wishlist Button */
    .marketplace-page .product-card-wishlist-form { position: static !important; margin: 0 !important; }
    .marketplace-page .product-card-wishlist-btn { position: absolute !important; top: 6px !important; right: 6px !important; bottom: auto !important; left: auto !important; width: 28px !important; height: 28px !important; border-radius: 999px; background: #ffffff !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; display: flex !important; align-items: center; justify-content: center; z-index: 5; border:0; font-size:16px; transition: transform 0.2s; }
    .marketplace-page .product-card-wishlist-btn:active { transform: scale(0.9); }
    
    /* Share Button Hidden on mobile per ref */
    .marketplace-page .product-share { display: none; }
    
    .marketplace-page .product-card-body { padding: 4px 4px 2px; }
    .marketplace-page .product-category-text { font-size: 10px; color: #5f5e60; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 12px; font-weight:700; letter-spacing:0.02em; }
    
    .marketplace-page .product-title { font-size: 13px; font-weight: 700; color: #1a1b22; line-height: 18px; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing:-0.01em; }
    .marketplace-page .product-title a { color: inherit; text-decoration: none; }
    
    /* Meta stats */
    .marketplace-page .product-meta { flex-direction:row; align-items: center; gap: 4px; margin-top: 4px; color: #5f5e60; padding:0; border:0; justify-content:flex-start; min-height:auto; }
    .marketplace-page .product-meta-left { flex-direction:row; gap:4px; align-items:center; }
    .marketplace-page .product-rating { display:flex; align-items:center; gap:2px; font-size: 11px; font-weight: 600; color:#1a1b22; }
    .marketplace-page .product-rating i { font-size: 14px; color: #facc15; }
    .marketplace-page .product-sold-count { font-size: 10px; color: #5f5e60; display:inline-block; font-weight:400; padding:0; background:transparent; border-radius:0; }
    .marketplace-page .product-sold-count i { display:none; }
    .marketplace-page .pdp-rating-new { display:flex; align-items:center; gap:4px; font-size: 10px; font-weight: 700; color: #735c00; background:transparent; padding:0; border-radius:0; }
    .marketplace-page .pdp-rating-new i { font-size: 14px; }
    .marketplace-page .product-format { display:none; } /* Hidden on mobile */
    .marketplace-page .product-tagline { display:none; } /* Hidden on mobile */
    .marketplace-page .flash-sale-card-timer { display:none; } /* Hidden on mobile per ref, but might need logic if needed */

    /* Price Row & Cart */
    .marketplace-page .product-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 6px; border-top: 1px solid #eeedf7; min-height:auto; background:transparent; padding-bottom:0; }
    .marketplace-page .product-price { display: flex; flex-direction: column; align-items:flex-start; }
    .marketplace-page .price-original { font-size: 11px; color: #5f5e60; text-decoration: line-through; line-height: 14px; font-weight: 400; opacity:1; }
    .marketplace-page .price-current { font-size: 16px; font-weight: 800; color: #1a1b22; line-height: 20px; letter-spacing: -0.01em; }
    .marketplace-page .price-free { font-size: 16px; font-weight: 800; color: #1a1b22; }
    
    .marketplace-page .product-mobile-cart-btn { width: 32px; height: 32px; border-radius: 999px; background: #2f3038; color: #f1effa; display: flex !important; align-items: center; justify-content: center; border:0; transition: transform 0.2s; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
    .marketplace-page .product-mobile-cart-btn:active { transform: scale(0.95); }
    .marketplace-page .product-mobile-cart-btn i { font-size: 17px; color: #facc15; }
    .marketplace-page .product-mobile-cart-btn.is-free i { color: #f1effa; } /* download icon color */
    .marketplace-page .product-card-image { aspect-ratio: 1; background: var(--m-container-high); }
    .marketplace-page .product-card-image .product-thumb { width: 100%; height: 100%; object-fit: cover; }
    .marketplace-page .product-card-body { padding: 4px 4px 2px; }
    .marketplace-page .product-category-link { display: block; overflow: hidden; color: var(--m-muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
    .marketplace-page .product-title { min-height: 36px; margin: 2px 0; font-size: 13px; line-height: 18px; }
    .marketplace-page .product-meta { min-height: 18px; font-size: 10px; }
    .marketplace-page .product-price-row { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--m-container); }
    .marketplace-page .price-current { font-size: 15px; font-weight: 800; }
    .marketplace-page .price-original { display: block; font-size: 10px; }
    .marketplace-page .product-mobile-cart-btn { display: inline-flex !important; width: 30px; height: 30px; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: #2f3038; color: var(--m-yellow); }
    .marketplace-page .toolbar-filter-btn, .marketplace-page .sort-dropdown .form-select { min-height: 40px; border-radius: 999px; }
    .marketplace-page .produk-mobile-catbar { display: none; }
    .marketplace-page .produk-end-m { margin: 24px 12px; }

    /* ------------------------------------------------------------------
       0. PHONE CHROME (2026-10-08): sticky topbar + search, then segment,
          category chips, value banner and promo carousel in normal flow.
          Sticky needs .marketplace-page to use overflow-x:clip (hidden would
          make it the scroll container and kill position:sticky).
       ------------------------------------------------------------------ */
    /* body.no-horizontal-scroll's overflow-x:hidden turns <body> into a scroll
       box that never scrolls, which also breaks sticky; clip trims the same
       overflow without that side effect (<html> still clips the viewport). */
    body.no-horizontal-scroll:has(.marketplace-page) { overflow-x:clip; }
    .mref-head { position:sticky; top:0; z-index:1030; background:rgba(251,248,255,.9); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); border-bottom:1px solid var(--m-container); }
    .mref-topbar { display:flex; align-items:center; justify-content:space-between; gap:8px; height:52px; padding:0 10px 0 16px; }
    .mref-brand { display:inline-flex; align-items:center; min-width:0; }
    .mref-brand img { display:block; width:auto; height:24px; max-width:150px; object-fit:contain; }
    .mref-actions { display:flex; align-items:center; gap:2px; }
    .mref-action { position:relative; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; color:var(--m-ink); font-size:20px; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background-color .15s; }
    .mref-action:active { background:var(--m-container-high); color:var(--m-ink); }
    .mref-action-count { position:absolute; top:5px; right:3px; min-width:18px; height:18px; padding:0 4px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:var(--m-yellow); color:var(--m-ink); font-size:10px; font-weight:800; line-height:1; box-shadow:0 0 0 2px var(--m-surface); }
    .mref-action-profile i { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:var(--m-ink); color:var(--m-yellow); font-size:16px; }

    .mref-search-row { display:flex; gap:8px; padding:2px 12px 10px; }
    .mref-search { flex:1; min-width:0; display:flex; align-items:center; gap:10px; height:44px; margin:0; padding:0 14px; border:1px solid var(--m-container-high); border-radius:14px; background:#fff; box-shadow:0 1px 2px rgba(26,27,34,.04); transition:border-color .15s, box-shadow .15s; }
    .mref-search:focus-within { border-color:var(--m-ink); box-shadow:0 0 0 3px rgba(250,204,21,.45); }
    .mref-search > i { color:var(--m-muted); font-size:16px; }
    /* 16px keeps iOS Safari from zooming the page on focus */
    .mref-search input { flex:1; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; color:var(--m-ink); font-size:16px; }
    .mref-search input::placeholder { color:#8a8994; font-size:14px; }
    .mref-filter-btn { position:relative; flex:0 0 44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:14px; background:var(--m-ink); color:var(--m-yellow); font-size:18px; -webkit-tap-highlight-color:transparent; transition:transform .15s; }
    .mref-filter-btn:active { transform:scale(.94); }
    .mref-filter-count { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:var(--m-yellow); color:var(--m-ink); font-size:10px; font-weight:800; line-height:1; box-shadow:0 0 0 2px var(--m-surface); }

    .mref-browse { padding-top:12px; }
    .mref-segment { --seg-i:0; position:relative; display:grid; grid-template-columns:repeat(4, 1fr); margin:0 12px; padding:4px; border-radius:14px; background:var(--m-container); }
    .mref-segment-thumb { position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 4); border-radius:10px; background:#fff; box-shadow:0 1px 3px rgba(26,27,34,.12), 0 1px 1px rgba(26,27,34,.04); transform:translateX(calc(var(--seg-i) * 100%)); transition:transform .3s cubic-bezier(.3,.7,.2,1); }
    .mref-segment-btn { position:relative; z-index:1; height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:10px; background:transparent; color:var(--m-muted); font-size:13px; font-weight:600; -webkit-tap-highlight-color:transparent; transition:color .2s; }
    .mref-segment-btn i { font-size:13px; }
    .mref-segment-btn.is-active { color:var(--m-ink); font-weight:800; }
    .mref-segment-btn.is-active i { color:#b45309; }

    .mref-chips { display:flex; gap:8px; overflow-x:auto; padding:12px 12px 2px; scroll-padding:0 12px; scrollbar-width:none; }
    .mref-chips::-webkit-scrollbar { display:none; }
    .mref-chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px 0 11px; border:1px solid var(--m-container-high); border-radius:999px; background:#fff; color:var(--m-ink); font-size:12.5px; font-weight:600; white-space:nowrap; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background-color .15s, border-color .15s; }
    .mref-chip:active { background:var(--m-container-low); }
    .mref-chip .msh-category-icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; object-fit:contain; color:var(--m-muted); font-size:15px; line-height:1; }
    .mref-chip.is-active { border-color:var(--m-ink); background:var(--m-ink); color:#fff; }
    .mref-chip.is-active .msh-category-icon { color:var(--m-yellow); }

    /* Promo carousel: header row (title | dots + counter) above a framed,
       native scroll-snap track. Art is 1200x242. */
    .mref-promos { padding:16px 12px 6px; }
    .msh-banner-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
    .msh-banner-title { display:inline-flex; align-items:center; gap:6px; color:var(--m-ink); font-size:13px; font-weight:800; letter-spacing:-.005em; }
    .msh-banner-title i { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:7px; background:var(--m-yellow); color:var(--m-ink); font-size:11px; }
    .msh-banner-nav { display:flex; align-items:center; gap:10px; }
    .msh-banner-dots { display:flex; align-items:center; gap:4px; }
    .msh-banner-dot { position:relative; width:6px; height:6px; padding:0; border:0; border-radius:999px; background:#d6d4e0; transition:width .25s ease, background-color .25s ease; }
    .msh-banner-dot::after { content:""; position:absolute; inset:-9px -3px; } /* bigger tap target */
    .msh-banner-dot.is-active { width:16px; background:var(--m-ink); }
    .msh-banner-count { min-width:34px; padding:2px 7px; border-radius:999px; background:var(--m-container); color:var(--m-muted); font-size:10.5px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
    .msh-banner-count b { color:var(--m-ink); }
    .msh-banner-track { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:14px; }
    .msh-banner-track::-webkit-scrollbar { display:none; }
    .msh-banner-slide { flex:0 0 100%; scroll-snap-align:center; overflow:hidden; border-radius:14px; background:var(--m-container-high); box-shadow:0 0 0 1px rgba(26,27,34,.06), 0 8px 18px -12px rgba(26,27,34,.45); }
    .msh-banner-slide img { display:block; width:100%; height:auto; aspect-ratio:1200 / 242; object-fit:cover; }

    /* Segment switcher filter (set by JS on .marketplace-page) */
    .marketplace-page[data-segment="digital"] #productGrid .product-card:not([data-type="digital"]),
    .marketplace-page[data-segment="physical"] #productGrid .product-card:not([data-type="physical"]),
    .marketplace-page[data-segment="service"] #productGrid .product-card:not([data-type="service"]) { display:none; }
    .marketplace-page[data-segment="digital"] #productGrid:not(:has(.product-card[data-type="digital"]))::before,
    .marketplace-page[data-segment="physical"] #productGrid:not(:has(.product-card[data-type="physical"]))::before,
    .marketplace-page[data-segment="service"] #productGrid:not(:has(.product-card[data-type="service"]))::before { grid-column:1 / -1; padding:28px 16px; border:1px dashed var(--m-container-high); border-radius:14px; color:var(--m-muted); font-size:13px; text-align:center; }
    .marketplace-page[data-segment="digital"] #productGrid:not(:has(.product-card[data-type="digital"]))::before { content:"Belum ada produk digital di daftar ini."; }
    .marketplace-page[data-segment="physical"] #productGrid:not(:has(.product-card[data-type="physical"]))::before { content:"Belum ada produk fisik di daftar ini."; }
    .marketplace-page[data-segment="service"] #productGrid:not(:has(.product-card[data-type="service"]))::before { content:"Belum ada layanan di daftar ini."; }

    @media (prefers-reduced-motion: reduce) {
        .msh-banner-track { scroll-behavior:auto; }
        .mref-segment-thumb { transition:none; }
    }

    /* ------------------------------------------------------------------
       1. SORT + FILTER
       The toolbar used to be d-none below 768px and the filter off-canvas had
       no trigger at all on phones, so price/rating/format filters and sorting
       were unreachable. Now: one sticky row, Filter (with active-count badge)
       + Urutkan, both real 44px tap targets.
       ------------------------------------------------------------------ */
    .products-toolbar {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: .5rem .6rem;
        margin: 0 0 .85rem;
        background: #fff;
        border: 1px solid var(--color-border, #e5e7eb);
        border-radius: 14px;
        box-shadow: 0 2px 10px -6px rgba(15, 23, 42, .18);
    }
    .products-toolbar .toolbar-left,
    .products-toolbar .toolbar-view-toggle { display: none; } /* the count lives in the heading above */
    .products-toolbar .toolbar-right {
        width: 100%;
        margin: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: .5rem;
    }

    .toolbar-filter-btn {
        display: inline-flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        min-height: 44px;
        padding: .5rem .9rem;
        border: 1px solid var(--color-border, #e5e7eb);
        border-radius: 12px;
        background: #fff;
        color: #111827;
        font-size: .95rem;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .toolbar-filter-btn:active { background: #f3f4f6; }
    .toolbar-filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 .35rem;
        border-radius: 999px;
        background: #111827;
        color: var(--color-action, #ffef33);
        font-size: .72rem;
        font-weight: 800;
    }

    .products-toolbar .sort-dropdown { flex: 1 1 0; width: auto; position: relative; display: flex; align-items: center; }
    .products-toolbar .sort-dropdown .sort-icon {
        display: block;
        position: absolute;
        left: .85rem;
        z-index: 1;
        pointer-events: none;
        color: #111827;
        font-size: 1rem;
    }
    .products-toolbar .sort-dropdown .form-select {
        width: 100%;
        max-width: none;
        min-height: 44px;
        padding: .5rem 2.1rem .5rem 2.4rem;
        border: 1px solid var(--color-border, #e5e7eb);
        border-radius: 12px;
        background-color: #fff;
        color: #111827;
        font-size: 16px; /* >=16px stops iOS Safari zooming the page when the select opens */
        font-weight: 600;
    }

    /* pinned state: sits under the 60px phone header, not the 72px navbar */
    .products-toolbar.toolbar-pinned {
        top: 60px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .3);
    }

    /* ---- filter drawer (opened by the Filter button) ----
       Price / type / rating / format / software come first; the long category
       list (already one tap away in the bottom bar) moves to the end, the
       redundant search box is hidden (its value still submits), and the apply
       row stays pinned to the bottom so it's never a long scroll away. */
    #filterOffcanvas { width: min(92vw, 400px); }
    #filterOffcanvas .offcanvas-body { display: flex; flex-direction: column; padding: 0; }
    #filterOffcanvas .filter-form { display: flex; flex-direction: column; flex: 1 0 auto; padding: 1rem 1rem 0; }
    #filterOffcanvas .filter-form > .filter-section.d-lg-none { display: none; }
    #filterOffcanvas .filter-form > fieldset.filter-section { order: 20; }
    #filterOffcanvas .filter-form > .filter-actions {
        order: 30;
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin: auto -1rem 0;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--color-border, #e5e7eb);
        box-shadow: 0 -8px 18px -12px rgba(15, 23, 42, .25);
    }
    #filterOffcanvas .filter-actions { display: flex; flex-direction: row; align-items: stretch; gap: .6rem; }
    #filterOffcanvas .filter-actions .btn { width: auto !important; flex: 1 1 0; margin-top: 0 !important; min-height: 46px; }
    #filterOffcanvas .filter-actions .btn-primary { flex: 1.6 1 0; }
    #filterOffcanvas .price-inputs .form-input { min-height: 44px; font-size: 16px; }
    #filterOffcanvas .form-select { min-height: 44px; font-size: 16px; }
    #filterOffcanvas .filter-option a { min-height: 44px; }

    /* ------------------------------------------------------------------
       3. BOTTOM CATEGORY BAR: Digital | Fisik switch
       ------------------------------------------------------------------ */
    .produk-mobile-catbar-groupswrap {
        display: none !important;
        left: 0;
        z-index: 2;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin-left: -0.85rem;
        padding: 0 .55rem 0 .85rem;
        background: linear-gradient(90deg, #fff 88%, rgba(255, 255, 255, 0));
    }
    .produk-mobile-catbar-groups {
        display: inline-flex;
        padding: 3px;
        border-radius: 999px;
        background: #f0f1f3;
    }
    .produk-mobile-catbar-group {
        min-height: 36px;
        padding: .3rem .8rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #4b5563;
        font-size: 12px;
        font-weight: 700;
        -webkit-tap-highlight-color: transparent;
        transition: background .15s ease, color .15s ease;
    }
    .produk-mobile-catbar-group.is-active { background: #111827; color: var(--color-action, #ffef33); }
    .produk-mobile-catbar-chip[hidden] { display: none !important; }

    /* ------------------------------------------------------------------
       3b. CARD SHELL — softer, less boxy
       Before: 5px corners, an 8px white gutter framing the image on every
       side (dated "photo in a frame" look), flat grey text throughout, and
       zero tactile feedback on tap. Now: the image bleeds edge-to-edge to
       a bigger, asymmetric radius (one soft corner left slightly sharp —
       reads as designed, not a generic rounded-rect), a two-layer shadow
       with a little depth instead of a flat line, a light press-scale on
       tap since the whole card is already one big tap target, and colour
       brought back into the category chip (same 5-colour rotation already
       used for .reco-carousel / tablet+ #productGrid, just extended to
       phones) and the rating pill so the grid doesn't read as monochrome.
       ------------------------------------------------------------------ */
    #productGrid .product-card {
        padding: 0;
        border: 1px solid rgba(15, 23, 42, .06);
        border-radius: 20px 20px 20px 7px;
        box-shadow: 0 12px 26px -18px rgba(15, 23, 42, .4), 0 2px 8px -3px rgba(15, 23, 42, .08);
        transition: transform .15s ease, box-shadow .15s ease;
    }
    #productGrid .product-card:active {
        transform: scale(.97);
        box-shadow: 0 4px 14px -10px rgba(15, 23, 42, .3);
    }
    #productGrid .product-card:active .product-thumb { transform: scale(1.045); }
    #productGrid .product-card-body { padding: .75rem .8rem .85rem; }

    #productGrid .product-card-image { background: #f6f6f6; }
    #productGrid .product-card-image .product-thumb { object-fit: contain; }
    #productGrid .product-card-image .product-badges-right {
        right: .4rem;
        left: auto;
    }

    #productGrid .badge { border-radius: 10px 10px 10px 3px; }

    #productGrid .product-category-link {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        margin-bottom: .3rem;
        padding: .2rem .55rem;
        border-radius: 999px 999px 999px 4px;
        background: rgba(17, 24, 39, .07);
        font-weight: 700;
    }
    #productGrid .product-card:nth-of-type(5n+1) .product-category-link { background: rgba(5, 150, 105, .1); color: #059669; }
    #productGrid .product-card:nth-of-type(5n+2) .product-category-link { background: rgba(2, 132, 199, .1); color: #0284c7; }
    #productGrid .product-card:nth-of-type(5n+3) .product-category-link { background: rgba(147, 51, 234, .1); color: #9333ea; }
    #productGrid .product-card:nth-of-type(5n+4) .product-category-link { background: rgba(217, 119, 6, .1); color: #d97706; }
    #productGrid .product-card:nth-of-type(5n+5) .product-category-link { background: rgba(225, 29, 72, .1); color: #e11d48; }

    #productGrid .product-rating {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        padding: .1rem .45rem;
        border-radius: 999px;
        background: rgba(255, 200, 0, .16);
    }
    #productGrid .product-rating i { color: #f59e0b; }
    #productGrid .price-current { color: #0b0b0b; font-weight: 800; letter-spacing: -.01em; }

    @media (prefers-reduced-motion: reduce) {
        #productGrid .product-card,
        #productGrid .product-card:active,
        #productGrid .product-card:active .product-thumb { transition: none; transform: none; }
    }

    /* ------------------------------------------------------------------
       4. READABILITY + TAP TARGETS
       Measured before: category 8.7px, sold 9.2px, struck price 9.5px, title
       11.9px (smaller than the price), grey #9a9a9a on white ~2.8:1 (WCAG AA
       needs 4.5:1), share button 26px, header cart 20x31px.
       ------------------------------------------------------------------ */
    .marketplace-page { --color-text-muted: #6b7280; } /* 4.8:1 on white */

    #productGrid .product-category-link,
    .product-card .product-category-link { font-size: 10.5px; }
    #productGrid .product-title,
    .product-card .product-title { font-size: 13px; line-height: 1.35; }
    #productGrid .product-title-text {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    #productGrid .product-rating span,
    .product-card .product-rating span { font-size: 12px; }
    #productGrid .product-sold-count,
    .product-card .product-sold-count { font-size: 11px; }
    #productGrid .price-current,
    .product-card .price-current { font-size: 14.5px; }
    #productGrid .price-original,
    .product-card .price-original { font-size: 11px; }
    #productGrid .pdp-rating-new,
    .product-card .pdp-rating-new { font-size: 11.5px; }
    .product-card .product-rating span,
    .product-card .product-sold-count,
    .product-card .price-original { color: #6b7280; }

    /* Share and wishlist keep a compact 26px visual while retaining a 44px
       touch target on product cards. */
    .product-card .product-share-btn,
    .product-card .product-card-wishlist-btn {
        position: relative;
    }
    .product-card .product-share-btn::after,
    .product-card .product-card-wishlist-btn::after {
        content: '';
        position: absolute;
        inset: -9px;
    }
    .product-card .product-card-wishlist-btn {
        width: 26px !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
        background: rgba(255, 255, 255, .95);
        backdrop-filter: blur(8px);
        border: 0;
        box-shadow: var(--shadow-md);
        font-size: .7rem;
    }
    .product-card-image .product-card-wishlist-form,
    .product-card-image > .product-card-wishlist-btn {
        bottom: .4rem !important;
    }

    /* bottom category bar labels */
    .produk-mobile-catbar-chip { font-size: 10.5px; gap: .25rem; }
    .produk-mobile-catbar-chip.active { font-weight: 700; }

    /* ------------------------------------------------------------------
       5. QUICK-ADD: cart button next to the price
       The grid had zero way to add to cart without opening the PDP first
       (the desktop hover overlay's cart form is display:none below 992px,
       and a .btn-card-cart rule already existed dead in products.min.css
       for markup product_card.php never actually rendered). Turns the
       price row into price-left / button-right so the button can never
       overlap wrapped price text, instead of overlaying it absolutely.
       ------------------------------------------------------------------ */
    #productGrid .product-price-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: .5rem;
    }
    #productGrid .product-price { flex: 1 1 auto; min-width: 0; margin: 0; }
    #productGrid .product-mobile-cart-btn {
        display: flex !important;
        position: relative; /* .product-title > a::after covers the whole card (z-index: 1) to make the title a full-card tap target — this needs to sit above it or every tap here would open the PDP instead */
        z-index: 2;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: linear-gradient(155deg, #262f3d 0%, #0a0a0a 100%);
        color: var(--color-action, #ffeb00);
        font-size: 1rem;
        box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease, background .2s ease;
    }
    #productGrid .product-mobile-cart-btn:active {
        transform: scale(.86);
        box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .5), 0 0 0 5px rgba(255, 235, 0, .22);
    }
    #productGrid .product-mobile-cart-btn:disabled { opacity: .75; }
    #productGrid .product-mobile-cart-btn:disabled i.bi-arrow-repeat { display: inline-block; animation: cartQuickAddSpin .6s linear infinite; }
    #productGrid .product-mobile-cart-btn.is-done {
        background: linear-gradient(155deg, #10b981 0%, #047857 100%);
        color: #fff;
        animation: cartQuickAddPop .45s cubic-bezier(.34, 1.56, .64, 1);
    }
    @keyframes cartQuickAddSpin { to { transform: rotate(360deg); } }
    @keyframes cartQuickAddPop {
        0% { transform: scale(.6); }
        55% { transform: scale(1.2); }
        100% { transform: scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
        #productGrid .product-mobile-cart-btn.is-done { animation: none; }
        #productGrid .product-mobile-cart-btn:disabled i.bi-arrow-repeat { animation: none; }
    }

    /* ------------------------------------------------------------------
       6a. TRUST STRIP: not shown on phones (tablet/desktop only, styled in
       products-desktop.css). Hidden explicitly because the markup is shared.
       ------------------------------------------------------------------ */
    .produk-trust-strip { display: none; }

    /* ------------------------------------------------------------------
       6b. PALING LARIS — dark leaderboard panel + snap carousel (.bsx-*)
       products/index.php forces `.marketplace-page *` to a white background
       with !important, so every background here is re-asserted with a
       higher-specificity `.marketplace-page .bsx…` selector + !important.
       ------------------------------------------------------------------ */
    .bsx { padding: 1.25rem 12px .25rem; }
    .marketplace-page .bsx.produk-bestseller-m * { background: transparent !important; }
    .marketplace-page .bsx .bsx-panel {
        background:
            radial-gradient(110% 55% at 100% 0%, rgba(250, 204, 21, .22), transparent 62%),
            radial-gradient(90% 45% at 0% 100%, rgba(239, 68, 68, .16), transparent 60%),
            #111218 !important;
    }
    .bsx-panel {
        position: relative;
        padding: 18px 0 16px;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 18px 40px -22px rgba(17, 18, 24, .7);
    }
    .bsx-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 0 16px; }
    .marketplace-page .bsx .bsx-live { background: rgba(250, 204, 21, .12) !important; }
    .bsx-live {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .3rem .7rem;
        border: 1px solid rgba(250, 204, 21, .35);
        border-radius: 999px;
        color: #facc15;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .marketplace-page .bsx .bsx-live-dot { background: #facc15 !important; }
    .bsx-live-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(250, 204, 21, .6);
        animation: bsx-pulse 1.8s ease-out infinite;
    }
    @keyframes bsx-pulse {
        0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, .6); }
        80%, 100% { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0); }
    }
    .bsx-all {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        min-height: 36px;
        font-size: 12.5px;
        font-weight: 700;
        color: rgba(255, 255, 255, .78);
        text-decoration: none;
    }
    .bsx-all:active { color: #facc15; }
    .bsx-title {
        margin: .7rem 16px .25rem;
        font-size: 22px;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -.02em;
        color: #fff;
    }
    .bsx-title span { color: #facc15; }
    .bsx-title i { color: #fb923c; font-size: .9em; }
    .bsx-sub { margin: 0 16px 14px; font-size: 12.5px; line-height: 1.45; color: #a1a1aa; }

    .bsx-track {
        display: flex;
        gap: 12px;
        padding: 2px 16px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .bsx-track::-webkit-scrollbar { display: none; }
    .marketplace-page .bsx .bsx-card { background: #fff !important; }
    .bsx-card {
        position: relative;
        flex: 0 0 74%;
        max-width: 264px;
        display: flex;
        flex-direction: column;
        padding: 6px;
        border-radius: 18px;
        scroll-snap-align: start;
    }
    .bsx-rank-1 { box-shadow: 0 0 0 2px #facc15, 0 10px 30px -10px rgba(250, 204, 21, .55); }

    .marketplace-page .bsx .bsx-media { background: #f1f1f4 !important; }
    .bsx-media {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 16 / 10;
        border-radius: 13px;
        overflow: hidden;
        color: #9ca3af;
        font-size: 1.6rem;
    }
    .bsx-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .marketplace-page .bsx .bsx-media::after {
        background: linear-gradient(180deg, transparent 45%, rgba(17, 18, 24, .72) 100%) !important;
    }
    .bsx-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
    .bsx-num {
        position: absolute;
        left: 10px;
        bottom: 2px;
        z-index: 1;
        font-size: 40px;
        font-weight: 900;
        font-style: italic;
        line-height: 1;
        letter-spacing: -.04em;
        color: #fff;
    }
    .bsx-rank-1 .bsx-num { color: #facc15; }
    .marketplace-page .bsx .bsx-crown { background: #facc15 !important; }
    .bsx-crown,
    .bsx-disc {
        position: absolute;
        top: 8px;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        padding: .2rem .55rem;
        border-radius: 999px;
        font-size: 10.5px;
        font-weight: 800;
    }
    .bsx-crown { left: 8px; color: #111218; }
    .marketplace-page .bsx .bsx-disc { background: #ef4444 !important; }
    .bsx-disc { right: 8px; color: #fff; }

    .bsx-body { display: flex; flex-direction: column; flex: 1; padding: 10px 6px 4px; }
    .bsx-cat {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #a16207;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bsx-name {
        margin-top: 3px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
        color: #111218;
        text-decoration: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.6em;
    }
    .bsx-meta { display: flex; align-items: center; gap: .5rem; margin-top: 6px; font-size: 11.5px; color: #6b7280; }
    .bsx-rating { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; color: #111218; }
    .bsx-rating i { color: #f59e0b; font-size: 11px; }
    .bsx-rating + .bsx-sold::before { content: "•"; margin-right: .5rem; color: #d1d5db; }
    .marketplace-page .bsx .bsx-bar { background: #f1f1f4 !important; }
    .bsx-bar { height: 4px; margin-top: 7px; border-radius: 999px; overflow: hidden; }
    .marketplace-page .bsx .bsx-bar span { background: linear-gradient(90deg, #facc15, #f97316) !important; }
    .bsx-bar span { display: block; height: 100%; border-radius: inherit; }

    .bsx-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: 12px; }
    .bsx-foot form { margin: 0; }
    .bsx-price { display: flex; flex-direction: column; line-height: 1.15; }
    .bsx-price s { font-size: 11px; color: #9ca3af; }
    .bsx-price strong { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #111218; }
    .marketplace-page .bsx .bsx-add { background: #111218 !important; }
    .bsx-add {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 13px;
        color: #facc15;
        font-size: 17px;
        text-decoration: none;
        transition: transform .15s ease;
    }
    .bsx-add:active { transform: scale(.92); }
    .marketplace-page .bsx .bsx-add.is-done { background: #16a34a !important; }
    .bsx-add.is-done { color: #fff; }

    .marketplace-page .bsx .bsx-progress { background: rgba(255, 255, 255, .12) !important; }
    .bsx-progress { height: 3px; margin: 12px 16px 0; border-radius: 999px; overflow: hidden; }
    .marketplace-page .bsx .bsx-progress span { background: #facc15 !important; }
    .bsx-progress span { display: block; height: 100%; width: 30%; border-radius: inherit; transition: transform .1s linear; }

    @media (prefers-reduced-motion: reduce) {
        .bsx-live-dot { animation: none; }
        .bsx-add, .bsx-progress span { transition: none; }
    }

    /* ------------------------------------------------------------------
       6c. END OF LIST (phone footer is hidden on this page)
       Visible only once the infinite-scroll wrapper is gone (last page).
       ------------------------------------------------------------------ */
    .load-more-wrapper ~ .produk-end-m { display: none; }
    .produk-end-m {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .35rem;
        margin: 1.25rem 0 .5rem;
        padding: 1.4rem 1rem 1.1rem;
        text-align: center;
        border-radius: 16px;
        background: #fff;
        border: 1px dashed #d1d5db;
    }
    .produk-end-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #ecfdf5; color: #059669; font-size: 1.4rem; }
    .produk-end-m strong { font-size: 15px; color: #111827; }
    .produk-end-m p { margin: 0; font-size: 13px; line-height: 1.45; color: #4b5563; max-width: 280px; }
    .produk-end-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .9rem; margin-top: .4rem; }
    .produk-end-links a { display: inline-flex; align-items: center; min-height: 40px; font-size: 12.5px; font-weight: 600; color: #374151; text-decoration: underline; text-underline-offset: 3px; }
    .produk-end-top {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        min-height: 44px;
        margin-top: .3rem;
        padding: .5rem 1.2rem;
        border: 0;
        border-radius: 999px;
        background: #111827;
        color: var(--color-action, #ffef33);
        font-size: 13px;
        font-weight: 700;
    }
}