/* ============================================================
   style.css — WatchWatch Store (gaya toko)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Primary Colors - Professional Clean Palette */
  --bg:#FFFFFF;
  --bg-secondary:#F5F6FA;
  --bg-warm:#FFF9E6;
  
  /* Text Colors */
  --text-primary:#1A1A2E;
  --text-secondary:#6B7280;
  --text-tertiary:#9CA3AF;
  
  /* Accent Colors */
  --accent:#2563EB;
  --accent-dark:#1E40AF;
  --accent-light:#DBEAFE;
  
  /* Status Colors */
  --success:#10B981;
  --warning:#F59E0B;
  --danger:#EF4444;
  --info:#3B82F6;
  
  /* Borders & Shadows */
  --border-light:#E5E7EB;
  --border-focus:#2563EB;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.12);
  
  /* Typography Scale */
  --font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-xs:11px;
  --font-sm:13px;
  --font-base:15px;
  --font-lg:17px;
  --font-xl:20px;
  --font-xxl:24px;
  
  /* Spacing System */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:20px;
  --space-xxl:28px;
  
  /* Border Radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-full:9999px;
}

/* Base Reset & Mobile Optimization */
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

body{
  font-family:var(--font-family);
  background:var(--bg-secondary);
  color:var(--text-primary);
  line-height:1.5;
  font-size:var(--font-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
  min-height:100vh;
  overflow-x:hidden;
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block;height:auto}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent}

.wrap{max-width:1080px;margin:0 auto;padding:0 var(--space-md)}

/* HEADER - Modern Mobile-First Design */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--border-light);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.hd{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  height:60px;
  padding:var(--space-xs) 0;
}

/* Brand Logo */
.brand{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  font-weight:700;
  font-size:var(--font-lg);
  flex-shrink:0;
  color:var(--text-primary);
  text-decoration:none;
}

.brand img{
  height:34px;
  width:34px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid var(--accent);
  background:#000;
}

.brand b{
  font-weight:800;
  letter-spacing:-0.3px;
}

.brand span{
  color:var(--accent);
  font-weight:800;
}

/* Search Bar - Pill Shape */
.searchbar{
  flex:1;
  display:flex;
  align-items:center;
  background:var(--bg-secondary);
  border:1.5px solid var(--border-light);
  border-radius:var(--radius-full);
  padding:0 var(--space-md) 0 var(--space-lg);
  height:44px;
  transition:all 0.2s ease;
  min-width:0;
}

.searchbar:focus-within{
  border-color:var(--accent);
  background:var(--bg);
  box-shadow:0 0 0 3px var(--accent-light);
}

.searchbar input{
  flex:1;
  border:none;
  background:none;
  outline:none;
  padding:0;
  font-size:var(--font-base);
  color:var(--text-primary);
  min-width:0;
  text-overflow:ellipsis;
}

.searchbar input::placeholder{
  color:var(--text-tertiary);
}

.searchbar button{
  background:var(--text-primary);
  color:#fff;
  width:34px;
  height:34px;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  transition:transform 0.15s ease;
}

.searchbar button:active{
  transform:scale(0.95);
}

