*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0a;--surface:#111;--surface2:#181818;--surface3:#222;
  --border:#2a2a2a;--border2:#333;
  --gold:#d4af37;--gold2:#f2d472;
  --text:#f0ece4;--muted:#888;--muted2:#555;
  --danger:#e05252;--success:#52c97a;
  --radius:8px;--radius-lg:14px;
}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:300;line-height:1.6;min-height:100vh}
.serif{font-family:'Cormorant Garamond',serif}

nav{position:sticky;top:0;z-index:100;background:rgba(10,10,10,0.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:64px}
.logo{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;letter-spacing:0.18em;color:var(--gold2);cursor:pointer}
.logo span{color:var(--text);font-size:9px;letter-spacing:0.5em;display:block;font-family:'DM Sans',sans-serif;font-weight:300;margin-top:-4px;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:1.5rem}
.nav-link{color:var(--muted);font-size:13px;letter-spacing:0.08em;cursor:pointer;text-transform:uppercase;transition:color 0.2s}
.nav-link:hover{color:var(--text)}
.cart-btn{display:flex;align-items:center;gap:8px;background:var(--gold);color:#0a0a0a;border:none;padding:8px 18px;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.05em;cursor:pointer;transition:background 0.2s}
.cart-btn:hover{background:var(--gold2)}
.cart-count{background:#0a0a0a;color:var(--gold);border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500}

.hero{padding:6rem 2rem 4rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(201,168,76,0.08) 0%,transparent 70%);pointer-events:none}
.hero-label{font-size:11px;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(44px,6vw,76px);font-weight:300;line-height:1.1;margin-bottom:1rem}
.hero h1 em{color:var(--gold2);font-style:italic}
.hero p{color:var(--muted);font-size:15px;max-width:460px;margin:0 auto 2.5rem}
.hero-cta{display:inline-flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn-primary{background:var(--gold);color:#0a0a0a;border:none;padding:12px 32px;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;letter-spacing:0.06em;cursor:pointer;transition:background 0.2s}
.btn-primary:hover{background:var(--gold2)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border2);padding:12px 32px;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:300;letter-spacing:0.06em;cursor:pointer;transition:all 0.2s}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}

.filters{display:flex;gap:8px;padding:0 2rem 2rem;overflow-x:auto;scrollbar-width:none}
.filter-chip{background:transparent;border:1px solid var(--border);color:var(--muted);padding:6px 18px;border-radius:20px;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:all 0.2s}
.filter-chip.active,.filter-chip:hover{border-color:var(--gold);color:var(--gold2);background:rgba(201,168,76,0.08)}

.section-header{display:flex;align-items:baseline;justify-content:space-between;padding:0 2rem 1.5rem}
.section-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;letter-spacing:0.04em}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--border);margin:0 2rem;border-radius:var(--radius-lg);overflow:hidden}
.product-card{background:var(--surface);cursor:pointer;transition:background 0.2s;position:relative;overflow:hidden}
.product-card:hover{background:var(--surface2)}
.product-card:hover .product-img img{transform:scale(1.05)}
.badge{position:absolute;top:12px;left:12px;z-index:2;padding:4px 10px;border-radius:4px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;font-weight:500}
.badge-new{background:rgba(201,168,76,0.15);color:var(--gold2);border:1px solid rgba(201,168,76,0.3)}
.badge-sale{background:rgba(224,82,82,0.15);color:#f08080;border:1px solid rgba(224,82,82,0.3)}
.badge-hot{background:rgba(255,150,50,0.15);color:#ffaa60;border:1px solid rgba(255,150,50,0.3)}
.product-img{background:var(--surface2);aspect-ratio:1;overflow:hidden;display:flex;align-items:center;justify-content:center}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.product-info{padding:1rem 1.25rem}
.product-category{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.product-name{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:400;margin-bottom:6px;line-height:1.3}
.product-desc{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:12px}
.product-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.product-price{font-size:16px;font-weight:500}
.product-price .orig{font-size:12px;color:var(--muted2);text-decoration:line-through;margin-right:6px;font-weight:300}

.amazon-btn{display:flex;align-items:center;gap:6px;background:var(--gold);color:#0a0a0a;border:none;padding:7px 14px;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;letter-spacing:0.04em;cursor:pointer;text-decoration:none;transition:background 0.2s;white-space:nowrap}
.amazon-btn:hover{background:var(--gold2)}

.trust{display:flex;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:3rem 0 0}
.trust-item{flex:1;text-align:center;padding:1.5rem;border-right:1px solid var(--border)}
.trust-item:last-child{border-right:none}
.trust-icon{font-size:22px;margin-bottom:6px}
.trust-title{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text);margin-bottom:2px}
.trust-sub{font-size:11px;color:var(--muted)}

footer{padding:3rem 2rem;text-align:center;border-top:1px solid var(--border);margin-top:3rem}
.footer-inner{max-width:600px;margin:0 auto}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:200;opacity:0;pointer-events:none;transition:opacity 0.3s}
.overlay.show{opacity:1;pointer-events:all}
.cart-sidebar{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--surface);border-left:1px solid var(--border2);z-index:201;transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);display:flex;flex-direction:column}
.cart-sidebar.show{transform:translateX(0)}
.cart-header{padding:1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.cart-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;letter-spacing:0.06em}
.close-btn{background:transparent;border:1px solid var(--border2);color:var(--muted);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.close-btn:hover{border-color:var(--text);color:var(--text)}
.cart-items{flex:1;overflow-y:auto;padding:1rem}
.cart-empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.cart-empty-icon{font-size:48px;margin-bottom:1rem}
.cart-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.cart-item-img{width:56px;height:56px;background:var(--surface2);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.cart-item-info{flex:1}
.cart-item-name{font-size:14px;font-weight:400;margin-bottom:2px}
.cart-item-price{font-size:13px;color:var(--gold2)}
.cart-item-qty{display:flex;align-items:center;gap:8px;margin-top:6px}
.qty-btn{width:22px;height:22px;background:var(--surface3);border:1px solid var(--border);color:var(--text);border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.qty-num{font-size:13px;min-width:16px;text-align:center}
.cart-remove{background:transparent;border:none;color:var(--muted2);cursor:pointer;font-size:16px;padding:4px;transition:color 0.2s}
.cart-remove:hover{color:var(--danger)}
.cart-footer{padding:1.5rem;border-top:1px solid var(--border)}
.cart-row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.cart-row span:last-child{font-weight:500;color:var(--gold2)}
.cart-row.muted span{color:var(--muted) !important;font-weight:300}
.cart-note{font-size:11px;color:var(--muted);margin:10px 0;padding:8px;background:rgba(201,168,76,0.05);border:1px solid rgba(201,168,76,0.1);border-radius:var(--radius)}
.checkout-btn{width:100%;background:var(--gold);color:#0a0a0a;border:none;padding:14px;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;letter-spacing:0.06em;cursor:pointer;transition:background 0.2s;text-transform:uppercase}
.checkout-btn:hover{background:var(--gold2)}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:300;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity 0.3s}
.modal-overlay.show{opacity:1;pointer-events:all}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);width:min(560px,100%);animation:slideUp 0.3s cubic-bezier(0.16,1,0.3,1) both}
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-head{padding:1.5rem 2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300}
.modal-body{padding:2rem}
.modal-footer{padding:0 2rem 2rem;display:flex;gap:10px}

.form-section{margin-bottom:1.5rem}
.form-label{font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:0.6rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-input{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:11px 14px;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:300;outline:none;transition:border-color 0.2s;display:block;margin-bottom:10px}
.form-input:last-child{margin-bottom:0}
.form-input:focus{border-color:var(--gold)}
.form-input::placeholder{color:var(--muted2)}

.order-summary{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1.5rem}
.summary-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.summary-row.total{border-top:1px solid var(--border);margin-top:8px;padding-top:12px;font-size:15px;font-weight:500;color:var(--gold2)}

.pay-methods{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
.pay-badge{background:var(--surface3);border:1px solid var(--border);border-radius:6px;padding:5px 12px;font-size:11px;color:var(--muted);letter-spacing:0.05em}

.btn-back{background:transparent;border:1px solid var(--border2);color:var(--muted);padding:12px 24px;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;transition:all 0.2s}
.btn-back:hover{border-color:var(--text);color:var(--text)}
.btn-next{flex:1;background:var(--gold);color:#0a0a0a;border:none;padding:12px 24px;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;letter-spacing:0.06em;cursor:pointer;transition:background 0.2s;text-transform:uppercase}
.btn-next:hover{background:var(--gold2)}
.btn-next:disabled{opacity:0.5;cursor:not-allowed}

.redirect-screen{text-align:center;padding:2.5rem 1rem}
.redirect-spinner{width:44px;height:44px;border:2px solid var(--border2);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 1.5rem}
@keyframes spin{to{transform:rotate(360deg)}}
.redirect-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;color:var(--gold2);margin-bottom:0.5rem}

@media(max-width:600px){
  nav{padding:0 1rem}
  .hero{padding:4rem 1rem 2.5rem}
  .filters,.section-header{padding-left:1rem;padding-right:1rem}
  .products{margin:0 1rem}
  .trust{flex-wrap:wrap}
  .trust-item{flex:1 1 45%;border-right:none;border-bottom:1px solid var(--border)}
  .modal-body{padding:1.25rem}
  .modal-footer{padding:0 1.25rem 1.25rem}
  .form-row{grid-template-columns:1fr}
}
/* ===== AMAZON-STYLE IMAGE ZOOM ===== */
.product-img {
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
}

.zoom-lens {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 2px solid #e07b39;
  border-radius: 4px;
  pointer-events: none;
  display: none;
  z-index: 3;
  background: rgba(255, 200, 100, 0.15);
}

.zoom-result {
  display: none;
  position: fixed;
  width: 360px;
  height: 360px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.zoom-result-img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 600% 600%;
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

.lightbox img.zoomed {
  cursor: zoom-out;
  transform: scale(1.8);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

.lightbox-name {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  max-width: 480px;
}

.lightbox-tip {
  color: #aaa;
  font-size: 12px;
}
/* ===== THUMBNAIL STRIP (sa bawat product card) ===== */
.thumb-strip {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.thumb-strip::-webkit-scrollbar { display: none; }

.thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1.5px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.thumb.active,
.thumb:hover {
  border-color: #e07b39;
}

/* ===== LIGHTBOX THUMBNAILS ===== */
.lightbox-thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 90vw;
}

.lb-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}
.lb-thumb:hover,
.lb-thumb.active {
  opacity: 1;
  border-color: #fff;
}
/* ===== END THUMBNAILS ===== */
/* ===== END ZOOM ===== */