/* ==========================================================================
   Product page (#/product/<id>)
   ========================================================================== */

.is-pdp .altitude {
  display: none;
}

.pdp {
  background: var(--paper);
}
.pdp.is-entering .pdp__main {
  animation: pdp-in 700ms var(--ease-out) both;
}
@keyframes pdp-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* ---------- Top: dark product reveal ---------- */

.pdp__hero {
  position: relative;
  padding: calc(72px + var(--s-5)) 0 var(--s-8);
  background: var(--orbit);
  color: var(--on-orbit);
  overflow: clip;
  isolation: isolate;
}
.pdp__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 60% at calc(50% - 20% * var(--flip)) 50%, oklch(0.36 0.1 245 / 0.9), transparent 72%),
    linear-gradient(180deg, var(--orbit), var(--ink));
}

.pdp__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-size: var(--text-sm);
  color: var(--on-orbit-2);
}
.pdp__crumbs a {
  color: var(--on-orbit-2);
  text-decoration: none;
}
.pdp__crumbs a:hover {
  color: var(--on-orbit);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdp__crumbs [aria-current] {
  color: var(--on-orbit);
}

.pdp__main {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7);
  align-items: center;
}

.pdp__gallery {
  display: grid;
  gap: var(--s-4);
}
.pdp__stage {
  position: relative;
  aspect-ratio: 1 / 0.86;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(52% 55% at 50% 50%, oklch(0.44 0.11 244) 0%, oklch(0.27 0.075 250) 48%, oklch(0.18 0.045 258) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--quell) 20%, transparent);
}
/* A glowing horizon under the product, like the edge of the Earth from orbit */
.pdp__stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -25%;
  right: -25%;
  top: 78%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(60% 40% at 50% 0%, color-mix(in oklch, var(--quell) 26%, transparent), transparent 70%);
  box-shadow:
    0 -1px 0 color-mix(in oklch, var(--quell) 55%, transparent),
    0 -18px 40px -20px color-mix(in oklch, var(--quell) 60%, transparent);
}
.pdp__halo {
  position: absolute;
  z-index: 1;
  inset: 10% 18% 20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--quell) 22%, transparent), transparent 72%);
}
.pdp__img {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 12%;
  height: 76%;
  width: auto;
  max-width: 84%;
  object-fit: contain;
  translate: -50% 0;
  filter: drop-shadow(0 34px 30px rgb(0 0 0 / 0.5)) drop-shadow(0 0 32px color-mix(in oklch, var(--quell) 32%, transparent));
}
.pdp__code {
  position: absolute;
  z-index: 3;
  inset-inline-start: var(--s-5);
  top: var(--s-5);
  color: var(--on-orbit-2);
}

.pdp__thumbs {
  display: flex;
  gap: var(--s-3);
}
.pdp__thumbs button {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--on-orbit) 7%, transparent);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow 200ms var(--ease-out);
}
.pdp__thumbs button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--quell);
}
.pdp__thumbs img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.pdp__info {
  display: grid;
  gap: var(--s-4);
  align-content: center;
}
.pdp__kicker {
  color: var(--quell);
  font-weight: 600;
}
.pdp__title {
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem);
  font-stretch: 118%;
  font-weight: 800;
  line-height: 0.98;
}
.pdp__title:focus {
  outline: none;
}
.pdp__tagline {
  max-width: 42ch;
  color: var(--on-orbit-2);
  font-size: var(--text-lg);
  line-height: 1.5;
}
.pdp__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pdp__price .label {
  color: var(--on-orbit-2);
  letter-spacing: 0.08em;
}
.pdp__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.pdp__wa {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  color: var(--on-orbit);
  font-weight: 600;
  text-decoration: none;
}
.pdp__wa svg {
  width: 20px;
  height: 20px;
  color: oklch(0.78 0.16 150);
}
.pdp__wa:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdp__trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  color: var(--on-orbit-2);
}
.pdp__trust li::before {
  content: "✓";
  margin-inline-end: 6px;
  color: var(--quell);
  font-weight: 700;
}

/* ---------- Details (light) ---------- */

.pdp__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
  padding-block: var(--s-9) var(--s-8);
}
.pdp__block h2 {
  margin-bottom: var(--s-4);
}
.pdp__desc p {
  max-width: 60ch;
  color: var(--ink-2);
}
.pdp__desc p + p {
  margin-top: var(--s-3);
}
.pdp__highlights {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}
.pdp__highlights li {
  position: relative;
  padding-inline-start: var(--s-5);
  line-height: 1.45;
}
.pdp__highlights li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
.pdp__specs > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.pdp__specs dt {
  color: var(--ink-3);
  font-size: var(--text-sm);
}
.pdp__specs dd {
  font-weight: 600;
  font-size: var(--text-sm);
}
.pdp__note {
  margin-top: var(--s-4);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.pdp__nasa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-6);
  border-radius: calc(var(--radius) * 2);
  background: var(--ink);
  color: var(--on-orbit);
}
.pdp__nasa p {
  margin-top: var(--s-2);
  color: var(--on-orbit-2);
  max-width: 70ch;
}
.pdp__nasa-logo {
  width: 76px;
  height: auto;
  filter: drop-shadow(0 0 16px color-mix(in oklch, var(--accent) 45%, transparent));
}
.pdp__nasa-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}
.pdp__nasa .text-link {
  color: var(--on-orbit);
}

.pdp__parts-wrap {
  padding-top: var(--s-8);
}
.pdp__parts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.pdp__part {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding-block: var(--s-3);
  padding-inline: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  background: var(--sand);
}
.pdp__part img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.pdp__part-name {
  font-weight: 650;
  line-height: 1.3;
}
.pdp__part-price {
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.pdp__related {
  padding-block: var(--s-8) var(--s-9);
}
.pdp__related-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.pdp__card {
  display: grid;
  gap: var(--s-2);
  color: var(--ink);
  text-decoration: none;
}
.pdp__card-stage {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: radial-gradient(60% 60% at 50% 55%, oklch(0.42 0.1 245), oklch(0.22 0.06 255));
  transition: transform 400ms var(--ease-out);
}
.pdp__card:hover .pdp__card-stage {
  transform: translateY(-4px);
}
.pdp__card-stage img {
  width: 74%;
  height: 74%;
  object-fit: contain;
}
.pdp__card-name {
  font-weight: 700;
}
.pdp__card-price {
  color: var(--ink-2);
  font-size: var(--text-sm);
}

@media (max-width: 960px) {
  .pdp__main,
  .pdp__details {
    grid-template-columns: 1fr;
  }
  .pdp__details {
    gap: var(--s-6);
  }
  .pdp__nasa {
    grid-template-columns: 1fr;
  }
  .pdp__related-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Offers ---------- */
.pdp__save {
  margin-top: calc(-1 * var(--s-2));
  color: var(--sale-bright);
  font-weight: 700;
}
.pdp__kicker .offer-tag {
  margin-inline-start: var(--s-2);
  vertical-align: 2px;
}
.pdp__card-stage {
  position: relative;
}
.pdp__card-stage .offer-tag {
  position: absolute;
  top: var(--s-3);
  inset-inline-start: var(--s-3);
}
:is(.pdp__card-price, .pdp__part-price) .price__was {
  margin-inline-start: 6px;
  font-size: var(--text-sm);
}
:is(.pdp__card-price, .pdp__part-price) .label {
  margin-inline-end: 4px;
}