/**
 * ĀROHA DIGITAL CORE — Product Detail Styles
 * product-detail.css — Shared across kanti, kesa, resa pages
 */

/* ─── Product Hero ─────────────────────────────────────────────────────── */
.pd-hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: var(--nav-height);
  border-bottom: var(--border-thin);
  overflow: hidden;
  position: relative;
}

.pd-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-16) var(--content-padding) var(--space-16);
  border-right: var(--border-thin);
}

.pd-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.pd-hero__name {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(4rem, 9vw, 9rem);
  letter-spacing: var(--tracking-elegant);
  text-transform: uppercase;
  color: var(--color-pure-black);
  mix-blend-mode: multiply;
  line-height: 0.85;
  margin-bottom: var(--space-8);
}

.pd-name-inner {
  display: block;
  transform: translateY(110%);
  /* Animated in via GSAP */
  transition: transform 1.2s cubic-bezier(0.19,1,0.22,1);
}

.pd-hero__descriptor {
  max-width: 440px;
  font-size: var(--text-sm);
  opacity: 0.7;
  margin-bottom: var(--space-10);
  line-height: 1.8;
}

.pd-divider {
  margin-bottom: var(--space-8);
}

/* Stats row */
.pd-hero__stats {
  display: flex;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
}

.pd-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pd-stat__val {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: var(--tracking-label);
  mix-blend-mode: multiply;
}

/* CTA Button */
.pd-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-pure-black);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-tech);
  text-transform: uppercase;
  color: var(--color-pure-black);
  text-decoration: none;
  width: fit-content;
  position: relative;
  overflow: hidden;
  transition: color var(--duration-base) var(--ease-out-expo),
              border-color var(--duration-base) var(--ease-out-expo);
}

.pd-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-terracotta);
  transform: translateY(101%);
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.pd-cta:hover {
  color: var(--color-cloud);
  border-color: var(--color-terracotta);
}

.pd-cta:hover::before {
  transform: translateY(0);
}

.pd-cta > * {
  position: relative;
  z-index: 1;
}

.pd-cta__arrow {
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.pd-cta:hover .pd-cta__arrow {
  transform: translateX(4px);
}

/* ─── Right Visual Panel ─────────────────────────────────────────────── */
.pd-hero__right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-highlight);
}

.pd-hero__bottle-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.pd-hero__bottle {
  width: clamp(200px, 35vw, 500px);
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: var(--z-product);
  will-change: transform;
  /* Refraction glow on hover */
  transition: filter var(--duration-slow) var(--ease-out-expo);
}

.pd-hero__right:hover .pd-hero__bottle {
  filter:
    drop-shadow(0 32px 80px rgba(0,0,0,0.18))
    drop-shadow(0 0 60px rgba(210,162,61,0.25));
}

/* Technical annotations on bottle */
.pd-annotation {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.35;
}

.pd-annotation::before {
  content: '';
  display: block;
  background: var(--color-pure-black);
  mix-blend-mode: multiply;
}

.pd-annotation--top-right {
  top: 22%;
  right: 8%;
  flex-direction: row-reverse;
}
.pd-annotation--top-right::before {
  width: 40px;
  height: 1px;
}

.pd-annotation--bottom-left {
  bottom: 28%;
  left: 8%;
}
.pd-annotation--bottom-left::before {
  width: 40px;
  height: 1px;
}

/* ─── Specs Section ──────────────────────────────────────────────────── */
.pd-specs-section {
  padding: var(--space-24) var(--content-padding);
  border-top: var(--border-thin);
  position: relative;
}

.pd-specs-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: var(--border-thin);
}

/* ─── Ritual Section ─────────────────────────────────────────────────── */
.pd-ritual-section {
  padding: var(--space-24) var(--content-padding);
  border-top: var(--border-thin);
}

.pd-ritual-section .section-heading {
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: var(--space-8);
}

.pd-ritual-steps {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  flex-wrap: wrap;
}

.pd-ritual-step {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pd-ritual-step__num {
  color: var(--color-pure-black);
  opacity: 0.4;
  font-size: var(--text-xs);
}

.pd-ritual-step__text {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  line-height: 1.7;
  opacity: 0.8;
}

/* ─── Next Product Navigation ────────────────────────────────────────── */
.pd-next-product {
  padding: var(--space-20) var(--content-padding);
  border-top: var(--border-thin);
  background: var(--color-label-green);
}

.pd-next-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--color-pure-black);
  group: true;
  transition: gap var(--duration-base) var(--ease-out-expo);
}

.pd-next-link:hover {
  gap: var(--space-6);
}

.pd-next-name {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4.5rem);
  letter-spacing: var(--tracking-elegant);
  text-transform: uppercase;
  mix-blend-mode: multiply;
}

.pd-next-arrow {
  font-size: 2rem;
  transition: transform var(--duration-base) var(--ease-out-expo);
  mix-blend-mode: multiply;
}

.pd-next-link:hover .pd-next-arrow {
  transform: translateX(8px);
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pd-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto 60vh;
  }

  .pd-hero__left {
    border-right: none;
    border-bottom: var(--border-thin);
    padding: var(--space-10) var(--space-6);
    justify-content: flex-end;
  }

  .pd-hero__right {
    order: -1;
  }

  .pd-specs-header {
    grid-template-columns: 1fr;
  }

  .pd-ritual-steps {
    flex-direction: column;
    align-items: flex-start;
  }

  .divider--vertical {
    display: none;
  }
}