/* Action Buttons (Cart, Chat, Account) */
.hd-cart,
.hd-chat,
.hd-acct{
  position:relative;
  width:42px;
  height:42px;
  border-radius:var(--radius-full);
  background:var(--bg-secondary);
  border:1.5px solid var(--border-light);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all 0.2s ease;
  font-size:18px;
  text-decoration:none;
  color:var(--text-secondary);
}
.hd-cart:hover{ color:var(--accent); border-color:var(--accent); }
.hd-acct:hover{ color:var(--accent); border-color:var(--accent); }
.hd-chat:hover{ color:#128C7E; border-color:#25D366; }

/* Menu utama (tampil di layar lebar, lihat media query di bawah) */
.mainnav{ display:none; }

.hd-cart:active,
.hd-chat:active,
.hd-acct:active{
  transform:scale(0.95);
  background:var(--border-light);
}

/* Cart Badge */
.cbubble{
  position:absolute;
  top:-4px;
  right:-4px;
  background:var(--danger);
  color:#fff;
  font-size:10px;
  font-weight:700;
  min-width:18px;
  height:18px;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  border:2px solid var(--bg);
  line-height:1;
}

/* MODEL CHIPS - Image-Based Category Navigation */
.models{
  background:var(--bg);
  border-bottom:1px solid var(--border-light);
  padding:var(--space-lg) 0 var(--space-md);
  overflow:hidden;
}

.model-row{
  display:flex;
  gap:var(--space-lg);
  overflow-x:auto;
  overflow-y:hidden;
  padding:var(--space-sm) var(--space-md) var(--space-md);
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.model-row::-webkit-scrollbar{
  display:none;
}

.model{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-sm);
  width:70px;
  scroll-snap-align:start;
  text-decoration:none;
  transition:transform 0.2s ease;
}

.model:active{
  transform:scale(0.95);
}

/* Circular Icon Container with Gradient Background */
.model .ic{
  width:60px;
  height:60px;
  border-radius:50%;
  background:linear-gradient(135deg, #F3F4F6, #E5E7EB);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  border:3px solid transparent;
  overflow:hidden;
  position:relative;
  transition:all 0.25s ease;
  box-shadow:var(--shadow-sm);
  color:var(--text-secondary);
}

/* If image exists, style it */
.model .ic img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* Active State - Blue Ring */
.model.active .ic{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-light), var(--shadow-md);
  background:var(--bg);
  color:var(--accent);
}

/* Label Text */
.model small{
  font-size:var(--font-xs);
  color:var(--text-secondary);
  text-align:center;
  line-height:1.3;
  font-weight:600;
  max-width:70px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  transition:color 0.2s ease;
}

.model.active small{
  color:var(--accent);
  font-weight:700;
}

/* CERTIFIED BAR - Professional Trust Badge */
.certbar{
  background:linear-gradient(135deg, #EFF6FF 0%, #F8FAFF 100%);
  border:1.5px solid #BFDBFE;
  border-radius:var(--radius-lg);
  padding:var(--space-md) var(--space-lg);
  margin:var(--space-lg) 0;
  display:flex;
  align-items:center;
  gap:var(--space-md);
  box-shadow:0 2px 8px rgba(245, 158, 11, 0.08);
  position:relative;
  overflow:hidden;
}

/* Subtle background pattern/gradient overlay */
.certbar::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-10%;
  width:120px;
  height:120px;
  background:radial-gradient(circle, rgba(245,158,11,0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

/* Checkmark Icon Badge */
.certbar .cert-badge{
  font-size:24px;
  width:48px;height:48px;
  min-width:48px;min-height:48px;
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2563EB 0%,#1E40AF 100%);
  border-radius:50%;
  flex:0 0 48px;
  box-shadow:0 4px 12px rgba(37,99,235,0.3);
  color:#fff;font-weight:700;z-index:1;
}
.certbar .cert-head{display:flex;align-items:center;gap:14px;flex:1;min-width:0;z-index:1}
.certbar .cert-title b{font-size:var(--font-base);font-weight:700;color:#1E293B;display:block;letter-spacing:-.2px}
.certbar .cert-title span{font-size:var(--font-xs);color:#64748B;line-height:1.4;display:block;margin-top:2px}
.certbar .cert-items{display:flex;gap:8px;z-index:1;flex-shrink:0}
.certbar .cert-item{display:flex;flex-direction:column;align-items:center;gap:5px;
  background:#fff;border:1px solid #DBEAFE;border-radius:12px;padding:10px 12px;min-width:74px;
  box-shadow:0 1px 3px rgba(37,99,235,0.06)}
.certbar .cert-item i{font-size:18px;color:#2563EB}
.certbar .cert-item span{font-size:10px;font-weight:600;color:#334155;text-align:center;line-height:1.25}
@media(max-width:560px){
  .certbar{flex-direction:column;align-items:stretch;gap:14px}
  .certbar .cert-items{justify-content:space-between}
  .certbar .cert-item{flex:1;min-width:0}
}




/* Text Content */
.certbar > div{
  flex:1;
  z-index:1;
}

.certbar b{
  font-size:var(--font-base);
  font-weight:700;
  color:var(--text-primary);
  display:block;
  margin-bottom:2px;
  letter-spacing:-0.2px;
}

.certbar span{
  font-size:var(--font-xs);
  color:var(--text-secondary);
  line-height:1.5;
  display:block;
}

/* FILTER CHIPS - Modern Pill-Shaped Buttons */
.filterchips{
  display:flex;
  gap:var(--space-sm);
  overflow-x:auto;
  overflow-y:hidden;
  padding:var(--space-md) 0 var(--space-sm);
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:x mandatory;
}

.filterchips::-webkit-scrollbar{
  display:none;
}

.chip{
  flex:0 0 auto;
  padding:var(--space-sm) var(--space-lg);
  border-radius:var(--radius-full);
  background:var(--bg);
  border:1.5px solid var(--border-light);
  font-size:var(--font-sm);
  font-weight:600;
  color:var(--text-secondary);
  white-space:nowrap;
  transition:all 0.25s ease;
  scroll-snap-align:start;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
}

.chip:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-light);
}

.chip:active{
  transform:scale(0.96);
}

/* Active State - Filled Dark */
.chip.active{
  background:var(--text-primary);
  color:#fff;
  border-color:var(--text-primary);
  box-shadow:var(--shadow-sm);
}

/* SECTION TITLE */
.sec-title{
  font-size:var(--font-lg);
  font-weight:700;
  margin:var(--space-xl) 0 var(--space-md);
  color:var(--text-primary);
  letter-spacing:-0.3px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* PRODUCT GRID - 2 Column Mobile Layout */
.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--space-md);
  margin-bottom:var(--space-xl);
}

/* PRODUCT CARD - Modern Design */
.card{
  background:var(--bg);
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:all 0.3s ease;
  box-shadow:var(--shadow-sm);
  position:relative;
}

.card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
  border-color:var(--accent-light);
}

.card:active{
  transform:scale(0.98);
}

/* Product Image Container - 3:4 Aspect Ratio */
.card .ph{
  position:relative;
  aspect-ratio:3/4;
  background:linear-gradient(160deg, #F3F4F6, #E5E7EB);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.card .ph img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.3s ease;
}

.card:hover .ph img{
  transform:scale(1.05);
}

/* Fallback Icon when no image */
.card .ph .emoji{
  font-size:3.5rem;
  opacity:0.4;
}

/* Condition Badge - Top Left Pill */
.tag{
  position:absolute;
  top:var(--space-sm);
  left:var(--space-sm);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  padding:4px 10px;
  border-radius:var(--radius-full);
  color:#fff;
  z-index:2;
  backdrop-filter:blur(4px);
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.tag.likenew{
  background:rgba(16, 185, 129, 0.95);
}

.tag.good{
  background:rgba(245, 158, 11, 0.95);
}

.tag.bekas{
  background:rgba(107, 114, 128, 0.95);
}

/* Card Body Content */
.card .body{
  padding:var(--space-md);
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  flex:1;
}

/* Product Name - 2 Line Clamp */
.card .nm{
  font-size:var(--font-sm);
  font-weight:600;
  line-height:1.35;
  color:var(--text-primary);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
  margin-bottom:2px;
}

/* Price Comparison Layout */
.price-compare{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:6px;
}
.tag-market{
  background:#FEF2F2;
  color:#EF4444;
  font-size:9px;
  font-weight:800;
  padding:3px 6px;
  border-radius:4px;
  letter-spacing:0.5px;
}
.price-compare .old{
  font-size:13px;
  color:var(--text-tertiary);
  text-decoration:line-through;
  font-weight:600;
}

.price-current{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  margin-bottom:2px;
}
.price-current .pr{
  font-size:var(--font-xl);
  font-weight:800;
  color:var(--text-primary);
  letter-spacing:-0.5px;
  line-height:1;
}
.tag-hemat{
  background:#ECFDF5;
  color:#10B981;
  font-size:10px;
  font-weight:800;
  padding:3px 8px;
  border-radius:100px;
}

/* Meta Info (Rating, Category, Stock) */
.card .meta{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--font-xs);
  color:var(--text-secondary);
  padding-top:var(--space-xs);
}

.card .meta .star{
  color:var(--warning);
  font-size:12px;
}

/* Add to Cart Button */
.btn-add{
  margin-top:var(--space-sm);
  background:var(--accent);
  color:#fff;
  padding:10px var(--space-md);
  border-radius:var(--radius-md);
  font-size:var(--font-sm);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:all 0.2s ease;
  min-height:40px;
  box-shadow:0 2px 8px rgba(37, 99, 235, 0.2);
}

/* Card jadi pointer karena bisa diklik */
.card{cursor:pointer}

/* Badge "Video" di pojok kanan atas foto produk */
.vid-flag{
  position:absolute;
  top:var(--space-sm);
  right:var(--space-sm);
  font-size:10px;
  font-weight:700;
  padding:4px 9px;
  border-radius:var(--radius-full);
  color:#fff;
  background:rgba(239,68,68,0.95);
  z-index:2;
  display:flex;
  align-items:center;
  gap:4px;
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
}

/* ===== SLIDER FOTO DI DALAM CARD (multi-foto) ===== */
.cs{position:absolute;inset:0;overflow:hidden}
.cs-track{
  display:flex;height:100%;
  transition:transform .3s ease;
  will-change:transform;
}
.cs-slide{flex:0 0 100%;width:100%;height:100%}
.cs-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* tombol panah kiri/kanan — muncul di layar besar/hover */
.cs-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:var(--radius-full);
  background:rgba(255,255,255,0.92);color:var(--text-primary);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,0.18);
  opacity:0;transition:opacity .2s ease;z-index:3;
}
.cs-nav.prev{left:6px}
.cs-nav.next{right:6px}
.card:hover .cs-nav{opacity:.95}
.cs-nav:active{transform:translateY(-50%) scale(.9)}
/* titik indikator */
.cs-dots{
  position:absolute;left:0;right:0;bottom:8px;
  display:flex;justify-content:center;gap:5px;z-index:3;
  pointer-events:none;
}
.cs-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.55);
  box-shadow:0 0 3px rgba(0,0,0,0.35);
  transition:all .2s ease;
}
.cs-dot.on{background:#fff;width:16px;border-radius:4px}
/* badge jumlah foto */
.cs-count{
  position:absolute;top:var(--space-sm);right:var(--space-sm);
  font-size:10px;font-weight:700;color:#fff;
  background:rgba(15,23,42,0.6);
  padding:3px 8px;border-radius:var(--radius-full);
  display:flex;align-items:center;gap:4px;z-index:3;
  backdrop-filter:blur(4px);
}
/* di perangkat sentuh, panah tetap terlihat samar agar tahu bisa digeser */
@media(hover:none){
  .cs-nav{opacity:.85}
}

/* ===== MODAL DETAIL PRODUK ===== */
.pm-overlay{
  position:fixed;inset:0;
  background:rgba(15,23,42,0.6);
  backdrop-filter:blur(3px);
  z-index:1000;
  display:none;
  align-items:flex-end;
  justify-content:center;
}
.pm-overlay.open{display:flex}
.pm-sheet{
  background:var(--bg);
  width:100%;
  max-width:560px;
  max-height:92vh;
  max-height:92dvh;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  animation:pmUp .28s ease;
}
@media(min-width:560px){
  .pm-overlay{align-items:center}
  .pm-sheet{border-radius:var(--radius-xl);max-height:88vh;max-height:88dvh}
}
@keyframes pmUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}

.pm-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-md) var(--space-lg);
  border-bottom:1px solid var(--border-light);
  flex-shrink:0;
}
.pm-head .pm-title{font-weight:800;font-size:var(--font-base)}
.pm-close{
  width:34px;height:34px;
  border-radius:var(--radius-full);
  background:var(--bg-secondary);
  color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
}
.pm-close:active{transform:scale(0.92)}

