:root{
  --navy:#1B2A4A; --navy-deep:#101B33; --gold:#C9A227;
  --cream:#FBF6EC; --terracotta:#B8763E; --slate:#7A8B99; --ink:#22262E; --white:#ffffff;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ font-family:'Plus Jakarta Sans', sans-serif; background:var(--cream); color:var(--ink); }
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:500; }
a{ text-decoration:none; color:inherit; }

header{ position:sticky; top:0; z-index:50; background:#0A0A0A; color:#fff; }
.topbar{ text-align:center; font-size:12px; letter-spacing:.08em; padding:7px 12px; background:#000; color:var(--gold); }
.navwrap{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }
.logo{ font-family:'Fraunces', serif; font-size:26px; display:flex; align-items:center; gap:8px; }
.logo-img{ height:44px; width:auto; display:block; }
nav ul{ list-style:none; display:flex; gap:32px; font-size:14px; }
nav ul a{ opacity:.85; }
.icons{ display:flex; gap:22px; }
.icons button{ background:none; border:none; cursor:pointer; color:#fff; }
.icons svg{ width:20px; height:20px; }

.hero{ position:relative; max-width:1200px; margin:32px auto 0; padding:0 24px; }
.carousel{ position:relative; aspect-ratio:16/6; border-radius:120px 120px 8px 8px; overflow:hidden; display:flex; }
.carousel-track{ display:flex; width:100%; transition:transform .6s ease; }
.slide{ min-width:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:20px; color:#fff; position:relative;
  background-color:var(--navy); background-size:cover; background-position:center; background-repeat:no-repeat; }
.slide::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.25) 0%, rgba(10,10,10,.55) 100%);
}
.slide .eyebrow, .slide h2, .slide p{ position:relative; z-index:2; }
.slide .eyebrow{ font-size:12px; letter-spacing:.25em; text-transform:uppercase; opacity:.9; margin-bottom:10px; }
.slide h2{ font-size:clamp(22px,4vw,42px); margin-bottom:8px; }
.slide p{ font-size:14px; opacity:.92; max-width:460px; }
.arch-motif{ position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:70%; height:60%; border:1.5px solid rgba(255,255,255,.25); border-radius:120px 120px 0 0; border-bottom:none; z-index:2; }
.dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
.dots span{ width:7px; height:7px; border-radius:50%; background:var(--slate); opacity:.4; cursor:pointer; }
.dots span.active{ opacity:1; background:var(--gold); width:20px; border-radius:4px; }

.section{ max-width:1200px; margin:64px auto 0; padding:0 24px; }
.section-head{ margin-bottom:28px; }
.eyebrow{ color:var(--terracotta); font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; margin-bottom:6px; display:block; }
.section-head h2{ font-size:clamp(24px,3vw,34px); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:22px; }
.card{ background:#fff; border-radius:14px; overflow:hidden; border:1px solid #EEE6D6; transition:transform .25s ease; }
.card:hover{ transform:translateY(-4px); }
.thumb{ aspect-ratio:3/4; position:relative; overflow:hidden; }
.thumb::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 40%),
  repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px); }
