/* ================= PRODUCT PAGE ================= */
.pdp{ padding:calc(96px + 2vw) 0 0; }

.pdp-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,4vw,3.6rem);
  align-items:start;
}
@media (max-width:900px){
  .pdp-grid{ grid-template-columns:1fr; }
}

/* ---- gallery ---- */
.pdp-gallery{ position:sticky; top:96px; }
@media (max-width:900px){ .pdp-gallery{ position:static; } }

.pdp-main-image{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  overflow:hidden;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.pdp-main-image img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .25s var(--ease);
}
.pdp-thumbs{
  display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem;
  margin-top:.8rem;
}
.pdp-thumb{
  border:1px solid var(--line-soft);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface);
  aspect-ratio:1/1;
  padding:0; cursor:pointer;
  transition:border-color .2s;
}
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp-thumb:hover{ border-color:var(--ink-dim); }
.pdp-thumb.is-active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }

/* ---- buy box ---- */
.pdp-buybox{ padding-top:.3rem; }
.pdp-title{
  font-size:clamp(1.6rem,2vw + 1rem,2.3rem);
  line-height:1.12;
  margin:.8rem 0 1rem;
}
.pdp-price-row{
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
  margin-bottom:.6rem;
}
.pdp-price{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.6rem,1.6vw + 1.1rem,2.1rem);
  color:var(--accent-2);
}
.pdp-compare{
  font-family:var(--font-mono); font-size:1.05rem;
  color:var(--ink-faint); text-decoration:line-through;
}
.badge{
  display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.03em;
  padding:.3em .75em;
  border-radius:100px;
}
.badge-sale{ background:var(--accent); color:var(--accent-ink); }
.badge[hidden]{ display:none; }

.pdp-ship-note{
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint);
  margin-bottom:1.6rem;
}

.pdp-label{
  display:block; font-family:var(--font-mono); font-size:.74rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:.6rem;
}
.pdp-variant-block{ margin-bottom:1.5rem; }
.variant-picker{ display:flex; flex-wrap:wrap; gap:.7rem; }
.variant-pill{
  font-family:var(--font-body); font-weight:700; font-size:.86rem;
  padding:.7em 1.2em;
  border-radius:100px;
  border:1px solid var(--line);
  background:transparent; color:var(--ink);
  cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.variant-pill:hover{ border-color:var(--accent); }
.variant-pill.is-active{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);
  border-color:transparent;
}

.pdp-qty-block{ margin-bottom:1.7rem; }
.qty-stepper{
  display:inline-flex; align-items:center;
  border:1px solid var(--line); border-radius:100px;
  overflow:hidden;
}
.qty-stepper button{
  width:40px; height:40px; background:var(--surface-2); border:none;
  color:var(--ink-dim); font-size:1.1rem; cursor:pointer;
}
.qty-stepper button:hover{ color:var(--accent-2); }
.qty-stepper input{
  width:48px; text-align:center; border:none; background:transparent;
  color:var(--ink); font-family:var(--font-mono); font-size:.95rem;
  -moz-appearance:textfield;
}

.pdp-buy-actions{ display:flex; flex-direction:column; gap:.8rem; margin-bottom:.5rem; }
.pdp-buy-actions .btn{ justify-content:center; padding:.9em 1.3em; font-size:.92rem; }
.pdp-buy-error{ font-size:.8rem; color:#ff9d8a; min-height:1.2em; margin-bottom:1rem; }

.pdp-trust-row{
  display:flex; flex-direction:column; gap:.7rem;
  border-top:1px solid var(--line-soft);
  padding-top:1.4rem; margin-top:.6rem;
}
.trust-item{
  display:flex; align-items:center; gap:.7rem;
  font-size:.84rem; color:var(--ink-dim);
}
.trust-item svg{ flex:none; color:var(--accent-2); }

/* ---- description ---- */
.pdp-description{
  max-width:820px;
  padding:clamp(3rem,6vw,5rem) clamp(20px,5vw,56px) clamp(5rem,10vw,7rem);
  margin:0 auto;
}
.pdp-description > p:first-child{
  font-size:1.15rem; color:var(--ink); line-height:1.6;
  margin-bottom:1.8rem;
}
.pdp-description h3{
  font-size:1.25rem; margin:2.4rem 0 .9rem;
}
.pdp-description p{
  color:var(--ink-dim); font-size:1rem; line-height:1.7;
  margin-bottom:.4rem;
}
.pdp-description ul, .pdp-description ol{
  margin:0 0 1.2rem; padding-left:0; list-style:none;
  display:flex; flex-direction:column; gap:.8rem;
}
.pdp-description ul li, .pdp-description ol li{
  position:relative; padding-left:1.9rem;
  color:var(--ink-dim); font-size:.98rem; line-height:1.6;
}
.pdp-description ul li::before{
  content:"";
  position:absolute; left:0; top:.45em;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(223,163,75,.18);
}
.pdp-description ol{ counter-reset:pdp-step; }
.pdp-description ol li{ counter-increment:pdp-step; }
.pdp-description ol li::before{
  content:counter(pdp-step);
  position:absolute; left:0; top:0;
  width:1.4rem; height:1.4rem; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--accent-2); font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.pdp-description strong{ color:var(--ink); }
.pdp-description > p:last-of-type{
  font-size:1.05rem; color:var(--ink); margin-top:1rem;
}

@media (max-width:560px){
  .pdp{ padding-top:120px; }
  .pdp-thumbs{ grid-template-columns:repeat(5,1fr); gap:.5rem; }
}

/* Mobile/tablet only: bump the qty field to 16px so iOS Safari doesn't zoom
   the page in on focus. Scoped so desktop (font-size:.95rem) is unchanged. */
@media (max-width:1024px){
  .qty-stepper input{ font-size:16px; }
}