/* ============================================================
   ZULI COSMETICS — PREMIUM PRODUCT PAGE (PDP) OVERLAY
   Loaded LAST on product.html. Purely presentational: it
   restyles existing markup without changing any JS hooks
   (ids, classes, onclick handlers all preserved).
   ============================================================ */

:root{
  --pdp-ink:#1c1a17;
  --pdp-muted:#8a8378;
  --pdp-cream:#fbf7f1;
  --pdp-cream-2:#f4ede2;
  --pdp-line:#ece5d8;
  --pdp-gold:#c8a24a;
  --pdp-gold-deep:#a9812f;
  --pdp-gold-soft:#f6ecd2;
}

/* ---------- Canvas ---------- */
body:has(.product-detail){
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(200,162,74,0.08), transparent 60%),
    linear-gradient(180deg,#fdfaf5 0%,#fbf7f1 100%) !important;
  color:var(--pdp-ink);
  padding-top:64px;
}
@media (max-width:768px){
  body:has(.product-detail){ padding-top:56px; padding-bottom:84px; }
}

/* ============================================================
   HEADER
   ============================================================ */
nav.product-header{
  height:64px;
  padding:0 24px !important;
  background:rgba(253,250,245,0.82) !important;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(200,162,74,0.18) !important;
  box-shadow:0 6px 24px rgba(28,26,23,0.05) !important;
}
nav.product-header .brand-title{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
  gap:3px;
  opacity:1 !important;
}
nav.product-header .brand-title .brand-name{
  font-family:'Playfair Display',serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:8px;
  padding-left:8px;
  color:var(--pdp-ink);
  text-transform:uppercase;
}
nav.product-header .brand-title .brand-sub{
  font-family:'Poppins',sans-serif;
  font-size:8.5px;
  font-weight:500;
  letter-spacing:5px;
  padding-left:5px;
  color:var(--pdp-gold-deep);
  text-transform:uppercase;
}
@media (max-width:768px){
  nav.product-header .brand-title .brand-name{ font-size:20px; letter-spacing:6px; padding-left:6px; }
  nav.product-header .brand-title .brand-sub{ font-size:7.5px; letter-spacing:4px; padding-left:4px; }
}
nav.product-header .back-btn{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--pdp-line);
  border-radius:50%;
  background:#fff;
  font-size:18px;
  color:var(--pdp-ink);
  box-shadow:0 2px 8px rgba(28,26,23,0.05);
  transition:.25s ease;
}
nav.product-header .back-btn:hover{
  background:var(--pdp-ink);
  color:#fff;
  transform:none;
}
nav.product-header .cart-icon{ font-size:20px; }
nav.product-header .cart-icon span{
  background:var(--pdp-gold) !important;
  font-weight:600;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.pdp-breadcrumb{
  max-width:1180px;
  margin:26px auto 0;
  padding:0 28px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  letter-spacing:.4px;
  color:var(--pdp-muted);
}
.pdp-breadcrumb a{ color:var(--pdp-muted); text-decoration:none; transition:.2s; }
.pdp-breadcrumb a:hover{ color:var(--pdp-gold-deep); }
.pdp-breadcrumb .sep{ opacity:.5; }
.pdp-breadcrumb .crumb-current{
  color:var(--pdp-ink);
  font-weight:500;
  max-width:280px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ============================================================
   PRODUCT DETAIL LAYOUT
   ============================================================ */
.product-detail{
  max-width:1180px !important;
  margin:22px auto 70px !important;
  padding:44px !important;
  gap:64px !important;
  background:#ffffff !important;
  border:1px solid var(--pdp-line) !important;
  border-radius:26px !important;
  box-shadow:0 30px 80px rgba(28,26,23,0.08), 0 8px 24px rgba(28,26,23,0.04) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  align-items:flex-start !important;
  flex-wrap:nowrap !important;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.product-detail.show{ opacity:1 !important; transform:translateY(0) !important; }
.product-detail::before{ display:none !important; }

@media (max-width:900px){
  .product-detail{ flex-direction:column !important; gap:32px !important; padding:22px !important; }
}

/* ---------- LEFT: gallery ---------- */
.product-image-box{
  flex:0 0 auto;
  width:480px;
  max-width:100%;
  position:sticky;
  top:88px;
}
@media (max-width:900px){ .product-image-box{ position:static; width:100%; } }

.zoom-container{
  border-radius:22px !important;
  border:1px solid var(--pdp-line);
  background:
    radial-gradient(120% 120% at 30% 15%, #ffffff 0%, var(--pdp-cream) 78%);
  box-shadow:inset 0 1px 0 #fff, 0 18px 46px rgba(28,26,23,0.08);
  overflow:hidden;
}
.product-detail img#productImage{
  width:100% !important;
  aspect-ratio:1/1;
  object-fit:contain;
  display:block;
  padding:34px !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  border-radius:22px !important;
  box-shadow:none !important;
  cursor:zoom-in;
}
.zoom-container:hover #productImage{ transform:scale(1.07) !important; }
@media (prefers-reduced-motion:reduce){
  .zoom-container:hover #productImage{ transform:none !important; }
}

/* stock badge + flag */
.stock-badge{
  top:18px !important; left:18px !important;
  border-radius:999px !important;
  font-weight:600 !important;
  letter-spacing:.6px !important;
}
.pdp-flag{
  position:absolute;
  top:18px; right:18px;
  z-index:5;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--pdp-gold-deep);
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(200,162,74,0.4);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(200,162,74,0.16);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

/* assurance strip under the image */
.pdp-assurance{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:18px;
}
.pdp-assurance > div{
  text-align:center;
  padding:14px 6px;
  background:var(--pdp-cream);
  border:1px solid var(--pdp-line);
  border-radius:14px;
}
.pdp-assurance span{ font-size:20px; display:block; margin-bottom:6px; }
.pdp-assurance p{
  margin:0 !important;
  font-size:11px !important;
  line-height:1.35 !important;
  color:var(--pdp-ink) !important;
  font-weight:500 !important;
}

/* ---------- RIGHT: info ---------- */
.product-info{
  flex:1 1 auto !important;
  max-width:560px !important;
  padding:6px 0 !important;
  gap:0 !important;
}
#productCategory{
  font-size:12px !important;
  letter-spacing:2.4px !important;
  text-transform:uppercase;
  color:var(--pdp-gold-deep) !important;
  font-weight:600 !important;
  margin:0 0 10px !important;
}
.product-info h2#productName{
  font-family:'Playfair Display',serif !important;
  font-size:40px !important;
  line-height:1.12 !important;
  font-weight:700 !important;
  letter-spacing:.2px !important;
  color:var(--pdp-ink) !important;
  margin:0 0 14px !important;
}

/* rating */
.pdp-rating{
  display:flex;align-items:center;gap:10px;
  margin:0 0 18px;
}
.pdp-rating .stars{
  color:var(--pdp-gold);
  font-size:16px;
  letter-spacing:2px;
}
.pdp-rating .rating-count{
  font-size:13px;
  color:var(--pdp-muted);
  font-weight:500;
}

/* price */
#productPrice{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:30px !important;
  font-weight:700 !important;
  color:var(--pdp-ink) !important;
  margin:0 0 6px !important;
}
.pdp-tax-note{
  font-size:12.5px !important;
  color:var(--pdp-muted) !important;
  margin:0 0 18px !important;
}

