/* product-detail.css — per-flavor product pages (/products/<slug>) */

.pd-back-nav {
  padding: var(--sp-24) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
}
.pd-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-width: 0;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Flavor names can be long — let the label ellipsis rather than wrap the pill. */
.pd-back__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-back__arrow { flex: none; }
@media (hover: hover) {
  .pd-back:hover { border-color: var(--hot-pink); }
}

.pd-hero {
  display: grid;
  grid-template-columns: minmax(0, min(480px, 40%)) minmax(0, 1fr);
  gap: var(--sp-48);
  align-items: start;
  padding: var(--sp-32) 0 var(--sp-48);
}
.pd-hero__media {
  aspect-ratio: 1 / 1;
  background: var(--paper-grey);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.pd-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1.08);
}
.pd-hero__image--paper-blend {
  mix-blend-mode: multiply;
}

/* ---- gallery ------------------------------------------------------------
   Extra shots ship as plain <img> siblings inside .pd-hero__media. They stay
   hidden until product-gallery.js promotes the frame to .is-gallery, so a
   JS-less page renders the single pack shot exactly as it always has. */
.pd-hero__media img + img { display: none; }

.pd-gallery {
  display: grid;
  gap: var(--sp-12);
}
.pd-hero__media.is-gallery { position: relative; }
.pd-hero__media.is-gallery img {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-mid) ease;
}
.pd-hero__media.is-gallery img.is-active { opacity: 1; }

/* The pack shot is a cutout that multiplies onto the paper tile and is scaled
   up for the editorial crop. The styled and packaging shots are already square
   with their own coloured ground, so they sit at native scale and keep their
   colour — inherited `object-fit: contain` fills the square frame exactly,
   with no crop. */
.pd-hero__media img.pd-gallery__shot--full {
  transform: none;
  mix-blend-mode: normal;
}

.pd-gallery__count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  margin: 0;
  padding: 5px 11px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-mid);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* Image arrows live inside the frame and stay quiet, so they never read as
   the flavor navigation sitting outside it. */
.pd-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast) ease, border-color var(--transition-fast) ease,
              color var(--transition-fast) ease;
}
.pd-gallery__arrow--prev { left: 10px; }
.pd-gallery__arrow--next { right: 10px; }
.pd-hero__media.is-gallery:hover .pd-gallery__arrow,
.pd-gallery__arrow:focus-visible { opacity: 1; }
@media (hover: none) {
  .pd-gallery__arrow { display: none; }
}
@media (hover: hover) {
  .pd-gallery__arrow:hover {
    border-color: var(--hot-pink);
    color: var(--hot-pink);
  }
}

.pd-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}
.pd-gallery__thumb {
  width: 64px;
  height: 64px;
  flex: none;
  padding: 0;
  overflow: hidden;
  background: var(--paper-grey);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.pd-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Thumbnails inherit their source image's class, so the full-bleed shots keep
   their own colour here too instead of multiplying onto the tile. */
.pd-gallery__thumb img.pd-gallery__shot--full {
  mix-blend-mode: normal;
}
/* Selected: a single 1px pink line. The border alone marks it; the extra
   2px ring read as a heavy 3px frame around a 64px tile. */
.pd-gallery__thumb[aria-current="true"] {
  border-color: var(--hot-pink);
}
@media (hover: hover) {
  .pd-gallery__thumb:hover { border-color: var(--hot-pink); }
}

/* Dots replace the thumbnail strip on phones, where swipe is the primary move. */
.pd-gallery__dots { display: none; }
.pd-gallery__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line);
  cursor: pointer;
  transition: width var(--transition-fast) ease, background var(--transition-fast) ease;
}
.pd-gallery__dot[aria-current="true"] {
  width: 20px;
  background: var(--hot-pink);
}
.pd-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
  max-width: 640px;
}
.pd-hero__copy h1 {
  /* Keep the product name as the single dominant visual title. */
  font-size: clamp(32px, 3.75vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pd-hero__vibe {
  font-size: 18px;
  color: var(--text-mid);
  margin: 0;
}
.pd-hero__moods {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  margin: 0;
}
.pd-hero__body {
  color: var(--text-mid);
  line-height: 1.55;
  margin: 0;
}
.pd-hero__cta { margin-top: var(--sp-8); }

.pd-specs {
  padding: 0 0 var(--sp-48);
  max-width: 760px;
}
.pd-specs h2 {
  font-size: 32px; margin: 0 0 var(--sp-16); }
.pd-specs__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-16);
}
.pd-specs__cell {
  background: var(--paper-grey);
  border-radius: var(--radius-btn);
  padding: var(--sp-16);
}
.pd-specs__cell dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 var(--sp-4);
}
.pd-specs__cell dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

.pd-faq {
  padding: 0 0 var(--sp-64);
  max-width: 760px;
}
.pd-faq h2 {
  font-size: 32px; margin: 0 0 var(--sp-16); }
.pd-faq__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.pd-faq__item dt {
  font-weight: 700;
  margin: 0 0 var(--sp-8);
}
.pd-faq__item dd {
  margin: 0;
  color: var(--text-mid);
  line-height: 1.55;
}

@media (max-width: 768px) {
  .pd-hero {
    grid-template-columns: 1fr;
    gap: var(--sp-24);
    padding: var(--sp-24) 0 var(--sp-32);
  }
  .pd-hero__copy h1 { font-size: 32px; }
  .pd-back {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 8px 13px;
  }
  .pd-gallery__thumbs { display: none; }
  .pd-gallery__dots {
    display: flex;
    gap: 7px;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .pd-hero__copy h1 { font-size: clamp(24px, 7.5vw, 28px); }
}

@media (max-width: 768px) {
  .pd-specs h2, .pd-faq h2 { font-size: 24px; }
}