/* ============================================================
   E-Stile Roma — product.css
   Stili pagina prodotto singola (PDP) + recensioni.
   Riusa i token di base.css. Mobile-first.
   ============================================================ */

.pdp {
  padding-top: clamp(96px, 13vh, 150px);
  padding-bottom: var(--section-gap);
}

/* Breadcrumb */
.crumbs {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.78rem; color: var(--muted); margin-bottom: var(--s5);
  flex-wrap: wrap;
}
.crumbs a { color: var(--muted); transition: color 0.25s var(--ease-out); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: 0.5; }

/* Layout principale */
.pdp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
@media (min-width: 900px) {
  .pdp__grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* Media */
.pdp__media {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-card);
  border: 1px solid var(--hair);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
@media (min-width: 900px) {
  .pdp__media { position: sticky; top: clamp(96px, 12vh, 130px); }
}
.pdp__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(28px, 5vw, 64px);
}
.pdp__media .tag { position: absolute; top: var(--s4); left: var(--s4); }

/* Info */
.pdp__brand {
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s3);
}
.pdp__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.04;
  letter-spacing: -0.01em; margin-bottom: var(--s4);
}
.pdp__ratingline {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--s4); font-size: 0.85rem; color: var(--muted);
}
.pdp__ratingline a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pdp__ratingline a:hover { color: var(--accent); }

.pdp__price {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500; margin-bottom: var(--s2);
}
.pdp__vat { font-size: 0.78rem; color: var(--muted); margin-bottom: var(--s5); }

.pdp__desc {
  font-size: 1.02rem; line-height: 1.7; color: var(--ink);
  max-width: 52ch; margin-bottom: var(--s5);
}

.pdp__stock {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.82rem; color: var(--ink); margin-bottom: var(--s5);
}
.pdp__stock .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2E7D32; box-shadow: 0 0 0 4px rgba(46,125,50,0.14);
}
/* Esaurito sulla pagina prodotto */
.pdp__stock--out { color: var(--accent); font-weight: 600; }
.pdp__stock--out .dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(230,51,41,0.14); }
.pdp__soldout {
  position: absolute; top: var(--s4); right: var(--s4); z-index: 3;
  font-family: var(--body); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg);
}
.pdp__media.is-out img { opacity: 0.5; filter: grayscale(0.35); }
.pdp__actions .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.pdp__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s5); }
.pdp__actions .btn { min-width: 180px; text-align: center; }
.btn--buy { font-size: 1rem; padding-inline: var(--s6); }

.pdp__meta {
  border-top: 1px solid var(--hair);
  padding-top: var(--s4); display: grid; gap: 10px;
}
.pdp__meta .row { display: flex; justify-content: space-between; gap: var(--s4); font-size: 0.85rem; }
.pdp__meta .row .k { color: var(--muted); }
.pdp__meta .row .v { color: var(--ink); font-weight: 500; text-align: right; }

/* ---------- Stelle ---------- */
.stars { position: relative; display: inline-block; line-height: 1; white-space: nowrap; font-size: 1rem; letter-spacing: 1px; }
.stars__base { color: var(--hair-strong); }
.stars__fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--accent); white-space: nowrap; }
.stars--lg { font-size: 1.5rem; }

/* ---------- Recensioni ---------- */
.reviews { margin-top: clamp(64px, 10vh, 140px); }
.reviews__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5);
  border-bottom: 1px solid var(--hair); padding-bottom: var(--s4);
}
.reviews__title { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; }

.reviews__summary {
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 56px);
  margin-bottom: var(--s6);
}
@media (min-width: 760px) {
  .reviews__summary { grid-template-columns: auto 1fr; align-items: center; }
}
.summary__score { text-align: center; }
.summary__avg { font-family: var(--display); font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; font-weight: 500; }
.summary__count { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }

.summary__bars { display: grid; gap: 8px; max-width: 460px; }
.bar-row { display: grid; grid-template-columns: 38px 1fr 34px; align-items: center; gap: 12px; font-size: 0.78rem; color: var(--muted); }
.bar-row .track { height: 7px; background: var(--hair); border-radius: var(--r-pill); overflow: hidden; }
.bar-row .fill { height: 100%; background: var(--ink); border-radius: var(--r-pill); }

/* Lista recensioni */
.review-list { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .review-list { grid-template-columns: 1fr 1fr; } }
.review {
  border: 1px solid var(--hair); border-radius: var(--r-card);
  padding: var(--s4) var(--s4); background: var(--surface);
}
.review__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: 12px; }
.review__author { font-weight: 600; font-size: 0.92rem; }
.review__verified { font-size: 0.68rem; color: #2E7D32; letter-spacing: 0.04em; }
.review__date { font-size: 0.75rem; color: var(--muted); }
.review__title { font-weight: 600; font-size: 0.95rem; margin: 10px 0 6px; }
.review__body { font-size: 0.92rem; line-height: 1.6; color: var(--ink); }
.review__head-right { text-align: right; }

.reviews__cta { margin-top: var(--s5); display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.reviews__note { font-size: 0.78rem; color: var(--muted); }

/* ---------- Correlati ---------- */
.related { margin-top: clamp(64px, 10vh, 140px); }
.related__title { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 400; margin-bottom: var(--s5); }
.related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
@media (min-width: 760px) { .related__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Entrata morbida ---------- */
.fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.fade-up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1 !important; transform: none !important; transition: none; }
}