/*
 * PERFORMANCE PEPTIDES — ATOMIC BLUE GLOBAL STYLES
 * Auto-loaded by pp-atomic-blue-elementor on frontend + Elementor preview.
 * All rules are scoped under .pp-section so they cannot bleed into WoodMart's header / footer.
 */

/* ── DESIGN TOKENS (from mockup :root) ── */
.pp-section {
  --pp-ink:    #050710;
  --pp-vault:  #071b2d;
  --pp-panel:  #d7f5ff;
  --pp-paper:  #eefcff;
  --pp-glow:   #46f0ff;
  --pp-gold:   #ffd166;
  --pp-red:    #ff4d6d;
  --pp-deep:   #0d314d;

  --pp-f-head: Impact, Haettenschweiler, 'Arial Narrow Bold', Arial, sans-serif;
  --pp-f-body: Arial, Helvetica, sans-serif;

  --pp-container: 1240px;
  --pp-border:    4px solid #000;
  --pp-shadow-sm: 4px 4px 0 #000;
  --pp-shadow-md: 5px 5px 0 #000;
  --pp-shadow-lg: 7px 7px 0 #000;
  --pp-shadow-xl: 10px 10px 0 #000;
  --pp-shadow-xxl: 12px 12px 0 #000;
}

/* ── SCOPED RESET ── */
.pp-section,
.pp-section *,
.pp-section *::before,
.pp-section *::after { box-sizing: border-box; }
.pp-section img, .pp-section svg { display: block; max-width: 100%; }
.pp-section a { color: inherit; text-decoration: none; cursor: pointer; }
.pp-section button { font: inherit; color: inherit; cursor: pointer; }
.pp-section ul { list-style: none; margin: 0; padding: 0; }

/* ── SECTION BASE ──
   Vault grid + scanline + cyan/gold radial wash are painted directly on
   .pp-section using background-attachment: fixed. Every dark section
   then shares ONE viewport-locked backdrop — the same ambient glow the
   hero has flows continuously through every section below, mirroring
   the original mockup's body::before / body::after overlays. */
.pp-section {
  position: relative;
  font-family: var(--pp-f-body);
  color: var(--pp-paper);
  background-color: var(--pp-vault);
  background-image:
    /* radial glow — cyan top-left + gold top-right of viewport */
    radial-gradient(circle at 20% 12%, rgba(70,240,255,.28), transparent 32%),
    radial-gradient(circle at 78% 0%,  rgba(255,209,102,.22), transparent 34%),
    /* grid (subtle white lines) */
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    /* scanlines */
    linear-gradient(rgba(238,252,255,.05) 50%, transparent 50%);
  background-size: auto, auto, 36px 36px, 36px 36px, 100% 4px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* .pp-bg-vault is now just a positioning helper — the dark base + grid +
   glow all live on .pp-section. Sections that want a flat fill (trust
   strip = paper, footer = black) simply override `background`; the
   shorthand resets background-image so those bands stay clean. */
.pp-bg-vault {
  position: relative;
  overflow: hidden;
}
.pp-bg-vault > .pp-wrap { position: relative; z-index: 1; }

/* ── CONTAINER ── */
.pp-wrap {
  max-width: var(--pp-container);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* ── HEADINGS ── */
.pp-section h1,
.pp-section h2,
.pp-section h3 {
  font-family: var(--pp-f-head);
  margin: 0;
  text-transform: uppercase;
  line-height: .95;
}
.pp-section h1 {
  font-size: clamp(56px, 8vw, 112px);
  line-height: .86;
  letter-spacing: -.04em;
  text-shadow: 7px 7px 0 #000;
}
.pp-section h2 {
  font-size: clamp(38px, 5vw, 68px);
  text-shadow: 5px 5px 0 #000;
}

/* Section heads (eyebrow + title + side button) */
.pp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 28px;
}
.pp-section-head h2 { color: #fff; }
.pp-eyebrow {
  font: 900 14px var(--pp-f-body);
  color: var(--pp-glow);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 8px;
}

/* Pill (used by hero badge, eyebrow chips) */
.pp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: var(--pp-border);
  background: var(--pp-gold);
  color: #000;
  box-shadow: var(--pp-shadow-md);
  transform: rotate(-1deg);
  font: 900 14px var(--pp-f-body);
  text-transform: uppercase;
}

/* Buttons */
a.pp-btn,
.pp-btn {
  border: var(--pp-border);
  border-radius: 18px;
  padding: 16px 24px;
  box-shadow: var(--pp-shadow-lg);
  background: var(--pp-glow);
  color: #000 !important;
  font: 900 15px var(--pp-f-body);
  text-transform: uppercase;
  transition: .15s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
a.pp-btn:hover,
a.pp-btn:focus,
a.pp-btn:visited,
a.pp-btn:active,
.pp-btn:hover,
.pp-btn:focus,
.pp-btn:visited,
.pp-btn:active { color: #000 !important; text-decoration: none; }
.pp-btn.secondary { background: var(--pp-panel); }
.pp-btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 #000; }

/* Stock pill (e.g. "In stock now", "Articles & videos") */
.pp-stock {
  border: 2px solid var(--pp-glow);
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  color: var(--pp-glow);
  padding: 10px 18px;
  font: 900 14px var(--pp-f-body);
}

/* Generic section padding */
.pp-pad     { padding: 70px 20px; }
.pp-pad-top { padding-top: 70px; }
.pp-pad-0t  { padding-top: 0; }

/* Responsive base */
@media (max-width: 980px) {
  .pp-section h1 { text-shadow: 4px 4px 0 #000; }
  .pp-section h2 { text-shadow: 3px 3px 0 #000; }
}
@media (max-width: 620px) {
  .pp-section-head { flex-direction: column; align-items: flex-start; }
}