/**
 * Custom (non-Elementor) product template — styling foundation.
 *
 * STANDARD (see docs/product-page-styling.md):
 *  - All spacing/radii/color come from the design tokens below. No raw px for
 *    spacing/gap/padding/margin anywhere except these :root definitions —
 *    enforced by .stylelintrc.json.
 *  - Components use BEM under the `nf-pdp` / `nf-` namespace so nothing leaks
 *    into Elementor or the theme during the mixed migration.
 *  - Loaded ONLY on the product template (ProductTemplate module, product flag).
 *    Scoped reset lives under .nf-pdp so it can't touch the global theme.
 *
 * Tokens are authored here for now (product-only). When this is promoted to
 * other page types, extract this :root block into a shared assets/.../ui/tokens.css.
 */

:root {
  /* Spacing scale (4px base) — the single source of truth for gaps/margins/padding */
  --nf-space-3xs: 4px;
  --nf-space-2xs: 8px;
  --nf-space-xs: 12px;
  --nf-space-sm: 16px;
  --nf-space-md: 24px;
  --nf-space-lg: 32px;
  --nf-space-xl: 48px;
  --nf-space-2xl: 64px;

  /* Radii */
  --nf-radius-sm: 6px;
  --nf-radius: 8px;
  --nf-radius-lg: 16px;

  /* Layout */
  --nf-pdp-max: 1680px;
  --nf-pdp-gutter: var(--nf-space-sm);
  --nf-pdp-hero-gap: var(--nf-space-lg);
  --nf-pdp-section-gap: var(--nf-space-xl);

  /* Typography */
  --nf-font-size-title: clamp(1.6rem, 2.5vw, 2.2rem);

  /* Color — PLACEHOLDERS; confirm exact Nutrisslim brand values before section migration */
  --nf-color-text: #1a1a1a;
  --nf-color-muted: #6b7280;
  --nf-color-border: #e5e7eb;
  --nf-color-surface: #f7f7f7;
  --nf-color-accent: #4caf50;
}

/* Scoped reset — confined to the custom template root so it never touches the theme. */
.nf-pdp,
.nf-pdp *,
.nf-pdp *::before,
.nf-pdp *::after {
  box-sizing: border-box;
}

.nf-pdp {
  max-width: var(--nf-pdp-max);
  margin: 0 auto;
  padding: 0 var(--nf-pdp-gutter) var(--nf-space-2xl);
}

.nf-pdp__breadcrumb {
  margin: var(--nf-space-sm) 0 var(--nf-space-md);
}

/* Hero: gallery (30%) | details (40%) | add-to-cart (30%) */
.nf-pdp__hero {
  display: grid;
  grid-template-columns: 30% 40% 30%;
  gap: var(--nf-pdp-hero-gap);
  align-items: start;
}

.nf-pdp__hero-col {
  min-width: 0;
}

.nf-pdp__title {
  margin: 0 0 var(--nf-space-xs);
  font-size: var(--nf-font-size-title);
}

.nf-pdp__disclaimer {
  margin: 0 0 var(--nf-space-sm);
  color: var(--nf-color-muted);
}

.nf-pdp__section {
  margin-top: var(--nf-pdp-section-gap);
}

/* Tablet: details + atc share a row under the full-width gallery */
@media (max-width: 1200px) {
  .nf-pdp__hero {
    grid-template-columns: 1fr 1fr;
  }
  .nf-pdp__hero-gallery {
    grid-column: 1 / -1;
  }
}

/* Mobile: single column, stacked */
@media (max-width: 768px) {
  .nf-pdp__hero {
    grid-template-columns: 1fr;
    gap: var(--nf-space-md);
  }
  .nf-pdp__hero-gallery {
    grid-column: auto;
  }
}