/* Tab slide 1 & 2 */
.pm-tabs{
  display:flex;
  padding:var(--space-sm) var(--space-lg) 0;
  gap:6px;
  flex-shrink:0;
}
.pm-tab{
  flex:1;
  padding:9px 8px;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  font-size:var(--font-sm);
  font-weight:700;
  color:var(--text-secondary);
  background:var(--bg-secondary);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .2s ease;
}
.pm-tab.active{
  color:var(--accent);
  background:var(--accent-light);
}

/* Track slide */
.pm-body{
  overflow:hidden;
  flex:1;
}
.pm-track{
  display:flex;
  width:200%;
  transition:transform .3s ease;
}
.pm-slide{
  width:50%;
  flex-shrink:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  max-height:calc(92vh - 130px);
  max-height:calc(92dvh - 130px);
  padding:var(--space-lg);
}

/* Slide 1 - detail */
.pm-img{
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--radius-lg);
  object-fit:cover;
  background:linear-gradient(160deg,#F3F4F6,#E5E7EB);
  margin-bottom:var(--space-md);
}
.pm-img-empty{
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#F3F4F6,#E5E7EB);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-md);
}
.pm-img-empty i{font-size:3.5rem;opacity:0.35}

/* ===== GALERI FOTO MODAL (multi-foto, bisa digeser) ===== */
.pm-gallery{margin-bottom:var(--space-md)}
.pm-gal-main{
  position:relative;width:100%;aspect-ratio:1/1;
  border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(160deg,#F3F4F6,#E5E7EB);
  touch-action:pan-y;
}
.pm-gal-track{display:flex;height:100%;transition:transform .3s ease;will-change:transform}
.pm-gal-track > div{flex:0 0 100%;width:100%;height:100%}
.pm-gal-track img{width:100%;height:100%;object-fit:cover;display:block}
.pm-gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:var(--radius-full);
  background:rgba(255,255,255,0.92);color:var(--text-primary);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:0 2px 10px rgba(0,0,0,0.2);z-index:3;border:none;cursor:pointer;
}
.pm-gal-nav.prev{left:10px}
.pm-gal-nav.next{right:10px}
.pm-gal-nav:active{transform:translateY(-50%) scale(.9)}
.pm-gal-count{
  position:absolute;top:10px;right:10px;z-index:3;
  font-size:11px;font-weight:700;color:#fff;
  background:rgba(15,23,42,0.6);backdrop-filter:blur(4px);
  padding:4px 10px;border-radius:var(--radius-full);
  display:flex;align-items:center;gap:5px;
}
.pm-gal-dots{
  position:absolute;left:0;right:0;bottom:10px;z-index:3;
  display:flex;justify-content:center;gap:6px;pointer-events:none;
}
.pm-gal-dots span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,0.55);box-shadow:0 0 3px rgba(0,0,0,0.35);
  transition:all .2s ease;
}
.pm-gal-dots span.on{background:#fff;width:18px;border-radius:4px}
.pm-thumbs{
  display:flex;gap:8px;margin-top:10px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:2px;scrollbar-width:thin;
}
.pm-thumbs::-webkit-scrollbar{height:5px}
.pm-thumbs::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:10px}
.pm-thumbs img{
  width:56px;height:56px;flex:0 0 auto;object-fit:cover;
  border-radius:var(--radius-sm);cursor:pointer;
  border:2px solid transparent;opacity:.65;transition:all .15s ease;
}
.pm-thumbs img.on{border-color:var(--accent);opacity:1}

