/**
 * ==========================================================================
 * SINGLE PRODUCT TEMPLATE — Isolated styles for individual products
 * ==========================================================================
 *
 * PURPOSE:  Styles that apply ONLY to single (non-system) products.
 *           Every rule is scoped under `body.single-product-template`
 *           which is added by the body_class filter when the ACF field
 *           `is_system` is false (or not set).
 *
 * SCOPE:    Loaded ONLY when is_system = false  (via conditional enqueue)
 * SAFETY:   body.single-product-template is NEVER present on system/dual
 *           product pages, so these rules cannot bleed through.
 *
 * CLASS CONVENTION:
 *   - All new component classes are prefixed with `new-single-product`
 *     or `single-` to avoid any collision with existing dual-product CSS.
 *   - Where we need to override Divi defaults inside our template,
 *     we always chain: body.single-product-template .new-single-product ...
 * ==========================================================================
 */

/* ==========================================================================
   §1  LAYOUT RESETS — Override Divi defaults for single products only
   ========================================================================== */

body.single-product-template .new-single-product .et_pb_row {
  max-width: var(--mw-wide, 1080px);
  padding: 0 20px;
}

body.single-product-template .new-single-product .et_pb_section {
  padding-top: var(--sp-section, 100px);
  padding-bottom: var(--sp-section, 100px);
}

/* Tighter section spacing on mobile */
@media (max-width: 767px) {
  body.single-product-template .new-single-product .et_pb_section {
    padding-top: var(--sp-xl, 60px);
    padding-bottom: var(--sp-xl, 60px);
  }
}


/* ==========================================================================
   §2  HERO SECTION  (single-hero)
   ========================================================================== */

body.single-product-template .single-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl, 60px);
  align-items: center;
  max-width: var(--mw-wide, 1080px);
  margin: 0 auto;
}

body.single-product-template .single-hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

body.single-product-template .single-hero__eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-accent, var(--co-subtle, #aaa));
  margin-bottom: var(--sp-sm, 16px);
  display: block;
}

body.single-product-template .single-hero__title {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--co-dark, #1a1a1a);
  line-height: 1.2;
  margin: 0 0 var(--sp-sm, 16px) 0;
}

body.single-product-template .single-hero__subtitle {
  font-family: var(--ff-serif, Georgia, serif);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--co-body, #555);
  line-height: 1.5;
  margin: 0 0 var(--sp-md, 24px) 0;
}

