/* ============================================================
   Product Detail Page v2 — Foundation
   Tokens, page grid (3-col desktop / stacked mobile), shared
   utilities (fade transition, skeleton shimmer keyframes).

   Breakpoints (mobile-first): 360, 480, 768, 1024, 1200, 1280,
   1440, 1920 — matches the rest of the site's --noon-shell-width
   (1200px) convention for the desktop 3-column switch.
   ============================================================ */

:root {
  /* Re-use the site's existing design tokens where possible so the
     rebuilt PDP stays visually consistent with the rest of Buda. */
  --pdp-bg: var(--noon-bg, #f4f7fb);
  --pdp-surface: var(--noon-surface, #ffffff);
  --pdp-border: var(--noon-border, #d7e1ef);
  --pdp-text: #1a2233;
  --pdp-ink: #404553; /* confirmed noon.com ink color (title/labels) */
  --pdp-muted: var(--noon-muted, #5f7391);
  --pdp-blue: var(--noon-blue, #1f6feb);
  --pdp-blue-strong: var(--noon-blue-strong, #1256c8);
  --pdp-yellow: var(--noon-yellow, #ffd447);
  --pdp-radius: var(--noon-radius, 16px);
  --pdp-radius-sm: 10px;
  --pdp-radius-lg: 20px;

  /* Price */
  --pdp-price: #0f1f42;
  --pdp-price-old: #94a3b8;
  --pdp-discount-bg: #fde8ef;
  --pdp-discount-text: #e3245c;
  --pdp-savings: #1a8f5a;

  /* Stock */
  --pdp-stock-ok: #1a8f5a;
  --pdp-stock-low-bg: #fdeeea;
  --pdp-stock-low-text: #c53d1f;
  --pdp-stock-out: #9aa4b2;

  /* Delivery / urgency */
  --pdp-express-bg: #ffe000;
  --pdp-express-text: #171a1f;
  --pdp-countdown: #b3261e;

  /* Shadows */
  --pdp-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --pdp-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.07);
  --pdp-shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.1);

  /* Motion */
  --pdp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pdp-fade-fast: 160ms;
  --pdp-fade: 240ms;

  /* Skeleton */
  --pdp-sk-base: #ececec;
  --pdp-sk-highlight: #f8f8f8;
  --pdp-sk-bg: #f7f7f7;

  /* Layout */
  --pdp-shell-width: var(--noon-shell-width, 1200px);
  --pdp-gutter: 14px;
  --pdp-gallery-col: 390px;
  --pdp-seller-col: 300px;
}

@media (min-width: 768px) {
  :root { --pdp-gutter: 18px; }
}
@media (min-width: 1200px) {
  :root { --pdp-gutter: 22px; }
}
@media (min-width: 1440px) {
  :root {
    --pdp-gallery-col: 420px;
    --pdp-seller-col: 320px;
  }
}
@media (min-width: 1920px) {
  :root {
    --pdp-shell-width: 1480px;
    --pdp-gallery-col: 470px;
    --pdp-seller-col: 340px;
  }
}

/* ---------- Page shell ---------- */
.pdp-page {
  display: flex;
  flex-direction: column;
  background: var(--pdp-bg);
  min-height: 100vh;
  color: var(--pdp-text);
}

.pdp-shell {
  width: 100%;
  max-width: var(--pdp-shell-width);
  margin: 0 auto;
  padding: 10px var(--pdp-gutter) 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .pdp-shell { gap: 16px; padding-top: 14px; }
}
@media (min-width: 1200px) {
  .pdp-shell { gap: 20px; padding-top: 18px; }
}

/* ---------- Buybox: gallery + info + seller ---------- */
.pdp-buybox {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdp-buybox > * { min-width: 0; }

/* Explicit mobile/tablet reading order (matches Noon app order):
   gallery -> primary info -> seller -> variants */
.pdp-gallery-region { order: 1; }
.pdp-info-region { order: 2; }
.pdp-seller-region { order: 3; }
.pdp-variants-region { order: 4; }

@media (min-width: 1200px) {
  .pdp-buybox {
    display: grid;
    grid-template-columns: var(--pdp-gallery-col) minmax(0, 1fr) var(--pdp-seller-col);
    grid-template-areas:
      "gallery info seller"
      "gallery variants seller";
    align-items: start;
    gap: 0 24px;
  }
  .pdp-gallery-region { grid-area: gallery; order: initial; }
  .pdp-info-region { grid-area: info; order: initial; }
  .pdp-seller-region { grid-area: seller; order: initial; }
  .pdp-variants-region { grid-area: variants; order: initial; margin-top: 6px; }
}

@media (min-width: 1440px) {
  .pdp-buybox { gap: 0 32px; }
}

/* ---------- Sections below the buybox ---------- */
.pdp-section {
  background: var(--pdp-surface);
  border-radius: var(--pdp-radius);
  box-shadow: var(--pdp-shadow-sm);
  overflow: hidden;
}

.pdp-section-pad { padding: 14px; }

@media (min-width: 768px) {
  .pdp-section-pad { padding: 18px 20px; }
}

.pdp-section-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 900;
  color: var(--pdp-ink);
}

/* ---------- Fade-in (used instead of any bounce/slide motion) ---------- */
.pdp-fade {
  animation: pdp-fade-in var(--pdp-fade) var(--pdp-ease) both;
}
@keyframes pdp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pdp-crossfade {
  transition: opacity var(--pdp-fade) var(--pdp-ease);
}

/* ---------- Generic visually-hidden helper (a11y) ---------- */
.pdp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Focus states (keyboard accessibility) ---------- */
.pdp-page a:focus-visible,
.pdp-page button:focus-visible,
.pdp-page [tabindex]:focus-visible,
.pdp-page input:focus-visible {
  outline: 2px solid var(--pdp-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pdp-page *,
  .pdp-page *::before,
  .pdp-page *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Hide app bottom-nav on PDP: replaced by StickyAddToCart ---------- */
@media (max-width: 1199px) {
  body.pdp-shell-active .bottom-nav { display: none !important; }
  body.pdp-shell-active.app-shell { padding-bottom: 0; }
}