.pm-name{font-size:var(--font-lg);font-weight:800;line-height:1.35;margin-bottom:var(--space-sm)}
.pm-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--space-md)}
.pm-badge{
  font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:var(--radius-full);
}
.pm-badge.cat{background:var(--accent-light);color:var(--accent-dark)}
.pm-badge.likenew{background:#D1FAE5;color:#047857}
.pm-badge.good{background:#FEF3C7;color:#B45309}
.pm-badge.bekas{background:#F3F4F6;color:#4B5563}
.pm-badge.stock{background:#EFF6FF;color:#1D4ED8}
.pm-price-box{
  background:var(--bg-secondary);
  border-radius:var(--radius-md);
  padding:var(--space-md);
  margin-bottom:var(--space-md);
}
.pm-price-old{font-size:13px;color:var(--text-tertiary);text-decoration:line-through;font-weight:600}
.pm-price-now{font-size:var(--font-xxl);font-weight:800;color:var(--text-primary);letter-spacing:-0.5px}
.pm-price-hemat{
  display:inline-block;margin-left:8px;
  background:#ECFDF5;color:#10B981;
  font-size:11px;font-weight:800;padding:3px 9px;border-radius:100px;
}
.pm-desc-title{font-size:var(--font-sm);font-weight:800;margin-bottom:6px;color:var(--text-primary)}
.pm-desc{
  font-size:var(--font-base);
  color:var(--text-primary);
  line-height:1.75;
  white-space:pre-line;
  word-break:break-word;
  max-height:clamp(160px, 36vh, 440px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:12px 14px;
  background:var(--bg-secondary);
  border:1px solid var(--border-light);
  border-radius:var(--radius-md);
}
.pm-desc::-webkit-scrollbar{width:6px}
.pm-desc::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:10px}

/* Slide 2 - video youtube */
.pm-video-wrap{
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  max-height:calc(92vh - 220px);
  margin:0 auto var(--space-md);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#000;
}
@media(min-width:480px){
  .pm-video-wrap{aspect-ratio:1/1;max-width:380px}
}
.pm-video-wrap iframe{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;
}
/* Thumbnail siap putar */
.pm-thumb{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  cursor:pointer;
}
.pm-play{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:64px;height:64px;
  border-radius:var(--radius-full);
  background:rgba(239,68,68,0.95);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;
  box-shadow:0 6px 20px rgba(0,0,0,0.35);
  cursor:pointer;
  pointer-events:none;
}
.pm-video-info{
  text-align:center;
  font-size:var(--font-sm);
  color:var(--text-secondary);
  margin-bottom:var(--space-md);
}
.pm-yt-link{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#FF0000;color:#fff;
  padding:11px;border-radius:var(--radius-md);
  font-weight:700;font-size:var(--font-sm);
  width:100%;
}
.pm-yt-link:active{transform:scale(0.97)}
.pm-no-video{
  text-align:center;
  padding:40px var(--space-lg);
  color:var(--text-tertiary);
}
.pm-no-video i{font-size:3rem;margin-bottom:var(--space-md);opacity:0.5}
.pm-no-video p{font-size:var(--font-sm)}

/* Footer modal - tombol keranjang */
.pm-foot{
  padding:var(--space-md) var(--space-lg);
  border-top:1px solid var(--border-light);
  flex-shrink:0;
}
.pm-add-btn{
  width:100%;
  background:var(--accent);
  color:#fff;
  padding:13px;
  border-radius:var(--radius-md);
  font-weight:800;
  font-size:var(--font-base);
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 12px rgba(37,99,235,0.25);
}
.pm-add-btn:active{transform:scale(0.98)}
.pm-share-btn{width:50px;flex:0 0 50px;background:var(--bg-secondary);color:var(--accent);border:1.5px solid var(--border-light);border-radius:var(--radius-md);font-size:18px;display:flex;align-items:center;justify-content:center}
.pm-share-btn:active{transform:scale(0.95)}
.pm-add-btn.added{background:var(--success)}


.btn-add:hover{
  background:var(--accent-dark);
  box-shadow:0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-add:active{
  transform:scale(0.96);
  background:var(--accent-dark);
}

/* Success State - Added to Cart */
.btn-add.added{
  background:var(--success);
  box-shadow:0 2px 8px rgba(16, 185, 129, 0.2);
}

/* GENERIC PANEL */
.panel{
  background:var(--bg);
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  margin:var(--space-lg) 0;
}

.field{margin-bottom:var(--space-md)}
.field label{display:block;font-size:var(--font-xs);font-weight:700;margin-bottom:6px;color:var(--text-secondary)}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--border-light);
  border-radius:var(--radius-md);padding:11px 12px;font-size:var(--font-base);outline:none;
  transition:border-color 0.2s ease;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-light)}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:13px;border-radius:var(--radius-md);font-weight:700;font-size:var(--font-base);
  transition:all 0.2s ease;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,0.25)}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-dark{background:var(--text-primary);color:#fff}
.btn-ghost{background:var(--bg-secondary);color:var(--text-primary);border:1.5px solid var(--border-light)}

/* CART */
.cart-item{display:flex;gap:var(--space-md);padding:var(--space-md) 0;border-bottom:1px solid var(--border-light)}
.cart-item:last-child{border-bottom:none}
.cart-item .thumb{width:72px;height:72px;border-radius:var(--radius-md);background:var(--bg-secondary);
  display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;overflow:hidden;
  color:var(--text-tertiary)}
.cart-item .thumb img{width:100%;height:100%;object-fit:cover}
.cart-item .info{flex:1;min-width:0}
.cart-item .info .nm{font-size:var(--font-sm);font-weight:600;line-height:1.3}
.cart-item .info .pr{font-size:var(--font-base);font-weight:800;margin-top:3px}
.qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--border-light);border-radius:var(--radius-sm);
  width:max-content;margin-top:6px;overflow:hidden}
