/* pdp/pdp.css — shared PDP styles. Plain CSS, no preprocessor. */

:root {
  --pdp-max-w: 1280px;
  --pdp-gutter: clamp(16px, 4vw, 48px);
  --pdp-text: #1a1612;
  --pdp-text-soft: #6b5f54;
  --pdp-text-faint: #998a7c;
  --pdp-bg: #fbf8f3;
  --pdp-bg-card: #f4ede1;
  --pdp-rule: rgba(26, 22, 18, 0.12);
  --pdp-accent: #1a1612;
  --pdp-radius: 0;
}

html, body { background: var(--pdp-bg); color: var(--pdp-text); }

/* ── Layout ─────────────────────────────────────────── */
.pdp-wrap { max-width: var(--pdp-max-w); margin: 0 auto; padding: 0 var(--pdp-gutter); }
.pdp-back {
  display: inline-flex; gap: 8px; align-items: center;
  font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--pdp-text-soft); text-decoration: none;
  padding: 20px 0; transition: color 0.2s;
}
.pdp-back:hover { color: var(--pdp-text); }

/* ── Gallery (5-image horizontal scroll-snap) ───────── */
.pdp-gallery {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.pdp-gallery::-webkit-scrollbar { display: none; }
.pdp-gallery__slide {
  flex: 0 0 100%; scroll-snap-align: center;
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--pdp-bg-card);
}
.pdp-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pdp-gallery__dots {
  display: flex; gap: 8px; justify-content: center; padding: 16px 0 8px;
}
.pdp-gallery__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pdp-rule); border: none; padding: 0; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.pdp-gallery__dot.is-active { background: var(--pdp-accent); transform: scale(1.4); }

/* ── Header ─────────────────────────────────────────── */
.pdp-header { padding: 32px 0 16px; }
.pdp-header__eyebrow {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--pdp-text-faint); margin: 0 0 14px;
}
.pdp-header__title {
  font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 400; line-height: 1.05; margin: 0 0 12px; letter-spacing: -0.01em;
}
.pdp-header__composition {
  font-family: var(--font-serif); font-style: italic; font-size: 1.05rem;
  color: var(--pdp-text-soft); margin: 0;
}

/* ── Price + shipping ───────────────────────────────── */
.pdp-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 20px 0 24px; border-bottom: 1px solid var(--pdp-rule);
}
.pdp-price__value {
  font-family: var(--font-serif); font-size: 1.7rem; font-weight: 400;
  color: var(--pdp-text);
}
.pdp-price__shipping {
  font-family: var(--font-sans); font-size: 0.82rem; color: var(--pdp-text-faint);
  letter-spacing: 0.04em;
}
.pdp-price__vat {
  flex-basis: 100%;
  font-family: var(--font-sans); font-size: 0.72rem; color: var(--pdp-text-faint);
  letter-spacing: 0.06em;
}

/* ── Colour picker ──────────────────────────────────── */
.pdp-colour { padding: 24px 0; }
.pdp-colour__label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
  font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--pdp-text-soft);
}
.pdp-colour__value { color: var(--pdp-text); letter-spacing: 0.04em; text-transform: none; }
.pdp-colour__swatches { display: flex; gap: 14px; flex-wrap: wrap; }
.pdp-swatch {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--pdp-rule); padding: 0; background: transparent;
  position: relative; transition: transform 0.18s;
}
.pdp-swatch__dot {
  display: block; width: 28px; height: 28px; border-radius: 50%;
  margin: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.pdp-swatch.is-active { transform: scale(1.1); border-color: var(--pdp-accent); }
.pdp-swatch.is-active::after {
  content: ""; position: absolute; inset: -5px; border: 1px solid var(--pdp-accent);
  border-radius: 50%;
}

/* ── Other sizes (sibling chip links) ───────────────── */
.pdp-sizes { padding: 24px 0; border-top: 1px solid var(--pdp-rule); }
.pdp-sizes__label {
  font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--pdp-text-soft); margin: 0 0 14px;
}
.pdp-sizes__list { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-sizes__chip {
  padding: 10px 16px; border: 1px solid var(--pdp-rule);
  font-family: var(--font-sans); font-size: 0.84rem; text-decoration: none;
  color: var(--pdp-text); background: transparent; transition: all 0.18s;
}
.pdp-sizes__chip:hover { background: var(--pdp-text); color: var(--pdp-bg); border-color: var(--pdp-text); }
.pdp-sizes__chip.is-current { border-color: var(--pdp-text); background: var(--pdp-text); color: var(--pdp-bg); pointer-events: none; }

/* ── Primary CTA ────────────────────────────────────── */
.pdp-cta {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 18px 22px; margin: 12px 0 32px;
  background: var(--pdp-text); color: var(--pdp-bg);
  border: 1px solid var(--pdp-text); text-decoration: none;
  font-family: var(--font-sans); font-size: 0.92rem; letter-spacing: 0.06em;
  transition: background 0.2s, color 0.2s;
}
.pdp-cta:hover { background: transparent; color: var(--pdp-text); }
.pdp-cta__arrow { font-size: 1.1rem; }

/* ── Sticky mobile CTA ──────────────────────────────── */
.pdp-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--pdp-text); color: var(--pdp-bg);
  padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-sans); font-size: 0.88rem; text-decoration: none;
  transform: translateY(110%); transition: transform 0.32s ease;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.15);
}
.pdp-sticky-cta.is-visible { transform: translateY(0); }
.pdp-sticky-cta__title { letter-spacing: 0.04em; }
.pdp-sticky-cta__price { font-family: var(--font-serif); font-size: 1.05rem; }
@media (min-width: 900px) { .pdp-sticky-cta { display: none; } }

