/* ============================================================
   QUEENIE-B HONEY — Product Detail Page
   product.css: standalone PDP layout (gallery + buy box), story
   split, how-it's-made mini steps, lab stats, pairs/related grids,
   reviews. Extends style.css / pages.css / shop.css conventions.
   ============================================================ */

/* ── BREADCRUMB BAR ───────────────────────────────────────── */
.pdp-crumb-bar {
  padding: calc(var(--nav-h) + 20px) 0 0;
}

/* ── LAYOUT: gallery + buy box ───────────────────────────── */
.pdp-layout {
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: 56px;
  align-items: start;
}

.pdp-gallery-wrap { display: flex; flex-direction: column; gap: 14px; }

.pdp-gallery-wrap .pdp-img-wrap {
  width: 100%;
  aspect-ratio: 1;
}

.pdp-gallery-wrap .pdp-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pdp-thumb {
  width: 68px; height: 68px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--rich-black);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.18s, box-shadow 0.18s;
}

.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { opacity: 0.85; }
.pdp-thumb.active { opacity: 1; box-shadow: 3px 3px 0 var(--gold); }

.pdp-content { display: flex; flex-direction: column; gap: 14px; }

/* Loading / not-found state */
.pdp-loading, .pdp-not-found {
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 60px 20px;
}

.pdp-not-found h2 { font-family: var(--fd); font-size: 28px; color: var(--rich-black); }
.pdp-not-found p { font-size: 15px; color: var(--text-muted); max-width: 420px; }

/* ── PROCESS STEPS (How It's Made) ──────────────────────────
   Lightweight standalone version of home.css's .hm-step system,
   scoped to product.css so product.html doesn't need home.css. */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.process-step {
  background: var(--white);
  border: 3px solid var(--rich-black);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--rich-black);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}

.process-step:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--rich-black); }

.process-step-num {
  font-family: var(--fa);
  font-size: 34px;
  color: rgba(245,194,0,0.35);
  line-height: 1;
}

.process-step h3 { font-family: var(--fd); font-size: 18px; color: var(--rich-black); }
.process-step p  { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ── BENEFIT LIST (Why We Love It) ──────────────────────────
   Reuses the .tier-perk visual language from pages.css. */
.pdp-benefits-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.pdp-benefit-list { display: flex; flex-direction: column; gap: 20px; }

.pdp-benefit-list dt {
  font-family: var(--fd);
  font-size: 18px;
  color: var(--rich-black);
  margin-bottom: 4px;
}

.pdp-benefit-list dd {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

.pdp-benefits-split img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

/* ── LAB STATS ───────────────────────────────────────────── */
.pdp-lab-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pdp-lab-stat {
  text-align: center;
  padding: 32px 20px;
  background: var(--white);
  border: 3px solid var(--rich-black);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--rich-black);
}

.pdp-lab-stat-num {
  font-family: var(--fd);
  font-size: clamp(28px, 3vw, 40px);
  color: var(--amber);
  margin-bottom: 8px;
}

.pdp-lab-stat p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ── PAIRS / RELATED GRIDS (reuse .products-grid card markup) ── */
.pdp-pairs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

/* ── REVIEWS ─────────────────────────────────────────────── */
.pdp-review-card {
  background: var(--white);
  border: 2px solid var(--border-light);
  border-radius: var(--radius);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.pdp-review-stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; }
.pdp-review-title { font-family: var(--fd); font-size: 17px; color: var(--rich-black); }
.pdp-review-body { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.pdp-review-meta { font-size: 12px; color: var(--text-faint); }

/* ── STICKY ADD TO CART (mobile) ────────────────────────── */
.pdp-sticky-atc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 500;
  background: var(--cream);
  border-top: 3px solid var(--rich-black);
  padding: 12px var(--gutter);
  display: none;
  align-items: center;
  gap: 14px;
  transform: translateY(100%);
  transition: transform 0.25s var(--ease-out);
}

.pdp-sticky-atc.visible { transform: translateY(0); }

.pdp-sticky-atc-name { font-family: var(--fd); font-size: 14px; flex: 1; }
.pdp-sticky-atc-price { font-family: var(--fd); font-size: 15px; color: var(--amber); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .pdp-layout { grid-template-columns: 1fr; gap: 32px; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .pdp-benefits-split { grid-template-columns: 1fr; gap: 28px; }
  .pdp-lab-stats { grid-template-columns: 1fr; }
  .pdp-pairs-grid { grid-template-columns: 1fr; }
  .pdp-sticky-atc { display: flex; }
}

@media (max-width: 560px) {
  .process-steps { grid-template-columns: 1fr; }
}