/* ═══════════════════════════════════════════════════════════════
   BASE — animations, container, tokens
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes pd-fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pd-fadeLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pd-fadeRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pd-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Container ─────────────────────────────────────────────── */
.product-details-container {
  max-width: var(--main-width);
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-2xl) 0;
}

.product-content {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4xl);
  width: 100%;
  align-items: start;
}

/* ── Utilities ─────────────────────────────────────────────── */
.pb-100 { padding-bottom: 100px; }

.main-width {
  padding-left: var(--spacing-2xl);
  padding-right: var(--spacing-2xl);
}