body.single-product-template .single-hero__description {
  font-size: 14px;
  line-height: 1.75;
  color: var(--co-body, #555);
  margin-bottom: var(--sp-lg, 40px);
  max-width: 440px;
}

/* Hero stat pills */
body.single-product-template .single-hero__stats {
  display: flex;
  gap: var(--sp-lg, 40px);
  margin-bottom: var(--sp-lg, 40px);
}

body.single-product-template .single-hero__stat-value {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--co-dark, #1a1a1a);
  display: block;
}

body.single-product-template .single-hero__stat-label {
  font-size: 12px;
  color: var(--co-muted, #777);
  display: block;
  margin-top: 4px;
}

/* Hero price */
body.single-product-template .single-hero__price {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: 24px;
  color: var(--co-dark, #1a1a1a);
  margin-bottom: 6px;
}

body.single-product-template .single-hero__price-meta {
  font-size: 13px;
  color: var(--co-muted, #777);
  margin-bottom: var(--sp-md, 24px);
}

/* Hero CTA buttons */
body.single-product-template .single-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

body.single-product-template .single-hero__btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--co-dark, #1a1a1a);
  transition: all var(--ease-default, 0.3s ease);
  cursor: pointer;
}

body.single-product-template .single-hero__btn--primary {
  background: var(--co-dark, #1a1a1a);
  color: var(--co-bg-white, #fff);
}

body.single-product-template .single-hero__btn--primary:hover {
  background: transparent;
  color: var(--co-dark, #1a1a1a);
}

body.single-product-template .single-hero__btn--secondary {
  background: transparent;
  color: var(--co-dark, #1a1a1a);
}

body.single-product-template .single-hero__btn--secondary:hover {
  background: var(--co-dark, #1a1a1a);
  color: var(--co-bg-white, #fff);
}

@media (max-width: 767px) {
  body.single-product-template .single-hero {
    grid-template-columns: 1fr;
    gap: var(--sp-lg, 40px);
  }
  body.single-product-template .single-hero__stats {
    gap: var(--sp-md, 24px);
  }
}


/* ==========================================================================
   §3  HOW IT WORKS  (single-how-it-works)
   ========================================================================== */

body.single-product-template .single-how-it-works {
  max-width: var(--mw-narrow, 660px);
  margin: 0 auto;
  text-align: center;
}

body.single-product-template .single-how-it-works__eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-accent, var(--co-subtle, #aaa));
  margin-bottom: var(--sp-md, 24px);
  display: block;
}

body.single-product-template .single-how-it-works__text {
  font-family: var(--ff-serif, Georgia, serif);
  font-style: italic;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.7;
  color: var(--co-dark, #1a1a1a);
  margin: 0;
}


/* ==========================================================================
   §4  FORMULA / INGREDIENTS TABLE  (single-formula)
   ========================================================================== */

body.single-product-template .single-formula {
  max-width: var(--mw-content, 860px);
  margin: 0 auto;
}

body.single-product-template .single-formula__eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-accent, var(--co-subtle, #aaa));
  margin-bottom: var(--sp-xs, 8px);
  display: block;
  text-align: center;
}

body.single-product-template .single-formula__heading {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  color: var(--co-dark, #1a1a1a);
  text-align: center;
  margin: 0 0 var(--sp-xs, 8px) 0;
}

body.single-product-template .single-formula__subheading {
  font-size: 14px;
  color: var(--co-muted, #777);
  text-align: center;
  margin-bottom: var(--sp-xl, 60px);
}

body.single-product-template .single-formula__table {
  width: 100%;
  border-collapse: collapse;
}

body.single-product-template .single-formula__table tr {
  border-top: 1px solid var(--co-border, #e8e0d5);
}

body.single-product-template .single-formula__table tr:last-child {
  border-bottom: 1px solid var(--co-border, #e8e0d5);
}

body.single-product-template .single-formula__table td {
  padding: 24px 0;
  vertical-align: top;
}

body.single-product-template .single-formula__table td:first-child {
  width: 35%;
  padding-right: 40px;
}

body.single-product-template .single-formula__ingredient-name {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--co-dark, #1a1a1a);
  display: block;
  margin-bottom: 4px;
}

body.single-product-template .single-formula__ingredient-type {
  font-size: 12px;
  color: var(--co-accent, var(--co-subtle, #aaa));
  font-style: italic;
}

body.single-product-template .single-formula__ingredient-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--co-body, #555);
}

@media (max-width: 767px) {
  body.single-product-template .single-formula__table td:first-child {
    width: 100%;
    padding-right: 0;
    padding-bottom: 8px;
  }
  body.single-product-template .single-formula__table tr {
    display: flex;
    flex-direction: column;
  }
  body.single-product-template .single-formula__table td {
    padding: 12px 0;
  }
  body.single-product-template .single-formula__table tr {
    padding: 20px 0;
  }
}


/* ==========================================================================
   §5  BENEFITS SECTION  (single-benefits)
   Override only within single-product-template scope
   ========================================================================== */

body.single-product-template .single-benefits__eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-accent, var(--co-subtle, #aaa));
  text-align: center;
  display: block;
  margin-bottom: var(--sp-xs, 8px);
}

body.single-product-template .single-benefits__heading {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  color: var(--co-dark, #1a1a1a);
  text-align: center;
  margin: 0 0 var(--sp-xl, 60px) 0;
}


/* ==========================================================================
   §6  MIDWAY HERO  (reusing shared classes, but scoped overrides)
   ========================================================================== */

body.single-product-template .single-midway {
  background: var(--co-dark, #1a1a1a);
  padding: var(--sp-2xl, 80px) var(--sp-lg, 40px);
}


/* ==========================================================================
   §7  SECTION HEADINGS  (consistent pattern for single product sections)
   ========================================================================== */

body.single-product-template .single-section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-accent, var(--co-subtle, #aaa));
  text-align: center;
  display: block;
  margin-bottom: var(--sp-xs, 8px);
}

body.single-product-template .single-section-heading {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  color: var(--co-dark, #1a1a1a);
  text-align: center;
  margin: 0 0 var(--sp-xl, 60px) 0;
}


/* ==========================================================================
   §8  UPSELL / PAIRS WITH  (scoped layout adjustments)
   ========================================================================== */

body.single-product-template .single-upsell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg, 40px);
  max-width: var(--mw-wide, 1080px);
  margin: 0 auto;
}

@media (max-width: 767px) {
  body.single-product-template .single-upsell-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   §9  TRUST / EVIDENCE BAR  (single products)
   ========================================================================== */

body.single-product-template .single-trust-bar {
  display: flex;
  justify-content: center;
  gap: var(--sp-xl, 60px);
  flex-wrap: wrap;
  max-width: var(--mw-wide, 1080px);
  margin: 0 auto;
  padding: var(--sp-lg, 40px) 0;
  border-top: 1px solid var(--co-border, #e8e0d5);
  border-bottom: 1px solid var(--co-border, #e8e0d5);
}

body.single-product-template .single-trust-bar__item {
  text-align: center;
}

body.single-product-template .single-trust-bar__icon {
  font-size: 24px;
  margin-bottom: var(--sp-xs, 8px);
  display: block;
}

body.single-product-template .single-trust-bar__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--co-muted, #777);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  body.single-product-template .single-trust-bar {
    gap: var(--sp-lg, 40px);
  }
}


/* ==========================================================================
   §10  DIVI MODULE OVERRIDES  (single product scope only)
   Tame Divi's default spacing/font overrides within our template
   ========================================================================== */

/* Remove default bottom margin from Divi text modules inside our template */
body.single-product-template .new-single-product .et_pb_text {
  padding-bottom: 0 !important;
}

/* Ensure code modules don't add extra padding */
body.single-product-template .new-single-product .et_pb_code {
  padding: 0 !important;
}

/* Clean up Divi button defaults if we use Divi button modules */
body.single-product-template .new-single-product .et_pb_button {
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
}