/* divider before variants */
#shadeSection{
  border-top:1px solid var(--pdp-line);
  padding-top:22px;
  margin-top:6px;
}

/* benefit chips (base css hides .feature — we re-enable, elegantly) */
.product-info .features{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:10px !important;
  margin:4px 0 22px !important;
}
.product-info .features .feature{
  display:flex !important;
  align-items:center;
  gap:8px;
  padding:11px 13px !important;
  font-size:12.5px !important;
  font-weight:500;
  color:var(--pdp-ink) !important;
  background:var(--pdp-cream) !important;
  border:1px solid var(--pdp-line) !important;
  border-radius:12px !important;
  line-height:1.35;
}
@media (max-width:520px){
  .product-info .features{ grid-template-columns:1fr; }
}

/* variant titles */
.shade-title,
#variantTitle,
.size-title{
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:1.6px !important;
  text-transform:uppercase;
  color:var(--pdp-muted) !important;
  margin:0 0 12px !important;
}

/* shade swatches */
#shadeContainer{ gap:12px !important; margin:0 0 20px !important; flex-wrap:wrap; }
#shadeContainer .shade,
.shade{
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  border:1px solid rgba(28,26,23,0.12) !important;
  box-shadow:0 2px 8px rgba(28,26,23,0.12), inset 0 1px 2px rgba(255,255,255,0.5) !important;
  transition:.25s ease !important;
}
#shadeContainer .shade:hover,
.shade:hover{ transform:scale(1.12) !important; }
#shadeContainer .shade.active,
.shade.active{
  border:2px solid var(--pdp-gold) !important;
  box-shadow:0 0 0 3px var(--pdp-gold-soft), 0 6px 16px rgba(200,162,74,0.35) !important;
  transform:scale(1.1) !important;
}

