/* ============================================================
   Product detail page — themed via --accent
   ============================================================ */
.pdp { padding-top: clamp(2rem, 4vw, 3rem); }
.breadcrumb { font-size: var(--text-sm); color: var(--muted); margin-bottom: clamp(1.6rem,3vw,2.4rem); display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.breadcrumb a { transition: color var(--t-interactive); color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--amber-deep); }
.breadcrumb .sep { color: var(--line-strong); }
.breadcrumb .cur { color: var(--ink); }

.pdp-main { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }

/* Gallery */
.pdp-gallery { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 1rem; }
.gallery-stage {
  position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--glass-edge);
  aspect-ratio: var(--media-ratio);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.6);
  background:
    radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
    var(--bg-2);
}
.gallery-stage video, .gallery-stage img.gmedia { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.gallery-stage .stage-pane { position:absolute; inset:0; opacity:0; transition: opacity 360ms var(--ease-out); pointer-events:none; }
.gallery-stage .stage-pane.active { opacity:1; }
/* jar pane: photo fills the frame edge-to-edge */
.gallery-stage #stage-jar .jar-photo { width:100%; height:100%; object-fit: cover; }
/* label pane: artwork is a different shape — contain it on a clean ground */
.gallery-stage .label-pane { display:grid; place-items:center; background: var(--bg-3); padding: clamp(1.2rem, 4vw, 2.2rem); }
.gallery-stage .label-pane img { max-width: 100%; max-height: 100%; width:auto; height:auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }

.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.gthumb {
  aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line);
  position: relative; background: var(--bg-2);
  cursor: pointer; padding: 0;
  transition: border-color var(--t-interactive), transform var(--t-interactive), box-shadow var(--t-interactive);
}
.gthumb:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.gthumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.gthumb video, .gthumb img, .gthumb .jar-photo { width:100%; height:100%; object-fit: cover; display:block; }
.gthumb .tlabel {
  position:absolute; bottom:0; left:0; right:0; text-align:center;
  font-size: 0.56rem; letter-spacing:0.1em; text-transform: uppercase; color: var(--ivory);
  background: linear-gradient(to top, rgba(13,20,17,0.62), transparent); padding: 0.5rem 0 0.25rem;
}

