/* ==========================================================
   watchwatch.store — stylesheet bersama untuk semua halaman
   Fondasi awal diambil dari prototipe statis, DIPERBARUI 2026-07-13 mengikuti
   referensi Figma "CONTOH BERANDA FIGMA.zip" yang dikirim user -- palet biru
   marketplace (#0066CC) menggantikan navy gelap, font Inter menggantikan Nunito.
   --navy/--navy-dark DIPERTAHANKAN NAMANYA (bukan di-rename ke --blue dkk) supaya
   ratusan pemakaian var(--navy) di seluruh file CSS/inline style TIDAK perlu
   diubah satu-satu -- cuma NILAI hex-nya yang berubah, jadi otomatis konsisten ke
   semua halaman begitu file ini di-load. Hanya berlaku untuk halaman pelanggan
   (file ini) -- assets/css/dashboard.css (admin/mitra) SENGAJA tidak ikut diubah,
   di luar cakupan permintaan/referensi yang diberikan.
   ========================================================== */

:root{
  --navy:#0066CC;
  --navy-dark:#004499;
  --accent:#64B5F6;
  --bg:#F1F5F9;
  --card:#ffffff;
  --text:#1c1c1e;
  --muted:#6b7280;
  --border:#e5e7eb;
  --green:#16a34a;
  --red:#dc2626;
  --amber:#d97706;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  overflow-x:hidden;
  width:100%;
}

body{
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
}

a{ text-decoration:none; color:inherit; }

.phone{
  width:100%;
  max-width:480px; /* dinaikkan dari 430px (2026-07-15) -- di HP dengan viewport
    lebih lebar dari 430px (mis. Pro Max terbaru), 430px sisakan strip putih tipis
    di kiri-kanan. 480px aman untuk seluruh rentang lebar HP yang ada tanpa
    menabrak breakpoint desktop di 900px. */
  min-height:100vh;
  background:var(--bg);
  padding-bottom:76px; /* bottomnav rata menempel bawah (2026-07-14) -- lebih rendah dari versi pil mengambang sebelumnya */
  position:relative;
}

/* ---------- top bar ---------- */
.topbar{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  position:sticky;
  top:0;
  z-index:20;
}
/* Versi 3-baris (search + strip lokasi) dipakai includes/topbar.php -- kelas TAMBAHAN
   di atas .topbar dasar (bukan pengganti), supaya halaman yang masih pakai .topbar
   versi sederhana (akun.php dkk: judul+tombol kembali) tidak ikut berubah jadi kolom.
   Lihat catatan lengkap di includes/topbar.php. */