/* size / color buttons */
.size-container{ gap:10px !important; margin:0 0 18px !important; }
.size-btn{
  padding:10px 18px !important;
  border:1px solid var(--pdp-line) !important;
  background:#fff !important;
  color:var(--pdp-ink) !important;
  border-radius:999px !important;
  font-weight:500 !important;
  font-size:13.5px !important;
  margin:0 !important;
  transition:.2s ease !important;
}
.size-btn:hover{ border-color:var(--pdp-gold) !important; transform:translateY(-1px) !important; }
.size-btn.active{
  background:var(--pdp-ink) !important;
  color:#fff !important;
  border-color:var(--pdp-ink) !important;
}
#selectedShadeText{
  font-size:13px !important;
  color:var(--pdp-ink) !important;
  margin:0 0 4px !important;
}

/* buy row: qty + actions */
.pdp-buy-row{
  display:flex;
  align-items:stretch;
  gap:14px;
  margin:24px 0 8px;
  flex-wrap:wrap;
}
.qty-box{
  display:inline-flex !important;
  align-items:center;
  gap:0 !important;
  margin:0 !important;
  border:1px solid var(--pdp-line);
  border-radius:999px;
  background:#fff;
  padding:4px;
  height:56px;
}
.qty-box button{
  width:42px !important;height:42px !important;
  border:none !important;
  background:var(--pdp-cream) !important;
  color:var(--pdp-ink) !important;
  border-radius:50% !important;
  font-size:18px !important;
  transition:.2s ease !important;
}
.qty-box button:hover{ background:var(--pdp-gold) !important; color:#fff !important; transform:none !important; }
.qty-box span{ min-width:42px !important; font-size:16px !important; font-weight:600 !important; }

.product-actions{
  flex:1 1 auto;
  display:flex !important;
  gap:12px;
  margin:0 !important;
  min-width:260px;
}
.product-info .product-actions .btn{
  flex:1;
  height:56px !important;
  border-radius:999px !important;
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:.4px !important;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
/* Add to cart = elegant outline */
.product-info .product-actions .btn:first-of-type{
  background:#fff !important;
  color:var(--pdp-ink) !important;
  border:1.5px solid var(--pdp-ink) !important;
}
.product-info .product-actions .btn:first-of-type:hover{
  background:var(--pdp-ink) !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
}
/* Buy now = gold */
.product-info .product-actions .buy-now-btn{
  background:linear-gradient(135deg,var(--pdp-gold-deep),var(--pdp-gold),#e7cf8a) !important;
  color:#231d10 !important;
  border:none !important;
  box-shadow:0 12px 26px rgba(200,162,74,0.34) !important;
}
.product-info .product-actions .buy-now-btn:hover{
  transform:translateY(-2px) scale(1.01) !important;
  box-shadow:0 16px 34px rgba(200,162,74,0.46) !important;
}

/* trust box */
.product-trust{ margin:22px 0 4px !important; }
.product-trust-box{
  max-width:none !important;
  width:100% !important;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 18px;
  background:var(--pdp-cream) !important;
  border:1px solid var(--pdp-line) !important;
  border-left:3px solid var(--pdp-gold) !important;
  border-radius:16px !important;
  padding:16px 18px !important;
  box-shadow:none !important;
}
.product-trust-box p{ margin:5px 0 !important; font-size:12.5px !important; color:var(--pdp-ink) !important; }
.product-trust-box b{ color:var(--pdp-gold-deep) !important; }

/* ---------- Accordion ---------- */
.pdp-accordion{ margin-top:24px; border-top:1px solid var(--pdp-line); }
.pdp-accordion details{ border-bottom:1px solid var(--pdp-line); }
.pdp-accordion summary{
  list-style:none;
  cursor:pointer;
  padding:18px 2px;
  font-family:'Playfair Display',serif;
  font-size:17px;
  color:var(--pdp-ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.pdp-accordion summary::-webkit-details-marker{ display:none; }
.pdp-accordion summary::after{
  content:"+";
  font-family:'Poppins',sans-serif;
  font-size:22px;
  color:var(--pdp-gold-deep);
  font-weight:300;
  transition:transform .25s ease;
}
.pdp-accordion details[open] summary::after{ content:"–"; }
.pdp-accordion .acc-body{ padding:0 2px 20px; }
.pdp-accordion .acc-body p{
  margin:0 !important;
  font-size:14px !important;
  line-height:1.7 !important;
  color:#615c53 !important;
}

/* ============================================================
   REVIEWS STRIP
   ============================================================ */
.pdp-reviews{
  max-width:1180px;
  margin:0 auto 70px;
  padding:0 28px;
}
.pdp-reviews .rev-head{
  text-align:center;
  margin-bottom:26px;
}
.pdp-reviews .rev-head h3{
  font-family:'Playfair Display',serif;
  font-size:26px;
  color:var(--pdp-ink);
  margin:0 0 6px;
}
.pdp-reviews .rev-head p{ color:var(--pdp-muted); font-size:13px; margin:0; }
.pdp-reviews .rev-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:820px){ .pdp-reviews .rev-grid{ grid-template-columns:1fr; } }
.rev-card{
  background:#fff;
  border:1px solid var(--pdp-line);
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 30px rgba(28,26,23,0.05);
}
.rev-card .rev-stars{ color:var(--pdp-gold); letter-spacing:2px; font-size:14px; }
.rev-card .rev-text{ font-size:14px; line-height:1.65; color:#4f4a42; margin:12px 0 14px; }
.rev-card .rev-name{ font-size:13px; font-weight:600; color:var(--pdp-ink); }
.rev-card .rev-name span{ color:var(--pdp-gold-deep); font-weight:500; margin-left:6px; }

/* ============================================================
   RELATED PRODUCTS
   ============================================================ */
.related-head{ text-align:center; max-width:1180px; margin:12px auto 0; padding:0 28px; }
.related-title{
  font-family:'Playfair Display',serif !important;
  font-size:28px !important;
  text-align:center;
  margin:0 auto 6px !important;
  color:var(--pdp-ink);
}
.related-sub{
  text-align:center;
  color:var(--pdp-muted);
  font-size:13px;
  letter-spacing:.3px;
  margin:0 auto 4px;
}
@media (max-width:520px){
  .related-title{ font-size:23px !important; }
  .related-sub{ font-size:12px; padding:0 8px; }
}
.related-products{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  justify-content:initial !important;
  gap:22px !important;
  max-width:1180px;
  margin:0 auto !important;
  padding:24px 28px 24px !important;
}
.related-card{
  width:auto !important;
  min-width:0 !important;
  height:100% !important;
  background:#fff !important;
  border:1px solid var(--pdp-line) !important;
  border-radius:20px !important;
  padding:16px !important;
  box-shadow:0 12px 30px rgba(28,26,23,0.06) !important;
}
@media (max-width:900px){
  .related-products{
    grid-template-columns:repeat(2,1fr) !important;
    gap:16px !important;
    padding:18px 16px 16px !important;
  }
}
@media (max-width:520px){
  .related-products{ gap:12px !important; }
  .related-card{ border-radius:16px !important; padding:12px !important; }
  .related-card img{ height:140px !important; }
}
.related-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 20px 44px rgba(28,26,23,0.12) !important;
}
.related-card img{
  border:1px solid var(--pdp-line) !important;
  border-radius:14px !important;
  background:var(--pdp-cream) !important;
  height:170px !important;
}
.recommend-badge{
  background:var(--pdp-gold-soft) !important;
  color:var(--pdp-gold-deep) !important;
  border:1px solid rgba(200,162,74,0.28) !important;
  font-size:10px !important;
  letter-spacing:.6px !important;
  font-weight:600 !important;
  padding:4px 10px !important;
}
.recommend-add{
  background:var(--pdp-ink) !important;
  color:#fff !important;
  border-radius:999px !important;
}
.recommend-add:hover{ box-shadow:0 10px 22px rgba(28,26,23,0.22) !important; }
.recommend-price .new-price{ color:var(--pdp-ink) !important; }
.recommend-price .off-price{ color:#0b8f35 !important; }

/* ============================================================
   STICKY MOBILE BAR (refine only)
   ============================================================ */
.sticky-bar{
  background:rgba(253,250,245,0.94) !important;
  border-top:1px solid var(--pdp-line) !important;
  padding:10px 14px !important;
  gap:12px !important;
}
.sticky-bar button{
  height:50px;
  border-radius:999px !important;
  font-size:15px !important;
}
.sticky-bar button:first-child{
  background:#fff !important;
  color:var(--pdp-ink) !important;
  border:1.5px solid var(--pdp-ink) !important;
}
.sticky-bar button:last-child{
  background:linear-gradient(135deg,var(--pdp-gold-deep),var(--pdp-gold),#e7cf8a) !important;
  color:#231d10 !important;
  box-shadow:0 8px 20px rgba(200,162,74,0.4) !important;
}

/* ---------- Cart drawer light refine ---------- */
#cartBox{ background:#fdfaf5 !important; }
#cartBox h3{ font-family:'Playfair Display',serif !important; }

/* ---------- Mobile: avoid duplicate CTAs (sticky bar handles it) ---------- */
@media (max-width:768px){
  .product-info .product-actions{ display:none !important; }
  .pdp-buy-row{ margin:20px 0 4px; }
  .qty-box{ height:52px; }
  .product-trust-box{ grid-template-columns:1fr; }
  .pdp-assurance p{ font-size:10.5px !important; }
  .product-info h2#productName{ font-size:32px !important; }
}