/* Info column */
.pdp-island { font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 72%, var(--ink)); font-weight: 600; }
.pdp-title { font-size: var(--text-3xl); margin: 0.6rem 0 0.5rem; color: var(--ink); }
.pdp-rating { display:flex; align-items:center; gap: 0.7rem; margin-bottom: 1.2rem; font-size: var(--text-sm); color: var(--ink-soft); }
.pdp-rating .stars { font-size: 1rem; }
.pdp-tagline { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--amber-deep); margin-bottom: 1rem; }
.pdp-desc { color: var(--ink-soft); font-size: var(--text-lg); margin-bottom: 1.6rem; }
.pdp-price { display:flex; align-items:baseline; gap: 0.8rem; margin-bottom: 0.4rem; }
.pdp-price .now { font-family: var(--font-display); font-size: 2.4rem; color: var(--ink); }
.pdp-price .was { font-size: var(--text-lg); color: var(--muted); text-decoration: line-through; }
.pdp-price .save { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2a1c00; background: var(--accent); padding: 4px 10px; border-radius: 100px; }
.pdp-stock { font-size: var(--text-sm); color: #6f8868; margin-bottom: 1.6rem; display:flex; align-items:center; gap:0.5rem; }
.pdp-buy { display: flex; gap: 0.8rem; margin-bottom: 1.4rem; }
.qty { display:flex; align-items:center; border:1px solid var(--line-strong); border-radius: 100px; overflow:hidden; background: var(--surface-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.qty button { width: 44px; height: 52px; display:grid; place-items:center; color: var(--ink-soft); transition: background var(--t-interactive), color var(--t-interactive); }
.qty button:hover { background: rgba(33,26,14,0.07); color: var(--ink); }
.qty span { width: 40px; text-align:center; font-weight:600; color: var(--ink); }
.pdp-buy .btn { flex: 1; }
.pdp-perks { display:grid; gap: 0.7rem; padding: 1.3rem 0; border-block: 1px solid var(--line); margin-bottom: 1.8rem; }
.pdp-perk { display:flex; align-items:center; gap: 0.7rem; font-size: var(--text-sm); color: var(--ink-soft); }
.pdp-perk svg { color: color-mix(in srgb, var(--accent) 72%, var(--ink)); flex-shrink:0; }

/* Accordion */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { width:100%; display:flex; align-items:center; justify-content: space-between; gap:1rem; padding: 1.2rem 0; text-align:left; font-family: var(--font-body); font-weight:600; font-size: var(--text-lg); color: var(--ink); transition: color var(--t-interactive); }
.acc-head:hover { color: var(--amber-deep); }
.acc-head .chev { transition: transform 300ms var(--ease-out); color: var(--muted); flex-shrink:0; }
.acc-item.open .acc-head .chev { transform: rotate(180deg); }
.acc-panel { overflow: hidden; max-height: 0; transition: max-height 380ms var(--ease-in-out); }
.acc-item.open .acc-panel { max-height: 600px; }
.acc-inner { padding-bottom: 1.4rem; color: var(--ink-soft); font-size: var(--text-base); }
.acc-inner p { margin-bottom: 0.8rem; }
.acc-inner ul.dotlist li { padding-left: 1.4rem; position: relative; margin-bottom: 0.5rem; }
.acc-inner ul.dotlist li::before { content:""; position:absolute; left:0; top:0.65em; width:6px; height:6px; border-radius:50%; background: var(--accent); }

/* Nutrition facts panel */
.nutrition {
  background: #fff; color: #111; border-radius: var(--radius-sm); padding: 1rem 1.2rem; max-width: 320px;
  font-family: 'Helvetica Neue', Arial, sans-serif; line-height: 1.25;
}
.nutrition h4 { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em; border-bottom: 8px solid #111; padding-bottom: 2px; margin-bottom: 2px; }
.nutrition .nrow { display:flex; justify-content: space-between; border-top: 1px solid #111; padding: 2px 0; font-size: 0.85rem; }
.nutrition .nthin { border-top: 1px solid #777; }
.nutrition .bold { font-weight: 700; }
.nutrition .cal { display:flex; justify-content: space-between; align-items: flex-end; border-top: 5px solid #111; padding-top: 2px; }
.nutrition .cal .cl { font-weight: 800; font-size: 1.05rem; }
.nutrition .cal .cv { font-weight: 800; font-size: 1.9rem; }
.nutrition .serv { font-size: 0.78rem; display:flex; justify-content: space-between; }
.nutrition .dvhead { text-align: right; font-size: 0.72rem; font-weight: 700; border-top: 1px solid #111; padding: 2px 0; }
.nutrition .ind { padding-left: 1rem; }
.nutrition .foot { font-size: 0.62rem; border-top: 5px solid #111; padding-top: 3px; margin-top: 2px; color:#333; }
.nutrition .ing { font-size: 0.72rem; margin-top: 0.6rem; color:#111; }

/* Origin block */
.origin { margin-top: clamp(3.5rem, 7vw, 6rem); }
.origin-band { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 420px; display:grid; align-items:center; }
.origin-band video, .origin-band img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.origin-band .scrim { position:absolute; inset:0; background: linear-gradient(90deg, rgba(20,16,8,0.55) 0%, rgba(20,16,8,0.3) 55%, rgba(20,16,8,0.08) 100%); }
.origin-content {
  position:relative; z-index:2; max-width: 520px; margin: clamp(1.4rem,3vw,2.4rem);
  padding: clamp(1.6rem,4vw,2.6rem);
  background: rgba(255,253,247,0.16);
  -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius);
}
.origin-content .eyebrow { color: var(--amber-bright); }
.origin-content h2 { font-size: var(--text-2xl); margin: 0.7rem 0 1rem; color: var(--ivory); }
.origin-content p { color: rgba(251,247,238,0.92); font-size: var(--text-lg); }

/* Related */
.related { margin-top: clamp(3.5rem, 7vw, 6rem); }
.related h2 { font-size: var(--text-2xl); margin-bottom: 0.4rem; color: var(--ink); }
.related .sub { color: var(--ink-soft); margin-bottom: clamp(1.6rem,3vw,2.4rem); }
.related-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,1.8vw,1.6rem); }

@media (max-width: 900px) {
  .pdp-main { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .related-grid { grid-template-columns: 1fr; }
  .pdp-buy { flex-wrap: wrap; }
}