/* Impresi — gaya bersama semua halaman publik (token warna, navbar, kartu produk, footer, menu bawah).
   Gaya khusus satu halaman tetap ada di <style> halaman itu. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.top-bar{background:#E2EAF3;color:#1C314A}
:root[data-theme="dark"] .top-bar{background:#1C314A;color:var(--ink)}
.top-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 0;font-size:12.5px}
.top-bar-app{display:flex;align-items:center;gap:7px;color:inherit;text-decoration:none;white-space:nowrap}
.top-bar-social{display:flex;align-items:center;gap:14px;flex-shrink:0}
.top-bar-social a:hover{opacity:1}
.top-bar-links{display:flex;gap:22px;margin-left:auto}
.top-bar-links a:hover{opacity:1}
nav.top{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;background:var(--paper)}
.top-inner-wrap{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo-mark{height:28px;width:auto;display:block;flex-shrink:0}
.nav-links{display:flex;gap:32px;font-size:14px;color:var(--ink-soft);list-style:none;margin:0;padding:0;flex:1}
.nav-links a{text-decoration:none}
.nav-actions{display:flex;gap:10px;align-items:center;flex-shrink:0}
.btn-primary{background:#0057E2;color:#fff}
.btn-primary:hover{opacity:.82}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-mute)}
.nav-theme-btn{padding:8px 10px !important;line-height:0}
.nav-search{display:flex;align-items:center;justify-content:flex-end}
.nav-search-bubble{display:flex;align-items:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:transparent;overflow:hidden;transition:width .32s cubic-bezier(.4,0,.2,1),background .32s ease}
.nav-search-bubble.open{width:220px;background:var(--paper-raised)}
.nav-search-icon-btn{flex-shrink:0;width:34px;height:34px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);padding:0}
.nav-search-bubble.open .nav-search-input{opacity:1;padding-right:14px}
.products-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px}
.link-more{font-size:14px;color:#0077CC;text-decoration:none}
.product{text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.product-save:hover{transform:scale(1.15)}
.product-save svg{width:16px;height:16px;display:block}
.product-save.saved svg path{fill:#E60023;stroke:#E60023}
.product-info{padding-top:10px;display:flex;flex-direction:column;flex:1}
.product-rating-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.product-stars{display:flex;align-items:center;gap:2px}
.product-stars svg{width:11px;height:11px;fill:#f59e0b;stroke:none}
.product-rating-val{font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-left:2px}
.product-review-count{font-size:11px;color:var(--ink-mute);white-space:nowrap}
.bottom-nav a{display:flex;align-items:center;justify-content:center;color:var(--ink-mute);text-decoration:none}
.bottom-nav a.active{color:#0077CC}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;margin-bottom:36px}
.footer-desc{font-size:13.5px;color:var(--ink-mute);max-width:280px}
.footer-col h4{font-size:13px;font-weight:500;margin:0 0 14px;color:var(--ink-mute)}
.footer-col a{display:block;font-size:13.5px;color:var(--ink-soft);text-decoration:none;margin-bottom:10px}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{font-size:12.5px;color:var(--ink-mute);border-top:1px solid var(--line);padding-top:24px}
footer.account-footer{border-top:1px solid var(--line);padding:32px 0;margin-top:8px;text-align:center}
.footer-links{display:flex;justify-content:center;gap:18px;margin-bottom:10px;flex-wrap:wrap}
.footer-links a{font-size:13px;color:var(--ink-soft);text-decoration:none}
.footer-links a:hover{color:var(--ink)}
.footer-copy{font-size:12px;color:var(--ink-mute)}
/* Sembunyikan ikon cadangan kalau foto produk ada (sebelumnya hanya di Home & Semua Produk, */
/* sehingga di halaman lain ikon ikut tampil & membuat foto kartu 29px lebih sempit). */
.product-photo.has-photo .is-fallback{display:none}
.nav-cart{position:relative}
.nav-cart-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--green-d,#0057E2);color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;box-sizing:border-box}
.nav-cart-badge[hidden]{display:none}
.product-price-unit{font-size:12px;font-weight:400;color:var(--ink-mute)}
/* ---------- Unggah file desain (assets/js/designs.js) ---------- */
.dz{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);transition:border-color .15s,background .15s}
.dz.dz-over{border-color:#0057E2;border-style:dashed;background:rgba(0,87,226,.06)}
.dz-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12.5px}
.dz-title{font-weight:600;color:var(--ink)}
.dz-ok{display:inline-flex;align-items:center;gap:4px;color:#1E8E3E;font-weight:600}
.dz-missing{color:#B26A00;font-weight:600}
.dz-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.dz-file{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 10px;border-radius:9px;background:var(--paper-raised);border:1px solid var(--line);font-size:13px;color:var(--ink-soft);min-width:0}
.dz-file svg{flex:none}
.dz-name{flex:1;min-width:0;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-name:hover{text-decoration:underline}
.dz-size{flex:none;font-size:12px;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.dz-del{flex:none;width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--ink-mute);cursor:pointer;display:flex;align-items:center;justify-content:center}
.dz-del:hover{background:var(--paper);color:#D93025}
.dz-drop{width:100%;display:flex;align-items:center;gap:12px;padding:14px;border:1.5px dashed #0057E2;border-radius:10px;background:var(--paper-raised);color:#0057E2;font-family:inherit;text-align:left;cursor:pointer;text-decoration:none}
.dz-drop:hover{background:rgba(0,87,226,.06)}
.dz-drop:disabled{opacity:.5;cursor:default}
.dz-drop svg{flex:none}
.dz-drop span{display:flex;flex-direction:column;gap:2px;min-width:0}
.dz-drop strong{font-size:14px;font-weight:600}
.dz-drop small{font-size:12px;color:var(--ink-mute)}
.dz-more{border:none;background:none;padding:2px 0;font-family:inherit;font-size:13px;font-weight:600;color:#0057E2;cursor:pointer}
.dz-more:disabled{opacity:.5;cursor:default}
.dz-progress{margin-bottom:8px;font-size:12.5px;color:var(--ink-soft)}
.dz-progress-row{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.dz-progress-row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.dz-bar i{display:block;height:100%;background:#0057E2;border-radius:inherit;transition:width .2s}
.dz-error{margin:8px 0 0;font-size:12.5px;color:#D93025}
/* ---------- Ulasan produk (assets/js/review.js) ---------- */
.rate{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-align:left}
.rate-title{font-size:13px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.rate-stars{display:flex;align-items:center;gap:2px;margin-bottom:10px}
.rate-star{width:40px;height:40px;border:none;background:none;padding:4px;cursor:pointer;color:var(--line);border-radius:8px}
.rate-star svg{width:100%;height:100%;fill:currentColor;display:block}
.rate-star.on{color:#f59e0b}
.rate-star:focus-visible{outline:2px solid #0057E2}
.rate-label{font-size:12.5px;color:var(--ink-soft);margin-left:6px}
.rate textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;background:var(--paper-raised);color:var(--ink);font-family:inherit;font-size:13.5px;padding:10px 12px;resize:vertical;min-height:72px}
.rate textarea:focus{outline:none;border-color:#0057E2}
.rate-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rate-photos img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.rate-thumb{position:relative}
.rate-thumb button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:none;background:#191919;color:#fff;font-size:14px;line-height:22px;padding:0;cursor:pointer}
.rate-add{width:64px;height:64px;border:1.5px dashed var(--ink-mute);border-radius:8px;background:var(--paper-raised);color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-family:inherit;cursor:pointer;padding:0}
.rate-add span{font-size:10.5px;font-weight:600;line-height:1.1}
.rate-add small{font-size:9.5px;color:var(--ink-mute)}
.rate-add:hover{border-color:#0057E2;color:#0057E2}
.rate-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.rate-send{height:40px;padding:0 20px;border:none;border-radius:999px;background:#0057E2;color:#fff;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.rate-send:disabled{opacity:.5;cursor:not-allowed}
.rate-error{font-size:12.5px;color:#D93025}
.rate-done{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft)}
.rate-stars-sm{display:flex;gap:1px}
.rate-stars-sm svg{width:16px;height:16px;fill:#f59e0b}
.rate-edit{border:none;background:none;padding:0;color:#0057E2;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;margin-left:auto}
.rate-comment{margin:8px 0 0;font-size:13px;color:var(--ink-soft)}