:root {
    --bg: #f8fafc;
    --text: #172033;
    --muted: #667085;
    --card: #ffffff;
    --line: #e4e7ec;
    --primary: #2563eb;
    --primary-2: #38bdf8;
    --danger: #dc2626;
    --success: #16a34a;
    --warning: #f59e0b;
    --shadow: 0 16px 40px rgba(30, 41, 59, .10);
    --radius: 18px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dark {
    --bg: #101827;
    --text: #f8fafc;
    --muted: #a6b0c3;
    --card: #172033;
    --line: rgba(255, 255, 255, .10);
    --shadow: 0 18px 44px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.hidden { display: none !important; }

.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.topbar { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: white; font-size: 12px; }
.topbar-inner { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.topbar span, .topbar nav, .brand-link, .nav-actions, .main-nav, .rating, .price-row, .hero-actions, .section-head, .sale-head { display: flex; align-items: center; }
.topbar nav { gap: 18px; }
.lucide { width: 18px; height: 18px; stroke-width: 2.2; }
.nav-shell { display: flex; align-items: center; gap: 18px; padding: 14px 0; }
.brand-link { gap: 10px; min-width: max-content; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; color: white; background: linear-gradient(135deg, var(--primary), var(--primary-2)); font-weight: 900; box-shadow: var(--shadow); }
.brand-logo { height: 42px; width: auto; max-width: 170px; object-fit: contain; display: block; }
/* Pilihan metode pembayaran di checkout (Transfer / COD) */
.pay-methods { display: grid; gap: 10px; margin-bottom: 6px; }
.form-card label.pay-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.form-card label.pay-option:hover { border-color: var(--primary); }
.form-card label.pay-option input[type="radio"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; }
.pay-option span { display: flex; flex-direction: column; gap: 3px; }
.pay-option strong { font-size: 15px; }
.pay-option small { color: var(--muted); line-height: 1.45; }
.pay-option:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.cod-tag { display: inline-block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; background: #16a34a; color: #fff; vertical-align: middle; }
.site-footer .brand-logo { height: 48px; max-width: 200px; }
.brand-link strong { display: block; line-height: 1; letter-spacing: .01em; }
.brand-link b { color: var(--primary); }
.brand-link small { color: var(--muted); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.search-form { position: relative; flex: 1; max-width: 520px; }
.search-form .lucide { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-form input { width: 100%; height: 44px; border: 1px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--line) 60%, transparent); color: var(--text); padding: 0 84px 0 44px; outline: none; }
.search-form input:focus { border-color: color-mix(in srgb, var(--primary) 45%, transparent); background: var(--card); }
.search-form button { position: absolute; right: 5px; top: 5px; height: 34px; border: 0; border-radius: 999px; padding: 0 18px; color: white; background: var(--primary); font-weight: 700; cursor: pointer; }
.main-nav { gap: 4px; font-size: 14px; font-weight: 650; }
.main-nav a { padding: 10px 11px; border-radius: 12px; }
.main-nav a:hover, .icon-btn:hover { background: color-mix(in srgb, var(--line) 70%, transparent); }
.nav-actions { margin-left: auto; gap: 6px; }
.icon-btn, .circle-btn { border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.icon-btn { width: 40px; height: 40px; position: relative; }
.counter span { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--primary); color: white; font-size: 10px; font-weight: 800; }
.login-btn { height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 14px; }
.mobile-menu-btn { display: none; }

.hero { position: relative; width: min(1180px, calc(100% - 32px)); height: 460px; margin: 18px auto 0; overflow: hidden; border-radius: 28px; box-shadow: var(--shadow); background: #0f172a; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.38), rgba(0,0,0,.08)); }
.hero-content { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; color: white; max-width: 620px; margin-left: 54px; }
.eyebrow, .badge { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; padding: 6px 10px; background: rgba(255,255,255,.15); color: inherit; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { margin: 14px 0 10px; font-size: clamp(40px, 6vw, 70px); line-height: .95; letter-spacing: 0; }
.hero p { max-width: 520px; color: rgba(255,255,255,.82); font-size: 18px; }
.hero-actions { gap: 12px; margin-top: 14px; }
.btn { min-height: 42px; border: 0; border-radius: 999px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 800; }
.btn.primary { color: white; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.btn.ghost { color: white; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); }
.btn.light { color: var(--primary); background: white; }
.btn.outline { color: var(--text); background: transparent; border: 1px solid var(--line); }
.btn.full { width: 100%; }
.hero-control { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 999px; display: grid; place-items: center; color: white; background: rgba(255,255,255,.16); cursor: pointer; }
.hero-control.prev { left: 14px; }
.hero-control.next { right: 14px; }

.section, .page-wrap { padding: 54px 0 0; }
.section-head { justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.section-head h2, .page-head h1, .page-wrap h1 { margin: 0; font-size: clamp(28px, 3vw, 42px); letter-spacing: 0; }
.section-head p, .page-head p, .breadcrumb, .simple-hero p, .info-card p { color: var(--muted); }
.section-head a { color: var(--primary); font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.usp-card { display: flex; gap: 13px; align-items: center; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.usp-card > .lucide { width: 42px; height: 42px; padding: 10px; border-radius: 13px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.usp-card span { display: block; color: var(--muted); font-size: 13px; }
.category-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.category-pill { min-height: 92px; padding: 12px 8px; display: grid; justify-items: center; align-content: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-size: 13px; font-weight: 750; text-align: center; }
.category-pill .lucide { width: 30px; height: 30px; color: var(--primary); }

.sale-panel { border-radius: 26px; padding: 28px; color: white; background: linear-gradient(135deg, #ef4444, #f97316); box-shadow: var(--shadow); }
.sale-head { justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.sale-head h2 { margin: 0; font-size: 34px; }
.sale-head p { margin: 4px 0 0; color: rgba(255,255,255,.82); }
.sale-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.18); float: left; margin-right: 12px; }
.countdown { display: flex; gap: 8px; }
.countdown span { min-width: 46px; padding: 9px 10px; border-radius: 12px; background: rgba(0,0,0,.25); text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }
.flash-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
/* Kartu flash sale selalu berlatar putih -> warna teks dikunci gelap agar terbaca di mode dark. */
.flash-card { overflow: hidden; border-radius: 16px; background: white; color: #172033; }
.flash-card img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.flash-card strong, .flash-card span, .flash-card small { display: block; padding: 0 12px; }
.flash-card strong { height: 42px; margin-top: 10px; font-size: 13px; overflow: hidden; }
.flash-card span { color: var(--danger); font-weight: 900; font-size: 14px; }
.flash-card small { color: var(--muted); text-decoration: line-through; margin: 2px 0 12px; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.product-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-image { position: relative; display: block; overflow: hidden; background: color-mix(in srgb, var(--line) 55%, transparent); }
.product-image img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-image img { transform: scale(1.05); }
.badge-row { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { background: var(--warning); color: #1f2937; }
.badge.danger { background: var(--danger); color: white; }
.stock-badge { position: absolute; left: 10px; bottom: 10px; border-radius: 999px; padding: 4px 8px; background: rgba(255,255,255,.9); color: #111827; font-size: 11px; font-weight: 800; }
.wishlist-btn { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; color: var(--text); background: color-mix(in srgb, var(--card) 90%, transparent); box-shadow: var(--shadow); }
.wishlist-btn.active { color: white; background: var(--danger); }
.product-body { padding: 15px; }
.brand { margin: 0; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.product-name { display: block; min-height: 42px; margin: 4px 0 9px; font-weight: 700; line-height: 1.35; }
.rating { gap: 5px; color: var(--warning); font-size: 13px; }
.rating span { color: var(--muted); }
.price-row { justify-content: space-between; gap: 8px; margin-top: 12px; }
.price { color: var(--primary); font-size: 17px; }
.old-price { display: block; color: var(--muted); font-size: 12px; text-decoration: line-through; }
.add-cart { width: 40px; height: 40px; flex: 0 0 40px; color: white; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.promo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.promo-card { min-height: 210px; border-radius: 26px; padding: 30px; color: white; box-shadow: var(--shadow); }
.promo-card.blue { background: linear-gradient(135deg, #1d4ed8, #0ea5e9); }
.promo-card.coral { background: linear-gradient(135deg, #ea580c, #db2777); }
.promo-card h3 { margin: 16px 0 6px; font-size: 30px; }
.newsletter { border-radius: 28px; padding: 44px; color: white; text-align: center; background: linear-gradient(135deg, var(--primary), #4338ca, #111827); box-shadow: var(--shadow); }
.newsletter p { color: rgba(255,255,255,.78); }
.newsletter form { display: flex; max-width: 480px; margin: 24px auto 0; gap: 10px; }
.newsletter input { flex: 1; min-height: 46px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 0 16px; color: white; background: rgba(255,255,255,.14); outline: none; }

.breadcrumb { margin-bottom: 10px; font-size: 13px; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.sort-form select, .form-card input, .form-card select, .form-card textarea { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 14px; padding: 0 12px; color: var(--text); background: var(--card); outline: none; }
.catalog-layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; }
.filter-panel { position: sticky; top: 100px; align-self: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.filter-panel h3, .filter-panel h4 { margin: 0 0 12px; }
.filter-panel h4 { margin-top: 20px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.filter-panel a { display: block; padding: 9px 10px; border-radius: 11px; font-size: 14px; }
.filter-panel a.active, .filter-panel a:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); font-weight: 800; }
.empty-state, .info-card, .form-card, .summary-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.empty-state { padding: 42px; text-align: center; }

.detail-layout { display: grid; grid-template-columns: minmax(300px, 520px) 1fr; gap: 34px; align-items: start; }

/* Anak grid dan flex boleh menyusut lebih sempit dari isinya.

   Bawaan CSS, satu kolom grid tidak mau lebih sempit dari isi terlebarnya.
   Satu baris yang tidak bisa dipotong, misalnya deretan thumbnail, tabel, atau
   nomor resi yang panjang, cukup untuk memaksa seluruh kolom melebihi lebar
   layar HP. Isinya lalu terpotong di tepi kanan, dan sering tanpa bisa digulir
   sama sekali karena halaman induknya menyembunyikan luapan itu.

   Satu baris ini menutup seluruh keluarga masalah tersebut, bukan cuma satu
   halaman yang kebetulan ketahuan. */
.detail-layout > *, .checkout-layout > *, .cart-layout > *,
.promo-grid > *, .usp-grid > *, .footer-grid > * { min-width: 0; }
.gallery, .detail-info, .spec-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.gallery { padding: 14px; }
.main-image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--line); }
/* Baris thumbnail digulir mendatar, bukan memaksa lebar induknya.

   Sebelumnya tombolnya berlebar tetap tanpa izin menggulir. Akibatnya lebar
   terkecil baris ini (jumlah tombol x 70px) menjadi lebar terkecil seluruh
   kolom galeri, dan begitu produk punya lebih dari empat berkas, kolomnya
   melebihi lebar layar HP. Sisanya terpotong tanpa bisa dijangkau sama sekali,
   termasuk gambar utamanya yang ikut melebar. Video ikut menambah satu tombol,
   jadi produk yang punya video paling cepat terkena. */
.thumb-row {
    display: flex; gap: 10px; margin-top: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
}
.thumb-row button { flex: 0 0 70px; scroll-snap-align: start; border: 2px solid transparent; border-radius: 12px; padding: 3px; background: transparent; cursor: pointer; }
.thumb-row button:hover { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.thumb-row button.active { border-color: var(--primary); }
.thumb-row img { aspect-ratio: 1; object-fit: cover; border-radius: 9px; width: 100%; }

/* Video produk. Latarnya gelap supaya bilah kontrol bawaan peramban terbaca,
   dan object-fit contain supaya videonya tidak terpotong seperti foto. */
.main-video { background: #0b1220; object-fit: contain; }
.main-image[hidden], .main-video[hidden] { display: none; }

/* Thumbnail video memakai foto pertama sebagai latar, lalu diberi segitiga
   putar. Tanpa penanda ini pembeli tidak tahu ada video di situ. */
.thumb-row button.thumb-video { position: relative; }
.thumb-row button.thumb-video img { filter: brightness(.62); }
.thumb-row button.thumb-video .tanda-putar {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -58%);
    width: 0; height: 0;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
    pointer-events: none;
}
.thumb-row button.thumb-video em {
    position: absolute; left: 3px; right: 3px; bottom: 3px;
    font-style: normal; font-size: 9px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: #fff; text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
    pointer-events: none;
}
.detail-info { padding: 26px; }
.detail-info h1 { margin: 14px 0 10px; }
.rating.big { color: var(--warning); flex-wrap: wrap; }
.detail-price { margin: 22px 0; }
.detail-price strong { color: var(--primary); font-size: 34px; }
.detail-price span { display: block; color: var(--muted); text-decoration: line-through; }
.option-row { margin-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.option-row strong { width: 100%; }
.choice { position: relative; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; color: var(--text); background: var(--card); cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.choice:hover { border-color: var(--primary); color: var(--primary); }
/* Pilihan aktif per kategori (Warna/Varian), tetap menyala walau klik kategori lain. */
.choice.active {
    border-color: var(--primary); color: var(--primary); font-weight: 800;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}
.choice.active::before { content: "✓ "; font-weight: 900; }
.detail-actions { display: flex; gap: 10px; margin: 24px 0; }
.spec-card { padding: 18px; box-shadow: none; }
.spec-card div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.spec-card span { color: var(--muted); }

.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.category-card { position: relative; min-height: 220px; overflow: hidden; border-radius: 22px; color: white; padding: 22px; display: flex; flex-direction: column; justify-content: end; box-shadow: var(--shadow); }
.category-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.category-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)); z-index: -1; }
.category-card span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.16); margin-bottom: 10px; }
.category-card strong { font-size: 24px; }
.category-hero { position: relative; overflow: hidden; min-height: 260px; border-radius: 26px; margin-bottom: 24px; color: white; display: grid; align-content: end; padding: 30px; box-shadow: var(--shadow); }
.category-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.category-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.18)); z-index: -1; }
.category-hero .lucide { width: 42px; height: 42px; }

.cart-layout, .checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; margin-top: 22px; }
.cart-items { display: grid; gap: 12px; }
.cart-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.cart-row img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.qty { display: inline-flex; align-items: center; border-radius: 999px; background: color-mix(in srgb, var(--line) 60%, transparent); }
.qty button { width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; }
.qty span { min-width: 32px; text-align: center; font-weight: 800; }
.summary-card { padding: 20px; position: sticky; top: 100px; }
.summary-line { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.summary-line.total { font-size: 20px; border-bottom: 0; }
.summary-line.total strong { color: var(--primary); }
.form-card { display: grid; gap: 13px; padding: 22px; }
.form-card.narrow { max-width: 520px; margin-top: 18px; }
.form-card label { display: grid; gap: 7px; font-weight: 750; }
.form-card textarea { min-height: 100px; padding-top: 10px; resize: vertical; }
.mini-item { display: flex; gap: 10px; margin: 10px 0; font-size: 13px; }
.mini-item img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.simple-hero { border-radius: 28px; padding: 50px; color: white; background: linear-gradient(135deg, var(--primary), #111827); box-shadow: var(--shadow); }
.simple-hero h1 { margin: 12px 0 8px; }
/* Latar panel ini selalu gelap, sedangkan aturan umum di atas memberi warna
   abu-abu redup yang dimaksudkan untuk latar terang. Akibatnya kalimat
   penjelas di bawah judul nyaris tidak terbaca. Warnanya dikembalikan ke
   putih pudar supaya tetap kalah tegas dari judul tapi jelas terbaca. */
.simple-hero p { color: rgba(255, 255, 255, .88); max-width: 62ch; }
.info-card { margin-top: 18px; padding: 22px; }

.site-footer { margin-top: 64px; padding: 40px 0 24px; border-top: 1px solid var(--line); background: var(--card); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 28px; }
.footer-grid p, .footer-grid a { color: var(--muted); }
.footer-grid a { display: block; margin: 8px 0; }
/* Baris paling bawah kaki halaman: hak cipta toko di kiri, keterangan merek
   di kanan. Di layar sempit keduanya turun menjadi dua baris, bukan dipadatkan
   sampai terpotong. */
.footer-bottom {
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted); font-size: 13px;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 6px 16px;
}
.footer-merek { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.footer-merek a { color: var(--muted); font-weight: 700; text-decoration: none; }
.footer-merek a:hover { color: var(--primary); text-decoration: underline; }
.footer-pisah { opacity: .55; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 50; padding: 13px 16px; border-radius: 14px; color: white; background: #111827; box-shadow: var(--shadow); }

@media (max-width: 1050px) {
    .main-nav { display: none; position: absolute; left: 16px; right: 16px; top: 105px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
    .main-nav.open { display: grid; }
    .mobile-menu-btn { display: grid; }
    .category-strip { grid-template-columns: repeat(6, 1fr); }
    .flash-grid { grid-template-columns: repeat(3, 1fr); }
    .product-grid, .category-grid { grid-template-columns: repeat(3, 1fr); }
    .catalog-layout { grid-template-columns: 1fr; }
    .filter-panel { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
    .filter-panel h3 { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .container { width: min(100% - 24px, 1180px); }
    .topbar nav, .login-btn, .brand-link small, .search-form { display: none; }
    .nav-shell { gap: 10px; }
    .hero { width: calc(100% - 24px); height: 420px; border-radius: 22px; }
    .hero-content { margin-left: 28px; max-width: calc(100% - 56px); }
    .hero-control { display: none; }
    .usp-grid, .promo-grid, .cart-layout, .checkout-layout, .detail-layout, .footer-grid { grid-template-columns: 1fr; }
    .category-strip { grid-template-columns: repeat(3, 1fr); }
    .product-grid, .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .flash-grid { grid-template-columns: repeat(2, 1fr); }
    .sale-head, .section-head, .page-head { align-items: start; flex-direction: column; }
    .sale-panel, .newsletter, .simple-hero { padding: 24px; border-radius: 22px; }
    .newsletter form, .detail-actions { flex-direction: column; }
    .filter-panel { display: block; }
    .cart-row { grid-template-columns: 76px 1fr; }
    .cart-row img { width: 76px; }
    .cart-row > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
    .product-grid { grid-template-columns: 1fr; }
    .category-strip { grid-template-columns: repeat(2, 1fr); }
    .flash-grid, .category-grid { grid-template-columns: 1fr; }
}

/* --- Form alert & autentikasi --- */
.form-alert {
    max-width: 420px;
    margin: 0 auto 16px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    border: 1px solid var(--line);
}
.form-alert.error { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .35); color: var(--danger); }
.form-alert.success { background: rgba(22, 163, 74, .08); border-color: rgba(22, 163, 74, .35); color: var(--success); }
.form-foot { margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.form-foot a { color: var(--primary); font-weight: 600; text-decoration: none; }
.btn.full { width: 100%; justify-content: center; }
.form-card .btn.outline.full { margin-top: 10px; }

/* ==== Checkout: pencarian wilayah & pilihan kurir (Maukirim) ==== */
.region-picker { position: relative; display: block; }

/* ==========================================================================
   REKENING TUJUAN TRANSFER
   ==========================================================================
   Toko boleh punya rekening di beberapa bank. Bentuknya berbeda menurut
   jumlahnya, karena kebutuhan pembelinya juga berbeda:

     satu bank      ditulis lurus, tanpa kartu dan tanpa garis pemisah. Toko
                    sederhana tidak boleh terlihat rumit hanya karena
                    sistemnya sanggup lebih dari satu.
     beberapa bank  satu kartu per bank, BERTUMPUK ke bawah, bukan
                    bersebelahan. Nomor rekening adalah deretan angka panjang
                    yang harus disalin tanpa keliru, dan kolom yang menyempit
                    di layar HP membuat angkanya patah di tempat yang salah. */

.rekening-tujuan { display: grid; gap: 10px; margin: 4px 0 2px; }
.rekening-kartu { display: grid; gap: 2px; min-width: 0; }
.rekening-bank {
    display: block; font-size: 12px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.rekening-atas-nama { display: block; color: var(--muted); font-size: 12.5px; }

/* Bentuk berkartu hanya dipakai saat banknya lebih dari satu. */
.rekening-tujuan.banyak .rekening-kartu {
    padding: 11px 13px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 13px;
}
.rekening-tujuan.banyak .rekening-bank { color: var(--primary); }

/* ==========================================================================
   PEMBAYARAN QRIS
   ==========================================================================
   Kode QR harus tampil cukup besar untuk dipindai dari layar, tetapi tidak
   boleh melebar sampai memenuhi layar HP dan mendorong tombol unggah bukti
   jauh ke bawah. Sisi 240px sudah cukup untuk kamera ponsel masa kini. */

.qris-kode {
    display: flex; justify-content: center;
    margin: 12px 0;
    padding: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
}
.qris-kode img {
    display: block;
    width: 100%; max-width: 240px; height: auto;
    /* Latar putih dipaksa: kode QR di atas latar gelap tidak terbaca pemindai,
       dan mode gelap toko tidak boleh membuat pembayaran gagal. */
    background: #fff; border-radius: 8px;
}

/* Pratinjau kecil di halaman checkout, sekadar penanda bahwa tokonya memang
   punya QRIS. Yang dipindai nanti adalah yang di halaman pembayaran. */
.qris-pratinjau {
    display: flex; align-items: center; gap: 12px;
    margin: -2px 0 14px;
    padding: 11px 13px;
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-radius: 14px;
}
.qris-pratinjau[hidden] { display: none; }
.qris-pratinjau img {
    width: 58px; height: 58px; flex: 0 0 auto;
    object-fit: contain; background: #fff; border-radius: 9px; padding: 4px;
}
.qris-pratinjau strong { display: block; font-size: 13px; }
.qris-pratinjau small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Tujuan yang sudah dipilih, ditulis penuh dan boleh turun baris.
   Kolom isian di layar HP cuma memperlihatkan bagian awal namanya. */
.tujuan-terpilih {
    display: block; margin-top: 6px;
    padding: 8px 10px; border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    color: var(--text); font-size: 12.5px; font-weight: 700; line-height: 1.35;
    overflow-wrap: anywhere;
}
.tujuan-terpilih[hidden] { display: none; }
.region-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
    display: block; max-height: 260px; overflow-y: auto;
    background: var(--card, #fff); border: 1px solid var(--line, #e2e8f0);
    border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}
.region-results button {
    display: block; width: 100%; padding: 10px 14px; text-align: left;
    background: none; border: 0; border-bottom: 1px solid var(--line, #e2e8f0);
    font: inherit; font-size: 13px; color: inherit; cursor: pointer;
}
.region-results button:last-child { border-bottom: 0; }
.region-results button:hover:not(:disabled) { background: rgba(37, 99, 235, .08); }
.region-results button:disabled { color: var(--muted, #64748b); cursor: default; }

.courier-box { display: grid; gap: 8px; margin-bottom: 14px; }
.courier-hint { margin: 0; font-size: 13px; color: var(--muted, #64748b); }
.form-card label.courier-option {
    display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 14px 18px;
    border: 1px solid var(--line, #e2e8f0); border-radius: 14px; cursor: pointer; font-weight: 600;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-card label.courier-option:hover { border-color: color-mix(in srgb, var(--primary, #2563eb) 45%, var(--line, #e2e8f0)); }
.courier-option.active { border-color: var(--primary, #2563eb); background: rgba(37, 99, 235, .06); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #2563eb) 30%, transparent); }
/* Radio kecil saja, logo ekspedisi yang jadi bintangnya. */
.form-card .courier-option input[type="radio"] {
    width: 18px; height: 18px; min-height: 0; flex: 0 0 18px;
    margin: 0; padding: 0; accent-color: var(--primary, #2563eb); cursor: pointer;
}
.courier-option span { flex: 1; }
.courier-option small { display: block; color: var(--muted, #64748b); font-weight: 500; }

/* Tipe layanan ekspedisi.
   Namanya dibiarkan persis seperti nama resmi ekspedisinya (EZ, JAGOPACK,
   BOSSPACK, REGPACK), hanya tampilannya yang ditegaskan supaya pembeli
   langsung tahu layanan mana yang sedang ia pilih. */
.svc-tag {
    display: inline-block; margin: 5px 0 3px; font-style: normal;
    font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
    padding: 3px 10px; border-radius: 8px; color: var(--text, #172033);
    background: color-mix(in srgb, var(--primary, #2563eb) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary, #2563eb) 28%, transparent);
}
.svc-tag i {
    font-style: normal; font-weight: 700; font-size: 10px;
    letter-spacing: .09em; text-transform: uppercase;
    opacity: .6; margin-right: 7px;
}
.courier-option b { white-space: nowrap; font-size: 15px; }

/* Ongkir gratis / berdiskon.
   Rp 0 polos terbaca seperti ongkir yang belum terhitung, jadi ditulis tegas
   dan tarif aslinya dicoret supaya potongannya terlihat. */
.courier-option b.ongkir-gratis,
.courier-option b.ongkir-diskon {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.25;
}
.courier-option b.ongkir-gratis s,
.courier-option b.ongkir-diskon s {
    font-size: 12px; font-weight: 600; color: var(--muted, #64748b); text-decoration-thickness: 1px;
}
.courier-option b.ongkir-gratis span {
    font-size: 12px; font-weight: 800; letter-spacing: .04em;
    padding: 3px 9px; border-radius: 999px;
    background: #16a34a; color: #fff;
}
.courier-option b.ongkir-diskon span { color: #16a34a; }

/* Dipakai di rincian pesanan, menggantikan tulisan Rp 0 pada baris ongkir. */
.tanda-gratis-ongkir {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
    padding: 3px 9px; border-radius: 999px; background: #16a34a; color: #fff;
}

/* Logo ekspedisi sengaja dibuat besar dan berwarna penuh.
   Ini bagian dari kepercayaan: pembeli langsung melihat bahwa tokonya
   memang terhubung dengan ekspedisi besar, bukan sekadar tulisan nama. */
/* Kotaknya sengaja berbanding 2,25 : 1 mengikuti kanvas berkas logonya, dan
   padding-nya tipis saja, karena margin napas sudah ikut di dalam gambar. */
.courier-logo {
    width: 109px; height: 48px; flex: 0 0 109px; object-fit: contain;
    background: #fff; border-radius: 12px; padding: 3px 4px;
    border: 1px solid var(--line, #e2e8f0);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.courier-option.active .courier-logo { border-color: color-mix(in srgb, var(--primary, #2563eb) 40%, #fff); }
/* Versi ringkas untuk kartu lacak paket dan tempat sempit lainnya. */
.courier-logo-sm { width: 88px; height: 39px; flex: 0 0 88px; padding: 3px 4px; display: block; margin: 2px 0 4px; }
@media (max-width: 560px) {
    .form-card label.courier-option { gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
    .courier-logo { width: 85px; height: 38px; flex: 0 0 85px; }
    .courier-option b { font-size: 14px; }
}
.form-hint { margin: -6px 0 8px; }

/* ==== Kotak instruksi pembayaran ==== */
.payment-box {
    border: 1px dashed var(--primary, #2563eb); border-radius: 14px;
    padding: 16px; margin: 14px 0; background: rgba(37, 99, 235, .05);
}
.payment-box .amount { font-size: 26px; font-weight: 800; color: var(--primary, #2563eb); }
.payment-box p { margin: 6px 0; }
.proof-preview { max-width: 240px; border-radius: 12px; border: 1px solid var(--line, #e2e8f0); margin-top: 8px; }
.pay-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pay-status.unpaid { background: rgba(220, 38, 38, .1); color: #dc2626; }
.pay-status.waiting_verification { background: rgba(217, 119, 6, .12); color: #d97706; }
.pay-status.verified { background: rgba(22, 163, 74, .12); color: #16a34a; }
.pay-status.rejected { background: rgba(220, 38, 38, .15); color: #b91c1c; }
.pay-status.cancelled { background: rgba(220, 38, 38, .15); color: #b91c1c; }

/* Perbaikan: atribut hidden harus menang atas display:block */
.region-results[hidden] { display: none !important; }

/* ==== Riwayat pesanan: kartu klikabel dengan animasi hover ==== */
.order-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; margin-bottom: 10px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--card); cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.order-row:hover {
    transform: translateX(6px);
    border-color: var(--primary);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 18%, transparent);
}
.order-row-main { flex: 1; min-width: 0; }
.order-row-main strong { display: block; }
.order-row-main small { color: var(--muted); }
.order-row-total { white-space: nowrap; }
.order-row-arrow {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 999px; color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    transition: transform .15s ease, background .15s ease;
}
.order-row:hover .order-row-arrow { transform: translateX(4px); background: var(--primary); color: white; }

/* ==== Badge status pesanan berwarna ==== */
.order-status {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 800; white-space: nowrap;
}
.order-status.pending    { background: rgba(217, 119, 6, .14);  color: #d97706; }  /* menunggu = oranye */
.order-status.processing { background: rgba(37, 99, 235, .14);  color: #2563eb; }  /* diproses = biru */
.order-status.shipped    { background: rgba(14, 165, 233, .16); color: #0ea5e9; }  /* dikirim = biru muda */
.order-status.delivered  { background: rgba(22, 163, 74, .15);  color: #16a34a; }  /* selesai = hijau */
.order-status.cancelled  { background: rgba(220, 38, 38, .14);  color: #dc2626; }  /* batal = merah */

/* ==== Indikator interaksi menyeluruh (hover/fokus) ==== */
.btn:not(:disabled):hover { filter: brightness(1.08); }
.btn.outline:hover { border-color: var(--primary); color: var(--primary); filter: none; }
.login-btn:hover { border-color: var(--primary); color: var(--primary); }
.circle-btn:hover { transform: scale(1.1); }
.category-pill:hover, .category-card:hover { border-color: var(--primary); }
.category-pill, .category-card, .flash-card, .product-card { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.flash-card:hover, .product-card:hover { transform: translateY(-4px); }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus, .sort-form select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}
.order-status.returned   { background: rgba(147, 51, 234, .15); color: #9333ea; }  /* retur = ungu */

/* ==== Blog ==== */
/* min(300px, 100%) bukan 300px begitu saja: pada layar yang lebih sempit
   dari 300px, lebar terkecil yang dipaksakan itu justru membuat kolomnya
   melebihi layar dan isinya terpotong di tepi kanan. */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; margin-top: 8px; }
.blog-card {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.blog-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--shadow); }
.blog-card > img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.blog-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.blog-card-body small { color: var(--muted); }
.blog-card-body strong { font-size: 17px; line-height: 1.35; }
.blog-card-body p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.blog-more { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 800; font-size: 14px; }

.article-wrap { max-width: 780px; margin: 0 auto; }
.article-head h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; }
.article-head p { color: var(--muted); }
.article-cover { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 20px; margin: 18px 0; box-shadow: var(--shadow); }
.article-body { font-size: 16.5px; line-height: 1.75; }
.article-body h3 { margin: 28px 0 8px; font-size: 21px; }
.article-body p { margin: 0 0 14px; }
.article-body ul { margin: 0 0 14px; padding-left: 22px; }
.article-body li { margin-bottom: 6px; }
.article-foot { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 10px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ==== Promo ==== */
.promo-note { margin: 6px 0 0; font-weight: 700; color: var(--danger); }
.promo-item { display: flex; flex-direction: column; }
.promo-deadline { margin: 8px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--danger); }
.faq-body h3 { border-bottom: 1px solid var(--line); padding-bottom: 6px; }

/* ==== Ajakan ulasan setelah pesanan selesai ==== */
.review-prompt { border: 2px solid color-mix(in srgb, var(--warning) 55%, transparent); background: color-mix(in srgb, var(--warning) 7%, var(--card)); }
.review-prompt h3 { margin-top: 0; }
#ulasan { scroll-margin-top: 90px; }

/* ==== Form tulis ulasan ==== */
.review-form { display: grid; gap: 14px; }
.review-label { display: block; margin-bottom: 6px; font-weight: 750; font-size: 14px; }
.review-form textarea {
    width: 100%; min-height: 110px; resize: vertical;
    border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
    background: var(--bg); color: var(--text); outline: none;
}
.review-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
/* Bintang klikabel: semua bintang sampai yang dipilih ikut menyala */
.star-picker { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-option { cursor: pointer; }
.star-option input { position: absolute; opacity: 0; pointer-events: none; }
.star-option span { font-size: 32px; line-height: 1; color: color-mix(in srgb, var(--muted) 45%, transparent); transition: color .1s, transform .1s; }
.star-option:hover span, .star-option:hover ~ .star-option span { color: var(--warning); }
.star-option:has(input:checked) span, .star-option:has(input:checked) ~ .star-option span { color: var(--warning); }
.star-option:hover span { transform: scale(1.15); }

/* --- Lacak paket (timeline perjalanan) --- */
.track-card h3 { margin-bottom: 14px; }
.track-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 16px; margin-bottom: 4px;
    border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--line) 25%, transparent); }
.track-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.track-head span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.track-head strong { font-size: 14px; word-break: break-word; }
.track-head small { color: var(--muted); font-size: 11px; }
.track-status { color: var(--primary); }

.track-list { list-style: none; margin: 18px 0 0; padding: 0 0 0 6px; }
.track-list li { position: relative; display: flex; gap: 14px; padding: 0 0 20px 20px; }
.track-list li::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.track-list li:last-child { padding-bottom: 0; }
.track-list li:last-child::before { display: none; }
.track-dot { position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 999px;
    background: var(--bg); border: 2px solid var(--line); }
.track-list li.now .track-dot { border-color: var(--primary); background: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.track-body { display: flex; flex-direction: column; gap: 3px; }
.track-body strong { font-size: 14px; }
.track-list li.now .track-body strong { color: var(--primary); }
.track-loc, .track-body time { color: var(--muted); font-size: 12px; }
.track-empty { color: var(--muted); margin: 16px 0 0; }
.track-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

@media (max-width: 620px) { .track-head { grid-template-columns: 1fr; } }

/* Tautan "Lupa password" di form masuk */
.form-forgot { margin: -4px 0 14px; text-align: right; font-size: 13px; }
.form-forgot a { color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.form-forgot a strong { color: var(--primary); }
.form-forgot a:hover strong { text-decoration: underline; }

/* ==== Notifikasi popup ====
   Muncul di tengah layar setelah sebuah tindakan selesai. Bisa ditutup lewat
   tombol, tombol Esc, atau klik di luar kotaknya, dan menutup sendiri setelah
   beberapa detik. Hitungan mundurnya berhenti selama kursor berada di atas
   kotak, supaya pesan panjang tidak keburu hilang saat sedang dibaca. */
.popup-lapis {
    position: fixed; inset: 0; z-index: 9000;
    display: grid; place-items: center; padding: 20px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .18s ease;
}
.popup-lapis.tampil { opacity: 1; }

.popup-kotak {
    position: relative; overflow: hidden;
    width: min(430px, 100%);
    border: 1px solid var(--line, #e4e7ec);
    border-radius: 18px;
    background: var(--card, #fff);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    text-align: center;
    padding: 30px 26px 22px;
    transform: translateY(10px) scale(.97);
    transition: transform .2s cubic-bezier(.2, .9, .3, 1.2);
}
.popup-lapis.tampil .popup-kotak { transform: none; }

.popup-ikon {
    width: 58px; height: 58px; margin: 0 auto 16px;
    display: grid; place-items: center; border-radius: 50%;
}
.popup-ikon svg { width: 30px; height: 30px; stroke-width: 2.4; }
.popup-sukses .popup-ikon { background: rgba(22, 163, 74, .13); color: #16a34a; }
.popup-galat  .popup-ikon { background: rgba(220, 38, 38, .13); color: #dc2626; }
.popup-info   .popup-ikon { background: rgba(37, 99, 235, .13); color: #2563eb; }

.popup-kotak h3 {
    margin: 0 0 8px; font-size: 19px; line-height: 1.3;
    color: var(--text, #172033);
}
.popup-kotak p {
    margin: 0; font-size: 14.5px; line-height: 1.6;
    color: var(--muted, #667085);
}
.popup-aksi { margin-top: 20px; }
.popup-aksi button {
    min-width: 130px; min-height: 42px;
    border: 0; border-radius: 999px; padding: 0 22px;
    font-weight: 800; font-size: 14.5px; color: #fff; cursor: pointer;
    background: var(--primary, #2563eb);
}
.popup-galat .popup-aksi button { background: #dc2626; }
.popup-aksi button:hover { filter: brightness(1.08); }
.popup-aksi button:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }

/* Garis waktu tipis di bawah kotak sebagai penanda sisa waktu. */
.popup-waktu {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    transform-origin: left center; background: var(--primary, #2563eb);
    opacity: .5;
}
.popup-galat .popup-waktu { background: #dc2626; }

@media (prefers-reduced-motion: reduce) {
    .popup-lapis, .popup-kotak { transition: none; }
    .popup-waktu { display: none; }
}

/* Di layar HP popup dibuat mengisi lebar dan tombolnya melebar penuh, supaya
   mudah ditekan dengan ibu jari tanpa perlu membidik. */
@media (max-width: 560px) {
    .popup-lapis { padding: 14px; place-items: center; }
    .popup-kotak { padding: 26px 20px 20px; border-radius: 20px; }
    .popup-ikon { width: 52px; height: 52px; margin-bottom: 14px; }
    .popup-kotak h3 { font-size: 17.5px; }
    .popup-kotak p { font-size: 14px; }
    .popup-aksi button { width: 100%; min-height: 46px; }
}

/* Bagian yang harus dibetulkan pembeli ditandai sebentar setelah popup
   ditutup, supaya dia langsung tahu ke mana harus melihat. Memakai outline,
   bukan border, agar tidak ada satu piksel pun yang bergeser. */
.disorot {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 4px;
    border-radius: 12px;
    animation: kedip-sorot 2.4s ease;
}
@keyframes kedip-sorot {
    0%, 100% { outline-color: transparent; }
    12%, 70% { outline-color: var(--primary, #2563eb); }
}
@media (prefers-reduced-motion: reduce) {
    .disorot { animation: none; }
}

/* Tombol Checkout di halaman produk.
   Warnanya sengaja berbeda dari Tambah ke Keranjang supaya dua tombol
   utama ini tidak tertukar, tapi tetap ikut warna tema toko lewat
   color-mix agar cocok di semua pilihan warna. */
.detail-actions .label-pendek { display: none; }
.btn.tombol-checkout {
    color: #fff;
    background: color-mix(in srgb, var(--primary) 72%, #0f172a);
    border: 1px solid color-mix(in srgb, var(--primary) 55%, #0f172a);
}
.btn.tombol-checkout:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Kotak kode voucher di checkout */
.voucher-box { display: flex; gap: 8px; align-items: stretch; margin-bottom: 6px; }
.voucher-box input { flex: 1; min-width: 0; }
.voucher-box .btn { flex: 0 0 auto; white-space: nowrap; }
.voucher-pesan { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #16a34a; }
.voucher-pesan.gagal { color: #dc2626; }
.summary-line .potongan { color: #16a34a; }

/* ==========================================================================
   TAMPILAN VERSI PONSEL
   ==========================================================================
   Seluruh isi bagian ini berada di dalam media query, jadi tampilan versi
   desktop TIDAK tersentuh sama sekali.

   Batas lebarnya sengaja memakai angka yang sudah dipakai berkas ini
   (760px dan 560px), bukan angka baru. Kalau memakai angka baru, akan ada
   rentang lebar sempit yang perilakunya ikut berubah tanpa disengaja,
   misalnya tablet yang tadinya tiga kolom mendadak jadi dua kolom.

   Ditulis paling bawah dengan sengaja: aturan lama yang mengatur hal yang
   sama ada di atas, dan pada kekhususan CSS yang setara, aturan yang ditulis
   belakangan yang menang. Jadi bagian ini tidak perlu memakai !important.
   ========================================================================== */

/* --- Rentang ponsel dan tablet kecil (sampai 760px) -------------------- */
@media (max-width: 760px) {

    /* 1. KEPALA HALAMAN, memperbaiki bug.
       .brand-link memakai min-width: max-content, sehingga nama toko yang
       panjang memaksa lebar kepala halaman melebihi lebar layar. Karena
       .nav-actions didorong ke kanan dengan margin-left: auto, ikon keranjang
       dan wishlist ikut terdorong keluar layar dan tidak bisa disentuh
       pembeli sama sekali. Nama toko sekarang boleh menyusut dan dipotong. */
    .nav-shell { gap: 8px; padding: 10px 0; }
    .brand-link { min-width: 0; flex: 1 1 auto; overflow: hidden; gap: 8px; }
    .brand-link > span { min-width: 0; overflow: hidden; }

    /* Di kepala halaman versi HP, logo dan nama toko tidak dipasang bersamaan.

       Lebar yang tersisa untuk nama toko cuma sekitar 80px, dan itu memangkas
       nama seperti "Green Sweet Stevia" menjadi "Green ...". Yang terpotong
       justru nama tokonya sendiri, hal pertama yang dicari pembeli yang baru
       datang dari iklan dan belum tahu sedang berada di toko siapa.

       Karena itu: BILA toko punya logo, logonya yang dipakai, dan diberi
       ruang lebih lega. Logo toko hampir selalu sudah memuat nama tokonya.
       Bila toko BELUM punya logo, yang tampil kotak inisial kecil, dan nama
       tokonya tetap ditulis penuh karena ruangnya memang cukup.

       Nama lengkapnya tetap ada di judul tab peramban dan di kaki halaman,
       jadi tidak ada yang benar-benar hilang. */
    /* max-width 100% wajib ada. .brand-link boleh menyusut agar ikon keranjang
       tetap masuk layar, dan tanpa batas ini logonya ikut terpotong di tepi
       kanan pada layar paling sempit. object-fit: contain menjaga bentuknya
       tetap sebanding saat menyusut. */
    .nav-shell .brand-logo { height: 38px; max-width: min(168px, 100%); }
    .nav-shell .brand-logo + span { display: none; }
    .nav-shell .brand-mark + span strong {
        font-size: 14px; line-height: 1.18; white-space: normal;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; overflow-wrap: anywhere;
    }
    .nav-actions { flex: 0 0 auto; gap: 2px; }
    .icon-btn { width: 38px; height: 38px; }

    /* Kartu isian: anaknya boleh menyusut lebih sempit dari isinya.
       Kolom grid bawaan menolak lebih sempit dari isi terlebarnya, sehingga
       satu baris yang tidak bisa dipotong cukup untuk membuat seluruh kartu
       melebihi lebar layar. */
    .form-card > * { min-width: 0; }

    /* Tiga metode pembayaran, bukan lagi dua. Kartu pilihan dirapatkan
       sedikit supaya ketiganya tetap terlihat sekali pandang di layar HP,
       tanpa mengecilkan tinggi sentuhnya di bawah 44px. */
    .pay-methods { gap: 8px; }
    .form-card label.pay-option { padding: 12px 13px; gap: 10px; }
    .pay-option strong { font-size: 14px; }
    .pay-option small { font-size: 11.5px; line-height: 1.4; }
    .qris-pratinjau { padding: 10px; gap: 10px; }
    .qris-pratinjau img { width: 50px; height: 50px; }
    .qris-kode { padding: 10px; }
    .qris-kode img { max-width: 210px; }

    /* Satu baris riwayat pesanan memuat nomor pesanan, tanggal, status, total,
       dan tanda panah. Digabung sebaris, semuanya butuh sekitar 330px, lebih
       lebar dari isi kartu di layar HP, dan nominal totalnya yang paling ujung
       ikut terpotong. Sekarang dipecah dua baris: identitas pesanan di atas,
       status dan nominalnya di bawah. */
    .order-row { flex-wrap: wrap; row-gap: 9px; gap: 8px; padding: 12px; }
    .order-row-main { flex: 1 1 100%; }
    .order-row .order-status { order: 2; }
    .order-row-total { order: 3; margin-left: auto; }
    .order-row-arrow { order: 4; }
    /* Efek geser saat disentuh dimatikan di HP: layarnya sempit, dan
       pergeseran 6px justru membuat tepi kanannya keluar layar. */
    .order-row:hover { transform: none; }

    /* 2. DAFTAR PRODUK dua kolom sampai layar paling sempit sekalipun.
       minmax(0, 1fr) dipakai supaya nama produk yang panjang tidak ikut
       melebarkan kolomnya. */
    .product-grid,
    .flash-grid,
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    /* 3. BAR KEPERCAYAAN. Empat kartu selebar layar memakan sepertiga layar
       hanya untuk hiasan, padahal pembeli datang untuk melihat produk. */
    .usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
    .usp-card { padding: 11px 12px; gap: 9px; border-radius: 14px; }
    .usp-card > .lucide { width: 32px; height: 32px; padding: 7px; border-radius: 10px; }
    .usp-card strong { font-size: 12.5px; line-height: 1.25; }
    .usp-card span { font-size: 10.5px; line-height: 1.3; }

    /* 4. BANNER UTAMA.
       420px pada layar setinggi 812px berarti banner memakan separuh layar
       pertama, sebelum pembeli sempat melihat satu produk pun.

       Tingginya dipendekkan, TAPI ukuran tulisannya harus ikut dikecilkan.
       Kalau hanya kotaknya yang dipendekkan, judul 40px dan paragraf 18px
       tetap memakai ukuran desktop, isinya meluap, dan karena kotak ini
       memakai overflow: hidden, tulisan bawah beserta tombolnya terpotong
       begitu saja.

       Judul dan paragraf juga dipotong pada jumlah baris tertentu. Isi
       banner ditulis sendiri oleh pemilik toko dan panjangnya tidak bisa
       ditebak; tanpa batas baris, satu kalimat panjang kembali merusak
       susunannya. */
    .hero { height: 300px; margin-top: 12px; }
    .hero-content { margin-left: 20px; max-width: calc(100% - 40px); }
    .hero .eyebrow { padding: 4px 9px; font-size: 10px; }
    .hero h1 {
        margin: 8px 0 6px;
        font-size: 26px; line-height: 1.14;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hero p {
        max-width: 100%; font-size: 13.5px; line-height: 1.45;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hero-actions { gap: 8px; margin-top: 12px; }
    .hero-actions .btn { min-height: 38px; padding: 0 15px; font-size: 13px; }

    /* 5. JARING PENGAMAN. Kalau nanti ada isi baru yang kelebaran, halaman
       tidak ikut menggulir ke samping. Gulir mendatar membuat isi di tepi
       kanan tidak pernah terlihat, dan itulah yang tadi menyembunyikan ikon
       keranjang tanpa ketahuan. */
    html, body { overflow-x: hidden; }
}

/* --- Khusus ponsel (sampai 560px) --------------------------------------
   Perapatan tulisan dan jarak hanya berlaku di sini. Pada tablet kecil
   (561px sampai 760px) ukuran tulisannya tetap seperti sebelumnya, karena
   di layar selebar itu tulisan kecil justru terlihat janggal. */
@media (max-width: 560px) {

    .product-card { border-radius: 14px; }
    .product-body { padding: 8px 9px 10px; }
    /* 9px terlalu kecil dibaca di layar HP; 10px masih terasa sekunder
       tetapi tidak memaksa pembeli mendekatkan layar. */
    .brand { font-size: 10px; letter-spacing: .04em; }

    /* Nama produk dipotong dua baris. min-height 42px yang lama menyisakan
       ruang kosong pada nama pendek, dan di kartu sekecil ini ruang kosong
       itu terasa boros. */
    .product-name {
        min-height: 0; margin: 3px 0 5px;
        font-size: 12.5px; line-height: 1.32;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .rating { gap: 3px; font-size: 10.5px; }
    .price-row { margin-top: 7px; gap: 4px; }
    .price { font-size: 15px; }
    .old-price { font-size: 10.5px; }

    /* Tombol tetap 32px: masih nyaman disentuh jari, tapi tidak lagi
       mendominasi kartu sekecil ini. */
    .add-cart { width: 32px; height: 32px; flex: 0 0 32px; }
    .add-cart .lucide { width: 16px; height: 16px; }
    .wishlist-btn { width: 30px; height: 30px; top: 6px; right: 6px; }
    .wishlist-btn .lucide { width: 15px; height: 15px; }

    .badge-row { left: 6px; top: 6px; gap: 4px; }
    .badge { padding: 3px 7px; font-size: 10px; letter-spacing: .03em; }
    .stock-badge { left: 6px; bottom: 6px; padding: 3px 7px; font-size: 10px; }

    /* Judul bagian. clamp(28px, 3vw, 42px) memberi 28px di ponsel, terlalu
       besar untuk judul yang hanya menandai kelompok produk. */
    .section-head h2,
    .page-head h1,
    .page-wrap h1 { font-size: 20px; }
    .section-head { margin-bottom: 14px; gap: 2px; }
    .section-head p,
    .page-head p { font-size: 12.5px; }
    .section-head a { font-size: 13px; }
    .section, .page-wrap { padding-top: 32px; }

    .sale-panel { padding: 16px; border-radius: 18px; }
    .sale-head { margin-bottom: 14px; gap: 6px; }
    .sale-head h2 { font-size: 22px; }
    .sale-head p { font-size: 12.5px; }

    .info-card { padding: 16px; }
    .info-card h3 { font-size: 17px; }
    .info-card p { font-size: 12.5px; }

    .hero { height: 265px; }
    .hero-content { margin-left: 16px; max-width: calc(100% - 32px); }
    .hero h1 { font-size: 22px; margin: 6px 0 5px; }
    .hero p { font-size: 12.5px; -webkit-line-clamp: 3; }
    .hero-actions { margin-top: 10px; }
    .hero-actions .btn { min-height: 36px; padding: 0 13px; font-size: 12.5px; }
    .category-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

    /* TABEL SPESIFIKASI.
       Susunan kiri-kanan butuh lebar. Di layar ponsel, nilai yang panjang
       seperti "Cuci terbalik, hindari pemutih, setrika suhu sedang" terdorong
       ke kanan lalu membungkus rata kanan, sehingga barisnya terlihat miring
       dan sulit dibaca. Di sini labelnya ditaruh di atas, nilainya di bawah,
       sama-sama rata kiri. */
    .spec-card { padding: 14px 15px; }
    .spec-card div {
        display: block; padding: 9px 0;
    }
    .spec-card span {
        display: block; margin-bottom: 2px;
        font-size: 11px; font-weight: 700;
        letter-spacing: .04em; text-transform: uppercase;
    }
    .spec-card strong { display: block; font-size: 13.5px; line-height: 1.4; }
    .spec-card h3 { font-size: 16px; }
}

/* --- Layar sangat sempit (sampai 400px) --------------------------------
   Tetap dua kolom, hanya jaraknya yang dirapatkan lagi. Aturan lama justru
   menjadikannya satu kolom di sini, dan itulah yang membuat satu produk
   memakan separuh layar. */
@media (max-width: 400px) {
    .product-grid,
    .flash-grid,
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .product-body { padding: 7px 8px 9px; }
    .product-name { font-size: 12px; }
    .price { font-size: 14px; }
    /* Nama kategori 24px tidak muat di kartu selebar 145px, dan huruf yang
       lewat batas terpotong begitu saja tanpa titik-titik, jadi pembeli tidak
       tahu ada yang hilang. Dikecilkan dan diizinkan turun baris. */
    .category-card strong { font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
    .category-card { min-height: 170px; padding: 16px; }
    .category-card span { width: 36px; height: 36px; margin-bottom: 8px; }
}

/* ==========================================================================
   TOMBOL BELI DI HALAMAN PRODUK, VERSI PONSEL
   ==========================================================================
   Di layar kecil tiga tombol yang ditumpuk memakan hampir satu layar
   penuh. Dua tombol beli disandingkan sebaris, wishlist turun ke bawah. */
@media (max-width: 760px) {
    .detail-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin: 18px 0;
    }
    .detail-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 13.5px; }
    .detail-actions .btn .lucide { width: 16px; height: 16px; }
    /* Wishlist mengambil satu baris sendiri di bawah dua tombol beli. */
    .detail-actions .btn.outline { flex: 1 0 100%; }
    .detail-actions .label-panjang { display: none; }
    .detail-actions .label-pendek { display: inline; }
}

/* ==========================================================================
   PERBAIKAN HALAMAN CHECKOUT & PEMBAYARAN VERSI PONSEL
   ==========================================================================
   Sama seperti blok di atas: seluruhnya di dalam media query, tampilan versi
   desktop tidak tersentuh. Batas lebarnya juga memakai angka yang sudah
   dipakai berkas ini.
   ========================================================================== */

/* Tautan yang HANYA ada di menu ponsel.
   Disembunyikan secara bawaan, lalu dimunculkan di dalam media query di
   bawah. Aturan bawaan ini wajib ada: tanpa itu tautannya ikut muncul di
   bilah menu versi desktop, padahal di sana akun dan bantuan sudah punya
   tempatnya sendiri di kanan atas. */
.hanya-ponsel, .nav-pisah { display: none; }

@media (max-width: 760px) {
    .hanya-ponsel { display: flex; align-items: center; gap: 8px; }
    .nav-pisah {
        display: block; height: 1px; margin: 6px 2px;
        background: var(--line);
    }
    .main-nav .hanya-ponsel { font-weight: 750; }
    .main-nav .hanya-ponsel .lucide { width: 16px; height: 16px; opacity: .75; }
}

@media (max-width: 560px) {

    /* --- 1. Daftar pilihan ekspedisi -------------------------------------
       Aturan lama memakai flex-wrap: wrap, sehingga logo, nama, tipe layanan,
       keterangan asuransi, dan harga membungkus semaunya. Urutannya jadi
       berbeda-beda antar baris dan sulit dibandingkan.

       Diganti kisi tetap empat kolom, jadi setiap baris tersusun sama:
           [pilih] [logo] [nama + layanan + asuransi] [harga]
       Nama dan harga selalu sejajar di baris pertama, jadi pembeli bisa
       membandingkan harga antar ekspedisi hanya dengan menyusuri kolom kanan. */
    .form-card label.courier-option {
        display: grid;
        grid-template-columns: 18px 58px minmax(0, 1fr) auto;
        align-items: start;
        gap: 3px 9px;
        padding: 11px 12px;
        flex-wrap: nowrap;
    }
    .form-card .courier-option input[type="radio"] {
        grid-column: 1; grid-row: 1; align-self: center; margin-top: 1px;
    }
    .courier-option .courier-logo {
        grid-column: 2; grid-row: 1; align-self: center;
        width: 58px; height: 27px; flex: 0 0 58px; padding: 2px 3px; border-radius: 8px;
    }
    .courier-option > span { grid-column: 3; grid-row: 1; min-width: 0; }
    /* Harga sejajar dengan nama ekspedisi, bukan di tengah barisnya. Tinggi
       tiap baris berbeda-beda tergantung panjang nama layanan, dan harga yang
       melayang di tengah membuat kolom kanan terlihat naik turun. */
    .courier-option > b {
        grid-column: 4; grid-row: 1; align-self: start;
        font-size: 14px; text-align: right; line-height: 1.3;
    }
    .courier-option > span > strong { font-size: 13.5px; }
    .courier-option small { font-size: 10.5px; line-height: 1.35; margin-top: 2px; }

    /* Nama layanan ekspedisi.
       Kata "LAYANAN" hanya label, bukan bagian nama resminya, dan di layar
       sempit label itu mendorong nama aslinya jadi beberapa baris. Labelnya
       disembunyikan, nama resminya tetap utuh apa adanya.

       Bentuk pil juga dilepas di sini: nama panjang seperti
       "LION PARCEL JAGOPACK" membungkus jadi dua baris, dan pil dua baris
       dengan garis tepi terlihat janggal sekaligus membuat tinggi tiap baris
       daftar berbeda-beda. Jadi cukup tulisan tebal berwarna. */
    .svc-tag {
        display: block; margin: 2px 0 1px; padding: 0;
        font-size: 11.5px; font-weight: 800; line-height: 1.3;
        background: none; border: 0; border-radius: 0;
        color: color-mix(in srgb, var(--primary) 78%, var(--text));
    }
    .svc-tag i { display: none; }

    /* Harga ongkir gratis atau berdiskon tetap rapi di kolom kanan. */
    .courier-option b.ongkir-gratis,
    .courier-option b.ongkir-diskon { align-items: flex-end; }
    .courier-option b.ongkir-gratis span { font-size: 10px; padding: 2px 7px; }

    /* --- 2. Kotak instruksi pembayaran -----------------------------------
       Nominal 26px pada layar 390px membuat kotaknya seperti mengambil alih
       halaman. Dikecilkan supaya tetap menonjol tanpa mendominasi. */
    .payment-box { padding: 13px 14px; margin: 11px 0; border-radius: 12px; }
    .payment-box .amount { font-size: 21px; }
    .payment-box p { margin: 5px 0; font-size: 13px; }
    .payment-box p small { font-size: 11.5px; line-height: 1.45; display: block; }
    .payment-box hr { margin: 9px 0; }

    /* --- 3. Rincian pesanan ----------------------------------------------
       Baris-barisnya terlalu renggang untuk layar ponsel, sehingga satu
       rincian sederhana memakan hampir satu layar penuh. */
    .summary-card { padding: 14px 15px; position: static; }
    .summary-card h3 { font-size: 16px; margin-bottom: 4px; }

    /* Baris rincian untuk layar sempit.

       Tetap dua kolom, tetapi kolom nominal dibuat sesempit isinya saja
       supaya kolom keterangan mendapat sisa lebarnya. Sempat dicoba
       memakai float agar keterangan bisa memakai lebar penuh, tetapi
       nominalnya malah turun ke baris berikutnya pada label yang panjang,
       sehingga tiap baris jadi dua tingkat. */
    .summary-line { padding: 8px 0; gap: 8px; font-size: 13px; align-items: flex-start; }
    .summary-line > span { flex: 1 1 auto; min-width: 0; }
    .summary-line > strong { flex: 0 0 auto; white-space: nowrap; }
    .summary-line small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.45; }

    /* Baris total dibedakan jelas: inilah angka yang benar-benar dibayar. */
    .summary-line.total {
        font-size: 15px; margin-top: 4px; padding: 12px 12px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--primary) 8%, transparent);
    }
    .summary-line.total > strong { font-size: 18px; color: var(--primary); }

    /* Kartu formulir checkout ikut dirapatkan supaya seirama. */
    .form-card { padding: 14px 15px; gap: 11px; }
    .form-card h3 { font-size: 16px; }
    .proof-preview { max-width: 160px; }

    /* Nama berkas pada tombol unggah sering lebih lebar daripada layar. */
    .form-card input[type="file"] { max-width: 100%; font-size: 12.5px; }
}

/* ==== Rincian tagihan COD untuk pembeli ================================ */
/* Pembeli COD membayar di depan pintu tanpa sempat memeriksa apa pun, jadi
   isi tagihannya disebutkan terbuka, bukan disembunyikan di balik total. */
.cod-rincian {
    margin: 12px 0 4px; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--success) 7%, transparent);
}
.cod-rincian strong { display: block; font-size: 13px; color: var(--success); margin-bottom: 4px; }
.cod-rincian p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Peringatan bila total COD belum menutup biaya pengiriman. */
.cod-kurang {
    margin: 10px 0 0; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger); font-size: 12.5px; font-weight: 700; line-height: 1.5;
}

/* ==== Tombol salin nomor rekening & nominal transfer ==================== */
/* Ditempatkan sebaris dengan angkanya supaya jelas tombol ini menyalin yang
   mana, bukan menyalin seluruh isi kotak pembayaran. */
.baris-salin {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin: 4px 0;
}
.nomor-rekening { font-size: 19px; letter-spacing: .02em; }
.tombol-salin {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
    font-size: 12.5px; font-weight: 800; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tombol-salin:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.tombol-salin .lucide { width: 15px; height: 15px; }
/* Keadaan berhasil: warnanya berubah sebentar, cukup untuk meyakinkan tanpa
   perlu popup yang menutupi angka berikutnya. */
.tombol-salin.tersalin {
    background: var(--success); border-color: var(--success); color: #fff;
}

@media (max-width: 560px) {
    .nomor-rekening { font-size: 17px; }
    .tombol-salin { min-height: 32px; padding: 0 11px; font-size: 12px; }
    /* Di layar sempit tombol diberi ruang sendiri supaya tidak berdesakan
       dengan angka rekening yang panjang. */
    .baris-salin { gap: 8px; }
}

/* ==========================================================================
   KOTAK PEMBAYARAN VERSI PONSEL
   ==========================================================================
   Hampir semua pembeli membuka toko dari HP, dan halaman inilah yang paling
   menentukan: kalau nominal atau nomor rekening salah disalin, uangnya
   nyasar. Karena itu keduanya dijadikan kotak tersendiri yang jelas
   batasnya, dengan tombol salin selebar kotaknya supaya mudah ditekan
   dengan jempol.

   Seluruh isi blok ini di dalam media query, versi desktop tidak tersentuh.
   ========================================================================== */
@media (max-width: 560px) {
    .payment-box { padding: 14px; }

    /* Setiap nominal dan nomor rekening berdiri di kotaknya sendiri. */
    .payment-box .baris-salin {
        display: block;
        margin: 6px 0 12px;
        padding: 12px 13px;
        border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
        border-radius: 12px;
        background: var(--card);
    }
    .payment-box .baris-salin .amount,
    .payment-box .baris-salin .nomor-rekening {
        display: block;
        margin-bottom: 9px;
        font-size: 24px;
        line-height: 1.15;
        letter-spacing: .01em;
        /* Angka bertinggi sama supaya digitnya mudah dihitung sekilas. */
        font-variant-numeric: tabular-nums;
        word-break: break-all;
    }
    .payment-box .baris-salin .tombol-salin {
        display: flex; width: 100%; justify-content: center;
        min-height: 40px; font-size: 13px;
    }

    /* Keterangan di antara kotak dibuat tenang supaya angkanya yang menonjol. */
    .payment-box > p { margin: 0; font-size: 12.5px; color: var(--muted); }
    .payment-box > p strong { color: var(--text); }

    /* --- Beberapa rekening sekaligus ---
       Tiap bank sudah punya kartunya sendiri, jadi kotak salin di dalamnya
       tidak perlu bergaris lagi: dua garis bersarang membuat tampilannya
       ramai tanpa menambah kejelasan.

       Angkanya juga diturunkan dari 24px ke 21px. Dengan tiga bank, ukuran
       24px membuat bagian pembayaran memanjang sampai tombol unggah bukti
       terdorong jauh ke bawah layar, dan pembeli mengira halamannya habis. */
    .rekening-tujuan.banyak .rekening-kartu { padding: 12px 13px; }
    .rekening-tujuan.banyak .baris-salin {
        margin: 4px 0 6px; padding: 0;
        border: 0; background: none;
    }
    .rekening-tujuan.banyak .baris-salin .nomor-rekening {
        font-size: 21px; margin-bottom: 8px;
    }
    .rekening-tujuan.banyak .rekening-bank { font-size: 11.5px; }
    .rekening-tujuan.banyak .rekening-atas-nama { font-size: 12px; }

    /* Satu rekening tetap memakai kotak salin bergaris seperti sebelumnya,
       supaya toko yang tidak memakai fitur ini tidak berubah tampilannya. */
    .rekening-tujuan.satu .rekening-bank { margin-bottom: 2px; }
}

/* ============ Tombol batalkan pesanan (sisi pembeli) ============
   Sengaja TIDAK dibuat semencolok tombol utama. Membatalkan pesanan adalah
   tindakan yang tidak dapat diurungkan, jadi tombolnya cukup terlihat bagi
   yang mencarinya, tanpa mengundang tangan yang sedang menggulir. */
.aksi-batal-pesanan { flex: 0 0 auto; }
.btn.batal {
    color: var(--danger, #dc2626);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 45%, var(--line));
}
.btn.batal:hover {
    background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
    border-color: var(--danger, #dc2626);
}
.catatan-batal { flex: 0 0 auto; max-width: 280px; margin: 0; color: var(--muted); text-align: right; }

@media (max-width: 720px) {
    /* Di layar sempit judul dan tombol tidak muat bersebelahan. Dibungkus ke
       bawah dan tombolnya melebar penuh supaya tetap mudah ditekan jempol. */
    .page-head { flex-wrap: wrap; align-items: flex-start; }
    .aksi-batal-pesanan { width: 100%; }
    .aksi-batal-pesanan .btn { width: 100%; }
    .catatan-batal { max-width: none; text-align: left; }
}

/* ================== Tombol unduh kode QRIS ==================
   Untuk pembeli yang hanya punya satu perangkat: kode di layar tidak bisa
   dipindai oleh kamera perangkat itu sendiri, jadi gambarnya diunduh lalu
   diunggah dari galeri ke aplikasi pembayaran. Tombolnya dibuat selebar
   kartu QRIS supaya di HP mudah ditekan jempol. */
.unduh-qris {
    display: flex;
    width: min(280px, 100%);
    margin: 12px auto 0;
    min-height: 44px;
}
.unduh-qris-catatan {
    max-width: 340px;
    margin: 8px auto 0;
    text-align: center;
    color: var(--muted);
    line-height: 1.55;
}

/* ================== Alamat tersimpan di profil ================== */
.pemisah-form {
    margin: 20px 0 4px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    font-size: 14px;
}
.alamat-kosong { color: var(--muted); }
.alamat-kartu {
    padding: 13px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
}
.alamat-kartu.utama {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
    background: color-mix(in srgb, var(--primary) 5%, var(--card));
}
.alamat-isi { display: grid; gap: 3px; min-width: 0; }
.alamat-isi span { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.alamat-isi small { color: var(--muted); overflow-wrap: anywhere; }
.alamat-tanda {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    vertical-align: 2px;
}
.alamat-aksi {
    display: flex;
    flex-wrap: wrap;      /* tiga tombol tidak dipaksa sebaris di layar sempit */
    gap: 8px;
    margin-top: 10px;
}
.alamat-aksi .btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
.alamat-form-aksi { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 480px) {
    /* Tombol aksi alamat melebar rata supaya sasaran jempolnya cukup besar,
       dan tombol hapus tetap paling kanan. */
    .alamat-aksi form, .alamat-aksi .btn { flex: 1 1 auto; }
    .alamat-aksi form .btn { width: 100%; }
    .alamat-form-aksi .btn { flex: 1 1 auto; }
}

/* ============ Footer: kolom tidak boleh mendorong halaman ============
   Kolom Kontak berisi teks tulisan pemilik toko sendiri (alamat, email),
   dan satu kata panjang tanpa spasi cukup untuk membuat kolom grid menolak
   menyempit di bawah lebar kata itu, lalu seluruh halaman bisa digeser ke
   samping. Aturan yang sama seperti di kartu produk: kolom boleh menyempit,
   kata boleh dipenggal. */
.footer-grid > * { min-width: 0; }
.footer-grid p, .footer-grid a, .footer-grid li { overflow-wrap: anywhere; }