/* ============================================================
   LUNA DAO · v8.1 Story-led PDP & cinematic polish
   Energy intention map · honest specs · richer trust & imagery
   Loaded after style.css; reuses the global design tokens.
   ============================================================ */

/* ---------- PDP hero image: soft aura + slow zoom ---------- */
.main-image {
  box-shadow:
    0 22px 70px -24px rgba(0, 0, 0, .75),
    0 0 0 1px rgba(214, 178, 112, .16),
    0 0 70px -22px rgba(168, 124, 224, .4);
}
.main-image img,
.main-image video { transition: transform 1.3s cubic-bezier(.2, .6, .2, 1); will-change: transform; }
.main-image:hover img,
.main-image:hover video { transform: scale(1.045); }
.thumb-images .thumb {
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.thumb-images .thumb:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 10px 26px -12px rgba(214, 178, 112, .55);
}

/* ---------- Product cards: gentle image zoom on hover ---------- */
.product-card .product-img-wrap,
.product-card .product-img,
.product-card .product-img-placeholder { overflow: hidden; }
.product-card img { transition: transform .9s cubic-bezier(.2, .6, .2, 1); will-change: transform; }
.product-card:hover img { transform: scale(1.07); }

/* ---------- Energy / intention map card ---------- */
.energy-card {
  position: relative;
  margin: 20px 0 14px;
  padding: 16px 18px 15px;
  border-radius: 16px;
  border: 1px solid rgba(214, 178, 112, .28);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(168, 124, 224, .16), transparent 60%),
    linear-gradient(160deg, rgba(168, 124, 224, .12), rgba(214, 178, 112, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}
.energy-card::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px;
  border-radius: 50%; background: radial-gradient(circle, rgba(214, 178, 112, .18), transparent 70%);
  pointer-events: none;
}
.energy-card-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-family: var(--font-serif); font-size: .8rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
}
.ec-glyph { display: inline-block; animation: ecspin 16s linear infinite; }
@keyframes ecspin { to { transform: rotate(360deg); } }
.energy-chips { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.energy-chip {
  font-size: .78rem; line-height: 1; padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text); background: rgba(255, 255, 255, .03);
  white-space: nowrap;
}
.energy-chip.intent   { border-color: rgba(214, 178, 112, .45);  color: #f3e2bd; background: rgba(214, 178, 112, .09); }
.energy-chip.chakra   { border-color: rgba(168, 124, 224, .5);   color: #e6d4f7; background: rgba(168, 124, 224, .12); }
.energy-chip.element  { border-color: rgba(120, 180, 255, .4);   color: #d2e7ff; background: rgba(96, 150, 224, .12); }
.energy-chip.zodiac   { border-color: rgba(255, 198, 150, .38);  color: #ffe4c6; background: rgba(255, 168, 92, .09); }

/* ---------- Honest spec pills + fit note ---------- */
.spec-inline { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.spec-pill {
  font-size: .8rem; color: var(--text-dim); background: var(--bg-card);
  border: 1px solid var(--border); padding: 7px 13px; border-radius: 10px;
}
.spec-pill strong { color: var(--text); font-weight: 600; margin-right: 7px; }
.fit-note { font-size: .82rem; line-height: 1.6; color: var(--text-dim); font-style: italic; margin: 0 0 10px; }
.arrives-note {
  font-size: .88rem; color: #ecd9ad; margin: 14px 0 2px; padding: 11px 15px;
  border-radius: 10px; border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, rgba(214, 178, 112, .14), rgba(214, 178, 112, .02));
}

/* ---------- New / rating ---------- */
.new-badge {
  display: inline-block; font-size: .78rem; letter-spacing: .8px; color: var(--gold);
  border: 1px solid rgba(214, 178, 112, .42); padding: 5px 13px; border-radius: 999px;
  background: rgba(214, 178, 112, .07); text-transform: uppercase;
}
.product-rating .rating-num:only-child { color: var(--gold); letter-spacing: .6px; }

/* ---------- Trust badges: refined glass tiles ---------- */
.detail-trust { gap: 10px; padding: 18px; background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.detail-trust > div {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 11px;
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.detail-trust > div:hover { transform: translateY(-2px); border-color: rgba(214, 178, 112, .38); background: rgba(214, 178, 112, .06); }

/* ---------- Story-led description subheads ---------- */
.tab-content .desc-subhead {
  position: relative; padding-left: 17px; margin: 32px 0 10px;
  font-size: 1.3rem; letter-spacing: .4px; line-height: 1.25;
}
.tab-content .desc-subhead::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 1.15em; border-radius: 3px;
  background: linear-gradient(var(--gold), var(--purple));
  box-shadow: 0 0 14px rgba(214, 178, 112, .6);
}
.tab-content > p { line-height: 1.95; }
.tab-content { animation: tabFade .5s ease both; }
@keyframes tabFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- A touch more light on dark sections ---------- */
.product-detail-section { position: relative; }
.product-detail-info .product-subtitle { font-family: var(--font-serif); font-size: 1.15rem; letter-spacing: .5px; }

@media (prefers-reduced-motion: reduce) {
  .ec-glyph, .main-image img, .main-image video, .product-card img, .tab-content { animation: none !important; transition: none !important; }
}

/* ---------- Sale badge top-right (never overlaps Bestseller) ---------- */
.product-badge.sale {
  left: auto; right: 12px;
  background: linear-gradient(135deg, #e0566b, #bd3246);
  box-shadow: 0 6px 18px -6px rgba(224, 86, 107, .7);
}

/* ---------- Keep body copy legible over moving aurora bands ---------- */
.tab-content > p,
.tab-content li,
.product-detail-info .product-short-desc { text-shadow: 0 1px 14px rgba(8, 4, 20, .78); }

/* ---------- PDP main media: image always renders as the fallback layer;
   the ambient video is absolutely overlaid and fades in only once its
   first frame is ready — never a black box on slow networks ---------- */
.main-image { position: relative; }
.main-product-img { display: block; position: relative; z-index: 1; }
.main-product-video {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover; border-radius: 16px;
  background: transparent; opacity: 0; transition: opacity .7s ease;
}
.main-product-video.is-ready { opacity: 1; }
.video-badge { z-index: 3; }