.topbar.topbar-full{ flex-direction:column; align-items:stretch; gap:0; padding:10px 0 0; }
.topbar-row1{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px 8px; }
.topbar-full .search-wrap{ margin:0 16px 12px; }
.location-strip{
  display:flex; align-items:center; gap:6px; padding:8px 16px;
  background:rgba(0,0,0,.15);
}
.location-strip span{ color:rgba(191,219,254,.9); font-size:11px; }
.location-strip b{ color:#fff; font-weight:700; }
.icon-btn{
  width:22px; height:22px; flex-shrink:0; cursor:pointer;
}
.topbar .icon-btn{ color:#fff; }
.topbar h1{ font-size:17px; font-weight:700; flex:1; }
.topbar .logo{ height:22px; }
.wordmark{ font-size:15px; font-weight:800; letter-spacing:-.2px; white-space:nowrap; }
.wordmark .w1{ color:#fff; }
.wordmark .w2{ color:var(--accent); }
.wordmark .dom{ color:rgba(255,255,255,.55); font-size:10px; font-weight:600; display:block; }
.topbar .search-wrap{
  flex:1;
  min-width:0;
  background:#fff;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
}
.topbar .search-wrap input{
  border:none; outline:none; font-size:13px; font-family:'Inter',sans-serif;
  flex:1; min-width:0; width:100%; color:var(--text); background:transparent;
}
.topbar .search-wrap svg{ color:var(--muted); flex-shrink:0; }
.topbar .right-icons{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.topbar .cart-badge{ position:relative; }
.topbar .cart-badge .count{
  position:absolute; top:-6px; right:-8px;
  background:var(--red); color:#fff; font-size:9px; font-weight:700;
  width:15px; height:15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.topbar .btn-masuk{
  flex-shrink:0; display:flex; align-items:center; gap:6px;
  background:var(--accent); color:var(--navy-dark); font-weight:800; font-size:13px;
  padding:8px 14px; border-radius:12px;
}

/* logo topbar (dipakai includes/topbar.php) -- menggantikan .wordmark bertulisan supaya
   kolom pencarian lebih lebar; .wordmark lama TETAP ada (masih dipakai akun.php,
   produk_detail.php, dan halaman auth yang tidak include topbar.php ini) */
.topbar-brand{ display:flex; align-items:center; flex-shrink:0; }
.topbar-logo{ height:30px; width:auto; display:block; border-radius:50%; }

/* menu horizontal khusus desktop (900px+), lihat topbar.php -- tersembunyi di mobile,
   pakai destinasi sama persis dengan includes/bottom_nav.php supaya konsisten */
.topbar-desktop-nav{ display:none; }
.topbar-desktop-nav a{ color:rgba(255,255,255,.75); font-size:13px; font-weight:700; }
.topbar-desktop-nav a:hover{ color:#fff; }

/* icon kanan topbar bergaya "chip" bulat semi-transparan -- gaya marketplace besar
   (Blibli dkk), menggantikan ikon polos langsung di atas background navy */
.right-icons .icon-circle{
  position:relative; width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.right-icons .icon-circle .count{
  position:absolute; top:-4px; right:-4px;
  background:var(--red); color:#fff; font-size:9px; font-weight:800;
  min-width:16px; height:16px; border-radius:50%; padding:0 3px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--navy);
}

/* ---------- generic layout ---------- */
.section{ padding:14px 16px 0; }
.card{
  background:var(--card);
  border-radius:16px;
  padding:16px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  margin-bottom:14px;
}
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.section-head h2{ font-size:15px; font-weight:700; display:flex; align-items:center; }
.section-head a{ font-size:12.5px; color:var(--navy); font-weight:700; }
/* badge ikon kotak-membulat bergradasi, pengganti emoji mentah di judul section
   (beranda.php) -- lebih konsisten dengan bahasa desain ikon SVG di seluruh situs */
.head-icon{
  width:26px; height:26px; border-radius:9px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:7px; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.head-icon.bg-lelang{ background:linear-gradient(135deg,#dc2626,#f87171); }
.head-icon.bg-flash{ background:linear-gradient(135deg,#f59e0b,#fde047); }
.head-icon.bg-produk{ background:linear-gradient(135deg,var(--navy),var(--accent)); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--navy); color:#fff; border:none; border-radius:12px;
  padding:13px 20px; font-size:14px; font-weight:700;
  font-family:'Inter', sans-serif; cursor:pointer; width:100%;
}
.btn:active{ background:var(--navy-dark); }
.btn-outline{
  background:#fff; color:var(--navy); border:1.5px solid var(--navy);
}
.btn-outline:active{ background:#f5f7ff; }

/* ---------- badges ---------- */
.badge-verif{
  display:inline-flex; align-items:center; gap:3px;
  background:#e6f1fb; color:var(--navy);
  font-size:10.5px; font-weight:700;
  padding:2px 8px; border-radius:20px;
}

/* ---------- product grid (belanja, beranda) ---------- */
.product-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.product-card{
  background:var(--card); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.06); cursor:pointer;
  display:block; min-width:0;
}
.product-card .thumb-wrap{ position:relative; }
.product-card img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#eee; }
.product-card .wishlist{
  position:absolute; bottom:8px; right:8px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,0.9);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.product-card .badge-corner{
  position:absolute; top:8px; left:8px;
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px;
}
.product-card .badge-sponsor{ background:#eceff1; color:#546e7a; }
.product-card .badge-verified{ background:var(--accent); color:var(--navy); display:inline-flex; align-items:center; gap:3px; }
.product-card .info{ padding:10px; }
.product-card .name{ font-size:12.5px; font-weight:600; line-height:1.35; min-height:34px; overflow-wrap:break-word; }
.product-card .price{ font-size:14px; font-weight:800; color:var(--navy); margin-top:4px; }
.product-card .price-old{ font-size:11px; color:var(--muted); text-decoration:line-through; margin-left:5px; font-weight:400; }
.product-card .meta{ font-size:11px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:4px; }
.product-card .lokasi{ font-size:10px; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:3px; }

/* ---------- bottom navigation ---------- */
/* Bar rata menempel penuh di tepi bawah layar (2026-07-14, diminta user "jangan
   floating seperti itu") -- kembali ke pola bottom-tab standar seperti referensi
   Figma src/components/BottomNav.tsx: full width, background putih, garis tipis
   di atas, bayangan naik, TANPA border-radius/jarak dari tepi. */
.bottomnav{
  position:fixed; left:50%; bottom:0;
  transform:translateX(-50%);
  width:100%; max-width:430px;
  background:#fff; border-top:1px solid var(--border);
  display:flex; z-index:30;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottomnav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 2px; color:var(--muted); font-size:10.5px; font-weight:600; position:relative;
}
.bottomnav a.active{ color:var(--navy); }
.bottomnav a svg{ width:21px; height:21px; }

/* ---------- fixed bottom action bar (product detail, checkout) ---------- */
.actionbar{
  position:fixed; bottom:0; left:0; right:0; margin:0 auto;
  width:100%; max-width:430px;
  background:#fff; border-top:1px solid var(--border);
  box-shadow:0 -2px 10px rgba(0,0,0,0.06);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px; z-index:30;
}
/* .msg (tombol "Pesan" via WhatsApp di produk_detail.php) tidak pernah punya style
   sendiri sebelumnya -- tampil tanpa kotak/padding sama sekali, beda tinggi dari
   .btn/.btn-outline di sebelahnya. Kolom ikon+label kecil, tinggi disamakan lewat
   padding vertikal yang setara dengan .btn punya (13px atas-bawah). */
.actionbar .msg{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  flex-shrink:0; width:60px; padding:9px 4px;
  border:1.5px solid var(--border); border-radius:12px;
  color:var(--navy); font-size:9.5px; font-weight:700; text-align:center;
}
.actionbar .msg svg{ color:var(--navy); }

/* ---------- helpers ---------- */
.hscroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.hscroll::-webkit-scrollbar{ display:none; }
.pill{
  padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:700;
  background:#fff; color:var(--muted); border:1px solid var(--border);
  white-space:nowrap; flex-shrink:0; cursor:pointer;
}
.pill.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

.filter-row{ display:flex; gap:8px; overflow-x:auto; padding:10px 0 12px; scrollbar-width:none; }
.filter-row::-webkit-scrollbar{ display:none; }
.verif-toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:20px; font-size:12.5px; font-weight:700;
  background:#fff; color:var(--text); border:1px solid var(--border);
  white-space:nowrap; flex-shrink:0; cursor:pointer;
}
.verif-toggle.active{ background:#e6f1fb; color:var(--navy); border-color:var(--navy); }
.load-more{ margin:16px 0 4px; }

.empty-state{ text-align:center; padding:40px 24px; color:var(--muted); }
.empty-state svg{ color:var(--border); margin-bottom:12px; }
.empty-state p{ font-size:13px; }

/* ==========================================================
   Komponen tambahan khusus beranda.php versi lengkap
   (rujukan visual: zip Figma "Beranda", src/app/App.tsx)
   ========================================================== */

/* Refresh visual beranda (2026-07-12) -- "jangan terlalu polos, kontainer rapi
   seperti Blibli". Semua kelas di bawah ADITIF dan dipakai HANYA di beranda.php;
   .cat-row/.trust-row/.section polos punya markup yang sama persis di
   belanja.php/lelang.php/po.php/produk_detail.php (lihat catatan proyek), jadi
   sengaja tidak menyentuh definisi kelas dasarnya supaya halaman lain tidak ikut
   bergeser tampilannya. */

/* Zona header gradasi navy yang membungkus topbar+cat-row -- pengganti "abu polos
   langsung ketemu grey background" begitu topbar berakhir. */
.beranda-hero{
  background:linear-gradient(160deg,var(--navy) 0%,#26319e 55%,var(--navy-dark) 100%);
  padding-bottom:20px; position:relative; overflow:hidden;
}
.beranda-hero::before{
  content:""; position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(79,195,247,.25),transparent 70%);
  top:-90px; right:-60px; pointer-events:none;
}
.beranda-hero .cat-row{ position:relative; z-index:1; padding-top:10px; }
.beranda-hero .cat-item span{ color:#fff; }
.beranda-hero .cat-item .ic{ box-shadow:0 6px 14px rgba(0,0,0,.22); }

/* Riwayat jarak banner (2026-07-13/14): dulu banner ditarik naik lewat margin-top
   negatif supaya "melayang" tipis ke zona navy, tapi setelah dicoba di server
   sungguhan tetap terlihat mepet (foto banner gelap menyatu visual dengan navy).
   2026-07-14: solusinya bukan lagi ngoprek margin -- ditambah section sungguhan
   (.promo-member-strip, "Promo Khusus Member Baru") di antara hero dan banner,
   jadi pemisahnya nyata bukan sekadar spasi. .beranda-hero padding-bottom
   diturunkan lagi (20px, cukup untuk kondisi promo-member-strip kosong/tidak ada
   produk <Rp50rb) dan margin banner sekarang positif biasa, bukan overlap. */
.beranda-banner-float{ margin-top:14px; position:relative; z-index:2; }

.promo-member-strip{ background:#eaf2fd; border-bottom:1px solid #d7e6fa; padding:12px 0 14px; }
.promo-member-head{ display:flex; align-items:center; justify-content:space-between; padding:0 16px 10px; gap:10px; }
.promo-member-eyebrow{ font-size:10.5px; color:var(--muted); line-height:1.2; }
.promo-member-title{ font-size:13.5px; font-weight:800; color:var(--navy); line-height:1.3; }
.promo-member-more{ display:flex; align-items:center; gap:2px; font-size:11.5px; font-weight:700; color:var(--navy); white-space:nowrap; }
.promo-member-row{ padding:0 16px; }
.promo-member-card{
  min-width:96px; max-width:96px; background:#fff; border-radius:12px; overflow:hidden; flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.06); display:block;
}
.promo-member-card img{ width:100%; height:80px; object-fit:cover; display:block; background:#eee; }
.promo-member-card .body{ padding:7px; }
.promo-member-card .name{ font-size:10px; font-weight:600; color:#1a2b4a; line-height:1.3; margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.promo-member-card .price{ font-size:11px; font-weight:800; color:var(--navy); }
.promo-member-card .price-old{ font-size:9px; color:var(--muted); text-decoration:line-through; }

/* Kontainer kartu untuk section yang sebelumnya cuma <div class="section"> polos
   tanpa latar/bayangan sendiri (Lelang, Flash Sale, Produk Unggulan) -- beda dengan
   .trust-row yang sudah jadi kartu putih sendiri sejak awal, jadi TIDAK dipakai di situ
   supaya tidak jadi kartu-di-dalam-kartu. */
.section-card{
  background:var(--card); border-radius:20px; padding:16px; margin:0 16px 14px;
  box-shadow:0 2px 10px rgba(23,31,97,.07); border:1px solid rgba(23,31,97,.04);
}
.section-card .section-head{ margin-bottom:12px; }
/* semburat warna tipis khusus section yang sifatnya "mendesak/waktu terbatas",
   Produk Unggulan sengaja dibiarkan putih polos (bukan promo, jadi tidak perlu
   kesan urgent) */
.section-card.tint-lelang{ background:linear-gradient(180deg,#fff5f5 0%,#ffffff 60%); }
.section-card.tint-flash{ background:linear-gradient(180deg,#fffbeb 0%,#ffffff 60%); }

/* kategori dengan lingkaran warna per kategori */
.cat-row{ display:flex; gap:16px; overflow-x:auto; padding:4px 16px 10px; scrollbar-width:none; }
.cat-row::-webkit-scrollbar{ display:none; }
.cat-item{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; width:56px; }
.cat-item .ic{
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.10);
  transition:transform .15s ease;
  overflow:hidden;
}
.cat-item .ic img{ width:100%; height:100%; object-fit:cover; }
.cat-item:active .ic{ transform:scale(.92); }
.cat-item span{ font-size:10.5px; color:var(--text); font-weight:700; text-align:center; }

/* banner slider otomatis */
/* rasio 16:9 (2026-07-14, sebelumnya tinggi tetap 170px) -- proporsional otomatis
   di lebar layar berapa pun, tidak lagi kepotong/lonjong di HP yang lebih sempit.
   Margin kiri-kanan DIHAPUS (2026-07-14, revisi) -- 16px di tiap sisi bikin banner
   kelihatan "kurang lebar" di HP dibanding elemen lain yang lebih lebar (cat-row,
   product-grid dst) -- sekarang full-bleed rata ke kedua tepi layar, radius juga
   dilepas di mobile (radius di ujung yang menempel tepi layar malah aneh). Radius
   dan margin kiri-kanan kembali di desktop (lihat @media 900/1280/1600px) karena
   di sana .phone sudah lebar dan konten lain (topbar-full dst) juga berjarak dari
   tepi, jadi banner full-bleed di desktop justru janggal sendirian. */
.banner-slider{
  position:relative; overflow:hidden;
  aspect-ratio:16/9; margin:0 0 14px; box-shadow:0 4px 16px rgba(26,35,126,.18);
}
.banner-slide{
  position:absolute; inset:0;
  background:linear-gradient(135deg,var(--navy),var(--navy-dark));
  display:flex; align-items:center; padding:0 22px;
  opacity:0; transform:translateX(30px);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.banner-slide.active{ opacity:1; transform:translateX(0); pointer-events:auto; }
.banner-slide img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; /* foto asli ditampilkan penuh -- sebelumnya cuma tekstur redup (opacity .32) di belakang teks */
}
/* gradasi gelap kiri menggantikan opacity/blend-mode lama, supaya teks tetap terbaca
   di atas foto yang sekarang tampil jelas */
.banner-slide::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,10,30,.72) 0%, rgba(0,10,30,.32) 55%, transparent 85%);
}
.banner-slide .txt{ position:relative; color:#fff; z-index:2; max-width:75%; }
.banner-slide .tag{
  font-size:10px; font-weight:800; letter-spacing:.4px;
  background:rgba(79,195,247,.25); color:var(--accent); border:1px solid rgba(79,195,247,.4);
  display:inline-block; padding:3px 10px; border-radius:20px; margin-bottom:8px;
}
.banner-slide h2{ font-size:19px; font-weight:800; line-height:1.25; margin-bottom:4px; }
.banner-slide p{ font-size:12px; opacity:.75; margin-bottom:10px; }
.banner-slide .cta{
  display:inline-block; background:var(--accent); color:var(--navy-dark);
  font-size:12.5px; font-weight:800; padding:8px 18px; border-radius:12px;
}
.banner-dots{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:5px; }
.banner-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); transition:all .25s; }
.banner-dots span.active{ width:18px; border-radius:4px; background:#fff; }

/* baris trust badge */
.trust-row{ display:flex; justify-content:space-between; gap:6px; background:#fff; border-radius:14px; padding:14px 6px; margin:0 16px 14px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.trust-item{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.trust-item svg{ color:var(--navy); }
.trust-item span{ font-size:9.5px; color:var(--muted); text-align:center; font-weight:700; }
/* Ikon berwarna dalam kotak membulat pastel (dipakai beranda.php) -- .ic-wrap murni
   aditif, trust-item TANPA .ic-wrap (statistik lelang.php/po.php yang isinya angka
   bukan ikon) tidak terpengaruh sama sekali. Warna 2026-07-13 disamakan persis
   dengan referensi Figma (teal/blue/purple/orange) -- nama kelas ikut diganti dari
   c-green/c-amber jadi c-teal/c-orange dkk supaya nama kelas tetap cocok dengan
   warna sesungguhnya (lihat pemakaiannya di beranda.php).*/
.trust-item .ic-wrap{
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.trust-item .ic-wrap svg{ color:inherit; }
.trust-item.c-teal .ic-wrap{ background:#00897B26; color:#00897B; }
.trust-item.c-blue .ic-wrap{ background:#1E88E526; color:#1E88E5; }
.trust-item.c-purple .ic-wrap{ background:#7B1FA226; color:#7B1FA2; }
.trust-item.c-orange .ic-wrap{ background:#F57C0026; color:#F57C00; }

/* Section promo (Lelang/Flash Sale) sebagai banner gradasi PENUH (2026-07-13, ikut
   referensi Figma) -- kelas baru semua (promo-*), SENGAJA tidak dicampur dengan
   .section-head/.head-icon/.live-badge yang dipakai halaman lain (produk_detail,
   po, lelang, artikel_detail, akun) supaya tidak menabrak apa pun di luar
   beranda.php. Dua bagian: .promo-band (kepala berwarna) + .promo-body (badan putih)
   -- pengganti .section-card.tint-lelang/.tint-flash yang lama (kelas itu masih ada
   di CSS untuk kompatibilitas tapi sudah tidak dipakai markup manapun). */
.promo-section{ margin:0 16px 14px; border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.promo-band{ padding:14px 16px 12px; display:flex; align-items:center; justify-content:space-between; }
.promo-band.band-red{ background:linear-gradient(135deg,#C62828 0%,#EF5350 100%); }
.promo-band.band-orange{ background:linear-gradient(135deg,#FF6B00 0%,#FF9A00 100%); }
.promo-title{ display:flex; align-items:center; gap:8px; }
.promo-title span{ color:#fff; font-weight:800; font-size:14.5px; }
.promo-live{ display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.2); border-radius:999px; padding:4px 10px; }
.promo-live .dot{ width:5px; height:5px; border-radius:50%; background:#fff; animation:blink 1.2s infinite; }
.promo-live span{ color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.5px; }
.promo-countdown{ display:flex; align-items:center; gap:4px; }
.promo-countdown .lbl{ color:rgba(255,255,255,.8); font-size:10px; margin-right:2px; }
.promo-countdown .d{
  display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px;
  border-radius:7px; background:rgba(255,255,255,.25); color:#fff; font-weight:800; font-size:12px;
  font-variant-numeric:tabular-nums; backdrop-filter:blur(4px);
}
.promo-countdown .sep{ color:#fff; font-weight:800; font-size:11px; }
.promo-body{ background:#fff; padding:12px; }
.promo-cta{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:10px;
  border-radius:11px; padding:10px; font-weight:700; font-size:12.5px; border:none; cursor:pointer;
}
.promo-cta.cta-red{ border:2px solid #C62828; color:#C62828; background:#fff; }
.promo-cta.cta-orange{ background:linear-gradient(135deg,#FF6B00,#FF9A00); color:#fff; }
.promo-empty-jsm{ font-size:11.5px; color:var(--muted); text-align:center; padding:18px 12px; line-height:1.5; }

/* Ticker pengumuman pemenang lelang (2026-07-14) -- baris tipis full-bleed dari
   ujung kiri ke ujung kanan layar, isi contoh/placeholder dulu (bagian 1 dokumen
   tidak merinci fitur ini). Border di KEEMPAT sisi (bukan cuma atas-bawah seperti
   percobaan pertama) supaya kelihatan jelas sebagai kontainer persegi panjang,
   walau tetap menempel rata ke kedua sisi layar (tidak ada margin kiri-kanan) --
   beda dari .promo-section yang dibungkus radius+shadow+margin.
   Teks berjalan (marquee) beneran, bukan cuma dipotong "...": isi teks digandakan
   dua kali (satu disembunyikan dari screen reader lewat aria-hidden) lalu digeser
   translateX(-50%) tanpa henti -- karena kontennya persis dua salinan berdampingan,
   pas salinan pertama habis di kiri, salinan kedua sudah pas menyambung, jadi
   putarannya kelihatan mulus tanpa jeda/lompatan. */
.winner-ticker{
  display:flex; align-items:center; gap:8px; background:#fff7e6; border:1px solid #ffe4b3;
  padding:8px 16px; color:#92620a; overflow:hidden;
}
.winner-ticker svg{ flex-shrink:0; color:#d97706; }
.ticker-viewport{ flex:1; overflow:hidden; }
.ticker-track{ display:flex; width:max-content; animation:winner-ticker-scroll 16s linear infinite; }
.ticker-track span{ font-size:11px; font-weight:600; white-space:nowrap; padding-right:56px; }
@keyframes winner-ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}

/* baris lelang */
.auction-card{
  min-width:180px; max-width:180px; background:#fff; border-radius:14px; overflow:hidden; flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.auction-card .thumb{ position:relative; }
.auction-card img{ width:100%; height:110px; object-fit:cover; display:block; background:#eee; }
.auction-card .status-badge{
  position:absolute; top:7px; left:7px; font-size:9px; font-weight:800; color:#fff;
  padding:2px 7px; border-radius:20px; letter-spacing:.3px;
}
.auction-card .kondisi-badge{
  position:absolute; top:7px; right:7px; font-size:9px; font-weight:700; color:#fff;
  background:rgba(0,0,0,.55); padding:2px 6px; border-radius:20px;
}
.auction-card .body{ padding:10px; }
.auction-card .name{ font-size:11.5px; font-weight:700; min-height:32px; line-height:1.3; }
.auction-card .bid-row{ display:flex; align-items:flex-end; justify-content:space-between; margin:6px 0; }
.auction-card .bid-label{ font-size:9px; color:var(--muted); text-transform:uppercase; }
.auction-card .bid{ font-size:14px; font-weight:800; color:var(--navy); }
.auction-card .bid-count{ font-size:10px; color:var(--muted); }
.auction-card .countdown{
  display:flex; align-items:center; gap:4px; background:rgba(26,35,126,.06);
  border-radius:10px; padding:6px 8px; margin-bottom:8px;
}
.auction-card .countdown.urgent{ background:#fef2f2; }
.auction-card .countdown .seg-h, .auction-card .countdown .seg-m, .auction-card .countdown .seg-s{ font-size:11px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; }
.auction-card .countdown.urgent .seg-h, .auction-card .countdown.urgent .seg-m, .auction-card .countdown.urgent .seg-s{ color:var(--red); }
.auction-card .countdown .sep{ font-size:10px; font-weight:700; color:var(--navy); }
.auction-card .countdown.urgent .sep{ color:var(--red); }
.auction-card .btn-tawar{
  width:100%; background:var(--navy); color:#fff; border:none; border-radius:10px;
  padding:8px; font-size:11px; font-weight:800; font-family:'Inter',sans-serif; cursor:pointer;
}
.live-badge{ background:var(--red); color:#fff; font-size:9px; font-weight:800; padding:2px 8px; border-radius:20px; animation:blink 1.4s infinite; }
@keyframes blink{ 50%{ opacity:.45; } }

/* lelang.php: kartu horizontal (spec 5.4) -- markup baru terpisah dari .auction-card
   (carousel horizontal-scroll di beranda.php), nilai visual sengaja diselaraskan */
.lelang-row{
  display:flex; gap:12px; background:#fff; border-radius:14px; padding:10px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:12px;
}
.lelang-row .thumb{ position:relative; width:92px; height:92px; flex-shrink:0; border-radius:10px; overflow:hidden; }
.lelang-row .thumb img{ width:100%; height:100%; object-fit:cover; display:block; background:#eee; }
.lelang-row .status-badge{
  position:absolute; top:6px; left:6px; font-size:9px; font-weight:800; color:#fff;
  padding:2px 7px; border-radius:20px; letter-spacing:.3px;
}
.lelang-row .status-badge.ending{ background:var(--red); }
.lelang-row .status-badge.hot{ background:var(--amber); }
.lelang-row .status-badge.new{ background:var(--accent); color:var(--navy); }
.lelang-row .status-badge.verified{ background:var(--green); }
.lelang-row .kondisi-badge{
  position:absolute; bottom:6px; right:6px; font-size:9px; font-weight:700; color:#fff;
  background:rgba(0,0,0,.55); padding:2px 6px; border-radius:20px;
}
.lelang-row .body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lelang-row .name{ font-size:12.5px; font-weight:700; line-height:1.3; margin-bottom:4px; }
.lelang-row .bid-row{ display:flex; align-items:flex-end; justify-content:space-between; margin:0 0 6px; }
.lelang-row .bid-label{ font-size:9px; color:var(--muted); text-transform:uppercase; }
.lelang-row .bid{ font-size:14px; font-weight:800; color:var(--navy); }
.lelang-row .bid-count{ font-size:10px; color:var(--muted); }
.lelang-row .countdown{
  display:flex; align-items:center; gap:4px; background:rgba(26,35,126,.06);
  border-radius:10px; padding:6px 8px; margin-bottom:8px;
}
.lelang-row .countdown.urgent{ background:#fef2f2; }
.lelang-row .countdown .seg-h, .lelang-row .countdown .seg-m, .lelang-row .countdown .seg-s{ font-size:11px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; }
.lelang-row .countdown.urgent .seg-h, .lelang-row .countdown.urgent .seg-m, .lelang-row .countdown.urgent .seg-s{ color:var(--red); }
.lelang-row .countdown .sep{ font-size:10px; font-weight:700; color:var(--navy); }
.lelang-row .countdown.urgent .sep{ color:var(--red); }
.lelang-row .btn-tawar{
  width:100%; background:var(--navy); color:#fff; border:none; border-radius:10px;
  padding:8px; font-size:11px; font-weight:800; font-family:'Inter',sans-serif; cursor:pointer;
}
.lelang-row .btn-tawar:disabled{ opacity:.6; cursor:not-allowed; }

/* po.php: kartu horizontal PO (bagian 5.5) -- markup sendiri turunan .lelang-row,
   progress bar kuota mengikuti pola .flash-card di beranda.php */
.po-row{
  display:flex; gap:12px; background:#fff; border-radius:14px; padding:10px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:12px;
}
.po-row .thumb{ position:relative; width:92px; height:92px; flex-shrink:0; border-radius:10px; overflow:hidden; }
.po-row .thumb img{ width:100%; height:100%; object-fit:cover; display:block; background:#eee; }
.po-row .badge-tetap{
  position:absolute; top:6px; left:6px; font-size:9px; font-weight:800; color:#fff;
  background:var(--navy); padding:2px 7px; border-radius:20px; letter-spacing:.3px;
}
.po-row .body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.po-row .name{ font-size:12.5px; font-weight:700; line-height:1.3; margin-bottom:4px; }
.po-row .harga{ font-size:14px; font-weight:800; color:var(--navy); }
.po-row .deposit-label{ font-size:9.5px; color:var(--muted); font-weight:700; margin-bottom:6px; }
.po-row .progress-kuota{ height:6px; background:var(--border); border-radius:10px; overflow:hidden; margin-bottom:4px; }
.po-row .progress-bar{ height:100%; background:var(--navy); border-radius:10px; }
.po-row .progress-label{ font-size:9.5px; color:var(--muted); font-weight:700; margin-bottom:8px; }
.po-row .btn-pesan{
  width:100%; background:var(--navy); color:#fff; border:none; border-radius:10px;
  padding:8px; font-size:11px; font-weight:800; font-family:'Inter',sans-serif; cursor:pointer;
  text-align:center; text-decoration:none; display:block; box-sizing:border-box;
}
.po-row .btn-pesan:disabled{ opacity:.6; cursor:not-allowed; }
.po-alert{
  display:flex; align-items:center; gap:10px; background:#fef9c3; color:#854d0e;
  border-radius:12px; padding:10px 12px; margin-bottom:12px; font-size:11.5px; font-weight:700;
  text-decoration:none;
}
.po-alert svg{ flex-shrink:0; }

/* ==========================================================
   Komponen tambahan khusus produk_detail.php
   (fondasi: produk_detail.html prototipe; tab/video/sosmed/ulasan
   mengikuti zip Figma "Detail Product Menu")
   ========================================================== */

.pd-topbar{
  background:#fff; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 14px; position:sticky; top:0; z-index:20; border-bottom:1px solid var(--border);
}
.icon-circle{
  width:34px; height:34px; border-radius:50%; background:#f0f0f0; border:none;
  display:flex; align-items:center; justify-content:center; color:var(--text); cursor:pointer; flex-shrink:0;
}
.pd-icons{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.pd-tabs{ display:flex; border-bottom:1px solid var(--border); }
.pd-tab{
  flex:1; padding:11px; text-align:center; font-size:13px; font-weight:700; color:var(--muted);
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-family:'Inter',sans-serif;
}
.pd-tab.active{ color:var(--navy); border-bottom-color:var(--navy); }

.pd-pane{ display:none; }
.pd-pane.active{ display:block; }

.pd-gallery{ position:relative; background:#fff; }
.pd-gallery img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#eee; }
.pd-counter{
  position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,.55); color:#fff;
  font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px;
}
.pd-thumbs{ display:flex; gap:8px; padding:10px 16px; overflow-x:auto; scrollbar-width:none; }
.pd-thumbs::-webkit-scrollbar{ display:none; }
.pd-thumb{
  width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0;
  border:2px solid transparent; cursor:pointer; background:#eee;
}
.pd-thumb.active{ border-color:var(--navy); }
/* Galeri gabungan foto+video (2026-07-12) -- slide video ditandai kotak gelap
   berikon play, main area <img>/<iframe> ditoggle lewat JS, bukan dua tab terpisah. */
.pd-thumb-video{ display:flex; align-items:center; justify-content:center; background:#1c1c1e; }
.pd-gallery #pd-main-video{ width:100%; aspect-ratio:1; background:#000; }
.pd-gallery #pd-main-video iframe{ width:100%; height:100%; border:none; display:block; }

.video-card{
  display:flex; gap:10px; background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.video-thumb{ position:relative; width:110px; height:80px; flex-shrink:0; background:linear-gradient(135deg,#1a237e,#283593); }
.play-btn{
  position:absolute; inset:0; margin:auto; width:36px; height:36px; border-radius:50%;
  background:#ff0000; display:flex; align-items:center; justify-content:center;
}
.video-info{ padding:10px 12px 10px 0; display:flex; flex-direction:column; justify-content:center; }
.video-title{ font-size:12px; font-weight:700; line-height:1.35; margin-bottom:4px; }
.video-channel{ font-size:11px; color:#ef4444; font-weight:600; }

/* Kontainer badge kepercayaan + judul + rating + harga (2026-07-13) -- sebelumnya
   .badge-row/.trust-chip TIDAK PERNAH punya CSS sama sekali (bug nyata, sama seperti
   kasus .msg dulu), makanya tampil sebagai teks polos nempel tanpa jarak/warna.
   .pd-info-card menyatukan blok ini jadi satu kartu, mengikuti resep visual yang
   sama persis dengan .spec-table/.desc-box di bawah (radius 14px, padding 14px 16px)
   supaya konsisten dalam satu halaman -- bukan resep .section-card (radius 20px)
   dari beranda.php, itu untuk halaman berbeda. */
.pd-info-card{
  background:#fff; border-radius:14px; padding:14px 16px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:14px;
}
.badge-row{ display:flex; flex-wrap:wrap; gap:6px; }
.trust-chip{
  display:inline-flex; align-items:center; gap:3px;
  font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:20px;
  white-space:nowrap;
}
.trust-chip.blue{ background:#e3f2fd; color:#1565c0; }
.trust-chip.green{ background:#dcfce7; color:#16a34a; }
.trust-chip.orange{ background:#fff3e0; color:#e65100; }
.pd-title{ padding:8px 0 0; font-size:16px; font-weight:700; line-height:1.4; }
.pd-rating{ padding:8px 0; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.pd-rating a{ color:var(--navy); font-weight:700; }
.pd-price-wrap{ padding:6px 0 0; }
.pd-price{ font-size:22px; font-weight:800; color:var(--navy); }
.pd-price-old{ font-size:13px; color:var(--muted); text-decoration:line-through; margin-left:8px; font-weight:400; }

.arrive-box{
  background:#e8f5e9; border-radius:12px; padding:12px 14px; margin-bottom:14px;
  display:flex; gap:10px; align-items:flex-start;
}
.arrive-box svg{ color:#2e7d32; flex-shrink:0; margin-top:1px; }
.arrive-box p{ font-size:12.5px; color:#2e7d32; line-height:1.5; }

.spec-table{ background:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:14px; }
.spec-row{ display:flex; justify-content:space-between; padding:7px 0; font-size:13px; border-bottom:1px solid var(--border); }
.spec-row:last-child{ border-bottom:none; }
.spec-row .l{ color:var(--muted); }
.spec-row .r{ font-weight:600; text-align:right; }

.desc-box{ background:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:14px; }
.desc-box h3{ font-size:14px; font-weight:700; margin-bottom:8px; }
.desc-box p{ font-size:13px; color:var(--muted); line-height:1.6; white-space:pre-line; }
.desc-box p.clamped{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.link-btn{ background:none; border:none; color:var(--navy); font-weight:700; font-size:12.5px; padding:6px 0 0; cursor:pointer; font-family:'Inter',sans-serif; }

.seller-box{
  background:#fff; border-radius:14px; padding:14px 16px; margin-bottom:14px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06); display:flex; align-items:center; justify-content:space-between;
}
.seller-box .left{ display:flex; align-items:center; gap:10px; }
.seller-box .avatar{ width:40px; height:40px; border-radius:50%; background:#e6f1fb; display:flex; align-items:center; justify-content:center; color:var(--navy); font-weight:800; font-size:15px; flex-shrink:0; }
.seller-box .name{ font-size:13.5px; font-weight:700; }

.social-box{ background:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:14px; }
.social-box h3{ font-size:13px; font-weight:700; margin-bottom:12px; }
.social-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.social-item{ display:flex; flex-direction:column; align-items:center; gap:5px; width:52px; }
.social-item span:last-child{ font-size:10px; color:var(--muted); font-weight:600; text-align:center; }
.social-ic{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff; overflow:hidden; }
.social-ic.square{ border-radius:12px; }
.social-ic img{ width:100%; height:100%; object-fit:cover; }

.review-card{ background:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:10px; }
.review-head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.review-name{ font-size:13px; font-weight:700; }
.review-stars{ color:#fbbf24; font-size:13px; margin-bottom:6px; }
.review-text{ font-size:12.5px; color:var(--muted); line-height:1.55; }

/* ==========================================================
   Komponen khusus profil_toko.php (bagian 5.11 dokumen)
   ========================================================== */
.toko-header{
  background:linear-gradient(135deg,var(--navy),var(--navy-dark));
  color:#fff; padding:24px 16px 20px; text-align:center;
}
.toko-header .avatar{
  width:72px; height:72px; border-radius:50%; margin:0 auto 10px;
  background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800; overflow:hidden; border:2.5px solid rgba(255,255,255,.4);
}
.toko-header .avatar img{ width:100%; height:100%; object-fit:cover; }
.toko-header .nama{ font-size:17px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.toko-header .tagline{ font-size:12px; opacity:.8; margin-top:4px; }

.toko-stat-row{
  display:flex; background:#fff; margin:-14px 16px 14px; border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.08); position:relative; z-index:2; overflow:hidden;
}
.toko-stat-row .item{ flex:1; text-align:center; padding:14px 4px; }
.toko-stat-row .item + .item{ border-left:1px solid var(--border); }
.toko-stat-row .n{ font-size:16px; font-weight:800; color:var(--navy); }
.toko-stat-row .l{ font-size:10px; color:var(--muted); font-weight:700; margin-top:2px; }

.btn-subscribe{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#ff0000; color:#fff; font-weight:800; font-size:13px;
  padding:11px; border-radius:12px; margin:0 16px 14px;
}

.toko-tabs{ display:flex; border-bottom:1px solid var(--border); margin:0 16px; }
.toko-tab{
  flex:1; padding:11px; text-align:center; font-size:13px; font-weight:700; color:var(--muted);
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-family:'Inter',sans-serif;
}
.toko-tab.active{ color:var(--navy); border-bottom-color:var(--navy); }
.toko-pane{ display:none; padding:14px 16px 0; }
.toko-pane.active{ display:block; }

/* ==========================================================
   Komponen tambahan khusus akun.php dan lengkapi_profil.php
   (dashboard: zip Figma "akun saya". Form Masuk/Daftar/Lengkapi Profil
   tidak ada rujukan visual di manapun — dirancang mengikuti sistem
   desain yang sudah dipakai di seluruh situs.)
   ========================================================== */

.form-label{ display:block; font-size:11px; font-weight:700; color:var(--muted); margin:12px 0 4px; }
.form-label:first-child{ margin-top:0; }
.form-input{
  width:100%; padding:11px 14px; border-radius:12px; border:1.5px solid var(--border);
  font-size:13.5px; font-family:'Inter',sans-serif; color:var(--text); outline:none;
}
.form-input:focus{ border-color:var(--navy); }
.form-error{
  background:#fee2e2; color:#b91c1c; font-size:12.5px; font-weight:600;
  padding:10px 14px; border-radius:12px; margin-bottom:12px;
}
.form-success{
  background:#dcfce7; color:#166534; font-size:12.5px; font-weight:600;
  padding:10px 14px; border-radius:12px; margin-bottom:12px;
}

.auth-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.auth-tab{
  flex:1; padding:11px; border-radius:12px; border:1.5px solid var(--border); background:#fff;
  color:var(--muted); font-weight:800; font-size:13.5px; cursor:pointer; font-family:'Inter',sans-serif;
}
.auth-tab.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.auth-pane{ display:none; }
.auth-pane.active{ display:block; }
.auth-divider{ display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--muted); font-size:11.5px; font-weight:700; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--border); }
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:#fff; border:1.5px solid var(--border); border-radius:12px; padding:12px;
  font-size:13.5px; font-weight:700; color:var(--text);
}
.auth-switch{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:16px; }
.auth-switch .link-btn{ padding:0; }

.password-wrap{ position:relative; }
.password-wrap .form-input{ padding-right:42px; }
.password-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:8px; cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
}

.profile-avatar{
  position:relative; width:56px; height:56px; border-radius:50%; background:#e6f1fb; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--navy); font-weight:800; font-size:20px;
  overflow:hidden;
}
.profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.cam-badge{
  position:absolute; bottom:-1px; right:-1px; width:19px; height:19px; border-radius:50%;
  background:var(--navy); border:2px solid #fff; display:flex; align-items:center; justify-content:center;
}
.btn-chip{
  flex-shrink:0; background:#e6f1fb; color:var(--navy); border:none; border-radius:10px;
  padding:8px 12px; font-size:11.5px; font-weight:800; font-family:'Inter',sans-serif; cursor:pointer;
}

.menu-row{ display:flex; align-items:center; gap:10px; }

.pesanan-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.pesanan-item{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.pesanan-ic{ position:relative; width:48px; height:48px; border-radius:14px; background:#e6f1fb; display:flex; align-items:center; justify-content:center; }
.pesanan-badge{
  position:absolute; top:-4px; right:-4px; background:#ef4444; color:#fff; font-size:9px; font-weight:800;
  width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}
.pesanan-item span:last-child{ font-size:9.5px; font-weight:700; color:var(--muted); text-align:center; }

/* Footer (includes/footer.php) sengaja disembunyikan di mobile -- konten identitas
   toko/legal/badge pembayaran ini fungsinya untuk kesan "toko resmi" saat versi
   desktop dicek verifikator (Midtrans dkk), bukan kebutuhan navigasi pembeli di HP
   yang sudah cukup terlayani lewat akun.php. Ditampilkan lagi di @media
   (min-width:900px) di bawah. */
.footer-box{ display:none; background:#e4e8ef; border-radius:16px; padding:18px 16px; }
.footer-box.footer-box-selalu{ display:block; }
.footer-nama{ font-size:15px; font-weight:800; color:var(--navy); }
.footer-tagline{ font-size:12px; font-weight:600; color:#6b7a96; margin:2px 0 10px; }
.footer-line{ font-size:11.5px; font-weight:600; color:#8898aa; line-height:1.5; }
.footer-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.footer-col-title{ font-size:11px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.footer-cols a{ display:block; font-size:10px; font-weight:600; color:#8898aa; line-height:1.6; }
.footer-pay-label{ font-size:10px; font-weight:800; color:var(--navy); margin:16px 0 8px; text-align:center; }
.footer-pay-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.footer-pay-row .trust-chip{ background:#fff; color:#6b7a96; }
.footer-copy{ font-size:10px; font-weight:600; color:#8898aa; text-align:center; margin-top:14px; }

.modal-overlay{
  display:none; position:fixed; inset:0; z-index:50; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.4);
}
.modal-sheet{
  width:100%; max-width:430px; background:#fff; border-radius:24px 24px 0 0; padding:20px;
}

/* ==========================================================
   Komponen tambahan khusus keranjang.php
   (fondasi: keranjang.html prototipe; checkbox/indeterminate
   mengikuti zip Figma "Keranjang")
   ========================================================== */

.edit-link{ font-size:12.5px; font-weight:700; color:#fff; cursor:pointer; flex-shrink:0; }

.seller-group{ background:#fff; border-radius:14px; margin-bottom:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.seller-group-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); }
.seller-group-head .name{ font-size:13.5px; font-weight:700; flex:1; }

.item-row{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); }
.item-row:last-child{ border-bottom:none; }
.item-thumb-wrap{ position:relative; width:56px; height:56px; border-radius:10px; overflow:hidden; flex-shrink:0; background:#eee; }
.item-thumb-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.item-thumb-badge{
  position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.65); color:#fff;
  font-size:8px; font-weight:700; text-align:center; padding:2px 0; line-height:1.3;
}
.item-row .name{ font-size:12.5px; font-weight:600; line-height:1.35; }
.item-row .cond{ font-size:11px; color:var(--muted); margin:2px 0; }
.item-row .price{ font-size:13px; font-weight:700; color:var(--navy); }
.item-row .qty{ font-size:11px; color:var(--muted); margin-top:3px; }

input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--navy); flex-shrink:0; margin-top:2px; cursor:pointer; }

.qty-stepper{ display:flex; align-items:center; gap:8px; margin-top:5px; }
.qty-stepper button{
  width:22px; height:22px; border-radius:7px; border:1px solid var(--border); background:#f8fafc;
  color:var(--navy); font-weight:800; font-size:13px; cursor:pointer; font-family:'Inter',sans-serif;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.qty-stepper button:disabled{ opacity:.4; cursor:not-allowed; }
.qty-stepper span{ font-size:12.5px; font-weight:800; color:var(--navy); min-width:14px; text-align:center; }

.del-btn{
  margin-left:auto; flex-shrink:0; background:none; border:none; color:var(--muted); cursor:pointer;
  padding:2px; display:flex; align-items:center;
}

.kr-bottombar{
  position:fixed; bottom:0; left:0; right:0; margin:0 auto;
  width:100%; max-width:430px; background:#fff; border-top:1px solid var(--border);
  box-shadow:0 -2px 10px rgba(0,0,0,0.06);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:12px; z-index:30;
}
.kr-bottombar label{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; flex-shrink:0; }
.kr-bottombar .tot{ flex:1; text-align:right; }
.kr-bottombar .tot .l{ font-size:10.5px; color:var(--muted); }
.kr-bottombar .tot .n{ font-size:16px; font-weight:800; color:var(--navy); }
.kr-bottombar .btn{ width:auto; padding:12px 22px; flex-shrink:0; }
.kr-bottombar .btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ==========================================================
   Komponen tambahan khusus alamat.php
   (rujukan visual: zip Figma "alamatuser")
   ========================================================== */

.alamat-card{ position:relative; }
.alamat-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.label-chip{
  background:#eceff1; color:#546e7a; font-size:10.5px; font-weight:800;
  padding:2px 9px; border-radius:20px; text-transform:uppercase;
}
.alamat-nama{ font-size:13px; font-weight:700; margin-bottom:3px; }
.alamat-full{ font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:10px; }
.alamat-actions{ display:flex; gap:16px; }
.alamat-actions a, .alamat-actions button{ font-size:12px; font-weight:700; color:var(--navy); background:none; border:none; padding:0; cursor:pointer; font-family:'Inter',sans-serif; }

.paste-card{ background:#e8f7fe; border-radius:16px; padding:16px; margin-bottom:14px; }

.wilayah-field{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:12px; border:1.5px solid var(--border); background:#fff;
  font-size:12.5px; font-family:'Inter',sans-serif; color:var(--text); text-align:left; cursor:pointer;
  margin-bottom:2px; line-height:1.5;
}

.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border); }
.switch{ position:relative; width:38px; height:22px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch .slider{ position:absolute; cursor:pointer; inset:0; background:#d1d5db; border-radius:22px; transition:.2s; }
.switch .slider:before{ content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background:var(--navy); }
.switch input:checked + .slider:before{ transform:translateX(16px); }
.switch input:disabled + .slider{ opacity:.5; cursor:not-allowed; }

.tag-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tag-option{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--muted); border:1.5px solid var(--border); border-radius:10px; padding:6px 12px; cursor:pointer; }
.tag-option input{ accent-color:var(--navy); width:14px; height:14px; margin:0; }

.picker-overlay{
  display:none; position:fixed; inset:0; z-index:60; background:#fff; flex-direction:column;
  max-width:430px; margin:0 auto;
}
.picker-search-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); }
.picker-search-bar input{
  flex:1; min-width:0; border:none; outline:none; background:#f0f2f5; border-radius:20px;
  padding:9px 14px; font-size:13px; font-family:'Inter',sans-serif;
}
.gps-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:12px 16px 0;
  padding:11px; border:1.5px solid var(--navy); border-radius:14px; background:#fff; color:var(--navy);
  font-size:13px; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer;
}
.picker-list{ flex:1; overflow-y:auto; padding-bottom:20px; }
.picker-letter{ padding:6px 16px; font-size:10.5px; font-weight:800; color:var(--accent); }
.picker-row{
  display:block; width:100%; text-align:left; padding:12px 16px; border:none; background:none;
  border-bottom:1px solid var(--border); font-size:13px; font-weight:600; color:var(--text);
  font-family:'Inter',sans-serif; cursor:pointer;
}

/* ==========================================================
   Komponen tambahan khusus checkout.php
   (rujukan visual dan kalkulasi: prototipe checkout.html — dijadikan
   acuan persis sesuai bagian 5.7 dokumen)
   ========================================================== */

.addr-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.addr-head .label{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; }
.addr-head .label svg{ color:var(--navy); flex-shrink:0; }
.addr-head .ganti{ font-size:13px; color:var(--navy); font-weight:700; }
.addr-name{ font-size:14px; font-weight:700; }
.addr-full{ font-size:13px; color:var(--text); line-height:1.5; }

.seller-card{ padding:0; overflow:hidden; }
.seller-head{ display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--border); }
.seller-head .name{ font-weight:700; font-size:14px; }
.product-row{ display:flex; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.product-row img{ width:56px; height:56px; border-radius:10px; object-fit:cover; flex-shrink:0; background:#eee; }
.product-name{ font-size:13px; font-weight:600; line-height:1.35; }
.product-cond{ font-size:12px; color:var(--muted); margin:2px 0; }
.product-price{ font-size:13px; font-weight:700; color:var(--navy); }
.product-qty{ font-size:12px; color:var(--muted); }

/* Watchwatch Instant = COD (2026-07-12): harga produk grup ini dicoret+dipudarkan
   selama Instant Jabodetabek dipilih, menandakan harga itu TIDAK ikut dibayar lewat
   Midtrans sekarang -- lihat checkout.php recalc(). */
.seller-items.cod-mode .product-price{ text-decoration:line-through; color:var(--muted); opacity:.75; }
.cod-note{
  font-size:11px; color:#e65100; background:#fff3e0; margin:0 16px 10px;
  padding:8px 10px; border-radius:8px; line-height:1.4;
}

.ship-title{ font-size:13px; font-weight:700; padding:12px 16px 6px; color:var(--text); }
.ship-option{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--border); cursor:pointer; }
.ship-option:last-of-type{ border-bottom:none; }
.ship-option input{ width:18px; height:18px; accent-color:var(--navy); flex-shrink:0; }
.ship-option .info{ flex:1; }
.ship-option .info .t{ font-size:13px; font-weight:700; }
.ship-option .info .s{ font-size:11.5px; color:var(--muted); }
.ship-option .price{ font-size:13px; font-weight:700; }

.addon-wrap{ padding:4px 16px 14px; }
.addon-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; }
.addon-row .t{ font-size:13px; }
.addon-row .t .f{ font-size:11.5px; color:var(--muted); display:block; }

.rincian-row{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; color:var(--text); }
.rincian-row .l{ color:var(--muted); }
.rincian-row.total{ border-top:1.5px solid var(--border); margin-top:6px; padding-top:12px; font-size:15px; font-weight:800; }
.rincian-row.total .l{ color:var(--text); font-weight:800; }
.rincian-row.total .r{ color:var(--navy); }

.bottombar{
  position:fixed; bottom:0; left:0; right:0; margin:0 auto;
  width:100%; max-width:430px; background:#fff; border-top:1px solid var(--border);
  box-shadow:0 -2px 10px rgba(0,0,0,0.06);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:14px; z-index:30;
}
.bottombar .totwrap .l{ font-size:11px; color:var(--muted); }
.bottombar .totwrap .n{ font-size:17px; font-weight:800; color:var(--navy); }
.bottombar button{
  background:var(--navy); color:#fff; border:none; border-radius:12px;
  padding:13px 26px; font-size:14px; font-weight:700; font-family:'Inter', sans-serif;
  cursor:pointer; white-space:nowrap;
}
.bottombar button:active{ background:var(--navy-dark); }
.bottombar button:disabled{ opacity:.6; cursor:not-allowed; }

.note{ font-size:11.5px; color:var(--muted); padding:10px 16px 4px; line-height:1.5; }

/* ==========================================================
   Komponen tambahan khusus menunggu_pembayaran.php
   (rujukan visual: prototipe menunggu_pembayaran.html)
   ========================================================== */

.mp-topbar{
  background:#fff; display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;
}
.mp-topbar svg{ width:20px; height:20px; cursor:pointer; }
.mp-topbar h1{ font-size:16px; font-weight:700; }

.status-card{ text-align:center; }
.clock-circle{
  width:64px; height:64px; border-radius:50%; background:#fff3e0; color:var(--amber);
  display:flex; align-items:center; justify-content:center; margin:6px auto 14px;
}
.status-card h2{ font-size:19px; font-weight:800; margin-bottom:6px; }
.status-card p.desc{ font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:20px; }

.tracker{ display:flex; align-items:flex-start; margin-bottom:22px; }
.tracker .step{ flex:1; text-align:center; position:relative; }
.tracker .step .dot{
  width:26px; height:26px; border-radius:50%; background:#eceff1; color:#90a4ae;
  display:flex; align-items:center; justify-content:center; margin:0 auto 6px; position:relative; z-index:2;
  font-size:11px; font-weight:800;
}
.tracker .step.active .dot{ background:var(--navy); color:#fff; }
.tracker .step span{ font-size:10.5px; color:var(--muted); font-weight:600; }
.tracker .step.active span{ color:var(--navy); font-weight:700; }
.tracker .step:not(:last-child)::after{
  content:""; position:absolute; top:13px; left:50%; width:100%; height:2px; background:#eceff1; z-index:1;
}

.btn-wa{
  background:#25d366; color:#fff; border:none; border-radius:12px; padding:13px 20px;
  font-size:14px; font-weight:700; font-family:'Inter',sans-serif; width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
}
.helper-text{ font-size:11.5px; color:var(--muted); text-align:center; padding:12px 4px; line-height:1.6; }
.helper-text b{ color:var(--text); }

.order-card .order-no{ text-align:center; font-weight:800; font-size:14px; letter-spacing:0.5px; padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.order-line{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; }
.order-line.muted{ color:var(--muted); }
.order-line.total{ border-top:1px solid var(--border); margin-top:6px; padding-top:10px; font-weight:800; font-size:14.5px; }
.order-line.total span:last-child{ color:var(--navy); }
.order-line.cod span:first-child{ text-decoration:line-through; color:var(--muted); opacity:.75; }
.order-line.cod b{ text-decoration:none; opacity:1; color:#e65100; font-size:10.5px; border:1px solid #e65100; border-radius:4px; padding:1px 4px; margin-left:4px; }

/* ---------- akun_pesanan.php / beri_penilaian.php ---------- */
.rating-picker{ display:flex; gap:8px; padding:6px 0 4px; }
.rating-picker .bintang{ cursor:pointer; }

/* ---------- blog.php / artikel_detail.php ---------- */
.kategori-tag{
  display:inline-block; font-size:10px; font-weight:800; color:var(--navy);
  background:rgba(26,35,126,.08); padding:3px 10px; border-radius:20px; margin-bottom:6px;
}
.article-card{ display:block; padding:0; margin-bottom:14px; overflow:hidden; }
.article-card img{ width:100%; height:160px; object-fit:cover; display:block; background:#eee; }
.article-card .body{ padding:12px 14px; }
.article-card .judul{ font-size:14px; font-weight:700; line-height:1.4; margin-bottom:4px; }
.article-card .meta{ font-size:11px; color:var(--muted); }

.konten-artikel{ font-size:13.5px; line-height:1.8; color:var(--text); }
.konten-artikel h1, .konten-artikel h2{ font-size:16px; font-weight:800; margin:18px 0 8px; color:var(--navy); }
.konten-artikel p{ margin-bottom:12px; }
.konten-artikel ul, .konten-artikel ol{ margin:0 0 12px 20px; }
.konten-artikel img{ width:100%; border-radius:10px; margin:12px 0; }
.konten-artikel a{ color:var(--navy); text-decoration:underline; }

/* ---------- beranda.php: Flash Sale ---------- */
.section-head .countdown{
  display:flex; align-items:center; gap:4px; background:rgba(26,35,126,.06);
  border-radius:10px; padding:6px 10px;
}
.section-head .countdown .seg-h, .section-head .countdown .seg-m, .section-head .countdown .seg-s{
  font-size:12px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums;
}
.section-head .countdown .sep{ font-size:11px; font-weight:700; color:var(--navy); }

.flash-card{
  min-width:150px; max-width:150px; background:#fff; border-radius:14px; overflow:hidden; flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.06); display:block;
}
.flash-card .thumb{ position:relative; }
.flash-card img{ width:100%; height:110px; object-fit:cover; display:block; background:#eee; }
.flash-card .body{ padding:10px; }
.flash-card .name{ font-size:11.5px; font-weight:700; min-height:32px; line-height:1.3; margin-bottom:6px; }
.flash-card .price-row{ display:flex; flex-direction:column; margin-bottom:6px; }
.flash-card .price-diskon{ font-size:13px; font-weight:800; color:var(--red); }
.flash-card .price-old{ font-size:10.5px; color:var(--muted); text-decoration:line-through; }
.flash-card .progress-kuota{ height:6px; background:var(--border); border-radius:10px; overflow:hidden; margin-bottom:4px; }
.flash-card .progress-bar{ height:100%; background:var(--red); border-radius:10px; }
.flash-card .progress-label{ font-size:9.5px; color:var(--muted); font-weight:700; }

/* ==========================================================
   Breakpoint desktop (2026-07-12) — container yang tadinya fixed 430px
   (dirancang mobile-only) dilebarkan di layar besar, TIDAK redesign total per
   halaman. product-grid dapat kolom tambahan supaya ruang ekstra tidak sia-sia
   kosong di kanan-kiri. Modal/bottom-sheet SENGAJA tidak ikut melebar (popup
   yang terlalu lebar terasa aneh, proporsinya memang seharusnya lebih kecil
   dari container utama).
   ========================================================== */
@media (min-width:900px){
  /* Redesign desktop (2026-07-14) -- sebelumnya .phone cuma melebar sampai 600px lalu
     berhenti, jadi terlihat seperti kotak HP kecil mengambang di tengah layar kosong.
     Sekarang .phone benar-benar memakai ruang layar lebar.
     .bottomnav DISEMBUNYIKAN total di desktop -- gantinya .topbar-desktop-nav yang
     tampil di baris atas (perbaikan 2026-07-14: sebelumnya bottomnav cuma dilebarkan,
     bukan disembunyikan, jadi KEDUA nav tampil sekaligus di desktop -- salah, harus
     saling meniadakan: mobile = bottomnav saja, desktop = topbar-desktop-nav saja).
     Ini aman untuk SEMUA halaman yang include includes/bottom_nav.php (beranda,
     belanja, lelang, po, akun) karena kelima-limanya kini juga punya markup
     .topbar-desktop-nav sendiri -- 4 lewat includes/topbar.php, 1 (akun.php) langsung
     di file itu sendiri (topbar sederhana, bukan topbar-full). Kalau nanti ada
     halaman baru yang include bottom_nav.php tanpa .topbar-desktop-nav, dia akan
     kehilangan nav di desktop -- wajib tambahkan juga di file itu.
     .actionbar/.kr-bottombar/.bottombar/.picker-overlay SENGAJA TETAP 600px -- itu
     bar transaksi (tombol beli/bayar/konfirmasi) yang tidak perlu selebar seluruh
     halaman, melebarkannya cuma bikin kosong di kiri-kanan tombol. */
  .phone{
    max-width:1100px;
    padding-bottom:0; /* bottomnav hilang di desktop, tidak perlu lagi ruang cadangan di bawah */
  }
  .bottomnav{ display:none; }
  .actionbar, .kr-bottombar, .bottombar, .picker-overlay{
    max-width:600px;
  }
  /* Foto produk_detail.php (2026-07-14) -- .pd-gallery img pakai width:100%, jadi
     ikut melebar sampai 1560px di layar besar dan jadi RAKSASA (sama akar masalah
     dengan banner sebelumnya). Dikunci lebar wajar + ditengahkan, konsisten dengan
     .actionbar dkk di atas -- ini halaman satu kolom (bukan galeri kiri/info kanan),
     jadi menyempitkan foto ke lebar wajar lebih masuk akal daripada membiarkannya
     memenuhi seluruh 1100-1560px .phone. */
  .pd-gallery, .pd-thumbs{
    max-width:520px; margin:0 auto;
  }
  .product-grid{
    grid-template-columns:repeat(5, 1fr);
  }
  .cat-row{
    overflow-x:visible; flex-wrap:wrap; justify-content:center; gap:26px; padding:8px 16px 14px;
  }
  /* topbar-full (beranda/belanja/lelang/po) jadi header desktop sungguhan: brand+menu
     horizontal+ikon di baris atas, kolom pencarian tidak lagi full-bleed edge-to-edge,
     strip "Dikirim dari Tangerang" disembunyikan (detail gaya app mobile). */
  .topbar.topbar-full{ padding:16px 32px 0; }
  .topbar-row1{ padding:0 0 12px; }
  .topbar-full .search-wrap{ margin:0 0 14px; max-width:480px; }
  .topbar-full .location-strip{ display:none; }
  .topbar-desktop-nav{ display:flex; gap:26px; }
  .footer-box{ display:block; }
  /* aspect-ratio:16/9 dilepas di desktop -- kalau tetap dipakai, begitu .phone
     melebar sampai 1100-1560px tingginya ikut membengkak sampai ~600-880px (jelas
     kebesaran, bukan lagi "banner"). Diganti height tetap yang naik bertahap tiap
     breakpoint, radius+margin kiri-kanan juga kembali (lihat catatan di .banner-slider). */
  .banner-slider{ aspect-ratio:unset; height:260px; border-radius:18px; margin:0 32px 14px; }
}

/* Breakpoint tambahan (2026-07-14) -- sebelumnya .phone berhenti di max-width:1100px
   mulai 900px dan TIDAK PERNAH melebar lagi walau layar 1440px/1920px/lebih besar,
   jadi masih terlihat sempit dengan ruang kosong besar di kiri-kanan pada monitor
   desktop biasa. Sekarang progresif seperti referensi Figma/versi lama: makin lebar
   layar, makin lebar juga .phone dan makin banyak kolom grid produk -- bukan cuma
   satu lompatan di 900px lalu mentok. */
@media (min-width:1280px){
  .phone{ max-width:1320px; }
  .product-grid{ grid-template-columns:repeat(6, 1fr); }
  .cat-row{ gap:32px; }
  .topbar.topbar-full{ padding:18px 48px 0; }
  .topbar-row1{ padding:0 0 14px; }
  .topbar-full .search-wrap{ max-width:560px; }
  .topbar-desktop-nav{ gap:32px; }
  .banner-slider{ height:300px; margin:0 48px 14px; }
}

@media (min-width:1600px){
  .phone{ max-width:1560px; }
  .product-grid{ grid-template-columns:repeat(7, 1fr); }
  .cat-row{ gap:38px; }
  .topbar.topbar-full{ padding:20px 64px 0; }
  .topbar-full .search-wrap{ max-width:620px; }
  .banner-slider{ height:340px; margin:0 64px 14px; }
}