/* ============================================================================
   product.css — product-detail (PDP) specific styles.
   Layout is mostly Tailwind utilities in product.php; this file holds the
   image gallery + small chips that are awkward to express as utilities.
   Reuses the global design tokens (var(--color-*)).
   ============================================================================ */

.pdp-stage {
  position: relative; overflow: hidden;
  border: 1px solid var(--color-line, #E2E8F0); border-radius: 18px;
  aspect-ratio: 4 / 3;
}
.pdp-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity .25s ease;
}

.pdp-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px;
}
.pdp-thumb {
  position: relative; padding: 0; cursor: pointer; overflow: hidden;
  aspect-ratio: 1 / 1; border-radius: 12px;
  border: 1px solid var(--color-line, #E2E8F0);
  background: var(--color-surface-2, #F1F5F9) center / cover no-repeat;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.pdp-thumb:hover { transform: translateY(-2px); border-color: var(--color-line-2, #CBD5E1); }
.pdp-thumb.is-active {
  border-color: var(--color-brand, #4F46E5);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand, #4F46E5) 40%, transparent);
}

/* ---- fullscreen image lightbox ---- */
.pdp-stage.is-zoomable { cursor: zoom-in; }
html.dp-lb-lock { overflow: hidden; }

.dp-lb {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(8, 11, 20, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.dp-lb.is-open { opacity: 1; visibility: visible; }

.dp-lb__stage {
  margin: 0; display: flex; align-items: center; justify-content: center;
  max-width: min(1100px, 92vw); max-height: 78vh;
}
.dp-lb__img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain;
  border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: #0b0e16;
  transform: scale(.96); transition: transform .25s ease;
}
.dp-lb.is-open .dp-lb__img { transform: scale(1); }

.dp-lb__btn {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .10);
  border-radius: 999px; transition: background .15s, transform .15s;
}
.dp-lb__btn:hover { background: rgba(255, 255, 255, .22); }
.dp-lb__btn svg { width: 22px; height: 22px; }
.dp-lb__close { top: 18px; right: 18px; width: 44px; height: 44px; }
.dp-lb__nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.dp-lb__nav:active { transform: translateY(-50%) scale(.92); }
.dp-lb__prev { left: clamp(8px, 2vw, 28px); }
.dp-lb__next { right: clamp(8px, 2vw, 28px); }

.dp-lb__count {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 600; letter-spacing: .02em;
}

.dp-lb__strip {
  position: absolute; bottom: clamp(12px, 3vw, 26px); left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; max-width: 92vw; overflow-x: auto; padding: 6px; scrollbar-width: none;
}
.dp-lb__strip::-webkit-scrollbar { display: none; }
.dp-lb__sthumb {
  flex: 0 0 auto; width: 58px; height: 58px; padding: 0; cursor: pointer;
  border-radius: 10px; border: 2px solid transparent; opacity: .55;
  background: #1a1f2e center / cover no-repeat;
  transition: opacity .15s, border-color .15s, transform .15s;
}
.dp-lb__sthumb:hover { opacity: .85; transform: translateY(-2px); }
.dp-lb__sthumb.is-active { opacity: 1; border-color: var(--color-brand, #4F46E5); }

@media (max-width: 600px) {
  .dp-lb__nav { width: 42px; height: 42px; }
  .dp-lb__sthumb { width: 46px; height: 46px; }
}

/* format / spec chips */
.pdp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 9px; font-size: 12px; font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: .02em;
  color: var(--color-ink-2, #1E293B);
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-line, #E2E8F0);
}

/* "what's included" list */
.pdp-list { display: flex; flex-direction: column; gap: 12px; }
.pdp-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--color-ink-2, #1E293B); }
.pdp-list li i, .pdp-list li svg { color: var(--color-emerald, #10B981); flex: 0 0 auto; margin-top: 2px; width: 18px; height: 18px; }

.pdp-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--color-amber, #F59E0B); }
.pdp-stars svg { width: 16px; height: 16px; fill: currentColor; }