/* ── Story / Received / Ritual / Delivery ───────────── */
.pdp-section {
  padding: 36px 0; border-top: 1px solid var(--pdp-rule);
}
.pdp-section__eyebrow {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--pdp-text-faint); margin: 0 0 18px;
}
.pdp-section__body {
  font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.6;
  color: var(--pdp-text); max-width: 62ch;
}
.pdp-section__list {
  list-style: none; padding: 0; margin: 0; max-width: 56ch;
}
.pdp-section__list li {
  padding: 12px 0; border-bottom: 1px solid var(--pdp-rule);
  font-family: var(--font-serif); font-size: 0.98rem; color: var(--pdp-text);
}
.pdp-section__list li:last-child { border-bottom: none; }

/* ── Related ────────────────────────────────────────── */
.pdp-related { padding: 48px 0 80px; border-top: 1px solid var(--pdp-rule); }
.pdp-related__label {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--pdp-text-faint); margin: 0 0 24px;
}
.pdp-related__grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pdp-related__tile { text-decoration: none; color: inherit; display: block; }
.pdp-related__media {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--pdp-bg-card);
  margin-bottom: 14px;
}
.pdp-related__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.pdp-related__tile:hover .pdp-related__media img { transform: scale(1.04); }
.pdp-related__title {
  font-family: var(--font-serif); font-size: 1.15rem; margin: 0 0 4px;
}
.pdp-related__meta {
  font-family: var(--font-sans); font-size: 0.78rem; color: var(--pdp-text-soft);
  letter-spacing: 0.04em;
}

/* ── Desktop side-by-side ───────────────────────────── */
@media (min-width: 900px) {
  .pdp-top {
    display: grid; gap: 40px; grid-template-columns: 1.2fr 1fr;
    align-items: start; padding: 24px 0;
  }
  .pdp-gallery { position: sticky; top: 24px; }
  .pdp-gallery__slide { aspect-ratio: 4 / 5; }
  .pdp-header { padding-top: 0; }
}

/* ── Personalization (Signature) ── */
.pdp-personalize { margin: 22px 0; padding: 18px 0; border-top: 1px solid rgba(26,22,18,0.08); }
.pdp-personalize__label { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.82rem; letter-spacing: 0.06em; color: #1a1612; }
.pdp-personalize__hint { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8a7d70; }
.pdp-personalize__input { margin-top: 12px; width: 120px; padding: 12px 14px; font-family: var(--font-serif); font-size: 1.6rem; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; border: 1px solid rgba(26,22,18,0.22); border-radius: 2px; background: #fff; color: #1a1612; }
.pdp-personalize__input:focus { outline: none; border-color: #C9A227; }
.pdp-personalize__accents { display: flex; gap: 14px; margin-top: 14px; }
.pdp-accent { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.04em; background: none; border: 1px solid rgba(26,22,18,0.18); border-radius: 999px; cursor: pointer; color: #6b5f54; }
.pdp-accent.is-active { border-color: #1a1612; color: #1a1612; }
.pdp-accent__dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.pdp-personalize__preview { margin: 12px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: #6b5f54; min-height: 1.4em; }
.pdp-personalize__examples { display: flex; gap: 10px; margin-top: 16px; }
.pdp-personalize__example { width: 72px; height: 72px; overflow: hidden; border-radius: 2px; flex: 0 0 auto; }
.pdp-personalize__example img { width: 100%; height: 100%; object-fit: cover; display: block; }