.qty button{width:28px;height:28px;background:var(--bg-secondary);font-size:16px;font-weight:700;
  color:var(--text-primary);transition:background 0.15s ease}
.qty button:active{background:var(--border-light)}
.qty span{width:34px;text-align:center;font-size:var(--font-sm);font-weight:700}
.row-line{display:flex;justify-content:space-between;font-size:var(--font-sm);padding:5px 0}
.row-line.total{font-size:var(--font-lg);font-weight:800;border-top:1.5px solid var(--border-light);
  margin-top:6px;padding-top:10px}

/* SHIPPING OPTIONS */
.ship-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1.5px solid var(--border-light);border-radius:var(--radius-md);padding:11px 12px;margin-bottom:8px;
  cursor:pointer;transition:all 0.2s ease}
.ship-opt.sel{border-color:var(--accent);background:rgba(37,99,235,0.04)}
.ship-opt .l b{font-size:var(--font-sm)}.ship-opt .l small{font-size:var(--font-xs);color:var(--text-secondary);display:block}
.ship-opt .pr{font-weight:800;font-size:var(--font-sm);white-space:nowrap;color:var(--text-primary)}
.dest-list{border:1.5px solid var(--border-light);border-radius:var(--radius-md);margin-top:-6px;
  max-height:210px;overflow:auto;background:var(--bg)}
.dest-list div{padding:9px 12px;font-size:var(--font-sm);border-bottom:1px solid var(--border-light);
  transition:background 0.15s ease;cursor:pointer}
.dest-list div:hover{background:var(--bg-secondary)}
.dest-list div:last-child{border-bottom:none}

/* EMPTY / MSG */
.empty{text-align:center;padding:60px 20px;color:var(--text-secondary)}
.empty .em{font-size:3.5rem;margin-bottom:10px}
.note{font-size:var(--font-xs);color:var(--text-secondary);background:var(--bg-secondary);border-radius:var(--radius-sm);
  padding:9px 11px;margin-top:8px}
.alert{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;border-radius:var(--radius-md);
  padding:10px 12px;font-size:var(--font-sm);margin:8px 0}
