/* ==========================================================================
   Kedn Hub — Product detail page (PDP): gallery, info panel, tabs,
   specifications table, reviews, related products.
   ========================================================================== */

.pdp-not-found {
  padding: var(--space-10) var(--container-pad);
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
}

.pdp-not-found h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  margin: var(--space-4) 0;
}

.pdp-not-found p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.pdp {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a plain 1fr column has an `auto` minimum, so
     it refuses to shrink below the gallery's min-content. On a product with
     a long photo gallery that makes the thumb strip's full intrinsic width
     (one 4.5rem thumb per image, none allowed to shrink) blow out the grid,
     the container and the whole page horizontally on mobile. minmax(0, 1fr)
     lets the column shrink so .pdp-gallery__thumbs' own overflow-x scrolls. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  padding-bottom: var(--space-8);
}

/* ---- Gallery ---- */
.pdp-gallery {
  /* grid item: allow it to shrink so the thumb strip below scrolls
     instead of widening the column (see .pdp note above). */
  min-width: 0;
}

.pdp-gallery__main {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-charcoal-soft);
  background: linear-gradient(155deg, var(--color-warm-neutral-soft) 0%, var(--color-off-white) 100%);
}

.pdp-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-gallery__main.product-card__media--perfume {
  background: linear-gradient(155deg, #efe6d3 0%, var(--color-warm-neutral-soft) 100%);
}

.pdp-gallery__main.product-card__media--gift {
  background: linear-gradient(155deg, #2a2620 0%, var(--color-black) 100%);
  color: var(--color-gold-tint);
}

.pdp-gallery__main svg {
  width: 40%;
  height: 40%;
  transition: transform var(--duration-standard) var(--ease-out);
}

.pdp-gallery__main--1 svg { transform: rotate(-8deg) scale(1.05); }
.pdp-gallery__main--2 svg { transform: rotate(6deg) scale(0.95); }
.pdp-gallery__main--3 svg { transform: scaleX(-1); }

.pdp-gallery__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
}

/* Placeholder-icon products (no real photos) always render 4 fixed
   thumbs (see js/product-detail.js) - at 4.5rem each + gap that's
   wider than a narrow phone's content width, with nothing to shrink or
   wrap, so it pushed the whole page horizontally. overflow-x:auto
   turns it into its own small scrollable strip instead. */
.pdp-gallery__thumbs {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  overflow-x: auto;
  padding-bottom: 2px;
}

.pdp-gallery__thumb {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-charcoal-soft);
  background: var(--color-warm-neutral-soft);
  opacity: 0.55;
  transition: opacity var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.pdp-gallery__thumb:hover {
  opacity: 0.85;
}

.pdp-gallery__thumb.is-active {
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--color-accent-strong);
}

.pdp-gallery__thumb svg {
  width: 55%;
  height: 55%;
}

.pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-gallery__thumb-icon--1 svg { transform: rotate(-8deg); }
.pdp-gallery__thumb-icon--2 svg { transform: rotate(6deg); }
.pdp-gallery__thumb-icon--3 svg { transform: scaleX(-1); }

/* ---- Info panel ---- */
.pdp-info__category {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pdp-info h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  margin-top: var(--space-2);
}

.pdp-info__rating {
  margin-top: var(--space-3);
}

.pdp-info__rating a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.pdp-info__review-count {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: underline;
}

.pdp-info__price {
  margin-top: var(--space-4);
  font-size: var(--text-h3);
}

.pdp-info__price .price {
  font-size: var(--text-h3);
}

.pdp-availability {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
}

.pdp-availability--in { color: #4a7a4e; }
.pdp-availability--low { color: var(--color-accent-strong); }
.pdp-availability--out { color: var(--color-danger); }

.pdp-info__description {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  max-width: 48ch;
}

.pdp-info__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-hairline);
}

.qty-stepper button {
  width: 2.5rem;
  height: 2.75rem;
  font-size: var(--text-body-lg);
}

.qty-stepper input {
  width: 2.5rem;
  height: 2.75rem;
  text-align: center;
  border: none;
  border-inline: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
}

.pdp-add-to-cart {
  flex: 1;
  min-width: 10rem;
}

.pdp-wishlist {
  border: 1px solid var(--color-hairline);
  width: 2.75rem;
  height: 2.75rem;
}

.pdp-trust {
  list-style: none;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.pdp-trust li {
  padding-left: var(--space-5);
  position: relative;
}

.pdp-trust li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent-strong);
}

.pdp-info__sku {
  margin-top: var(--space-5);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

/* ---- Tabs ---- */
.pdp-tabs {
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-6);
}

