/* ================= Standalone product detail page ================= */
/* Reuses .checkout-header / .checkout-main / .checkout-state / .btn / .auth-*
   styling from style.css + checkout.css, plus its own product-detail layout. */

.checkout-header-actions{ gap:22px; }
.cart-badge-link{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-label); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-muted); transition:color .3s ease;
}
.cart-badge-link:hover{ color:var(--gold-light); }
.cart-badge-count{
  min-width:18px; height:18px; padding:0 4px; border-radius:50%;
  background:var(--gold); color:var(--bg-deep); font-size:0.68rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-body);
}

.product-detail{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
  max-width:1080px; margin:0 auto;
}

.product-media{
  position:relative; aspect-ratio:1/1; border-radius:6px; overflow:hidden;
  background:linear-gradient(165deg, rgba(74,35,90,0.55), rgba(30,15,43,0.85));
  border:1px solid var(--line);
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.product-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-icon-wrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.product-icon-wrap svg{ width:38%; height:38%; }

/* ---- image zoom (hover-lens on desktop, tap-to-lightbox everywhere) ---- */
.product-zoom-wrap{ position:relative; width:100%; height:100%; cursor:zoom-in; }
.product-zoom-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-zoom-wrap.has-hover-zoom::after{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .2s ease;
  background-image:var(--zoom-img); background-repeat:no-repeat;
  background-size:220%; background-position:var(--zoom-x,50%) var(--zoom-y,50%);
  pointer-events:none;
}
.product-zoom-wrap.has-hover-zoom:hover::after{ opacity:1; }
.zoom-hint{
  position:absolute; bottom:12px; inset-inline-end:12px; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:rgba(30,15,43,0.75); border:1px solid var(--line);
  color:var(--gold-light); pointer-events:none;
}
.zoom-hint svg{ width:16px; height:16px; }

.image-lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(6,2,10,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.image-lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-stage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:40px; }
.lightbox-stage img{
  max-width:100%; max-height:100%; object-fit:contain; touch-action:none;
  transition:transform .15s ease; cursor:zoom-in; user-select:none; -webkit-user-drag:none;
}
.lightbox-close{
  position:absolute; top:18px; inset-inline-end:18px; width:42px; height:42px; border-radius:50%;
  background:rgba(30,15,43,0.85); border:1px solid var(--line); color:var(--gold-light); font-size:1.7rem;
  line-height:1; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ border-color:var(--gold); color:var(--gold); }

@media (max-width: 700px){
  .lightbox-stage{ padding:16px; }
}

.product-info{ padding-top:6px; }
.product-info .eyebrow{ display:block; margin-bottom:14px; }
.product-info h1{ font-size:clamp(1.9rem, 3.2vw, 2.6rem); margin-bottom:18px; }

.product-price-row{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.product-price{ font-family:var(--font-label); color:var(--gold-light); font-size:1.15rem; letter-spacing:0.06em; }
.product-oos-badge{
  color:#e8a3a3; font-family:var(--font-label); font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase; border:1px solid rgba(232,163,163,0.4); border-radius:3px; padding:4px 10px;
}
.product-oos-badge.hidden{ display:none; }

.product-desc{ color:var(--ink-muted); font-size:0.98rem; line-height:1.8; margin-bottom:30px; max-width:520px; }

.product-qty-row{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.product-qty-row > span{
  font-family:var(--font-label); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold);
}
.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:3px; }
.qty-stepper button{
  width:44px; height:44px; background:transparent; border:none; color:var(--gold-light);
  font-size:1.1rem; cursor:pointer; transition:background .25s ease;
}
.qty-stepper button:hover{ background:rgba(212,175,55,0.10); }
.qty-stepper span{ min-width:34px; text-align:center; font-family:var(--font-body); color:var(--ink); }

.product-cta{ width:100%; max-width:340px; justify-content:center; margin-bottom:8px; }
.product-cta:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

.product-added-msg{ color:var(--gold-light); font-size:0.9rem; margin:14px 0 4px; }
.product-added-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.product-added-actions .btn{ padding:12px 22px; }

.product-delivery-banner{
  display:flex; align-items:center; gap:12px; margin-top:28px; padding:14px 18px;
  border:1px solid var(--line); border-radius:4px; background:rgba(244,229,176,0.04);
  color:var(--ink-muted); font-size:0.86rem;
}
.product-delivery-banner svg{ width:22px; height:22px; color:var(--gold); flex:none; }

@media (max-width: 860px){
  .product-detail{ grid-template-columns:1fr; gap:34px; }
}

@media (max-width: 480px){
  /* This page's header has one more action (the cart link) than
     checkout.html's, so it needs to be able to wrap on narrow phones
     instead of overlapping the brand mark. */
  .checkout-header-inner{ flex-wrap:wrap; row-gap:10px; }
  .checkout-header-actions{ flex-wrap:wrap; justify-content:flex-end; gap:8px 14px; }
}