.ok-box{text-align:center;padding:40px 20px}
.ok-box .ic{font-size:4rem}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* HERO SLIDER (home) */
.hero-slider{position:relative;margin:var(--space-lg) 0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);background:var(--bg)}
.hero-track{display:flex;width:300%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.hero-slide{flex:0 0 33.3333%;min-height:200px;padding:24px 22px;position:relative;color:#fff;
  display:flex;align-items:center;overflow:hidden}
.hero-slide.hs-blue{background:linear-gradient(135deg,#2563EB 0%,#1E40AF 100%)}
.hero-slide.hs-orange{background:linear-gradient(135deg,#F97316 0%,#C2410C 100%)}
.hero-slide.hs-green{background:linear-gradient(135deg,#10B981 0%,#047857 100%)}
.hs-inner{position:relative;z-index:2;max-width:100%}
.hs-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.22);
  padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;backdrop-filter:blur(8px);margin-bottom:12px}
.hs-tag.hot{background:rgba(255,255,255,0.95);color:#C2410C}
.hero-slide h1{font-size:22px;font-weight:800;line-height:1.2;margin:0 0 8px;color:#fff}
.hero-slide h1 em{font-style:normal;background:rgba(255,255,255,0.25);padding:0 6px;border-radius:5px}
.hero-slide.hs-orange h1 em{background:rgba(255,255,255,0.3)}
.hero-slide p{font-size:13px;line-height:1.5;margin:0 0 14px;opacity:.95;color:#fff}
.hs-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#1A1A2E;
  padding:10px 18px;border-radius:999px;font-weight:700;font-size:13px;text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:transform .2s}
.hs-btn:hover{transform:translateY(-2px)}
.hs-deco{position:absolute;right:-20px;bottom:-30px;font-size:140px;opacity:0.13;color:#fff;
  pointer-events:none;line-height:1;transform:rotate(-15deg)}
.hero-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:3}
.hero-dots .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;
  transition:all .3s}
.hero-dots .dot.active{width:22px;border-radius:4px;background:#fff}

.hstats{display:flex;justify-content:center;gap:18px;margin:var(--space-lg) 0 0;
  background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:14px;text-align:center}
.hstats > div{flex:1;border-right:1px solid var(--border-light);padding:0 4px}
.hstats > div:last-child{border-right:none}
.hstats b{display:block;font-size:var(--font-lg);font-weight:800;color:var(--accent)}
.hstats span{font-size:10px;color:var(--text-secondary);font-weight:600;letter-spacing:.5px}

@media(min-width:560px){
  .hero-slide{min-height:240px;padding:32px 28px}
  .hero-slide h1{font-size:28px}
  .hero-slide p{font-size:15px}
  .hs-deco{font-size:200px;right:-30px}
}
@media(min-width:768px){
  .hero-slide{min-height:280px;padding:42px 38px}
  .hero-slide h1{font-size:36px;max-width:520px}
  .hero-slide p{font-size:16px;max-width:480px}
  .hs-deco{font-size:260px;right:-40px;bottom:-50px}
}
@media(max-width:380px){
  .hero-slide h1{font-size:19px}
  .hero-slide p{font-size:12px}
  .hstats{gap:8px;padding:12px 8px}
  .hstats b{font-size:15px}
}

/* HERO LAMA (compat — fallback bila hero static dipakai di tempat lain) */
.hero{background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:22px;margin:var(--space-lg) 0;text-align:center}
.hero h1{font-size:var(--font-xxl);font-weight:800;line-height:1.25}
.hero h1 em{color:var(--accent);font-style:normal}
.hero p{color:var(--text-secondary);font-size:var(--font-sm);margin:8px 0 14px}

/* FOOTER (penting untuk verifikasi Midtrans) */
.site-footer{background:#0F172A;color:#CBD5E1;padding:32px 0 100px;margin-top:40px;
  font-size:var(--font-sm)}
.site-footer .wrap{padding:0 20px}
.ft-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:24px}
.ft-col{display:flex;flex-direction:column;gap:8px}
.ft-brand{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.5px}
.ft-tag{color:#94A3B8;font-size:12px;margin-bottom:8px}
.ft-addr{color:#CBD5E1;font-size:12px;line-height:1.6;display:flex;gap:8px;align-items:flex-start}
.ft-addr i{color:#60A5FA;margin-top:3px;flex-shrink:0;width:14px}
.ft-h{color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  margin-bottom:4px;display:block}
.ft-col a{color:#CBD5E1;text-decoration:none;font-size:13px;padding:3px 0;transition:color .2s}
.ft-col a:hover{color:#60A5FA}
.ft-pay{border-top:1px solid #1E293B;padding-top:20px;margin-top:8px}
.ft-pay-label{display:block;font-size:11px;color:#94A3B8;text-transform:uppercase;letter-spacing:.8px;
  margin-bottom:10px;font-weight:600}
.ft-pay-icons{display:flex;flex-wrap:wrap;gap:6px}
.payicon{background:#fff;color:#0F172A;padding:6px 10px;border-radius:6px;font-size:11px;
  font-weight:700;letter-spacing:.3px;display:inline-flex;align-items:center}
.payicon b{font-weight:800;text-transform:lowercase;color:#0566D8}
.ft-bottom{border-top:1px solid #1E293B;padding-top:16px;margin-top:20px;text-align:center;
  font-size:11px;color:#64748B}
.ft-sep{margin:0 6px;color:#475569}

@media(min-width:560px){
  .ft-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
  .site-footer{padding-bottom:120px}
}
@media(min-width:768px){
  .site-footer{padding:48px 0 60px}
}

/* REVIEWS */
.rev{background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:12px;margin-bottom:10px}
.rev .top{display:flex;justify-content:space-between;align-items:center}
.rev .nm{font-weight:700;font-size:var(--font-sm)}
.rev .st{color:var(--warning);font-size:var(--font-sm)}
.rev p{font-size:var(--font-sm);color:var(--text-secondary);margin-top:4px}

/* PROFILE */
.prof-row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--border-light);font-size:var(--font-sm)}
.prof-row .ic{font-size:20px;width:24px;text-align:center;color:var(--accent)}

/* BOTTOM NAVIGATION - App-Style Design */
.botnav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:60;
  background:rgba(255, 255, 255, 0.95);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--border-light);
  display:flex;
  height:64px;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 20px rgba(0, 0, 0, 0.06);
}

/* Nav Item */
.botnav a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--text-tertiary);
  font-size:var(--font-xs);
  font-weight:600;
  text-decoration:none;
  position:relative;
  transition:all 0.25s ease;
  padding:var(--space-xs) 0;
}

/* Icon Container */
.botnav a .ic{
  font-size:22px;
  line-height:1;
  transition:all 0.25s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
}

/* Active State */
.botnav a.active{
  color:var(--accent);
}

.botnav a.active .ic{
  transform:translateY(-2px);
}

/* Cart Badge in Bottom Nav */
.botnav .cbubble{
  top:2px;
  right:calc(50% - 20px);
}

@media(min-width:720px){
  /* Tablet: rapikan grid & baris kategori (bottom nav tetap dipakai) */
  .grid{
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:var(--space-lg);
  }
  .model-row{
    justify-content:flex-start;
  }
}

@media(min-width:980px){
  /* ===== LAPTOP/DESKTOP: navbar pindah ke ATAS, bottom nav disembunyikan ===== */
  .botnav{ display:none; }            /* bottom nav hilang di layar lebar */
  body{ padding-bottom:0; }           /* hapus ruang kosong bekas bottom nav */
  .site-footer{ padding-bottom:60px; }

  .mainnav{
    display:flex; align-items:center; gap:2px; margin-left:8px;
  }
  .mainnav a{
    padding:9px 14px; border-radius:10px; white-space:nowrap;
    color:var(--text-secondary); font-weight:600; font-size:15px;
    text-decoration:none; transition:background .15s, color .15s;
  }
  .mainnav a:hover{ background:var(--bg-secondary); color:var(--text-primary); }
  .mainnav a.on{ color:var(--accent); background:var(--accent-light); }

  .searchbar{ max-width:340px; }      /* beri ruang untuk menu */
}

/* ===== LAYAR BESAR: laptop & monitor lebar ===== */
@media(min-width:1024px){
  :root{
    --font-base:16px; --font-sm:14px; --font-lg:18px;
    --font-xl:22px;   --font-xxl:26px;
  }
  .wrap{max-width:1200px; padding:0 var(--space-xl)}
  .grid{
    grid-template-columns:repeat(auto-fill, minmax(215px, 1fr));
    gap:var(--space-xl);
  }
  .pm-sheet{max-width:680px}
}
@media(min-width:1440px){
  :root{
    --font-base:17px; --font-lg:19px;
    --font-xl:24px;   --font-xxl:30px;
  }
  .wrap{max-width:1320px}
  .grid{grid-template-columns:repeat(auto-fill, minmax(235px, 1fr))}
  .pm-sheet{max-width:760px}
  /* galeri modal jadi 2 kolom (foto besar + detail) di layar sangat lebar */
}
@media(min-width:1800px){
  .wrap{max-width:1440px}
  .grid{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))}
}

/* Mobile Optimization: Small Phones (360p-480p) */
@media(max-width:480px){
  :root{
    --font-base:14px;
    --font-sm:12px;
    --font-xs:10px;
    --font-lg:16px;
    --font-xl:18px;
    --font-xxl:22px;
  }
  
  .wrap{
    padding:0 var(--space-sm);
  }
  
  /* Header adjustments */
  .hd{
    height:56px;
    gap:6px;
  }
  
  .brand{
    font-size:var(--font-sm);
  }
  
  .brand img{
    height:28px;
    width:28px;
  }
  
  .searchbar{
    height:38px;
    padding:0 4px 0 12px;
  }
  
  .searchbar button{
    width:30px;
    height:30px;
    font-size:13px;
  }
  
  .hd-cart,
  .hd-chat{
    width:34px;
    height:34px;
    font-size:15px;
  }
  
  /* Category chips */
  .model{
    width:64px;
  }
  
  .model .ic{
    width:54px;
    height:54px;
    font-size:22px;
  }
  
  .model small{
    font-size:9px;
  }
  
  /* Certification banner */
  .certbar{
    padding:var(--space-sm) var(--space-md);
    gap:var(--space-sm);
  }
  
  .certbar .badge{
    width:38px;
    height:38px;
    font-size:24px;
  }
  
  .certbar b{
    font-size:var(--font-sm);
  }
  
  .certbar span{
    font-size:9px;
  }
  
  /* Filter chips */
  .chip{
    padding:6px 12px;
    font-size:11px;
    min-height:32px;
  }
  
  /* Product grid - ensure 2 columns fit well */
  .grid{
    gap:var(--space-sm);
  }
  
  .card .body{
    padding:var(--space-sm);
  }
  
  .card .nm{
    font-size:12px;
  }
  
  .price-current .pr{
    font-size:18px;
  }
  
  .btn-add{
    padding:8px var(--space-sm);
    font-size:12px;
    min-height:36px;
  }
  
  /* Bottom nav */
  .botnav{
    height:60px;
  }
  
  .botnav a .ic{
    font-size:20px;
    width:26px;
    height:26px;
  }
  
  .botnav a{
    font-size:10px;
  }
}

/* Extra Small Screens (320p-360p) */
@media(max-width:360px){
  :root{
    --font-base:13px;
    --font-sm:11px;
    --font-xs:9px;
  }
  
  .hd{
    gap:4px;
  }
  
  .brand img{
    height:24px;
    width:24px;
  }

  .hd-cart,
  .hd-chat{
    width:32px;
    height:32px;
    font-size:14px;
  }

  .searchbar {
    padding:0 4px 0 8px;
  }
  
  .model-row{
    gap:var(--space-md);
  }
  
  .model{
    width:60px;
  }
  
  .model .ic{
    width:50px;
    height:50px;
    font-size:20px;
  }
  
  .grid{
    gap:8px;
  }
  
  .card .ph{
    aspect-ratio:1/1.2;
  }
  
  .card .nm{
    font-size:11px;
    min-height:2.4em;
  }
  
  .price-current .pr{
    font-size:16px;
  }
  
  .tag{
    font-size:9px;
    padding:3px 8px;
  }
}
.auth-gate{text-align:center;padding:24px 18px}
.auth-gate .ag-ic{width:62px;height:62px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-dark))}
.auth-gate h3{font-size:var(--font-lg);font-weight:800;margin-bottom:6px}
.auth-gate p{color:var(--text-secondary);font-size:var(--font-sm);line-height:1.6;margin-bottom:16px;max-width:360px;margin-left:auto;margin-right:auto}
.auth-gate .btn{margin-bottom:8px}
.blog-grid{display:grid;grid-template-columns:1fr;gap:var(--space-md);margin-bottom:var(--space-xl)}
.blog-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;transition:all .25s ease;box-shadow:var(--shadow-sm)}
.blog-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.bc-cover{aspect-ratio:16/9;background:linear-gradient(135deg,var(--accent-light),#E0ECFF);display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:var(--accent);overflow:hidden}
.bc-cover img{width:100%;height:100%;object-fit:cover}
.bc-body{padding:var(--space-md);display:flex;flex-direction:column;gap:5px}
.bc-date{font-size:var(--font-xs);color:var(--text-tertiary)}
.bc-title{font-size:var(--font-base);font-weight:800;line-height:1.35;color:var(--text-primary)}
.bc-ex{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bc-link{font-size:var(--font-sm);font-weight:700;color:var(--accent);margin-top:4px}
@media(min-width:680px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.ostatus{font-size:11px;font-weight:800;padding:3px 10px;border-radius:100px;display:inline-flex;align-items:center;gap:5px}
.ostep{display:flex;align-items:flex-start;justify-content:space-between;gap:2px;margin:2px 0 12px}
.ostep-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;text-align:center}
.ostep-i small{font-size:9px;color:var(--text-tertiary);font-weight:700;line-height:1.2}
.ostep-dot{width:30px;height:30px;border-radius:50%;background:var(--bg-secondary);color:var(--text-tertiary);display:flex;align-items:center;justify-content:center;font-size:12px;border:2px solid var(--border-light);position:relative;z-index:1}
.ostep-i.on small{color:var(--accent)}
.ostep-i.on .ostep-dot{background:var(--accent);color:#fff;border-color:var(--accent)}
.ostep-i:not(:last-child)::after{content:'';position:absolute;top:14px;left:50%;width:100%;height:3px;background:var(--border-light);z-index:0}
.ostep-i.on:not(:last-child)::after{background:var(--accent)}

/* ===== HALAMAN PRODUK ===== */
.pp-crumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:var(--font-sm);color:var(--text-tertiary);padding:14px 0 4px}
.pp-crumb a{color:var(--text-secondary);text-decoration:none}
.pp-crumb a:hover{color:var(--accent)}
.pp-crumb i{font-size:9px}
.pp-crumb span{color:var(--text-primary);font-weight:600}
.pp{display:grid;grid-template-columns:1fr;gap:22px;padding:6px 0 10px}
.pp-main{position:relative;aspect-ratio:1/1;background:linear-gradient(160deg,#F3F4F6,#E5E7EB);border:1px solid var(--border-light);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pp-main img{width:100%;height:100%;object-fit:cover}
.pp-grade{position:absolute;top:12px;left:12px;background:rgba(17,24,39,.78);color:#fff;font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:100px;backdrop-filter:blur(4px)}
.pp-grade.likenew{background:#16a34a}.pp-grade.good{background:#0ea5e9}
.pp-soldout{position:absolute;inset:0;background:rgba(17,24,39,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;letter-spacing:1px}
.pp-thumbs{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.pp-thumb{width:64px;height:64px;border-radius:10px;overflow:hidden;border:2px solid var(--border-light);background:#fff;cursor:pointer;padding:0;flex-shrink:0;transition:border-color .15s}
.pp-thumb img{width:100%;height:100%;object-fit:cover}
.pp-thumb.on{border-color:var(--accent)}
.pp-video{margin-top:14px}
.pp-vid-wrap{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius-md);overflow:hidden;cursor:pointer}
.pp-vid-wrap img{width:100%;height:100%;object-fit:cover;opacity:.85}
.pp-vid-wrap iframe{width:100%;height:100%;border:0;display:block}
.pp-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pp-play i{width:64px;height:64px;border-radius:50%;background:rgba(255,0,0,.9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;padding-left:4px}
.pp-title{font-size:1.45rem;font-weight:800;line-height:1.3;letter-spacing:-.3px}
.pp-badges{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.pp-price-box{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:16px 18px;margin:14px 0}
.pp-compare{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.pp-compare .old{text-decoration:line-through;color:var(--text-tertiary);font-size:var(--font-sm)}
.pp-price{font-size:1.9rem;font-weight:800;color:var(--accent);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pp-actions .btn{flex:1;min-width:160px}
.pp-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.pp-share>span{font-size:var(--font-sm);font-weight:600;color:var(--text-secondary)}
.sbtn{border:1.5px solid var(--border-light);background:#fff;border-radius:100px;padding:8px 13px;font-size:.82rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--text-primary);transition:all .15s}
.sbtn:hover{border-color:var(--accent);color:var(--accent)}
.sbtn.wa:hover{border-color:#25D366;color:#128C7E}
.pp-desc-box{margin-top:16px}
.pp-desc-box>b{font-size:var(--font-base)}
.pp-trust{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-light)}
.pp-trust div{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);font-weight:600}
.pp-trust i{color:var(--accent)}
.pp-rel{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:6px 0 10px}
.pp-rel-card{border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:all .15s;display:flex;flex-direction:column}
.pp-rel-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--accent-light)}
.pp-rel-img{aspect-ratio:1/1;background:linear-gradient(160deg,#F3F4F6,#E5E7EB);display:flex;align-items:center;justify-content:center;font-size:2rem;color:#cbd5e1}
.pp-rel-img img{width:100%;height:100%;object-fit:cover}
.pp-rel-nm{padding:8px 10px 2px;font-size:var(--font-sm);font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pp-rel-pr{padding:0 10px 10px;font-weight:800;color:var(--accent);font-size:var(--font-sm)}
@media(min-width:760px){
  .pp{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:start}
  .pp-gallery{position:sticky;top:80px}
  .pp-title{font-size:1.7rem}
  .pp-rel{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1024px){ .pp-rel{grid-template-columns:repeat(6,1fr)} }

/* ===== ULASAN (SLIDER) ===== */
.rev-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:30px;margin-bottom:12px}
.rev-avg{display:inline-flex;align-items:center;gap:6px;background:#FEF3C7;color:#92400E;padding:6px 13px;border-radius:100px;font-size:var(--font-sm);font-weight:700}
.rev-avg i{color:#F59E0B}
.rev-wrap{position:relative}
.rev-slider{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 14px;-ms-overflow-style:none;scrollbar-width:none}
.rev-slider::-webkit-scrollbar{display:none}
.rev-card{flex:0 0 290px;max-width:88%;scroll-snap-align:start;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px}
.rev-stars{color:#F59E0B;font-size:.9rem;letter-spacing:1px}
.rev-text{font-size:var(--font-sm);color:var(--text-primary);line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rev-by{display:flex;align-items:center;gap:10px;margin-top:2px}
.rev-ava{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#1d4ed8);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.rev-meta b{display:block;font-size:var(--font-sm);font-weight:700}
.rev-meta small{font-size:.7rem;color:#16a34a;font-weight:600}
.rev-arrow{position:absolute;top:38%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--border-light);box-shadow:var(--shadow-md);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:2;color:var(--text-primary)}
.rev-arrow:hover{color:var(--accent);border-color:var(--accent)}
.rev-arrow.prev{left:-8px}.rev-arrow.next{right:-8px}
@media(min-width:760px){ .rev-arrow{display:flex} .rev-card{flex-basis:320px} }

/* ===== KARTU ALAMAT (CHECKOUT) ===== */
.addr-card{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:16px;margin-bottom:14px;position:relative;border-left:4px solid var(--accent)}
.addr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px}
.addr-head i{color:var(--accent)}
.addr-edit{background:none;border:1px solid var(--border-light);border-radius:8px;padding:5px 12px;font-size:.78rem;font-weight:700;color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.addr-edit:hover{background:var(--accent-light)}
.addr-name{font-size:var(--font-base);color:var(--text-primary);margin-bottom:3px}
.addr-text{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.5}
/* password toggle */
.pw-wrap{position:relative;display:flex}
.pw-wrap input{flex:1;padding-right:42px}
.pw-eye{position:absolute;right:2px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-tertiary);font-size:16px;cursor:pointer;padding:8px 10px}
.pw-eye:hover{color:var(--accent)}
/* payment method */
.pay-opt{flex:1;min-width:140px;display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--border-light);border-radius:var(--radius-md);cursor:pointer;transition:all .15s}
.pay-opt:hover{border-color:var(--accent-light)}
.pay-opt.sel{border-color:var(--accent);background:rgba(37,99,235,.04)}
.pay-ic{width:40px;height:40px;border-radius:10px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--accent);flex-shrink:0}
.pay-opt b{display:block;font-size:var(--font-sm)} .pay-opt small{display:block;font-size:.72rem;color:var(--text-tertiary)}