/*
Theme Name: PeptaLux Child
Theme URI: https://peptalux.com/
Author: Peptalux
Author URI: https://peptalux.com/
Description: Child theme for the PeptaLux research peptide storefront. Token definitions live in assets/css/design-tokens.css (loaded first). This file holds page-specific overrides.
Template: peptalux5-theme-pass-3-volume-bac
Version: 1.0.0
Text Domain: peptalux-child
*/

/*
 * The :root token block formerly here moved to assets/css/design-tokens.css
 * during the launch finalization commit. Legacy aliases (--plx-primary-dark,
 * --plx-text, --plx-bg-soft, --plx-white, --plx-charcoal, --plx-accent-green,
 * --plx-gradient) are preserved there as aliases of the new tokens.
 */

/*
 * Phase 2 — footer legal disclaimer (Davey deliverable 7).
 * Parent's .plx-footer__notice p caps width at 640px and styles small/dim
 * text on the dark footer; Davey's paragraph is longer so widen, plus
 * style the eyebrow label, embedded policy links, and address line.
 */
.plx-footer__notice-eyebrow {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  margin: 0 0 8px;
}
.plx-footer__disclaimer p {
  max-width: 960px;
}
.plx-footer__disclaimer p a {
  color: rgba(255,255,255,.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plx-footer__disclaimer p a:hover {
  color: rgba(255,255,255,1);
}
.plx-footer__notice .plx-footer__address {
  font-size: .7rem;
  color: rgba(255,255,255,.85);
  letter-spacing: .02em;
  margin: 14px 0 0;
}

/*
 * Phase 4 — RUO disclaimer block on product pages (Davey deliverable 6).
 * Phase Redesign (May 2026) tightening: 4 paragraphs (lead + 3 subheads),
 * smaller body text, slightly more padding, subhead labels in charcoal
 * (NOT accent blue — keeps the visual hierarchy from over-shouting).
 */
.peptalux-ruo-block {
  border: 1.5px solid var(--plx-primary, #1E50A0);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--plx-bg-page, #F5F7FA);
  padding: 20px 22px;
  margin: 18px 0;
}
.peptalux-ruo-block .peptalux-ruo-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plx-primary, #1E50A0);
  margin: 0 0 10px;
}
.peptalux-ruo-block .peptalux-ruo-body {
  font-size: 12.5px;
  color: var(--plx-body, #1A1A1A);
  line-height: 1.55;
  margin: 0 0 8px;
}
.peptalux-ruo-block .peptalux-ruo-body:last-child {
  margin-bottom: 0;
}
.peptalux-ruo-block .ruo-sub-label {
  display: inline;
  font-weight: 700;
  color: var(--plx-body, #1A1A1A);
}
.peptalux-ruo-block .peptalux-ruo-body a {
  color: var(--plx-primary, #1E50A0);
  text-decoration: underline;
}
.peptalux-ruo-block .peptalux-ruo-body a:hover {
  color: var(--plx-primary-hover, #0F2D6B);
}

@media (max-width: 480px) {
  .peptalux-ruo-block {
    padding: 16px 18px;
  }
  .peptalux-ruo-block .peptalux-ruo-body {
    font-size: 11.5px;
  }
}

/*
 * Phase Redesign — Description tab section structure (5 new sections
 * replacing the deleted Disclaimer / Intended Use / Terms of Sale
 * accordions). Section heading + body + optional metadata <dl> + sources
 * <ul>. Visual separation between sections via top border + spacing.
 */
.peptalux-product-section-v2 {
  padding: 18px 0;
  border-top: 1px solid var(--plx-border, #E1E5EB);
}
.peptalux-product-section-v2:first-of-type {
  border-top: none;
  padding-top: 8px;
}
.peptalux-product-section-v2 .peptalux-section-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--plx-primary-hover, #0F2D6B);
  margin: 0 0 10px;
  letter-spacing: .01em;
}
.peptalux-product-section-v2 .peptalux-section-body {
  font-size: 14px;
  color: var(--plx-body, #1A1A1A);
  line-height: 1.6;
  margin: 0 0 8px;
}
.peptalux-product-section-v2 .peptalux-section-body a {
  color: var(--plx-primary, #1E50A0);
  text-decoration: underline;
}
.peptalux-product-section-v2 .peptalux-section-body a:hover {
  color: var(--plx-primary-hover, #0F2D6B);
}
.peptalux-product-section-v2 .peptalux-section-note {
  font-size: 12.5px;
  color: var(--plx-muted, #64748B);
  margin: 0 0 8px;
  line-height: 1.5;
}
.peptalux-product-section-v2 .peptalux-section-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
  row-gap: 6px;
  margin: 0;
  font-size: 13.5px;
  color: var(--plx-body, #1A1A1A);
}
.peptalux-product-section-v2 .peptalux-section-dl dt {
  font-weight: 600;
  color: var(--plx-charcoal, #3D3D3D);
}
.peptalux-product-section-v2 .peptalux-section-dl dd {
  margin: 0;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
}
.peptalux-product-section-v2 .peptalux-section-sources {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--plx-body, #1A1A1A);
  line-height: 1.55;
}
.peptalux-product-section-v2 .peptalux-section-sources li {
  margin-bottom: 4px;
}
.peptalux-product-section-v2 .peptalux-section-sources a {
  color: var(--plx-primary, #1E50A0);
  text-decoration: underline;
}
.peptalux-product-section-v2 .peptalux-section-sources a:hover {
  color: var(--plx-primary-hover, #0F2D6B);
}

@media (max-width: 480px) {
  .peptalux-product-section-v2 .peptalux-section-heading {
    font-size: 13.5px;
  }
  .peptalux-product-section-v2 .peptalux-section-body {
    font-size: 13.5px;
  }
  .peptalux-product-section-v2 .peptalux-section-dl {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .peptalux-product-section-v2 .peptalux-section-dl dt {
    margin-top: 4px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Launch finalization additions
 * ════════════════════════════════════════════════════════════════════════ */

/*
 * #13 — Footer contrast pass.
 * Parent custom.css uses 4 opacity tiers (.25, .3, .4, .55) on white, several
 * below WCAG AA on the navy footer background. Collapse to two tiers:
 *   - Primary content (links, headings, body, addresses): rgba(255,255,255,.85)
 *   - Muted (copyright, eyebrows, low-prominence rows):    rgba(255,255,255,.55)
 * Selectors mirror parent's exact specificity so these win without !important.
 */
.plx-footer__col h4 { color: rgba(255,255,255,.85); }
.plx-footer__col nav a { color: rgba(255,255,255,.85); }
.plx-footer__col nav a:hover { color: #fff; }
.plx-footer__tagline { color: rgba(255,255,255,.85); }
.plx-footer__badges span { color: rgba(255,255,255,.85); }
.plx-footer__notice strong { color: rgba(255,255,255,.85); }
.plx-footer__notice p { color: rgba(255,255,255,.85); }
.plx-footer__bottom-inner > span { color: rgba(255,255,255,.55); }
.plx-footer__bottom-links a { color: rgba(255,255,255,.55); }
.plx-footer__bottom-links a:hover { color: rgba(255,255,255,.85); }

/*
 * #15 — Empty cart state (paired with woocommerce/cart/cart-empty.php).
 */
.plx-empty-cart {
  max-width: 480px;
  margin: 80px auto;
  text-align: center;
  padding: 0 20px;
}
.plx-empty-cart__icon {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}
.plx-empty-cart__title {
  font-size: var(--plx-text-xl, 24px);
  font-weight: var(--plx-weight-semibold, 600);
  color: var(--plx-body, #1A1A1A);
  margin: 0 0 8px;
}
.plx-empty-cart__subtitle {
  font-size: var(--plx-text-base, 16px);
  color: var(--plx-muted, #64748B);
  margin: 0 0 24px;
}
.plx-empty-cart__cta {
  display: inline-block;
  padding: 14px 28px;
  background: var(--plx-primary, #1E50A0);
  color: #FFFFFF;
  border-radius: var(--plx-radius, 8px);
  font-weight: var(--plx-weight-medium, 500);
  text-decoration: none;
  transition: background var(--plx-transition, 150ms ease);
}
.plx-empty-cart__cta:hover {
  background: var(--plx-primary-hover, #0F2D6B);
  color: #FFFFFF;
  text-decoration: none;
}

/*
 * #16 — PDP Description-tabs segmented-control styling.
 * Parent has no rules for .woocommerce-tabs .tabs, so default WC styling
 * (themes/woocommerce/templates/single-product/tabs/tabs.php with its
 * underline + before/after pseudos) is in effect. Override here.
 */
.woocommerce-tabs .tabs.wc-tabs,
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid var(--plx-border, #E1E5EB);
}
.woocommerce-tabs .tabs li,
.woocommerce-tabs ul.tabs li {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: color var(--plx-transition, 150ms ease);
  position: relative;
}
.woocommerce-tabs .tabs li::before,
.woocommerce-tabs .tabs li::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}
.woocommerce-tabs .tabs li a,
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 20px;
  color: var(--plx-muted, #64748B);
  font-weight: var(--plx-weight-medium, 500);
  text-decoration: none;
  transition: color var(--plx-transition, 150ms ease);
}
.woocommerce-tabs .tabs li:hover a,
.woocommerce-tabs ul.tabs li:hover a {
  color: var(--plx-primary, #1E50A0);
  text-decoration: none;
}
.woocommerce-tabs .tabs li.active,
.woocommerce-tabs ul.tabs li.active {
  border-bottom: 3px solid var(--plx-primary, #1E50A0);
  margin-bottom: -1px;
}
.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs ul.tabs li.active a {
  color: var(--plx-primary, #1E50A0);
  font-weight: var(--plx-weight-semibold, 600);
}

/*
 * #19 — Mobile homepage hero / CTA-stack gap.
 * Speculative selectors per the operator brief — the current front-page
 * hero only renders one CTA, but if a second CTA is added later or another
 * page uses the same class names, this guarantees breathing room.
 */
@media (max-width: 480px) {
  .peptalux-landing-hero__actions,
  .hero__cta-group,
  [class*="hero"] .button-group {
    gap: 12px;
  }
  .peptalux-landing-hero__actions .button + .button,
  .hero__cta-group .button + .button {
    margin-top: 12px;
  }
}

/*
 * Add-to-Cart loading state (paired with assets/js/plx-add-to-cart-loading.js).
 */
.single_add_to_cart_button.plx-loading {
  opacity: .7;
  cursor: wait;
  pointer-events: none;
}


/* ─── PLX-POLISH: smooth scroll + PDP section fade-up ─────────────────────── */
html {
  scroll-behavior: smooth;
}

/* PDP info sections fade up on scroll-in (uses IntersectionObserver from JS) */
.peptalux-product-section-v2 {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.peptalux-product-section-v2.plx-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .peptalux-product-section-v2 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ─── PLX-FOOTER-5COL: override parent's 4-col footer grid to 5 cols ──────── */
.plx-footer__grid {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 36px;
}

/* Business hours under phone in Customer Support col */
.plx-footer__hours {
  color: rgba(255,255,255,.55);
  margin-top: 14px !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Secure Checkout badge — brighter so it reads on dark bg */
.plx-footer__secure {
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* Responsive: stack to 3 cols at tablet, 1 at mobile */
@media (max-width: 1024px) {
  .plx-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .plx-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* ─── PLX-WHY: 'Why PeptaLux' 4-card grid on homepage ─────────────────────── */
.peptalux-landing-why {
  padding: 80px 0 64px;
  background: #fff;
}
.peptalux-landing-why__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.peptalux-landing-why__header h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 12px 0 14px;
  color: var(--plx-text, #0f172a);
  letter-spacing: -0.01em;
}
.peptalux-landing-why__header p {
  color: var(--plx-muted, #64748B);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
.peptalux-landing-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.peptalux-landing-why__card {
  background: #F8FAFC;
  border: 1px solid var(--plx-border, #E1E5EB);
  border-radius: 14px;
  padding: 28px 24px;
  transition: transform var(--plx-transition, .2s ease), box-shadow var(--plx-transition, .2s ease), border-color var(--plx-transition, .2s ease);
}
.peptalux-landing-why__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--plx-shadow-lg, 0 12px 32px rgba(15,23,42,.08));
  border-color: var(--plx-primary, #1E50A0);
}
.peptalux-landing-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(30, 80, 160, 0.08);
  color: var(--plx-primary, #1E50A0);
  margin-bottom: 16px;
}
.peptalux-landing-why__card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--plx-text, #0f172a);
  letter-spacing: -0.005em;
}
.peptalux-landing-why__card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--plx-muted, #64748B);
  margin: 0;
}

/* Responsive: 2 cols at tablet, 1 at mobile */
@media (max-width: 1024px) {
  .peptalux-landing-why__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .peptalux-landing-why { padding: 60px 0 48px; }
  .peptalux-landing-why__header h2 { font-size: 28px; }
}
@media (max-width: 600px) {
  .peptalux-landing-why__grid { grid-template-columns: 1fr; }
  .peptalux-landing-why { padding: 48px 0 36px; }
  .peptalux-landing-why__header h2 { font-size: 24px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Polish: primary-button text contrast (Chase QA).
   Parent .plx-btn--primary sets color:#fff but loses specificity to
   anchor-context rules in some places — force white text in all states.
   ────────────────────────────────────────────────────────────────────── */
.plx-btn--primary,
a.plx-btn--primary,
.plx-btn--primary:link,
.plx-btn--primary:visited,
.plx-btn--primary:hover,
.plx-btn--primary:focus,
.plx-btn--primary:active {
  color: #fff !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Generic accordion component — wraps native <details>.
   Used by the RUO disclaimer block on PDPs; reusable for Phase 7
   PDP accordions (Description / Specifications / Shipping). Native
   element so the disclosure is reachable even with JS disabled.
   ────────────────────────────────────────────────────────────────────── */
.plx-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plx-primary, #1E50A0);
}
.plx-accordion__summary::-webkit-details-marker,
.plx-accordion__summary::marker { display: none; }
.plx-accordion__title { flex: 1; }
.plx-accordion__chevron {
  display: inline-flex;
  align-items: center;
  transition: transform .2s ease;
  color: var(--plx-primary, #1E50A0);
}
.plx-accordion[open] .plx-accordion__chevron { transform: rotate(180deg); }
.plx-accordion__content { padding-top: 12px; }

/* ──────────────────────────────────────────────────────────────────────
   Polish: WooCommerce ATC success message (Chase QA).
   Stack "View cart" button below message text on mobile, beside on
   desktop. Style as primary-blue button matching the site language.
   ────────────────────────────────────────────────────────────────────── */
.woocommerce-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}
.woocommerce-message > a.button.wc-forward {
  order: 2;
  margin: 0;
  padding: 10px 18px;
  background: var(--plx-primary, #1E50A0);
  color: #fff !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .15s ease;
}
.woocommerce-message > a.button.wc-forward:hover,
.woocommerce-message > a.button.wc-forward:focus {
  background: var(--plx-primary-hover, #0F2D6B);
  color: #fff !important;
}
@media (max-width: 600px) {
  .woocommerce-message {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-message > a.button.wc-forward {
    width: 100%;
    text-align: center;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Phase 5: View COA button on PDPs.
   Secondary/outline style — primary blue stays reserved for ATC. The
   wrap + nested icon/label scaffold supports a future upgrade to a
   thumbnail-plus-button layout (David's option c) without breaking
   the existing caller signature.
   ────────────────────────────────────────────────────────────────────── */
.plx-coa-btn-wrap {
  margin: 14px 0 18px;
}
.plx-coa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--plx-primary, #1E50A0);
  border-radius: 8px;
  background: #fff;
  color: var(--plx-primary, #1E50A0);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.plx-coa-btn:hover,
.plx-coa-btn:focus {
  background: var(--plx-primary, #1E50A0);
  color: #fff;
  border-color: var(--plx-primary, #1E50A0);
}
.plx-coa-btn__icon {
  display: inline-flex;
  align-items: center;
}

/* ──────────────────────────────────────────────────────────────────────
   Phase 7: PDP accordion stack — Description / Specifications / Sources
   & Citations / Shipping & Returns. Reuses .plx-accordion (native
   <details>) from the Chase polish bundle; adds spacing + dividers for
   the PDP-specific stack layout.
   ────────────────────────────────────────────────────────────────────── */
.plx-pdp-accordion-stack {
  margin: 32px 0 24px;
  border-top: 1px solid var(--plx-border, #E1E5EB);
}
.plx-pdp-accordion {
  border-bottom: 1px solid var(--plx-border, #E1E5EB);
}
.plx-pdp-accordion .plx-accordion__summary {
  padding: 16px 0;
}
.plx-pdp-accordion .plx-accordion__content {
  padding: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--plx-body, #1A1A1A);
}
.plx-pdp-accordion .plx-accordion__content p {
  margin: 0 0 10px;
}
.plx-pdp-accordion .plx-accordion__content p:last-child {
  margin-bottom: 0;
}
.plx-pdp-accordion .plx-accordion__content a {
  color: var(--plx-primary, #1E50A0);
  text-decoration: underline;
}
.plx-pdp-accordion .plx-accordion__content a:hover {
  color: var(--plx-primary-hover, #0F2D6B);
}

/* Sub-headings inside the Shipping & Returns accordion */
.plx-pdp-sub-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--plx-body, #1A1A1A);
  margin: 16px 0 6px;
}
.plx-pdp-sub-heading:first-child { margin-top: 0; }

/* Specifications DL + Sources UL — parallel scope of the .peptalux-section-*
   rules (which were scoped to .peptalux-product-section-v2 and no longer
   match after Phase 7). Same visual treatment. */
.plx-pdp-accordion .peptalux-section-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
  row-gap: 6px;
  margin: 0;
  font-size: 13.5px;
}
.plx-pdp-accordion .peptalux-section-dl dt {
  font-weight: 600;
  color: var(--plx-charcoal, #3D3D3D);
}
.plx-pdp-accordion .peptalux-section-dl dd {
  margin: 0;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
}
.plx-pdp-accordion .peptalux-section-sources {
  margin: 0;
  padding-left: 20px;
}
.plx-pdp-accordion .peptalux-section-sources li {
  margin-bottom: 4px;
}

@media (max-width: 480px) {
  .plx-pdp-accordion .peptalux-section-dl {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .plx-pdp-accordion .peptalux-section-dl dt {
    margin-top: 4px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Chase polish #2 (item 4): hide cart line-item "Unit Price" column on
   mobile. At qty=1 the unit price and the line subtotal are identical
   and feel duplicated in the stacked mobile layout (parent converts the
   cart table to stacked blocks at ≤980px). Desktop is unchanged — both
   columns continue to render at >600px where the layout has the space
   and the unit price is useful reference info.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .woocommerce-cart-form .product-price {
    display: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Chase polish #2 (item 5): visual hierarchy on the cart totals table.
   Total stays present (correct WC behavior — differs from Subtotal once
   tax/shipping/discount apply) but gets a stronger treatment: brand-blue
   color + 2px separator above. The hierarchy reads correctly even when
   Subtotal and Total numbers temporarily match (no shipping calculated).
   Same selector specificity as parent custom.css:1208; child loads after
   parent so wins on declared properties.
   ────────────────────────────────────────────────────────────────────── */
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total th {
  font-size: 17px;
  font-weight: 700;
  color: var(--plx-primary, #1E50A0);
  border-top: 2px solid var(--plx-border, #E1E5EB);
  padding-top: 12px;
}