/* overflow-x:auto is the safety net if the three tab labels ever don't
   fit a narrow phone (default flex-wrap:nowrap means they'd otherwise
   just overflow, with nothing to shrink or wrap them); the smaller gap
   is just to make that actually needing to scroll unlikely in the
   first place. */
.pdp-tabs__nav {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: var(--space-6);
}

.pdp-tabs__nav button {
  flex-shrink: 0;
  padding-bottom: var(--space-3);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.pdp-tabs__nav button.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent-strong);
}

.pdp-tabs__panel {
  display: none;
}

.pdp-tabs__panel.is-active {
  display: block;
}

.pdp-tabs__panel p {
  max-width: 60ch;
  color: var(--color-text-muted);
}

.pdp-specs {
  width: 100%;
  max-width: 42rem;
  border-collapse: collapse;
}

.pdp-specs tr {
  border-bottom: 1px solid var(--color-border);
}

.pdp-specs th,
.pdp-specs td {
  text-align: left;
  padding: var(--space-3) 0;
  font-size: var(--text-small);
}

.pdp-specs th {
  color: var(--color-text-muted);
  font-weight: 500;
  width: 40%;
}

/* ---- Reviews ---- */
.reviews-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.reviews-summary__score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.reviews-summary__number {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: 1;
}

.reviews-summary__count {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.reviews-summary__bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 24rem;
}

.review-bar {
  display: grid;
  grid-template-columns: 4rem 1fr 2.5rem;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

.review-bar__track {
  height: 6px;
  background: var(--color-warm-neutral-soft);
}

.review-bar__fill {
  display: block;
  height: 100%;
  background: var(--color-accent-strong);
}

.review-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.review-card--pdp {
  border-top: 1px solid var(--color-hairline);
  padding: var(--space-5) 0;
}

.review-card__date {
  color: var(--color-text-muted);
}

.review-form {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 32rem;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-hairline);
}

.review-form:not([hidden]) {
  display: flex;
}

.review-form input,
.review-form textarea {
  border: 1px solid var(--color-hairline);
  padding: var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
}

.review-form__note {
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

/* ---- Product storytelling ---- */
.pdp-story {
  border-top: 1px solid var(--color-hairline);
}

.pdp-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

.pdp-story__item h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  margin-top: var(--space-3);
}

.pdp-story__item p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  max-width: 34ch;
}

.pdp-story__index {
  font-family: var(--font-display);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent-strong);
}

/* ---- Related ---- */
.related {
  border-top: 1px solid var(--color-hairline);
}

.product-grid--related {
  grid-template-columns: repeat(2, 1fr);
}

/* Horizontal auto-advancing rail (js/product-detail.js's
   initRelatedAutoScroll) — same flex/scroll-snap recipe as the homepage's
   .product-rail__track, redeclared here since home.css isn't loaded on
   product pages. */
.related-track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--color-warm-neutral) transparent;
}

/* 8rem on mobile so the rail shows more of the row at once; back to the
   original 16rem at 640px+ - see that breakpoint. */
.related-track .product-card {
  flex: 0 0 8rem;
  scroll-snap-align: start;
}

/* ---- Recently Viewed ---- */
.recently-viewed {
  border-top: 1px solid var(--color-hairline);
}

/* ---- Frequently Bought Together ---- */
.fbt {
  border-top: 1px solid var(--color-hairline);
}

.fbt-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.fbt-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 14rem;
  min-width: 12rem;
}

.fbt-item input {
  accent-color: var(--color-accent-strong);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.fbt-item__media {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-charcoal-soft);
  background: linear-gradient(155deg, var(--color-warm-neutral-soft) 0%, var(--color-off-white) 100%);
}

.fbt-item__media svg {
  width: 60%;
  height: 60%;
}

.fbt-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fbt-item__media--gift {
  background: linear-gradient(155deg, #2a2620 0%, var(--color-black) 100%);
  color: var(--color-gold-tint);
}

.fbt-item__text {
  min-width: 0;
}

.fbt-item__text a {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fbt-item__text span {
  display: block;
  font-size: var(--text-label);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.fbt-plus {
  color: var(--color-text-muted);
  font-size: var(--text-h3);
  flex-shrink: 0;
}

.fbt-action {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.fbt-action__total {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.fbt-action__total strong {
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  color: var(--color-text);
  margin-left: var(--space-2);
}

@media (min-width: 640px) {
  .fbt-item {
    flex: 0 1 15rem;
  }

  .related-track .product-card {
    flex: 0 0 16rem;
  }
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 768px) {
  .product-grid--related {
    grid-template-columns: repeat(4, 1fr);
  }

  .pdp-story__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-9);
  }
}