.thumb .arch{ position:absolute; bottom:-30%; left:50%; transform:translateX(-50%); width:80%; height:75%; border:1px solid rgba(255,255,255,.35); border-bottom:none; border-radius:80px 80px 0 0; }
.thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.badge-sale{ position:absolute; top:10px; left:10px; background:var(--gold); color:var(--navy-deep); font-size:11px; font-weight:700; padding:4px 9px; border-radius:20px; z-index:2; }
.card-body{ padding:14px 16px 18px; }
.card-body .cat{ font-size:11px; color:var(--slate); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.card-body h3{ font-size:15px; font-weight:600; font-family:'Plus Jakarta Sans'; margin-bottom:8px; }
.price-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.price-now{ font-weight:700; color:var(--navy); font-size:15px; }
.price-old{ font-size:12px; color:var(--slate); text-decoration:line-through; }

.p1{ background:linear-gradient(150deg,#8C6A46,#B8763E); }
.p2{ background:linear-gradient(150deg,#2C4470,#1B2A4A); }
.p3{ background:linear-gradient(150deg,#6E5A7A,#463656); }
.p4{ background:linear-gradient(150deg,#C9A227,#8C7017); }
.p5{ background:linear-gradient(150deg,#4A6B5A,#2E4438); }
.p6{ background:linear-gradient(150deg,#7A8B99,#4E5C68); }
.p7{ background:linear-gradient(150deg,#B85C5C,#7C3A3A); }
.p8{ background:linear-gradient(150deg,#D9A85E,#B8763E); }
.p9{ background:linear-gradient(150deg,#3A5478,#1B2A4A); }

footer{ margin-top:90px; background:var(--navy-deep); color:rgba(255,255,255,.7); padding:32px 24px; text-align:center; font-size:13px; }
footer a{ color:var(--gold); }

@media (max-width:900px){ nav{ display:none; } }
@media (max-width:560px){
  .carousel{ border-radius:60px 60px 8px 8px; aspect-ratio:16/9; }
  .section{ padding:0 16px; margin-top:48px; }
}

/* ===================================================
   Halaman Detail Produk — layout, breadcrumb, zoom
   =================================================== */
.breadcrumb{
  max-width:1200px; margin:24px auto 0; padding:0 24px;
  font-size:13px; color:var(--slate);
}
.breadcrumb a{ color:var(--navy); font-weight:600; }
.breadcrumb .sep{ margin:0 6px; opacity:.5; }

.detail-wrap{
  max-width:1200px; margin:20px auto 0; padding:0 24px 80px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
}

/* --- Zoom viewer --- */
.zoom-box{
  position:relative;
  aspect-ratio:3/4;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #EEE6D6;
  cursor:zoom-in;
  background:#fff;
}
.zoom-box .thumb-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.zoom-box .thumb-fallback .arch{
  position:absolute; bottom:-30%; left:50%; transform:translateX(-50%);
  width:80%; height:75%; border:1px solid rgba(255,255,255,.35);
  border-bottom:none; border-radius:80px 80px 0 0;
}
.zoom-box img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .15s ease-out;
  transform-origin:center center;
}
.zoom-box.zoomed img{ transform:scale(2.2); cursor:zoom-out; }
.zoom-hint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(16,27,51,.75); color:#fff; font-size:12px;
  padding:6px 14px; border-radius:20px; pointer-events:none;
  display:flex; align-items:center; gap:6px;
  transition:opacity .2s;
}
.zoom-box.zoomed .zoom-hint{ opacity:0; }
.badge-sale-detail{
  position:absolute; top:14px; left:14px; z-index:3;
  background:var(--gold); color:var(--navy-deep);
  font-size:12px; font-weight:700; padding:5px 12px; border-radius:20px;
}

/* --- Fullscreen lightbox (klik gambar) --- */
.lightbox{
  position:fixed; inset:0; background:rgba(16,27,51,.94);
  display:none; align-items:center; justify-content:center;
  z-index:200; padding:40px; cursor:zoom-out;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:90vw; max-height:90vh; border-radius:8px;
  transition:transform .2s ease;
  cursor:grab;
}
.lightbox-close{
  position:absolute; top:24px; right:28px;
  background:none; border:1px solid rgba(255,255,255,.4);
  color:#fff; width:40px; height:40px; border-radius:50%;
  font-size:18px; cursor:pointer;
}

/* --- Info kolom kanan --- */
.detail-info .eyebrow{ margin-bottom:10px; }
.detail-info h1{ font-size:clamp(24px,3vw,32px); margin-bottom:14px; line-height:1.25; }
.detail-price-row{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.detail-price-now{ font-size:26px; font-weight:700; color:var(--navy); }
.detail-price-old{ font-size:15px; color:var(--slate); text-decoration:line-through; }
.detail-discount{ background:var(--gold); color:var(--navy-deep); font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; }

.detail-meta{
  display:flex; gap:24px; margin:20px 0; padding:18px 0;
  border-top:1px solid #EEE6D6; border-bottom:1px solid #EEE6D6;
}
.detail-meta div{ font-size:13px; }
.detail-meta strong{ display:block; color:var(--navy); font-size:14px; margin-bottom:2px; }
.stock-ok{ color:var(--terracotta); font-weight:700; }
.stock-low{ color:#B8483E; font-weight:700; }

.detail-desc h3{ font-size:15px; margin-bottom:8px; }
.detail-desc p{ font-size:14px; line-height:1.7; color:#4A5261; }

.detail-actions{ display:flex; gap:12px; margin-top:28px; }
.btn-cart{
  flex:1; background:var(--navy); color:#fff; border:none;
  padding:15px 20px; border-radius:10px; font-size:14px; font-weight:700;
  cursor:pointer;
}
.btn-cart:hover{ background:var(--navy-deep); }
.btn-wishlist{
  width:52px; border:1px solid #D8CFB8; background:#fff; border-radius:10px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

@media (max-width:900px){
  .detail-wrap{ grid-template-columns:1fr; gap:28px; }
}

/* --- Thumbnail strip galeri foto (halaman detail) --- */
.gallery-strip{
  display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:2px;
}
.gallery-thumb{
  flex:0 0 auto; width:64px; height:80px; padding:0; border-radius:8px;
  overflow:hidden; border:2px solid transparent; cursor:pointer; background:#fff;
  opacity:.65; transition:opacity .15s, border-color .15s;
}
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb:hover{ opacity:1; }
.gallery-thumb.active{ opacity:1; border-color:var(--gold); }

/* ===================================================
   Ikon Keranjang + Badge
   =================================================== */
.cart-icon-link{ position:relative; display:inline-flex; }
.cart-badge{
  position:absolute; top:-8px; right:-9px;
  background:var(--gold); color:var(--navy-deep);
  font-size:10px; font-weight:800;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:20px; display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
.cart-badge.bump{ transform:scale(1.35); }

.store-flash{
  max-width:1200px; margin:16px auto 0; padding:12px 24px;
  background:#E6F4EA; color:#3E7A4F; border:1px solid #BFE3C9;
  border-radius:10px; font-size:14px;
}
@media (max-width:560px){ .store-flash{ margin:12px 16px 0; } }

/* ===================================================
   Halaman Keranjang
   =================================================== */
.cart-wrap{ max-width:1000px; margin:32px auto 0; padding:0 24px 80px; }
.cart-wrap h1{ font-size:clamp(24px,3vw,32px); margin-bottom:24px; }

.cart-empty{
  background:#fff; border:1px solid #EEE6D6; border-radius:16px;
  padding:60px 20px; text-align:center; color:var(--slate);
}
.cart-empty a{ color:var(--terracotta); font-weight:700; }

.cart-item{
  display:grid; grid-template-columns:88px 1fr auto auto auto; gap:18px; align-items:center;
  background:#fff; border:1px solid #EEE6D6; border-radius:14px;
  padding:16px; margin-bottom:14px;
}
.cart-item-thumb{
  width:88px; height:110px; border-radius:10px; overflow:hidden; position:relative;
}
.cart-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-item-name{ font-weight:600; font-size:14px; margin-bottom:4px; }
.cart-item-cat{ font-size:12px; color:var(--slate); text-transform:uppercase; letter-spacing:.05em; }
.cart-item-price{ font-size:13px; color:var(--slate); margin-top:4px; }

.qty-form{ display:flex; align-items:center; gap:6px; }
.qty-form input{
  width:52px; text-align:center; padding:8px 4px; border:1px solid #D8CFB8; border-radius:8px; font-size:14px;
}
.qty-form button{
  background:var(--cream); border:1px solid #D8CFB8; border-radius:8px;
  width:30px; height:34px; font-size:14px; cursor:pointer; color:var(--navy);
}

.cart-item-subtotal{ font-weight:700; color:var(--navy); font-size:14px; white-space:nowrap; }

.cart-item-remove{
  background:none; border:none; color:#B8483E; cursor:pointer; font-size:13px; font-weight:600;
}

.cart-summary{
  background:#fff; border:1px solid #EEE6D6; border-radius:14px; padding:22px;
  margin-top:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.cart-summary .total-label{ font-size:13px; color:var(--slate); }
.cart-summary .total-value{ font-size:24px; font-weight:700; color:var(--navy); }
.btn-checkout{
  background:var(--navy); color:#fff; border:none; padding:14px 28px;
  border-radius:10px; font-weight:700; font-size:14px; cursor:pointer;
}
.btn-checkout:hover{ background:var(--navy-deep); }

@media (max-width:640px){
  .cart-item{ grid-template-columns:70px 1fr; grid-template-rows:auto auto; }
  .cart-item-thumb{ width:70px; height:88px; grid-row:1 / 3; }
  .qty-form, .cart-item-subtotal, .cart-item-remove{ grid-column:2; justify-self:start; }
}

/* ===================================================
   Feedback tombol "Tambah ke Keranjang" di halaman detail
   =================================================== */
.add-cart-feedback{
  font-size:13px; color:#3E7A4F; font-weight:600; margin-top:10px;
  opacity:0; transition:opacity .2s;
}
.add-cart-feedback.show{ opacity:1; }
.qty-selector{ display:flex; align-items:center; gap:8px; }
.qty-selector input{
  width:56px; text-align:center; padding:14px 4px; border:1px solid #D8CFB8; border-radius:10px; font-size:14px;
}