/**
 * Theme Name: Naturally Child - Pro Peptide
 * Description: Pro Peptide custom child theme built on Naturally by Ninetheme.
 * Author: Pro Peptide
 * Template: naturally
 * Version: 5.5.5
 * Text Domain: pro-peptide
 */


/* ==========================================================================
   1. CUSTOM PROPERTIES — BRAND TOKENS
   ========================================================================== */

:root {
    /* =============================================
       Parent theme variable overrides (Naturally)
       Aligned to DESIGN.md v4: dark structure #343434, primary blue #1f9edb.
       ============================================= */
    --font-primary: 'Montserrat', 'DM Sans', sans-serif;
    --font-secondary: 'Montserrat', 'Space Grotesk', sans-serif;
    --color-text: #343434;
    --color-primary: #343434;
    --color-primary-tint: #4a4a4a;
    --color-primary-shade: #2a2a2a;
    --color-secondary: #1f9edb;
    --color-secondary-tint: #5fb8e6;
    --color-secondary-shade: #1683b8;
    --color-grey1: #fafafa;
    --color-grey2: #E5E7EB;
    --color-grey2-shade: #D1D5DB;
    --color-grey3: #6B7280;
    --color-grey3-tint: #9CA3AF;

    /* =============================================
       PRO PEPTIDE — DESIGN SYSTEM TOKENS (v4)
       Primary: light blue. Secondary: purple. Accent/CTA: red.
       Source of truth: DESIGN.md v4 (May 4, 2026)
       ============================================= */

    /* === PRIMARY: Light Blue (Brand Identity) === */
    --pp-blue: #1f9edb;
    --pp-blue-text: #0e6a99;
    --pp-blue-tint: #E8F4FB;
    --pp-blue-tint-hover: #D5EBF6;
    --pp-blue-active: #0e6a99;       /* darkest state of blue button per v4 secondary spec */

    /* === SECONDARY: Purple === */
    --pp-purple: #9b7aef;
    --pp-purple-text: #5e3fb5;
    --pp-purple-tint: #F1ECFB;
    --pp-purple-tint-hover: #E5DCF7;

    /* === ACCENT/CTA: Red (also Performance + Growth category) === */
    --pp-red: #ef4444;
    --pp-red-text: #c0384a;
    --pp-red-tint: #FDE8EA;
    --pp-red-tint-hover: #FAD5D8;

    /* === CATEGORY: Green (Healing + Recovery) === */
    --pp-green: #7ccf4a;
    --pp-green-text: #4e9c2a;
    --pp-green-tint: #EAF7DF;

    /* === CATEGORY: Orange (Weight + Metabolism) === */
    --pp-orange: #f97316;
    --pp-orange-text: #c2410c;
    --pp-orange-tint: #FEEAD8;

    /* === DARK: Structure === */
    --pp-dark: #343434;
    --pp-dark-mid: #4a4a4a;
    --pp-dark-hover: #2a2a2a;

    /* === TEXT === */
    --pp-text: #343434;
    --pp-text-light: #fafafa;
    --pp-text-secondary: #6B7280;
    --pp-text-tertiary: #9CA3AF;
    --pp-text-on-dark: #fafafa;
    --pp-text-link: #0e6a99;
    --pp-text-link-hover: #1f9edb;

    /* === SURFACES === */
    --pp-bg: #FFFFFF;
    --pp-bg-secondary: #fafafa;
    --pp-bg-tertiary: #F3F4F6;
    --pp-bg-product: #FFFFFF;

    /* === BORDERS === */
    --pp-border: #E5E7EB;
    --pp-border-soft: #F3F4F6;
    --pp-border-hover: #D1D5DB;
    --pp-border-focus: #1f9edb;
    --pp-border-error: #ef4444;

    /* === STATUS COLORS === */
    --pp-success: #7ccf4a;
    --pp-success-tint: #EAF7DF;
    --pp-warning: #F59E0B;
    --pp-warning-tint: #FEF3C7;
    --pp-error: #ef4444;
    --pp-error-tint: #FDE8EA;

    /* === DISABLED / INACTIVE === */
    --pp-disabled-bg: #F3F4F6;
    --pp-disabled-text: #9CA3AF;
    --pp-disabled-border: #E5E7EB;

    /* === STAR RATINGS === */
    --pp-stars: #1f9edb;
    --pp-stars-empty: #E5E7EB;

    /* === SHADOWS (rebased on new dark #343434 = rgb(52,52,52)) === */
    --pp-shadow-sm: 0 1px 2px rgba(52, 52, 52, 0.05);
    --pp-shadow: 0 4px 12px rgba(52, 52, 52, 0.08);
    --pp-shadow-md: 0 4px 12px rgba(52, 52, 52, 0.08);
    --pp-shadow-lg: 0 8px 24px rgba(52, 52, 52, 0.12);
    --pp-shadow-card: 0 4px 20px rgba(52, 52, 52, 0.06);
    --pp-shadow-hover: 0 8px 25px rgba(52, 52, 52, 0.15);
    --pp-shadow-focus: 0 0 0 3px rgba(31, 158, 219, 0.25);
    --pp-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.2);

    /* === BORDER RADIUS (v4 spec: 6 badges / 12 components / 16 cards) === */
    --pp-radius-sm: 6px;             /* badges (Option C bordered) */
    --pp-radius: 12px;               /* unsuffixed alias */
    --pp-radius-md: 12px;            /* buttons, inputs, dropdowns, tooltips, notices */
    --pp-radius-lg: 16px;            /* product cards, blog cards, modals */
    --pp-radius-pill: 9999px;        /* toggle tracks, dosage chip */
    --pp-radius-full: 9999px;        /* compat alias */

    /* === Z-INDEX SCALE === */
    --pp-z-dropdown: 100;
    --pp-z-sticky: 200;
    --pp-z-modal: 300;
    --pp-z-tooltip: 400;

    /* === TRANSITIONS === */
    --pp-transition: 0.2s ease;
    --pp-transition-slow: 0.3s ease;

    /* =============================================
       Backward-compat aliases.
       Old variable names mapped to v4 semantic equivalents.
       Old "purple was primary" hovers/actives now resolve to blue (the new primary).
       ============================================= */

    /* Old purple variants — purple was primary in v3, blue is primary in v4.
       These now follow the v4 secondary purple #9b7aef so the --pp-purple-*
       family stays internally consistent. Call sites using these as "brand
       primary" need migration to --pp-blue / --pp-blue-text in the 2B sweep. */
    --pp-purple-hover: #7c5fd6;       /* v4 tertiary button hover */
    --pp-purple-active: #5e3fb5;      /* v4 tertiary button active (= --pp-purple-text) */
    --pp-purple-light: #c1a9f5;       /* lighter shade of new purple */

    /* Old ice-blue variants. */
    --pp-blue-mid: #1f9edb;
    --pp-blue-dark: #0e6a99;
    --pp-blue-hover: #1683b8;

    /* Old red variants */
    --pp-red-hover: #dc2626;
    --pp-red-active: #b91c1c;

    /* Old "primary == dark" alias preserved */
    --pp-primary: var(--pp-dark);

    /* Old "accent" naming */
    --pp-accent: var(--pp-blue);
    --pp-accent-text: var(--pp-blue-text);
    --pp-accent-hover: #1683b8;
    --pp-accent-mint: #5fb8e6;

    /* Off-white text helpers (kept for legacy call sites) */
    --pp-text-on-purple: #fafafa;
    --pp-text-on-red: #fafafa;
    --pp-text-on-blue-mid: #fafafa;
    --pp-text-on-blue-light: #343434;

    --pp-green-hover: #4e9c2a;

    --pp-background: var(--pp-bg);
    --pp-off-white: var(--pp-bg-secondary);
    --pp-light-gray: var(--pp-border);
    --pp-medium-gray: var(--pp-text-secondary);

    /* Info legacy (now blue per v4 notice spec) */
    --pp-info: #1f9edb;
    --pp-info-tint: #E8F4FB;

    /* Typography — v4: Montserrat single-family, 3 weights (400/500/600). */
    --pp-font-primary: 'Montserrat', 'DM Sans', sans-serif;
    --pp-font-heading: 'Montserrat', 'Space Grotesk', sans-serif;

    /* Font Sizes (v6: stepwise desktop values; mobile overrides via @media below :root) */
    --pp-hero-h1: 40px;             /* H1 desktop */
    --pp-section-h2: 32px;           /* H2 desktop */
    --pp-h3: 24px;                   /* H3 desktop (v6 token) */
    --pp-h4: 20px;                   /* H4 desktop (v6 token) */
    --pp-body: 16px;
    --pp-body-lg: 18px;
    --pp-card-price: 17px;           /* v6: product card price size */
    --pp-detail-price: 28px;         /* v6: product detail page price size */
    --pp-btn: 14px;
    --pp-menu: 15px;
    --pp-menu-sm: 13px;
    --pp-small: 13px;
    --pp-xs: 11px;

    /* Spacing */
    --pp-section-pad: clamp(40px, 5vw, 60px);
    --pp-container: 1440px;
    --pp-gap: 30px;
    --pp-gap-sm: 16px;
}


/* v6: Stepwise mobile typography overrides — every heading drops one step */
@media (max-width: 768px) {
    :root {
        --pp-hero-h1: 32px;          /* H1 mobile */
        --pp-section-h2: 24px;        /* H2 mobile */
        --pp-h3: 20px;                /* H3 mobile */
        --pp-h4: 18px;                /* H4 mobile */
        --pp-body: 15px;              /* body mobile */
        --pp-card-price: 15px;        /* card price mobile */
        --pp-detail-price: 24px;      /* detail price mobile */
    }
}


/* ==========================================================================
   1b. WIDER CONTAINER + GLOBAL PADDING
   ========================================================================== */

/* Override parent theme's 1220px container — site-wide content width target */
.container {
    max-width: 1280px;
}
@media (min-width: 768px) {
    .container {
        padding-left: 48px;
        padding-right: 48px;
    }
}
@media (min-width: 1200px) {
    .container {
        padding-left: 64px;
        padding-right: 64px;
    }
}

/* WooCommerce content areas — match the global 1280px width so cart,
   checkout, my-account, and order-received line up with the shop, single
   product, and content pages. Inner forms (form.pp-checkout, account
   widgets) are sized via their own max-widths beneath this container. */
.woocommerce .container,
.woocommerce-page .container {
    max-width: 1280px;
}

/* Single product page — narrower per UX decision (1280 target) */
.single-product .container {
    max-width: 1280px;
}

/* Shop archive grid — narrower per UX decision (1280 target) */
.post-type-archive-product .container,
.tax-product_cat .container {
    max-width: 1280px;
}

/* PDP wrapper — the single product template uses .ppx-wrap (not .container)
   so the .single-product .container rule above doesn't catch it. Constrain
   here to keep PDPs aligned with the homepage container at 1440px. */
.single-product .ppx-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
@media (min-width: 1200px) {
    .single-product .ppx-wrap {
        padding-left: 64px;
        padding-right: 64px;
    }
}

/* Global section padding boost */
.section {
    padding-left: 24px;
    padding-right: 24px;
}
@media (min-width: 768px) {
    .section {
        padding-left: 40px;
        padding-right: 40px;
    }
}


/* ==========================================================================
   1c. ELEMENTOR HEADER ALIGNMENT
   ========================================================================== */

/* Header is rendered via Elementor Pro "header" theme location, so its
   inner content width is set by the Elementor template, not by .container.
   Force the header inner container to mirror .ppx-wrap (1280px outer, 24/64
   side padding) so logo/nav/cart line up with PDP breadcrumb + content. */
.elementor-location-header .elementor-section > .elementor-container,
.elementor-location-header .e-con > .e-con-inner,
.elementor-location-header > .e-con > .e-con-inner {
    max-width: 1280px !important;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
@media (min-width: 1200px) {
    .elementor-location-header .elementor-section > .elementor-container,
    .elementor-location-header .e-con > .e-con-inner,
    .elementor-location-header > .e-con > .e-con-inner {
        padding-left: 64px;
        padding-right: 64px;
    }
}


/* Global top padding */
.nt-theme-content,
.site-content {
    padding-top: 16px;
}


/* ==========================================================================
   2. GLOBAL RESETS & BASE TYPOGRAPHY
   ========================================================================== */

html {
    height: 100%;
}

body {
    font-family: var(--pp-font-primary);
    font-size: var(--pp-body);
    line-height: 1.7;
    color: var(--pp-text);
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Background lock — force the site canvas to pure white. Overrides any parent
   theme, Elementor kit, customizer, or plugin that tries to tint the body or
   the wrapping containers. Component-level surfaces (cards, header pills,
   buttons) keep their own colors via their own selectors. */
html,
body,
#nt-page,
.nt-theme-content,
.site,
.site-content,
#page,
.elementor-default {
    background-color: #FFFFFF !important;
}

/* Push footer to bottom */
#nt-page,
.nt-theme-content,
.site-content,
main,
.pp-section,
.error-404,
.not-found,
body.error404 .container,
body.error404 .nt-theme-inner-container {
    flex: 1 0 auto;
}

.pp-footer {
    flex-shrink: 0;
    margin-top: auto;          /* hard-pin to viewport bottom on short pages */
    margin-bottom: 0 !important;
}

/* Kill any trailing space below footer */
body > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pp-font-heading);
    color: var(--pp-primary);
    line-height: 1.2;
    margin-top: 0;
}

h1 { font-size: var(--pp-hero-h1); font-weight: 700; }
h2 { font-size: var(--pp-section-h2); font-weight: 600; }
h3 { font-size: var(--pp-h3); font-weight: 600; }
h4 { font-size: var(--pp-h4); font-weight: 500; }

/* v6: Section heading utility — centered with horizontal lines extending sides.
   Use as <h2 class="pp-section-heading">Featured Compounds</h2> on major page sections. */
.pp-section-heading {
    display: flex;
    align-items: center;
    text-align: center;
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: var(--pp-section-h2);
    color: var(--pp-dark);
    line-height: 1.2;
    margin: 0 0 32px;
}
.pp-section-heading::before,
.pp-section-heading::after {
    content: '';
    flex: 1 1 0%;
    height: 1px;
    background: var(--pp-border);
}
.pp-section-heading::before { margin-right: 24px; }
.pp-section-heading::after  { margin-left: 24px; }
@media (max-width: 768px) {
    .pp-section-heading::before { margin-right: 16px; }
    .pp-section-heading::after  { margin-left: 16px; }
}

p {
    margin-top: 0;
    margin-bottom: 1em;
    color: var(--pp-text);
}

a {
    color: var(--pp-accent-text);
    text-decoration: none;
    transition: color var(--pp-transition);
}

a:hover {
    color: var(--pp-accent-hover);
}

::selection {
    background: var(--pp-blue);
    color: #FFFFFF;
}

img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */

.pp-container {
    max-width: var(--pp-container);
    margin: 0 auto;
    padding: 0 24px;
}

.pp-section {
    padding: var(--pp-section-pad) 0;
}

.pp-section-alt {
    background: var(--pp-off-white);
}

/* Removed: blanket white-background rule for `.page-template-template-homepage section`.
   That selector had specificity (0,1,1) and was overriding the per-section
   backgrounds in pp-home.css (.pp-home-email dark gradient, .pp-home-reviews
   slate, etc.) — every `<section>` was rendering white. The legacy classes
   (.pp-section-alt, .pp-daily-drop-strip, etc.) come from the pre-redesign
   shortcode homepage and aren't used by the new template-parts/home/* sections,
   so the entire ruleset is dead code as of this commit. */

/* Shop page: pure white background everywhere */
.woocommerce-page,
.post-type-archive-product,
.woocommerce-page .pp-section-alt,
.woocommerce-page section,
.woocommerce-page .section,
.woocommerce-page .shop-hero,
.post-type-archive-product .pp-section-alt,
.post-type-archive-product section,
.post-type-archive-product .section,
.post-type-archive-product .shop-hero {
    background: #ffffff !important;
}

.pp-section-navy {
    background: var(--pp-primary);
    color: #fff;
}

.pp-section-navy h2,
.pp-section-navy h3,
.pp-section-navy h4,
.pp-section-navy p {
    color: #fff;
}

.pp-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.pp-section-header h2 {
    margin-bottom: 12px;
}

/* Line-through heading style */
.pp-section-header h2 {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.pp-section-header h2::before,
.pp-section-header h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--pp-border, #E5E7EB);
}

.pp-section-header p {
    color: var(--pp-medium-gray);
    font-size: var(--pp-body-lg);
    max-width: 600px;
    margin: 0 auto;
}

/* Allow flanked headings inside product descriptions to use full column width.
   Default .pp-section-header h2 is capped at 50%, which is too narrow inside
   the WC description tab column. */
.ppx-tabs__panel-body .pp-section-header h2,
.woocommerce-Tabs-panel .pp-section-header h2,
.woocommerce-product-details__short-description .pp-section-header h2 {
    max-width: 100%;
}

/* Force the subtitle paragraph to render centered. Some product-description
   contexts override the inherited text-align from .pp-section-header. */
.ppx-tabs__panel-body .pp-section-header p,
.woocommerce-Tabs-panel .pp-section-header p,
.woocommerce-product-details__short-description .pp-section-header p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Brand-blue flanking lines on product description section headings
   (instead of the default --pp-border light gray). */
.ppx-tabs__panel-body .pp-section-header h2::before,
.ppx-tabs__panel-body .pp-section-header h2::after,
.woocommerce-Tabs-panel .pp-section-header h2::before,
.woocommerce-Tabs-panel .pp-section-header h2::after,
.woocommerce-product-details__short-description .pp-section-header h2::before,
.woocommerce-product-details__short-description .pp-section-header h2::after {
    background: var(--pp-blue);
}

.pp-text-center {
    text-align: center;
}

.pp-text-right {
    text-align: right;
}

.pp-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pp-gap);
}

.pp-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pp-gap);
}

.pp-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pp-gap);
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

/* v6 button base — medium is default. White text on ALL colored/dark variants. */
.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--pp-font-primary);
    font-size: var(--pp-btn);
    font-weight: 600;
    padding: 10px 24px;             /* v6 medium */
    border-radius: var(--pp-radius-md);
    border: 1.5px solid transparent; /* v6: 1.5px not 2px */
    cursor: pointer;
    transition: all var(--pp-transition);
    text-decoration: none;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Disabled state — applies to ALL variants */
.pp-btn:disabled,
.pp-btn[disabled],
.pp-btn.is-disabled {
    background: var(--pp-disabled-bg) !important;
    color: var(--pp-disabled-text) !important;
    border-color: var(--pp-disabled-bg) !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

.pp-btn svg {
    transition: transform var(--pp-transition);
}

.pp-btn:hover svg {
    transform: translateX(3px);
}

/* Primary — red */
.pp-btn-primary {
    background: var(--pp-red);
    color: #FFFFFF;
    border-color: var(--pp-red);
}

.pp-btn-primary:hover {
    background: var(--pp-red-hover);
    border-color: var(--pp-red-hover);
    color: #fff;
    box-shadow: var(--pp-shadow);
}

/* Secondary — purple */
.pp-btn-secondary {
    background: var(--pp-blue);
    color: #FFFFFF;
    border-color: var(--pp-blue);
}

.pp-btn-secondary:hover {
    background: var(--pp-blue-hover);
    border-color: var(--pp-blue-hover);
    color: #fff;
    box-shadow: var(--pp-shadow);
}

/* Tertiary — blue mid */
.pp-btn-tertiary {
    background: var(--pp-blue-mid);
    color: #FFFFFF;
    border-color: var(--pp-blue-mid);
}

.pp-btn-tertiary:hover {
    background: var(--pp-blue-hover);
    border-color: var(--pp-blue-hover);
    color: #fff;
    box-shadow: var(--pp-shadow);
}

/* Dark — navy */
.pp-btn-dark {
    background: var(--pp-primary);
    color: #fff;
    border-color: var(--pp-primary);
}

.pp-btn-dark:hover {
    background: var(--pp-dark-mid);
    border-color: var(--pp-dark-mid);
    color: #fff;
    box-shadow: var(--pp-shadow);
}

/* Outline */
.pp-btn-outline {
    background: transparent;
    color: var(--pp-primary);
    border-color: var(--pp-light-gray);
}

.pp-btn-outline:hover {
    border-color: var(--pp-primary);
    color: var(--pp-primary);
    background: var(--pp-off-white);
}

.pp-hero .pp-btn-outline {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    background: transparent;
}
.pp-hero .pp-btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

/* White outline (on dark bg) */
.pp-btn-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.pp-btn-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
}

/* === v6 size variants (medium is the .pp-btn default) === */
.pp-btn-sm {
    padding: 6px 14px;
    font-size: 12px;
    gap: 6px;
}
.pp-btn-md {
    padding: 10px 24px;
    font-size: 14px;
}
.pp-btn-lg {
    padding: 14px 32px;
    font-size: 16px;
}

/* === v6 ghost variants — must be paired with a filled CTA, never alone === */

/* Ghost on dark backgrounds (hero secondary, dark section links).
   .pp-btn-white kept as a backward-compat alias for legacy markup. */
.pp-btn-ghost-dark,
.pp-btn-white {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.35);
}
.pp-btn-ghost-dark:hover,
.pp-btn-white:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
}

/* Ghost on light backgrounds (product page secondary, blog footers) */
.pp-btn-ghost-light {
    background: transparent;
    color: var(--pp-text);
    border-color: var(--pp-border-hover);
}
.pp-btn-ghost-light:hover {
    background: var(--pp-bg-secondary);
    border-color: var(--pp-text-tertiary);
    color: var(--pp-text);
}

/* === v6 soft variants — gentle brand actions === */

/* Soft purple — compound guide on product detail, brand info chips */
.pp-btn-soft-purple {
    background: var(--pp-blue-tint);
    color: var(--pp-blue-text);
    border-color: rgba(31, 158, 219, 0.18);
}
.pp-btn-soft-purple:hover {
    background: #EBE6F2;
    border-color: rgba(31, 158, 219, 0.30);
    color: var(--pp-blue-text);
}

/* Soft blue — info actions, secondary trust callouts */
.pp-btn-soft-blue {
    background: var(--pp-blue-tint);
    color: var(--pp-blue-text);
    border-color: rgba(90, 175, 224, 0.20);
}
.pp-btn-soft-blue:hover {
    background: var(--pp-blue-tint-hover);
    border-color: rgba(90, 175, 224, 0.35);
    color: var(--pp-blue-text);
}


/* ==========================================================================
   5. TRUST BAR (above navigation)
   ========================================================================== */

/* Native topbar previously hidden because pp_trust_bar_top acted as a replacement.
   Now that pp_trust_bar_top is gone, the parent's topbar (phone + Search + My Account)
   should render — leave it alone. */

.pp-trust-bar-top {
    background: var(--pp-blue-tint);
    color: var(--pp-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 0;
}

.pp-trust-bar-top .pp-trust-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    max-width: var(--pp-container);
    margin: 0 auto;
    padding: 0 24px;
}

.pp-trust-bar-search {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    min-width: 200px;
}

.pp-trust-bar-search .pp-search-form {
    width: 100%;
    max-width: 400px;
}

.pp-trust-bar-top .pp-search-form {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 0 10px;
    gap: 6px;
    height: 40px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pp-trust-bar-top .pp-search-form:focus-within {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

.pp-trust-bar-top .pp-search-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.8);
}

.pp-trust-bar-top .pp-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--pp-font-primary);
    font-size: 15px;
    color: #fff;
    padding: 0;
    line-height: 1;
    text-align: center;
}

.pp-trust-bar-top .pp-search-input::placeholder {
    color: #FFFFFF !important;
    opacity: 1 !important;
    font-weight: 400;
    -webkit-text-fill-color: #FFFFFF;
}

.pp-search-btn {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    padding: 0;
}

.pp-search-btn:hover {
    opacity: 0.7;
}

.pp-trust-bar-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    flex: 1 1 0;
}

.pp-trust-bar-top .pp-trust-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.pp-trust-bar-top .pp-trust-bar-item svg {
    width: 18px;
    height: 18px;
    stroke: #FEFCE8;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
}

.pp-trust-bar-top .pp-trust-bar-separator {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
}


/* ==========================================================================
   6. NAVIGATION & HEADER
   ========================================================================== */

/* Override parent theme header */
.nt-header,
.header-area,
#nt-header {
    background: var(--pp-background) !important;
    box-shadow: var(--pp-shadow-sm);
    border-bottom: 1px solid var(--pp-light-gray);
}

/* Header inner — align logo and nav vertically */
.nt-header .container,
#nt-header .container {
    display: flex;
    align-items: center;
}

/* Logo treatment: Image logo */
/* Hide the sticky/duplicate logo — only show the static (left) logo */
.sticky-logo.header_logo {
    display: none !important;
}

.header_logo,
#nt-logo {
    display: flex;
    align-items: center;
}
.header_logo .headline_title,
#nt-logo .headline_title {
    display: flex;
    align-items: center;
}

.pp-logo-img {
    height: 70px;
    width: auto;
    display: block;
    max-width: 360px;
    object-fit: contain;
}

/* Search bar styles now in .pp-trust-bar-top */

/* Main nav links */
.nt-header .nav > li > a,
.header-area .nav > li > a,
.navbar-nav > li > a,
#nt-header nav a {
    font-family: var(--pp-font-primary);
    font-size: var(--pp-menu);
    font-weight: 500;
    color: var(--pp-text);
    text-transform: none;
    letter-spacing: 0;
    transition: color var(--pp-transition);
    padding: 8px 16px;
}

.nt-header .nav > li > a:hover,
.header-area .nav > li > a:hover,
.navbar-nav > li > a:hover,
#nt-header nav a:hover {
    color: var(--pp-blue);
}

/* v6: Active nav item — purple text + 2px bottom border (matches tab style) */
.nt-header .nav > li.current-menu-item > a,
.nt-header .nav > li.current_page_item > a,
.nt-header .nav > li.current-menu-ancestor > a,
.header-area .nav > li.current-menu-item > a,
.header-area .nav > li.current_page_item > a,
.header-area .nav > li.current-menu-ancestor > a,
.navbar-nav > li.current-menu-item > a,
.navbar-nav > li.current_page_item > a,
.navbar-nav > li.current-menu-ancestor > a {
    color: var(--pp-blue);
    border-bottom: 2px solid var(--pp-blue);
    padding-bottom: 6px;            /* compensate for the 2px border so links don't shift on activation */
}

/* Sticky header */
.header-sticky.is-sticky,
.sticky-header {
    background: var(--pp-background) !important;
    box-shadow: var(--pp-shadow);
}

/* Mega menu dropdown */
.pp-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--pp-background);
    border-top: 2px solid var(--pp-accent);
    box-shadow: var(--pp-shadow-lg);
    padding: 30px;
    display: none;
    z-index: 1000;
    border-radius: 0 0 var(--pp-radius-lg) var(--pp-radius-lg);
}

.pp-mega-menu-trigger:hover .pp-mega-menu {
    display: block;
}

.pp-mega-menu a {
    display: block;
    padding: 8px 12px;
    color: var(--pp-text);
    font-size: var(--pp-menu-sm);
    font-weight: 500;
    border-radius: var(--pp-radius-sm);
    transition: all var(--pp-transition);
}

.pp-mega-menu a:hover {
    background: var(--pp-off-white);
    color: var(--pp-accent-text);
    padding-left: 16px;
}

/* Language switcher */
.pp-lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--pp-menu-sm);
    font-weight: 600;
}

.pp-lang-switcher .active {
    color: var(--pp-accent-text);
}

.pp-lang-switcher a {
    color: var(--pp-medium-gray);
    padding: 4px 6px;
}

.pp-lang-switcher a:hover {
    color: var(--pp-primary);
}


/* ==========================================================================
   7. HERO SECTION
   ========================================================================== */

/* v6 dark hero — bg #343434 (was near-black #0a0a0a). No dark overlay; the
   video and image render full-bleed without tint. */
/* Height tuned to the hero image's 2.36:1 aspect ratio (1584x672) so the image
   fills width without vertical cropping at common viewport sizes. */
.pp-hero,
.elementor .pp-hero,
.elementor-widget-container .pp-hero {
    background: var(--pp-dark) !important;
    padding: clamp(40px, 6vw, 90px) 0;
    overflow: hidden;
    position: relative;
    min-height: clamp(380px, 42vw, 620px);
    display: flex;
    align-items: center;
}

/* Hero video — full-bleed, no mask. */
.pp-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Hero image — same full-bleed treatment, no tint, no filter. */
.pp-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    filter: none;
    opacity: 1;
}

/* Hero base color — fallback if the video fails to load. */
.pp-hero,
.elementor .pp-hero,
.elementor-widget-container .pp-hero {
    background: #0F1117 !important;
}

/* Soft white glow under any hero text/copy that sits over the video, so the
   characters lift off the moving footage. Buttons are excluded — they have
   their own filled / outlined styling and don't need glow. */
.pp-hero-content h1,
.pp-hero-content p,
.pp-hero-badge,
.pp-hero-sub {
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.22),
                 0 1px 2px rgba(0, 0, 0, 0.35);
}

.pp-hero-content {
    max-width: var(--pp-container);
    margin: 0 auto;
    padding: 0 24px 0 clamp(40px, 6vw, 96px);
    position: relative;
    z-index: 2;
    width: 100%;
}

.pp-hero-text {
    max-width: 680px;
}

/* Hero tag pill — v6 dark section spec: bg rgba(purple,0.15), text #5fb8e6 */
.pp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(31, 158, 219, 0.15);
    color: var(--pp-blue);
    font-size: var(--pp-small);
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--pp-radius-md);
    margin-bottom: 24px;
    border: none;
}

.pp-hero-badge svg {
    color: #FFFFFF;
}

.pp-hero h1 {
    font-family: var(--pp-font-heading);
    font-size: var(--pp-hero-h1);
    font-weight: 700;
    color: #FFFFFF !important;
    margin-bottom: 20px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* v6: hero accent word is BLUE (#1f9edb) not purple. Complementary, not monochrome. */
.pp-hero h1 span {
    color: var(--pp-blue);
}

.pp-hero-sub {
    font-family: var(--pp-font-heading);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    color: #FFFFFF !important;  /* fully white so it pops on the dark hero image */
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.pp-hero-text p {
    font-size: var(--pp-body-lg);
    color: rgba(255, 255, 255, 0.92) !important;  /* near-white for readable body */
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 32px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.pp-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}


/* ==========================================================================
   8. TRUST PILLARS (4-column section)
   ========================================================================== */

.pp-trust-bar {
    background: var(--pp-blue-tint);
    padding: 60px 0;
    border-top: 1px solid var(--pp-light-gray);
    border-bottom: 0;
}

.pp-trust-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pp-gap);
    max-width: var(--pp-container);
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.pp-trust-item {
    text-align: center;
    padding: 24px 16px;
}

.pp-trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--pp-blue);
    transition: all var(--pp-transition);
}

.pp-trust-item:hover .pp-trust-icon {
    color: var(--pp-accent-text);
    transform: scale(1.1);
}

.pp-trust-item h4 {
    font-family: var(--pp-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pp-trust-item p {
    font-size: var(--pp-small);
    color: var(--pp-medium-gray);
    line-height: 1.6;
    margin: 0;
}


/* ==========================================================================
   9. CATEGORY GRID
   ========================================================================== */

.pp-category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--pp-gap);
}

.pp-category-card {
    display: block;
    background: var(--pp-background);
    border: 1px solid var(--pp-light-gray);
    border-radius: var(--pp-radius-lg);
    padding: 32px 24px;
    text-align: center;
    text-decoration: none;
    transition: all var(--pp-transition-slow);
}

.pp-category-card:hover {
    border-color: var(--pp-accent);
    box-shadow: var(--pp-shadow-hover);
    transform: translateY(-4px);
    color: inherit;
}

.pp-category-icon {
    width: 64px;
    height: 64px;
    background: var(--pp-off-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--pp-accent-text);
    transition: all var(--pp-transition);
}

.pp-category-card:hover .pp-category-icon {
    background: var(--pp-accent);
    color: #FFFFFF;
}

.pp-category-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--pp-primary);
    margin-bottom: 8px;
}

.pp-category-card p {
    font-size: var(--pp-small);
    color: var(--pp-medium-gray);
    line-height: 1.6;
    margin-bottom: 12px;
}

.pp-cat-count {
    font-size: var(--pp-xs);
    font-weight: 600;
    color: var(--pp-accent-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Category card with video */
.pp-category-card--has-video {
    padding: 0;
    overflow: hidden;
    position: relative;
}

.pp-category-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.pp-category-card__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.7);
}

.pp-category-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(52, 52, 52, 0.85));
    z-index: 2;
}

.pp-category-card--has-video .pp-category-card__overlay h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.pp-category-card--has-video .pp-category-card__overlay .pp-cat-count {
    color: rgba(255, 255, 255, 0.8);
}


/* ==========================================================================
   10. PRODUCT CARDS (WooCommerce overrides)
   ========================================================================== */

/* Parent theme shop-product card — brand overrides */
.shop-product {
    background: var(--pp-background);
    border: 1px solid var(--pp-light-gray);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    transition: all var(--pp-transition-slow);
}

.shop-product:hover,
.shop-product.hover-border:hover {
    border-color: var(--pp-accent) !important;
    box-shadow: var(--pp-shadow-hover);
    transform: translateY(-4px);
}

.shop-product_content .woocommerce-loop-product__title {
    font-family: var(--pp-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-primary);
}

.shop-product_content .price {
    color: var(--pp-text);
    font-weight: 600;
    font-size: var(--pp-card-price);
    font-family: var(--pp-font-heading);
}

.shop-product_footer {
    display: flex;
    gap: 6px;
    align-items: center;
}

.shop-product_footer .button,
.shop-product_footer .add_to_cart_button {
    background: var(--pp-primary);
    color: #fff;
    font-family: var(--pp-font-primary);
    font-size: var(--pp-small);
    font-weight: 600;
    border-radius: var(--pp-radius-sm);
    transition: background var(--pp-transition);
}

.shop-product_footer .button:hover,
.shop-product_footer .add_to_cart_button:hover {
    background: var(--pp-red);
    color: #FFFFFF;
}

/* NEW product label */
.pp-label-new {
    background: var(--pp-red) !important;
    color: #fff !important;
    font-family: var(--pp-font-primary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
}

/* Dose Calculator button on product cards */
.shop-product_actions .pp-calc-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    flex: 1 1 42px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    border-left: 1px solid var(--color-grey2) !important;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-size: 0 !important;
}

.shop-product_actions .pp-calc-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.shop-product_actions .pp-calc-btn:hover {
    background-color: var(--color-grey1);
    color: var(--pp-accent);
}

/* Shop header bar — grid/list toggle and sorting */
.shop-header {
    font-family: var(--pp-font-primary);
}

.shop-header_layout_item.is-active {
    color: var(--pp-accent-text);
}

/* Hide the grid/list layout toggle on the shop archive — the new horizontal
   list card is the only intended layout. */
.shop-header_layouts,
[data-ntr-shop-header] .shop-header_layouts,
.shop-header_layout_item {
    display: none !important;
}

/* Shop/archive — tighten massive parent theme .section margins */
.woocommerce-page .section.text-center.shop-hero,
.post-type-archive-product .section.text-center.shop-hero,
.tax-product_cat .section.text-center.shop-hero {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 40px 0 24px !important;
}

/* Tighten the product grid section too */
.woocommerce-page > .section,
.post-type-archive-product > .section,
.tax-product_cat > .section {
    margin-top: 24px !important;
    margin-bottom: 40px !important;
}

.shop-hero {
    background: var(--pp-background);
}

.shop-hero .headline_title {
    font-family: var(--pp-font-heading);
    color: var(--pp-primary);
}

.shop-hero .headline_summary {
    color: var(--pp-medium-gray);
}

/* Shop grid — more space between cards */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

/* Reset WooCommerce li.product - card styles handled by pp-product-card */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    transition: none;
    padding: 0;
    text-align: center;
    margin-bottom: 24px;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

/* Product image */
.woocommerce ul.products li.product a img {
    border-radius: 0;
    margin: 0;
}

/* Product image wrapper — badge positioning */
.woocommerce ul.products li.product .product-image-wrap {
    position: relative;
    overflow: hidden;
}

/* Research Use Only badge — v6 Option C bordered (markup removal in Phase 1.9) */
.pp-badge-research {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--pp-bg);
    color: var(--pp-dark);
    border: 1px solid var(--pp-dark);
    font-family: var(--pp-font-primary);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 2;
}

/* Purity badge — v6 Option C bordered (green) */
.pp-badge-purity {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: var(--pp-bg);
    color: #166534;
    border: 1px solid var(--pp-success);
    font-family: var(--pp-font-primary);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 2;
}

/* COA badge — v6 Option C bordered (blue, In Stock color family) */
.pp-badge-coa {
    position: absolute;
    top: 42px;
    right: 12px;
    background: var(--pp-bg);
    color: var(--pp-blue-dark);
    border: 1px solid var(--pp-blue-mid);
    font-family: var(--pp-font-primary);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 2;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-family: var(--pp-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-primary);
    padding: 20px 20px 6px;
    margin: 0;
}

/* Product price (v6: 17px Space Grotesk 600, dark text) */
.woocommerce ul.products li.product .price {
    color: var(--pp-text);
    font-size: var(--pp-card-price);
    font-weight: 600;
    font-family: var(--pp-font-heading);
    padding: 0 20px;
    margin-bottom: 20px;
}

.woocommerce ul.products li.product .price small {
    color: var(--pp-medium-gray);
    font-weight: 400;
    font-size: var(--pp-small);
}

/* Add to cart button — shop loop (v6: Primary CTA = red, not dark) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
    background: var(--pp-red);
    color: #FFFFFF;
    font-family: var(--pp-font-primary);
    font-size: var(--pp-small);
    font-weight: 600;
    padding: 14px 20px;
    border-radius: 0 0 var(--pp-radius-lg) var(--pp-radius-lg);
    border: none;
    width: 100%;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    transition: background var(--pp-transition);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
    background: var(--pp-red-hover);
    color: #FFFFFF;
}

/* WooCommerce sale flash — v6 Option C bordered (purple per Sale badge spec) */
.woocommerce span.onsale {
    background: var(--pp-bg);
    color: var(--pp-blue-text);
    border: 1px solid var(--pp-blue);
    font-family: var(--pp-font-primary);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--pp-radius-sm);
    padding: 3px 8px;
    min-height: auto;
    min-width: auto;
    line-height: 1.4;
}


/* WooCommerce Pagination */
.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination {
    text-align: center;
    margin: 48px 0 24px;
}

.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    border: none;
}

.woocommerce-pagination ul li,
.woocommerce nav.woocommerce-pagination ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--pp-light-gray, #E5E7EB);
    border-radius: var(--pp-radius, 8px);
    font-family: var(--pp-font-primary);
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-primary, #1B3A4B);
    background: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* v6: pagination current and hover use purple, not navy */
.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--pp-blue);
    color: #FFFFFF;
    border-color: var(--pp-blue);
}

.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--pp-blue);
    color: #FFFFFF;
    border-color: var(--pp-blue);
}

.woocommerce-pagination ul li .dots,
.woocommerce nav.woocommerce-pagination ul li .dots {
    border: none;
    background: none;
    color: var(--pp-medium-gray, #9CA3AF);
    min-width: auto;
    padding: 0 4px;
}


/* ==========================================================================
   11. SINGLE PRODUCT PAGE
   Layout is in woocommerce-single.php <style> block.
   This section is visual styling only: colors, fonts, spacing.
   ========================================================================== */

/* White background */
.single-product,
.single-product .nt-single-product,
.single-product .section {
    background: #fff;
}

/* Container inherits global .container { max-width: 1440px } — matches dose calculator page */

/* Breadcrumbs — subtle, with top breathing room */
.single-product .section-custom-8 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 20px;
    padding: 16px 0;
}
.single-product .section-custom-8 .breadcrumb,
.woocommerce .breadcrumb {
    font-size: 12px;
    color: var(--pp-text-tertiary) !important;
}
.single-product .section-custom-8 .breadcrumb a,
.woocommerce .breadcrumb a {
    color: var(--pp-text-link) !important;
}
.single-product .section-custom-8 .breadcrumb a:hover,
.woocommerce .breadcrumb a:hover {
    color: var(--pp-text-link-hover) !important;
}

/* Gallery — clean, spacious thumbnails */
.woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    overflow: hidden;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    flex: 0 0 calc(25% - 8px);
    max-width: calc(25% - 8px);
}
.woocommerce div.product div.images .flex-control-thumbs li:nth-child(n+5) {
    display: none;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
    border-radius: 8px;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
    border-color: var(--pp-primary);
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
    border-color: var(--pp-light-gray);
}

/* Main product image — clean border radius */
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    border-radius: 12px;
}

/* ── Product summary: consistent vertical rhythm ── */
/* Every direct child in the summary gets bottom margin for even spacing */
.woocommerce div.product .entry-summary > *,
.woocommerce div.product .summary > * {
    margin-bottom: 24px;
}

/* Product title */
.single-product .product_title,
.woocommerce div.product .product_title {
    font-family: var(--pp-font-heading) !important;
    color: var(--pp-text) !important;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.1;
}

/* Star rating (v6: purple stars site-wide, including WC review listings) */
.woocommerce .star-rating span::before {
    color: var(--pp-blue);
}
.woocommerce div.product .woocommerce-product-rating {
    margin-bottom: 16px;
}

/* Price (v6: 28px Space Grotesk 700) */
.woocommerce .nt-single-product div.product p.price,
.woocommerce .nt-single-product div.product span.price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: var(--pp-detail-price);
    font-weight: 700;
    font-family: var(--pp-font-heading) !important;
    color: var(--pp-text) !important;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--pp-border);
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    color: var(--pp-red) !important;
    text-decoration: none;
}
.woocommerce div.product p.price del {
    color: var(--pp-text-tertiary) !important;
    font-size: 18px;
    font-weight: 400;
}
.woocommerce div.product p.price .woocommerce-Price-currencySymbol,
.woocommerce div.product span.price .woocommerce-Price-currencySymbol {
    color: inherit !important;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--pp-text-secondary) !important;
    margin-bottom: 24px;
}
.woocommerce div.product .woocommerce-product-details__short-description p {
    color: var(--pp-text-secondary) !important;
}

/* Stock status — use dark green for contrast */
.woocommerce div.product .stock.in-stock {
    color: #166534;
    font-size: 14px;
    font-weight: 600;
}
.woocommerce div.product p.stock {
    margin-bottom: 20px;
}

/* Variations form — stacked layout for the buy box */
.woocommerce div.product form.cart {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pp-light-gray);
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
}

.woocommerce div.product form.cart .variations {
    width: 100%;
}

.woocommerce div.product form.cart .variations td {
    display: block;
    width: 100%;
    padding: 0;
}

.woocommerce div.product form.cart .variations td.label {
    width: 100% !important;        /* cancel parent 20% */
    padding-right: 0 !important;
    line-height: 1.4 !important;   /* cancel parent line-height:3 */
}

.woocommerce div.product form.cart .variations tr {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.woocommerce div.product form.cart .variations label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text);
}

.woocommerce div.product form.cart .variations select {
    width: 100% !important;        /* cancel parent width:auto */
    max-width: 100% !important;
    height: 48px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    padding: 0 14px;
    margin-right: 0 !important;    /* cancel parent margin-right:20px */
    font-family: var(--pp-font-primary);
    font-size: 14px;
    color: var(--pp-text);
    box-sizing: border-box;
}

/* Hide Clear link and reset alert */
.woocommerce div.product form.cart .reset_variations,
.woocommerce div.product form.cart .reset_variations_alert {
    display: none !important;
}

/* Hide the duplicate variation price — main price already shows at top */
.woocommerce div.product form.cart .woocommerce-variation-price {
    display: none !important;
}

/* Quantity wrapper — cancel parent theme's 100px width + border */
.woocommerce div.product form.cart .quantity {
    width: 100% !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* Quantity input */
.woocommerce div.product form.cart .quantity .qty {
    height: 48px;
    line-height: 48px;
    width: 100% !important;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    padding: 0 12px;
    font-family: var(--pp-font-primary);
    font-size: 15px;
    text-align: center;
    box-sizing: border-box;
    background: #fff;
}

/* Add to cart button — single product page (v6: 14px DM Sans 600, no all-caps) */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button {
    background: var(--pp-red) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-family: var(--pp-font-primary);
    font-size: 14px;
    font-weight: 600;
    height: 48px;
    width: auto;
    padding: 0 32px;
    margin-left: 0 !important;     /* cancel parent margin-left:20px */
    margin-right: 0 !important;
    border-radius: var(--pp-radius-md);
    text-transform: none;          /* v6: no all-caps */
    letter-spacing: 0;              /* v6: tight letter spacing only */
    cursor: pointer;
    transition: background var(--pp-transition);
    line-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
}
/* Cart icon prepended to the Add to Cart label */
.woocommerce div.product form.cart .single_add_to_cart_button::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: var(--pp-red-hover) !important;
    color: #FFFFFF !important;
}

/* Wishlist button */
.single-product .yith-wcwl-add-to-wishlist {
    margin-bottom: 20px;
}

/* Product meta (SKU, Category, Tags) */
.nt-single-product .product_meta,
.woocommerce div.product .product_meta {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--pp-border);
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--pp-light-gray);
}
.nt-single-product .product_meta > span,
.woocommerce div.product .product_meta > span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--pp-text-tertiary) !important;
    color: var(--pp-primary);
    line-height: 1.5;
}
.nt-single-product .product_meta > span > span.posted_in,
.nt-single-product .product_meta > span > span.tagged_as,
.woocommerce div.product .product_meta > span > span {
    color: var(--pp-text-tertiary) !important;
}
.nt-single-product .product_meta > span a,
.woocommerce div.product .product_meta a {
    color: var(--pp-text-link) !important;
    font-weight: 500;
    font-size: 12px;
}
.nt-single-product .product_meta > span a:hover,
.woocommerce div.product .product_meta a:hover {
    color: var(--pp-text-link-hover) !important;
}

/* COA slot — sits below gallery in left column */
.pp-coa-slot {
    padding-top: 16px;
    border-top: 1px solid var(--pp-border, #E5E7EB);
}

.woocommerce div.product .pp-coa-card {
    margin-top: 32px;
    margin-bottom: 28px;
}

/* Research disclaimer — spacing */
.woocommerce div.product .pp-product-disclaimer {
    margin-bottom: 24px;
}

/* Tabs — spacious, matching parent demo's 60px spacing */
/* Hide default WooCommerce tabs (replaced by stacked sections) */
.woocommerce div.product .woocommerce-tabs {
    display: none !important;
}

/* ==========================================================================
   PRODUCT SECTIONS — Description (right col), COA (left col), rest full-width
   ========================================================================== */

/* Shared section styles */
.pp-product-section {
    padding: 32px 0;
}

.pp-product-section__title {
    font-family: var(--pp-font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--pp-primary);
    margin: 0 0 24px;
}

.pp-product-section__content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--pp-text);
}

.pp-product-section__content p {
    margin-bottom: 16px;
}

.pp-product-section__content h2,
.pp-product-section__content h3 {
    font-family: var(--pp-font-heading);
    color: var(--pp-primary);
    margin-top: 24px;
    margin-bottom: 12px;
}

/* Description content — elevated typography */
.pp-about__content > p:first-of-type,
.pp-product-section--description .pp-product-section__content > p:first-of-type {
    font-size: 17px;
    line-height: 1.75;
    color: var(--pp-text);
}

.pp-product-section--description .pp-product-section__content strong {
    color: var(--pp-primary);
}

.pp-product-section--description .pp-product-section__content em {
    color: var(--pp-accent-text, #1f9edb);
    font-style: italic;
}

/* LLM SEO Q&A Block — styled cards */
.pp-llm-seo {
    margin-top: 40px !important;
    padding: 28px;
    background: var(--pp-off-white, #F9FAFB);
    border: 1px solid var(--pp-light-gray, #E5E7EB);
    border-radius: var(--pp-radius-lg, 12px);
    font-size: 13px !important;
    color: var(--pp-medium-gray) !important;
    line-height: 1.7 !important;
}

.pp-llm-seo p {
    margin-bottom: 20px !important;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--pp-light-gray, #E5E7EB);
}

.pp-llm-seo p:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0;
    border-bottom: none;
}

.pp-llm-seo strong {
    display: block;
    font-size: 14px;
    color: var(--pp-primary, #1B3A4B) !important;
    margin-bottom: 6px;
}

/* ==========================================================================
   COA CARD — Redesigned
   ========================================================================== */

.pp-coa-card {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--pp-radius-lg, 12px);
    overflow: hidden;
    border: 1px solid var(--pp-light-gray, #E5E7EB);
    background: #fff;
}

/* Banner header — brand navy */
.pp-coa-card-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--pp-primary, #1B3A4B);
}

.pp-coa-card-brand {
    font-family: var(--pp-font-heading);
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
}

.pp-coa-card-brand strong {
    color: #fff;
    font-weight: 700;
}

.pp-coa-card-verified-badge {
    display: inline-block;
    padding: 5px 14px;
    background: var(--pp-success);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Card body */
.pp-coa-card-body {
    padding: 28px 24px;
}

/* Product name */
.pp-coa-card-product {
    margin-bottom: 20px;
}

.pp-coa-card-product-name {
    font-family: var(--pp-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--pp-primary);
    margin: 0 0 4px;
}

.pp-coa-card-product-sub {
    font-size: 14px;
    color: var(--pp-medium-gray);
    margin: 0;
}

/* Purity display */
.pp-coa-card-purity {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--pp-light-gray, #E5E7EB);
}

.pp-coa-card-purity-num {
    font-family: var(--pp-font-heading);
    font-size: 42px;
    font-weight: 800;
    color: var(--pp-primary);
    line-height: 1;
}

.pp-coa-card-purity-pct {
    font-family: var(--pp-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--pp-primary);
    margin-right: 8px;
}

.pp-coa-card-purity-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--pp-medium-gray);
}

/* Specs grid — 2 columns */
.pp-coa-card-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 24px;
    border-top: 1px solid var(--pp-light-gray, #E5E7EB);
}

.pp-coa-card-spec {
    padding: 14px 0;
    border-bottom: 1px solid var(--pp-light-gray, #E5E7EB);
}

.pp-coa-card-spec:nth-child(odd) {
    padding-right: 16px;
}

.pp-coa-card-spec:nth-child(even) {
    padding-left: 16px;
    border-left: 1px solid var(--pp-light-gray, #E5E7EB);
}

.pp-coa-card-spec-label {
    display: block;
    font-size: 11px;
    color: var(--pp-medium-gray);
    margin-bottom: 2px;
    text-transform: capitalize;
}

.pp-coa-card-spec-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-primary);
}

/* Additional testing badges */
.pp-coa-card-testing {
    padding: 20px 0;
    border-top: 1px solid var(--pp-light-gray, #E5E7EB);
}

.pp-coa-card-testing-label {
    display: block;
    font-size: 12px;
    color: var(--pp-medium-gray);
    margin-bottom: 10px;
}

.pp-coa-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pp-coa-card-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--pp-radius-sm); /* v6: badge = 4px */
}

.pp-coa-card-badge--pass {
    background: rgba(27, 58, 75, 0.08);
    color: var(--pp-primary);
}

.pp-coa-card-badge--info {
    background: rgba(27, 58, 75, 0.08);
    color: var(--pp-primary);
}

/* Verification section */
.pp-coa-card-verify {
    padding: 20px;
    margin-top: 4px;
    background: var(--pp-off-white, #F5F7FA);
    border-radius: 8px;
}

.pp-coa-card-verify-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--pp-primary);
    margin-bottom: 10px;
}

.pp-coa-card-verify-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.pp-coa-card-verify-key {
    display: inline-block;
    padding: 6px 14px;
    background: #fff;
    border: 1.5px solid var(--pp-primary);
    border-radius: var(--pp-radius-sm); /* v6: badge/key chip = 4px */
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-primary);
    letter-spacing: 0.03em;
}

.pp-coa-card-verify-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-primary);
    text-decoration: underline;
}

.pp-coa-card-verify-link:hover {
    color: var(--pp-accent);
}

.pp-coa-card-verify-note {
    font-size: 12px;
    color: var(--pp-primary);
    opacity: 0.7;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* Additional Info — inline in right column */
.pp-product-section--additional .pp-product-section__content h2:first-child {
    display: none;
}

/* Reviews section — tighter, no extra heading */
.pp-product-section--reviews {
    padding: 40px 0 60px;
    border-top: 1px solid var(--pp-light-gray, #E5E7EB);
}

/* COA — sits inside the right (summary) column, after price */
.pp-product-section--coa.pp-product-section--inline {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--pp-light-gray, #E5E7EB);
}

/* Full-width lower sections */
.pp-product-sections--full {
    width: 100%;
}

/* Additional info table */
.pp-product-section--additional .shop_attributes {
    width: 100%;
    max-width: 600px;
}

.pp-product-section--additional .shop_attributes th,
.pp-product-section--additional .shop_attributes td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pp-light-gray, #E5E7EB);
    font-size: 15px;
}

.pp-product-section--additional .shop_attributes th {
    font-weight: 600;
    color: var(--pp-primary);
    text-align: left;
    width: 40%;
}

/* ==========================================================================
   REVIEWS - Custom Pro Peptide Review Section
   ========================================================================== */

.pp-reviews {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
}

.pp-reviews__title {
    font-family: var(--pp-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--pp-text);
    margin-bottom: 24px;
}

/* Layout: summary left, reviews right */
.pp-reviews__layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 48px;
    border-top: 1px solid var(--pp-border);
    border-bottom: 1px solid var(--pp-border);
    padding: 32px 0;
}

@media (max-width: 768px) {
    .pp-reviews__layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Summary stars */
.pp-reviews__avg {
    margin-bottom: 24px;
}

.pp-reviews__stars--summary {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
}

.pp-reviews__star {
    width: 18px;
    height: 18px;
}

.pp-reviews__star--filled {
    color: var(--pp-blue);
}

.pp-reviews__star--empty {
    color: var(--pp-border);
}

.pp-reviews__star--sm {
    width: 14px;
    height: 14px;
}

.pp-reviews__avg-text {
    font-size: 13px;
    color: var(--pp-text-secondary);
}

/* Star breakdown bars */
.pp-reviews__breakdown {
    margin-bottom: 28px;
}

.pp-reviews__bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.pp-reviews__bar-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--pp-text);
    width: 14px;
    text-align: right;
}

.pp-reviews__bar-track {
    flex: 1;
    height: 8px;
    background: var(--pp-bg-tertiary, #F3F4F6);
    border-radius: 4px;
    overflow: hidden;
}

.pp-reviews__bar-fill {
    height: 100%;
    background: var(--pp-blue);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.pp-reviews__bar-pct {
    font-size: 12px;
    color: var(--pp-text-secondary);
    width: 32px;
    text-align: right;
}

/* Write a review CTA */
.pp-reviews__write h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pp-text);
    margin-bottom: 6px;
}

.pp-reviews__write p {
    font-size: 13px;
    color: var(--pp-text-secondary);
    margin-bottom: 14px;
    line-height: 1.5;
}

/* "Write a review" outline button — purple to match reviews section */
.pp-reviews__write .pp-btn-outline {
    border-color: var(--pp-blue);
    color: var(--pp-blue);
    background: transparent;
}

.pp-reviews__write .pp-btn-outline:hover {
    background: var(--pp-blue);
    border-color: var(--pp-blue);
    color: #fff;
}

/* Disabled "Write a review" — dimmed; tooltip explains why on hover */
.pp-reviews__write .pp-btn--disabled {
    position: relative;
    display: inline-block;
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--pp-border);
    color: var(--pp-text-secondary);
    background: transparent;
    user-select: none;
}

.pp-reviews__write .pp-btn--disabled:hover,
.pp-reviews__write .pp-btn--disabled:focus {
    opacity: 0.75;
    background: transparent;
    border-color: var(--pp-border);
    color: var(--pp-text-secondary);
}

/* Custom tooltip via [data-pp-tooltip]. Sits above the button on hover/focus. */
.pp-reviews__write .pp-btn--disabled[data-pp-tooltip]::after {
    content: attr(data-pp-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 260px;
    padding: 8px 12px;
    border-radius: var(--pp-radius-md);
    background: var(--pp-text);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.pp-reviews__write .pp-btn--disabled[data-pp-tooltip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: var(--pp-text);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.pp-reviews__write .pp-btn--disabled:hover::after,
.pp-reviews__write .pp-btn--disabled:focus::after,
.pp-reviews__write .pp-btn--disabled:hover::before,
.pp-reviews__write .pp-btn--disabled:focus::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Review list */
.pp-reviews__list {
    border-left: 1px solid var(--pp-border);
    padding-left: 48px;
}

@media (max-width: 768px) {
    .pp-reviews__list {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--pp-border);
        padding-top: 24px;
    }
}

/* Individual review */
.pp-review {
    padding: 24px 12px;
    margin-left: -12px;
    margin-right: -12px;
    border-bottom: 1px solid var(--pp-border);
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.pp-review:hover {
    background-color: var(--pp-blue-tint);
}

.pp-review:first-child {
    padding-top: 12px;
}

.pp-review:last-child {
    border-bottom: none;
}

.pp-review__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

/* Initials avatar */
.pp-review__initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pp-blue-tint, #E8F4FB);
    color: var(--pp-blue, #1f9edb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--pp-font-heading);
    flex-shrink: 0;
}

.pp-review__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-review__author-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-review__author {
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text);
}

.pp-review__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #166534;
    background: var(--pp-success-tint, #EAF7DF);
    padding: 2px 8px;
    border-radius: var(--pp-radius-full, 9999px);
}

.pp-review__verified svg {
    width: 12px;
    height: 12px;
    stroke: var(--pp-success, #7ccf4a);
}

.pp-review__date {
    font-size: 12px;
    color: var(--pp-text-secondary);
}

.pp-review__stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
}

.pp-review__rating-num {
    font-size: 13px;
    color: var(--pp-text-secondary);
    margin-left: 6px;
}

.pp-review__text {
    font-size: 14px;
    color: var(--pp-text-secondary);
    line-height: 1.7;
}

.pp-review__text p {
    margin: 0 0 8px;
}

/* Empty state */
.pp-reviews__empty,
.pp-reviews__must-buy,
.pp-reviews__must-login {
    font-size: 14px;
    color: var(--pp-text-secondary);
    padding: 24px 0;
}

.pp-reviews__must-login a {
    color: var(--pp-text-link);
    font-weight: 600;
}

/* Review form */
.pp-reviews__form-wrap {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--pp-border);
}

.pp-reviews__form-title {
    font-family: var(--pp-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--pp-text);
}

/* Form labels */
.pp-reviews__form-wrap .comment-form-rating label,
.pp-reviews__form-wrap .comment-form-comment label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--pp-text);
    font-size: 14px;
}

/* Rating dropdown — matches textarea + Add to Cart variation select */
.pp-reviews__form-wrap .comment-form-rating {
    margin-bottom: 18px;
}

.pp-reviews__form-wrap .comment-form-rating select#rating {
    width: 100%;
    max-width: 280px;
    height: 48px;
    border: 1.5px solid var(--pp-border);
    border-radius: 10px;
    padding: 0 14px;
    font-family: var(--pp-font-primary);
    font-size: 14px;
    color: var(--pp-text);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pp-reviews__form-wrap .comment-form-rating select#rating:focus {
    outline: none;
    border-color: var(--pp-blue);
    box-shadow: var(--pp-shadow-focus);
}

/* Review textarea */
.pp-reviews__form-wrap .comment-form-comment {
    margin-bottom: 18px;
}

.pp-reviews__form-wrap .comment-form-comment textarea {
    border: 1.5px solid var(--pp-border);
    border-radius: 10px;
    padding: 14px;
    font-family: var(--pp-font-primary);
    font-size: 14px;
    color: var(--pp-text);
    width: 100%;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pp-reviews__form-wrap .comment-form-comment textarea:focus {
    outline: none;
    border-color: var(--pp-blue);
    box-shadow: var(--pp-shadow-focus);
}

/* Submit Review button — matches Add to Cart (red) */
.pp-reviews__form-wrap .form-submit input[type="submit"] {
    background: var(--pp-red);
    color: #fff;
    font-family: var(--pp-font-primary);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    height: 48px;
    border-radius: 10px;
    padding: 0 28px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pp-reviews__form-wrap .form-submit input[type="submit"]:hover {
    background: var(--pp-red-hover);
}

/* Hide default WooCommerce gravatar in reviews */
.woocommerce #reviews .comment_container > img.avatar {
    display: none !important;
}

/* Hide old WooCommerce review styles */
.woocommerce #reviews #comments ol.commentlist {
    display: none;
}

/* Related products — generous spacing */
.single-product .related.products {
    margin-top: 80px;
    padding: 60px 0 40px;
    border-top: 1px solid var(--pp-light-gray);
}
.single-product .related.products > h2,
.single-product .section-title {
    font-family: var(--pp-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--pp-primary);
    margin-bottom: 40px;
}

.single-product .related.products ul.products {
    gap: 28px !important;
}

.single-product .related.products .pp-product-card {
    margin-bottom: 0;
}

/* --- Custom Pro Peptide Components --- */

/* Research Specs panel */
.pp-research-specs {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 16px 0;
    margin: 16px 0 8px;
}

.pp-research-specs h4 {
    font-family: var(--pp-font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pp-medium-gray);
    margin-bottom: 12px;
}

.pp-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pp-spec-item {
    text-align: center;
    padding: 8px 6px;
    background: var(--pp-background);
    border-radius: var(--pp-radius-sm);
    border: 1px solid var(--pp-light-gray);
}

.pp-spec-item .spec-label {
    display: block;
    font-size: var(--pp-xs);
    font-weight: 600;
    color: var(--pp-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.pp-spec-item .spec-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-primary);
    font-family: var(--pp-font-heading);
}

/* COA Gallery Slide - renders as a real gallery image.
   Must mimic an <img> in size so FlexSlider's viewport keeps a stable height
   when switching from a photo slide to this HTML slide. Absolute centering
   (not flex) so it doesn't fight FlexSlider's display toggling. */
.pp-coa-slide-wrap {
    position: relative;
    background: #fff;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 380px;
    border-radius: var(--pp-radius-lg); /* v6: card container = 12px */
    overflow: hidden;
    box-sizing: border-box;
}

.pp-coa-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 380px;
    padding: 28px 24px;
    box-sizing: border-box;
}

.pp-coa-slide-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.pp-coa-slide-shield {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-coa-slide-title {
    font-family: var(--pp-font-heading);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pp-text);
}

.pp-coa-slide-lab {
    font-size: 10px;
    color: var(--pp-text-tertiary);
}

.pp-coa-slide-purity {
    text-align: center;
    margin-bottom: 16px;
}

.pp-coa-slide-purity-num {
    font-family: var(--pp-font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--pp-blue);
    line-height: 1;
}

.pp-coa-slide-purity-label {
    font-size: 10px;
    color: var(--pp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-left: 6px;
}

.pp-coa-slide-rows {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.pp-coa-slide-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 14px;
    font-size: 11px;
}

.pp-coa-slide-row + .pp-coa-slide-row {
    border-top: 0.5px solid var(--pp-border);
}

.pp-coa-slide-row span:first-child {
    color: var(--pp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.pp-coa-slide-row span:last-child {
    color: var(--pp-text);
    font-weight: 500;
    font-family: var(--pp-font-heading);
}

.pp-coa-slide-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
}

.pp-coa-slide-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 10px;
    border-radius: 20px;
}

.pp-coa-slide-badge.pass {
    background: var(--pp-success-tint);
    color: #166534;
}

.pp-coa-slide-badge.info {
    background: var(--pp-blue-tint);
    color: var(--pp-blue-dark);
}

/* Star rating on single product page (v6: purple) */
.woocommerce div.product .star-rating span::before {
    color: var(--pp-blue) !important;
}

.pp-coa-slide-verify {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 10px;
}

.pp-coa-slide-verify span:first-child {
    color: var(--pp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.pp-coa-slide-verify-key {
    font-family: var(--pp-font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-blue-text);
}

/* COA Card - matches DESIGN.md / COA_CARD_INSTRUCTIONS.md */
.pp-coa-card {
    border: 0.5px solid var(--pp-border);
    border-radius: 20px;
    overflow: hidden;
    margin: 20px 0 12px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--pp-font-primary);
}

.pp-coa-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px 12px;
}

.pp-coa-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pp-font-heading);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pp-text);
}

.pp-coa-card-title .pp-coa-shield {
    width: 36px;
    height: 36px;
    background: var(--pp-blue-tint);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-coa-card-title svg {
    color: var(--pp-blue);
    width: 18px;
    height: 18px;
}

.pp-coa-card-lab {
    font-size: 11px;
    color: var(--pp-text-tertiary);
    font-weight: 500;
    text-align: right;
    margin-top: 4px;
}

.pp-coa-card-lab.verified {
    color: var(--pp-blue-dark);
}

.pp-coa-card-spec-value.verified {
    color: var(--pp-blue-dark);
    font-weight: 600;
}

.pp-coa-slide-lab.verified {
    color: var(--pp-blue-dark);
    font-weight: 600;
}

.pp-coa-card-tested-note {
    margin: -8px 24px 16px;
    font-size: 11px;
    font-style: italic;
    color: var(--pp-text-tertiary);
    text-align: center;
}

.pp-coa-slide-tested-note {
    margin: -8px 0 12px;
    font-size: 10px;
    font-style: italic;
    color: var(--pp-text-tertiary);
    text-align: center;
}

.pp-coa-purity {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 24px 16px;
    text-align: center;
    justify-content: center;
}

.pp-coa-purity-num {
    font-family: var(--pp-font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--pp-blue-dark);
    line-height: 1;
}

.pp-coa-purity-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--pp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.pp-coa-grid {
    margin: 0 16px;
    padding: 4px 0;
}

.pp-coa-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
}

.pp-coa-row + .pp-coa-row {
    border-top: 0.5px solid var(--pp-border);
}

.pp-coa-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--pp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.pp-coa-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--pp-text);
    font-family: var(--pp-font-heading);
}

.pp-coa-section-label {
    font-size: 11px;
    color: var(--pp-blue);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    padding: 16px 34px 4px;
}

.pp-coa-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 24px 8px;
    justify-content: center;
}

.pp-coa-check {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pp-coa-pass {
    background: var(--pp-success-tint);
    color: #166534;
}

.pp-coa-neutral {
    background: var(--pp-blue-tint);
    color: var(--pp-blue-dark);
}

/* Pre-Janoshik: source note */
.pp-coa-source {
    margin: 12px 16px 0;
    background: var(--pp-blue-tint);
    border-radius: 12px;
    padding: 12px 16px;
}

.pp-coa-source-label {
    font-size: 11px;
    color: var(--pp-blue-dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}

.pp-coa-source-text {
    font-size: 11px;
    color: var(--pp-text-secondary);
    line-height: 1.5;
}

/* Post-Janoshik: verification key */
.pp-coa-verify {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 16px 0;
    background: var(--pp-blue-tint);
    border-radius: 12px;
    padding: 12px 16px;
}

.pp-coa-verify-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.pp-coa-verify-key {
    font-family: var(--pp-font-heading);
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-blue-text);
    letter-spacing: 0.5px;
}

.pp-coa-card .pp-coa-footer {
    padding: 16px 24px 20px;
    text-align: center;
}

.pp-coa-card .pp-coa-footer-text {
    font-size: 10px;
    color: var(--pp-text-tertiary);
    line-height: 1.5;
}

.pp-coa-card .pp-coa-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    background: var(--pp-blue);
    color: #FFFFFF;
    font-family: var(--pp-font-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background var(--pp-transition);
}

.pp-coa-card .pp-coa-download:hover {
    background: var(--pp-blue-hover);
}

/* COA Download button (standalone) */
.pp-coa-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--pp-success);
    color: #fff;
    font-family: var(--pp-font-primary);
    font-size: var(--pp-btn);
    font-weight: 600;
    padding: 14px 28px;
    border-radius: var(--pp-radius);
    border: none;
    cursor: pointer;
    transition: all var(--pp-transition);
    text-decoration: none;
    width: 100%;
    justify-content: center;
    margin-top: 12px;
}

.pp-coa-download:hover {
    background: var(--pp-success);
    color: #fff;
    box-shadow: var(--pp-shadow);
}

/* Compliance banner - subtle, not attention-grabbing */
.pp-compliance-banner {
    background: var(--pp-off-white);
    border: 1px solid var(--pp-light-gray);
    border-radius: var(--pp-radius-sm);
    padding: 10px 16px;
    margin: 12px 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--pp-medium-gray);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pp-compliance-banner strong {
    font-weight: 600;
    color: var(--pp-text);
}


/* ==========================================================================
   12. DISCLAIMERS
   ========================================================================== */

/* Research disclaimer bar (top of page) */
.pp-disclaimer-bar {
    background: var(--pp-primary);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--pp-xs);
    font-weight: 500;
    padding: 10px 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pp-disclaimer-bar svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Product disclaimer */
.pp-product-disclaimer {
    background: var(--pp-primary);
    border: none;
    border-radius: var(--pp-radius);
    padding: 16px 20px;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 1.6;
    margin: 16px 0;
    font-weight: 600;
}

.pp-product-disclaimer strong {
    display: block;
    font-weight: 800;
    margin-bottom: 4px;
    color: #FFFFFF;
    font-size: 15px;
}

/* Footer disclaimer */
.pp-disclaimer-footer {
    background: var(--pp-primary);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--pp-xs);
    padding: 20px 24px;
    text-align: center;
    line-height: 1.7;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pp-disclaimer-footer strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */

/* Hide Elementor footer builder if present */
.elementor-location-footer,
footer.nt-footer-builder,
div[data-elementor-id="3885"],
.elementor-3885 {
    display: none !important;
}

/* Hide parent theme footer, show ours */
.nt-footer,
.footer-area,
#nt-footer,
#nt-footer.footer,
.nt-footer-sidebar,
.footer_top,
footer.footer {
    display: none !important;
}

.pp-footer {
    display: block !important;
}

footer h4,
.nt-footer h4,
.footer-area h4,
#nt-footer h4,
footer .widget-title,
.footer-area .widget-title {
    font-family: var(--pp-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

footer a,
.nt-footer a,
.footer-area a,
#nt-footer a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--pp-transition);
}

footer a:hover,
.nt-footer a:hover,
.footer-area a:hover,
#nt-footer a:hover {
    color: var(--pp-accent-text);
}

/* Footer widget areas */
.pp-footer-widget h4 {
    font-family: var(--pp-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pp-footer-widget a {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--pp-menu-sm);
    padding: 4px 0;
}

.pp-footer-widget a:hover {
    color: var(--pp-accent-text);
    padding-left: 4px;
}


/* ==========================================================================
   14. ACTIVITY FEED STRIP — see /pp-activity-feed/activity-feed.css
   ========================================================================== */

/* The old static .pp-announcement-bar block was removed when the strip
   was replaced by the rotating activity feed. Styles for the new strip
   live in /pp-activity-feed/activity-feed.css and are enqueued by
   /pp-activity-feed/pp-activity-feed.php. Don't add overrides here. */

/* Header — align logo / nav / icons on a single horizontal centerline and
   add a thin separator beneath. Parent theme stacks 40px container padding
   plus a 40px header_bottom margin-top to leave room for a topbar; we don't
   use a topbar, so zero those out to keep the menu snug under the strip. */
.naturally-main-header {
    border-bottom: 1px solid var(--pp-border);
}

.naturally-main-header .header_container,
body .naturally-main-header .header_container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.naturally-main-header .header_bottom {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 24px;
    margin-top: 0 !important;
    padding-top: 12px;
    padding-bottom: 12px;
}

@media (max-width: 767px) {
    .naturally-main-header .header_bottom {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* --- Single-line alignment of every header_bottom child --- */

/* Parent theme adds padding-top:11px to .header_nav at desktop, which
   shifts the menu down off the centerline. Zero it out. */
.naturally-main-header .header_bottom .header_nav {
    padding: 0 !important;
    display: flex;
    align-items: center;
    line-height: 1;
}

.naturally-main-header .header_bottom .header_nav > ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 8px;
}

.naturally-main-header .header_bottom .header_nav > ul > li {
    display: flex;
    align-items: center;
    margin: 0;
    border: 0;
}

/* Trim parent's 10px/20px link padding; keep just enough room for the
   hover underline (4px below). Font size matches a tight nav. */
.naturally-main-header .header_bottom .header_nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 16px;
    line-height: 1;
    border: 0;
}

/* Logo sits on the centerline */
.naturally-main-header .header_bottom .header_logo,
.naturally-main-header .header_bottom #nt-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    margin: 0;
}

.naturally-main-header .header_bottom .header_logo img,
.naturally-main-header .header_bottom .pp-logo-img {
    display: block;
    max-height: 80px;
    width: auto;
}

/* Right-side icons: account + wishlist share the 40px circular hit area.
   The search trigger has its own bespoke style in pp-header-search.css. */
.naturally-main-header .header_bottom .pp-header-account,
.naturally-main-header .header_bottom .wishlist--count.header--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 0 8px;
    color: var(--pp-text);
    line-height: 0;
}

.naturally-main-header .header_bottom .pp-header-account:hover,
.naturally-main-header .header_bottom .wishlist--count.header--icon:hover {
    color: var(--pp-blue);
}

.naturally-main-header .header_bottom .pp-header-account svg,
.naturally-main-header .header_bottom .wishlist--count [class*="icon"],
.naturally-main-header .header_bottom .wishlist--count .icon::before {
    display: block;
    line-height: 1;
}

/* Cart pill — vertically centered, same height as icons */
.naturally-main-header .header_bottom .header_cart {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    order: 5;
}

/* Header icon order: ... | search | account | cart   (wishlist removed) */
.naturally-main-header .header_bottom .pp-search-trigger { order: 3; }
.naturally-main-header .header_bottom .pp-header-account { order: 4; }
.naturally-main-header .header_bottom .wishlist--count,
.naturally-main-header .header_bottom .wishlist--count.header--icon {
    display: none !important;
}

/* Push the search/account/cart trio to the far right and tighten their spacing.
   margin-left: auto on the trigger puts the trio against the right edge; the
   negative margins on account + cart counteract the parent's 24px gap so the
   three icons sit ~6px apart instead of 24px. */
.naturally-main-header .header_bottom .pp-search-trigger {
    margin-left: auto;
}
.naturally-main-header .header_bottom .pp-header-account {
    margin-left: -18px;
}
.naturally-main-header .header_bottom .header_cart {
    margin-left: -18px;
}

.naturally-main-header .header_bottom .header_cart .header_cart_label {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    line-height: 1;
}

/* Hamburger toggle — mobile only. Hide on desktop; the inline nav is the
   desktop menu. The styling block was previously forcing display:inline-flex
   at all widths, which leaked the toggle onto desktop. */
.naturally-main-header .header_bottom .header_nav_toggle {
    display: none;
}

@media (max-width: 767px) {
    .naturally-main-header .header_bottom .header_nav_toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 0 0 8px;
    }
}

/* Push nav to center, icons to right. The parent theme's logo sits first,
   the nav comes second, then toggle + cart group. Auto-margins do the rest. */
.naturally-main-header .header_bottom > .header_nav {
    margin-left: auto;
    margin-right: auto;
}

/* Three-zone desktop nav (≥1200px, the parent's inline-nav breakpoint).
   Below this the nav is off-canvas (parent: position:fixed) and the search
   trigger's margin-left:auto is what pushes the mobile icon cluster right, so
   this fix is gated to desktop only and never touches the hamburger layout.

   The bug: .header_nav already centers via symmetric margin:0 auto above, but
   .pp-search-trigger ALSO carries margin-left:auto. Three auto-margins split
   the free space three ways, so the nav lands left-of-centre and the surplus
   dumps into one big dead gap before the search icon. Zeroing the trigger's
   auto leaves the nav's own two autos to split evenly: nav centres, the icon
   trio packs flush right against the gap, no dead space. */
@media (min-width: 1200px) {
    .naturally-main-header .header_bottom .pp-search-trigger {
        margin-left: 0;
    }
    /* Guarantee the Hard-Rule breathing room: the 24px flex gap already sits
       between logo and the nearest nav element, but pin a floor so the active
       pill can never crowd the wordmark even if the nav grows wide. */
    .naturally-main-header .header_bottom > .header_logo {
        margin-right: 24px;
    }
}

/* Hover/active underline under each top-level menu link */
.naturally-main-header .header_bottom .header_nav > ul > li > a {
    position: relative;
    padding-bottom: 4px;
}

.naturally-main-header .header_bottom .header_nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.2s ease, left 0.2s ease;
    pointer-events: none;
}

.naturally-main-header .header_bottom .header_nav > ul > li > a:hover::after,
.naturally-main-header .header_bottom .header_nav > ul > li.current-menu-item > a::after,
.naturally-main-header .header_bottom .header_nav > ul > li.current_page_item > a::after,
.naturally-main-header .header_bottom .header_nav > ul > li.current-menu-ancestor > a::after {
    width: 100%;
    left: 0;
}


/* ==========================================================================
   15. WAITLIST PAGE
   ========================================================================== */

.pp-waitlist-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 60px 24px;
    text-align: center;
}

.pp-waitlist-page h1 {
    font-family: var(--pp-font-heading);
    font-size: var(--pp-section-h2);
    font-weight: 800;
    color: var(--pp-primary);
    margin-bottom: 12px;
}

.pp-waitlist-subtitle {
    font-size: var(--pp-body-lg);
    color: var(--pp-medium-gray);
    margin-bottom: 40px;
}

.pp-waitlist-form-wrap {
    text-align: left;
}

.pp-waitlist-form label {
    display: block;
    font-size: var(--pp-small);
    font-weight: 600;
    color: var(--pp-primary);
    margin-bottom: 6px;
    margin-top: 16px;
}

.pp-waitlist-form input[type="text"],
.pp-waitlist-form input[type="email"] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    font-family: var(--pp-font-primary);
    font-size: var(--pp-body);
    color: var(--pp-text);
    transition: border-color var(--pp-transition);
    background: var(--pp-background);
}

.pp-waitlist-form input:focus {
    outline: none;
    border-color: var(--pp-accent);
    box-shadow: 0 0 0 3px rgba(31, 158, 219, 0.2);
}

.pp-waitlist-form .pp-btn {
    width: 100%;
    justify-content: center;
    margin-top: 24px;
}

.pp-waitlist-success {
    display: none;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #166534;
    font-weight: 600;
    padding: 20px;
    border-radius: var(--pp-radius);
    text-align: center;
    margin-top: 20px;
}


/* ==========================================================================
   16. BREADCRUMBS
   ========================================================================== */

/* Breadcrumbs (v6: 13px DM Sans, links #0e6a99, separator #9CA3AF, current #343434 500) */
.pp-breadcrumbs {
    padding: 16px 0;
    margin-bottom: 8px;
}

.pp-breadcrumbs ol {
    font-family: var(--pp-font-primary);
    font-size: var(--pp-small);
    color: var(--pp-text-tertiary);
}

.pp-breadcrumbs a {
    color: var(--pp-blue-dark);    /* v6: #0e6a99 */
    font-weight: 500;
    text-decoration: none;
}

.pp-breadcrumbs a:hover {
    color: var(--pp-text-link-hover);
    text-decoration: underline;
}

.pp-breadcrumbs .separator {
    margin: 0 8px;
    color: var(--pp-text-tertiary); /* v6: #9CA3AF */
}

.pp-breadcrumbs .current,
.pp-breadcrumbs [aria-current="page"] {
    color: var(--pp-text);          /* v6: #343434 */
    font-weight: 500;
}


/* ==========================================================================
   17. WOOCOMMERCE — CART & CHECKOUT
   ========================================================================== */

.woocommerce table.cart td,
.woocommerce table.cart th {
    font-family: var(--pp-font-primary);
}

/* Cart totals (v6: bg #F9FAFB, 0.5px border, 12px radius) */
.woocommerce .cart-collaterals .cart_totals {
    background: var(--pp-bg-secondary);
    border-radius: var(--pp-radius-lg);
    padding: 24px;
    border: 0.5px solid var(--pp-border);
}

/* Remove item link in cart (v6: #9CA3AF text, hover #ef4444) */
.woocommerce table.cart .product-remove a,
.woocommerce-cart table.cart .product-remove a {
    color: var(--pp-text-tertiary) !important;
    background: transparent !important;
    text-decoration: none;
    transition: color var(--pp-transition);
}
.woocommerce table.cart .product-remove a:hover,
.woocommerce-cart table.cart .product-remove a:hover {
    color: var(--pp-red) !important;
    background: transparent !important;
}

.woocommerce a.checkout-button,
.woocommerce button.checkout-button {
    background: var(--pp-red) !important;
    color: #FFFFFF !important;
    font-family: var(--pp-font-primary);
    font-weight: 600;
    border-radius: var(--pp-radius) !important;
    padding: 16px 32px !important;
    font-size: var(--pp-btn);
    transition: all var(--pp-transition);
}

.woocommerce a.checkout-button:hover,
.woocommerce button.checkout-button:hover {
    background: var(--pp-red-hover) !important;
    box-shadow: var(--pp-shadow);
}

/* Checkout form */
.woocommerce-checkout #payment #place_order {
    background: var(--pp-red);
    color: #FFFFFF;
    font-family: var(--pp-font-primary);
    font-weight: 600;
    font-size: var(--pp-btn);
    padding: 16px 32px;
    border-radius: var(--pp-radius);
    border: none;
    transition: all var(--pp-transition);
}

.woocommerce-checkout #payment #place_order:hover {
    background: var(--pp-red-hover);
    box-shadow: var(--pp-shadow);
}

/* Form fields (v6: 1.5px border, 10px 14px padding, 8px radius) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    padding: 10px 14px;
    font-family: var(--pp-font-primary);
    font-size: var(--pp-body);
    background: var(--pp-bg);
    color: var(--pp-text);
    transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
}

.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row textarea:hover,
.woocommerce form .form-row select:hover {
    border-color: var(--pp-border-hover);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--pp-blue);
    box-shadow: var(--pp-shadow-focus);
    outline: none;
}

.woocommerce form .form-row input.input-text:disabled,
.woocommerce form .form-row textarea:disabled,
.woocommerce form .form-row select:disabled {
    background: var(--pp-disabled-bg);
    color: var(--pp-disabled-text);
    cursor: not-allowed;
}

/* WC field error state (v6: red border + red shadow ring) */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: var(--pp-border-error);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text:focus,
.woocommerce form .form-row.woocommerce-invalid textarea:focus,
.woocommerce form .form-row.woocommerce-invalid select:focus {
    box-shadow: var(--pp-shadow-error);
}

/* Update cart / Apply coupon — dark button per DESIGN.md */
.woocommerce .cart button[name="update_cart"],
.woocommerce .cart .coupon button,
.woocommerce button.button[name="apply_coupon"] {
    background: var(--pp-dark) !important;
    color: #FFFFFF !important;
    font-family: var(--pp-font-primary);
    font-weight: 600;
    font-size: var(--pp-btn);
    border-radius: var(--pp-radius);
    padding: 12px 24px;
    border: none;
    transition: all var(--pp-transition);
}

.woocommerce .cart button[name="update_cart"]:hover,
.woocommerce .cart .coupon button:hover,
.woocommerce button.button[name="apply_coupon"]:hover {
    background: var(--pp-dark-mid) !important;
    box-shadow: var(--pp-shadow);
}

/* WooCommerce Notices — per DESIGN.md */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    font-family: var(--pp-font-primary);
    border-radius: var(--pp-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    border: none;
}

.woocommerce-message,
.woocommerce .woocommerce-message {
    background: var(--pp-success-tint) !important;
    border-left: 4px solid var(--pp-success) !important;
    color: var(--pp-text);
}

.woocommerce-error,
.woocommerce .woocommerce-error {
    background: var(--pp-error-tint) !important;
    border-left: 4px solid var(--pp-error) !important;
    color: var(--pp-text);
}

.woocommerce-info,
.woocommerce .woocommerce-info {
    background: var(--pp-info-tint) !important;
    border-left: 4px solid var(--pp-info) !important;
    color: var(--pp-text);
}

/* Mini cart */
.woocommerce .widget_shopping_cart .buttons a,
.woocommerce.widget_shopping_cart .buttons a {
    border-radius: var(--pp-radius);
    font-family: var(--pp-font-primary);
    font-weight: 600;
}

/* Cart count badge in header */
.cart-count,
.header-cart-count {
    background: var(--pp-red);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   18. BLOG & POSTS
   ========================================================================== */

.entry-title,
.post-title,
article h2 a {
    font-family: var(--pp-font-heading);
    color: var(--pp-primary);
    transition: color var(--pp-transition);
}

article h2 a:hover {
    color: var(--pp-accent-text);
}

.entry-meta,
.post-meta {
    font-size: var(--pp-small);
    color: var(--pp-medium-gray);
}




/* ==========================================================================
   20. DAILY DROP (countdown + deal cards)
   ========================================================================== */

.pp-daily-drop-strip {
    background: var(--pp-background);
    padding: 50px 0;
}

.pp-countdown {
    display: inline-flex;
    gap: 12px;
    margin-bottom: 24px;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.pp-countdown-unit {
    background: var(--pp-primary);
    color: #fff;
    border-radius: var(--pp-radius);
    padding: 10px 14px;
    text-align: center;
    min-width: 56px;
}

.pp-countdown-unit .number {
    display: block;
    font-family: var(--pp-font-heading);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.pp-countdown-unit .label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    margin-top: 4px;
}

.pp-deal-card {
    background: var(--pp-background);
    border: 1px solid var(--pp-light-gray);
    border-radius: var(--pp-radius-lg);
    padding: 20px;
    text-align: center;
    transition: all var(--pp-transition-slow);
}

.pp-deal-card:hover {
    border-color: var(--pp-accent);
    box-shadow: var(--pp-shadow-hover);
}

/* Deal badge — v6 Option C bordered (Sale color family: purple) */
.pp-deal-badge {
    display: inline-block;
    background: transparent;
    color: var(--pp-blue-text);
    border: 1px solid var(--pp-blue);
    font-family: var(--pp-font-primary);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 12px;
}


/* ==========================================================================
   21. RETATRUTIDE WAITLIST BANNER
   ========================================================================== */

.pp-waitlist-banner {
    background: var(--pp-primary);
    padding: 60px 0;
    text-align: center;
}

.pp-waitlist-banner h2 {
    font-family: var(--pp-font-heading);
    font-size: var(--pp-section-h2);
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
}

.pp-waitlist-banner p {
    color: rgba(255, 255, 255, 0.55);  /* v6 dark section body text */
    font-size: var(--pp-body-lg);
    max-width: 600px;
    margin: 0 auto 30px;
}


/* ==========================================================================
   22. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .pp-hero-content {
        text-align: center;
    }

    .pp-hero-text {
        max-width: 100%;
    }

    .pp-hero-text p {
        max-width: 100%;
    }

    .pp-hero-actions {
        justify-content: center;
    }

    .pp-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pp-trust-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .pp-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pp-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pp-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pp-trust-bar-top .pp-trust-bar-inner {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 10px;
    }

    .pp-trust-bar-search {
        flex: 1 1 100%;
        min-width: 0;
    }

    .pp-trust-bar-badges {
        justify-content: center;
        width: 100%;
        gap: 16px;
    }

    .pp-trust-bar-top .pp-trust-bar-separator {
        display: none;
    }

    .pp-trust-items {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .pp-category-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pp-specs-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pp-mega-menu .pp-container {
        grid-template-columns: 1fr !important;
    }

    .pp-grid-2,
    .pp-grid-3,
    .pp-grid-4 {
        grid-template-columns: 1fr;
    }

    .pp-btn {
        padding: 12px 24px;
        font-size: 14px;
    }

    .pp-countdown {
        gap: 8px;
    }

    .pp-countdown-unit {
        padding: 8px 10px;
        min-width: 48px;
    }

    .pp-countdown-unit .number {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .pp-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .pp-hero-actions .pp-btn {
        width: 100%;
        justify-content: center;
    }

    .pp-trust-items {
        grid-template-columns: 1fr;
    }

    .pp-specs-grid {
        grid-template-columns: 1fr;
    }

    .pp-trust-bar-top .pp-trust-bar-inner {
        flex-direction: column;
        gap: 4px;
    }
}


/* ==========================================================================
   23. DEAL GRID (Daily Drop cards)
   ========================================================================== */

.pp-deal-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.pp-deal-grid-full {
    grid-template-columns: repeat(4, 1fr);
}

.pp-deal-card h4 {
    font-family: var(--pp-font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--pp-primary);
    margin: 8px 0;
}

.pp-deal-img {
    border-radius: var(--pp-radius);
    overflow: hidden;
    margin-bottom: 8px;
}

.pp-deal-img img {
    width: 100%;
    height: auto;
    display: block;
}

.pp-deal-prices {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.pp-deal-old-price {
    text-decoration: line-through;
    color: var(--pp-medium-gray);
    font-size: var(--pp-small);
}

.pp-deal-price {
    color: var(--pp-accent-text);
    font-size: 18px;
    font-weight: 700;
    font-family: var(--pp-font-heading);
}

@media (max-width: 1024px) {
    .pp-deal-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .pp-deal-grid-full {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .pp-deal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pp-deal-grid-full {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .pp-deal-grid,
    .pp-deal-grid-full {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   23b. HOMEPAGE PRODUCT CARDS — Naturally-style cards with PP branding
   ========================================================================== */

/* Grid layouts */
.pp-product-grid {
    display: grid;
    gap: var(--pp-gap);
}

.pp-product-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.pp-product-grid-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.pp-product-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* Card container — image on top, info below, shared border */
/* v6 product card: 0.5px border, 12px radius, hover translateY(-3px) + shadow-md */
.pp-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 0.5px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    background: var(--pp-bg);
    transition: transform var(--pp-transition), border-color var(--pp-transition), box-shadow var(--pp-transition);
}

.pp-product-card:hover {
    transform: translateY(-3px);
    border-color: var(--pp-border-hover);
    box-shadow: var(--pp-shadow-md);
}

/* Legacy `.pp-product-card__link` wrapper was removed in favor of the
   stretched-link pattern (see `.pp-product-card__title-link::before`). */

/* Image area — top of card (v6: light bg #F5F4F7, 190-200px height) */
.pp-product-card__image {
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--pp-bg-product);
    min-height: 190px;
}

.pp-product-card__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Labels (badges) — v6: top-LEFT, Option C bordered, no fill */
.pp-product-card__labels {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

.pp-product-card__label {
    font-family: var(--pp-font-primary);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    border: 1px solid transparent;
    background: var(--pp-bg);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
}

/* Stock — In Stock color family (blue) */
.pp-product-card__label--stock {
    border-color: var(--pp-blue-mid);
    color: var(--pp-blue-dark);
}

/* Sale — purple per v6 Sale badge spec */
.pp-product-card__label--sale {
    border-color: var(--pp-blue);
    color: var(--pp-blue-text);
}

/* New — red per v6 New badge spec */
.pp-product-card__label--new {
    border-color: var(--pp-red);
    color: var(--pp-red-text);
}

/* Popular — dark per v6 Beginner color family */
.pp-product-card__label--popular {
    border-color: var(--pp-dark);
    color: var(--pp-dark);
}

/* Out of stock — gray per v6 Out of Stock spec */
.pp-product-card__label--oos {
    border-color: var(--pp-border-hover);
    color: var(--pp-text-tertiary);
}

/* Out-of-stock card treatment — v6: opacity 0.7 */
.pp-product-card--oos {
    opacity: 0.7;
    filter: grayscale(30%);
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.pp-product-card--oos:hover {
    opacity: 0.85;
    filter: grayscale(0%);
}

/* Info area — bottom of card (v6: 14px sides, 16px bottom) */
.pp-product-card__body {
    padding: 14px 14px 16px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--pp-background);
}

.pp-product-card__body > * {
    width: 85%;
}

.pp-product-card__body > .pp-product-card__price-size-row,
.pp-product-card__body > .pp-product-card__rating-row {
    width: 85%;
}

.pp-product-card__category {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-text-link, #0e6a99);
    background: none;
    padding: 5px 14px;
    border-radius: var(--pp-radius-full, 9999px);
    border: 1px solid var(--pp-border, #E5E7EB);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
}

.pp-product-card__title {
    font-family: var(--pp-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0;
    padding: 4px 0 10px;
    text-align: center;
}

/* Price + Size row */
.pp-product-card__price-size-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 12px 0 14px;
    margin-bottom: 12px;
    border-top: 1px solid var(--pp-light-gray);
    border-bottom: 1px solid var(--pp-light-gray);
    width: 100%;
}

/* Rating row — badge + fractional stars + count, sits at the bottom of the card body */
.pp-product-card__rating-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
}

/* v6: product cards have NO rating number badge — only inline stars + count.
   Class kept defined in case it's used outside the card grid. */
.pp-product-card__rating-badge {
    display: none;
}
.pp-product-card__rating-row .pp-product-card__rating-badge {
    display: none;
}

.pp-product-card__rating-stars {
    position: relative;
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 3px;
}

.pp-product-card__rating-stars-empty {
    color: #E5E7EB;
}

.pp-product-card__rating-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--pp-blue, #1f9edb);
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

.pp-product-card__rating-count {
    font-size: 15px;
    color: var(--pp-text-secondary, #6B7280);
}

/* Size dropdown */
.pp-product-card__sizes {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.pp-product-card__size-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pp-product-card__size-select {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text);
    background: transparent;
    border: none;
    padding: 4px 24px 4px 0;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
}

.pp-product-card__size-select:focus {
    outline: none;
}

/* ==========================================================================
   CART + CHECKOUT — Floating-label form fields (Tailwind-style)
   Coupon, shipping calculator, billing/shipping address, account, order
   notes — every WC `.form-row` input gets a floating label notched into its
   top-left outline plus a brand-purple focus ring. Mirrors the snippet:
       <div class="relative">
           <label class="absolute -top-2 left-2 bg-white px-1 text-xs ...">
           <input class="outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:outline-indigo-600 ..." />
       </div>
   ========================================================================== */

.woocommerce-cart .coupon,
.woocommerce-cart .shipping-calculator-form .form-row,
.woocommerce-cart .woocommerce-shipping-calculator .form-row,
.woocommerce-checkout form.checkout .form-row,
.woocommerce-checkout form.woocommerce-checkout .form-row,
.woocommerce-checkout #order_review .form-row {
    position: relative;
}

/* Floating label sits on the top edge of the input outline. The white
   background "punches" the outline behind it so the label looks notched in. */
.woocommerce-cart .coupon label[for="coupon_code"],
.woocommerce-cart .shipping-calculator-form .form-row > label,
.woocommerce-cart .woocommerce-shipping-calculator .form-row > label,
.woocommerce-checkout form.checkout .form-row > label,
.woocommerce-checkout form.woocommerce-checkout .form-row > label,
.woocommerce-checkout #order_review .form-row > label {
    position: absolute;
    top: -8px;
    left: 10px;
    z-index: 1;
    display: inline-block;
    margin: 0;
    padding: 0 6px;
    background: #FFFFFF;
    color: var(--pp-text);
    font-family: var(--pp-font-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    pointer-events: none;
    /* Override the WC `screen-reader-text` mixin that visually hides certain
       labels (e.g. the coupon label) by default. */
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
}

/* Hide the required-asterisk inside the floating label — looks noisy in the
   compact pill style. The field is still keyboard/A11Y required via aria. */
.woocommerce-cart .coupon label[for="coupon_code"] .required,
.woocommerce-cart .shipping-calculator-form .form-row > label .required,
.woocommerce-cart .woocommerce-shipping-calculator .form-row > label .required,
.woocommerce-checkout form.checkout .form-row > label .required,
.woocommerce-checkout form.woocommerce-checkout .form-row > label .required,
.woocommerce-checkout #order_review .form-row > label .required {
    display: none;
}

/* Inputs / selects / textareas — outline pattern, not border. Matches:
   `outline-1 -outline-offset-1` rest, `outline-2 -outline-offset-2` focus. */
.woocommerce-cart input#coupon_code,
.woocommerce-cart .shipping-calculator-form input.input-text,
.woocommerce-cart .shipping-calculator-form select,
.woocommerce-cart .woocommerce-shipping-calculator input.input-text,
.woocommerce-cart .woocommerce-shipping-calculator select,
.woocommerce-checkout form.checkout .form-row input.input-text,
.woocommerce-checkout form.checkout .form-row textarea,
.woocommerce-checkout form.checkout .form-row select,
.woocommerce-checkout form.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout form.woocommerce-checkout .form-row textarea,
.woocommerce-checkout form.woocommerce-checkout .form-row select,
.woocommerce-checkout #order_review .form-row input.input-text,
.woocommerce-checkout #order_review .form-row textarea {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    background: #FFFFFF;
    color: var(--pp-text);
    font-family: var(--pp-font-primary);
    font-size: 15px;
    line-height: 1.4;
    border: 0;
    outline: 1px solid var(--pp-border);
    outline-offset: -1px;
    border-radius: var(--pp-radius-md);
    box-shadow: none;
    transition: outline-color 0.15s ease;
}

.woocommerce-cart input#coupon_code:focus,
.woocommerce-cart .shipping-calculator-form input.input-text:focus,
.woocommerce-cart .shipping-calculator-form select:focus,
.woocommerce-cart .woocommerce-shipping-calculator input.input-text:focus,
.woocommerce-cart .woocommerce-shipping-calculator select:focus,
.woocommerce-checkout form.checkout .form-row input.input-text:focus,
.woocommerce-checkout form.checkout .form-row textarea:focus,
.woocommerce-checkout form.checkout .form-row select:focus,
.woocommerce-checkout form.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout form.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout form.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout #order_review .form-row input.input-text:focus,
.woocommerce-checkout #order_review .form-row textarea:focus {
    outline: 2px solid var(--pp-blue);
    outline-offset: -2px;
    box-shadow: none;
}

.woocommerce-cart input#coupon_code::placeholder,
.woocommerce-cart .shipping-calculator-form input.input-text::placeholder,
.woocommerce-checkout form.checkout .form-row input.input-text::placeholder,
.woocommerce-checkout form.checkout .form-row textarea::placeholder,
.woocommerce-checkout form.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout form.woocommerce-checkout .form-row textarea::placeholder {
    color: var(--pp-text-tertiary);
}

/* Order notes textarea wants a bit more room */
.woocommerce-checkout form.checkout .form-row textarea,
.woocommerce-checkout form.woocommerce-checkout .form-row textarea {
    min-height: 96px;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1.5;
    resize: vertical;
}

/* Country/state Select2 dropdowns (WC enhances <select> with Select2) */
.woocommerce-cart .select2-container--default .select2-selection--single,
.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 42px;
    padding: 6px 4px;
    background: #FFFFFF;
    border: 0;
    outline: 1px solid var(--pp-border);
    outline-offset: -1px;
    border-radius: var(--pp-radius-md);
    transition: outline-color 0.15s ease;
}

.woocommerce-cart .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-cart .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single {
    outline: 2px solid var(--pp-blue);
    outline-offset: -2px;
}

.woocommerce-cart .select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--pp-text);
    line-height: 28px;
    padding: 0 30px 0 10px;
}

.woocommerce-cart .select2-container--default .select2-selection--single .select2-selection__arrow,
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 8px;
}

/* Spacing — give each form-row enough top breathing room so the floating
   label doesn't collide with whatever sits above. */
.woocommerce-checkout form.checkout .form-row,
.woocommerce-checkout form.woocommerce-checkout .form-row,
.woocommerce-checkout #order_review .form-row {
    margin-top: 14px;
}

/* Hide the "Update cart" button — the cart auto-updates on quantity change
   via JS in functions.php. Less buttons, less decision fatigue. */
.woocommerce-cart button[name="update_cart"] {
    display: none !important;
}

/* Cart cross-sells — uses the homepage 4-up grid + branded card markup. */
.pp-cart-cross-sells {
    margin: 64px 0 24px;
    clear: both;
}
.pp-cart-cross-sells .pp-section-header {
    margin-bottom: 32px;
}

/* Static size — used when a product has exactly one size (or is simple).
   Visually matches the dropdown but with no caret or interactivity. */
.pp-product-card__size-static {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text);
    padding: 4px 0;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Prices */
.pp-product-card__prices {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pp-product-card__prices,
.pp-product-card__prices .amount,
.pp-product-card__prices .woocommerce-Price-amount {
    color: var(--pp-blue);
    font-size: var(--pp-card-price);
    font-weight: 600;
    font-family: var(--pp-font-heading);
}

/* Keep the $ in default text color and add a small gap before the number */
.pp-product-card__prices .woocommerce-Price-currencySymbol {
    color: var(--pp-text);
    margin-right: 3px;
}

.pp-product-card__price-old {
    text-decoration: line-through;
    color: var(--pp-medium-gray);
    font-size: 14px;
    font-weight: 400;
}

/* Top stack — quick actions row on top (centered), category badge below
   (centered). Permanent (no hover overlay). */
.pp-product-card__top-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 8px;
}

.pp-product-card__quick-actions {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    position: relative;
    z-index: 2;
}

.pp-product-card__quick-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
    background: transparent;
    color: var(--pp-text-secondary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    transition: color 0.15s ease;
    cursor: pointer;
}

.pp-product-card__quick-action:hover,
.pp-product-card__quick-action:focus-visible {
    color: var(--pp-blue);
    text-decoration: none;
}

.pp-product-card__quick-action--cart:hover {
    color: var(--pp-text);
}

.pp-product-card__quick-action--buy:hover {
    color: var(--pp-red);
}

.pp-product-card__quick-action svg {
    display: block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.pp-product-card__quick-action-label {
    display: block;
}

/* Stretched-link pattern: clicking anywhere on the card opens the product,
   except over the quick-action buttons (which sit above via z-index). */
.pp-product-card__title-link {
    color: inherit;
    text-decoration: none;
}

.pp-product-card__title-link:hover {
    color: var(--pp-blue);
    text-decoration: none;
}

.pp-product-card__title-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Interactive children inside the body (size dropdown, rating row links if any)
   need to outrank the stretched link. */
.pp-product-card__sizes,
.pp-product-card__rating-row {
    position: relative;
    z-index: 2;
}

/* Responsive */
@media (max-width: 1200px) {
    .pp-product-grid-4,
    .pp-product-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .pp-product-grid-3,
    .pp-product-grid-4,
    .pp-product-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .pp-product-grid-3,
    .pp-product-grid-4,
    .pp-product-grid-5 {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   24. THE LAB — Blog Preview Cards
   ========================================================================== */

.pp-lab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pp-gap);
}

/* v6 blog card: 0.5px border, 12px radius, 120px image area, dark gradient
   placeholder, Option C category badge, 15px title, 12px excerpt, "Read more →" link */
.pp-lab-card {
    background: var(--pp-bg);
    border: 0.5px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    transition: transform var(--pp-transition), border-color var(--pp-transition), box-shadow var(--pp-transition);
}

.pp-lab-card:hover {
    box-shadow: var(--pp-shadow-md);
    transform: translateY(-3px);
    border-color: var(--pp-border-hover);
}

.pp-lab-card-img {
    display: block;
    overflow: hidden;
    height: 180px;                  /* +50% from v6 120px */
    background: linear-gradient(135deg, var(--pp-dark) 0%, var(--pp-dark-mid) 100%);
}

.pp-lab-card-img img {
    width: 100%;
    height: 180px;                  /* +50% from v6 120px */
    object-fit: cover;
    transition: transform var(--pp-transition-slow);
}

.pp-lab-card:hover .pp-lab-card-img img {
    transform: scale(1.05);
}

/* Placeholder fallback — v6 dark abstract gradient */
.pp-lab-card-img--placeholder {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--pp-dark) 0%, var(--pp-dark-mid) 100%);
    color: rgba(255, 255, 255, 0.4);
}

.pp-lab-card-body {
    padding: 14px 12px;             /* v6: 12px sides, 14px bottom */
}

/* Category — v6 Option C bordered badge (Research color family default: purple) */
.pp-lab-card-cat {
    display: inline-block;
    font-family: var(--pp-font-primary);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--pp-blue-text);
    background: transparent;
    border: 1px solid var(--pp-blue);
    border-radius: var(--pp-radius-sm);
    padding: 3px 8px;
    margin-bottom: 8px;
}

/* Title — v6: 15px Space Grotesk 600, max 2 lines */
.pp-lab-card-body h3 {
    font-family: var(--pp-font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pp-lab-card-body h3 a {
    color: var(--pp-primary);
}

.pp-lab-card-body h3 a:hover {
    color: var(--pp-blue);
}

/* Excerpt — v6: 12px gray, max 2-3 lines */
.pp-lab-card-body p {
    font-size: 12px;
    color: var(--pp-text-secondary);
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer row — read time left, "Read more →" right */
.pp-lab-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--pp-font-primary);
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-blue-dark);     /* v6: text link uses #0e6a99 */
}

.pp-lab-card-link:hover {
    color: var(--pp-text-link-hover);
    text-decoration: underline;
}

.pp-lab-card-meta {
    font-size: 11px;                /* v6: read time 11px */
    color: var(--pp-text-tertiary);
    margin-top: 8px;
}

/* Full blog grid page — 3 columns, same compact 120px image area */
.pp-lab-grid--full {
    grid-template-columns: repeat(3, 1fr);
}

.pp-lab-grid--full .pp-lab-card-img img {
    height: 180px;
}

.pp-lab-grid--full .pp-lab-card-img--placeholder {
    height: 180px;
}

/* Pagination */
.pp-text-center .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--pp-radius-sm);
    font-size: var(--pp-small);
    font-weight: 600;
    color: var(--pp-text-secondary);
    border: 1px solid var(--pp-border);
    margin: 0 4px;
    transition: all var(--pp-transition);
}

.pp-text-center .page-numbers:hover {
    border-color: var(--pp-blue);
    color: var(--pp-blue);
}

.pp-text-center .page-numbers.current {
    background: var(--pp-blue);
    border-color: var(--pp-blue);
    color: #fff;
}

@media (max-width: 768px) {
    .pp-lab-grid,
    .pp-lab-grid--full {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   25. RESEARCH TOOLS — Shared Tool Page Styles
   ========================================================================== */

.pp-tool-page {
    padding: 60px 0;
}

.pp-tool-header {
    text-align: center;
    margin-bottom: 40px;
}

.pp-tool-header h1 {
    font-family: var(--pp-font-heading);
    font-size: var(--pp-section-h2);
    font-weight: 800;
    color: var(--pp-primary);
    margin-bottom: 12px;
}

.pp-tool-header p {
    font-size: var(--pp-body-lg);
    color: var(--pp-medium-gray);
    max-width: 640px;
    margin: 0 auto;
}


/* 26. RECONSTITUTION CALCULATOR — removed, replaced by Dose Calculator (see bottom of file) */


/* ==========================================================================
   27. PEPTIDE FINDER QUIZ
   ========================================================================== */

.pp-quiz {
    max-width: 640px;
    margin: 0 auto;
}

.pp-quiz-step {
    display: none;
}

.pp-quiz-step.active {
    display: block;
}

.pp-quiz-progress {
    height: 4px;
    background: var(--pp-light-gray);
    border-radius: 2px;
    margin-bottom: 30px;
    overflow: hidden;
}

.pp-quiz-progress-bar {
    height: 100%;
    background: var(--pp-accent);
    border-radius: 2px;
    transition: width var(--pp-transition-slow);
}

.pp-quiz-step h3 {
    margin-bottom: 8px;
}

.pp-quiz-step p {
    color: var(--pp-medium-gray);
    margin-bottom: 20px;
}

.pp-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp-quiz-option {
    display: block;
    width: 100%;
    padding: 16px 20px;
    background: var(--pp-background);
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    font-family: var(--pp-font-primary);
    font-size: var(--pp-body);
    font-weight: 500;
    color: var(--pp-text);
    text-align: left;
    cursor: pointer;
    transition: all var(--pp-transition);
}

.pp-quiz-option:hover {
    border-color: var(--pp-accent);
    background: var(--pp-off-white);
    color: var(--pp-accent-text);
}

.pp-quiz-option.selected {
    border-color: var(--pp-accent);
    background: rgba(31, 158, 219, 0.1);
    color: var(--pp-accent-text);
    font-weight: 600;
}


/* ==========================================================================
   28. RESEARCH STACK BUILDER
   ========================================================================== */

.pp-stack-columns {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: start;
}

.pp-stack-catalog,
.pp-stack-cart {
    background: var(--pp-off-white);
    border: 1px solid var(--pp-light-gray);
    border-radius: var(--pp-radius-lg);
    padding: 24px;
}

.pp-stack-catalog h3,
.pp-stack-cart h3 {
    font-size: 18px;
    margin-bottom: 16px;
}

.pp-stack-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.pp-stack-filter {
    padding: 6px 14px;
    border: 1px solid var(--pp-light-gray);
    border-radius: 50px;
    background: var(--pp-background);
    font-family: var(--pp-font-primary);
    font-size: var(--pp-xs);
    font-weight: 600;
    color: var(--pp-medium-gray);
    cursor: pointer;
    transition: all var(--pp-transition);
}

.pp-stack-filter:hover,
.pp-stack-filter.active {
    background: var(--pp-primary);
    color: #fff;
    border-color: var(--pp-primary);
}

.pp-stack-product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--pp-light-gray);
}

.pp-stack-product-item:last-child {
    border-bottom: none;
}

.pp-stack-product-name {
    flex: 1;
    font-size: var(--pp-small);
    font-weight: 500;
    color: var(--pp-text);
}

.pp-stack-product-price {
    font-size: var(--pp-small);
    font-weight: 700;
    color: var(--pp-primary);
}

.pp-stack-add-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--pp-light-gray);
    background: var(--pp-background);
    color: var(--pp-accent-text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--pp-transition);
}

.pp-stack-add-btn:hover {
    background: var(--pp-accent);
    color: #FFFFFF;
    border-color: var(--pp-accent);
}

.pp-stack-empty {
    font-size: var(--pp-small);
    color: var(--pp-medium-gray);
    text-align: center;
    padding: 30px 0;
}

.pp-stack-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 2px solid var(--pp-light-gray);
    margin-top: 16px;
    font-size: var(--pp-body);
    font-weight: 600;
}

.pp-stack-total strong {
    font-family: var(--pp-font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--pp-accent-text);
}

@media (max-width: 768px) {
    .pp-stack-columns {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   29. COA LIBRARY TABLE
   ========================================================================== */

.pp-coa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pp-small);
}

.pp-coa-table thead {
    background: var(--pp-off-white);
}

.pp-coa-table th {
    font-family: var(--pp-font-heading);
    font-size: var(--pp-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pp-medium-gray);
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid var(--pp-light-gray);
}

.pp-coa-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pp-light-gray);
    color: var(--pp-text);
    vertical-align: middle;
}

.pp-coa-table tbody tr:hover {
    background: var(--pp-off-white);
}

.pp-coa-table a {
    color: var(--pp-accent-text);
    font-weight: 600;
}

.pp-coa-download-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--pp-success);
    color: #fff !important;
    border-radius: 4px;
    font-size: var(--pp-xs);
    font-weight: 700;
}

.pp-coa-download-link:hover {
    background: var(--pp-success);
    color: #fff !important;
}

@media (max-width: 768px) {
    .pp-coa-table {
        display: block;
        overflow-x: auto;
    }
}


/* ==========================================================================
   30. FAQ PAGE
   ========================================================================== */

.pp-faq-category {
    margin-bottom: 40px;
}

.pp-faq-category h2 {
    font-size: 22px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--pp-light-gray);
}

.pp-faq-item {
    border: 1px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color var(--pp-transition);
}

.pp-faq-item[open] {
    border-color: var(--pp-accent);
}

.pp-faq-question {
    padding: 16px 20px;
    font-family: var(--pp-font-primary);
    font-size: var(--pp-body);
    font-weight: 600;
    color: var(--pp-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--pp-transition);
}

.pp-faq-question:hover {
    background: var(--pp-off-white);
}

.pp-faq-question::-webkit-details-marker {
    display: none;
}

.pp-faq-question::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: var(--pp-medium-gray);
    transition: transform var(--pp-transition);
}

.pp-faq-item[open] .pp-faq-question::after {
    content: '\2212';
    color: var(--pp-accent-text);
}

.pp-faq-answer {
    padding: 0 20px 16px;
    font-size: var(--pp-small);
    color: var(--pp-medium-gray);
    line-height: 1.7;
}

.pp-faq-answer p {
    margin: 0;
    color: inherit;
}


/* ==========================================================================
   31. VIP / REWARDS PAGE
   ========================================================================== */

.pp-vip-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pp-gap);
}

.pp-vip-tier {
    background: var(--pp-background);
    border: 1px solid var(--pp-light-gray);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--pp-transition);
}

.pp-vip-tier:hover {
    box-shadow: var(--pp-shadow-hover);
}

.pp-vip-tier-header {
    padding: 24px;
    text-align: center;
}

.pp-vip-tier-header h3 {
    font-size: 20px;
    margin-bottom: 4px;
}

.pp-vip-spend {
    font-size: var(--pp-small);
    font-weight: 600;
    color: var(--pp-medium-gray);
}

.pp-vip-perks {
    list-style: none;
    margin: 0;
    padding: 0 24px 24px;
}

.pp-vip-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: var(--pp-small);
    color: var(--pp-text);
    border-bottom: 1px solid var(--pp-light-gray);
}

.pp-vip-perks li:last-child {
    border-bottom: none;
}

.pp-vip-perks li svg {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .pp-vip-tiers {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   32. CONTACT PAGE
   ========================================================================== */

.pp-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: start;
}

.pp-contact-card {
    background: var(--pp-off-white);
    border: 1px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    padding: 20px;
    margin-bottom: 16px;
}

.pp-contact-card h4 {
    margin-bottom: 8px;
}

.pp-contact-card a {
    font-weight: 600;
}

.pp-contact-form h3 {
    margin-bottom: 20px;
}

.pp-form-row {
    margin-bottom: 16px;
}

.pp-form-row label {
    display: block;
    font-size: var(--pp-small);
    font-weight: 600;
    color: var(--pp-primary);
    margin-bottom: 6px;
}

.pp-form-row input,
.pp-form-row select,
.pp-form-row textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    font-family: var(--pp-font-primary);
    font-size: var(--pp-body);
    color: var(--pp-text);
    background: var(--pp-background);
    transition: border-color var(--pp-transition);
}

.pp-form-row input:focus,
.pp-form-row select:focus,
.pp-form-row textarea:focus {
    outline: none;
    border-color: var(--pp-accent);
    box-shadow: 0 0 0 3px rgba(31, 158, 219, 0.2);
}

@media (max-width: 768px) {
    .pp-contact-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   33. ABOUT PAGE
   ========================================================================== */

.pp-about-card {
    background: var(--pp-bg, #ffffff);
    border: 1px solid var(--pp-border, #E5E7EB);
    border-radius: var(--pp-radius-lg, 12px);
    padding: 28px;
}

.pp-about-card h3,
.pp-about-card h4 {
    font-family: var(--pp-font-heading);
    color: var(--pp-text, #343434);
    margin-bottom: 12px;
}

.pp-about-card p {
    font-size: 14px;
    color: var(--pp-text-secondary, #6B7280);
    line-height: 1.7;
    margin: 0 0 8px;
}

.pp-about-card p:last-child {
    margin-bottom: 0;
}

.pp-about-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pp-blue-tint, #E8F4FB);
    border-radius: var(--pp-radius-md, 8px);
    color: var(--pp-blue, #1f9edb);
    margin-bottom: 16px;
}

/* About page: section header */
.pp-about-section-header {
    text-align: center;
    margin-bottom: 40px;
}

.pp-about-section-header h2 {
    font-family: var(--pp-font-heading);
    color: var(--pp-text, #343434);
    margin: 0;
}

.pp-about-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pp-blue, #1f9edb);
    margin-bottom: 8px;
}

/* About page: Hero */
.pp-about-hero {
    position: relative;
    min-height: 480px;
    overflow: hidden;
}

.pp-about-hero-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

.pp-about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(52, 52, 52, 0.85), rgba(52, 52, 52, 0.4));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 60px;
    max-width: 700px;
}

.pp-about-hero-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pp-blue, #1f9edb);
    margin-bottom: 16px;
}

.pp-about-hero h1 {
    color: #fff;
    font-family: var(--pp-font-heading);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    margin: 0 0 16px;
}

.pp-about-hero p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}

/* About page: Photo gallery 2x2 */
.pp-about-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pp-about-gallery img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: var(--pp-radius-lg, 12px);
}

/* About page: Split layout (text + image) */
.pp-about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.pp-about-split--reverse .pp-about-split-text {
    order: 2;
}

.pp-about-split--reverse .pp-about-split-img {
    order: 1;
}

.pp-about-split-text h2 {
    font-family: var(--pp-font-heading);
    color: var(--pp-text, #343434);
    margin: 8px 0 20px;
}

.pp-about-split-text p {
    font-size: 15px;
    color: var(--pp-text-secondary, #6B7280);
    line-height: 1.7;
    margin-bottom: 14px;
}

.pp-about-split-img img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--pp-radius-lg, 12px);
}

/* About page: Counters */
.pp-about-counters-section {
    padding: 60px 0;
}

.pp-about-counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

.pp-about-counter-num {
    display: block;
    font-family: var(--pp-font-heading);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
}

.pp-about-counter-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* About page: Parallax section */
.pp-about-parallax {
    position: relative;
    min-height: 400px;
    overflow: hidden;
}

.pp-about-parallax-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.pp-about-parallax-overlay {
    position: absolute;
    inset: 0;
    background: rgba(52, 52, 52, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

.pp-about-parallax-overlay h2 {
    color: #fff;
    font-family: var(--pp-font-heading);
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.4;
    margin: 0 0 16px;
}

.pp-about-parallax-overlay p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 17px;
    margin: 0;
}

/* About page: Responsive */
@media (max-width: 768px) {
    .pp-about-hero-overlay {
        padding: 32px 20px;
    }

    .pp-about-gallery {
        grid-template-columns: 1fr;
    }

    .pp-about-gallery img {
        height: 200px;
    }

    .pp-about-split {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pp-about-split--reverse .pp-about-split-text,
    .pp-about-split--reverse .pp-about-split-img {
        order: unset;
    }

    .pp-about-split-img img {
        height: 260px;
    }

    .pp-about-counters {
        grid-template-columns: 1fr 1fr;
    }

    .pp-about-parallax-overlay {
        padding: 32px 20px;
    }
}

@media (max-width: 480px) {
    .pp-about-counters {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pp-about-hero-img,
    .pp-about-hero {
        min-height: 360px;
        height: 360px;
    }
}


/* ==========================================================================
   34. CUSTOM FOOTER
   ========================================================================== */

/* v6 footer: dark bg #343434, white headings 11px uppercase 0.5px,
   rgba white links, A8D8EA hover, rgba white disclaimer */
.pp-footer {
    background: var(--pp-dark);
    color: rgba(255, 255, 255, 0.5);
    padding: 60px 0 0;
    border-top: none;
}

.pp-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1.8fr 1fr 1.2fr;
    gap: 40px;
}

/* Column headings — v6: white, 11px, uppercase, 0.5px letter-spacing, weight 600 */
.pp-footer .pp-footer-col h4,
.pp-footer-col h4 {
    font-family: var(--pp-font-primary);
    font-size: 11px;
    font-weight: 600;
    color: #FFFFFF !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.pp-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pp-footer-col ul li {
    margin-bottom: 8px;
}

/* Shop column (2nd .pp-footer-col): render the 8 links as 4+4 across two
   sub-columns so the footer doesn't stack tall. Single sub-column on mobile. */
.pp-footer-col:nth-child(2) ul {
    column-count: 2;
    column-gap: 24px;
}
.pp-footer-col:nth-child(2) ul li {
    break-inside: avoid;
}
@media (max-width: 768px) {
    .pp-footer-col:nth-child(2) ul {
        column-count: 1;
    }
}

/* Footer links — v6: rgba(255,255,255,0.5) at 12px, hover #1f9edb */
.pp-footer-col ul li a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    transition: color var(--pp-transition);
}

.pp-footer-col ul li a:hover {
    color: var(--pp-blue);              /* v6: #1f9edb */
}

.pp-footer-logo {
    font-family: var(--pp-font-heading);
    font-size: 28px;
    font-weight: 800;
}

/* Logo: 'Pro' switches to white on dark footer bg; 'Peptide' stays purple */
.pp-footer-logo .pp-logo-pro {
    color: #FFFFFF;
}

.pp-footer-logo .pp-logo-peptide {
    color: var(--pp-blue);      /* lighter purple for better contrast on dark */
}

/* Social icons — translucent white on dark, purple on hover */
.pp-footer-social a {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--pp-transition);
}

.pp-footer-social a:hover {
    color: #FFFFFF;
    background: var(--pp-blue);
}

/* Disclaimer — v6: 10px rgba(255,255,255,0.3), divider rgba(255,255,255,0.1) */
.pp-footer-disclaimer {
    text-align: center;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    padding: 24px;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .pp-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .pp-footer-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   DOSE CALCULATOR — clean stacked layout
   ========================================================================== */

/* Override parent theme narrow container on dose calc pages */
.page-template-template-fullwidth-tool #nt-page {
    padding: 0;
}

.page-template-template-fullwidth-tool .nt-theme-content {
    max-width: none;
    padding: 0;
}

.ppdc {
    background: #ffffff;
    min-height: 100vh;
}

.ppdc-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 24px 60px;
}

/* ---- Card Grid Layout ---- */
.ppdc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.ppdc-card {
    background: var(--pp-bg, #ffffff);
    border: 1px solid var(--pp-border, #E5E7EB);
    border-radius: var(--pp-radius-lg, 12px);
    box-shadow: var(--pp-shadow-sm, 0 1px 2px rgba(52, 52, 52, 0.05));
    padding: 28px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ppdc-card:hover {
    box-shadow: var(--pp-shadow-md, 0 4px 12px rgba(52, 52, 52, 0.08));
    transform: translateY(-2px);
}

.ppdc-card-half {
    grid-column: span 2;
}

.ppdc-card-full {
    grid-column: 1 / -1;
}

.ppdc-card-header {
    font-family: var(--pp-font-heading, 'Space Grotesk', sans-serif);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--pp-text-secondary, #6B7280);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pp-border, #E5E7EB);
}

/* Steps inside cards: remove bottom margin */
.ppdc-card .ppdc-step {
    margin-bottom: 0;
}

/* Hide step headings inside cards (replaced by card headers) */
.ppdc-card .ppdc-q {
    display: none;
}

/* Separator between stacked steps in same card */
.ppdc-card .ppdc-step + .ppdc-step {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--pp-border, #E5E7EB);
}

/* Results card wrapper: transparent, let inner card style itself */
.ppdc-card-results {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.ppdc-card-results:hover {
    box-shadow: none;
    transform: none;
}

/* Hero */
.ppdc-hero {
    text-align: center;
    margin-bottom: 48px;
}

.ppdc-hero h1 {
    font-family: var(--pp-font-heading);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: var(--pp-primary);
    margin-bottom: 8px;
}

.ppdc-hero p {
    font-size: 16px;
    color: var(--pp-medium-gray);
    font-weight: 400;
}

/* Steps */
.ppdc-step {
    margin-bottom: 40px;
}

.ppdc-q {
    font-family: var(--pp-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--pp-primary);
    margin-bottom: 16px;
}

.ppdc-hint {
    font-size: 14px;
    color: var(--pp-medium-gray);
    margin-top: -8px;
    margin-bottom: 14px;
}

.ppdc-sub-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--pp-medium-gray);
    margin-bottom: 8px;
    margin-top: 16px;
}

/* Option buttons (like the job status screenshot) */
.ppdc-opt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ppdc-opt-grid.ppdc-opt-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.ppdc-opt {
    padding: 14px 18px;
    background: #ffffff;
    border: 1.5px solid var(--pp-border, #E5E7EB);
    border-radius: var(--pp-radius-md, 8px);
    font-family: var(--pp-font-primary);
    font-size: 15px;
    font-weight: 500;
    color: var(--pp-text);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.ppdc-opt:hover {
    border-color: var(--pp-border-hover, #D1D5DB);
}

.ppdc-opt.active {
    border-color: var(--pp-blue, #1f9edb);
    background: #ffffff;
    color: var(--pp-blue, #1f9edb);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--pp-blue, #1f9edb);
}

/* Condition buttons when flagged */
.ppdc-cond-btn.active {
    border-color: var(--pp-accent);
    color: var(--pp-accent-text);
    background: #fff;
    box-shadow: 0 0 0 1px var(--pp-accent);
}

/* Search input */
.ppdc-dd {
    position: relative;
}

.ppdc-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--pp-border, #E5E7EB);
    border-radius: var(--pp-radius-md, 8px);
    font-family: var(--pp-font-primary);
    font-size: 16px;
    font-weight: 500;
    color: var(--pp-text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #ffffff;
    box-sizing: border-box;
}

.ppdc-input:hover {
    border-color: var(--pp-border-hover, #D1D5DB);
}

.ppdc-input:focus {
    border-color: var(--pp-border-focus, #1f9edb);
    box-shadow: var(--pp-shadow-focus, 0 0 0 3px rgba(31, 158, 219, 0.25));
}

.ppdc-input::placeholder {
    color: #b8bac6;
}

.ppdc-input-sm {
    max-width: 160px;
}

/* Dropdown */
#ppdc-dd-list,
#pprt-dc-dd-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 400px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--pp-border, #E5E7EB);
    border-radius: var(--pp-radius-lg, 12px);
    margin-top: 6px;
    z-index: 9999;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    display: none;
}

.ppdc-dd-cat {
    padding: 10px 18px;
    font-size: 11px;
    font-weight: 700;
    color: var(--pp-accent-text);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: var(--pp-off-white);
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
}

.ppdc-dd-item {
    padding: 13px 18px;
    cursor: pointer;
    transition: background 0.12s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f7;
}

.ppdc-dd-item:hover,
.ppdc-dd-item.active {
    background: var(--pp-off-white);
}

/* Out of stock items in dropdown */
.ppdc-dd-item-oos {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
.ppdc-dd-item-oos .ppdc-dd-img,
.ppdc-dd-item-oos .ppdc-dd-goal-tag {
    filter: grayscale(0.6);
}

.ppdc-dd-cat-oos {
    color: #9CA3AF;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ppdc-dd-cat-oos::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9CA3AF;
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-1px);
}

.ppdc-dd-oos-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    background: #F3F4F6;
    color: #6B7280;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ppdc-dd-n {
    font-size: 15px;
    font-weight: 500;
    color: var(--pp-text);
}

.ppdc-dd-c {
    font-size: 12px;
    color: var(--pp-medium-gray);
}

/* Vial pills */
#ppdc-vials {
    display: none;
}

.ppdc-vial-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ppdc-vp {
    padding: 10px 16px;
    border: 1.5px solid var(--pp-border, #E5E7EB);
    border-radius: var(--pp-radius-md, 8px);
    font-family: var(--pp-font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-text-secondary, #6B7280);
    cursor: pointer;
    transition: all 0.15s;
    background: #ffffff;
}

.ppdc-vp:hover {
    border-color: var(--pp-border-hover, #D1D5DB);
}

.ppdc-vp.active {
    border-color: var(--pp-blue, #1f9edb);
    color: var(--pp-blue, #1f9edb);
    box-shadow: 0 0 0 1px var(--pp-blue, #1f9edb);
}

/* Field groups */
.ppdc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ppdc-fields-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Floating label on border */
.ppdc-field {
    position: relative;
}

.ppdc-field label {
    position: absolute;
    top: -8px;
    left: 12px;
    background: #ffffff;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-text-secondary, #6B7280);
    z-index: 1;
    line-height: 1;
    pointer-events: none;
}

/* When field wraps option buttons, add a border box around the content */
.ppdc-field > .ppdc-opt-grid {
    border: 1.5px solid var(--pp-border, #E5E7EB);
    border-radius: var(--pp-radius-md, 8px);
    padding: 20px 14px 14px;
}

/* Health screening hint inside field wrapper */
.ppdc-field > .ppdc-hint {
    font-size: 13px;
    color: var(--pp-text-secondary, #6B7280);
    margin: 0 0 12px;
}

/* Health screening: wrap the hint + grid in the border */
.ppdc-field:has(> .ppdc-hint) {
    border: 1.5px solid var(--pp-border, #E5E7EB);
    border-radius: var(--pp-radius-md, 8px);
    padding: 20px 14px 14px;
}

.ppdc-field:has(> .ppdc-hint) > label {
    top: -8px;
}

.ppdc-field:has(> .ppdc-hint) > .ppdc-opt-grid {
    border: none;
    padding: 0;
}

.ppdc-wt-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.ppdc-wt-row .ppdc-input {
    flex: 1;
    min-width: 0;
}

.ppdc-unit-toggle {
    display: flex;
    border: 1.5px solid var(--pp-border, #E5E7EB);
    border-radius: var(--pp-radius-md, 8px);
    overflow: hidden;
    flex-shrink: 0;
}

.ppdc-unit-btn {
    padding: 10px 14px;
    border: none;
    background: #ffffff;
    font-family: var(--pp-font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-medium-gray);
    cursor: pointer;
    transition: all 0.15s;
}

.ppdc-unit-btn.active {
    background: var(--pp-primary);
    color: #ffffff;
}

/* Results card */
.ppdc-step-results {
    margin-top: 8px;
}

.ppdc-res-card {
    background: #ffffff;
    border-radius: var(--pp-radius-lg, 12px);
    border: 1px solid var(--pp-border, #E5E7EB);
    box-shadow: var(--pp-shadow-sm, 0 1px 2px rgba(52, 52, 52, 0.05));
    overflow: hidden;
}

.ppdc-res-hd {
    padding: 24px 28px 20px;
    border-bottom: 1px solid #f0f0f2;
}

.ppdc-res-hd.ppdc-res-blocked {
    background: #fef2f2;
}

.ppdc-res-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--pp-medium-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.ppdc-res-title {
    font-family: var(--pp-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--pp-primary);
}

.ppdc-res-body {
    padding: 20px 28px;
}

.ppdc-res-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f7;
}

.ppdc-res-row:last-child {
    border-bottom: none;
}

.ppdc-rk {
    font-size: 14px;
    color: var(--pp-medium-gray);
}

.ppdc-rv {
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text);
    text-align: right;
    max-width: 55%;
}

/* Notes */
.ppdc-note {
    margin: 8px 28px 0;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.55;
}

.ppdc-note:last-of-type {
    margin-bottom: 20px;
}

.ppdc-note-tip {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.ppdc-note-age {
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #dbeafe;
}

.ppdc-note-sex {
    background: #faf5ff;
    color: #8b5cf6;
    border: 1px solid #ede9fe;
}

.ppdc-note-warn {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fef3c7;
}

.ppdc-note-cycwarn {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.ppdc-note-stop {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-weight: 500;
}

.ppdc-note-cost {
    background: #f0fdf4;
    color: #166534;                     /* v6: #7ccf4a on light bg fails WCAG, dark green required */
    border: 1px solid #bbf7d0;
}

.ppdc-note-block {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* Protocol button */
.ppdc-res-btn {
    display: block;
    width: calc(100% - 56px);
    margin: 16px 28px 24px;
    padding: 16px;
    background: var(--pp-blue, #1f9edb);
    color: #ffffff;
    border: none;
    border-radius: var(--pp-radius-md, 8px);
    font-family: var(--pp-font-heading);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ppdc-res-btn:hover {
    background: var(--pp-blue-hover, #1683b8);
}

.ppdc-res-btn.ppdc-btn-dim {
    opacity: 0.45;
}

/* Disclaimer */
.ppdc-disclaimer {
    margin-top: 48px;
    font-size: 12px;
    color: #b8bac6;
    text-align: center;
    line-height: 1.6;
}

/* Responsive: tablet — 2 columns */
@media (max-width: 1024px) {
    .ppdc-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ppdc-card-half {
        grid-column: span 1;
    }
}

/* Responsive: mobile — single column */
@media (max-width: 768px) {
    .ppdc-grid {
        grid-template-columns: 1fr;
    }

    .ppdc-card-half {
        grid-column: span 1;
    }

    .ppdc-card {
        padding: 24px 20px 20px;
    }

    .ppdc-wrap {
        padding: 32px 16px 48px;
    }
}

/* Responsive: small mobile */
@media (max-width: 480px) {
    .ppdc-wrap {
        padding: 24px 12px 40px;
    }

    .ppdc-card {
        padding: 20px 16px 16px;
    }

    .ppdc-opt-grid,
    .ppdc-opt-grid.ppdc-opt-3 {
        grid-template-columns: 1fr;
    }

    .ppdc-fields,
    .ppdc-fields-3 {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   UNIFIED RESEARCH TOOL (Quiz + Calculator)
   ========================================================================== */

.pprt-wrap {
    max-width: 1220px;
    margin: 0 auto;
    padding: 48px 20px 0;
}

.pprt-hero {
    text-align: center;
    margin-bottom: 32px;
}

.pprt-hero h1 {
    font-family: var(--pp-font-heading);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: var(--pp-primary);
    margin: 0 0 8px;
}

.pprt-hero p {
    font-size: 16px;
    color: var(--pp-medium-gray);
    margin: 0;
}

/* Profile card */
.pprt-card.pprt-card--profile {
    margin-bottom: 24px;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.pprt-unified-details {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-top: 0;
    margin-bottom: 0;
}

/* Grok auto-match results */
#pp-problem-results {
    margin-top: 16px;
}

#pp-problem-results:empty {
    margin-top: 0;
}

.pprt-loading {
    color: var(--pp-muted, #6B7280);
    font-style: italic;
}

.pprt-matched-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.pprt-problem-matches .pprt-chip.active {
    text-transform: capitalize;
}

/* Search card: outer chrome removed — the inner .pp-planner-search-input-wrap
   carries its own border, so the wrapper only contributes spacing now. */
.pprt-card.pprt-card--search {
    margin-bottom: 24px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* Search input inside card: borderless, compact */
.pprt-card--search .ppdc-float-input {
    border: none !important;
    padding: 2px 0;
    font-size: 15px;
    line-height: 1.2;
}

.pprt-card--search .ppdc-float-input:focus {
    box-shadow: none;
}

/* Goal filter row */
.pprt-goal-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.pprt-goal-btn {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--pp-border, #E5E7EB);
    background: #fff;
    font-family: var(--pp-font-primary);
    font-size: 12px;
    font-weight: 500;
    color: var(--pp-text-secondary, #6B7280);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pprt-goal-btn:hover {
    border-color: var(--pp-border-hover, #D1D5DB);
    color: var(--pp-text, #343434);
}

.pprt-goal-btn.active {
    background: var(--pp-blue, #1f9edb);
    border-color: var(--pp-blue, #1f9edb);
    color: #fff;
}

/* Goal tags in dropdown items */
.ppdc-dd-goals {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.ppdc-dd-goal-tag {
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    color: var(--pp-blue-text, #0e6a99);
    background: var(--pp-blue-tint, #E8F4FB);
    border-radius: 4px;
    line-height: 1.5;
}

.ppdc-float-field--compact {
    flex: 1;
    min-width: 120px;
}

.ppdc-float-field--compact select.ppdc-float-input {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    padding-right: 32px;
}

@media (max-width: 600px) {
    .pprt-card.pprt-card--profile {
        padding: 24px 16px 16px;
    }

    .ppdc-float-field--compact {
        min-width: 80px;
    }
}

/* DIVIDER: Generate Protocol */
.pprt-generate-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}

.pprt-divider-line {
    flex: 1;
    height: 1px;
    border-top: 2px dashed var(--pp-border);
}

/* BOTTOM: Full width results/calendar (breaks out of narrow wrapper) */
.pprt-results-full {
    width: 100%;
    padding: 32px 20px 60px;
}

.pprt-results-inner {
    max-width: 1400px;
    margin: 0 auto;
}

/* Protocol summary strip (3-column grid above calendar) */
.pprt-protocol-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--pp-border);
}

@media (max-width: 1024px) {
    .pprt-protocol-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pprt-protocol-strip {
        grid-template-columns: 1fr;
    }
}

.pprt-protocol-chip {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--pp-bg, #ffffff);
    border: 1px solid var(--pp-border, #E5E7EB);
    border-radius: var(--pp-radius-lg, 12px);
    font-size: 13px;
    color: var(--pp-text-secondary, #6B7280);
    line-height: 1.5;
    overflow: hidden;
}

/* Header: image + name */
.pprt-chip-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}

.pprt-chip-header strong {
    font-size: 16px;
    color: var(--pp-text, #343434);
    font-family: var(--pp-font-heading);
}

.pprt-chip-img {
    width: 40px;
    height: 40px;
    border-radius: var(--pp-radius-md, 8px);
    object-fit: cover;
    flex-shrink: 0;
}

/* Divider lines between sections */
.pprt-chip-divider {
    height: 1px;
    background: var(--pp-border, #E5E7EB);
}

/* Hero syringe section */
.pprt-chip-hero {
    padding: 12px 20px;
}

.pprt-chip-hero .pprt-syringe {
    max-width: 100%;
}

.pprt-chip-hero-label {
    display: block;
    font-size: 11px;
    color: var(--pp-blue-text, #0e6a99);
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Icon rows */
.pprt-chip-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 20px;
}

.pprt-chip-row svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--pp-text-secondary, #6B7280);
}

.pprt-chip-row span {
    font-size: 13px;
    color: var(--pp-text, #343434);
    line-height: 1.4;
}

/* ---- REALISTIC INSULIN SYRINGE ---- */
.pprt-syringe {
    display: flex;
    align-items: center;
    margin: 8px 0;
    height: 28px;
    max-width: 280px;
}

/* Orange needle cap */
.pprt-syringe__cap {
    width: 12px;
    height: 14px;
    background: linear-gradient(180deg, #F5A623 0%, #E8912D 50%, #D4801A 100%);
    border-radius: 4px 2px 2px 4px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Metal needle */
.pprt-syringe__needle {
    width: 22px;
    height: 1.5px;
    background: linear-gradient(90deg, #b0b0b0 0%, #d8d8d8 40%, #a8a8a8 100%);
    flex-shrink: 0;
    clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
}

/* Glass barrel */
.pprt-syringe__barrel {
    flex: 1;
    height: 22px;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(240,240,245,0.9) 20%,
        rgba(230,230,235,0.85) 50%,
        rgba(240,240,245,0.9) 80%,
        rgba(255,255,255,0.95) 100%
    );
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 2px;
    position: relative;
    overflow: visible;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.08),
        0 1px 2px rgba(0,0,0,0.06);
}

/* Liquid fill inside barrel */
.pprt-syringe__liquid {
    position: absolute;
    top: 1px;
    left: 0;
    bottom: 1px;
    border-radius: 1px;
    transition: width 0.4s ease;
    opacity: 0.6;
    background-image: linear-gradient(
        180deg,
        rgba(255,255,255,0.5) 0%,
        rgba(255,255,255,0.1) 40%,
        rgba(0,0,0,0.05) 100%
    );
    background-blend-mode: overlay;
}

/* Gloss reflection on glass */
.pprt-syringe__gloss {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Tick marks (every 10 IU) */
.pprt-syringe__tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 3;
}

.pprt-syringe__tick span {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    color: #333;
    font-family: var(--pp-font-heading);
}

/* Minor ticks (every 5 IU) */
.pprt-syringe__tick--minor {
    height: 40%;
    top: 30%;
    background: rgba(0,0,0,0.2);
}

.pprt-syringe__tick--minor span {
    display: none;
}

/* Plunger */
.pprt-syringe__plunger {
    width: 6px;
    height: 22px;
    background: linear-gradient(180deg, #e8e8e8, #d0d0d0, #e0e0e0);
    border: 1px solid rgba(0,0,0,0.15);
    border-left: none;
    border-radius: 0 2px 2px 0;
    flex-shrink: 0;
    position: relative;
}

.pprt-syringe__plunger-grip {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 28px;
    background: linear-gradient(180deg, #f0f0f0, #d8d8d8, #e8e8e8);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 2px;
}

.pprt-syringe__plunger-grip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: linear-gradient(180deg, #f5f5f5, #e0e0e0);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 50%;
}

/* IU label — shows actual draw amount */
.pprt-syringe__iu-label {
    font-size: 20px;
    font-weight: 800;
    color: var(--pp-blue);
    font-family: var(--pp-font-heading);
    white-space: nowrap;
    margin-left: 28px;
    min-width: 45px;
}

.pprt-syringe__iu-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-text-tertiary);
    vertical-align: baseline;
}

/* ---- Size variants ---- */

/* Large (protocol chips) */
.pprt-syringe--lg {
    height: 34px;
}

.pprt-syringe--lg .pprt-syringe__barrel {
    height: 28px;
}

.pprt-syringe--lg .pprt-syringe__cap {
    width: 16px;
    height: 18px;
}

.pprt-syringe--lg .pprt-syringe__plunger {
    height: 28px;
}

.pprt-syringe--lg .pprt-syringe__iu-label {
    font-size: 24px;
}

/* Small (week view) */
.pprt-syringe--sm {
    height: 18px;
    margin: 3px 0;
}

.pprt-syringe--sm .pprt-syringe__cap {
    width: 8px;
    height: 6px;
}

.pprt-syringe--sm .pprt-syringe__needle {
    width: 8px;
    height: 1px;
}

.pprt-syringe--sm .pprt-syringe__barrel {
    height: 14px;
}

.pprt-syringe--sm .pprt-syringe__tick span {
    display: none;
}

.pprt-syringe--sm .pprt-syringe__plunger {
    height: 14px;
    width: 4px;
}

.pprt-syringe--sm .pprt-syringe__plunger-grip {
    width: 2px;
    height: 18px;
    right: -6px;
}

.pprt-syringe--sm .pprt-syringe__plunger-grip::after {
    width: 8px;
    height: 8px;
    right: -4px;
}

.pprt-syringe--sm .pprt-syringe__iu-label {
    font-size: 11px;
    margin-left: 18px;
    min-width: 30px;
}

/* Notes footer */
.pprt-chip-note {
    font-size: 12px;
    color: var(--pp-text-tertiary, #9CA3AF);
    font-style: italic;
    padding: 12px 20px;
    line-height: 1.5;
}

/* Day view syringe callout */
.pprt-slot-syringe {
    font-size: 15px;
    color: var(--pp-blue);
    margin: 2px 0;
}

.pprt-slot-syringe strong {
    font-size: 17px;
    font-weight: 800;
}

.pprt-slot-dose-detail {
    font-size: 12px;
    color: var(--pp-text-tertiary);
}

/* Month view selected day syringe callout */
.pprt-day-detail__syringe {
    font-size: 13px;
    color: var(--pp-blue);
    margin-bottom: 2px;
}

.pprt-day-detail__syringe strong {
    font-weight: 800;
}

.pprt-day-detail__recon {
    font-size: 11px;
    color: var(--pp-blue-text);
    font-weight: 600;
    font-style: italic;
    margin-top: 3px;
}

/* Legend reconstitution and syringe info */
.pprt-legend-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.pprt-legend-recon,
.pprt-legend-syringe {
    font-size: 11px;
    color: var(--pp-text-tertiary);
}

.pprt-step-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Step cards */
.pprt-card {
    background: var(--pp-background);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg, 12px);
    padding: 28px;
    overflow: visible;
}

.pprt-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pprt-card-header h2 {
    font-family: var(--pp-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0;
}

.pprt-step-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pp-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.pprt-card-hint {
    font-size: 13px;
    color: var(--pp-text-secondary);
    margin: 0 0 16px;
}

/* (Old sidebar removed - results now in bottom layout) */

.pprt-preview-card {
    background: var(--pp-background);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg, 12px);
    overflow: hidden;
}

.pprt-preview-header {
    text-align: center;
    padding: 32px 24px 24px;
    border-bottom: 1px solid var(--pp-border);
}

.pprt-preview-header svg {
    margin-bottom: 12px;
}

.pprt-preview-card h3 {
    font-family: var(--pp-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0 0 8px;
}

.pprt-preview-subtitle {
    font-size: 13px;
    color: var(--pp-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.pprt-preview-body {
    padding: 20px 24px;
}

.pprt-preview-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--pp-bg-tertiary);
}

.pprt-preview-section:last-child {
    border-bottom: none;
}

.pprt-preview-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.pprt-preview-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text);
    text-align: right;
}

.pprt-preview-empty {
    color: var(--pp-text-tertiary);
    font-weight: 400;
    font-style: italic;
}

.pprt-preview-peptide {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.pprt-preview-peptide:last-child {
    margin-bottom: 0;
}

.pprt-preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pprt-preview-results {
    padding: 20px 24px;
    border-top: 1px solid var(--pp-border);
}

/* Toggle (hidden - replaced by unified search) */
.pprt-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.pprt-toggle {
    display: flex;
    position: relative;
    background: var(--pp-off-white);
    border: 2px solid var(--pp-light-gray);
    border-radius: 12px;
    padding: 4px;
    width: 100%;
    max-width: 420px;
}

.pprt-toggle-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: var(--pp-primary);
    border-radius: 8px;
    transition: transform 0.3s ease;
    z-index: 0;
}

.pprt-toggle-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: none;
    font-family: var(--pp-font-primary);
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-medium-gray);
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
    border-radius: 8px;
}

.pprt-toggle-btn.active {
    color: #FFFFFF;
}

/* Quiz Styles */
.pprt-progress {
    height: 4px;
    background: var(--pp-light-gray);
    border-radius: 2px;
    margin-bottom: 24px;
    overflow: hidden;
}

.pprt-progress-bar {
    height: 100%;
    background: var(--pp-accent);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.pprt-back {
    background: none;
    border: none;
    color: var(--pp-medium-gray);
    font-family: var(--pp-font-primary);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    margin-bottom: 16px;
    display: inline-block;
}

.pprt-back:hover {
    color: var(--pp-primary);
}

.pprt-q {
    font-family: var(--pp-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--pp-primary);
    margin: 0 0 20px;
}

.pprt-hint {
    font-weight: 400;
    font-size: 14px;
    color: var(--pp-medium-gray);
}

.pprt-sub {
    font-size: 15px;
    color: var(--pp-medium-gray);
    margin: -8px 0 16px;
}

/* Quiz option cards */
.pprt-opts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.pprt-opts.pprt-opts-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pprt-opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px;
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    background: var(--pp-background);
    cursor: pointer;
    font-family: var(--pp-font-primary);
    font-size: 15px;
    text-align: left;
    transition: border-color var(--pp-transition), background var(--pp-transition);
}

.pprt-opt:hover {
    border-color: var(--pp-accent);
    background: rgba(31, 158, 219, 0.04);
}

.pprt-opt.active {
    border-color: var(--pp-accent);
    background: rgba(31, 158, 219, 0.08);
}

.pprt-opt strong {
    color: var(--pp-primary);
    font-weight: 600;
}

.pprt-opt-sub {
    font-size: 13px;
    color: var(--pp-medium-gray);
    margin-top: 4px;
}

.pprt-opt-sm {
    padding: 12px 16px;
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    background: var(--pp-background);
    cursor: pointer;
    font-family: var(--pp-font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-text);
    transition: border-color var(--pp-transition), background var(--pp-transition);
}

.pprt-opt-sm:hover {
    border-color: var(--pp-accent);
}

.pprt-opt-sm.active {
    border-color: var(--pp-accent);
    background: rgba(31, 158, 219, 0.08);
    color: var(--pp-accent);
    font-weight: 600;
}

/* Symptom chips */
.pprt-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.pprt-chip {
    padding: 10px 14px;
    border: 2px solid var(--pp-light-gray);
    border-radius: 20px;
    background: var(--pp-background);
    cursor: pointer;
    font-family: var(--pp-font-primary);
    font-size: 13px;
    font-weight: 500;
    color: var(--pp-text);
    text-align: center;
    transition: all var(--pp-transition);
}

.pprt-chip:hover {
    border-color: var(--pp-accent);
}

.pprt-chip.active {
    border-color: var(--pp-accent);
    background: var(--pp-accent);
    color: #FFFFFF;
}

/* Continue / action buttons */
.pprt-continue {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: var(--pp-radius);
    background: var(--pp-accent);
    color: #FFFFFF;
    font-family: var(--pp-font-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pp-transition);
    margin-top: 8px;
}

.pprt-continue:hover {
    background: var(--pp-accent-hover);
}

.pprt-continue.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pprt-skip {
    display: block;
    width: 100%;
    padding: 12px 20px;
    border: none;
    background: none;
    color: var(--pp-medium-gray);
    font-family: var(--pp-font-primary);
    font-size: 14px;
    cursor: pointer;
    margin-top: 8px;
}

.pprt-skip:hover {
    color: var(--pp-primary);
}

.pprt-restart {
    background: var(--pp-primary);
    margin-top: 24px;
}

.pprt-restart:hover {
    background: var(--pp-primary);
    opacity: 0.9;
}

/* Quiz fields (age/sex step) */
.pprt-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.pprt-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-medium-gray);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pprt-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    font-family: var(--pp-font-primary);
    font-size: 16px;
    color: var(--pp-text);
    transition: border-color var(--pp-transition);
    box-sizing: border-box;
}

.pprt-input:focus {
    border-color: var(--pp-primary);
    outline: none;
}

.pprt-sex-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Goal search bar */
.pprt-goal-search {
    margin-bottom: 16px;
}

#pprt-dc-search {
    padding: 24px 18px;
    font-size: 16px;
}

/* 3-column about-you row */
.pprt-fields-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* No issues button */
.pprt-no-issues {
    margin-bottom: 12px;
}

.pprt-no-issues.active {
    border-color: var(--pp-success);
    background: rgba(142, 196, 74, 0.08);
}

.pprt-no-issues.active strong {
    color: #166534;                     /* v6: dark green for WCAG AA on light bg */
}

/* Condition search */
.pprt-cond-search-wrap {
    margin-bottom: 12px;
}

.pprt-cond-search {
    font-size: 15px;
}

/* Selected condition tags */
.pprt-cond-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.pprt-cond-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(31, 158, 219, 0.08);
    border: 1px solid var(--pp-accent);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pp-accent);
}

.pprt-cond-remove {
    background: none;
    border: none;
    color: var(--pp-accent);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-weight: 700;
}

.pprt-cond-remove:hover {
    color: var(--pp-accent-hover);
}

/* Condition list */
.pprt-cond-list {
    display: none;
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 8px;
}

.pprt-cond-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--pp-light-gray);
    background: var(--pp-background);
    font-family: var(--pp-font-primary);
    font-size: 14px;
    color: var(--pp-text);
    text-align: left;
    cursor: pointer;
    transition: background var(--pp-transition);
}

.pprt-cond-item:last-child {
    border-bottom: none;
}

.pprt-cond-item:hover {
    background: var(--pp-off-white);
}

.pprt-cond-item.selected {
    background: rgba(31, 158, 219, 0.06);
    color: var(--pp-accent);
    font-weight: 600;
}

/* No conditions button (dose calc) */
.pprt-dc-no-conds {
    width: 100%;
    padding: 14px 18px;
    margin-bottom: 12px;
    text-align: left;
    font-weight: 600;
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    background: var(--pp-background);
    font-family: var(--pp-font-primary);
    font-size: 15px;
    color: var(--pp-text);
    cursor: pointer;
    transition: all var(--pp-transition);
}

.pprt-dc-no-conds.active {
    border-color: var(--pp-success);
    background: rgba(142, 196, 74, 0.08);
    color: #166534;                     /* v6: dark green for WCAG AA on light bg */
}

.pprt-dc-cond-search-wrap {
    margin-bottom: 12px;
}

/* Rich dropdown items with images */
.ppdc-dd-item-rich {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.ppdc-dd-img {
    width: 40px;
    height: 40px;
    border-radius: var(--pp-radius-sm); /* v6: small thumbnail = 4px */
    object-fit: cover;
    flex-shrink: 0;
    background: var(--pp-off-white);
}

.ppdc-dd-img-placeholder {
    background: var(--pp-light-gray);
}

.ppdc-dd-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ppdc-dd-info .ppdc-dd-n {
    font-weight: 600;
    font-size: 14px;
    color: var(--pp-primary);
}

.ppdc-dd-info .ppdc-dd-c {
    font-size: 12px;
    color: var(--pp-medium-gray);
}

.ppdc-dd-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-accent);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Multi-peptide list */
.pprt-pep-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pprt-pep-empty {
    text-align: center;
    color: var(--pp-medium-gray);
    font-size: 14px;
    padding: 16px;
    border: none;
    border-radius: var(--pp-radius);
}

.pprt-pep-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #ffffff;
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    transition: border-color var(--pp-transition);
}

.pprt-pep-card:hover {
    border-color: var(--pp-primary);
}

.pprt-pep-num {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: var(--pp-primary, #343434);
    color: #ffffff;
    font-family: var(--pp-font-primary);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.pprt-pep-img {
    width: 44px;
    height: 44px;
    border-radius: var(--pp-radius-sm); /* v6: small thumbnail = 4px */
    object-fit: cover;
    flex-shrink: 0;
}

.pprt-pep-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pprt-pep-name {
    font-family: var(--pp-font-primary);
    font-weight: 600;
    font-size: 14px;
    color: var(--pp-primary);
}

.pprt-pep-cat {
    font-size: 12px;
    color: var(--pp-medium-gray);
}

.pprt-pep-remove {
    background: none;
    border: none;
    color: var(--pp-accent);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 4px;
    transition: background var(--pp-transition);
}

.pprt-pep-remove:hover {
    background: rgba(31, 158, 219, 0.1);
    color: var(--pp-accent-hover);
}

.pprt-pep-count {
    font-size: 12px;
    color: var(--pp-medium-gray);
    text-align: right;
    padding-top: 4px;
}

/* Protocols / Schedule toggle */
.pprt-view-toggle {
    display: flex;
    gap: 0;
    background: var(--pp-off-white);
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    padding: 3px;
    margin-bottom: 20px;
}

.pprt-view-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: none;
    font-family: var(--pp-font-primary);
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-medium-gray);
    cursor: pointer;
    border-radius: var(--pp-radius-md); /* v6: button = 8px */
    transition: all var(--pp-transition);
}

.pprt-view-btn.active {
    background: var(--pp-primary);
    color: #FFFFFF;
}

/* Calendar toggle (Day/Week/Month) */
.pprt-cal-toggle {
    display: flex;
    gap: 0;
    background: var(--pp-off-white);
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    padding: 3px;
    margin-bottom: 20px;
    max-width: 300px;
}

.pprt-cal-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: none;
    font-family: var(--pp-font-primary);
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-medium-gray);
    cursor: pointer;
    border-radius: 5px;
    transition: all var(--pp-transition);
}

.pprt-cal-btn.active {
    background: var(--pp-accent);
    color: #FFFFFF;
}

/* Day view */
/* ---- TIME GRID CALENDAR (Day + Week views) ---- */

/* Day view: main + sidebar layout */
.pprt-tg-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    min-height: 500px;
}

.pprt-tg-main {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg, 12px);
    overflow: hidden;
    background: #fff;
}

.pprt-tg-day-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pp-border);
    background: var(--pp-off-white);
}

.pprt-tg-day-title {
    font-family: var(--pp-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-text);
}

/* Time grid body */
.pprt-tg-body {
    position: relative;
    height: 720px;
    overflow-y: auto;
}

.pprt-tg-hour-row {
    display: flex;
    align-items: flex-start;
    height: 40px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.pprt-tg-hour-label {
    width: 60px;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--pp-text-tertiary, #999);
    text-align: right;
    padding-right: 12px;
    padding-top: 0;
    line-height: 1;
    transform: translateY(-6px);
}

.pprt-tg-hour-line {
    flex: 1;
    border-top: 1px solid rgba(0,0,0,0.06);
    height: 100%;
}

/* Event overlay */
.pprt-tg-events {
    position: absolute;
    top: 0;
    left: 60px;
    right: 8px;
    bottom: 0;
    pointer-events: none;
}

.pprt-tg-event {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: var(--pp-radius-sm); /* v6: chip = 4px */
    padding: 6px 10px;
    pointer-events: auto;
    overflow: hidden;
    cursor: default;
    transition: box-shadow 0.15s;
}

.pprt-tg-event:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 2;
}

.pprt-tg-ev-time {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 1px;
}

.pprt-tg-ev-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.pprt-tg-ev-syringe {
    font-size: 12px;
    color: var(--pp-blue);
}

.pprt-tg-ev-syringe strong {
    font-weight: 800;
}

.pprt-tg-ev-dose {
    font-size: 11px;
    font-weight: 600;
}

.pprt-tg-ev-dose-sm {
    font-size: 10px;
    color: var(--pp-text-tertiary, #999);
}

.pprt-tg-ev-recon {
    font-size: 10px;
    color: var(--pp-blue-text);
    font-weight: 600;
    font-style: italic;
}

.pprt-tg-ev-route {
    font-size: 10px;
    opacity: 0.7;
}

/* Sidebar */
.pprt-tg-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Mini month calendar */
.pprt-mini-cal {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg, 12px);
    padding: 16px;
    background: #fff;
}

.pprt-mini-cal__title {
    font-family: var(--pp-font-heading);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--pp-text);
}

.pprt-mini-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.pprt-mini-cal__dh {
    font-size: 10px;
    font-weight: 600;
    color: var(--pp-text-tertiary, #999);
    padding: 4px 0;
    text-transform: uppercase;
}

.pprt-mini-cal__cell {
    font-size: 12px;
    padding: 4px 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--pp-text);
    line-height: 24px;
    width: 24px;
    height: 24px;
    margin: 0 auto;
}

.pprt-mini-cal__cell:hover {
    background: var(--pp-off-white);
}

.pprt-mini-cal__today {
    background: var(--pp-blue);
    color: #fff !important;
    font-weight: 700;
}

.pprt-mini-cal__sel {
    outline: 2px solid var(--pp-blue);
    outline-offset: -2px;
    font-weight: 700;
}

/* Legend in sidebar */
.pprt-tg-legend {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg, 12px);
    padding: 16px;
    background: #fff;
}

.pprt-tg-legend h4 {
    font-family: var(--pp-font-heading);
    font-size: 14px;
    margin: 0 0 12px;
    color: var(--pp-text);
}

.pprt-tg-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.pprt-tg-legend-item:last-child {
    border-bottom: none;
}

.pprt-tg-legend-info {
    font-size: 12px;
    color: var(--pp-text-secondary);
    line-height: 1.5;
}

.pprt-tg-legend-info strong {
    color: var(--pp-text);
    font-size: 13px;
    display: block;
}

.pprt-tg-legend-syringe {
    color: var(--pp-blue);
    font-weight: 700;
    font-size: 13px;
}

.pprt-tg-legend-recon {
    font-size: 11px;
    color: var(--pp-text-tertiary);
    margin-top: 2px;
}

/* Full-width syringe inside sidebar legend */
.pprt-tg-legend-syringe-wrap .pprt-syringe {
    max-width: 100%;
}

.pprt-tg-legend-uses {
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-blue-text);
    margin-top: 4px;
}

/* ---- WEEK VIEW TIME GRID ---- */
.pprt-tg-week {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg, 12px);
    overflow: hidden;
    background: #fff;
}

.pprt-tg-week-header {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    border-bottom: 1px solid var(--pp-border);
    background: var(--pp-off-white);
}

.pprt-tg-week-gutter {
    border-right: 1px solid var(--pp-border);
}

.pprt-tg-week-dh {
    text-align: center;
    padding: 12px 4px;
    border-right: 1px solid rgba(0,0,0,0.06);
}

.pprt-tg-week-dh:last-child {
    border-right: none;
}

.pprt-tg-week-dname {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pprt-tg-week-dnum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--pp-text);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-top: 2px;
}

.pprt-tg-week-dnum--today {
    background: var(--pp-blue);
    color: #fff;
}

.pprt-tg-week-dh--today .pprt-tg-week-dname {
    color: var(--pp-blue);
}

/* Week body */
.pprt-tg-week-body {
    position: relative;
    height: 720px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 40px;
}

/* 7 column overlay */
.pprt-tg-week-cols {
    position: absolute;
    top: 0;
    left: 60px;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    pointer-events: none;
}

.pprt-tg-week-col {
    position: relative;
    border-right: 1px solid rgba(0,0,0,0.06);
    pointer-events: auto;
    padding: 0 2px;
}

.pprt-tg-week-col:last-child {
    border-right: none;
}

.pprt-tg-event--week {
    left: 4px;
    right: 4px;
    border-radius: 4px;
    padding: 4px 6px;
    overflow: visible;
}

.pprt-tg-event--week .pprt-tg-ev-time {
    font-size: 10px;
}

.pprt-tg-event--week .pprt-tg-ev-name {
    font-size: 11px;
}

.pprt-tg-event--week .pprt-tg-ev-dose {
    font-size: 10px;
}

/* Responsive: stack day view on mobile */
@media (max-width: 768px) {
    .pprt-tg-layout {
        grid-template-columns: 1fr;
    }
    .pprt-tg-sidebar {
        order: -1;
    }
}

/* Month calendar view */
.pprt-cal-month {
    margin-bottom: 16px;
}

.pprt-cal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pprt-cal-title {
    font-family: var(--pp-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--pp-primary);
    flex: 1;
    text-align: center;
}

.pprt-cal-nav {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pp-light-gray);
    border-radius: var(--pp-radius-sm);
    background: var(--pp-background);
    color: var(--pp-medium-gray);
    font-size: 16px;
    cursor: pointer;
    transition: all var(--pp-transition);
}

.pprt-cal-nav:hover {
    background: var(--pp-off-white);
    color: var(--pp-primary);
}

.pprt-cal-today {
    padding: 6px 14px;
    border: 1px solid var(--pp-light-gray);
    border-radius: var(--pp-radius-sm);
    background: var(--pp-background);
    font-family: var(--pp-font-primary);
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-primary);
    cursor: pointer;
    transition: all var(--pp-transition);
}

.pprt-cal-today:hover {
    background: var(--pp-off-white);
}

.pprt-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--pp-light-gray);
    border: 1px solid var(--pp-light-gray);
    border-radius: var(--pp-radius);
    overflow: hidden;
}

.pprt-cal-days-header {
    border-bottom: none;
    border-radius: var(--pp-radius) var(--pp-radius) 0 0;
}

.pprt-cal-cells {
    border-top: none;
    border-radius: 0 0 var(--pp-radius) var(--pp-radius);
}

.pprt-cal-dh {
    background: var(--pp-primary);
    color: #FFFFFF;
    text-align: center;
    padding: 8px 4px;
    font-family: var(--pp-font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pprt-cal-cell {
    background: var(--pp-background);
    min-height: 110px;
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.pprt-cal-empty {
    background: var(--pp-off-white);
}

.pprt-cal-today-cell {
    background: rgba(31, 158, 219, 0.03);
}

.pprt-cal-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-medium-gray);
    margin-bottom: 4px;
}

.pprt-cal-date-today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pp-accent);
    color: #FFFFFF;
    font-size: 12px;
}

.pprt-cal-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.pprt-cal-event {
    display: flex;
    flex-direction: column;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 1.3;
    margin-bottom: 2px;
}

.pprt-cal-ev-name {
    font-weight: 700;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pprt-cal-ev-dose {
    font-size: 9px;
    color: var(--pp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pprt-cal-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow: hidden;
}

.pprt-month-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pprt-legend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--pp-off-white);
    border-radius: var(--pp-radius-sm);
    font-size: 13px;
}

.pprt-legend-name {
    font-weight: 600;
    color: var(--pp-primary);
}

.pprt-legend-cycle {
    color: var(--pp-medium-gray);
    font-size: 12px;
}

/* ==========================================================================
   GROK AI PROTOCOL BUTTON + LOADING
   ========================================================================== */

/* Floating label input fields */
.ppdc-float-row {
    display: grid;
    gap: 16px;
    margin-bottom: 8px;
}

.ppdc-float-row--4 {
    grid-template-columns: repeat(4, 1fr);
}

.ppdc-float-row--3 {
    grid-template-columns: repeat(3, 1fr);
}

.ppdc-float-row--2 {
    grid-template-columns: 1fr 1fr;
}

.ppdc-float-row--1 {
    grid-template-columns: 1fr;
    max-width: 400px;
}

@media (max-width: 768px) {
    .ppdc-float-row--4,
    .ppdc-float-row--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ppdc-float-row--4,
    .ppdc-float-row--3 {
        grid-template-columns: 1fr;
    }
}

.ppdc-float-field {
    position: relative;
}

.ppdc-float-label {
    position: static;
    display: block;
    background: transparent;
    padding: 0 0 6px 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text-secondary, #6B7280);
    pointer-events: none;
    line-height: 1;
}

.ppdc-float-input,
.pprt-unified-details .ppdc-float-input,
select.ppdc-float-input,
input.ppdc-float-input {
    width: 100%;
    padding: 14px 14px;
    border: 1.5px solid #D1D5DB !important;
    border-radius: var(--pp-radius-md, 8px);
    font-family: var(--pp-font-primary);
    font-size: 14px;
    line-height: 1.4;
    color: #343434;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.ppdc-float-input::placeholder,
input.ppdc-float-input::placeholder {
    color: #9CA3AF;
    opacity: 1;
}

/* Hide native number input spinners */
.ppdc-float-input[type="number"]::-webkit-inner-spin-button,
.ppdc-float-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ppdc-float-input[type="number"] {
    -moz-appearance: textfield;
}

.ppdc-float-input:focus {
    outline: none;
    border-color: var(--pp-blue);
    box-shadow: 0 0 0 2px rgba(31, 158, 219, 0.15);
}

select.ppdc-float-input {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    padding-right: 32px;
    cursor: pointer;
}

/* Vial size pills in dropdown */
.ppdc-dd-vials {
    display: inline-flex;
    gap: 4px;
}

.ppdc-dd-vial-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--pp-blue-text);
    background: var(--pp-blue-tint);
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

/* Vial selector in peptide card */
.pprt-pep-vial-select {
    padding: 4px 24px 4px 8px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm, 6px);
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-blue-text);
    background: var(--pp-blue-tint);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%235E4585' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    cursor: pointer;
    flex-shrink: 0;
}

.pprt-pep-vial-select:focus {
    outline: none;
    border-color: var(--pp-blue);
}

.ppdc-dd-vials-right {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Reconstitution preview */
.pprt-recon-preview {
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--pp-blue-tint);
    border-radius: var(--pp-radius-sm);
    font-size: 13px;
    color: var(--pp-text);
}

.pprt-recon-conc strong {
    color: var(--pp-blue);
}

/* Syringe visualization */
.ppdc-syringe-wrap {
    padding: 16px 0;
    border-top: 1px solid var(--pp-bg-tertiary);
    border-bottom: 1px solid var(--pp-bg-tertiary);
    margin: 8px 0;
}

.ppdc-syringe-label {
    font-size: 13px;
    color: var(--pp-text-secondary);
    margin-bottom: 10px;
}

.ppdc-syringe-label strong {
    color: var(--pp-blue);
    font-size: 14px;
}

.ppdc-syringe {
    position: relative;
    padding-left: 8px;
}

.ppdc-syringe__body {
    position: relative;
    height: 32px;
    background: var(--pp-bg-tertiary);
    border: 2px solid var(--pp-border);
    border-radius: 4px 16px 16px 4px;
    overflow: visible;
}

.ppdc-syringe__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px 14px 14px 2px;
    opacity: 0.35;
    transition: width 0.6s ease;
}

/* Tick marks */
.ppdc-syringe__tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 8px;
    background: var(--pp-border-hover);
    z-index: 1;
}

.ppdc-syringe__tick--major {
    height: 14px;
    background: var(--pp-text-secondary);
}

.ppdc-syringe__tick-label {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    color: var(--pp-text-secondary);
    white-space: nowrap;
}

/* Needle tip */
.ppdc-syringe__needle {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 4px;
    background: linear-gradient(to right, var(--pp-border-hover), #999);
    border-radius: 0 2px 2px 0;
}

/* Plunger on the left */
.ppdc-syringe__body::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 20px;
    background: var(--pp-border-hover);
    border-radius: 2px 0 0 2px;
    border: 2px solid var(--pp-border);
    border-right: none;
}

.pprt-grok-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--pp-blue) 0%, var(--pp-blue-hover) 100%);
    color: #fff;
    font-family: var(--pp-font-primary);
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: var(--pp-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(31, 158, 219, 0.3);
}

.pprt-grok-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(31, 158, 219, 0.4);
}

/* Phase 13.4: loading state for Match-my-research. The button stays the
 * Pro Peptide blue gradient (don't drop to gray or it reads as disabled
 * for the wrong reason), but disables the lift-on-hover, swaps the cursor
 * to wait, and the SVG inside spins. Status label cycles via JS every 5.5s. */
.pprt-grok-btn.is-loading,
.pprt-grok-btn[disabled] {
    cursor: wait;
    opacity: 0.92;
    transform: none;
}
.pprt-grok-btn.is-loading:hover,
.pprt-grok-btn[disabled]:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(31, 158, 219, 0.3);
}
.pprt-btn-spinner {
    animation: pprt-spin 0.9s linear infinite;
    transform-origin: 12px 12px;
}

.pprt-grok-loading {
    text-align: center;
    padding: 40px 20px;
}

.pprt-grok-loading p {
    color: var(--pp-text-secondary);
    font-size: 14px;
    margin-top: 16px;
}

.pprt-grok-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--pp-border);
    border-top-color: var(--pp-blue);
    border-radius: 50%;
    margin: 0 auto;
    animation: pprt-spin 0.8s linear infinite;
}

@keyframes pprt-spin {
    to { transform: rotate(360deg); }
}

.pprt-grok-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--pp-blue);
    background: var(--pp-blue-tint);
    padding: 4px 12px;
    border-radius: var(--pp-radius-full);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ==========================================================================
   PROTOCOL SCHEDULER - Enhanced Calendar Layout
   ========================================================================== */

/* Start date picker */
.pprt-start-date {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pprt-start-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text);
}

.pprt-start-input {
    padding: 8px 12px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    font-family: var(--pp-font-primary);
    font-size: 13px;
    color: var(--pp-text);
}

.pprt-start-input:focus {
    outline: none;
    border-color: var(--pp-blue);
}

/* Two-column scheduler layout */
.pprt-scheduler-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 768px) {
    .pprt-scheduler-layout {
        grid-template-columns: 1fr;
    }
    .pprt-scheduler-left {
        position: static;
        top: auto;
    }
}

/* Left column: day detail */
.pprt-scheduler-left {
    position: sticky;
    top: 20px;
}

.pprt-day-detail {
    background: var(--pp-background);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    padding: 24px;
    margin-bottom: 16px;
}

.pprt-day-detail__title {
    font-family: var(--pp-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0 0 4px;
}

.pprt-day-detail__week {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-blue);
    background: var(--pp-blue-tint);
    padding: 3px 10px;
    border-radius: var(--pp-radius-full);
    margin-bottom: 16px;
}

.pprt-day-detail__empty {
    font-size: 14px;
    color: var(--pp-text-secondary);
    padding: 20px 0;
    text-align: center;
}

.pprt-day-detail__slot {
    margin-bottom: 16px;
}

.pprt-day-detail__slot:last-child {
    margin-bottom: 0;
}

.pprt-day-detail__slot-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--pp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.pprt-day-detail__item {
    padding: 10px 14px;
    border-radius: var(--pp-radius-sm);
    margin-bottom: 6px;
}

.pprt-day-detail__name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.pprt-day-detail__dose {
    font-size: 12px;
    color: var(--pp-text-secondary);
}

/* Scheduler legend */
.pprt-scheduler-legend {
    background: var(--pp-background);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    padding: 20px;
}

.pprt-scheduler-legend h4 {
    font-family: var(--pp-font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0 0 12px;
}

.pprt-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--pp-bg-tertiary);
}

.pprt-legend-row:last-child {
    border-bottom: none;
}

.pprt-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pprt-legend-row .pprt-legend-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text);
    flex: 1;
}

.pprt-legend-info {
    font-size: 11px;
    color: var(--pp-text-secondary);
}

/* Calendar cell enhancements */
.pprt-cal-cell {
    cursor: pointer;
    transition: background 0.15s ease;
}

.pprt-cal-cell:hover:not(.pprt-cal-empty) {
    background: var(--pp-bg-secondary) !important;
}

.pprt-cal-selected {
    background: rgba(31, 158, 219, 0.08) !important;
    box-shadow: inset 0 0 0 2px var(--pp-blue);
}

.pprt-cal-off-cycle {
    background: repeating-linear-gradient(
        45deg,
        var(--pp-background),
        var(--pp-background) 4px,
        var(--pp-bg-tertiary) 4px,
        var(--pp-bg-tertiary) 8px
    ) !important;
    opacity: 0.6;
}

/* Color dots instead of text events */
.pprt-cal-dots {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 4px;
}

.pprt-cal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Week number badge */
.pprt-cal-week-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 9px;
    font-weight: 700;
    color: var(--pp-text-tertiary);
}

.pprt-cal-cell {
    position: relative;
}

/* Recommendation cards */
.pprt-rec-card {
    border: 2px solid var(--pp-light-gray);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
    transition: border-color var(--pp-transition);
}

.pprt-rec-primary {
    border-color: var(--pp-accent);
}

.pprt-rec-head {
    padding: 20px;
    background: var(--pp-off-white);
    border-bottom: 1px solid var(--pp-light-gray);
}

.pprt-rec-primary .pprt-rec-head {
    background: rgba(31, 158, 219, 0.06);
}

.pprt-rec-name {
    font-family: var(--pp-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--pp-primary);
}

.pprt-rec-nick {
    font-size: 14px;
    color: var(--pp-accent);
    font-weight: 600;
    margin-top: 2px;
}

.pprt-rec-body {
    padding: 20px;
}

.pprt-rec-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--pp-text);
    margin: 0 0 16px;
}

.pprt-rec-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.pprt-rec-cat {
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pprt-rec-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-primary);
}

.pprt-rec-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pprt-rec-tag {
    padding: 4px 10px;
    background: var(--pp-off-white);
    border: 1px solid var(--pp-light-gray);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pprt-bridge-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: 2px solid var(--pp-primary);
    border-radius: var(--pp-radius);
    background: var(--pp-primary);
    color: #FFFFFF;
    font-family: var(--pp-font-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--pp-transition);
}

.pprt-bridge-btn:hover {
    background: transparent;
    color: var(--pp-primary);
}

.pprt-stack-label,
.pprt-alt-label {
    font-family: var(--pp-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-primary);
    margin: 24px 0 12px;
}

.pprt-no-results {
    text-align: center;
    padding: 40px 20px;
}

.pprt-no-results h3 {
    color: var(--pp-primary);
    margin-bottom: 8px;
}

.pprt-no-results p {
    color: var(--pp-medium-gray);
    margin-bottom: 20px;
}

/* Disclaimer */
.pprt-disclaimer {
    margin: 40px 0 48px;
    padding: 24px 20px;
    font-size: 12px;
    color: var(--pp-medium-gray);
    text-align: center;
    border-top: 1px solid var(--pp-light-gray);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 480px) {
    .pprt-wrap {
        padding: 32px 16px 0;
    }

    .pprt-toggle-btn {
        font-size: 13px;
        padding: 10px 12px;
    }

    .pprt-q {
        font-size: 20px;
    }

    .pprt-chips {
        grid-template-columns: 1fr;
    }

    .pprt-opts.pprt-opts-2 {
        grid-template-columns: 1fr;
    }

    .pprt-fields {
        grid-template-columns: 1fr;
    }

    .pprt-fields-3 {
        grid-template-columns: 1fr;
    }

    .pprt-rec-name {
        font-size: 18px;
    }

    .pprt-tg-layout {
        grid-template-columns: 1fr;
    }

    .pprt-tg-week-header {
        grid-template-columns: 40px repeat(7, 1fr);
    }

    .pprt-tg-week-cols {
        left: 40px;
    }

    .pprt-tg-hour-label {
        width: 40px;
        font-size: 10px;
        padding-right: 6px;
    }

    .pprt-cal-cell {
        min-height: 60px;
        padding: 4px;
    }

    .pprt-cal-ev-name {
        font-size: 9px;
    }

    .pprt-cal-ev-time {
        display: none;
    }

    .pprt-cal-header {
        flex-wrap: wrap;
    }
}


/* ==========================================================================
   MY ACCOUNT -- Header icon
   ========================================================================== */

.pp-header-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    color: var(--pp-text);
    transition: color 0.2s ease;
}
.pp-header-account:hover {
    color: var(--pp-blue);
}
.pp-header-account svg {
    display: block;
}


/* ==========================================================================
   MY ACCOUNT -- Login / Register page
   ========================================================================== */

/* (logged-in breakout rules above also cover :not(.logged-in) via .woocommerce-account selector) */

.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 800px;
    margin: 60px auto;
    padding: 0 24px;
}

/* Login/Register layout now handled by template-myaccount.php <style> block */

.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg, 12px);
    padding: 32px;
}

.woocommerce-account .u-columns h2,
.woocommerce-account .woocommerce-form-login h2,
.woocommerce-account .woocommerce-form-register h2 {
    font-family: var(--pp-font-heading) !important;
    font-size: 24px;
    font-weight: 700;
    color: var(--pp-text);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pp-border);
}

.woocommerce-account .woocommerce-form .form-row {
    margin-bottom: 20px;
}

.woocommerce-account .woocommerce-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text);
    margin-bottom: 6px;
    font-family: var(--pp-font-primary);
}

.woocommerce-account .woocommerce-form .input-text,
.woocommerce-account .woocommerce-form input[type="text"],
.woocommerce-account .woocommerce-form input[type="email"],
.woocommerce-account .woocommerce-form input[type="password"] {
    width: 100%;
    height: 48px;
    border: 1.5px solid var(--pp-border);              /* v6: 1.5px */
    border-radius: var(--pp-radius-md);
    padding: 0 14px;                                    /* v6: 14px horizontal */
    font-family: var(--pp-font-primary);
    font-size: 14px;                                    /* v6: 14px */
    color: var(--pp-text);
    background: var(--pp-bg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce-account .woocommerce-form .input-text:focus,
.woocommerce-account .woocommerce-form input[type="text"]:focus,
.woocommerce-account .woocommerce-form input[type="email"]:focus,
.woocommerce-account .woocommerce-form input[type="password"]:focus {
    outline: none;
    border-color: var(--pp-blue);
    box-shadow: 0 0 0 3px var(--pp-blue-tint);
}

/* My account form submit (v6: DM Sans 600 14px, not heading font) */
.woocommerce-account .woocommerce-form button[type="submit"],
.woocommerce-account .woocommerce-form .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    background: var(--pp-red);
    color: #FFFFFF !important;
    border: none;
    border-radius: var(--pp-radius-md);
    font-family: var(--pp-font-primary) !important; /* v6: body font, not heading */
    font-size: 14px;                                 /* v6: 14px button */
    font-weight: 600;                                /* v6: 600 not 700 */
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    width: 100%;
}
.woocommerce-account .woocommerce-form button[type="submit"]:hover,
.woocommerce-account .woocommerce-form .button:hover {
    background: var(--pp-red-hover);
    transform: translateY(-1px);
}

.woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--pp-text-secondary);
    margin-bottom: 20px !important;
}
.woocommerce-form-login__rememberme input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--pp-blue);
}

.woocommerce-account .lost_password {
    text-align: center;
    margin-top: 16px;
}
.woocommerce-account .lost_password a {
    font-size: 14px;
    color: var(--pp-blue);
    text-decoration: none;
}
.woocommerce-account .lost_password a:hover {
    text-decoration: underline;
}

.woocommerce-account .woocommerce-form-register p:not(.form-row) {
    font-size: 14px;
    color: var(--pp-text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
    border-radius: var(--pp-radius, 8px);
    font-family: var(--pp-font-primary);
    font-size: 14px;
    margin-bottom: 24px;
}

.woocommerce-account:not(.logged-in) .woocommerce > h2 + form.woocommerce-form-login {
    max-width: 440px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg, 12px);
    padding: 32px;
}


/* ==========================================================================
   MY ACCOUNT -- Dashboard (logged-in)
   ========================================================================== */

/* Hide the page hero/title on account pages */
.woocommerce-account #nt-page-container > .section.text-center,
.woocommerce-account .nt-hero-title {
    display: none !important;
}

/* Hide theme sidebar on account pages */
.woocommerce-account #nt-sidebar {
    display: none !important;
}

.woocommerce-MyAccount-navigation {
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg, 12px);
    padding: 8px 0;
    position: sticky;
    top: 20px;
}
@media (max-width: 768px) {
    .woocommerce-MyAccount-navigation {
        position: static;
        top: auto;
    }
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-MyAccount-navigation ul li {
    margin: 0;
}
.woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    font-family: var(--pp-font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-text-secondary);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    border-left: 3px solid transparent;
}
/* v6: no background fill on hover or active states for nav/tabs */
.woocommerce-MyAccount-navigation ul li a:hover {
    background: transparent;
    color: var(--pp-text);
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
    background: transparent;             /* v6: no background fill */
    color: var(--pp-text);                /* v6: dark text, not purple */
    font-weight: 500;                     /* v6: 500 not 600 */
    border-left-color: var(--pp-blue);  /* keep purple left border as the active indicator */
}

.woocommerce-MyAccount-content {
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg, 12px);
    padding: 32px;
    min-height: 400px;
}
.woocommerce-MyAccount-content > p:first-child {
    font-size: 15px;
    line-height: 1.7;
    color: var(--pp-text);
}
.woocommerce-MyAccount-content > p a {
    color: var(--pp-blue);
    text-decoration: none;
    font-weight: 500;
}
.woocommerce-MyAccount-content > p a:hover {
    text-decoration: underline;
}

/* Orders table */
.woocommerce-MyAccount-content .woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--pp-font-primary);
    font-size: 14px;
}
.woocommerce-MyAccount-content .woocommerce-orders-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pp-text-tertiary);
    border-bottom: 2px solid var(--pp-border);
    background: var(--pp-bg-alt, var(--pp-blue-tint));
}
.woocommerce-MyAccount-content .woocommerce-orders-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pp-light-gray);
    color: var(--pp-text);
    vertical-align: middle;
}
.woocommerce-MyAccount-content .woocommerce-orders-table tr:last-child td {
    border-bottom: none;
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-button {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    background: var(--pp-blue);
    color: #fff !important;
    border-radius: var(--pp-radius, 8px);
    text-decoration: none;
    transition: background 0.2s ease;
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-button:hover {
    background: var(--pp-blue-hover);
}

/* Addresses */
.woocommerce-MyAccount-content .woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 600px) {
    .woocommerce-MyAccount-content .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }
}
.woocommerce-MyAccount-content .woocommerce-Address {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius, 8px);
    padding: 20px;
}
.woocommerce-MyAccount-content .woocommerce-Address header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pp-light-gray);
}
.woocommerce-MyAccount-content .woocommerce-Address h3 {
    font-family: var(--pp-font-heading) !important;
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0;
}
.woocommerce-MyAccount-content .woocommerce-Address address {
    font-size: 14px;
    line-height: 1.7;
    color: var(--pp-text-secondary);
    font-style: normal;
}

/* Edit account form */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row {
    margin-bottom: 20px;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text);
    margin-bottom: 6px;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .input-text {
    width: 100%;
    height: 48px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius, 8px);
    padding: 0 16px;
    font-size: 15px;
    font-family: var(--pp-font-primary);
    color: var(--pp-text);
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .input-text:focus {
    outline: none;
    border-color: var(--pp-blue);
    box-shadow: 0 0 0 3px var(--pp-blue-tint);
}
/* Edit account form submit (v6: DM Sans 600 14px, not heading font) */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    background: var(--pp-red);
    color: #FFFFFF !important;
    border: none;
    border-radius: var(--pp-radius-md);
    font-family: var(--pp-font-primary) !important; /* v6: body font */
    font-size: 14px;                                 /* v6: 14px */
    font-weight: 600;                                /* v6: 600 not 700 */
    cursor: pointer;
    transition: background 0.2s ease;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm button[type="submit"]:hover {
    background: var(--pp-red-hover);
}

/* Logout nav link */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--pp-text-tertiary);
    border-top: 1px solid var(--pp-light-gray);
    margin-top: 4px;
    padding-top: 16px;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: var(--pp-red);
    background: transparent;
}


/* ==========================================================================
   MY ACCOUNT -- Research Reference cards
   ========================================================================== */

.pp-research-ref {
    font-family: var(--pp-font-primary);
}

/* Header */
.pp-research-ref__header {
    margin-bottom: 32px;
}
.pp-research-ref__header h2 {
    font-family: var(--pp-font-heading) !important;
    font-size: 24px;
    font-weight: 700;
    color: var(--pp-text);
    margin-bottom: 8px;
}
.pp-research-ref__subtitle {
    font-size: 14px;
    line-height: 1.6;
    color: var(--pp-text-secondary);
    margin: 0;
}

/* Category groups */
.pp-research-ref__category {
    margin-bottom: 32px;
}
.pp-research-ref__cat-title {
    font-family: var(--pp-font-heading) !important;
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--pp-blue-tint);
}

/* Individual compound cards */
.pp-ref-card {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius, 8px);
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.pp-ref-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.pp-ref-card__header {
    background: var(--pp-blue-tint);
    padding: 14px 20px;
    border-bottom: 1px solid var(--pp-border);
}
.pp-ref-card__name {
    font-family: var(--pp-font-heading) !important;
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0;
}

.pp-ref-card__body {
    padding: 20px;
}

/* Data table inside each card */
.pp-ref-card__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 14px;
}
.pp-ref-card__table th {
    text-align: left;
    vertical-align: top;
    padding: 8px 16px 8px 0;
    width: 180px;
    font-weight: 600;
    color: var(--pp-text);
    white-space: nowrap;
    border-bottom: 1px solid var(--pp-light-gray);
}
.pp-ref-card__table td {
    padding: 8px 0;
    color: var(--pp-text-secondary);
    line-height: 1.5;
    border-bottom: 1px solid var(--pp-light-gray);
}
.pp-ref-card__table tr:last-child th,
.pp-ref-card__table tr:last-child td {
    border-bottom: none;
}

/* Notes & citation */
.pp-ref-card__notes {
    padding-top: 12px;
    border-top: 1px solid var(--pp-light-gray);
}
.pp-ref-card__notes p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--pp-text-secondary);
    margin: 0 0 6px 0;
}
.pp-ref-card__notes cite {
    font-size: 12px;
    font-style: italic;
    color: var(--pp-text-tertiary);
}

/* Disclaimer footer */
.pp-research-ref__disclaimer {
    margin-top: 32px;
    padding: 16px 20px;
    background: var(--pp-blue-tint);
    border-radius: var(--pp-radius, 8px);
    border-left: 3px solid var(--pp-blue);
}
.pp-research-ref__disclaimer p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--pp-text-secondary);
    margin: 0;
}

/* Responsive: stack table labels on mobile */
@media (max-width: 600px) {
    .pp-ref-card__table th {
        display: block;
        width: 100%;
        padding-bottom: 2px;
        border-bottom: none;
    }
    .pp-ref-card__table td {
        display: block;
        padding-top: 0;
        padding-bottom: 12px;
    }
}


/* ==========================================================================
   GLOBAL ACCESSIBILITY — Focus states, reduced motion, skip link
   ========================================================================== */

/* Global focus-visible ring per DESIGN.md: 3px purple outline */
:focus-visible {
    outline: none;
    box-shadow: var(--pp-shadow-focus);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--pp-shadow-focus);
}

/* Skip-to-content link */
.pp-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    background: var(--pp-dark);
    color: #FFFFFF;
    padding: 12px 24px;
    border-radius: var(--pp-radius);
    font-family: var(--pp-font-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: top 0.2s ease;
}

.pp-skip-link:focus {
    top: 8px;
    outline: none;
    box-shadow: var(--pp-shadow-focus);
}

/* Minimum tap targets for small interactive elements */
.pp-product-card__size-select,
.pp-product-card__action,
.pp-lang-switcher a,
.pp-lang-switcher span,
.pp-search-btn,
.pp-coa-badge,
.woocommerce .quantity .qty {
    min-height: 44px;
    min-width: 44px;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Trust bar text colors for purple-tint background */
.pp-trust-bar-top .pp-search-input {
    color: var(--pp-text);
}

.pp-trust-bar-top .pp-search-input::placeholder {
    color: var(--pp-text-secondary) !important;
    -webkit-text-fill-color: var(--pp-text-secondary);
    opacity: 1 !important;
}

.pp-trust-bar-top .pp-search-form {
    background: #ffffff;
    border: 1px solid var(--pp-border, #E5E7EB);
}

.pp-trust-bar-top .pp-search-form:focus-within {
    background: #ffffff;
    border-color: var(--pp-blue);
    box-shadow: var(--pp-shadow-focus);
}

.pp-trust-bar-top .pp-search-icon,
.pp-trust-bar-top .pp-search-btn {
    color: var(--pp-text-secondary);
}

.pp-trust-bar-top .pp-trust-bar-item {
    color: var(--pp-text);
}

.pp-trust-bar-top .pp-trust-bar-item svg {
    stroke: var(--pp-blue);
}

.pp-trust-bar-top .pp-trust-bar-separator {
    color: var(--pp-text-tertiary);
}


/* ==========================================================================
   MOBILE PERFECTION PASS — 375px-430px fixes
   ========================================================================== */

/* COA Card mobile: reduce padding, stack specs grid, smaller purity text */
@media (max-width: 480px) {
    .pp-coa-card {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .pp-coa-card-body {
        padding: 20px 16px;
    }

    .pp-coa-card-purity-num {
        font-size: 32px;
    }

    .pp-coa-card-product-name {
        font-size: 18px;
    }

    .pp-coa-card-specs {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Newer COA card version */
    .pp-coa-header {
        padding: 16px 16px 10px;
    }

    .pp-coa-purity-section {
        padding: 4px 16px 12px;
    }

    .pp-coa-purity-num {
        font-size: 30px;
    }

    .pp-coa-details {
        margin: 0 8px;
    }

    .pp-coa-badges {
        padding: 12px 16px 8px;
    }
}

/* ==========================================================================
   v6 GENERIC FORM INPUT BASELINE
   Catches any input not covered by WC- or my-account-specific selectors
   (Contact Form 7, search box, newsletter, custom forms).
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    padding: 10px 14px;
    font-family: var(--pp-font-primary);
    color: var(--pp-text);
    background: var(--pp-bg);
    transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover {
    border-color: var(--pp-border-hover);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--pp-blue);
    box-shadow: var(--pp-shadow-focus);
    outline: none;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="search"]:disabled,
input[type="number"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="password"]:disabled,
textarea:disabled,
select:disabled {
    background: var(--pp-disabled-bg);
    color: var(--pp-disabled-text);
    cursor: not-allowed;
}

/* Native form controls — purple accent for checkboxes, radios, range, etc. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--pp-blue);
}

/* ==========================================================================
   v6 MINIMAL QUANTITY SPINNER
   Hide ugly native number spinners on WooCommerce qty inputs and replace
   with clean chevron up/down buttons matching the select dropdown style.
   Buttons are injected by pro-peptide.js (initQtySpinners).
   ========================================================================== */

/* Strip native browser spinner arrows on all WC qty inputs */
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.woocommerce .quantity .qty {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Wrapper becomes the positioning context for the chevron buttons */
.woocommerce .quantity.pp-qty-enhanced {
    position: relative;
    display: inline-block;
}

.woocommerce .quantity.pp-qty-enhanced .qty {
    padding-left: 26px !important;
    padding-right: 26px !important;
    text-align: center;
}

/* Chevron buttons stack vertically on the right edge of the input */
.pp-qty-btn {
    position: absolute;
    right: 6px;
    width: 16px;
    height: 14px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent center center no-repeat;
    background-size: 9px 6px;
    cursor: pointer;
    color: var(--pp-text-secondary, #6B7280);
    opacity: 0.7;
    transition: opacity var(--pp-transition, 150ms ease);
}

.pp-qty-btn:hover,
.pp-qty-btn:focus {
    opacity: 1;
    outline: none;
}

.pp-qty-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(31, 158, 219, 0.25);
    border-radius: 2px;
}

.pp-qty-up {
    top: 4px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l4-4 4 4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pp-qty-down {
    bottom: 4px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* === Pro Peptide pill-button variation selectors === */
.ppx-variations {
    margin: 0 0 16px;
}
.ppx-pill-group {
    border: 0;
    padding: 0;
    margin: 0 0 14px;
}
.ppx-pill-label {
    display: block;
    font-family: 'Montserrat', 'Inter', var(--pp-font-primary), sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: #64748B;
    margin: 0 0 8px;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ppx-pill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ppx-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    height: 32px;
    padding: 0 14px;
    border: 1.5px solid #E5E7EB;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Montserrat', 'Inter', var(--pp-font-primary), sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #1E293B;
    background: #FFFFFF;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
    margin: 0;
    line-height: 1;
    position: relative;
    box-sizing: border-box;
    white-space: nowrap;
}
.ppx-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: 0;
}
.ppx-pill:hover {
    border-color: #1F9EDB;
    color: #1F9EDB;
}
.ppx-pill:has(input:checked) {
    border-color: #1F9EDB;
    background: #E8F4FB;
    color: #1577AD;
}
.ppx-pill--disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.ppx-pill--hidden {
    display: none !important;
}
.ppx-pill--oos {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: line-through;
}
.ppx-pill--readonly {
    cursor: default;
}
.ppx-pill-group--informational .ppx-pill {
    background: #E8F4FB;
    border-color: #1F9EDB;
    color: #1577AD;
    cursor: default;
}
.ppx-pill-group--informational .ppx-pill:hover {
    border-color: #1F9EDB;
    color: #1577AD;
}

/* Pack Size group: keep as a normal fieldset on its own row.
   The pill-row inside is already flex via the base .ppx-pill-row rule. */
.ppx-pill-group--inline {
    margin: 0 0 14px;
}

/* "Starting at" prefix and "(N vials)" suffix that wrap the .ppx-price
   block on variable product pages. Prefix is rendered by the
   woocommerce_variable_price_html filter (functions.php) on initial load,
   and by the pp-pack-sizes mu-plugin's woocommerce_available_variation
   filter when a pill is clicked. Sized smaller than the 28px price so the
   number stays the visual anchor. */
.ppx-price-prefix {
    display: inline-block;
    text-transform: uppercase;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--pp-text-secondary);
    margin-right: 8px;
    vertical-align: middle;
}
.ppx-price-suffix {
    display: inline-block;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-text-secondary);
    margin-left: 8px;
    vertical-align: middle;
}

/* Per-vial price display under .single_variation, populated by
   assets/js/pp-pack-sizes.js when a variation is selected. Data comes from
   the pp-pack-sizes mu-plugin. */
.ppx-per-vial-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    margin-top: 8px;
}
.ppx-per-vial-wrap .ppx-per-vial {
    color: var(--pp-text-secondary);
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
}
.ppx-per-vial-wrap .ppx-savings {
    color: var(--pp-blue-text);
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
}

/* Mobile touch target: pills are 32px tall on desktop for compactness, but
   that's below the WCAG 2.1 AA 44px minimum on touch devices. Bump them
   up at the small breakpoint where finger taps are the primary input. */
@media (max-width: 600px) {
    .ppx-pill {
        min-height: 44px;
        padding: 0 16px;
    }
}

/* Quantity group: same fieldset/label styling as Milligram + Amount. */
.ppx-quantity-group {
    margin: 0 0 14px;
}

/* Quantity stepper + Add To Cart sit on their own row below the pills. */
.ppx-buy .single_variation_wrap {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 0;
}
.ppx-buy .woocommerce-variation-add-to-cart {
    display: flex !important;
    align-items: stretch;
    gap: 10px;
    flex: 1 1 auto;
}
.ppx-buy .quantity,
.ppx-buy .quantity.pp-qty-enhanced {
    flex: 0 0 auto;
    height: 48px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
    width: auto;
}
.ppx-buy input.qty {
    width: 44px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
    background: transparent !important;
}
.ppx-buy button.single_add_to_cart_button,
.ppx-buy a.single_add_to_cart_button {
    height: 48px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* iOS Safari zoom fix: ensure inputs are 16px+ to prevent auto-zoom on focus */
.woocommerce .quantity .qty,
.ppdc-input,
.pprt-input,
input[type="search"],
input[type="email"],
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="password"],
select,
textarea {
    font-size: max(16px, 1em);
}

/* Gallery thumbnails: larger tap targets on mobile */
@media (max-width: 480px) {
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: calc(25% - 6px);
        min-height: 44px;
    }

    .woocommerce div.product div.images .flex-control-thumbs li img {
        min-height: 44px;
        object-fit: cover;
    }
}

/* Dose calculator mobile refinements */
@media (max-width: 430px) {
    .ppdc-res-card {
        padding: 16px;
    }

    .ppdc-vial-pills {
        flex-wrap: wrap;
    }

    .ppdc-vp {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
    }

    .ppdc-unit-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .ppdc-syringe-wrap {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Ensure product card overlay actions meet tap targets on touch */
@media (hover: none) {
    .pp-product-card__action {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 12px;
    }
}

/* Hide parent theme scroll-to-top button */
#scrollUp,
.back-top {
    display: none !important;
}


/* ==========================================================================
   MOBILE POLISH — Phase 6
   ========================================================================== */

/* ---- Sticky Add-to-Cart Bar (mobile only) ---- */
.pp-sticky-atc {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: var(--pp-bg, #ffffff);
    border-top: 1px solid var(--pp-border, #E5E7EB);
    box-shadow: 0 -4px 16px rgba(52, 52, 52, 0.1);
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.pp-sticky-atc--visible {
    transform: translateY(0);
}

.pp-sticky-atc-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.pp-sticky-atc-name {
    font-family: var(--pp-font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text, #343434);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-sticky-atc-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--pp-text, #343434);
}

.pp-sticky-atc-btn {
    flex-shrink: 0;
    padding: 12px 24px;
    font-size: 14px;
    white-space: nowrap;
}

/* Only show on mobile/tablet */
@media (max-width: 768px) {
    .pp-sticky-atc {
        display: flex;
    }

    /* Add bottom padding to body so sticky bar doesn't cover content */
    body.single-product {
        padding-bottom: 72px;
    }
}

/* ---- Tabs to Accordions on mobile ---- */
@media (max-width: 768px) {
    /* WooCommerce product tabs: convert to stacked accordions */
    .woocommerce-tabs .wc-tabs {
        display: none !important;
    }

    .woocommerce-tabs .wc-tab {
        display: block !important;
        margin-bottom: 8px;
    }

    .woocommerce-tabs .wc-tab > h2:first-child,
    .woocommerce-tabs .wc-tab > h3:first-child {
        cursor: pointer;
        padding: 14px 16px;
        background: var(--pp-bg-secondary, #F9FAFB);
        border: 1px solid var(--pp-border, #E5E7EB);
        border-radius: var(--pp-radius-md, 8px);
        margin: 0;
        font-size: 15px;
        position: relative;
    }

    .woocommerce-tabs .wc-tab > h2:first-child::after,
    .woocommerce-tabs .wc-tab > h3:first-child::after {
        content: '+';
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: var(--pp-text-secondary, #6B7280);
    }
}

/* ---- Minimum tap target size: 44x44px ---- */
@media (max-width: 768px) {
    .pp-footer-social a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .pp-breadcrumbs a,
    .pp-breadcrumbs span {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Ensure checkout fields don't go side-by-side on phone */
    .woocommerce-checkout .col-1,
    .woocommerce-checkout .col-2 {
        float: none !important;
        width: 100% !important;
    }

    .woocommerce .form-row-first,
    .woocommerce .form-row-last {
        float: none !important;
        width: 100% !important;
    }
}

/* ---- Typography floor on mobile ---- */
@media (max-width: 480px) {
    body,
    .woocommerce-product-details__short-description,
    .entry-content,
    .pp-about-split-text p,
    .pp-about-card p {
        font-size: 16px;
        line-height: 1.6;
    }

    h1 { font-size: max(24px, 6vw); }
    h2 { font-size: max(20px, 5vw); }
}


/* ==========================================================================
   SINGLE PRODUCT PAGE — Redesign (matches mockup)
   ========================================================================== */

/* Page wrapper — overrides parent theme's grid container */
body.single-product .pp-single-product-page {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Hero split: image left (sticky) | info right */
body.single-product .pp-single-product {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    width: 100% !important;
    float: none !important;
}

body.single-product .pp-sp-hero {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px;
    padding: 32px 0 64px;
    align-items: start;
}

/* Related products wrapper */
body.single-product .pp-single-product-page--related {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px 64px;
}

body.single-product .pp-sp-left {
    position: sticky;
    top: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100% !important;
    float: none !important;
}
@media (max-width: 768px) {
    body.single-product .pp-sp-left {
        position: static;
        top: auto;
    }
}

/* Gallery inside left column: full width */
body.single-product .pp-sp-left .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
}

body.single-product .pp-sp-info {
    width: 100% !important;
    float: none !important;
}

/* Category label */
.pp-sp-category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pp-blue, #1f9edb);
    font-weight: 600;
    margin-bottom: 12px;
}

/* Title */
.pp-sp-title {
    font-family: var(--pp-font-heading);
    font-weight: 700;
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 8px;
}

/* CAS / formula line */
.pp-sp-cas {
    font-size: 12px;
    color: var(--pp-text-tertiary, #9CA3AF);
    margin-bottom: 20px;
    font-family: var(--pp-font-heading);
}

/* Clickable stars (anchor to reviews) */
.pp-sp-stars {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    padding: 4px 6px;
    margin-left: -6px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.pp-sp-stars:hover {
    background: var(--pp-bg-secondary, #F9FAFB);
}

.pp-sp-stars:hover .pp-sp-stars__count {
    color: var(--pp-blue, #1f9edb);
    text-decoration: underline;
}

.pp-sp-stars__badge {
    background: var(--pp-blue, #1f9edb);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 5px;
}

.pp-sp-stars__sq {
    width: 24px;
    height: 24px;
    background: var(--pp-dark, #343434);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-border, #E5E7EB);
    font-size: 12px;
}

.pp-sp-stars__sq.filled {
    color: var(--pp-blue, #1f9edb);
}

.pp-sp-stars__count {
    font-size: 12px;
    color: var(--pp-text-secondary, #6B7280);
    margin-left: 4px;
}

/* Tagline / short description */
.pp-sp-tagline {
    font-size: 16px;
    line-height: 1.6;
    color: var(--pp-text-secondary, #6B7280);
    margin-bottom: 24px;
}

.pp-sp-tagline p {
    margin: 0;
}

/* Spec strip */
.pp-sp-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--pp-border, #E5E7EB);
    border-radius: var(--pp-radius-lg, 12px);
    overflow: hidden;
    margin-bottom: 28px;
    background: var(--pp-bg-secondary, #F9FAFB);
}

.pp-sp-spec {
    padding: 16px 14px;
    border-right: 1px solid var(--pp-border, #E5E7EB);
}

.pp-sp-spec:last-child {
    border-right: none;
}

.pp-sp-spec__val {
    font-family: var(--pp-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--pp-text, #343434);
}

.pp-sp-spec__val sup {
    font-size: 12px;
    color: var(--pp-text-tertiary, #9CA3AF);
}

.pp-sp-spec__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pp-text-tertiary, #9CA3AF);
    margin-top: 2px;
    font-weight: 500;
}

/* Trust row */
.pp-sp-trust {
    display: flex;
    gap: 18px;
    padding-top: 20px;
    border-top: 1px solid var(--pp-border, #E5E7EB);
    font-size: 12px;
    color: var(--pp-text-secondary, #6B7280);
    margin-top: 20px;
}

.pp-sp-trust > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pp-sp-trust svg {
    color: var(--pp-success, #7ccf4a);
}

/* RUO banner */
.pp-sp-ruo {
    background: var(--pp-dark, #343434);
    color: #fff;
    padding: 14px 18px;
    border-radius: var(--pp-radius-md, 8px);
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.5;
}

.pp-sp-ruo strong {
    color: var(--pp-blue, #1f9edb);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Full-width sections */
.pp-sp-section {
    padding: 64px 0;
    border-top: 1px solid var(--pp-border, #E5E7EB);
}

.pp-sp-section__title {
    font-family: var(--pp-font-heading);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}

.pp-sp-section__content {
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    max-width: 760px;
}

.pp-sp-section__content p {
    margin-bottom: 16px;
}

/* COA inline in left column */
.pp-sp-coa-divider {
    padding-top: 16px;
    border-top: 1px solid var(--pp-border, #E5E7EB);
}

.pp-sp-coa-divider__label {
    font-family: var(--pp-font-heading);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pp-blue, #1f9edb);
    display: block;
    margin-bottom: 4px;
}

.pp-sp-coa-divider__sub {
    font-size: 12px;
    color: var(--pp-text-secondary, #6B7280);
    display: block;
}

.pp-sp-coa-wrap {
    /* COA card inherits its own styling from pp_coa_tab_content() */
}

/* Responsive */
@media (max-width: 880px) {
    body.single-product .pp-sp-hero {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }

    .pp-sp-left {
        position: static;
    }

    .pp-sp-specs {
        grid-template-columns: repeat(3, 1fr);
    }

    .pp-sp-trust {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .pp-single-product {
        padding: 0 16px;
    }

    .pp-sp-hero {
        padding: 20px 0 40px;
    }

    .pp-sp-specs {
        grid-template-columns: 1fr;
    }

    .pp-sp-spec {
        border-right: none;
        border-bottom: 1px solid var(--pp-border, #E5E7EB);
    }

    .pp-sp-spec:last-child {
        border-bottom: none;
    }

}


/* ==========================================================================
   30. HOMEPAGE HEADER — in-flow white header sitting under the trust bar,
   directly above the hero video. (Was a transparent overlay; flattened so
   the menu doesn't add visual padding above the video.)
   ========================================================================== */

/* Topbar variants stay hidden across the site (we never use them) */
body.home .header_top,
body.home .naturally_header_topbar,
body.home .header_lang,
.header_lang {
    display: none !important;
}

/* Hero starts immediately below the header, no extra top padding */
body.home .pp-hero {
    margin-top: 0;
}

body.home .nt-theme-content,
body.home .site-content,
body.home #nt-page,
body.home main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* ==========================================================================
   31. SHOP — LEFT SIDEBAR WIDGETS (Naturally "shop-3" layout)
   ========================================================================== */

.woocommerce.archive #shop-page-sidebar,
#shop-page-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-right: 8px;
}

#shop-page-sidebar .widget {
    background: var(--pp-bg);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    padding: 20px;
    list-style: none;
}

#shop-page-sidebar .widget-title,
#shop-page-sidebar .widgettitle,
#shop-page-sidebar h3.widget-title,
#shop-page-sidebar h2.widgettitle {
    font-family: var(--pp-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--pp-border);
    letter-spacing: 0.01em;
}

#shop-page-sidebar a {
    color: var(--pp-text);
    text-decoration: none;
    transition: color var(--pp-transition);
}

#shop-page-sidebar a:hover {
    color: var(--pp-blue);
}

/* Search widget */
#shop-page-sidebar .widget_search form,
#shop-page-sidebar .widget_product_search form {
    position: relative;
}

#shop-page-sidebar .widget_search input[type="search"],
#shop-page-sidebar .widget_search input[type="text"],
#shop-page-sidebar .widget_product_search input[type="search"],
#shop-page-sidebar .widget_product_search input[type="text"] {
    width: 100%;
    padding: 10px 40px 10px 14px;
    font-size: 14px;
    color: var(--pp-text);
    background: var(--pp-bg-secondary);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    box-sizing: border-box;
}

#shop-page-sidebar .widget_search input[type="search"]:focus,
#shop-page-sidebar .widget_product_search input[type="search"]:focus {
    outline: none;
    border-color: var(--pp-blue);
    box-shadow: var(--pp-shadow-focus);
}

#shop-page-sidebar .widget_search button,
#shop-page-sidebar .widget_search input[type="submit"],
#shop-page-sidebar .widget_product_search button {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--pp-text-secondary);
    font-size: 0;
    cursor: pointer;
}

#shop-page-sidebar .widget_search button::after,
#shop-page-sidebar .widget_search input[type="submit"]::after,
#shop-page-sidebar .widget_product_search button::after {
    content: "\1F50D";
    font-size: 14px;
}

/* Category list */
#shop-page-sidebar .widget_product_categories ul,
#shop-page-sidebar .product-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

#shop-page-sidebar .widget_product_categories li,
#shop-page-sidebar .product-categories li {
    padding: 8px 0;
    border-bottom: 1px solid var(--pp-border);
    font-size: 14px;
}

#shop-page-sidebar .widget_product_categories li:last-child,
#shop-page-sidebar .product-categories li:last-child {
    border-bottom: 0;
}

#shop-page-sidebar .widget_product_categories li a,
#shop-page-sidebar .product-categories li a {
    display: inline-block;
}

#shop-page-sidebar .widget_product_categories .count,
#shop-page-sidebar .product-categories .count {
    float: right;
    color: var(--pp-text-secondary);
    font-size: 13px;
}

#shop-page-sidebar .widget_product_categories .children,
#shop-page-sidebar .product-categories .children {
    margin: 8px 0 0 16px;
    padding: 0;
}

/* Curated Pro Peptide category list */
#shop-page-sidebar .pp-shop-cats {
    list-style: none;
    margin: 0;
    padding: 0;
}

#shop-page-sidebar .pp-shop-cats__item {
    padding: 10px 0;
    border-bottom: 1px solid var(--pp-border);
    font-size: 14px;
    font-weight: 500;
}

#shop-page-sidebar .pp-shop-cats__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

#shop-page-sidebar .pp-shop-cats__item:first-child {
    padding-top: 0;
}

#shop-page-sidebar .pp-shop-cats__item a {
    display: block;
    color: var(--pp-text);
    transition: color var(--pp-transition);
}

#shop-page-sidebar .pp-shop-cats__item a:hover {
    color: var(--pp-blue);
}

#shop-page-sidebar .pp-shop-cats__item.is-active a {
    color: var(--pp-blue);
    font-weight: 600;
}

/* Mini products list */
#shop-page-sidebar .widget_products ul,
#shop-page-sidebar .product_list_widget {
    list-style: none;
    margin: 0;
    padding: 0;
}

#shop-page-sidebar .widget_products li,
#shop-page-sidebar .product_list_widget > li {
    padding: 12px 0;
    border-bottom: 1px solid var(--pp-border);
    overflow: hidden;
    font-size: 13px;
}

#shop-page-sidebar .widget_products li:first-child,
#shop-page-sidebar .product_list_widget > li:first-child {
    padding-top: 0;
}

#shop-page-sidebar .widget_products li:last-child,
#shop-page-sidebar .product_list_widget > li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

#shop-page-sidebar .widget_products li img,
#shop-page-sidebar .product_list_widget li img {
    float: left;
    width: 56px;
    height: 56px;
    object-fit: cover;
    margin-right: 12px;
    border-radius: var(--pp-radius-sm);
    background: var(--pp-bg-product);
}

#shop-page-sidebar .widget_products li a,
#shop-page-sidebar .product_list_widget li a {
    display: block;
    color: var(--pp-text);
    line-height: 1.4;
    font-weight: 500;
}

#shop-page-sidebar .widget_products .amount,
#shop-page-sidebar .product_list_widget .amount,
#shop-page-sidebar .widget_products ins,
#shop-page-sidebar .product_list_widget ins {
    color: var(--pp-blue);
    font-weight: 600;
    text-decoration: none;
}

#shop-page-sidebar .widget_products del,
#shop-page-sidebar .product_list_widget del {
    color: var(--pp-text-tertiary);
    margin-right: 4px;
}

#shop-page-sidebar .widget_products .reviewer,
#shop-page-sidebar .product_list_widget .reviewer {
    display: block;
    color: var(--pp-text-secondary);
    font-size: 12px;
    margin-top: 2px;
}

#shop-page-sidebar .star-rating {
    color: var(--pp-blue);
    font-size: 12px;
    margin: 4px 0;
}

/* Cart widget */
#shop-page-sidebar .widget_shopping_cart .total,
#shop-page-sidebar .widget_shopping_cart_content .total {
    border-top: 1px solid var(--pp-border);
    padding-top: 12px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--pp-text);
}

#shop-page-sidebar .widget_shopping_cart .total .amount,
#shop-page-sidebar .widget_shopping_cart_content .total .amount {
    color: var(--pp-blue);
    font-weight: 700;
}

#shop-page-sidebar .widget_shopping_cart .buttons,
#shop-page-sidebar .widget_shopping_cart_content .buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

#shop-page-sidebar .widget_shopping_cart .buttons a,
#shop-page-sidebar .widget_shopping_cart_content .buttons a {
    display: block;
    text-align: center;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--pp-radius-md);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background var(--pp-transition), color var(--pp-transition), border-color var(--pp-transition);
}

#shop-page-sidebar .widget_shopping_cart .buttons a:first-child,
#shop-page-sidebar .widget_shopping_cart_content .buttons a:first-child {
    background: var(--pp-blue);
    color: #fff;
}

#shop-page-sidebar .widget_shopping_cart .buttons a:first-child:hover,
#shop-page-sidebar .widget_shopping_cart_content .buttons a:first-child:hover {
    background: var(--pp-blue-hover);
    color: #fff;
}

#shop-page-sidebar .widget_shopping_cart .buttons a.checkout,
#shop-page-sidebar .widget_shopping_cart_content .buttons a.checkout {
    background: var(--pp-red);
    color: #fff;
}

#shop-page-sidebar .widget_shopping_cart .buttons a.checkout:hover,
#shop-page-sidebar .widget_shopping_cart_content .buttons a.checkout:hover {
    background: var(--pp-red-hover);
    color: #fff;
}

/* Recent reviews */
#shop-page-sidebar .widget_recent_reviews .reviewer {
    display: block;
    font-size: 12px;
    color: var(--pp-text-secondary);
    margin-top: 2px;
}


/* ==========================================================================
   31b. SHOP — Full-width product search above the loop
   ========================================================================== */

.pp-shop-top-search {
    margin: 0 0 24px;
    width: 100%;
}

.pp-shop-top-search__form {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
}

.pp-shop-top-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pp-shop-top-search__field {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

/* Input + submit are joined into one visual unit. Input gets rounded LEFT only;
   submit gets rounded RIGHT only. !important needed to beat the global
   input[type="search"] rule (line ~10239) that applies all-corner radius. */
.pp-shop-top-search .pp-shop-top-search__input {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--pp-border);
    border-right: 0;
    border-radius: 12px 0 0 12px !important;
    outline: 0;
    background: var(--pp-bg);
    padding: 14px 18px;
    font-size: 15px;
    color: var(--pp-text);
    font-family: var(--pp-font-primary);
    transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
}

.pp-shop-top-search .pp-shop-top-search__input:focus {
    border-color: var(--pp-blue);
    box-shadow: var(--pp-shadow-focus);
    z-index: 1;
}

.pp-shop-top-search .pp-shop-top-search__input::placeholder {
    color: var(--pp-text-tertiary);
}

.pp-shop-top-search .pp-shop-top-search__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 0;
    border: 0;
    border-radius: 0 12px 12px 0 !important;
    background: #1f9edb;
    color: #fafafa;
    cursor: pointer;
    transition: background var(--pp-transition);
}

.pp-shop-top-search .pp-shop-top-search__submit:hover {
    background: #1683b8;
}

.pp-shop-top-search__submit svg {
    display: block;
}

.pp-shop-top-search {
    position: relative;
}

.pp-shop-top-search__results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(52, 52, 52, 0.12);
    z-index: 50;
    max-height: 480px;
    overflow-y: auto;
}

.pp-shop-top-search__results[hidden] {
    display: none;
}

.pp-shop-top-search__results-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--pp-border);
}

.pp-shop-top-search__results-section:last-child {
    border-bottom: 0;
}

.pp-shop-top-search__results-heading {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pp-text-tertiary);
    padding: 6px 16px;
    margin: 0;
}

.pp-shop-top-search__result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--pp-text);
    text-decoration: none;
    transition: background var(--pp-transition);
}

.pp-shop-top-search__result:hover,
.pp-shop-top-search__result:focus,
.pp-shop-top-search__result.is-active {
    background: var(--pp-bg);
    text-decoration: none;
    outline: 0;
}

.pp-shop-top-search__result-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--pp-bg);
    object-fit: contain;
}

.pp-shop-top-search__result-body {
    flex: 1;
    min-width: 0;
}

.pp-shop-top-search__result-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-shop-top-search__result-meta {
    font-size: 12px;
    color: var(--pp-text-tertiary);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-shop-top-search__result-meta .amount {
    color: var(--pp-text);
    font-weight: 600;
}

.pp-shop-top-search__results-empty,
.pp-shop-top-search__results-loading {
    padding: 18px 16px;
    font-size: 13px;
    color: var(--pp-text-tertiary);
    text-align: center;
}


/* ==========================================================================
   32. SHOP — LIST VIEW CARD (.shop-products.is-list) — Pro Peptide v2 redesign
   Horizontal card: vial image left, info-rich body right with category color,
   action icons, prominent title, excerpt, price + stars + Add to Cart, info pills.
   ========================================================================== */

/* Brand v2 color tokens scoped to product cards (avoid touching old global tokens) */
.pp-product-card {
    --pp-cat-color: #1F9EDB;
    --pp-cat-text:  #1577AD;
}
.pp-product-card--cat-healing     { --pp-cat-color: #7CCF4A; --pp-cat-text: #4D8B2C; }
.pp-product-card--cat-brain       { --pp-cat-color: #1F9EDB; --pp-cat-text: #1577AD; }
.pp-product-card--cat-weight      { --pp-cat-color: #F97316; --pp-cat-text: #C2410C; }
.pp-product-card--cat-performance { --pp-cat-color: #EF4444; --pp-cat-text: #B91C1C; }
.pp-product-card--cat-skin        { --pp-cat-color: #9B7AEF; --pp-cat-text: #6B4FB8; }
.pp-product-card--cat-immune      { --pp-cat-color: #F59E0B; --pp-cat-text: #B45309; }

/* Excerpt is grid-hidden by default; the list view reveals it. */
.pp-product-card__excerpt {
    display: none;
}

/* Stack the list rows vertically inside the products grid container.
   Also kill any horizontal padding/margin that the parent theme's grid framework
   adds to .grid / .grid_row / .grid_col so cards align edge-to-edge with the
   search bar above (which is a direct child of the same grid_col, no .grid wrapper). */
.shop-products.is-list,
.shop-products.is-list > .row,
.shop-products.is-list > .pp-product-grid,
.shop-products.is-list > .products,
.shop-products.is-list > .grid,
.shop-products.is-list > .grid > .grid_row,
ul.products.is-list {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.shop-products.is-list > .grid_col,
.shop-products.is-list .grid_col,
ul.products.is-list > li {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 0 16px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Horizontal card */
.shop-products.is-list .pp-product-card {
    flex-direction: row;
    align-items: stretch;
    border: 1px solid #E5E7EB;
    border-radius: 0;
    background: #FFFFFF;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.shop-products.is-list .pp-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.08);
    border-color: #CBD5E1;
}

/* Image column — vial on top, category pill below */
.shop-products.is-list .pp-product-card__image {
    flex: 0 0 240px;
    max-width: 240px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 16px 18px;
    gap: 12px;
    position: relative;
    align-self: stretch;
    min-height: 0;
    border-radius: 0;
    box-sizing: border-box;
}
.shop-products.is-list .pp-product-card__image > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0;
    overflow: hidden;
}
.shop-products.is-list .pp-product-card__img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    border-radius: 0;
    filter: none;
}
/* Category pill, centered below the vial */
.shop-products.is-list .pp-product-card__image .pp-product-card__category {
    align-self: center;
    flex: 0 0 auto;
}

/* Top-left badge in image area: category or "Out of Stock" */
.shop-products.is-list .pp-product-card__labels {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
}
.shop-products.is-list .pp-product-card__label--cat {
    background: #FFFFFF;
    border: 1px solid var(--pp-cat-color);
    color: var(--pp-cat-text);
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 3px 7px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Body — right column */
.shop-products.is-list .pp-product-card__body {
    flex: 1;
    min-width: 0;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 12px;
    background: #FFFFFF;
}
.shop-products.is-list .pp-product-card__body > * {
    width: auto;
}

/* Top row: category pill (left) + action icons (right) */
.shop-products.is-list .pp-product-card__top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-bottom: 0;
}

/* Category pill — bordered, color-mapped */
.shop-products.is-list .pp-product-card__category {
    display: inline-block;
    background: #FFFFFF;
    color: var(--pp-cat-text);
    border: 1px solid var(--pp-cat-color);
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Peptide Planner — outlined button (icon left, text right), right-justified */
.shop-products.is-list .pp-product-card__quick-actions {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}
.shop-products.is-list .pp-product-card__quick-action,
.shop-products.is-list .pp-product-card__quick-action.add_to_cart_button {
    height: 36px;
    padding: 0 6px;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: #1F9EDB;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    transition: color .2s ease;
}
.shop-products.is-list .pp-product-card__quick-action:hover,
.shop-products.is-list .pp-product-card__quick-action.add_to_cart_button:hover {
    background: transparent;
    color: #1577AD;
    border: 0;
}
.shop-products.is-list .pp-product-card__quick-action-label {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.shop-products.is-list .pp-product-card__quick-action svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.shop-products.is-list .pp-product-card__quick-action-label {
    display: inline;
}
.shop-products.is-list .pp-product-card__top-row {
    justify-content: flex-end;
}

/* Title — name + mg label + inline stars all on one line */
.shop-products.is-list .pp-product-card__title {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-weight: 600;
    font-variation-settings: 'opsz' 22;
    font-size: 22px;
    line-height: 1.2;
    color: #1E293B;
    letter-spacing: -0.01em;
    text-align: left;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.shop-products.is-list .pp-product-card__title-link {
    color: inherit;
    text-decoration: none;
}
.shop-products.is-list .pp-product-card__title-link:hover {
    color: #1F9EDB;
}
/* mg pill(s) inline next to the title.
   Single mg: informational style, blue fill, no click.
   Multiple mg: each is a link to PDP with that mg pre-selected. First is shown
   as the default active state; others are inactive (white bg, gray border). */
.shop-products.is-list .pp-product-card__mg-pills {
    display: inline-flex;
    gap: 6px;
}
.shop-products.is-list .pp-product-card__mg-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid #E5E7EB;
    background: #FFFFFF;
    color: #1E293B;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
    cursor: pointer;
    box-sizing: border-box;
}
.shop-products.is-list a.pp-product-card__mg-pill:hover {
    border-color: #1F9EDB;
    color: #1F9EDB;
}
.shop-products.is-list .pp-product-card__mg-pill--active,
.shop-products.is-list .pp-product-card__mg-pill--informational {
    background: #E8F4FB;
    border-color: #1F9EDB;
    color: #1577AD;
}
.shop-products.is-list a.pp-product-card__mg-pill--active:hover {
    background: #D6EBF6;
    border-color: #1A8AC4;
    color: #1577AD;
}
.shop-products.is-list .pp-product-card__mg-pill--informational {
    cursor: default;
}
.shop-products.is-list .pp-product-card__rating--inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #94A3B8;
    margin-left: auto;
}
.shop-products.is-list .pp-product-card__rating--inline .pp-product-card__rating-stars {
    font-size: 20px;
    letter-spacing: 2px;
}
.shop-products.is-list .pp-product-card__rating--inline .pp-product-card__rating-count {
    font-size: 13px;
}

/* New layout: title-row (title + planner CTA) → rating-line → excerpt indented → bottom */
.shop-products.is-list .pp-product-card__title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0 0 6px;
}
.shop-products.is-list .pp-product-card__title-row .pp-product-card__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.shop-products.is-list .pp-product-card__rating-line {
    display: block;
    margin: 0 0 10px;
}
.shop-products.is-list .pp-product-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 14px;
    padding-left: 18px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #64748B;
    text-align: left;
    max-width: 720px;
}
/* Legacy desc-row block kept in template for cache-safety; never shown */
.shop-products.is-list .pp-product-card__desc-row { display: none !important; }

/* Bottom group: price row + info pills, separated by top border */
.shop-products.is-list .pp-product-card__bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid #E5E7EB;
    padding-top: 14px;
    margin-top: auto;
}

/* Price row */
.shop-products.is-list .pp-product-card__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.shop-products.is-list .pp-product-card__prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.shop-products.is-list .pp-product-card__price-from {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94A3B8;
}
.shop-products.is-list .pp-product-card__price-value,
.shop-products.is-list .pp-product-card__price-value .price,
.shop-products.is-list .pp-product-card__price-value .woocommerce-Price-amount {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-weight: 700;
    font-variation-settings: 'opsz' 28;
    font-size: 28px;
    color: #1E293B;
    letter-spacing: -0.02em;
    line-height: 1;
}
.shop-products.is-list .pp-product-card__price-value .woocommerce-Price-currencySymbol {
    font-size: 0.7em;
    margin-right: 2px;
    vertical-align: 0.15em;
}

/* Stars (compact, accent blue) */
.shop-products.is-list .pp-product-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #94A3B8;
}
.shop-products.is-list .pp-product-card__rating-stars {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1px;
}
.shop-products.is-list .pp-product-card__rating-stars-empty {
    color: #E5E7EB;
}
.shop-products.is-list .pp-product-card__rating-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    color: #1F9EDB;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

/* Add to Cart / Choose Options CTA */
.shop-products.is-list .pp-product-card__cta,
.shop-products.is-list a.pp-product-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DC2626;
    color: #FFFFFF !important;
    border: 0;
    padding: 12px 22px;
    border-radius: 8px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease;
    white-space: nowrap;
}
.shop-products.is-list .pp-product-card__cta:hover,
.shop-products.is-list a.pp-product-card__cta:hover {
    background: #B91C1C;
}
.shop-products.is-list .pp-product-card__cta svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}
.shop-products.is-list .pp-product-card__cta--oos {
    background: #F3F4F6;
    color: #94A3B8 !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Info pills row — pills left, CTA pushed right */
.shop-products.is-list .pp-product-card__info-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.shop-products.is-list .pp-product-card__info-pills .pp-product-card__cta {
    margin-left: auto;
}
.pp-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #64748B;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 0;
    border-radius: 0;
    line-height: 1.2;
}
.pp-info-pill svg {
    width: 14px;
    height: 14px;
    color: #1F9EDB;
    flex-shrink: 0;
}
.pp-info-pill--instock {
    background: transparent;
    color: #1577AD;
}
.pp-info-pill--instock svg {
    color: #1F9EDB;
}

/* Hide legacy size selector + old rating row in list view (replaced by new layout) */
.shop-products.is-list .pp-product-card__price-size-row,
.shop-products.is-list .pp-product-card__sizes,
.shop-products.is-list .pp-product-card__rating-row {
    display: none;
}

/* Mobile: stack image on top, body below */
@media (max-width: 768px) {
    .shop-products.is-list .pp-product-card {
        flex-direction: column;
    }
    .shop-products.is-list .pp-product-card__image {
        flex: 0 0 auto;
        max-width: 100%;
        min-height: 180px;
        padding: 24px;
    }
    .shop-products.is-list .pp-product-card__img {
        max-height: 160px;
    }
    .shop-products.is-list .pp-product-card__body {
        padding: 18px;
    }
    .shop-products.is-list .pp-product-card__title {
        font-size: 18px;
    }
    .shop-products.is-list .pp-product-card__price-value,
    .shop-products.is-list .pp-product-card__price-value .price,
    .shop-products.is-list .pp-product-card__price-value .woocommerce-Price-amount {
        font-size: 24px;
    }
    .shop-products.is-list .pp-product-card__price-row {
        gap: 10px;
    }
    .shop-products.is-list .pp-product-card__cta {
        padding: 10px 18px;
        font-size: 13px;
    }
}


/* ==========================================================================
   33c. CHECKOUT — Custom Payment Options panel
   Replaces WC's empty "no available payment methods" notice with a card-list
   showing Interac e-Transfer (active) + Credit Card (disabled placeholder).
   ========================================================================== */

/* Hide WC's auto-rendered payment list entirely — the custom panel above
   is the visible UI. The WC list still exists in the DOM (so its bacs
   radio submits the right payment_method value), it's just visually
   suppressed. JS in pp-pack-sizes.js force-checks the bacs radio. */
.woocommerce-checkout #payment ul.wc_payment_methods,
.woocommerce-checkout #payment .wc_payment_methods,
.woocommerce-checkout #payment .payment_box {
    display: none !important;
}

.pp-payment-options {
    margin: 0 0 24px;
}

.pp-payment-options__title {
    font-family: var(--pp-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0 0 14px;
    letter-spacing: 0.01em;
}

.pp-payment-options__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp-payment-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.pp-payment-option:hover {
    border-color: var(--pp-blue);
}

.pp-payment-option--active {
    border-color: var(--pp-blue);
    background: var(--pp-blue-tint);
    box-shadow: 0 0 0 2px var(--pp-blue-tint);
}

.pp-payment-option--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--pp-bg-secondary);
}

.pp-payment-option--disabled:hover {
    border-color: var(--pp-border);
}

.pp-payment-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pp-payment-option__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--pp-radius-md);
    background: #FFFFFF;
    color: var(--pp-blue);
    border: 1px solid var(--pp-border);
}

.pp-payment-option--active .pp-payment-option__icon {
    background: var(--pp-blue);
    color: #FFFFFF;
    border-color: var(--pp-blue);
}

.pp-payment-option--disabled .pp-payment-option__icon {
    color: var(--pp-text-tertiary);
}

.pp-payment-option__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pp-payment-option__name {
    font-family: var(--pp-font-primary);
    font-size: 15px;
    font-weight: 600;
    color: var(--pp-text);
    line-height: 1.3;
}

.pp-payment-option__desc {
    font-size: 13px;
    color: var(--pp-text-secondary);
    line-height: 1.4;
}

.pp-payment-option__check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pp-blue);
    color: #FFFFFF;
}

.pp-payment-option:not(.pp-payment-option--active) .pp-payment-option__check {
    display: none;
}


/* ==========================================================================
   33b. CHECKOUT — Country (narrow + locked) + Street + Apartment in one row.
   Country is locked to Canada via PHP filter, so it only needs to be wide
   enough to show the word "Canada". Street takes the bulk; Apartment fills
   the right.
   ========================================================================== */

/* Country is locked to Canada via PHP — hide the field entirely on checkout.
   The <select> still posts its `CA` value so the order processes normally. */
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #shipping_country_field {
    display: none !important;
}

/* Apartment field — drop the "(optional)" tail WC appends to non-required
   labels so the floating pill stays compact. */
.woocommerce-checkout #billing_address_2_field label .optional,
.woocommerce-checkout #shipping_address_2_field label .optional {
    display: none;
}

/* Without Country in the row, Street and Apartment fill the line. */
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #shipping_address_1_field {
    float: left;
    clear: both;
    width: 66%;
    margin-right: 2%;
}

.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #shipping_address_2_field {
    float: left;
    clear: none;
    width: 32%;
    margin-right: 0;
}

/* Second 3-up row: Town/City | Province | Postal code. */
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_city_field {
    float: left;
    clear: both;
    width: 38%;
    margin-right: 2%;
}

.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #shipping_state_field {
    float: left;
    clear: none;
    width: 28%;
    margin-right: 2%;
}

.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #shipping_postcode_field {
    float: left;
    clear: none;
    width: 30%;
    margin-right: 0;
}

/* Third row: Phone | Email side-by-side. */
.woocommerce-checkout #billing_phone_field,
.woocommerce-checkout #shipping_phone_field {
    float: left;
    clear: both;
    width: 49%;
    margin-right: 2%;
}

.woocommerce-checkout #billing_email_field {
    float: left;
    clear: none;
    width: 49%;
    margin-right: 0;
}

/* Anything after the Phone/Email pair (account creation fields, order
   comments) starts a fresh row. */
.woocommerce-checkout #order_comments_field,
.woocommerce-checkout #account_username_field,
.woocommerce-checkout #account_password_field {
    clear: both;
}

/* On narrow viewports every paired/3-up row stacks. */
@media (max-width: 720px) {
    .woocommerce-checkout #billing_country_field,
    .woocommerce-checkout #shipping_country_field,
    .woocommerce-checkout #billing_address_1_field,
    .woocommerce-checkout #shipping_address_1_field,
    .woocommerce-checkout #billing_address_2_field,
    .woocommerce-checkout #shipping_address_2_field,
    .woocommerce-checkout #billing_city_field,
    .woocommerce-checkout #shipping_city_field,
    .woocommerce-checkout #billing_state_field,
    .woocommerce-checkout #shipping_state_field,
    .woocommerce-checkout #billing_postcode_field,
    .woocommerce-checkout #shipping_postcode_field,
    .woocommerce-checkout #billing_phone_field,
    .woocommerce-checkout #shipping_phone_field,
    .woocommerce-checkout #billing_email_field {
        float: none;
        clear: both;
        width: 100%;
        margin-right: 0;
    }
}

/* Visually de-emphasise the locked country select — single option, but
   show the user it isn't interactive. */
.woocommerce-checkout #billing_country_field .select2-selection,
.woocommerce-checkout #shipping_country_field .select2-selection,
.woocommerce-cart #calc_shipping_country_field .select2-selection {
    cursor: default;
}

/* Cart shipping-calculator: country is locked, so don't waste a full-width
   row on it. */
.woocommerce-cart #calc_shipping_country_field,
.woocommerce-cart .shipping-calculator-form .form-row#calc_shipping_country_field {
    max-width: 240px;
}


/* ==========================================================================
   33. PAGE HERO HEADING — halve the parent theme's `.section` margins.
   Parent ships 120px top + 120px bottom on desktop / 60px on mobile around
   the page-title block. That's too much; cut both in half. */
@media (min-width: 768px) {
    .section.text-center {
        margin-top: 60px !important;
        margin-bottom: 60px !important;
    }
}

@media (max-width: 767px) {
    .section.text-center {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
}

/* Most Popular grid: center items when fewer than 4 are featured */
.pp-most-popular .pp-product-grid-4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
}
.pp-most-popular .pp-product-grid-4 > * {
    flex: 0 1 calc(25% - 21px);
    min-width: 220px;
    max-width: 300px;
}
@media (max-width: 1024px) {
    .pp-most-popular .pp-product-grid-4 > * {
        flex: 0 1 calc(50% - 14px);
        max-width: 360px;
    }
}
@media (max-width: 600px) {
    .pp-most-popular .pp-product-grid-4 > * {
        flex: 0 1 100%;
        max-width: 420px;
    }
}

/* ==========================================================================
   PRODUCT CARD — GRID VARIANT (homepage Most Popular section)
   Mirrors the catalog list-view card styling but in a vertical layout for
   4-column grids. Same fonts, colors, mg pill, Peptide Planner link, and
   red Add to Cart button as .shop-products.is-list .pp-product-card.
   ========================================================================== */

.pp-product-card.pp-product-card--grid {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease;
}
.pp-product-card.pp-product-card--grid:hover {
    box-shadow: 0 8px 24px rgba(52, 52, 52, 0.08);
    transform: translateY(-2px);
}

.pp-product-card--grid .pp-product-card__image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pp-product-card--grid .pp-product-card__image a {
    display: block;
    width: 100%;
    height: 100%;
}
.pp-product-card--grid .pp-product-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
}

.pp-product-card--grid .pp-product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
    gap: 12px;
}

/* Title — centered under image, mg pill inline with breathing room */
.pp-product-card--grid .pp-product-card__title {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-weight: 600;
    font-variation-settings: 'opsz' 20;
    font-size: 20px;
    line-height: 1.2;
    color: #1E293B !important;
    letter-spacing: -0.01em;
    margin: 4px 0 8px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    text-align: center;
}
.pp-product-card--grid .pp-product-card__title-link {
    color: #1E293B !important;
    text-decoration: none !important;
}
.pp-product-card--grid .pp-product-card__title-link:hover { color: #1F9EDB !important; }
.pp-product-card--grid .pp-product-card__mg-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid #1F9EDB;
    background: #E8F4FB;
    color: #1577AD;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    box-sizing: border-box;
}

/* Price on its own line, with FROM prefix.
   Inline: "STARTING AT" small/uppercase label on the left, big bold
   price right next to it, baseline-aligned. */
.pp-product-card--grid .pp-product-card__price-row--solo {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 8px;
}
.pp-product-card--grid .pp-product-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Review row at bottom — "Average Review" label + bigger stars */
.pp-product-card--grid .pp-product-card__review-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 12px;
    padding: 8px 0;
    border-top: 1px solid #F1F5F9;
}
.pp-product-card--grid .pp-product-card__review-label {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
    text-transform: none;
    letter-spacing: 0;
}
.pp-product-card--grid .pp-product-card__rating--lg {
    font-size: 16px;
}
.pp-product-card--grid .pp-product-card__rating--lg .pp-product-card__rating-stars {
    font-size: 20px !important;
    letter-spacing: 2px;
}
.pp-product-card--grid .pp-product-card__rating--lg .pp-product-card__rating-count {
    font-size: 14px;
    margin-left: 4px;
}
.pp-product-card--grid .pp-product-card__price-from {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94A3B8;
}
.pp-product-card--grid .pp-product-card__price-value,
.pp-product-card--grid .pp-product-card__price-value .price,
.pp-product-card--grid .pp-product-card__price-value .woocommerce-Price-amount {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-weight: 700;
    font-variation-settings: 'opsz' 22;
    font-size: 22px;
    color: #1E293B;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* "Use Peptide Planner" pill — top-right of image (paired with heart top-left) */
.pp-product-card--grid .pp-product-card__image .pp-product-card__planner-pill {
    position: absolute !important;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: #1F9EDB;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    transition: color .15s ease, background .15s ease;
}
.pp-product-card--grid .pp-product-card__image .pp-product-card__planner-pill:hover {
    color: #1577AD;
    background: #FFFFFF;
}

/* Category banner — centered link under image, replacing the old Peptide Planner banner */
.pp-product-card--grid .pp-product-card__category-banner {
    display: block;
    text-align: center;
    color: #1F9EDB !important;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    padding: 6px 0;
    transition: color .15s ease;
}
.pp-product-card--grid .pp-product-card__category-banner:hover {
    color: #1577AD !important;
}
.pp-product-card--grid .pp-product-card__divider {
    width: 80%;
    height: 1px;
    margin: 4px auto 12px;
    background: #E5E7EB;
    border: 0;
}

/* CTA — stacked: full-width red Add to Cart, planner link on its own line
   below. Side-by-side broke at 4-up (~256px): "Use Peptide Planner" wrapped
   to 3 lines and fought the nowrap button. Column is robust at any width. */
.pp-product-card--grid .pp-product-card__cta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
}
.pp-product-card--grid .pp-product-card__planner-link {
    white-space: nowrap;
    order: 2;
}
.pp-product-card--grid .pp-product-card__cta-row .pp-product-card__cta {
    order: 1;
}
.pp-product-card--grid .pp-product-card__cta,
.pp-product-card--grid a.pp-product-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #DC2626;
    color: #FFFFFF !important;
    border: 0;
    padding: 11px 28px;
    border-radius: 8px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease;
    white-space: nowrap;
}
.pp-product-card--grid .pp-product-card__cta:hover,
.pp-product-card--grid a.pp-product-card__cta:hover {
    background: #B91C1C;
}
.pp-product-card--grid .pp-product-card__cta svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.pp-product-card--grid .pp-product-card__cta--oos {
    background: #F3F4F6;
    color: #94A3B8 !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Title row — name + mg pill on left, Peptide Planner top-right.
   min-height reserves enough space for the longest title in the catalog
   (3 lines + wrapped mg pill, e.g. "BPC-157 Peptide 10mg, 99%+ Purity,
   COA Verified"). Forces every card's rating-line + price + Add-to-Cart
   to start at the same Y regardless of title length. */
.pp-product-card--grid .pp-product-card__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    min-height: 96px;
}
.pp-product-card--grid .pp-product-card__title {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-weight: 700;
    font-variation-settings: 'opsz' 17;
    font-size: 17px;
    line-height: 1.2;
    color: #343434;
    letter-spacing: -0.01em;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

/* Compact-name subtitle: muted line under the title, e.g. "99%+ Purity, COA Verified" */
.pp-product-card--grid .pp-product-card__subtitle {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #9CA3AF;
    text-align: center;
    margin: 4px 0 0;
    line-height: 1.4;
}
.pp-product-card--grid .pp-product-card__title-link {
    color: inherit;
    text-decoration: none;
}
.pp-product-card--grid .pp-product-card__title-link:hover {
    color: #1F9EDB;
}

/* mg pill — same styling as catalog */
.pp-product-card--grid .pp-product-card__mg-pills {
    display: inline-flex;
    gap: 6px;
}
.pp-product-card--grid .pp-product-card__mg-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1.5px solid #E5E7EB;
    background: #FFFFFF;
    color: #1E293B;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}
.pp-product-card--grid .pp-product-card__mg-pill--active,
.pp-product-card--grid .pp-product-card__mg-pill--informational {
    background: #E8F4FB;
    border-color: #1F9EDB;
    color: #1577AD;
}

/* Peptide Planner link top-right */
.pp-product-card--grid .pp-product-card__quick-actions {
    flex: 0 0 auto;
}
.pp-product-card--grid .pp-product-card__quick-action--dose {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1F9EDB;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
.pp-product-card--grid .pp-product-card__quick-action--dose:hover {
    color: #1577AD;
}
.pp-product-card--grid .pp-product-card__quick-action--dose svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Rating line — blue stars matching catalog */
.pp-product-card--grid .pp-product-card__rating-line {
    margin: 0;
}
.pp-product-card--grid .pp-product-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #94A3B8;
}
.pp-product-card--grid .pp-product-card__rating-stars {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1px;
}
.pp-product-card--grid .pp-product-card__rating-stars-empty { color: #E5E7EB; }
.pp-product-card--grid .pp-product-card__rating-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    color: #1F9EDB;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

/* Bottom group — price + add-to-cart at the very bottom */
.pp-product-card--grid .pp-product-card__bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid #E5E7EB;
    padding-top: 14px;
    margin-top: auto;
}

.pp-product-card--grid .pp-product-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.pp-product-card--grid .pp-product-card__price-from {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94A3B8;
}
.pp-product-card--grid .pp-product-card__price-value,
.pp-product-card--grid .pp-product-card__price-value .price,
.pp-product-card--grid .pp-product-card__price-value .woocommerce-Price-amount {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-weight: 700;
    font-variation-settings: 'opsz' 24;
    font-size: 22px;
    color: #1E293B;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Add to Cart — same red CTA as catalog, full-width in grid */
.pp-product-card--grid .pp-product-card__cta,
.pp-product-card--grid a.pp-product-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #DC2626;
    color: #FFFFFF !important;
    border: 0;
    padding: 12px 18px;
    border-radius: 8px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease;
    white-space: nowrap;
    box-sizing: border-box;
}
.pp-product-card--grid .pp-product-card__cta:hover,
.pp-product-card--grid a.pp-product-card__cta:hover {
    background: #B91C1C;
}
.pp-product-card--grid .pp-product-card__cta svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}
.pp-product-card--grid .pp-product-card__cta--oos {
    background: #F3F4F6;
    color: #94A3B8 !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* OOS — dim the whole card */
.pp-product-card--grid.pp-product-card--oos {
    opacity: 0.55;
}
.pp-product-card--grid .pp-product-card__label--oos {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #1E293B;
    color: #FFFFFF;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
}

/* ==========================================================================
   PRODUCT TABS V2 — panel-card layout, numbered sections, specs/trust/steps,
   COA hero, reviews summary, FAQ accordion. From motsc-tabs-redesign mockup.
   ========================================================================== */

.ppx-tabs--v2 .ppx-tabs__count { font-size: 12px; color: #94A3B8; margin-left: 4px; font-weight: 400; }

.ppx-tabs--v2 .ppx-panel-card {
    background: #FFFFFF; padding: 48px 56px;
}
@media (max-width: 760px) { .ppx-tabs--v2 .ppx-panel-card { padding: 28px 20px; } }

.ppx-tabs--v2 .ppx-panel-h1 {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 32px; font-weight: 700; color: #343434; margin: 0 0 8px;
    letter-spacing: -0.5px; line-height: 1.2;
    text-align: center;
}
@media (max-width: 760px) { .ppx-tabs--v2 .ppx-panel-h1 { font-size: 24px; } }
.ppx-tabs--v2 .ppx-accent { color: #1f9edb; }
.ppx-tabs--v2 .ppx-panel-sub {
    font-size: 15px; color: #6B7280; margin: 0 0 40px; line-height: 1.5;
    text-align: center;
}

.ppx-tabs--v2 .ppx-section { margin-top: 56px; }
.ppx-tabs--v2 .ppx-section:first-of-type { margin-top: 0; }
.ppx-tabs--v2 .ppx-section-kicker {
    font-size: 11px; color: #9CA3AF; margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500;
}
.ppx-tabs--v2 .ppx-section-title {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 22px; font-weight: 600; margin: 0 0 16px;
    display: flex; align-items: center; gap: 12px; color: #343434;
}
.ppx-tabs--v2 .ppx-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; background: #E8F4FB; color: #0e6a99;
    border-radius: 8px; font-family: 'Montserrat', 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 600;
}
.ppx-tabs--v2 .ppx-section-lead { font-size: 14px; color: #6B7280; margin: 12px 0 20px; }

.ppx-tabs--v2 .ppx-prose p {
    font-family: 'Montserrat', 'DM Sans', 'Inter', sans-serif;
    font-size: 15.5px; color: #2A2A2A; margin-bottom: 16px; line-height: 1.65;
}
.ppx-tabs--v2 .ppx-prose p:last-child { margin-bottom: 0; }
.ppx-tabs--v2 .ppx-prose strong { font-weight: 600; color: #343434; }
.ppx-tabs--v2 .ppx-aside {
    font-size: 14px; color: #6B7280; font-style: italic;
    padding-left: 16px; border-left: 2px solid #E5E7EB;
}

.ppx-tabs--v2 .ppx-text-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: #0e6a99; font-weight: 600; font-size: 14px; text-decoration: none;
    margin-top: 16px; transition: color .2s ease;
}
.ppx-tabs--v2 .ppx-text-link:hover { color: #0e6a99; text-decoration: underline; }

.ppx-tabs--v2 .ppx-findings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; }
@media (max-width: 760px) { .ppx-tabs--v2 .ppx-findings-grid { grid-template-columns: 1fr; } }
.ppx-tabs--v2 .ppx-finding-card {
    background: #F9FAFB; border: 0.5px solid #E5E7EB; border-left: 3px solid #1f9edb;
    border-radius: 8px; padding: 16px 18px;
}
.ppx-tabs--v2 .ppx-finding-tag {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: #0e6a99; margin-bottom: 6px;
}
.ppx-tabs--v2 .ppx-finding-card p { font-size: 14px; color: #343434; line-height: 1.5; margin: 0; }

.ppx-tabs--v2 .ppx-specs-block {
    background: transparent; border: none; border-radius: 0;
    overflow: hidden; margin-top: 8px;
}
.ppx-tabs--v2 .ppx-specs-block-header {
    background: transparent; color: #343434; padding: 14px 0;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #E5E7EB;
}
.ppx-tabs--v2 .ppx-specs-title {
    font-family: 'Montserrat', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase; color: #343434;
}
.ppx-tabs--v2 .ppx-specs-meta { font-size: 11px; color: #9CA3AF; }
.ppx-tabs--v2 .ppx-specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .ppx-tabs--v2 .ppx-specs-grid { grid-template-columns: 1fr; } }
.ppx-tabs--v2 .ppx-spec-row {
    padding: 18px 24px; border-bottom: 1px solid #E5E7EB; border-right: 1px solid #E5E7EB;
}
.ppx-tabs--v2 .ppx-spec-row:nth-child(2n) { border-right: none; }
.ppx-tabs--v2 .ppx-spec-row--full {
    grid-column: 1 / -1; border-right: none; background: #E8F4FB;
}
.ppx-tabs--v2 .ppx-spec-label {
    font-size: 11px; color: #9CA3AF; text-transform: uppercase;
    letter-spacing: 0.5px; font-weight: 500; margin-bottom: 4px;
}
.ppx-tabs--v2 .ppx-spec-value {
    font-size: 14px; color: #343434; font-weight: 500; word-break: break-word;
}
.ppx-tabs--v2 .ppx-mono {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 12.5px; letter-spacing: 0.3px;
}

.ppx-tabs--v2 .ppx-trust-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    border: 0.5px solid #E5E7EB; border-radius: 12px; overflow: hidden; margin-top: 8px;
}
@media (max-width: 760px) { .ppx-tabs--v2 .ppx-trust-grid { grid-template-columns: 1fr 1fr; } }
.ppx-tabs--v2 .ppx-trust-card {
    padding: 20px 18px; border-right: 1px solid #E5E7EB; background: #FFFFFF;
}
.ppx-tabs--v2 .ppx-trust-card:last-child { border-right: none; }
.ppx-tabs--v2 .ppx-trust-card h4 {
    font-family: 'Montserrat', 'Bricolage Grotesque', sans-serif;
    font-size: 13px; font-weight: 600; margin: 0 0 6px; line-height: 1.35; color: #343434;
}
.ppx-tabs--v2 .ppx-trust-card p { font-size: 12.5px; color: #6B7280; line-height: 1.5; margin: 0; }

.ppx-tabs--v2 .ppx-steps { display: grid; gap: 12px; margin-top: 8px; }
.ppx-tabs--v2 .ppx-step {
    display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
    padding: 18px 20px; background: #FFFFFF; border: 0.5px solid #E5E7EB; border-radius: 8px;
}
.ppx-tabs--v2 .ppx-step-num {
    width: 32px; height: 32px; background: #343434; color: #fff;
    font-family: 'Montserrat', 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.ppx-tabs--v2 .ppx-step-body { font-size: 14.5px; line-height: 1.6; color: #2A2A2A; }
.ppx-tabs--v2 .ppx-step-body strong { display: block; margin-bottom: 4px; font-weight: 600; color: #343434; }
.ppx-tabs--v2 .ppx-step--warn { border-color: rgba(239, 68, 68,0.3); background: #FEF7F8; }
.ppx-tabs--v2 .ppx-step--warn .ppx-step-num { background: #ef4444; }

.ppx-tabs--v2 .ppx-closer-block {
    background: #E8F4FB; border-radius: 12px; padding: 28px 32px; margin-top: 8px;
}
.ppx-tabs--v2 .ppx-closer-block p { font-size: 15.5px; margin: 0 0 12px; color: #343434; }

.ppx-tabs--v2 .ppx-disclaimer {
    background: #F9FAFB; border: 0.5px solid #E5E7EB;
    border-radius: 8px; padding: 18px 22px; margin-top: 32px;
}
.ppx-tabs--v2 .ppx-disclaimer::before {
    content: "FOR RESEARCH USE ONLY"; display: block;
    font-size: 10px; font-weight: 600; color: #9CA3AF;
    letter-spacing: 0.8px; margin-bottom: 6px;
}
.ppx-tabs--v2 .ppx-disclaimer p { font-size: 12.5px; color: #6B7280; line-height: 1.55; margin: 0; }

/* COA tab */
.ppx-tabs--v2 .ppx-coa-hero {
    display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center;
    background: #FFFFFF; border: 0.5px solid #E5E7EB; border-radius: 12px;
    padding: 40px; margin-bottom: 32px; box-shadow: 0 1px 2px rgba(52, 52, 52,0.05);
}
@media (max-width: 760px) { .ppx-tabs--v2 .ppx-coa-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px 20px; } }
.ppx-tabs--v2 .ppx-purity-ring-wrap { width: 200px; height: 200px; position: relative; margin: 0 auto; }
.ppx-tabs--v2 .ppx-purity-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ppx-tabs--v2 .ppx-purity-bg { fill: none; stroke: #E8F4FB; stroke-width: 12; }
.ppx-tabs--v2 .ppx-purity-fg {
    fill: none; stroke: #1f9edb; stroke-width: 12; stroke-linecap: round;
    stroke-dasharray: 565.5; stroke-dashoffset: 3.4;
}
.ppx-tabs--v2 .ppx-purity-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ppx-tabs--v2 .ppx-purity-num {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 40px; font-weight: 700; color: #343434; letter-spacing: -1px; line-height: 1;
}
.ppx-tabs--v2 .ppx-purity-pct { font-size: 24px; }
.ppx-tabs--v2 .ppx-purity-label {
    font-size: 11px; color: #9CA3AF; text-transform: uppercase;
    letter-spacing: 0.6px; font-weight: 500; margin-top: 4px;
}
.ppx-tabs--v2 .ppx-purity-verified {
    margin-top: 8px; display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600; color: #166534; background: #EAF7DF;
    padding: 3px 8px; border-radius: 9999px;
}
.ppx-tabs--v2 .ppx-batch-title {
    font-family: 'Montserrat', 'Bricolage Grotesque', sans-serif;
    font-size: 22px; font-weight: 600; margin: 0 0 12px; color: #343434;
}
.ppx-tabs--v2 .ppx-batch-row {
    display: grid; grid-template-columns: 130px 1fr; gap: 20px;
    padding: 10px 0; border-bottom: 1px solid #E5E7EB; align-items: center;
}
.ppx-tabs--v2 .ppx-batch-row:last-child { border-bottom: none; }
@media (max-width: 760px) { .ppx-tabs--v2 .ppx-batch-row { grid-template-columns: 1fr; gap: 4px; } }
.ppx-tabs--v2 .ppx-batch-label {
    font-size: 11px; color: #9CA3AF; text-transform: uppercase;
    letter-spacing: 0.5px; font-weight: 500;
}
.ppx-tabs--v2 .ppx-batch-value { font-size: 14px; color: #343434; font-weight: 500; }

.ppx-tabs--v2 .ppx-test-card {
    background: #FFFFFF; border: 0.5px solid #E5E7EB; border-radius: 12px;
    overflow: hidden; margin-bottom: 24px;
}
.ppx-tabs--v2 .ppx-test-head {
    background: #F9FAFB; padding: 14px 24px; border-bottom: 1px solid #E5E7EB;
    display: flex; justify-content: space-between; align-items: center;
}
.ppx-tabs--v2 .ppx-test-head h4 {
    font-family: 'Montserrat', 'Bricolage Grotesque', sans-serif;
    font-size: 15px; font-weight: 600; margin: 0; color: #343434;
}
.ppx-tabs--v2 .ppx-test-head span { font-size: 12px; color: #9CA3AF; }
.ppx-tabs--v2 .ppx-test-row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 20px;
    padding: 14px 24px; border-bottom: 1px solid #E5E7EB; align-items: center;
    font-size: 14px;
}
.ppx-tabs--v2 .ppx-test-row:last-child { border-bottom: none; }
.ppx-tabs--v2 .ppx-test-result { font-weight: 600; color: #343434; }
.ppx-tabs--v2 .ppx-test-status {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600; color: #166534;
    border: 1px solid #7ccf4a; border-radius: 3px; padding: 3px 8px;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.ppx-tabs--v2 .ppx-coa-note {
    background: #E8F4FB; border-left: 3px solid #1f9edb;
    padding: 14px 18px; border-radius: 8px;
    font-size: 13.5px; color: #0e6a99; line-height: 1.55;
}
.ppx-tabs--v2 .ppx-coa-note strong { color: #0e6a99; }

/* Reviews */
.ppx-tabs--v2 .ppx-reviews-summary {
    display: grid; grid-template-columns: 240px 1fr; gap: 40px;
    background: #FFFFFF; border: 0.5px solid #E5E7EB; border-radius: 12px;
    padding: 32px 36px; margin-bottom: 24px; align-items: center;
}
@media (max-width: 760px) {
    .ppx-tabs--v2 .ppx-reviews-summary { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
}
.ppx-tabs--v2 .ppx-rating-display {
    text-align: center; border-right: 1px solid #E5E7EB; padding-right: 32px;
}
@media (max-width: 760px) {
    .ppx-tabs--v2 .ppx-rating-display { border-right: 0; border-bottom: 1px solid #E5E7EB; padding-right: 0; padding-bottom: 24px; }
}
.ppx-tabs--v2 .ppx-big-rating {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 56px; font-weight: 700; line-height: 1;
    letter-spacing: -2px; margin-bottom: 8px; color: #343434;
}
.ppx-tabs--v2 .ppx-big-stars { color: #1f9edb; font-size: 18px; letter-spacing: 2px; margin-bottom: 6px; }
.ppx-tabs--v2 .ppx-rating-count { font-size: 13px; color: #6B7280; }
.ppx-tabs--v2 .ppx-rating-bars { display: grid; gap: 8px; }
.ppx-tabs--v2 .ppx-bar-row {
    display: grid; grid-template-columns: 32px 1fr 32px;
    gap: 12px; align-items: center; font-size: 12px; color: #6B7280;
}
.ppx-tabs--v2 .ppx-bar { height: 8px; background: #F3F4F6; border-radius: 9999px; overflow: hidden; }
.ppx-tabs--v2 .ppx-bar-fill { height: 100%; background: #1f9edb; border-radius: 9999px; }

/* FAQ — matches the homepage FAQ accordion (pp-faq-* in pp-home.css). */
.ppx-tabs--v2 .ppx-faq-list { display: block; gap: 0; margin-top: 8px; }
.ppx-tabs--v2 .ppx-faq-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid #E5E7EB;
    border-radius: 0;
    overflow: hidden;
}
.ppx-tabs--v2 .ppx-faq-item[open] { border-color: #E5E7EB; }
.ppx-tabs--v2 .ppx-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 0;
    padding-right: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: 'Montserrat', 'DM Sans', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #343434;
    line-height: 1.4;
    position: relative;
}
.ppx-tabs--v2 .ppx-faq-item summary::-webkit-details-marker { display: none; }
.ppx-tabs--v2 .ppx-faq-item summary::after {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform .2s ease;
}
.ppx-tabs--v2 .ppx-faq-item[open] summary::after {
    transform: rotate(180deg);
}
.ppx-tabs--v2 .ppx-faq-answer {
    padding: 0 32px 20px 0;
    font-size: 14px;
    color: #6B7280;
    line-height: 1.7;
}
.ppx-tabs--v2 .ppx-faq-answer a { color: #0e6a99; font-weight: 500; }


/* ==========================================================================
   PRODUCT DESCRIPTION — EDITORIAL LAYOUT (HANDOFF.md primitives)
   Layered on top of v1 by an .ppx-section--editorial modifier so v1 styles
   for legacy products keep working untouched. New primitives:
   layouts, tint-panel, pull-band, callout, card + card-grid, timeline,
   closer, btn. All `pp-*` names from the spec are translated to `ppx-*`.
   ========================================================================== */

/* ----- SECTION HEADER (modifier: bigger rhythm, big oversized number) ----- */
.ppx-tabs--v2 .ppx-section--editorial { margin-top: 110px; }
.ppx-tabs--v2 .ppx-section--editorial:first-of-type { margin-top: 0; }
.ppx-tabs--v2 .ppx-section--editorial .ppx-section-header { margin-bottom: 28px; }
.ppx-tabs--v2 .ppx-section--editorial .ppx-section-kicker {
    display: block;
    font-size: 11px; font-weight: 600;
    color: #1f9edb;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 8px;
}
.ppx-tabs--v2 .ppx-section--editorial .ppx-section-title {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 26px; font-weight: 600;
    color: #343434;
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    line-height: 1.2;
    margin: 0;
}
.ppx-tabs--v2 .ppx-section--editorial .ppx-section-num {
    font-family: 'Montserrat', 'Space Grotesk', sans-serif;
    font-size: 56px; font-weight: 700;
    color: #EBE6F2;
    letter-spacing: -2px; line-height: 1;
    width: auto; height: auto; background: none; border-radius: 0;
}
@media (max-width: 880px) {
    .ppx-tabs--v2 .ppx-section--editorial .ppx-section-title { font-size: 22px; }
    .ppx-tabs--v2 .ppx-section--editorial .ppx-section-num { font-size: 40px; }
    .ppx-tabs--v2 .ppx-section--editorial { margin-top: 56px; }
}

/* ----- LAYOUT WRAPPERS ----- */
.ppx-tabs--v2 .ppx-layout--hero {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 32px;
    align-items: stretch;
}
.ppx-tabs--v2 .ppx-layout--split {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 40px;
    align-items: start;
}
.ppx-tabs--v2 .ppx-layout--split .ppx-layout-aside {
    position: sticky; top: 24px;
}
.ppx-tabs--v2 .ppx-layout--split .ppx-layout-aside .ppx-section-header { margin-bottom: 0; }
.ppx-tabs--v2 .ppx-layout--split .ppx-section-title {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}
.ppx-tabs--v2 .ppx-layout--split .ppx-layout-aside { min-width: 0; }
@media (max-width: 880px) {
    .ppx-tabs--v2 .ppx-layout--hero,
    .ppx-tabs--v2 .ppx-layout--split {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .ppx-tabs--v2 .ppx-layout--split .ppx-layout-aside { position: static; }
}

/* ----- TINT PANEL ----- */
.ppx-tabs--v2 .ppx-tint-panel {
    background: #FFFFFF;
    border: 1px solid var(--pp-blue);
    border-radius: 12px;
    padding: 28px 28px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.ppx-tabs--v2 .ppx-tint-panel.is-blue { background: #FFFFFF; }
.ppx-tabs--v2 .ppx-tint-panel-mark {
    display: block;
    font-family: 'Montserrat', 'Space Grotesk', sans-serif;
    font-size: 11px; font-weight: 600;
    color: #0e6a99;
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 18px;
}
.ppx-tabs--v2 .ppx-tint-panel.is-blue .ppx-tint-panel-mark { color: #0e6a99; }
.ppx-tabs--v2 .ppx-tint-panel-pullout {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 18px; font-weight: 600;
    color: #0e6a99;
    line-height: 1.4;
    letter-spacing: -0.2px;
    margin: 0;
}
.ppx-tabs--v2 .ppx-tint-panel.is-blue .ppx-tint-panel-pullout { color: #0e6a99; }
.ppx-tabs--v2 .ppx-tint-panel-footnote {
    font-size: 12px;
    color: #0e6a99;
    margin: 18px 0 0;
    font-style: italic;
    opacity: 0.8;
}

/* ----- PULL BAND ----- */
.ppx-tabs--v2 .ppx-pull-band {
    background: #FFFFFF;
    border: 1px solid var(--pp-blue);
    border-radius: 12px;
    padding: 36px 40px;
    margin: 40px 0;
    text-align: center;
}
.ppx-tabs--v2 .ppx-pull-band-eyebrow {
    font-family: 'Montserrat', 'Space Grotesk', sans-serif;
    font-size: 12px; font-weight: 600;
    color: #1f9edb;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ppx-tabs--v2 .ppx-pull-band-quote {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 26px; font-weight: 600;
    color: #343434;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin: 0;
}
.ppx-tabs--v2 .ppx-pull-band-quote em {
    color: #1f9edb;
    font-style: normal;
}
.ppx-tabs--v2 .ppx-pull-band-attribution {
    margin-top: 14px;
    font-size: 13px;
    color: #6B7280;
}
@media (max-width: 880px) {
    .ppx-tabs--v2 .ppx-pull-band { padding: 24px 20px; }
    .ppx-tabs--v2 .ppx-pull-band-quote { font-size: 20px; }
}

/* ----- CALLOUT ----- */
.ppx-tabs--v2 .ppx-callout {
    border-radius: 10px;
    padding: 22px 24px;
    margin: 22px 0;
}
.ppx-tabs--v2 .ppx-callout-tag {
    display: block;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 10px;
}
.ppx-tabs--v2 .ppx-callout p {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 16px; font-weight: 500;
    line-height: 1.5;
    margin: 0 0 10px;
}
.ppx-tabs--v2 .ppx-callout p:last-child { margin-bottom: 0; }
/* Zero the top margin on a callout that's the first item in its container,
   so the box's top edge aligns with adjacent text in a sibling column. */
.ppx-tabs--v2 .ppx-layout-aside > .ppx-callout:first-child,
.ppx-tabs--v2 .ppx-section-body > .ppx-callout:first-child { margin-top: 0; }
.ppx-tabs--v2 .ppx-callout--info {
    background: #FFFFFF;
    border: 1px solid var(--pp-blue);
}
.ppx-tabs--v2 .ppx-callout--info .ppx-callout-tag,
.ppx-tabs--v2 .ppx-callout--info p { color: #0e6a99; }
.ppx-tabs--v2 .ppx-callout--warn {
    background: #FFFBEB;
    border: 0.5px solid #FDE68A;
}
.ppx-tabs--v2 .ppx-callout--warn .ppx-callout-tag,
.ppx-tabs--v2 .ppx-callout--warn p { color: #78350F; }
.ppx-tabs--v2 .ppx-callout--neutral {
    background: #F9FAFB;
}
.ppx-tabs--v2 .ppx-callout--neutral p {
    color: #6B7280;
    font-size: 14px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}

/* ----- CARD ----- */
.ppx-tabs--v2 .ppx-card {
    background: #FFFFFF;
    border: 1px solid var(--pp-blue);
    border-radius: 8px;
    padding: 22px 26px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ppx-tabs--v2 .ppx-card-tag {
    display: block;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: #0e6a99;
    margin-bottom: 12px;
}
.ppx-tabs--v2 .ppx-card p {
    font-size: 14px;
    color: #343434;
    line-height: 1.5;
    margin: 0;
}
.ppx-tabs--v2 .ppx-card-headline {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 600;
    color: #343434;
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.ppx-tabs--v2 .ppx-card-meta {
    margin-top: auto;
    padding-top: 16px;
    font-size: 11px;
    color: #0e6a99;
    text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: 600;
}

/* Featured card (large headline, white bg matching the small cards) */
.ppx-tabs--v2 .ppx-card--featured {
    background: #FFFFFF;
    border: 1px solid var(--pp-blue);
    padding: 28px 30px;
    display: flex; flex-direction: column;
}
.ppx-tabs--v2 .ppx-card--featured .ppx-card-tag { color: #0e6a99; }
.ppx-tabs--v2 .ppx-card--featured .ppx-card-headline {
    font-size: 20px;
    margin: 6px 0 14px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}
.ppx-tabs--v2 .ppx-card--featured p { color: #6B7280; line-height: 1.55; }

/* Dark card (used as feature in trust grid) */
.ppx-tabs--v2 .ppx-card--dark {
    background: #343434;
    border: none;
    color: #FFFFFF;
    padding: 28px;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 200px;
}
.ppx-tabs--v2 .ppx-card--dark h4 {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 22px; font-weight: 600;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}
.ppx-tabs--v2 .ppx-card--dark p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
}
.ppx-tabs--v2 .ppx-card-eyebrow {
    display: block;
    font-size: 10px; font-weight: 600;
    color: #1f9edb;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: auto;
    padding-bottom: 18px;
}

/* Link card (used in pairs grid) */
.ppx-tabs--v2 .ppx-card--link {
    display: flex; flex-direction: column;
    text-decoration: none;
    color: inherit;
    padding: 20px 22px;
}
.ppx-tabs--v2 .ppx-card--link:hover {
    border-color: #5fb8e6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 52, 52, 0.08);
}
.ppx-tabs--v2 .ppx-card--link .ppx-card-headline {
    color: #0e6a99;
    font-size: 17px;
    margin-bottom: 6px;
}
.ppx-tabs--v2 .ppx-card--link p {
    color: #6B7280;
    font-size: 13px;
    margin-bottom: 14px;
    line-height: 1.5;
}
.ppx-tabs--v2 .ppx-card-cta {
    margin-top: auto;
    padding-top: 12px;
    font-size: 12px; font-weight: 600;
    color: #1f9edb;
    text-transform: uppercase; letter-spacing: 0.5px;
}
@media (prefers-reduced-motion: reduce) {
    .ppx-tabs--v2 .ppx-card--link { transition: none; }
    .ppx-tabs--v2 .ppx-card--link:hover { transform: none; }
}

/* ----- CARD GRID ----- */
.ppx-tabs--v2 .ppx-card-grid { display: grid; gap: 14px; margin: 28px 0 36px; }
.ppx-tabs--v2 .ppx-card-grid--3up { grid-template-columns: repeat(3, 1fr); }
.ppx-tabs--v2 .ppx-card-grid--4up { grid-template-columns: repeat(4, 1fr); }
.ppx-tabs--v2 .ppx-card-grid--5up { grid-template-columns: repeat(5, 1fr); }
.ppx-tabs--v2 .ppx-card-grid--feature-3 { grid-template-columns: 5fr 7fr; }
.ppx-tabs--v2 .ppx-card-grid--feature-3 .ppx-card-stack {
    display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 14px;
}
.ppx-tabs--v2 .ppx-card-grid--feature-4 { grid-template-columns: repeat(3, 1fr); }
.ppx-tabs--v2 .ppx-card-grid--feature-4 > .ppx-card--dark {
    grid-column: 1 / span 2;
}
@media (max-width: 880px) {
    .ppx-tabs--v2 .ppx-card-grid--3up,
    .ppx-tabs--v2 .ppx-card-grid--4up,
    .ppx-tabs--v2 .ppx-card-grid--5up,
    .ppx-tabs--v2 .ppx-card-grid--feature-3 {
        grid-template-columns: 1fr;
    }
    .ppx-tabs--v2 .ppx-card-grid--feature-3 .ppx-card-stack {
        grid-template-rows: none;
    }
    .ppx-tabs--v2 .ppx-card-grid--feature-4 { grid-template-columns: 1fr 1fr; }
    .ppx-tabs--v2 .ppx-card-grid--feature-4 > .ppx-card--dark { grid-column: 1 / -1; }
}

/* ----- TIMELINE ----- */
.ppx-tabs--v2 .ppx-timeline {
    list-style: none;
    position: relative;
    padding-left: 32px;
    counter-reset: ppx-step;
    margin: 28px 0 0;
}
.ppx-tabs--v2 .ppx-timeline::before {
    content: "";
    position: absolute;
    left: 13px; top: 12px; bottom: 12px;
    width: 2px;
    background: #EBE6F2;
}
.ppx-tabs--v2 .ppx-timeline-item {
    position: relative;
    padding: 8px 0 36px 28px;
}
.ppx-tabs--v2 .ppx-timeline-item:last-child { padding-bottom: 0; }
.ppx-tabs--v2 .ppx-timeline-item::before {
    counter-increment: ppx-step;
    content: counter(ppx-step);
    position: absolute;
    left: -32px; top: 0;
    width: 28px; height: 28px;
    background: #1f9edb;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Montserrat', 'Space Grotesk', sans-serif;
    font-weight: 600; font-size: 13px;
    box-shadow: 0 0 0 4px #FFFFFF;
}
.ppx-tabs--v2 .ppx-timeline-item--danger::before { background: #ef4444; }
.ppx-tabs--v2 .ppx-timeline-item h4 {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 15.5px; font-weight: 600;
    color: #343434;
    line-height: 1.3;
    margin: 0 0 10px;
}
.ppx-tabs--v2 .ppx-timeline-item--danger h4 { color: #ef4444; }
.ppx-tabs--v2 .ppx-timeline-item p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
    margin: 0;
}

/* ----- CLOSER (gradient panel, two columns) ----- */
.ppx-tabs--v2 .ppx-closer {
    background: linear-gradient(135deg, #E8F4FB 0%, #E8F4FB 100%);
    border-radius: 12px;
    padding: 40px 44px;
    display: grid;
    grid-template-columns: 9fr 3fr;
    gap: 32px;
    align-items: center;
}
.ppx-tabs--v2 .ppx-closer-pitch h4 {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 22px; font-weight: 600;
    color: #343434;
    margin: 0 0 12px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}
.ppx-tabs--v2 .ppx-closer-pitch p {
    font-size: 14.5px;
    color: #6B7280;
    line-height: 1.6;
    margin: 0;
}
.ppx-tabs--v2 .ppx-closer-actions {
    display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 880px) {
    .ppx-tabs--v2 .ppx-closer {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 28px 24px;
    }
}

/* ----- BUTTONS (editorial closer only) ----- */
.ppx-tabs--v2 .ppx-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    line-height: 1;
}
.ppx-tabs--v2 .ppx-btn--primary {
    background: #ef4444;
    color: #FFFFFF;
}
.ppx-tabs--v2 .ppx-btn--primary:hover {
    background: #dc2626;
    color: #FFFFFF;
}
.ppx-tabs--v2 .ppx-btn--ghost {
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(31, 158, 219, 0.3);
    color: #0e6a99;
}
.ppx-tabs--v2 .ppx-btn--ghost:hover {
    background: #FFFFFF;
    border-color: #1f9edb;
}


/* ==========================================================================
   CHECKOUT V2 — two-column with sticky order summary card
   Customer details on the left, order summary as a sticky card on the right.
   ========================================================================== */

/* v6.1 cleanup: legacy "full-bleed checkout" rules removed — the v6.1
   layout uses a centered 1280px .pp-checkout wrapper from pp-checkout.css.
   The deleted block previously set body bg #FAFAF7 and forced .pp-checkout
   + parent wrappers to max-width: 100%, killing the 1280px constraint. */

/* Page H1 — bigger, brand-bold */
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.page-title {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    color: #343434;
    letter-spacing: -0.02em;
    margin: 0 0 32px;
}

/* Two-column 50/50 — our own CSS Grid on the .pp-checkout__grid wrapper
   from the form-checkout.php override. Bypasses Naturally's flex grid
   entirely, which was shrink-fitting the form to ~45% of the viewport. */
@media (min-width: 992px) {
    .woocommerce-checkout .pp-checkout__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }
    /* Sticky order summary on the right. align-self: start lets the column
       keep its intrinsic height while the row stays tall (driven by the
       billing column), giving sticky room to stick within. */
    .woocommerce-checkout .pp-checkout__col--review {
        position: sticky;
        top: 100px;
        align-self: start;
    }
}

/* Mobile — stack columns. */
@media (max-width: 991px) {
    .woocommerce-checkout .pp-checkout__grid { display: block; }
    .woocommerce-checkout .pp-checkout__col + .pp-checkout__col {
        margin-top: 32px;
    }
}

/* Section headings — bigger, more presence */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #343434;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
}

/* Customer details — both billing and shipping stack on the left */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    width: 100%;
    max-width: 100%;
    float: none;
    padding: 0;
    margin: 0 0 32px;
}
.woocommerce-checkout #customer_details > div + div,
.woocommerce-checkout #customer_details .col2-set {
    margin-top: 0;
}

/* First/Last name side-by-side at >=600px */
@media (min-width: 600px) {
    .woocommerce-checkout form.checkout .form-row-first {
        width: calc(50% - 8px);
        margin-right: 16px;
        float: left;
    }
    .woocommerce-checkout form.checkout .form-row-last {
        width: calc(50% - 8px);
        float: left;
        margin-right: 0;
    }
    .woocommerce-checkout form.checkout .form-row-first + .form-row-last + .clear,
    .woocommerce-checkout form.checkout .form-row-wide {
        clear: both;
    }
}

/* Order summary card */
.woocommerce-checkout #order_review {
    background: #FFFFFF;
    border: 1px solid var(--pp-border, #E5E7EB);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 24px rgba(52, 52, 52, 0.05);
}

/* Order table inside the card — minimal lines, clean typography */
.woocommerce-checkout #order_review .shop_table {
    border: none;
    margin: 0;
    background: transparent;
    width: 100%;
}
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
    background: transparent;
    border: none;
    padding: 10px 0;
    font-size: 14px;
    color: var(--pp-text, #343434);
}
.woocommerce-checkout #order_review .shop_table thead th {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pp-text-secondary, #6B7280);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pp-border, #E5E7EB);
}
.woocommerce-checkout #order_review .shop_table tbody td {
    border-bottom: 1px solid var(--pp-border, #E5E7EB);
}
.woocommerce-checkout #order_review .shop_table tbody td:last-child {
    text-align: right;
}
.woocommerce-checkout #order_review .shop_table tfoot th,
.woocommerce-checkout #order_review .shop_table tfoot td {
    padding: 10px 0;
}
.woocommerce-checkout #order_review .shop_table tfoot tr:last-child th,
.woocommerce-checkout #order_review .shop_table tfoot tr:last-child td {
    border-top: 1px solid var(--pp-border, #E5E7EB);
    padding-top: 16px;
    font-size: 18px;
    font-weight: 700;
    color: #343434;
}

/* Payment methods block sits below the table inside the same card */
.woocommerce-checkout #payment {
    background: transparent;
    border: none;
    margin: 16px 0 0;
    padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment .wc_payment_methods {
    background: #FAFAFA;
    border: 1px solid var(--pp-border, #E5E7EB);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 16px;
    list-style: none;
}
.woocommerce-checkout #payment li.wc_payment_method,
.woocommerce-checkout #payment ul.payment_methods li {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--pp-border, #E5E7EB);
    background: transparent;
}
.woocommerce-checkout #payment li.wc_payment_method:last-child,
.woocommerce-checkout #payment ul.payment_methods li:last-child {
    border-bottom: none;
}
.woocommerce-checkout #payment li.wc_payment_method label {
    font-weight: 500;
    color: #343434;
}
.woocommerce-checkout #payment .payment_box {
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid var(--pp-border, #E5E7EB);
    margin-top: 8px;
}
.woocommerce-checkout #payment .payment_box::before {
    display: none;
}

/* Place order button — full-width primary inside the card */
.woocommerce-checkout #payment #place_order {
    width: 100%;
    height: 56px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 8px;
    border-radius: 12px;
}

/* Terms-and-conditions text under the button */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: 16px 0;
    font-size: 13px;
    color: var(--pp-text-secondary, #6B7280);
}

/* Mobile — single column, order card flows below */
@media (max-width: 991px) {
    .woocommerce-checkout #order_review_heading {
        margin-top: 32px;
    }
    .woocommerce-checkout #order_review {
        margin-top: 0;
    }
}

/* --------------------------------------------------------------------------
   Order line item — thumbnail + name/attrs left, price right.
   Renders inside the existing .product-name td so the table contract stays
   intact for plugin hooks (coupons, shipping, fees).
   -------------------------------------------------------------------------- */
.woocommerce-checkout #order_review .pp-checkout-line {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}
.woocommerce-checkout #order_review .pp-checkout-line__thumb {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pp-blue-tint, #E8F4FB);
    display: flex;
    align-items: center;
    justify-content: center;
}
.woocommerce-checkout #order_review .pp-checkout-line__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
}
.woocommerce-checkout #order_review .pp-checkout-line__qty {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--pp-blue, #1f9edb);
    color: #fff;
    font-family: 'Montserrat', 'Inter', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    box-sizing: border-box;
}
.woocommerce-checkout #order_review .pp-checkout-line__body {
    flex: 1 1 auto;
    min-width: 0;
}
.woocommerce-checkout #order_review .pp-checkout-line__name {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #343434;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}
.woocommerce-checkout #order_review .pp-checkout-line__name a {
    color: inherit;
    text-decoration: none;
}
.woocommerce-checkout #order_review .pp-checkout-line__name a:hover {
    color: var(--pp-blue, #1f9edb);
}
.woocommerce-checkout #order_review .pp-checkout-line__attrs {
    font-size: 12.5px;
    color: var(--pp-text-secondary, #6B7280);
    line-height: 1.45;
}
.woocommerce-checkout #order_review .pp-checkout-line__attrs dl {
    margin: 0;
}
.woocommerce-checkout #order_review .pp-checkout-line__attrs dd p {
    margin: 0;
    display: inline;
}
.woocommerce-checkout #order_review .pp-checkout-line__attrs dt,
.woocommerce-checkout #order_review .pp-checkout-line__attrs dd {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: 400;
}
.woocommerce-checkout #order_review .pp-checkout-line__attrs dt {
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--pp-text-tertiary, #9CA3AF);
}
.woocommerce-checkout #order_review .pp-checkout-line__attrs dt::after {
    content: ' ';
}
.woocommerce-checkout #order_review .pp-checkout-line__attrs dd::after {
    content: ' · ';
    color: var(--pp-border, #E5E7EB);
    margin: 0 2px;
}
.woocommerce-checkout #order_review .pp-checkout-line__attrs dd:last-of-type::after {
    content: '';
}

/* Align line-item subtotal to the top of the row, not vertically centred,
   so it lines up with the product name on tall rows with variations. */
.woocommerce-checkout #order_review .pp-review-order tbody td.product-total {
    vertical-align: top;
    padding-top: 14px;
    font-weight: 600;
    color: #343434;
    white-space: nowrap;
}
.woocommerce-checkout #order_review .pp-review-order tbody td.product-name {
    padding: 14px 0;
}


/* ==========================================================================
   ORDER-RECEIVED PAGE — e-Transfer instructions + sticky summary card
   Mirrors the checkout treatment: full-bleed wrapper, two-column above 992px,
   sticky right-side summary. The instructions block lives left, summary card
   right, standard order details table flows below the grid.
   ========================================================================== */

body.woocommerce-order-received {
    background: #FAFAF7;
}

/* Full-bleed page wrapper — same pattern as checkout. */
.woocommerce-order-received .pp-container,
.woocommerce-order-received .nt-theme-content,
.woocommerce-order-received .nt-theme-inner-container,
.woocommerce-order-received .site-content,
.woocommerce-order-received .container,
.woocommerce-order-received #nt-page,
.woocommerce-order-received #nt-page-container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box;
}

.woocommerce-order-received .woocommerce,
.woocommerce-order-received article.post,
.woocommerce-order-received .nt-theme-content,
.woocommerce-order-received .pp-order-received {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .woocommerce-order-received .pp-container,
    .woocommerce-order-received .nt-theme-content,
    .woocommerce-order-received .nt-theme-inner-container,
    .woocommerce-order-received .site-content,
    .woocommerce-order-received .container,
    .woocommerce-order-received #nt-page,
    .woocommerce-order-received #nt-page-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Two-column layout — instructions wider than summary. */
@media (min-width: 992px) {
    .pp-order-received__grid {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }
    .pp-order-received__col--summary {
        position: sticky;
        top: 100px;
        align-self: start;
    }
}

@media (max-width: 991px) {
    .pp-order-received__grid {
        display: block;
    }
    .pp-order-received__col + .pp-order-received__col {
        margin-top: 32px;
    }
}

.pp-order-received__col--instructions { min-width: 0; }
.pp-order-received__col--summary { min-width: 0; }

/* ----- "Order received" header (overrides WC order-received.php) ----- */
.pp-order-received__header {
    margin: 0 0 24px;
}
.pp-order-received__kicker {
    display: block;
    font-family: 'Montserrat', 'Inter', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pp-blue, #1f9edb);
    margin: 0 0 8px;
}
.pp-order-received__title {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    color: #343434;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 12px;
}
.pp-order-received__lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--pp-text-secondary, #6B7280);
    margin: 0;
    max-width: 60ch;
}

/* ----- E-Transfer instructions block ----- */
.pp-etransfer {
    background: #FFFFFF;
    border: 1px solid var(--pp-border, #E5E7EB);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 4px 24px rgba(52, 52, 52, 0.05);
    margin-top: 24px;
}

.pp-etransfer__header { margin: 0 0 20px; }
.pp-etransfer__kicker {
    display: block;
    font-family: 'Montserrat', 'Inter', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pp-blue, #1f9edb);
    margin: 0 0 8px;
}
.pp-etransfer__title {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #343434;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

.pp-etransfer__callout {
    background: var(--pp-blue-tint, #E8F4FB);
    border-left: 3px solid var(--pp-blue, #1f9edb);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.5;
    color: #343434;
}
.pp-etransfer__callout strong { font-weight: 600; }

.pp-etransfer__rows {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pp-border, #E5E7EB);
}
.pp-etransfer__row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pp-border, #E5E7EB);
    margin: 0;
}
.pp-etransfer__label {
    font-family: 'Montserrat', 'Inter', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pp-text-tertiary, #9CA3AF);
    align-self: center;
    margin: 0;
}
.pp-etransfer__value {
    font-size: 15px;
    font-weight: 500;
    color: #343434;
    margin: 0;
    word-break: break-word;
}
.pp-etransfer__value--mono {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.pp-etransfer__value a {
    color: var(--pp-blue, #1f9edb);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.pp-etransfer__value a:hover { color: var(--pp-blue, #5fb8e6); }
.pp-etransfer__hint {
    font-size: 12px;
    font-weight: 500;
    color: var(--pp-text-tertiary, #9CA3AF);
    margin-left: 4px;
}

.pp-etransfer__notes {
    margin: 24px 0 0;
    padding: 0;
}
.pp-etransfer__notes p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--pp-text-secondary, #6B7280);
    margin: 0 0 8px;
}
.pp-etransfer__notes p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
    .pp-etransfer { padding: 22px 20px; }
    .pp-etransfer__row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 0;
    }
    .pp-etransfer__label { align-self: start; }
}

/* ----- Order summary card (right column) ----- */
.pp-order-summary-card__title {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #343434;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}
.pp-order-summary-card {
    background: #FFFFFF;
    border: 1px solid var(--pp-border, #E5E7EB);
    border-radius: 16px;
    padding: 8px 24px;
    box-shadow: 0 4px 24px rgba(52, 52, 52, 0.05);
    margin: 0;
    list-style: none;
}
.pp-order-summary-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pp-border, #E5E7EB);
    margin: 0;
}
.pp-order-summary-card__row:last-child { border-bottom: none; }
.pp-order-summary-card__label {
    font-family: 'Montserrat', 'Inter', 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--pp-text-secondary, #6B7280);
}
.pp-order-summary-card__value {
    font-size: 14px;
    font-weight: 600;
    color: #343434;
    text-align: right;
    word-break: break-word;
}

/* ----- Order details table flows below the grid ----- */
.pp-order-received .woocommerce-order-details,
.pp-order-received .woocommerce-customer-details {
    margin-top: 48px;
}
.pp-order-received .woocommerce-order-details h2,
.pp-order-received .woocommerce-customer-details h2 {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #343434;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}
.pp-order-received .woocommerce-table {
    background: #FFFFFF;
    border: 1px solid var(--pp-border, #E5E7EB);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(52, 52, 52, 0.05);
    overflow: hidden;
}


/* ==========================================================================
   v4 FORM OVERRIDES — F-03/F-04/F-05/F-06/F-08
   Source: DESIGN.md v4 (Forms and Inputs) + CLAUDE_CODE.md (audit list)
   These rules win via cascade order. Per-page styles can still override.
   ========================================================================== */

/* F-03: Standardize all single-line input controls to 48px height. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
    height: 48px;
    box-sizing: border-box;
}

/* Textarea exempt from height standardization (multi-line). */
textarea,
.woocommerce form .form-row textarea {
    min-height: 80px;
}

/* F-04: Field-row alignment helper. Wrap shared rows in .pp-form-row to enforce equal heights + gap. */
.pp-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}
.pp-form-row > * {
    flex: 1 1 0;
    min-width: 0;
}
.pp-form-row > .pp-form-row__narrow {
    flex: 0 0 auto;
    width: 160px;       /* postal code, ZIP, etc. */
}

/* F-05: Required asterisk. WooCommerce uses <abbr class="required" title="required">*</abbr>. */
abbr.required,
abbr[title="required"] {
    color: #ef4444;
    text-decoration: none;
    border: 0;
    margin-left: 0;
    font-weight: 600;
}

/* F-06: Optional marker. Templates append <span class="pp-optional">(optional)</span> to the label. */
.pp-optional {
    color: #9CA3AF;
    font-weight: 500;
    font-size: 0.92em;
    margin-left: 4px;
}

/* F-08: Postal code field width cap. */
.woocommerce form .form-row #billing_postcode_field input,
.woocommerce form .form-row #shipping_postcode_field input,
input[name="billing_postcode"],
input[name="shipping_postcode"],
input[name*="postcode"],
input[name*="postal"] {
    max-width: 160px;
}

/* Help text + error message patterns (DESIGN.md v4 Help Text / Error Message). */
.pp-help-text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #6B7280;
    font-weight: 400;
}
.pp-field-error {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: #ef4444;
    font-weight: 500;
}
/* Error replaces help text when both present on the same field-wrapper. */
.pp-form-row__has-error .pp-help-text,
.form-row.woocommerce-invalid .pp-help-text {
    display: none;
}

/* Two-Color Heading style for form section headers (Shipping Address, Billing, etc.). */
.pp-form-section-heading {
    margin: 32px 0 16px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25;
    color: #343434;
}
.pp-form-section-heading .pp-accent {
    color: #1f9edb;
}
.pp-form-section-heading + .pp-form-section-sub {
    margin: -8px 0 16px;
    color: #6B7280;
    font-size: 14px;
}
@media (max-width: 768px) {
    .pp-form-section-heading {
        font-size: 22px;
    }
}


/* ==========================================================================
   v4 WC OVERRIDES — WC-04/WC-06/WC-08/WC-10
   Source: DESIGN.md v4 (Cart and Checkout / WooCommerce Overrides)
   ========================================================================== */

/* WC-08: Notices — slim, single-line, white background, action link right-aligned. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 0 16px;
    list-style: none;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    color: #343434;
    box-shadow: none;
    /* keep on one line; long content gets ellipsis instead of wrapping the row */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status-specific accent: thin colored border + icon dot. No bg fill. */
.woocommerce-message { border-color: #7ccf4a; }
.woocommerce-error   { border-color: #ef4444; }
.woocommerce-info    { border-color: #1f9edb; }

/* Color the leading icon (WC injects a ::before mark glyph). Replace with a colored dot. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    margin: 0;
    padding: 0;
    background: #1f9edb;
    color: transparent;
    font-size: 0;
    line-height: 0;
    box-shadow: none;
    position: static;
    top: auto;
    left: auto;
    text-shadow: none;
    border: 0;
    display: inline-block;
}
.woocommerce-message::before { background: #7ccf4a; }
.woocommerce-error::before   { background: #ef4444; }
.woocommerce-info::before    { background: #1f9edb; }

/* Action link (View cart / Sign in / etc.) right-aligned on the same row. */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message a.wc-forward {
    margin-left: auto;
    flex: 0 0 auto;
    background: transparent;
    color: #0e6a99;
    border: 0;
    padding: 0;
    height: auto;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    box-shadow: none;
    line-height: 1.4;
}
.woocommerce-message .button::after,
.woocommerce-message a.button::after,
.woocommerce-message a.wc-forward::after {
    content: " →";
}
.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover,
.woocommerce-message a.wc-forward:hover {
    color: #1f9edb;
    text-decoration: underline;
    background: transparent;
}

/* Mobile: allow wrapping, action drops to its own line at the right. */
@media (max-width: 540px) {
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info {
        white-space: normal;
        flex-wrap: wrap;
    }
}

/* WC-10: Cart totals box — bg #fafafa, 0.5px border, 16px radius. */
.woocommerce-cart .cart_totals,
.woocommerce-cart-form__contents + .cart-collaterals .cart_totals {
    background: #fafafa;
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
}

/* WC-04: Order summary container — drop shadow, no hard border, lighter dividers. */
.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order {
    background: #FFFFFF;
    border: 0.5px solid #F3F4F6;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(52, 52, 52, 0.06);
    padding: 24px;
}
.woocommerce-checkout-review-order-table tbody tr,
.woocommerce-checkout #order_review tbody tr {
    border-bottom: 1px solid #F3F4F6;
}
.woocommerce-checkout-review-order-table tfoot tr.subtotal,
.woocommerce-checkout #order_review tfoot tr.cart-subtotal {
    border-top: 1px solid #E5E7EB;
}

/* WC-06: Place Order button constrained max-width 480px, centered. */
.woocommerce-checkout #place_order,
form.checkout button#place_order {
    max-width: 480px;
    width: 100%;
    margin: 16px auto 0;
    display: block;
}


/* ==========================================================================
   v4 COMPONENTS — Two-Color Heading + Dosage Chip + Trust Signals Row
   Source: DESIGN.md v4 (Fonts / Dosage Chip / Trust Signals Row)
   ========================================================================== */

/* Two-Color Heading + Subtitle.
   Markup: <h2 class="pp-h-twocolor"><span>Stuff people</span> <span class="accent">ask us</span></h2>
                                                    <p class="pp-h-sub">If your question's not here, email us.</p> */
.pp-h-twocolor {
    margin: 0 0 8px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.15;
    color: #343434;
    letter-spacing: -0.01em;
}
.pp-h-twocolor .accent,
.pp-h-twocolor span.pp-accent {
    color: #1f9edb;
}
.pp-h-sub {
    margin: 8px 0 24px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #6B7280;
    line-height: 1.5;
}
@media (max-width: 768px) {
    .pp-h-twocolor { font-size: 24px; }
    .pp-h-sub { font-size: 14px; }
}

/* Dosage Chip — pill-shaped indicator for compound dosage. Inline next to compound name.
   Markup: <span class="pp-dose-chip">10mg</span>  */
.pp-dose-chip {
    display: inline-flex;
    align-items: center;
    height: auto;
    padding: 2px 10px;
    border-radius: 9999px;
    background: #E8F4FB;
    border: 1px solid #1f9edb;
    color: #0e6a99;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 6px;
}

/* Trust Signals Row — inline icon + text pairs.
   Markup:
   <div class="pp-trust-signals">
       <span class="pp-trust-signal"><svg>...</svg> In stock</span>
       <span class="pp-trust-signal"><svg>...</svg> Same-day shipping</span>
   </div> */
.pp-trust-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin: 8px 0;
}
.pp-trust-signal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #0e6a99;
    line-height: 1.4;
}
.pp-trust-signal svg,
.pp-trust-signal .pp-icon {
    width: 14px;
    height: 14px;
    color: #1f9edb;
    stroke: #1f9edb;
    flex: 0 0 14px;
}

/* PDP trust pillars — full-page-width row below the buybox. Stacked icon /
   bold uppercase title / muted description, matching the homepage trust
   pillars treatment. No card border, no background. */
.pp-pdp-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin: 80px 0 8px;
    padding: 0 24px;
    text-align: center;
}
.pp-pdp-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.pp-pdp-pillar__icon {
    width: 32px;
    height: 32px;
    color: #1f9edb;
    stroke: #1f9edb;
    flex: 0 0 32px;
}
.pp-pdp-pillar__title {
    font-family: 'Montserrat', 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #343434;
    margin: 4px 0 0;
}
.pp-pdp-pillar__desc {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
    margin: 0;
    max-width: 240px;
}
@media (max-width: 880px) {
    .pp-pdp-pillars {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}
@media (max-width: 480px) {
    .pp-pdp-pillars {
        grid-template-columns: 1fr;
    }
}

/* Soft accent buttons reusable variants — DESIGN.md "Soft buttons" usage rule. */
.pp-btn-soft-blue {
    background: #E8F4FB;
    color: #0e6a99;
    border: 0.5px solid #D5EBF6;
    border-radius: 12px;
}
.pp-btn-soft-blue:hover {
    background: #D5EBF6;
    color: #0e6a99;
}
.pp-btn-soft-green {
    background: #EAF7DF;
    color: #4e9c2a;
    border: 0.5px solid rgba(124, 207, 74, 0.25);
    border-radius: 12px;
}
.pp-btn-soft-green:hover { background: #DCF1CB; color: #4e9c2a; }
.pp-btn-soft-red {
    background: #FDE8EA;
    color: #c0384a;
    border: 0.5px solid rgba(239, 68, 68, 0.25);
    border-radius: 12px;
}
.pp-btn-soft-red:hover { background: #FAD5D8; color: #c0384a; }
.pp-btn-soft-orange {
    background: #FEEAD8;
    color: #c2410c;
    border: 0.5px solid rgba(249, 115, 22, 0.25);
    border-radius: 12px;
}
.pp-btn-soft-orange:hover { background: #FDD9B5; color: #c2410c; }


/* ==========================================================================
   v4 PRODUCT CARDS — overrides for the existing .pp-product-card markup
   Source: DESIGN.md v4 (Product Cards: Vertical / Horizontal List)
   The existing template (woocommerce/content-product.php) already renders the
   horizontal list shape; these rules align radius/border/padding/hover to v4.
   ========================================================================== */

/* HORIZONTAL LIST CARD (default — used on shop / category pages). */
.pp-product-card {
    background: #FFFFFF;
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 16px;
    transition: box-shadow 0.2s ease;
}
.pp-product-card:hover {
    box-shadow: 0 4px 12px rgba(52, 52, 52, 0.08);
    /* Horizontal list cards do NOT translateY — only grid cards lift. */
    transform: none;
}

/* Soft-shadow card variant in the order-received page (already used) */
.pp-product-card .pp-product-card__category {
    background: #FFFFFF;
    border: 1px solid var(--pp-cat-color, #1f9edb);
    color: var(--pp-cat-text, #0e6a99);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Title row: name + dosage chip inline. */
.pp-product-card__title {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #343434;
    line-height: 1.25;
    margin: 0 0 6px;
}
.pp-product-card__title-link {
    color: inherit;
    text-decoration: none;
}
.pp-product-card__title-link:hover {
    color: #1f9edb;
}

/* Dosage chip on cards — pill, blue tint, blue-text. */
.pp-product-card__mg-pill,
.pp-product-card__mg-pill--informational {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    background: #E8F4FB;
    border: 1px solid #1f9edb;
    color: #0e6a99;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-decoration: none;
    margin-left: 6px;
    vertical-align: middle;
}
.pp-product-card__mg-pill--active {
    background: #1f9edb;
    color: #fafafa;
}
.pp-product-card__mg-pill:hover {
    background: #D5EBF6;
    color: #0e6a99;
}

/* Star rating: inline blue stars + gray count (no dark squares). */
.pp-product-card__rating-stars {
    position: relative;
    display: inline-block;
    color: #E5E7EB;
    font-size: 13px;
    letter-spacing: -1px;
}
.pp-product-card__rating-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #1f9edb;
    white-space: nowrap;
}
.pp-product-card__rating-count {
    color: #9CA3AF;
    font-size: 12px;
    margin-left: 4px;
}

/* Excerpt (horizontal list card only). */
.pp-product-card__excerpt {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 6px 0 8px;
}

/* Price */
.pp-product-card__price-from {
    display: block;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 9px;
    color: #9CA3AF;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.pp-product-card__price-value {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #343434;
}

/* Trust signal pills shown in the bottom area: in stock, same-day shipping. */
.pp-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #0e6a99;
    line-height: 1.4;
}
.pp-info-pill svg { color: #1f9edb; stroke: #1f9edb; }
.pp-info-pill--instock { color: #0e6a99; }

/* Add to cart CTA — red, with cart icon. Width constrained on horizontal list cards. */
.pp-product-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ef4444;
    color: #fafafa;
    border: 0;
    border-radius: 12px;
    padding: 10px 18px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
    max-width: 180px;
}
.pp-product-card__cta:hover { background: #dc2626; color: #fafafa; }
.pp-product-card__cta:active { background: #b91c1c; }
.pp-product-card__cta--oos {
    background: #F3F4F6;
    color: #9CA3AF;
    cursor: not-allowed;
}

/* Out of stock state */
.pp-product-card--oos {
    opacity: 0.7;
}
.pp-product-card--oos .pp-product-card__price-value {
    color: #9CA3AF;
}

/* VERTICAL CARD VARIANT (--grid). Used on home / PDP related compounds. */
.pp-product-card.pp-product-card--grid {
    background: #FFFFFF;
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pp-product-card.pp-product-card--grid:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(52, 52, 52, 0.08);
}
.pp-product-card.pp-product-card--grid .pp-product-card__image {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 12px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-product-card.pp-product-card--grid .pp-product-card__category {
    align-self: center;
    margin: 0 auto 12px;
}
.pp-product-card.pp-product-card--grid .pp-product-card__title-row {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.pp-product-card.pp-product-card--grid .pp-product-card__rating-line {
    justify-content: center;
}
.pp-product-card.pp-product-card--grid .pp-product-card__excerpt {
    display: none;        /* vertical card hides excerpt per v4 spec */
}
.pp-product-card.pp-product-card--grid .pp-product-card__cta {
    max-width: 100%;      /* vertical card: full-width add-to-cart per Button Width Default exception */
    width: 100%;
}


/* ==========================================================================
   v4 FAQ ACCORDION (site-wide)
   Source: DESIGN.md v4 (FAQ Accordion)
   Native <details>/<summary> — no JS required.
   Targets:
   - .pp-faq-accordion (general site-wide)
   - .ppx-tabs__faq-list / .ppx-tabs__faq-item (existing PDP FAQ markup)
   ========================================================================== */

.pp-faq-accordion,
.ppx-tabs__faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-faq-item,
.ppx-tabs__faq-item {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.pp-faq-item:hover:not([open]),
.ppx-tabs__faq-item:hover:not([open]) {
    border-color: #D1D5DB;
}

.pp-faq-item[open],
.ppx-tabs__faq-item[open] {
    border: 1.5px solid #1f9edb;
}

.pp-faq-item summary,
.ppx-tabs__faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #343434;
    line-height: 1.4;
    position: relative;
    padding-right: 48px;
    user-select: none;
    transition: color 0.2s ease;
}

.pp-faq-item summary::-webkit-details-marker,
.ppx-tabs__faq-item summary::-webkit-details-marker {
    display: none;
}

/* Plus / minus icon (right edge of summary) */
.pp-faq-item summary::after,
.ppx-tabs__faq-item summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: #6B7280;
    font-size: 22px;
    font-weight: 400;
    transition: transform 0.2s ease;
}

.pp-faq-item[open] summary::after,
.ppx-tabs__faq-item[open] summary::after {
    content: "−";
    color: #1f9edb;
}

/* Answer body */
.pp-faq-item .pp-faq-answer,
.ppx-tabs__faq-item .ppx-tabs__faq-answer,
.pp-faq-item > p,
.ppx-tabs__faq-item > p,
.pp-faq-item > div,
.ppx-tabs__faq-item > div {
    padding: 0 20px 18px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #6B7280;
    line-height: 1.55;
}

.pp-faq-item .pp-faq-answer p,
.ppx-tabs__faq-item .ppx-tabs__faq-answer p {
    margin: 0 0 12px;
}
.pp-faq-item .pp-faq-answer p:last-child,
.ppx-tabs__faq-item .ppx-tabs__faq-answer p:last-child {
    margin-bottom: 0;
}

/* Reduced motion: kill the icon transition. */
@media (prefers-reduced-motion: reduce) {
    .pp-faq-item summary::after,
    .ppx-tabs__faq-item summary::after { transition: none; }
}


/* ==========================================================================
   v4 FORMS — F-02 LABEL-LEFT desktop pattern
   Source: DESIGN.md v4 (Forms and Inputs / Layout Pattern)
   Desktop: 140px label column, 16px gap, input column flex.
   Mobile (≤768px): labels stack above inputs (existing default).
   Scope: WC checkout, account, login, register, password-reset, contact, custom forms
   that opt in via .pp-form-labels-left.
   ========================================================================== */

@media (min-width: 769px) {
    /* Each form-row becomes a flex container with a label column on the left. */
    .woocommerce form .form-row,
    .woocommerce-form-login .form-row,
    .woocommerce-form-register .form-row,
    .woocommerce-EditAccountForm .form-row,
    .woocommerce-address-fields .form-row,
    .pp-form-labels-left .form-row,
    .pp-form-labels-left p {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 16px;
    }

    /* Label column. */
    .woocommerce form .form-row > label,
    .woocommerce-form-login .form-row > label,
    .woocommerce-form-register .form-row > label,
    .woocommerce-EditAccountForm .form-row > label,
    .woocommerce-address-fields .form-row > label,
    .pp-form-labels-left .form-row > label,
    .pp-form-labels-left p > label {
        flex: 0 0 140px;
        max-width: 140px;
        margin: 0;
        padding-top: 14px;       /* align with input baseline (input has 12px top padding + 14px text) */
        font-family: 'Montserrat', 'DM Sans', sans-serif;
        font-weight: 500;
        font-size: 13px;
        color: #343434;
        text-align: left;
        line-height: 1.4;
    }

    /* Input wrapper takes the rest. */
    .woocommerce form .form-row .woocommerce-input-wrapper,
    .woocommerce-form-login .form-row .woocommerce-input-wrapper,
    .woocommerce-form-register .form-row .woocommerce-input-wrapper,
    .pp-form-labels-left .form-row .woocommerce-input-wrapper,
    .pp-form-labels-left p .woocommerce-input-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* When form-row-first / form-row-last sit in a 50/50 row inside one parent,
       the inner label-left still applies but each column is half the parent width.
       Override the parent's grid so they stack vertically inside checkout (less cramped). */
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
        display: block;
    }
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last {
        width: 100%;
        max-width: 100%;
        float: none;
    }
}


/* ==========================================================================
   v4 WC-01: MY ACCOUNT HORIZONTAL TABS
   Source: DESIGN.md v4 (Tabs and Menus / My Account Navigation)
   Replaces the default vertical sidebar with a horizontal tab strip.
   Note: requires the theme to also override navigation.php (in CLAUDE_CODE.md).
   These rules retro-style the existing navigation markup if present.
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%;
    float: none;
    margin: 0 0 24px !important;
    padding: 0 !important;
    /* Override the older vertical-sidebar styling at the top of this file
       (background, border, border-radius, padding, sticky position) so the nav
       reads as a flat tab strip, identical to the PDP product tabs. */
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    top: auto !important;
    border-bottom: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar { display: none; }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 24px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    min-width: max-content;
    background: none !important;
    border: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    scroll-snap-align: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: inline-block;
    padding: 12px 0 20px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-left: 0 !important;
    font-family: 'Montserrat', 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    color: #6B7280 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
    white-space: nowrap;
    margin-bottom: 0 !important;        /* parent bottom border removed */
    text-shadow: none !important;
    box-shadow: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: #343434 !important;
    background: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active > a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
    color: #343434 !important;
    font-weight: 600 !important;
    border-bottom-color: #1f9edb !important;
    border-left: 0 !important;
    background: none !important;
}

/* WC-02: My Account content — flat, no card box (matches the flat tab nav) */
.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-content { padding: 0 !important; }
    .woocommerce-account .woocommerce-MyAccount-navigation ul { gap: 16px; }
}


/* ==========================================================================
   v4 C-01: SITE ENTRY MODAL (visual spec only)
   Source: DESIGN.md v4 (Site Entry Modal)
   The trigger logic + counsel-touched copy live in PHP/LEGAL_PAGES.md.
   ========================================================================== */

.pp-entry-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(52, 52, 52, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: pp-fade-in 0.2s ease;
}

.pp-entry-modal {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(52, 52, 52, 0.25);
}

.pp-entry-modal__heading {
    margin: 0 0 16px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #343434;
    line-height: 1.3;
}

.pp-entry-modal__body {
    margin: 0 0 24px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #343434;
    line-height: 1.5;
}

.pp-entry-modal__buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.pp-entry-modal__btn {
    flex: 1 1 0;
    height: 48px;
    border-radius: 12px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pp-entry-modal__btn--yes {
    background: #ef4444;
    color: #fafafa;
}
.pp-entry-modal__btn--yes:hover { background: #dc2626; }
.pp-entry-modal__btn--no {
    background: transparent;
    color: #343434;
    border: 1.5px solid #D1D5DB;
}
.pp-entry-modal__btn--no:hover { border-color: #9CA3AF; background: #fafafa; }

@media (max-width: 540px) {
    .pp-entry-modal { padding: 24px; }
    .pp-entry-modal__buttons { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-entry-modal-overlay { animation: none; }
}

@keyframes pp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ==========================================================================
   v4 C-05: PDP REVIEW BLOCK
   Source: DESIGN.md v4 (Star Rating / PDP Review Block)
   Markup:
   <div class="pp-pdp-review">
       <span class="pp-pdp-review__num">4.4</span>
       <span class="pp-pdp-review__stars">★★★★★</span>
       <span class="pp-pdp-review__count">(5 reviews)</span>
   </div>
   ========================================================================== */

.pp-pdp-review {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}
.pp-pdp-review__num {
    background: #1f9edb;
    color: #fafafa;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
}
.pp-pdp-review__stars {
    color: #1f9edb;
    font-size: 15px;
    letter-spacing: 0.5px;
}
.pp-pdp-review__count {
    color: #6B7280;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
}


/* ==========================================================================
   v4 WC-07: PRODUCT TABS ON PDP
   Source: DESIGN.md v4 (Tabs and Menus)
   Description / Reviews / FAQ / COA tabs use the locked Tab pattern:
   text only, blue underline on active, no rounded corners, full-width bottom border.
   ========================================================================== */

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    margin: 0 0 24px;
    border-bottom: 1px solid #E5E7EB;
    background: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
    display: none;          /* kill default WC pseudo-borders */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0 24px 0 0;
    padding: 0;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 14px 0;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #6B7280;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
    margin-bottom: -1px;
    text-shadow: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: #343434;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active > a {
    color: #343434;
    font-weight: 600;
    border-bottom-color: #1f9edb;
}


/* ==========================================================================
   v4 FOOTER OVERRIDES (utilitarian dark footer)
   Source: DESIGN.md v4 (Footer)
   Light-touch tweaks. Full footer rebuild lives in template work.
   ========================================================================== */

.site-footer,
footer.site-footer,
.pp-footer {
    background: #343434;
    color: #fafafa;
}

.site-footer a,
footer.site-footer a,
.pp-footer a {
    color: rgba(250, 250, 250, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover,
footer.site-footer a:hover,
.pp-footer a:hover {
    color: #1f9edb;
}

.site-footer .site-info,
.site-footer .pp-footer-disclaimer,
footer .pp-footer-disclaimer {
    color: rgba(250, 250, 250, 0.3);
    font-size: 10px;
    line-height: 1.5;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 400;
}


/* ==========================================================================
   v4 PDP BUY BOX (locked from sparring mock)
   Source: pdp-buybox-redesign.html
   Wraps the right-column buy area on single product pages.
   Markup convention:
     <div class="pp-buybox">
       <div class="pp-buybox__title-row"> H1 + dosage chip + tagline </div>
       <div class="pp-pdp-review"> ... </div>
       <div class="pp-buybox__price-row"> price label + price + strike </div>
       <div class="pp-selector-group"> Vial Size pills </div>
       <div class="pp-selector-group"> Pack Size pills (with price + savings) </div>
       <div class="pp-buybox__cart-row"> qty + Add to Cart </div>
       <button class="pp-buybox__ghost"> Email for COA first </button>
       <div class="pp-trust-signals"> ... </div>
     </div>
   ========================================================================== */

.pp-buybox {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    color: #343434;
}

.pp-buybox__title-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pp-buybox__compound-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.pp-buybox .pp-compound-name,
.pp-buybox h1.product_title,
.pp-pdp-title {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 26px;
    color: #343434;
    margin: 0;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
/* Full-width PDP title (lives above the gallery + buybox table).
   Centered with thin horizontal rules flanking on both sides + a
   chunk of padding above and below. */
.pp-pdp-title {
    width: 100%;
    max-width: 100%;
    margin: 32px 0 48px;
    display: flex;
    align-items: center;
    gap: 28px;
    text-align: center;
}
.pp-pdp-title::before,
.pp-pdp-title::after {
    content: '';
    flex: 1 1 0%;
    height: 1px;
    background: var(--pp-border, #E5E7EB);
}
/* Hide the "Starting at" prefix everywhere it's injected (PDP price row
   AND the .single_variation_wrap variation price update). pp-pack-sizes
   mu-plugin adds this prefix to single-vial variation price_html. */
.ppx-price-prefix { display: none !important; }

/* Drop the star glyphs from the rating row — keep only the 4.6 badge
   and the "(N reviews)" count. */
.pp-pdp-review__stars { display: none !important; }

/* PDP page-level category color tokens. The class is set on .ppx-page in
   woocommerce-single.php from the product's primary category slug. The
   gallery border + the buybox category banner consume the tokens. */
.pp-page--cat-healing     { --pp-cat-color: #7CCF4A; --pp-cat-text: #4D8B2C; }
.pp-page--cat-brain       { --pp-cat-color: #1F9EDB; --pp-cat-text: #1577AD; }
.pp-page--cat-weight      { --pp-cat-color: #F97316; --pp-cat-text: #C2410C; }
.pp-page--cat-performance { --pp-cat-color: #EF4444; --pp-cat-text: #B91C1C; }
.pp-page--cat-skin        { --pp-cat-color: #9B7AEF; --pp-cat-text: #6B4FB8; }
.pp-page--cat-immune      { --pp-cat-color: #F59E0B; --pp-cat-text: #B45309; }

/* Buybox category banner — sits above the tagline, in category color */
.pp-buybox__category-link {
    display: inline-block;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--pp-cat-text, #1577AD);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    margin: 8px 0 0;
    line-height: 1.2;
}
.pp-buybox__category-link:hover {
    text-decoration: underline;
}

/* Three checkmark highlights (replaces multi-line tagline on MOTS-c).
   Top divider above the list separates it from the category banner. */
.pp-buybox__highlights {
    list-style: none;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-buybox__highlights li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px;
    color: #343434;
    line-height: 1.4;
}
.pp-buybox__highlights svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #4e9c2a;
    margin-top: 3px;
    stroke: #4e9c2a;
}

/* Gallery image — no colored category border (per latest design pass).
   Category color still drives the buybox category banner text only. */

/* WPLoyalty "Earn up to N points" message — JS repositions it ABOVE
   the price row inside .pp-buybox. Top + bottom dividers frame this
   single-line eyebrow over the price. */
.pp-buybox .wlr-product-message,
.single-product .wlr-product-message {
    display: block;
    margin: 0 !important;
    padding: 16px 0 16px !important;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    font-size: 13px;
    color: #0e6a99;
}

/* Hide the duplicate variation price block that WC injects into
   .single_variation when a pill is selected — the buybox already
   shows the headline price, this duplicates it below the pack pills. */
.pp-buybox .single_variation { display: none !important; }

/* The dosage chip next to the H1 was removed from the markup, but in
   case any cached HTML still has it, hide it. */
.pp-buybox__dosage-chip { display: none !important; }
.pp-buybox__dosage-chip {
    display: inline-block;
    background: #E8F4FB;
    color: #0e6a99;
    border: 1px solid #1f9edb;
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.pp-buybox__tagline {
    color: #6B7280;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Price row — sits below the WPLoyalty message (JS moves the message
   above it). Divider above the section is on .wlr-product-message's
   border-top, so price-row stays clean top + bottom. */
.pp-buybox__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
    border-bottom: none;
    flex-wrap: wrap;
}
/* Price stays left-justified; review block pushes to the right via margin-left:auto. */
.pp-buybox__price-row .pp-buybox__price {
    margin-right: auto;
}
.pp-buybox__price-row .pp-pdp-review {
    margin: 0;
    flex: 0 0 auto;
}
@media (max-width: 540px) {
    .pp-buybox__price-row { gap: 12px; }
    .pp-buybox__price-row .pp-buybox__price { margin-right: 0; }
}
.pp-buybox__price-label {
    color: #9CA3AF;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.pp-buybox__price {
    color: #343434;
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
}
.pp-buybox__price-strike {
    color: #9CA3AF;
    font-size: 14px;
    text-decoration: line-through;
}

/* Hide the "25 in stock" stock-quantity line on PDPs. The buybox already
   shows an "In stock" pill and the 4-pill trust row covers shipping/COA. */
body.single-product .stock,
.pp-buybox .stock { display: none !important; }

/* Selector group — pills full-width. Header label is hidden per design;
   the pill content + the size chip near the title carry the meaning. */
.pp-selector-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}
.pp-selector-group__header {
    display: none;
}
.pp-selector-group__label {
    color: #343434;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.pp-selector-group__selected {
    color: #6B7280;
    font-size: 12px;
    line-height: 1.2;
}
.pp-selector-group .pp-pill-row,
.pp-selector-group .pp-pack-row {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 600px) {
    .pp-selector-group {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .pp-selector-group__header {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Vial-size pills (small, label-only) */
.pp-pill-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pp-pill {
    background: #FFFFFF;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 8px 18px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #343434;
    cursor: pointer;
    min-width: 80px;
    text-align: center;
    transition: 0.2s ease;
    line-height: 1.2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.pp-pill__value {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
}
.pp-pill__label {
    font-size: 10px;
    font-weight: 500;
    color: #6B7280;
    text-transform: lowercase;
    letter-spacing: 0;
    line-height: 1.1;
}
.pp-pill.is-active .pp-pill__label,
.pp-pill[aria-pressed="true"] .pp-pill__label {
    color: rgba(250, 250, 250, 0.85);
}
.pp-pill:hover { border-color: #1f9edb; }
.pp-pill.is-active,
.pp-pill[aria-pressed="true"] {
    background: #1f9edb;
    border-color: #1f9edb;
    color: #fafafa;
}
.pp-pill.is-disabled,
.pp-pill[disabled] {
    background: #F3F4F6;
    border-color: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
}

/* Vertical spacing between selector groups (Vial Size → Pack Size).
   .pp-pill-selectors wraps both .pp-selector-group rows. */
.pp-pill-selectors {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Pack-size pills (larger, with embedded price + savings).
   Layout: 2-row grid inside each pill — top row "name | savings"
   (left/right), bottom row "price" (centered, full width).
   Row container: flex with auto-sized pills, left-aligned. */
.pp-pack-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
}
.pp-pack-row .pp-pack-pill {
    flex: 0 0 auto;
}
.pp-pack-pill {
    background: #FFFFFF;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px 14px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    cursor: pointer;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name savings"
        "price price";
    column-gap: 8px;
    row-gap: 6px;
    align-items: center;
    transition: 0.2s ease;
    position: relative;
}
.pp-pack-pill:hover { border-color: #1f9edb; }
.pp-pack-pill.is-active,
.pp-pack-pill[aria-pressed="true"] {
    background: #E8F4FB;
    border-color: #1f9edb;
}
.pp-pack-pill__name {
    grid-area: name;
    font-size: 13px;
    font-weight: 600;
    color: #343434;
}
.pp-pack-pill.is-active .pp-pack-pill__name { color: #0e6a99; }
.pp-pack-pill__price {
    grid-area: price;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #343434;
}
.pp-pack-pill.is-active .pp-pack-pill__price { color: #0e6a99; }
.pp-pack-pill__savings {
    grid-area: savings;
    justify-self: end;
    font-size: 10px;
    font-weight: 600;
    color: #4e9c2a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pp-pack-pill__check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    color: #1f9edb;
    display: none;
}
.pp-pack-pill.is-active .pp-pack-pill__check { display: block; }

/* Quantity + Add to Cart row — flex so the button fits its content
   instead of stretching to fill the column. */
.pp-buybox__cart-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pp-buybox__cart-row .pp-qty,
.pp-buybox__cart-row .quantity {
    flex: 0 0 130px;
}
.pp-qty {
    display: flex;
    align-items: center;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    height: 48px;
    background: #FFFFFF;
}
.pp-qty button {
    background: none;
    border: 0;
    color: #6B7280;
    font-size: 18px;
    cursor: pointer;
    width: 36px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    line-height: 1;
}
.pp-qty button:hover { background: #fafafa; color: #343434; }
.pp-qty input,
.pp-qty input[type="number"] {
    border: 0;
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    width: 56px;
    height: 100%;
    text-align: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #343434;
    -moz-appearance: textfield;
    background: #FFFFFF;
    padding: 0;
}
.pp-qty input::-webkit-outer-spin-button,
.pp-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Primary CTA inside the buy box (Add to Cart) */
.pp-buybox__cta {
    background: #ef4444;
    color: #fafafa;
    border: 0;
    border-radius: 12px;
    height: 48px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
    padding: 0 18px;
}
.pp-buybox__cta:hover { background: #dc2626; color: #fafafa; }
.pp-buybox__cta:active { background: #b91c1c; }
.pp-buybox__cta[disabled] {
    background: #F3F4F6;
    color: #9CA3AF;
    cursor: not-allowed;
}

/* Ghost secondary action — kept for any existing template references. */
.pp-buybox__ghost {
    background: #FFFFFF;
    border: 1.5px solid #D1D5DB;
    color: #343434;
    border-radius: 12px;
    height: 48px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pp-buybox__ghost:hover {
    border-color: #9CA3AF;
    background: #fafafa;
}

/* Peptide Planner text link — borderless, blue, arrow appended. (Text Link pattern.) */
.pp-buybox__planner-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;        /* center within the .pp-buybox column */
    padding: 4px 0;
    background: transparent;
    border: 0;
    color: #0e6a99;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}
.pp-buybox__planner-link:hover {
    color: #1f9edb;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pp-buybox__planner-link:focus-visible {
    outline: 2px solid #1f9edb;
    outline-offset: 4px;
    border-radius: 2px;
}
.pp-buybox__planner-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    font-weight: 400;
}
.pp-buybox__planner-link:hover .pp-buybox__planner-arrow {
    transform: translateX(2px);
}

/* Trust signals row inside the buy box (top border separator) */
.pp-buybox .pp-trust-signals {
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
    margin: 0;
}

/* Mobile: collapse cart row to single column. */
@media (max-width: 760px) {
    .pp-pack-row { grid-template-columns: 1fr; }
    .pp-buybox__cart-row { grid-template-columns: 1fr; }
    .pp-qty { width: 130px; }
    .pp-buybox .pp-compound-name,
    .pp-buybox h1.product_title { font-size: 26px; }
    .pp-buybox__price { font-size: 24px; }
}

/* Hide the WC variations table — kept in DOM for the variation engine, but
   visually replaced by .pp-pill-selectors. (DESIGN.md v4 buy-box wiring.) */
.variations_form.pp-buybox-form .variations.pp-variations-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.variations_form.pp-buybox-form .reset_variations { display: none !important; }

/* Style WC's default qty + add-to-cart inside the pp-buybox form so the
   single-variation row visually matches the buy-box mock.
   !important is needed to beat the parent theme + legacy .ppx-buy rules
   that still ship "display: flex !important" and "background: red !important"
   from earlier audit passes. */
.variations_form.pp-buybox-form .single_variation_wrap .woocommerce-variation-add-to-cart,
.pp-buybox .variations_form.pp-buybox-form .single_variation_wrap .woocommerce-variation-add-to-cart {
    display: grid !important;
    grid-template-columns: 130px 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 28px !important;
    flex: none !important;
}
.variations_form.pp-buybox-form .single_variation_wrap .quantity,
.pp-buybox .variations_form.pp-buybox-form .single_variation_wrap .quantity {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    height: 48px !important;
    background: #FFFFFF !important;
    width: 130px !important;
    margin: 0 !important;
    flex: 0 0 130px !important;
}
.variations_form.pp-buybox-form .single_variation_wrap .quantity input.qty,
.pp-buybox .variations_form.pp-buybox-form .single_variation_wrap .quantity input.qty {
    border: 0 !important;
    border-left: 1px solid #E5E7EB !important;
    border-right: 1px solid #E5E7EB !important;
    width: 56px !important;
    height: 100% !important;
    text-align: center !important;
    font-family: 'Montserrat', 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #343434 !important;
    background: #FFFFFF !important;
    -moz-appearance: textfield !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 0 0 56px !important;
}
.variations_form.pp-buybox-form .single_variation_wrap .quantity input.qty::-webkit-inner-spin-button,
.variations_form.pp-buybox-form .single_variation_wrap .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.variations_form.pp-buybox-form .single_variation_wrap .single_add_to_cart_button,
.pp-buybox .variations_form.pp-buybox-form .single_variation_wrap .single_add_to_cart_button {
    background: #ef4444 !important;
    color: #fafafa !important;
    border: 0 !important;
    border-radius: 12px !important;
    height: 48px !important;
    width: 100% !important;
    font-family: 'Montserrat', 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background-color 0.2s ease !important;
    padding: 0 18px !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
}
.variations_form.pp-buybox-form .single_variation_wrap .single_add_to_cart_button:hover,
.pp-buybox .variations_form.pp-buybox-form .single_variation_wrap .single_add_to_cart_button:hover {
    background: #dc2626 !important;
    color: #fafafa !important;
}
.variations_form.pp-buybox-form .single_variation_wrap .single_add_to_cart_button.disabled,
.variations_form.pp-buybox-form .single_variation_wrap .single_add_to_cart_button:disabled,
.pp-buybox .variations_form.pp-buybox-form .single_variation_wrap .single_add_to_cart_button.disabled,
.pp-buybox .variations_form.pp-buybox-form .single_variation_wrap .single_add_to_cart_button:disabled {
    background: #F3F4F6 !important;
    color: #9CA3AF !important;
    cursor: not-allowed !important;
}

/* The .single_variation div WC drops in for variation-specific notice / price. */
.variations_form.pp-buybox-form .single_variation {
    margin-top: 8px;
}
.variations_form.pp-buybox-form .single_variation .stock {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #4e9c2a;
    margin: 0;
}
.variations_form.pp-buybox-form .single_variation .stock.out-of-stock {
    color: #c0384a;
}

/* Hide the duplicate per-variation price WC injects (we show price in the
   .pp-buybox__price-row above). Keep the validation messages visible. */
.variations_form.pp-buybox-form .single_variation .price {
    display: none;
}

/* Simple-product form (no variations). Same qty + button styling, different markup root. */
form.cart.pp-buybox-form--simple {
    margin: 16px 0 0;
}
form.cart.pp-buybox-form--simple .quantity {
    display: flex;
    align-items: center;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    height: 48px;
    background: #FFFFFF;
    width: 130px;
    margin: 0;
}
form.cart.pp-buybox-form--simple .quantity input.qty {
    border: 0;
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    width: 56px;
    height: 100%;
    text-align: center;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #343434;
    background: #FFFFFF;
    padding: 0;
    -moz-appearance: textfield;
    box-shadow: none;
}
form.cart.pp-buybox-form--simple .quantity input.qty::-webkit-inner-spin-button,
form.cart.pp-buybox-form--simple .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
form.cart.pp-buybox-form--simple .single_add_to_cart_button {
    background: #ef4444;
    color: #fafafa;
    border: 0;
    border-radius: 12px;
    height: 48px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
    padding: 0 18px;
    text-shadow: none;
    width: 100%;
}
form.cart.pp-buybox-form--simple .single_add_to_cart_button:hover {
    background: #dc2626;
    color: #fafafa;
}
form.cart.pp-buybox-form--simple .single_add_to_cart_button:disabled,
form.cart.pp-buybox-form--simple .single_add_to_cart_button.disabled {
    background: #F3F4F6;
    color: #9CA3AF;
    cursor: not-allowed;
}


/* ==========================================================================
   v4 VERTICAL CARD SIZE-UP — bump every text/icon ~1 step in .--grid variant.
   Source: user feedback on homepage "Most Popular" cards looking too small.
   Targets only the vertical (home / PDP related) cards. Horizontal list
   cards on shop pages stay at their current sizes.
   ========================================================================== */

.pp-product-card.pp-product-card--grid {
    padding: 18px 18px 20px;
}

.pp-product-card.pp-product-card--grid .pp-product-card__planner-banner {
    font-size: 14px;            /* was ~12px */
    font-weight: 600;
    gap: 8px;
    padding: 8px 0;
}
.pp-product-card.pp-product-card--grid .pp-product-card__planner-banner svg {
    width: 16px;                /* was 14px */
    height: 16px;
}

.pp-product-card.pp-product-card--grid .pp-product-card__title {
    font-size: 18px;            /* was 16px */
    line-height: 1.3;
    gap: 10px;
}
.pp-product-card.pp-product-card--grid .pp-product-card__title-link {
    font-size: inherit;
}

.pp-product-card.pp-product-card--grid .pp-product-card__mg-pill,
.pp-product-card.pp-product-card--grid .pp-product-card__mg-pill--informational {
    font-size: 12px;            /* was 10px */
    padding: 3px 12px;          /* was 2px 10px */
}

.pp-product-card.pp-product-card--grid .pp-product-card__price-from {
    font-size: 11px;            /* was 9px */
    letter-spacing: 0.05em;
    white-space: nowrap;        /* "Starting at" never wraps to 2 lines */
}
.pp-product-card.pp-product-card--grid .pp-product-card__price-value {
    font-size: 22px;            /* was 17-18px — price is the headline, deserves bigger jump */
}
.pp-product-card.pp-product-card--grid .pp-product-card__price-old {
    font-size: 14px;            /* was ~13px */
}

.pp-product-card.pp-product-card--grid .pp-product-card__review-label {
    font-size: 12px;            /* was ~10px */
    font-weight: 500;
}
.pp-product-card.pp-product-card--grid .pp-product-card__rating-stars,
.pp-product-card.pp-product-card--grid .pp-product-card__rating--lg .pp-product-card__rating-stars {
    font-size: 16px;            /* was 13px */
    letter-spacing: 0;
}
.pp-product-card.pp-product-card--grid .pp-product-card__rating-count {
    font-size: 13px;            /* was 12px */
}

/* v5.4.4: review-row uses the PDP review block — center horizontally inside the vertical card. */
.pp-product-card.pp-product-card--grid .pp-product-card__review-row {
    display: flex;
    justify-content: center;
}
.pp-product-card.pp-product-card--grid .pp-pdp-review {
    text-decoration: none;
}
.pp-product-card.pp-product-card--grid .pp-pdp-review:hover .pp-pdp-review__count {
    color: #0e6a99;
}

.pp-product-card.pp-product-card--grid .pp-product-card__cta {
    font-size: 15px;            /* was 13px */
    padding: 13px 22px;         /* was 10px 18px — gives the button more height too */
    gap: 10px;                  /* between icon and text */
}
.pp-product-card.pp-product-card--grid .pp-product-card__cta svg {
    width: 18px;                /* was 16px */
    height: 18px;
}

/* The divider has a touch more breathing room with the bigger sizes. */
.pp-product-card.pp-product-card--grid .pp-product-card__divider {
    margin: 12px 0;
}

/* Mobile: keep readable but don't overcrowd narrow cards. */
@media (max-width: 540px) {
    .pp-product-card.pp-product-card--grid .pp-product-card__title { font-size: 16px; }
    .pp-product-card.pp-product-card--grid .pp-product-card__price-value { font-size: 20px; }
    .pp-product-card.pp-product-card--grid .pp-product-card__cta { font-size: 14px; padding: 12px 18px; }
}


/* ==========================================================================
   v4 FOOTER REBUILD
   Source: DESIGN.md v4 (Footer / Dark Sections) + CLAUDE.md v9 privacy cuts.
   Migrates inline styles to CSS, adds payment-methods row, locks down
   v4 newsletter signup spec (48px height, 12px radius, joined input + red CTA).
   ========================================================================== */

/* Logo: ensure visible space between Pro and Peptide spans on dark bg.
   New v4: blue secondary stays as the brand color shift. */
.pp-footer-logo {
    font-family: 'Montserrat', 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.02em;
    color: #fafafa;
    line-height: 1;
}
.pp-footer-logo .pp-logo-pro { color: #fafafa; }
.pp-footer-logo .pp-logo-peptide { color: #1f9edb; }

/* Tagline + contact paragraphs in column 1 (replaces inline styles). */
.pp-footer-tagline {
    margin: 14px 0 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(250, 250, 250, 0.5);
}

.pp-footer-contact {
    margin-top: 20px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(250, 250, 250, 0.5);
}
.pp-footer-contact strong {
    display: inline-block;
    margin-bottom: 4px;
    color: #fafafa;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pp-footer-contact a {
    color: rgba(250, 250, 250, 0.5);
    text-decoration: none;
}
.pp-footer-contact a:hover {
    color: #1f9edb;
}

/* Newsletter signup — v4 spec: input + red CTA joined, 48px height, 12px radius. */
.pp-footer-signup {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 16px;
    max-width: 360px;
}
.pp-footer-signup input[type="email"] {
    flex: 1 1 auto;
    height: 48px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    color: #fafafa;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    min-width: 0;
}
.pp-footer-signup input[type="email"]::placeholder {
    color: rgba(250, 250, 250, 0.35);
}
.pp-footer-signup input[type="email"]:focus {
    border-color: #1f9edb;
    background: rgba(255, 255, 255, 0.10);
}
.pp-footer-signup button[type="submit"] {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 16px;
    background: #ef4444;
    border: 1px solid #ef4444;
    border-radius: 0 12px 12px 0;
    color: #fafafa;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pp-footer-signup button[type="submit"]:hover {
    background: #dc2626;
    border-color: #dc2626;
}
.pp-footer-signup button[type="submit"] svg {
    color: #fafafa;
    stroke: #fafafa;
}

.pp-footer-newsletter-msg {
    margin-top: 8px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    line-height: 1.4;
}
.pp-footer-newsletter-msg.is-success { color: #7ccf4a; }
.pp-footer-newsletter-msg.is-error   { color: #ef4444; }

/* Follow Us heading sits under the newsletter, gets some breathing room. */
.pp-footer-social-heading {
    margin-top: 24px !important;
}

.pp-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/* Payment methods row — DESIGN.md v4 spec: heading + grayscale icons, 0.6 opacity, 12px gap. */
.pp-footer-payments {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(250, 250, 250, 0.08);
}
.pp-footer-payments__label {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 10px;
    color: rgba(250, 250, 250, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.pp-footer-payments__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.pp-pay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    color: #6B7280;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.pp-pay-icon:hover { opacity: 1; }
.pp-pay-icon svg { display: block; height: auto; }

@media (min-width: 768px) {
    .pp-footer-payments { flex-direction: row; align-items: center; gap: 24px; }
}

/* Disclaimer + copyright bar — kill remaining inline styles. */
.pp-footer-disclaimer {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(250, 250, 250, 0.3);
}
.pp-footer-copyright {
    margin-top: 12px;
}


/* ==========================================================================
   v4 MY ACCOUNT V2 — Dashboard
   Source: woocommerce/myaccount/dashboard.php (this theme).
   Two-Color Heading welcome, stats strip, 3-card action grid, recent activity,
   Standing Account preview placeholder. Lives inside the existing
   .woocommerce-MyAccount-content card (which already has 16px radius + border).
   ========================================================================== */

.pp-account-v2 {
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    color: #343434;
}

.pp-account-v2__welcome .pp-h-twocolor {
    font-size: 28px;
    margin-bottom: 8px;
}
@media (max-width: 540px) {
    .pp-account-v2__welcome .pp-h-twocolor { font-size: 22px; }
}

/* Quick stats strip — 3 small stats, divider lines between, no boxes. */
.pp-account-v2__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    background: #fafafa;
}
.pp-account-v2__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
}
.pp-account-v2__stat + .pp-account-v2__stat {
    border-left: 1px solid #E5E7EB;
}
.pp-account-v2__stat-num {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #343434;
    line-height: 1.1;
}
.pp-account-v2__stat-label {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pp-account-v2__stat--coming-soon { opacity: 0.7; }
.pp-account-v2__stat-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: #F1ECFB;
    color: #5e3fb5;
    border: 1px solid rgba(155, 122, 239, 0.3);
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
@media (max-width: 760px) {
    .pp-account-v2__stats { grid-template-columns: 1fr; }
    .pp-account-v2__stat + .pp-account-v2__stat {
        border-left: 0;
        border-top: 1px solid #E5E7EB;
    }
}

/* Action card grid (3 cards desktop, 1 col mobile). */
.pp-account-v2__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.pp-account-v2__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: #FFFFFF;
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pp-account-v2__card:hover {
    box-shadow: 0 4px 12px rgba(52, 52, 52, 0.08);
    transform: translateY(-2px);
}
.pp-account-v2__card-head h3 {
    margin: 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pp-account-v2__card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-account-v2__card-meta {
    margin: 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.55;
}
.pp-account-v2__order-line {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #343434;
    flex-wrap: wrap;
}
.pp-account-v2__order-status,
.pp-account-v2__activity-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}
/* Status colors per WC default order statuses. */
.pp-status--pending,
.pp-status--on-hold {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.pp-status--processing {
    background: #E8F4FB;
    color: #0e6a99;
    border: 1px solid rgba(31, 158, 219, 0.3);
}
.pp-status--completed {
    background: #EAF7DF;
    color: #4e9c2a;
    border: 1px solid rgba(124, 207, 74, 0.3);
}
.pp-status--cancelled,
.pp-status--failed,
.pp-status--refunded {
    background: #FDE8EA;
    color: #c0384a;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.pp-account-v2__card-foot {
    margin-top: 4px;
}
.pp-account-v2__card-link {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #0e6a99;
    text-decoration: none;
    transition: color 0.2s ease;
}
.pp-account-v2__card-link:hover {
    color: #1f9edb;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pp-account-v2__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-account-v2__links li { margin: 0; }
.pp-account-v2__links a {
    display: inline-block;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #0e6a99;
    text-decoration: none;
    transition: color 0.2s ease;
}
.pp-account-v2__links a:hover {
    color: #1f9edb;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 760px) {
    .pp-account-v2__cards { grid-template-columns: 1fr; }
}

/* Recent Activity list. */
.pp-account-v2__activity-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.pp-account-v2__activity-head h3 {
    margin: 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #343434;
}
.pp-account-v2__activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    background: #FFFFFF;
    overflow: hidden;
}
.pp-account-v2__activity-row {
    margin: 0;
}
.pp-account-v2__activity-row + .pp-account-v2__activity-row {
    border-top: 1px solid #F3F4F6;
}
.pp-account-v2__activity-link {
    display: grid;
    grid-template-columns: 100px auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}
.pp-account-v2__activity-link:hover {
    background: #fafafa;
}
.pp-account-v2__activity-num {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #343434;
}
.pp-account-v2__activity-date {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #6B7280;
}
.pp-account-v2__activity-total {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #343434;
    text-align: right;
}
@media (max-width: 540px) {
    .pp-account-v2__activity-link {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }
    .pp-account-v2__activity-status,
    .pp-account-v2__activity-date {
        grid-column: 1 / -1;
    }
}

/* Standing Account preview placeholder — soft purple panel, "Coming soon" pill. */
.pp-account-v2__standing {
    background: linear-gradient(135deg, #F1ECFB 0%, #E8F4FB 100%);
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 32px;
    position: relative;
    overflow: hidden;
}
.pp-account-v2__standing-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 9999px;
    background: rgba(155, 122, 239, 0.18);
    color: #5e3fb5;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.pp-account-v2__standing .pp-h-twocolor {
    font-size: 28px;
    margin: 0 0 8px;
}
@media (max-width: 540px) {
    .pp-account-v2__standing { padding: 24px; }
    .pp-account-v2__standing .pp-h-twocolor { font-size: 22px; }
}

/* Quick links footer bar. */
.pp-account-v2__quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 13px;
    color: #6B7280;
}
.pp-account-v2__quicklinks a {
    color: #0e6a99;
    text-decoration: none;
    font-weight: 500;
}
.pp-account-v2__quicklinks a:hover {
    color: #1f9edb;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ==========================================================================
   v3 ACCOUNT — global welcome strip (renders on every /my-account/ page above the tabs)
   Source: pp-account-v3.jsx (Welcome + Trust block) + functions.php pp_account_welcome_strip().
   ========================================================================== */

.pp-account-welcome {
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pp-account-welcome__heading {
    margin: 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: #343434;
    letter-spacing: -0.01em;
}
.pp-account-welcome__heading .accent { color: #1f9edb; }
.pp-account-welcome__trust {
    margin: 0;
}
@media (max-width: 540px) {
    .pp-account-welcome__heading { font-size: 18px; }
    .pp-account-welcome__trust {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .pp-account-welcome__trust::-webkit-scrollbar { display: none; }
    .pp-account-welcome__trust .pp-trust-signal {
        flex: 0 0 auto;
        background: #fafafa;
        padding: 5px 10px;
        border-radius: 9999px;
    }
}


/* ==========================================================================
   v3 ORDERS — expandable order cards (My Account → Order History)
   Source: pp-account-v3.jsx OrdersTab + woocommerce/myaccount/orders.php override.
   ========================================================================== */

.pp-orderlist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pp-orderlist__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}
.pp-orderlist__count {
    font-size: 13px;
    color: #6B7280;
    font-weight: 500;
}
.pp-orderlist__hint {
    font-size: 11px;
    color: #9CA3AF;
}

.pp-order-card {
    background: #FFFFFF;
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(52, 52, 52, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pp-order-card[open] {
    border: 0.5px solid #1f9edb;
    box-shadow: 0 0 0 3px rgba(31, 158, 219, 0.1);
}
.pp-order-card__summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}
.pp-order-card__summary::-webkit-details-marker { display: none; }
.pp-order-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}
.pp-order-card__id {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #343434;
}
.pp-order-card__status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
}
.pp-order-card__status.pp-status--pending,
.pp-order-card__status.pp-status--on-hold {
    background: #FEF3C7;
    color: #92400E;
}
.pp-order-card__status.pp-status--processing {
    background: #E8F4FB;
    color: #0e6a99;
}
.pp-order-card__status.pp-status--completed {
    background: #EAF7DF;
    color: #4e9c2a;
}
.pp-order-card__status.pp-status--cancelled,
.pp-order-card__status.pp-status--failed,
.pp-order-card__status.pp-status--refunded {
    background: #FDE8EA;
    color: #c0384a;
}
.pp-order-card__date {
    font-size: 11px;
    color: #9CA3AF;
}
.pp-order-card__tail {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.pp-order-card__total {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #343434;
}
.pp-order-card__chev {
    color: #9CA3AF;
    display: flex;
    transition: transform 0.2s ease;
}
.pp-order-card[open] .pp-order-card__chev { transform: rotate(180deg); }

.pp-order-card__body {
    border-top: 1px solid #F3F4F6;
    padding: 20px 24px;
}
.pp-order-card__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.pp-order-card__item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fafafa;
    border-radius: 12px;
    padding: 12px 14px;
}
.pp-order-card__item-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 0.5px solid #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
}
.pp-order-card__item-info {
    flex: 1;
    min-width: 0;
}
.pp-order-card__item-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pp-order-card__item-name {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #343434;
}
.pp-order-card__item-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 9999px;
    background: #E8F4FB;
    color: #0e6a99;
    border: 1px solid #1f9edb;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.pp-order-card__item-cat {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid #1f9edb;
    color: #0e6a99;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
/* Category-specific colors for the line-item badge. */
.pp-order-card__item-cat.pp-cat--healing-recovery     { border-color: #7ccf4a; color: #4e9c2a; }
.pp-order-card__item-cat.pp-cat--brain-mood          { border-color: #1f9edb; color: #0e6a99; }
.pp-order-card__item-cat.pp-cat--weight-metabolism    { border-color: #f97316; color: #c2410c; }
.pp-order-card__item-cat.pp-cat--performance-growth   { border-color: #ef4444; color: #c0384a; }
.pp-order-card__item-cat.pp-cat--skin-longevity      { border-color: #9b7aef; color: #5e3fb5; }

.pp-order-card__item-meta {
    margin-top: 3px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 11px;
    color: #9CA3AF;
}

.pp-order-card__panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.pp-order-card__panel {
    background: #fafafa;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}
.pp-order-card__panel-label {
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.pp-order-card__panel-row {
    font-size: 12px;
    color: #343434;
    font-weight: 500;
    margin-top: 2px;
}
.pp-order-card__panel-row--mono {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 11px;
    color: #6B7280;
    font-weight: 400;
}
.pp-order-card__panel-eta {
    font-size: 11px;
    color: #0e6a99;
    font-weight: 500;
    margin-top: 4px;
}
.pp-order-card__panel-status {
    font-size: 11px;
    color: #4e9c2a;
    font-weight: 500;
    margin-top: 4px;
}
.pp-order-card__panel-status--unpaid { color: #c0384a; }

.pp-order-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pp-order-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 12px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pp-order-card__btn--primary {
    background: #ef4444;
    color: #fafafa;
    border: 0;
}
.pp-order-card__btn--primary:hover {
    background: #dc2626;
    color: #fafafa;
}
.pp-order-card__btn--outline {
    background: transparent;
    color: #343434;
    border: 1.5px solid #E5E7EB;
}
.pp-order-card__btn--outline:hover {
    border-color: #D1D5DB;
    background: #fafafa;
    color: #343434;
}

@media (max-width: 540px) {
    .pp-order-card__summary { padding: 14px 16px; gap: 8px; }
    .pp-order-card__head { gap: 8px; }
    .pp-order-card__body { padding: 16px; }
    .pp-order-card__panels { grid-template-columns: 1fr; }
}

/* Empty state for Order History tab when user has no orders. */
.pp-account-v3-empty {
    text-align: center;
    padding: 64px 32px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}
.pp-account-v3-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #E8F4FB;
    color: #1f9edb;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-account-v3-empty__title {
    font-weight: 600;
    font-size: 14px;
    color: #343434;
    margin: 0 0 6px;
}
.pp-account-v3-empty__sub {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.6;
    max-width: 360px;
    margin: 0 auto 20px;
}
.pp-account-v3-empty__cta {
    display: inline-block;
    color: #0e6a99;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.pp-account-v3-empty__cta:hover {
    color: #1f9edb;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ==========================================================================
   v3 USER INFORMATION — sectioned card layout
   Source: pp-account-v3.jsx UserInfoTab + form-edit-account.php override.
   Personal + Password share one form (WC's save_account_details handler).
   Shipping + Billing summaries link out to /my-account/edit-address/.
   ========================================================================== */

.pp-userinfo {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pp-userinfo__card {
    background: #FFFFFF;
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(52, 52, 52, 0.06);
}
.pp-userinfo__card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.pp-userinfo__card-head .pp-h-twocolor {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
}

/* Edit link in card header (used on address cards). */
.pp-userinfo__edit-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: transparent;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.pp-userinfo__edit-link:hover {
    border-color: #1f9edb;
    color: #0e6a99;
}

/* Address summary block. */
.pp-userinfo__address {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fafafa;
    border-radius: 12px;
    padding: 16px 18px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}
.pp-userinfo__address--same {
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
}
.pp-userinfo__address-icon {
    flex: 0 0 auto;
    color: #1f9edb;
    margin-top: 2px;
    display: flex;
}
.pp-userinfo__address-icon--check { margin-top: 0; }
.pp-userinfo__address-text { flex: 1; min-width: 0; }
.pp-userinfo__address-name {
    font-weight: 600;
    font-size: 14px;
    color: #343434;
    margin-bottom: 3px;
}
.pp-userinfo__address-lines {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.6;
}
.pp-userinfo__address-meta {
    font-size: 13px;
    color: #6B7280;
}
.pp-userinfo__badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 9999px;
    background: #E8F4FB;
    color: #0e6a99;
    border: 1px solid rgba(31, 158, 219, 0.3);
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pp-userinfo__empty {
    margin: 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 13px;
    color: #9CA3AF;
}

/* Password fieldset — visual separation from personal info above. */
.pp-userinfo__password-fieldset {
    border: 0;
    border-top: 1px solid #E5E7EB;
    padding: 24px 0 0;
    margin: 24px 0 0;
}
.pp-userinfo__password-fieldset legend {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #343434;
    margin: 0 0 4px;
    padding: 0;
}
.pp-userinfo__password-fieldset legend.pp-h-twocolor { font-size: 18px; }
.pp-userinfo__password-hint {
    margin: 0 0 16px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    color: #9CA3AF;
    line-height: 1.5;
}

/* Save Changes button row. */
.pp-userinfo__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #F3F4F6;
}
.pp-userinfo__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    border-radius: 12px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    transition: background-color 0.2s ease;
}
.pp-userinfo__btn--primary {
    background: #ef4444;
    color: #fafafa;
}
.pp-userinfo__btn--primary:hover {
    background: #dc2626;
    color: #fafafa;
}

/* Low-emphasis Logout link at bottom of User Information page. */
.pp-userinfo__logout {
    margin-top: 8px;
    text-align: right;
}
.pp-userinfo__logout a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9CA3AF;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 4px;
    transition: color 0.2s ease;
}
.pp-userinfo__logout a:hover { color: #c0384a; }


/* ==========================================================================
   v5 WISHLIST HEART, BADGE, TOAST, PROFILE ICON
   Source: PP-WISHLIST-AND-ACCOUNT-SPEC.md (Part 1)
   Hooks into the YITH WC Wishlist plugin AJAX layer; UI is theme-controlled.
   ========================================================================== */

/* ── Heart button (used on cards + PDP) ── */
.pp-wishlist-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, background 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}
.pp-wishlist-btn:focus-visible {
    outline: 2px solid #1f9edb;
    outline-offset: 3px;
}
.pp-wishlist-btn svg {
    transition: fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease;
}
.pp-wishlist-btn--default svg {
    fill: none;
    stroke: #6B7280;
    stroke-width: 1.8;
}
.pp-wishlist-btn--active {
    background: rgba(239, 68, 68, 0.08);
}
.pp-wishlist-btn--active svg {
    fill: #ef4444;
    stroke: #ef4444;
    stroke-width: 1.8;
    filter: drop-shadow(0 1px 3px rgba(239, 68, 68, 0.3));
}
.pp-wishlist-btn--loading {
    opacity: 0.6;
    cursor: wait;
}

/* Position on horizontal list / vertical card image area. */
.pp-product-card__image {
    position: relative;
}
.pp-product-card__image .pp-wishlist-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
}

/* PDP wishlist heart — positioned top-left of the product gallery */
.ppx-gallery {
    position: relative;
}
.ppx-gallery > .pp-wishlist-btn {
    position: absolute;
    top: 22px;
    left: 14px;
    z-index: 10;
    width: 48px;
    height: 48px;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.ppx-gallery > .pp-wishlist-btn svg {
    width: 28px !important;
    height: 28px !important;
}
/* PDP "Use Peptide Planner" pill — top-right of gallery image,
   transparent, no chip bg, larger label, tucked tighter to the corner. */
.ppx-gallery > .pp-product-card__planner-pill {
    position: absolute !important;
    top: 22px;
    right: 14px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    color: #1F9EDB;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 999px;
    transition: color .15s ease;
}
.ppx-gallery > .pp-product-card__planner-pill:hover {
    color: #1577AD;
}
.pp-buybox__compound-row .pp-buybox__title-block {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
}

/* Touch target minimum: 44x44 with invisible padding. */
.pp-wishlist-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    min-width: 44px;
    min-height: 44px;
}

/* Scale bounce + particle burst animations. */
@keyframes pp-heart-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.25); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.pp-wishlist-btn--animating {
    animation: pp-heart-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pp-heart-burst {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
.pp-heart-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #ef4444;
    pointer-events: none;
    animation: pp-heart-burst 0.6s ease-out forwards;
}



/* ── Profile icon + wishlist badge (site header) ── */
.pp-profile-icon {
    position: relative;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 0 0 36px;
    margin: 0 6px;
    color: #0e6a99;
    -webkit-tap-highlight-color: transparent;
}
.pp-profile-icon__circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #E8F4FB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0e6a99;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    transition: background-color 0.2s ease;
}
.pp-profile-icon:hover .pp-profile-icon__circle {
    background: #D5EBF6;
}
.pp-profile-icon:focus-visible {
    outline: 2px solid #1f9edb;
    outline-offset: 2px;
    border-radius: 50%;
}
.pp-profile-icon__circle svg {
    color: #0e6a99;
    stroke: #0e6a99;
    fill: none;
    width: 16px;
    height: 16px;
}

/* Badge sits on the profile circle. */
.pp-wishlist-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: #ef4444;
    color: #fafafa;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 9px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    box-sizing: content-box;
    pointer-events: none;
}
.pp-wishlist-badge[hidden],
.pp-wishlist-badge--empty {
    display: none !important;
}

@keyframes pp-badge-pop {
    0%   { transform: scale(0.5); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.pp-wishlist-badge--updating {
    animation: pp-badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Toast notification ── */
.pp-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    z-index: 9999;
    background: #343434;
    color: #fafafa;
    border-radius: 12px;
    padding: 10px 20px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: calc(100% - 32px);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.pp-toast svg {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}
.pp-toast--add svg {
    fill: #ef4444;
    stroke: #ef4444;
}
.pp-toast--remove svg {
    fill: none;
    stroke: rgba(250, 250, 250, 0.6);
    stroke-width: 1.8;
}

@media (max-width: 540px) {
    .pp-toast { bottom: 90px; font-size: 12px; padding: 9px 16px; }
}

/* Reduced motion: kill all heart animations. */
@media (prefers-reduced-motion: reduce) {
    .pp-wishlist-btn,
    .pp-wishlist-btn svg { transition: none !important; }
    .pp-wishlist-btn--animating { animation: none !important; }
    .pp-heart-particle { animation: none !important; display: none !important; }
    .pp-wishlist-badge--updating { animation: none !important; }
    .pp-toast {
        transition: opacity 0.15s ease;
        transform: translateX(-50%) translateY(0);
    }
}


/* ==========================================================================
   v5 WISHLIST TAB — inline grid in /my-account/pp-wishlist/
   Source: PP-WISHLIST-AND-ACCOUNT-SPEC.md §2.4
   ========================================================================== */

.pp-wishlist-tab {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}
.pp-wishlist-tab__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pp-wishlist-tab__count {
    font-size: 13px;
    color: #6B7280;
    font-weight: 500;
}
.pp-wishlist-tab__oos-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    background: #FEEAD8;
    color: #c2410c;
    border: 1px solid rgba(249, 115, 22, 0.3);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pp-wishlist-tab__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 760px) {
    .pp-wishlist-tab__grid { grid-template-columns: 1fr; }
}

.pp-wishlist-card {
    position: relative;
    background: #FFFFFF;
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(52, 52, 52, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pp-wishlist-card:hover {
    box-shadow: 0 4px 12px rgba(52, 52, 52, 0.08);
    transform: translateY(-2px);
}
.pp-wishlist-card--oos {
    opacity: 0.6;
}
.pp-wishlist-card--removing {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

.pp-wishlist-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.pp-wishlist-card__cat {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #1f9edb;
    color: #0e6a99;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pp-wishlist-card__cat.pp-cat--healing-recovery     { border-color: #7ccf4a; color: #4e9c2a; }
.pp-wishlist-card__cat.pp-cat--brain-mood          { border-color: #1f9edb; color: #0e6a99; }
.pp-wishlist-card__cat.pp-cat--weight-metabolism    { border-color: #f97316; color: #c2410c; }
.pp-wishlist-card__cat.pp-cat--performance-growth   { border-color: #ef4444; color: #c0384a; }
.pp-wishlist-card__cat.pp-cat--skin-longevity      { border-color: #9b7aef; color: #5e3fb5; }
.pp-wishlist-card__remove {
    background: none;
    border: 0;
    cursor: pointer;
    color: #9CA3AF;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.pp-wishlist-card__remove:hover {
    color: #ef4444;
    background: #FDE8EA;
}
.pp-wishlist-card__remove:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

.pp-wishlist-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    background: transparent;
    text-decoration: none;
    color: #9CA3AF;
}
.pp-wishlist-card__image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
@media (max-width: 540px) {
    .pp-wishlist-card__image { height: 180px; }
}

.pp-wishlist-card__title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pp-wishlist-card__name {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #343434;
    text-decoration: none;
    line-height: 1.3;
}
.pp-wishlist-card__name:hover { color: #1f9edb; }
.pp-wishlist-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 9999px;
    background: #E8F4FB;
    color: #0e6a99;
    border: 1px solid #1f9edb;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.pp-wishlist-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: -4px;
}
.pp-wishlist-card__rating-count {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 10px;
    color: #9CA3AF;
}

.pp-wishlist-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}
.pp-wishlist-card__price {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #343434;
    line-height: 1;
}
.pp-wishlist-card__price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.pp-wishlist-card__price del { color: #9CA3AF; font-size: 12px; margin-right: 4px; }
.pp-wishlist-card__price ins { text-decoration: none; }

.pp-wishlist-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #ef4444;
    color: #fafafa;
    border: 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}
.pp-wishlist-card__cta:hover { background: #dc2626; color: #fafafa; }

.pp-wishlist-card__notify {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    background: #F3F4F6;
    color: #6B7280;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.pp-wishlist-card__notify:hover { background: #E5E7EB; color: #343434; }


/* ==========================================================================
   v3 CHECKOUT — Canadian-only banner, RUO checkbox, Place Order disabled state
   Source: PP-MASTER-SPEC.md §3.2-§3.3
   ========================================================================== */

/* Canadian-only notice above the checkout form. */
.pp-checkout-canada-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #E8F4FB;
    color: #0e6a99;
    border: 1px solid rgba(31, 158, 219, 0.25);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 0 20px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
}
.pp-checkout-canada-banner__icon {
    display: inline-flex;
    align-items: center;
    color: #1f9edb;
    flex: 0 0 14px;
}

/* RUO + 21+ confirmation checkbox. Custom-styled with hidden native input. */
.pp-ruo-confirm {
    margin: 16px 0;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}
.pp-ruo-confirm--checked {
    background: #DCFCE7;
    border-color: #22c55e;
}
.pp-ruo-confirm__label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin: 0;
    user-select: none;
}
.pp-ruo-confirm__label input[type="checkbox"] {
    /* Visually hidden but tab-focusable. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.pp-ruo-confirm__box {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #D1D5DB;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pp-ruo-confirm--checked .pp-ruo-confirm__box {
    background: #22c55e;
    border-color: #22c55e;
    color: #fafafa;
}
.pp-ruo-confirm__label input[type="checkbox"]:focus-visible + .pp-ruo-confirm__box {
    outline: 2px solid #1f9edb;
    outline-offset: 2px;
}
.pp-ruo-confirm__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #343434;
    line-height: 1.45;
}
.pp-ruo-confirm__text strong {
    font-weight: 600;
}
.pp-ruo-confirm__text em {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #6B7280;
}

/* Place Order disabled state — gates on the RUO checkbox. */
.woocommerce-checkout #place_order.pp-place-order--disabled,
form.checkout button#place_order.pp-place-order--disabled {
    background: #F3F4F6 !important;
    color: #9CA3AF !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* Helper text below Place Order, set via PHP if desired in template. */
.pp-place-order-hint {
    margin: 8px auto 0;
    max-width: 480px;
    text-align: center;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 10px;
    color: #9CA3AF;
}

/* Field microcopy (description) below email + phone. */
.woocommerce form .form-row .description,
.woocommerce-checkout .form-row .description {
    display: block;
    margin-top: 6px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    color: #6B7280;
    line-height: 1.5;
    font-style: normal;
}


/* ==========================================================================
   v3 THANK YOU PAGE — Copy buttons, "What happens next", account card, support
   Source: PP-MASTER-SPEC.md §3.6
   Builds on the existing .pp-etransfer block in functions.php.
   ========================================================================== */

/* Copy button on each Interac instruction row. */
.pp-etransfer__row {
    align-items: center;
}
.pp-etransfer__value {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pp-etransfer__value-text { flex: 1 1 auto; min-width: 0; }

.pp-copy-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    color: #6B7280;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}
.pp-copy-btn:hover {
    border-color: #1f9edb;
    color: #0e6a99;
}
.pp-copy-btn:focus-visible {
    outline: 2px solid #1f9edb;
    outline-offset: 2px;
}
.pp-copy-btn__icon-success,
.pp-copy-btn__label-success { display: none; }
.pp-copy-btn--copied {
    background: #EAF7DF;
    border-color: #7ccf4a;
    color: #4e9c2a;
}
.pp-copy-btn--copied .pp-copy-btn__icon-default,
.pp-copy-btn--copied .pp-copy-btn__label-default { display: none; }
.pp-copy-btn--copied .pp-copy-btn__icon-success,
.pp-copy-btn--copied .pp-copy-btn__label-success {
    display: inline-flex;
    align-items: center;
}

/* "What happens next" — numbered steps with vertical connector. */
.pp-thankyou-steps {
    margin: 32px 0 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}
.pp-thankyou-steps__title {
    font-size: 18px;
    font-weight: 600;
    color: #343434;
    margin: 0 0 16px;
}
.pp-thankyou-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.pp-thankyou-steps__list::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: #F3F4F6;
}
.pp-thankyou-steps__item {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 8px 0 16px;
}
.pp-thankyou-steps__item:last-child { padding-bottom: 0; }
.pp-thankyou-steps__dot {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #F3F4F6;
    color: #9CA3AF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.pp-thankyou-steps__item--active .pp-thankyou-steps__dot {
    background: #1f9edb;
    color: #fafafa;
    box-shadow: 0 0 0 4px rgba(31, 158, 219, 0.18);
}
.pp-thankyou-steps__body { padding-top: 4px; }
.pp-thankyou-steps__heading {
    margin: 0 0 2px;
    font-weight: 600;
    font-size: 14px;
    color: #343434;
    line-height: 1.3;
}
.pp-thankyou-steps__sub {
    margin: 0;
    font-size: 12px;
    color: #6B7280;
    line-height: 1.5;
}

/* Delayed account creation card (guests only). */
.pp-thankyou-account {
    margin: 32px 0 0;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, #E8F4FB 0%, #FFFFFF 50%);
    border: 0.5px solid #E5E7EB;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}
.pp-thankyou-account__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(31, 158, 219, 0.18);
    color: #0e6a99;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pp-thankyou-account__body { flex: 1 1 auto; min-width: 0; }
.pp-thankyou-account__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #343434;
}
.pp-thankyou-account__sub {
    margin: 0 0 16px;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
}
.pp-thankyou-account__form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: end;
}
.pp-thankyou-account__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pp-thankyou-account__field span {
    font-size: 11px;
    font-weight: 500;
    color: #6B7280;
}
.pp-thankyou-account__field input {
    height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1.5px solid #E5E7EB;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 13px;
    color: #343434;
}
.pp-thankyou-account__field input:disabled {
    background: #fafafa;
    color: #6B7280;
}
.pp-thankyou-account__field input:focus {
    outline: none;
    border-color: #1f9edb;
}
/* Per spec: the create-account button is BLUE, not red. Red is reserved for buy actions. */
.pp-thankyou-account__submit {
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #1f9edb;
    color: #fafafa;
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
.pp-thankyou-account__submit:hover { background: #1683b8; }

@media (max-width: 640px) {
    .pp-thankyou-account { flex-direction: column; }
    .pp-thankyou-account__form { grid-template-columns: 1fr; }
}

/* Support bar — dark card at the bottom of the Thank You page. */
.pp-thankyou-support {
    margin: 32px 0 0;
    padding: 20px 24px;
    border-radius: 16px;
    background: #343434;
    color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    flex-wrap: wrap;
}
.pp-thankyou-support__text { flex: 1 1 auto; min-width: 0; }
.pp-thankyou-support__line {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 14px;
    color: #fafafa;
    line-height: 1.4;
}
.pp-thankyou-support__sub {
    margin: 0;
    font-size: 12px;
    color: rgba(250, 250, 250, 0.6);
    line-height: 1.4;
}
.pp-thankyou-support__btn {
    flex: 0 0 auto;
    padding: 10px 20px;
    border-radius: 12px;
    border: 1.5px solid rgba(250, 250, 250, 0.35);
    background: transparent;
    color: #fafafa;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pp-thankyou-support__btn:hover {
    border-color: rgba(250, 250, 250, 0.6);
    background: rgba(250, 250, 250, 0.04);
    color: #fafafa;
}


/* ==========================================================================
   v4 LOGIN / REGISTER — email-first form (3 states) + benefits panel
   Source: PP-MASTER-SPEC.md §4
   Renders at /my-account/ when logged out via form-login.php override.
   ========================================================================== */

.pp-login-page {
    display: grid;
    grid-template-columns: 1fr 1fr;       /* equal columns */
    gap: 40px;                            /* v5.4.7: wider gutter between the two boxes */
    align-items: stretch;                 /* both columns share the same height */
    /* v5.4.7: cap to 800px so each column lands at ~360px (~25% of a 1440px
       viewport) WITH the wider 40px gutter. No page canvas — the cards stand
       on their own border outline (the v5.4.6 grey tint is reverted here). */
    width: 100%;
    max-width: 800px;
    margin: 32px auto;
    padding: 0 16px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    color: #343434;
}
@media (max-width: 760px) {
    .pp-login-page { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}

/* ── Form card (left column) ── */
.pp-login-page__form-card {
    background: #FFFFFF;
    border: 0;                            /* v5.4.8: outline removed — shadow carries the card */
    border-radius: 16px;
    padding: 24px;                         /* v5.4.5: trimmed from 32 — column is narrower now */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    height: 100%;                          /* fill the grid cell so columns are equal height */
    display: flex;
    flex-direction: column;
}
@media (max-width: 540px) {
    .pp-login-page__form-card { padding: 24px; }
}

.pp-login-state[hidden] { display: none !important; }
.pp-login-state {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pp-login-back {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 4px 0;
    color: #0e6a99;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-bottom: 4px;
}
.pp-login-back:hover { color: #1f9edb; text-decoration: underline; text-underline-offset: 3px; }
.pp-login-back:focus-visible { outline: 2px solid #1f9edb; outline-offset: 2px; }

.pp-login-heading {
    margin: 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #343434;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.pp-login-heading .accent { color: #1f9edb; }
@media (max-width: 540px) {
    .pp-login-heading { font-size: 20px; }
}
.pp-login-sub {
    margin: 0 0 8px;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
}

/* Field block — applies to email + password inputs. */
.pp-login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.pp-login-field__label {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #343434;
}
.pp-login-field__req { color: #ef4444; margin-left: 2px; }
.pp-login-field__wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pp-login-field__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    pointer-events: none;
    display: inline-flex;
}
.pp-login-input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 44px;
    border-radius: 12px;
    border: 1.5px solid #E5E7EB;
    background: #FFFFFF;
    color: #343434;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pp-login-input::placeholder { color: #9CA3AF; }
.pp-login-input:focus {
    outline: none;
    border-color: #1f9edb;
    box-shadow: 0 0 0 3px rgba(31, 158, 219, 0.1);
}
.pp-login-field--locked .pp-login-input {
    background: #fafafa;
    color: #6B7280;
    cursor: default;
}
.pp-login-field--locked .pp-login-input:focus {
    box-shadow: none;
    border-color: #E5E7EB;
}

/* Locked email badges (right edge of the locked input). */
.pp-login-badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
}
.pp-login-badge--found { background: #DCFCE7; color: #15803d; }
.pp-login-badge--new   { background: #E8F4FB; color: #0e6a99; }

/* Password show/hide toggle. */
.pp-login-input--password { padding-right: 44px; }

/* v5.4.6 — icon-clearance fix. The v6 generic input baseline (style.css ~10341)
   and the my-account form rule (~9704) both out-specify .pp-login-input via
   input[type="email"] and flatten its padding to ~14px, so placeholder/value
   text lands on top of the left icon (and the right eye / badge). Re-assert the
   clearance with a selector that beats both, scoped to login inputs only. */
.woocommerce-account .pp-login-field__wrap input.pp-login-input {
    padding: 0 14px 0 44px !important;          /* clear the left icon */
}
.woocommerce-account .pp-login-field__wrap input.pp-login-input--password {
    padding-right: 44px !important;             /* clear the show/hide eye */
}
.woocommerce-account .pp-login-field--locked input.pp-login-input {
    padding-right: 120px !important;            /* clear the Account found / New account badge */
}

.pp-login-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    color: #6B7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.pp-login-eye:hover { color: #343434; background: #fafafa; }
.pp-login-eye:focus-visible { outline: 2px solid #1f9edb; outline-offset: 2px; }
.pp-login-eye__hide { display: none; }
.pp-login-eye.is-revealed .pp-login-eye__show { display: none; }
.pp-login-eye.is-revealed .pp-login-eye__hide { display: inline-flex; }

/* Error message. */
.pp-login-error {
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #FDE8EA;
    color: #c0384a;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

/* Remember-me + forgot-password row in login state. */
.pp-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 0;
}
.pp-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    color: #6B7280;
    cursor: pointer;
}
.pp-login-remember input[type="checkbox"] {
    accent-color: #1f9edb;
    width: 16px;
    height: 16px;
}
.pp-login-forgot {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #0e6a99;
    text-decoration: none;
}
.pp-login-forgot:hover { color: #1f9edb; text-decoration: underline; text-underline-offset: 3px; }

/* Primary CTA button (Continue / Log in / Create my account). */
.pp-login-cta {
    width: 100%;
    height: 52px;
    border-radius: 12px;
    border: 0;
    background: #ef4444;
    color: #fafafa;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
    margin-top: 4px;
}
.pp-login-cta:hover { background: #dc2626; }
.pp-login-cta:focus-visible { outline: 2px solid #1f9edb; outline-offset: 3px; }
.pp-login-cta.is-disabled,
.pp-login-cta:disabled {
    background: #ccc;
    color: #fafafa;
    cursor: not-allowed;
    box-shadow: none;
}
.pp-login-cta.is-busy { opacity: 0.85; }
.pp-login-cta__arrow { display: inline-block; transition: transform 0.2s ease; }
.pp-login-cta:hover .pp-login-cta__arrow { transform: translateX(2px); }

/* Microcopy below CTAs. */
.pp-login-microcopy {
    margin: 0;
    text-align: center;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 11px;
    color: #9CA3AF;
    line-height: 1.5;
}
.pp-login-microcopy a {
    color: #0e6a99;
    text-decoration: none;
    font-weight: 600;
}
.pp-login-microcopy a:hover { color: #1f9edb; text-decoration: underline; text-underline-offset: 3px; }

/* OR divider + guest checkout link (always visible below the active state). */
.pp-login-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
}
.pp-login-or__line {
    flex: 1 1 auto;
    height: 1px;
    background: #E5E7EB;
}
.pp-login-or__text {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 11px;
    color: #9CA3AF;
    font-weight: 500;
    letter-spacing: 0.05em;
}
.pp-login-guest {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1.5px solid #E5E7EB;
    background: transparent;
    color: #343434;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    margin-bottom: 8px;
}
.pp-login-guest:hover { border-color: #D1D5DB; background: #fafafa; color: #343434; }

/* ── Benefits panel (right column) ── */
.pp-login-benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;                         /* match the left column's grid cell height */
}
.pp-login-benefits__card {
    background: #FFFFFF;
    border: 0;                            /* v5.4.8: outline removed — shadow carries the card */
    border-radius: 16px;
    padding: 22px;                         /* v5.4.5: trimmed from 28 — column is narrower now */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    flex: 1;                              /* card grows to fill, trust strip stays bottom */
    display: flex;
    flex-direction: column;
}
.pp-login-benefits__list {
    /* List grows inside the card so the icons distribute evenly when the card
       is taller than the natural content. */
    flex: 1;
    justify-content: space-between;
}
@media (max-width: 540px) {
    .pp-login-benefits__card { padding: 24px; }
}
.pp-login-benefits__heading {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 15px;
    color: #343434;
    line-height: 1.3;
}
.pp-login-benefits__heading .accent { color: #1f9edb; }
.pp-login-benefits__sub {
    margin: 0 0 18px;
    font-size: 12px;
    color: #6B7280;
    line-height: 1.5;
}
.pp-login-benefits__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pp-login-benefit {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.pp-login-benefit__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #E8F4FB;
    color: #1f9edb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pp-login-benefit__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pp-login-benefit__body strong {
    font-weight: 600;
    font-size: 13px;
    color: #343434;
    line-height: 1.3;
}
.pp-login-benefit__body em {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    color: #6B7280;
    line-height: 1.5;
}

/* Trust strip below the benefits card. */
.pp-login-trust {
    background: #343434;
    color: #fafafa;
    border-radius: 12px;
    padding: 14px 18px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}
.pp-login-trust__label {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(250, 250, 250, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.pp-login-trust__stars {
    margin: 0 0 4px;
    font-size: 11px;
    color: rgba(250, 250, 250, 0.6);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pp-login-trust__stars span {
    color: #1f9edb;
    letter-spacing: 1px;
}
.pp-login-trust__sub {
    margin: 0;
    font-size: 11px;
    color: rgba(250, 250, 250, 0.5);
    line-height: 1.5;
}

/* Hide WC's own login wrapper that the parent theme might inject. */
.woocommerce-account #customer_login,
.woocommerce-account #customer_login.u-columns,
.woocommerce-account .u-columns.col2-set#customer_login { display: none !important; }


/* ==========================================================================
   v3 CHECKOUT — Mobile sticky bottom CTA bar
   Source: PP-MASTER-SPEC.md §3.5
   ========================================================================== */

@media (max-width: 768px) {
    /* Push body content up so the sticky bar doesn't overlap the form. */
    body.woocommerce-checkout {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    /* The bar is a clone-target — JS mirrors the Place Order button here. */
    .pp-mobile-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        background: #FFFFFF;
        border-top: 1px solid #E5E7EB;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
        z-index: 100;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .pp-mobile-cta__total {
        flex: 0 0 auto;
        font-family: 'Montserrat', 'DM Sans', sans-serif;
        font-weight: 600;
        font-size: 14px;
        color: #343434;
    }
    .pp-mobile-cta__btn {
        flex: 1 1 auto;
        height: 48px;
        border-radius: 12px;
        border: 0;
        background: #ef4444;
        color: #fafafa;
        font-family: 'Montserrat', 'DM Sans', sans-serif;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
    }
    .pp-mobile-cta__btn:disabled,
    .pp-mobile-cta__btn.pp-place-order--disabled {
        background: #F3F4F6;
        color: #9CA3AF;
        cursor: not-allowed;
    }
}



/* =========================================================================
   v7 PDP REDESIGN — single-source for buybox + gallery + tabs (May 2026)
   This block overrides earlier iterations. Read top-to-bottom.
   ========================================================================= */

/* --- Title block (full-width, centered, no flanked lines) --- */
.pp-pdp-titleblock { width: 100%; margin: 24px 0 48px; text-align: center; }
.pp-pdp-title,
.pp-pdp-title.pp-compound-name,
.pp-pdp-title.product_title {
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #343434;
    text-align: center;
}
.pp-pdp-title__main { color: #343434; }
.pp-pdp-title__accent { color: #1f9edb; font-weight: 700; }
.pp-buybox h1.product_title .pp-pdp-title__accent,
h1.pp-pdp-title .pp-pdp-title__accent { color: #1f9edb; }
.pp-pdp-title::before,
.pp-pdp-title::after { content: none !important; display: none !important; }
.pp-pdp-subtitle { display: none; }
@media (max-width: 768px) {
    .pp-pdp-title,
    .pp-pdp-title.pp-compound-name,
    .pp-pdp-title.product_title { font-size: 28px; }
    .pp-pdp-titleblock { margin: 16px 0 32px; }
}

/* --- Buybox base --- */
.pp-buybox {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    color: #343434;
}

/* Null obsolete buybox rules from earlier iterations */
.pp-buybox__title-row { display: contents; }
.pp-buybox__compound-row,
.pp-buybox__title-block { display: contents; }
.pp-buybox__price-row,
.pp-buybox__price { display: none !important; }
.pp-buybox__category-link { display: none !important; }
.pp-buybox__tagline { display: none !important; }

/* --- Zone 1: Category pill (rating relocated below highlights) --- */
.pp-buybox__cat-rating-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 24px;
}
.pp-buybox__category-pill {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 9999px;
    border: 1.5px solid #1f9edb;
    background: #E8F4FB;
    color: #0e6a99;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    line-height: 1.2;
}
.pp-buybox__category-pill:hover { text-decoration: none; opacity: 0.9; }

.pp-page--cat-healing .pp-buybox__category-pill     { background: #F0FDF4; border-color: #22c55e; color: #15803d; }
.pp-page--cat-brain .pp-buybox__category-pill       { background: #E8F4FB; border-color: #1f9edb; color: #0e6a99; }
.pp-page--cat-weight .pp-buybox__category-pill      { background: #FFF7ED; border-color: #ea580c; color: #c2410c; }
.pp-page--cat-performance .pp-buybox__category-pill { background: #FEF2F2; border-color: #ef4444; color: #c0384a; }
.pp-page--cat-skin .pp-buybox__category-pill        { background: #FAF5FF; border-color: #9333ea; color: #7e22ce; }
.pp-page--cat-immune .pp-buybox__category-pill      { background: #FFFBEB; border-color: #f59e0b; color: #b45309; }

/* --- Rating: un-hide stars, restyle for inline display --- */
.pp-buybox__cat-rating-row .pp-pdp-review {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    text-decoration: none;
    color: inherit;
}
.pp-buybox__cat-rating-row .pp-pdp-review__stars {
    display: inline-block !important;
    position: relative;
    line-height: 1;
    font-size: 20px;
    letter-spacing: 2px;
    color: #E5E7EB;
}
.pp-buybox__cat-rating-row .pp-pdp-review__stars-empty { color: #E5E7EB; }
.pp-buybox__cat-rating-row .pp-pdp-review__stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    color: #1f9edb;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}
.pp-buybox__cat-rating-row .pp-pdp-review__num {
    background: none;
    color: #343434;
    padding: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    min-width: auto;
}
.pp-buybox__cat-rating-row .pp-pdp-review__count {
    font-size: 12px;
    color: #9CA3AF;
    font-weight: 400;
}

/* --- Zone 2.5: Rating block (relocated below highlights) --- */
.pp-buybox__rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    text-decoration: none;
    color: inherit;
}
.pp-buybox__rating:hover { text-decoration: none; color: inherit; }
.pp-buybox__rating-stars {
    display: inline-block;
    position: relative;
    line-height: 1;
    font-size: 20px;
    letter-spacing: 2px;
    color: #E5E7EB;
}
.pp-buybox__rating-stars-empty { color: #E5E7EB; }
.pp-buybox__rating-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    color: #1f9edb;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}
.pp-buybox__rating-num { color: #343434; font-size: 14px; font-weight: 600; line-height: 1; }
.pp-buybox__rating-count { font-size: 12px; color: #9CA3AF; font-weight: 400; }

/* --- Zone 2: Highlights --- */
.pp-buybox__highlights {
    list-style: none;
    margin: 0 0 32px;
    padding: 0 0 32px;
    border: none;
    border-bottom: 1px solid #F3F4F6;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pp-buybox__highlights li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px;
    color: #343434;
    line-height: 1.5;
}
.pp-buybox__highlights svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #22c55e;
    stroke: #22c55e;
    margin-top: 4px;
}

/* --- Selector groups (vial size + pack size) --- */
.pp-pill-selectors {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 28px;
}
.pp-selector-group {
    display: block;
    width: 100%;
}
.pp-selector-group__header {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex: none !important;
    min-width: 0 !important;
    margin: 0 0 12px;
}
.pp-selector-group__label {
    color: #343434;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
}
.pp-selector-group__hint {
    color: #9CA3AF;
    font-size: 11px;
    font-weight: 500;
}
.pp-selector-group__selected { display: none; }

/* --- Vial pills (.pp-pill) — simple round pill --- */
.pp-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pp-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 2px solid #E5E7EB;
    border-radius: 50%;
    width: 68px;
    height: 68px;
    padding: 0;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    color: #343434;
    cursor: pointer;
    transition: 0.2s ease;
    line-height: 1.05;
    gap: 2px;
}
.pp-pill:hover { border-color: #1f9edb; }
.pp-pill.is-active,
.pp-pill[aria-pressed="true"] {
    background: #E8F4FB;
    border-color: #1f9edb;
    color: #0e6a99;
}
.pp-pill__value { font-size: 14px; font-weight: 700; line-height: 1.05; letter-spacing: -0.2px; }
.pp-pill__unit { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; line-height: 1.05; color: #6B7280; }
.pp-pill.is-active .pp-pill__unit,
.pp-pill[aria-pressed="true"] .pp-pill__unit { color: #0e6a99; }
.pp-pill__label { display: none !important; }

/* --- Size-pill row + inline Planner link --- */
/* One flex row: size pills left, "Use Peptide Planner" link right-aligned.
   Under ~380px the link wraps to its own full-width line (flex-basis:100%)
   so the size pills never get squished. */
.pp-size-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pp-size-row .pp-pill-row,
.pp-size-row .pp-buybox__static-size {
    flex: 0 1 auto;
    min-width: 0;
}
.pp-planner-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0e6a99;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.pp-planner-link:hover,
.pp-planner-link:focus-visible { color: #1f9edb; }
.pp-planner-link__icon,
.pp-planner-link__arrow { flex: 0 0 auto; }
.pp-planner-link__arrow { transition: transform 0.2s ease; }
.pp-planner-link:hover .pp-planner-link__arrow { transform: translateX(2px); }
@media (max-width: 380px) {
    /* shrink:0 forces the link onto its own full-width line instead of
       compressing in beside the pills (flex-basis alone still shrinks). */
    .pp-planner-link { flex: 1 0 100%; }
}

/* --- Peptide Planner card --- */
.pp-planner-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    background: #fafafa;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s;
}
.pp-planner-card:hover {
    border-color: #1f9edb;
    background: #E8F4FB;
    text-decoration: none;
}
.pp-planner-card__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f9edb;
}
.pp-planner-card__copy {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pp-planner-card__title {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #343434;
    line-height: 1.3;
}
.pp-planner-card__desc {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
}
.pp-planner-card__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0e6a99;
    white-space: nowrap;
}

/* --- Pack pills as vertical full-width cards --- */
.pp-pack-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    grid-template-columns: none !important;
}
.pp-pack-row .pp-pack-pill { flex: 0 0 auto !important; }
.pp-pack-pill {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "radio main pricing" !important;
    align-items: center !important;
    column-gap: 14px;
    row-gap: 0;
    width: 100%;
    background: #FFFFFF;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 18px;
    text-align: left;
    cursor: pointer;
    transition: 0.2s ease;
    position: relative;
}
.pp-pack-pill:hover { border-color: #1f9edb; }
.pp-pack-pill.is-active,
.pp-pack-pill[aria-pressed="true"] {
    background: #E8F4FB;
    border-color: #1f9edb;
}
.pp-pack-pill__radio {
    grid-area: radio;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2px solid #D1D5DB;
    border-radius: 9999px;
    background: #FFFFFF;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}
.pp-pack-pill.is-active .pp-pack-pill__radio,
.pp-pack-pill[aria-pressed="true"] .pp-pack-pill__radio { border-color: #1f9edb; background: #FFFFFF; }
.pp-pack-pill.is-active .pp-pack-pill__radio::after,
.pp-pack-pill[aria-pressed="true"] .pp-pack-pill__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 9999px;
    background: #1f9edb;
}
.pp-pack-pill__main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    align-items: flex-start;
}
.pp-pack-pill__name {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #343434;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}
.pp-pack-pill.is-active .pp-pack-pill__name { color: #0e6a99; }
.pp-pack-pill__savings {
    display: inline-block;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #15803d;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    justify-self: auto;
}
.pp-pack-pill__pricing {
    grid-area: pricing;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.1;
}
.pp-pack-pill__price {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #343434;
    line-height: 1.2;
}
.pp-pack-pill.is-active .pp-pack-pill__price { color: #0e6a99; }
.pp-pack-pill__price .woocommerce-Price-amount,
.pp-pack-pill__price .amount,
.pp-pack-pill__price bdi { font: inherit; color: inherit; }
.pp-pack-pill__cad {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #9CA3AF;
    line-height: 1;
}
.pp-pack-pill__check { display: none !important; }

/* --- Add to Cart row + buy footer --- */
.ppx-buy { margin-top: 28px; }
.pp-buybox__buy-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    margin-top: 4px;
}
.pp-buybox__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    color: #6B7280;
}
.pp-buybox__stock-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #22c55e;
    flex: 0 0 8px;
}
.pp-buybox__points-slot {
    display: inline-flex;
    align-items: center;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    color: #6B7280;
}
.pp-buybox__points-slot .wlr-product-message,
.pp-buybox__buy-footer .wlr-product-message {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 12px;
    color: #6B7280;
    background: transparent;
}

/* --- SKU bottom --- */
.pp-buybox__sku {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #F3F4F6;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-size: 11px;
    color: #9CA3AF;
    letter-spacing: 0.3px;
}

/* Product tags row inside the buy box */
.pp-buybox__tags {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', 'DM Sans', sans-serif;
}
.pp-buybox__tags-label {
    font-size: 11px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}
.pp-buybox__tags-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pp-buybox__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    background: #E8F4FB;
    color: #0e6a99;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.pp-buybox__tag:hover,
.pp-buybox__tag:focus {
    background: #1f9edb;
    color: #ffffff;
    text-decoration: none;
}
.pp-buybox__tag:focus-visible {
    outline: 2px solid #1f9edb;
    outline-offset: 2px;
}

/* --- Trust pillars bar — bg + top border --- */
.pp-pdp-pillars {
    background: #fafafa;
    border-top: 1px solid #F3F4F6;
    padding: 36px 40px;
    margin: 64px -40px 32px;
}
@media (max-width: 768px) {
    .pp-pdp-pillars { padding: 28px 20px; margin: 48px -20px 24px; gap: 24px; }
}

/* --- Hide bits no longer used in v7 layout --- */
.pp-buybox .pp-trust-signals { display: none; }
.ppx-meta { display: none; }
.ppx-gallery > .pp-product-card__planner-pill { display: none !important; }

/* PDP heart back to spec position (16/16) with subtle chip styling */
.ppx-gallery > .pp-wishlist-btn {
    top: 16px !important;
    left: 16px !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
.ppx-gallery > .pp-wishlist-btn svg {
    width: 22px !important;
    height: 22px !important;
}
/* deploy-trigger 2026-05-05 — kicking GitHub Actions runner */

/* ==========================================================================
   PEPTIDE PLANNER — Hedge Frame Banner (counsel-reviewed copy, ships verbatim)
   Phase 4 of the May 2026 cleanup. See PEPTIDE_PLANNER_CLAUDE_CODE_BRIEF.md
   ========================================================================== */
.pp-planner-hedge-frame {
    background: #E8F4FB;
    border: 0.5px solid #D5EBF6;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 0 22px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.5;
    color: #0e6a99;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.pp-planner-hedge-frame svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.pp-planner-hedge-frame span {
    flex: 1;
}

/* ==========================================================================
   PEPTIDE PLANNER — Unified Search Bar + Dropdown
   Phase 5 of the May 2026 cleanup. Replaces the legacy filter pill row +
   .ppdc-dd search input. The new selectors live alongside the existing
   #pprt-dc-dd / #pprt-dc-search / #pprt-dc-dd-list IDs (those are kept
   for backwards-compat with the JS event handlers).
   ========================================================================== */
.pp-planner-search-container {
    position: relative;
    margin-bottom: 16px;
}
.pp-planner-search-input-wrap {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: none;
    transition: border-color 0.15s ease;
}
.pp-planner-search-input-wrap:focus-within {
    border-color: #9CA3AF;
    box-shadow: none;
}
.pp-planner-search-icon {
    flex-shrink: 0;
    color: #9CA3AF;
}
.pp-planner-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #343434;
    background: transparent;
    padding: 0;
}
.pp-planner-search-input::placeholder {
    color: #9CA3AF;
}

.pp-planner-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 0.5px solid #E5E7EB;
    border-radius: 14px;
    padding: 14px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.pp-planner-search-container.is-open .pp-planner-search-dropdown {
    display: block;
}

.pp-planner-section-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1px;
    color: #6B7280;
    margin: 0 0 10px;
    padding: 0 4px;
    text-transform: uppercase;
}
.pp-planner-section-peptides {
    margin-bottom: 18px;
}
.pp-planner-peptide-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Peptide rows themselves are rendered by renderDoseDropdown() and use the
   existing .ppdc-dd-* classes, so individual row styling is not duplicated
   here. The container above is just the wrapper inside the new dropdown. */

.pp-planner-categories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.pp-planner-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 4px;
}
.pp-planner-pill {
    background: #fff;
    border: 0.5px solid #E5E7EB;
    color: #6B7280;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.pp-planner-pill:hover {
    background: #fafafa;
}
.pp-planner-pill[aria-pressed="true"] {
    background: #1f9edb;
    color: #fff;
    border-color: #1f9edb;
    font-weight: 500;
}

@media (max-width: 768px) {
    .pp-planner-categories-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .pp-planner-search-input-wrap {
        padding: 12px 14px;
    }
}

/* When #pprt-dc-dd-list is rendered inside the new structured dropdown
   panel, neutralize the legacy absolute-positioning rules from
   style.css:6384 (which were correct for the old flat dropdown but place
   the list at the bottom of the new panel instead of under the PEPTIDES
   heading). The dropdown panel provides its own border, shadow, and
   background, so strip those from the inner list. */
.pp-planner-search-dropdown #pprt-dc-dd-list {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    z-index: auto;
    /* Keep the scrollable behavior so very long peptide lists don't blow
       the dropdown panel height. */
    max-height: 320px;
    overflow-y: auto;
}

/* ==========================================================================
   PEPTIDE PLANNER — Reconstitution Calculator (Phase 8)
   Collapsible <details> component below the dose cards. The slider lets the
   user pick a different bac water volume and see the resulting syringe IU
   draw in real time. Math only; not a recommendation.
   ========================================================================== */
.pp-planner-recon-calc {
    background: #fff;
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 0;
    margin: 18px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.pp-planner-recon-summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
}
.pp-planner-recon-summary::-webkit-details-marker {
    display: none;
}
.pp-planner-recon-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #343434;
}
.pp-planner-recon-title .part-1 {
    color: #6B7280;
    font-weight: 400;
}
.pp-planner-recon-title .part-2 {
    color: #1f9edb;
}
.pp-planner-recon-chevron {
    color: #9CA3AF;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.pp-planner-recon-calc[open] .pp-planner-recon-chevron {
    transform: rotate(180deg);
}
.pp-planner-recon-body {
    padding: 0 18px 18px;
    border-top: 0.5px solid #E5E7EB;
    margin-top: 4px;
    padding-top: 16px;
}
.pp-planner-recon-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #6B7280;
    margin: 0 0 12px;
}
.pp-planner-recon-context {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #343434;
    margin: 0 0 16px;
    line-height: 1.5;
}
.pp-planner-recon-controls {
    margin-bottom: 14px;
}
.pp-planner-recon-controls label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6B7280;
    margin-bottom: 6px;
}
.pp-planner-recon-controls output {
    color: #0e6a99;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.pp-planner-recon-controls input[type="range"] {
    width: 100%;
    accent-color: #1f9edb;
    cursor: pointer;
}
.pp-planner-recon-output {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #343434;
    margin: 0 0 12px;
    line-height: 1.5;
    background: #F9FAFB;
    border: 0.5px solid #E5E7EB;
    border-radius: 10px;
    padding: 12px 14px;
}
.pp-planner-recon-output strong {
    color: #0e6a99;
    font-weight: 700;
}
.pp-planner-recon-footer {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: #9CA3AF;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 0.5px solid #E5E7EB;
    line-height: 1.5;
}
.pp-planner-recon-footer em {
    font-style: italic;
}

/* ==========================================================================
   PEPTIDE PLANNER — Schedule Example heading + safety note (Phase 9)
   Two-Color Heading above the calendar + italic safety note below.
   ========================================================================== */
.pp-planner-schedule-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    margin: 24px 0 4px;
    line-height: 1.2;
}
.pp-planner-schedule-heading .part-1 {
    color: #343434;
}
.pp-planner-schedule-heading .part-2 {
    color: #1f9edb;
}
.pp-planner-schedule-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #6B7280;
    margin: 0 0 18px;
    line-height: 1.5;
    max-width: 720px;
}
.pp-planner-schedule-safety-note {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: #9CA3AF;
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 0.5px solid #E5E7EB;
    line-height: 1.5;
    font-style: italic;
}

/* ==========================================================================
   PEPTIDE PLANNER — Phase 12: Protocol chip unification
   Brings the dose card chips render in line with the new unified design
   language (search bar, hedge banner, reconstitution calculator).
   CSS-only override; no HTML or JS changes.
   ========================================================================== */
.pprt-protocol-strip {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 18px 0;
}
.pprt-protocol-chip {
    border: 0.5px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    background: #fff;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}
.pprt-chip-header {
    padding: 14px 18px;
    gap: 12px;
    display: flex;
    align-items: center;
}
.pprt-chip-header strong {
    font-size: 15px;
    font-weight: 600;
    color: #343434;
}
.pprt-chip-img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 0.5px solid #E5E7EB;
    flex-shrink: 0;
    object-fit: cover;
}
.pprt-chip-hero {
    padding: 12px 18px 14px;
}
.pprt-chip-hero-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: 6px;
    display: block;
}
.pprt-chip-row {
    padding: 6px 18px;
    gap: 12px;
    align-items: flex-start;
    color: #343434;
    display: flex;
}
.pprt-chip-row span {
    font-size: 13px;
    line-height: 1.5;
    color: #343434;
    font-family: 'Montserrat', sans-serif;
}
.pprt-chip-row svg {
    color: #6B7280;
    flex-shrink: 0;
    margin-top: 2px;
}
.pprt-chip-divider {
    height: 0.5px;
    background: #E5E7EB;
    margin: 6px 0;
    border: 0;
}
.pprt-chip-note {
    padding: 12px 18px 14px;
    font-size: 11px;
    line-height: 1.5;
    color: #9CA3AF;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
}
.pprt-chip-note em {
    font-style: italic;
}

/* ==========================================================================
   PEPTIDE PLANNER — Phase 12: Calendar event card unification + detail
   Detailed multi-line copy in Day view; compact pill in Week / Month so the
   cell density doesn't break.
   ========================================================================== */
.pprt-cal-event {
    border: 0.5px solid #E5E7EB;
    border-left-width: 3px;
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}
.pprt-cal-ev-time {
    font-size: 11px;
    font-weight: 600;
    color: #0e6a99;
    line-height: 1.3;
    font-family: 'Montserrat', sans-serif;
}
.pprt-cal-ev-name {
    font-size: 13px;
    font-weight: 600;
    color: #343434;
    line-height: 1.3;
    font-family: 'Montserrat', sans-serif;
}
.pprt-cal-ev-ref {
    font-size: 12px;
    font-weight: 400;
    color: #6B7280;
    line-height: 1.4;
    font-family: 'Montserrat', sans-serif;
}
.pprt-cal-ev-route {
    font-size: 11px;
    font-weight: 400;
    color: #6B7280;
    line-height: 1.4;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
}
.pprt-cal-ev-dose {
    font-size: 11px;
    color: #6B7280;
    font-family: 'Montserrat', sans-serif;
}
/* Detail-line visibility: visible only in Day view. JS sets a data attribute
   on the events container; pure CSS gating keeps the JS edit tiny. */
.pprt-cal-events:not([data-cal-view="day"]) .pprt-cal-ev-ref,
.pprt-cal-events:not([data-cal-view="day"]) .pprt-cal-ev-route {
    display: none;
}

/* Day-view detail panel new lines (Phase 12) — research-described
   "Reference: 200mcg, 10 IU draw" and italic route. Replaces the legacy
   "Reference draw: X mark" + "200mcg · Subcutaneous in published protocols"
   single-line dose render. */
.pprt-day-detail__ref {
    font-size: 12px;
    font-weight: 400;
    color: #6B7280;
    line-height: 1.4;
    font-family: 'Montserrat', sans-serif;
    margin-top: 2px;
}
.pprt-day-detail__route {
    font-size: 11px;
    font-weight: 400;
    color: #6B7280;
    line-height: 1.4;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
    margin-top: 2px;
}

/* Day-view TIMELINE event card (Phase 12) — fourth render path.
   Used by renderDayView(). The timeline card shows: time line, name,
   syringe bar SVG, reference line, italic route. Replaces "9 PM · Bedtime"
   and "200mcg · Subcutaneous in published protocols" with research-framed copy. */
.pprt-tg-ev-ref {
    font-size: 12px;
    font-weight: 400;
    color: #6B7280;
    line-height: 1.4;
    font-family: 'Montserrat', sans-serif;
    margin-top: 4px;
}
.pprt-tg-event .pprt-tg-ev-route {
    font-size: 11px;
    font-weight: 400;
    color: #6B7280;
    line-height: 1.4;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
    margin-top: 2px;
}

/* ==========================================================================
   PEPTIDE PLANNER — Phase 13: .pp-dose-card single layout
   Drop-in component spec: pp-dose-card-light-mode.md sections 1-2
   ========================================================================== */
.pp-dose-card {
    --pp-bg: #ffffff;
    --pp-bg-soft: #f7f9fb;
    --pp-border: #e3e8ef;
    --pp-text: #0f172a;
    --pp-text-soft: #64748b;
    --pp-text-muted: #94a3b8;
    --pp-accent: #0ea5e9;
    --pp-accent-soft: #e0f2fe;
    --pp-accent-deep: #0369a1;
    --pp-water: #f97316;
    --pp-track: #eef2f6;

    background: var(--pp-bg);
    border: 0.5px solid var(--pp-border);
    border-radius: 16px;
    padding: 18px 20px;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    color: var(--pp-text);
    max-width: 460px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin: 18px 0;
}
.pp-dose-card--error { border-color: #fecaca; background: #fef2f2; }
.pp-dose-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.pp-dose-card__title { min-width: 0; }
.pp-dose-card__name { font-size: 18px; font-weight: 600; color: var(--pp-text); margin: 0; letter-spacing: -0.2px; }
.pp-dose-card__tagline { font-size: 12px; color: var(--pp-text-soft); margin: 2px 0 0; line-height: 1.4; }
.pp-dose-card__draw { text-align: right; flex-shrink: 0; }
.pp-dose-card__draw-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--pp-text-muted); margin-bottom: 2px; }
.pp-dose-card__draw-value { font-size: 22px; font-weight: 700; color: var(--pp-accent); line-height: 1; }
.pp-dose-card__draw-unit { font-size: 10px; font-weight: 600; color: var(--pp-text-muted); margin-left: 3px; letter-spacing: 0.5px; }
.pp-dose-card__slider { margin-bottom: 18px; }
.pp-dose-card__slider-track { height: 8px; background: var(--pp-track); border-radius: 999px; display: flex; overflow: hidden; }
.pp-dose-card__slider-water { background: var(--pp-water); height: 100%; }
.pp-dose-card__slider-draw { background: var(--pp-accent); height: 100%; }
.pp-dose-card__slider-ticks { display: flex; justify-content: space-between; font-size: 9px; color: var(--pp-text-muted); margin-top: 6px; padding: 0 1px; font-feature-settings: "tnum"; }
.pp-dose-card__bullets { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.pp-dose-card__bullet { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pp-text); line-height: 1.3; }
.pp-dose-card__icon { width: 16px; height: 16px; color: var(--pp-text-muted); flex-shrink: 0; }
.pp-dose-card__kicker { font-size: 11px; color: var(--pp-text-muted); font-style: italic; line-height: 1.5; margin: 14px 0 0; padding-top: 14px; border-top: 0.5px solid var(--pp-border); }
.pp-dose-card__kicker em { font-style: italic; }
.pp-dose-card__schedule { border-top: 0.5px solid var(--pp-border); padding-top: 14px; margin-top: 14px; }
.pp-dose-card__schedule-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pp-dose-card__schedule-title { font-size: 12px; font-weight: 600; color: var(--pp-text); margin: 0; }
.pp-dose-card__schedule-tabs { display: inline-flex; gap: 2px; background: var(--pp-bg-soft); border: 0.5px solid var(--pp-border); border-radius: 8px; padding: 2px; }
.pp-dose-card__schedule-tab { background: transparent; border: none; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--pp-text-soft); padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.pp-dose-card__schedule-tab:hover { color: var(--pp-text); }
.pp-dose-card__schedule-tab.is-active { background: var(--pp-accent); color: #ffffff; box-shadow: 0 1px 2px rgba(14, 165, 233, 0.25); }
.pp-dose-card__schedule-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.pp-dose-card__day { background: var(--pp-bg-soft); border: 0.5px solid var(--pp-border); border-bottom: 2px solid var(--pp-accent); border-radius: 8px; padding: 8px 4px 7px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pp-dose-card__day-label { font-size: 9px; font-weight: 600; color: var(--pp-text-muted); letter-spacing: 0.5px; }
.pp-dose-card__day-time { font-size: 12px; font-weight: 700; color: var(--pp-accent-deep); }
@media (max-width: 480px) {
    .pp-dose-card { padding: 16px; }
    .pp-dose-card__bullets { grid-template-columns: 1fr; gap: 8px; }
    .pp-dose-card__day { padding: 7px 2px 6px; }
    .pp-dose-card__day-label { font-size: 8px; }
    .pp-dose-card__day-time { font-size: 11px; }
}

/* ==========================================================================
   PEPTIDE PLANNER — Phase 13: .pp-stack multi-compound layout (2-5)
   Drop-in component spec: pp-dose-card-light-mode.md Appendix A
   ========================================================================== */
.pp-stack {
    background: white;
    border: 0.5px solid #e3e8ef;
    border-radius: 16px;
    padding: 16px;
    font-family: 'Montserrat', system-ui, sans-serif;
    max-width: 520px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin: 18px 0;
    --pp-stack-cyan: #0ea5e9;
    --pp-stack-orange: #f97316;
    --pp-stack-purple: #8b5cf6;
    --pp-stack-green: #10b981;
    --pp-stack-pink: #ec4899;
}
.pp-stack__counter { font-size: 11px; font-weight: 600; color: #64748b; margin: 0 0 10px; letter-spacing: 0.5px; }
.pp-stack__counter .count { color: #0f172a; }
.pp-stack__rows { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-stack__row-toggle { width: 100%; background: #fafafa; border: 0.5px solid #e3e8ef; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-family: inherit; text-align: left; display: block; transition: border-color 0.15s ease; }
.pp-stack__row-toggle:hover { border-color: var(--pp-stack-cyan); }
.pp-stack__row-toggle[aria-expanded="true"] { border-color: var(--pp-stack-cyan); border-width: 1.5px; }
.pp-stack__row-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pp-stack__row-name { display: flex; align-items: center; gap: 6px; min-width: 110px; flex-shrink: 0; }
.pp-stack__row-name .name { font-size: 14px; font-weight: 600; color: #0f172a; }
.pp-stack__row-name .dosage-chip { font-size: 9px; color: #0369a1; background: #e0f2fe; padding: 1px 5px; border-radius: 3px; }
.pp-stack__row-syringe { display: flex; align-items: center; gap: 5px; flex: 1; }
.pp-stack__slider-track { height: 6px; background: #eef2f6; border-radius: 999px; display: flex; overflow: hidden; flex: 1; min-width: 60px; }
.pp-stack__slider-water { background: #f97316; height: 100%; }
.pp-stack__slider-draw { background: #0ea5e9; height: 100%; }
.pp-stack__row-iu { font-size: 13px; font-weight: 700; color: #0ea5e9; white-space: nowrap; }
.pp-stack__row-iu .unit { font-size: 9px; color: #94a3b8; margin-left: 1px; }
.pp-stack__row-chevron { color: #94a3b8; flex-shrink: 0; transition: transform 0.15s ease; }
.pp-stack__row-toggle[aria-expanded="true"] .pp-stack__row-chevron { transform: rotate(180deg); }
.pp-stack__row-info p { font-size: 11px; color: #64748b; margin: 0; line-height: 1.5; }
.pp-stack__row-line-1 { margin-bottom: 2px !important; }
.pp-stack__row-info strong { color: #0f172a; font-weight: 600; }
.pp-stack__row-detail:not([hidden]) { padding: 14px; border-top: 0.5px solid #e3e8ef; margin-top: -1px; background: white; border-radius: 0 0 10px 10px; }
.pp-stack__row--error { background: #fef2f2; border: 0.5px solid #fecaca; border-radius: 10px; padding: 10px 12px; font-size: 11px; color: #991b1b; }
.pp-stack__row-error p { margin: 2px 0; }
.pp-stack__schedule { border-top: 0.5px solid #e3e8ef; padding-top: 14px; }
.pp-stack__schedule-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pp-stack__schedule-title { font-size: 12px; font-weight: 600; color: #0f172a; margin: 0; }
.pp-stack__schedule-tabs { display: inline-flex; gap: 2px; background: #f7f9fb; border: 0.5px solid #e3e8ef; border-radius: 8px; padding: 2px; }
.pp-stack__schedule-tab { background: transparent; border: none; font-family: inherit; font-size: 10px; font-weight: 600; color: #64748b; padding: 3px 8px; border-radius: 5px; cursor: pointer; }
.pp-stack__schedule-tab.is-active { background: #0ea5e9; color: white; }
.pp-stack__grid { display: grid; grid-template-columns: 90px repeat(7, 1fr); gap: 3px; font-size: 9px; }
.pp-stack__grid-row { display: contents; }
.pp-stack__grid-head [role="columnheader"] { text-align: center; color: #94a3b8; font-weight: 600; padding: 4px 0; }
.pp-stack__grid-label { font-size: 10px; color: #0f172a; font-weight: 500; padding: 4px 0; display: flex; align-items: center; gap: 4px; }
.pp-stack__grid-label .dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.pp-stack__grid-cell { background: #f3f4f6; padding: 4px 2px; border-radius: 4px; text-align: center; color: white; font-weight: 600; }
.pp-stack__grid-cell.is-off { background: #f3f4f6; color: transparent; }
.pp-stack__row[data-color="cyan"]   .pp-stack__slider-draw,
.pp-stack__grid-row[data-color="cyan"]   .pp-stack__grid-cell.is-on,
.pp-stack__grid-row[data-color="cyan"]   .pp-stack__grid-label .dot   { background: var(--pp-stack-cyan); }
.pp-stack__row[data-color="orange"] .pp-stack__slider-draw,
.pp-stack__grid-row[data-color="orange"] .pp-stack__grid-cell.is-on,
.pp-stack__grid-row[data-color="orange"] .pp-stack__grid-label .dot   { background: var(--pp-stack-orange); }
.pp-stack__row[data-color="purple"] .pp-stack__slider-draw,
.pp-stack__grid-row[data-color="purple"] .pp-stack__grid-cell.is-on,
.pp-stack__grid-row[data-color="purple"] .pp-stack__grid-label .dot   { background: var(--pp-stack-purple); }
.pp-stack__row[data-color="green"]  .pp-stack__slider-draw,
.pp-stack__grid-row[data-color="green"]  .pp-stack__grid-cell.is-on,
.pp-stack__grid-row[data-color="green"]  .pp-stack__grid-label .dot   { background: var(--pp-stack-green); }
.pp-stack__row[data-color="pink"]   .pp-stack__slider-draw,
.pp-stack__grid-row[data-color="pink"]   .pp-stack__grid-cell.is-on,
.pp-stack__grid-row[data-color="pink"]   .pp-stack__grid-label .dot   { background: var(--pp-stack-pink); }
.pp-stack__schedule-note { font-size: 11px; color: #94a3b8; font-style: italic; margin: 12px 0 0; line-height: 1.5; padding-top: 12px; border-top: 0.5px solid #e3e8ef; }
@media (max-width: 480px) {
    .pp-stack { padding: 12px; }
    .pp-stack__row-name { min-width: 90px; }
    .pp-stack__row-name .name { font-size: 13px; }
    .pp-stack__row-line-1, .pp-stack__row-line-2 { font-size: 10px; }
    .pp-stack__grid { grid-template-columns: 72px repeat(7, 1fr); font-size: 8px; }
    .pp-stack__grid-label { font-size: 9px; }
    .pp-stack__grid-cell { padding: 3px 1px; font-size: 8px; }
}

/* ==========================================================================
   v5.4.8 — Sticky site header (CSS-only, temporary "for now").
   NineTheme ships a native sticky toggle (Redux setting nav_sticky_visibility,
   Theme Options → Header → "Sticky Header"). That is the proper permanent path
   — when it's switched on, DELETE this block, or the two sticky systems will
   both run. This pins the non-Elementor header wrapper (header-parts.php:130)
   without the theme's scroll JS. position:sticky keeps the header in normal
   flow, so the theme's .header_holder spacer / content-jump handling is not
   needed. admin-bar offsets keep it clear of the WP toolbar while logged in.
   ========================================================================== */
.naturally-main-header.header {
    position: sticky;
    top: 0;
    z-index: 999;
}
body.admin-bar .naturally-main-header.header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .naturally-main-header.header { top: 46px; }
}

/* ==========================================================================
   PEPTIDE PLANNER — Phase 13.2: 2-column dose card grid
   When 2+ peptides are in the stack, dose cards render side-by-side at
   47.5% width with a 5px gap. Wraps to single column under 768px so the
   cards stay readable on mobile. Overrides the default .pp-dose-card
   max-width / margin so each card fills its column exactly.
   ========================================================================== */
.pp-dose-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    margin: 18px 0;
}
.pp-dose-card-grid .pp-dose-card {
    flex: 0 0 47.5%;
    max-width: 47.5%;
    margin: 0;
}
@media (max-width: 768px) {
    .pp-dose-card-grid .pp-dose-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   PEPTIDE PLANNER — Phase 13.1: hide legacy schedule panel
   User is sourcing a new schedule design from a separate session. Belt-and-
   suspenders: JS clears the panel (renderDoseResults), CSS hides the wrapper
   so the section is gone visually even if anything else writes to it.
   To re-enable: remove this rule + restore the JS call to renderSchedule().
   ========================================================================== */
#pprt-dc-schedule-panel {
    display: none !important;
}

/* ===== Phase 13.3 — Calendar views (Day / Week / Month) ===================
 * Source spec: pp-dose-card-light-mode.md Appendix B (Variant D locked
 * for the month grid: 56px cells, 7px color dots).
 *
 * Sits inside .pp-dose-card__schedule. The viewport (.pp-calendar-viewport)
 * holds the active view's HTML; the D/W/M tabs (.pp-dose-card__schedule-tab)
 * already exist from Phase 13. Week view continues to render the original
 * .pp-dose-card__schedule-days strip so no CSS migration is needed for it.
 *
 * Color tokens reuse the .pp-stack 5-color palette via [data-color] attrs
 * stamped on day-view event blocks and month-view dots.
 * ========================================================================== */
.pp-calendar-viewport {
    --pp-cal-cyan:   #0ea5e9;
    --pp-cal-orange: #f97316;
    --pp-cal-purple: #8b5cf6;
    --pp-cal-green:  #10b981;
    --pp-cal-pink:   #ec4899;
}

/* Day view — vertical hourly timeline */
.pp-calendar-day { padding: 4px 0 0; }
.pp-calendar-day__timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pp-calendar-day__hour {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: start;
    gap: 10px;
    min-height: 28px;
}
.pp-calendar-day__hour-label {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.5px;
    padding-top: 4px;
    text-align: right;
}
.pp-calendar-day__hour-slot {
    border-top: 0.5px dashed #e3e8ef;
    padding: 2px 0;
    min-height: 24px;
}
.pp-calendar-day__hour[data-empty] .pp-calendar-day__hour-slot { opacity: 0.6; }
.pp-calendar-day__event {
    border-radius: 8px;
    padding: 4px 12px;
    background: #e0f2fe;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pp-calendar-day__event .event-time {
    font-size: 10px;
    font-weight: 700;
    color: #0369a1;
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}
.pp-calendar-day__event .event-name {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
}
.pp-calendar-day__event[data-color="orange"] { background: #fff1e6; }
.pp-calendar-day__event[data-color="orange"] .event-time { color: #c2410c; }
.pp-calendar-day__event[data-color="purple"] { background: #f3e8ff; }
.pp-calendar-day__event[data-color="purple"] .event-time { color: #6d28d9; }
.pp-calendar-day__event[data-color="green"]  { background: #d1fae5; }
.pp-calendar-day__event[data-color="green"]  .event-time { color: #047857; }
.pp-calendar-day__event[data-color="pink"]   { background: #fce7f3; }
.pp-calendar-day__event[data-color="pink"]   .event-time { color: #be185d; }

/* Month view — Variant D (locked): 56px cells, 7px dots, today highlight,
 * adjacent-month days grayed out. Mon-first week. */
.pp-calendar-month { padding: 4px 0 0; }
.pp-calendar-month__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.pp-calendar-month__dow {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.5px;
    padding: 4px 0 6px;
}
.pp-calendar-month__cell {
    background: #f7f9fb;
    border: 0.5px solid #e3e8ef;
    border-radius: 8px;
    height: 56px;
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #0f172a;
}
.pp-calendar-month__cell .cell-date {
    font-size: 11px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1;
}
.pp-calendar-month__cell--adjacent {
    background: transparent;
    border-color: transparent;
}
.pp-calendar-month__cell--adjacent .cell-date { color: #cbd5e1; font-weight: 500; }
.pp-calendar-month__cell--today {
    background: #e0f2fe;
    border-color: #0ea5e9;
    border-width: 1px;
}
.pp-calendar-month__cell--today .cell-date { color: #0369a1; }
.pp-calendar-month__cell .cell-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
    margin-top: auto;
}
.pp-calendar-month__cell .cell-dots .dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--pp-cal-cyan);
    flex-shrink: 0;
}
.pp-calendar-month__cell .cell-dots .dot[data-color="orange"] { background: var(--pp-cal-orange); }
.pp-calendar-month__cell .cell-dots .dot[data-color="purple"] { background: var(--pp-cal-purple); }
.pp-calendar-month__cell .cell-dots .dot[data-color="green"]  { background: var(--pp-cal-green); }
.pp-calendar-month__cell .cell-dots .dot[data-color="pink"]   { background: var(--pp-cal-pink); }

/* ===== Phase 13.5 — Unified stack calendar (multi-compound) ===============
 * Sits BELOW the 2-col dose card grid when stack size is 2-5. Single card
 * mode keeps its own per-card calendar — this only applies to multi-compound
 * stacks. CRITICAL RENDER RULE from pp-dose-card-light-mode.md Appendix B.
 *
 * Reuses .pp-calendar-day, .pp-calendar-month, and .pp-stack__grid markup
 * from earlier phases for the actual view content; this block adds the
 * outer wrapper, head/title/tabs row, multi-compound legend, and safety note.
 * ========================================================================== */
.pp-stack-calendar {
    background: #ffffff;
    border: 0.5px solid #e3e8ef;
    border-radius: 16px;
    padding: 18px 20px;
    font-family: 'Montserrat', system-ui, sans-serif;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin: 18px 0 0;
    --pp-cal-cyan:     #0ea5e9;
    --pp-cal-orange:   #f97316;
    --pp-cal-purple:   #8b5cf6;
    --pp-cal-green:    #10b981;
    --pp-cal-pink:     #ec4899;
    --pp-stack-cyan:   #0ea5e9;
    --pp-stack-orange: #f97316;
    --pp-stack-purple: #8b5cf6;
    --pp-stack-green:  #10b981;
    --pp-stack-pink:   #ec4899;
}
.pp-stack-calendar__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.pp-stack-calendar__title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}
.pp-stack-calendar__tabs {
    display: inline-flex;
    gap: 2px;
    background: #f7f9fb;
    border: 0.5px solid #e3e8ef;
    border-radius: 8px;
    padding: 2px;
}
.pp-stack-calendar__tab {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.pp-stack-calendar__tab:hover { color: #0f172a; }
.pp-stack-calendar__tab.is-active {
    background: #0ea5e9;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(14, 165, 233, 0.25);
}
.pp-stack-calendar__viewport { min-height: 80px; }
.pp-stack-calendar__note {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
    margin: 14px 0 0;
    line-height: 1.5;
    padding-top: 12px;
    border-top: 0.5px solid #e3e8ef;
}
.pp-stack-calendar__legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: #f7f9fb;
    border: 0.5px solid #e3e8ef;
    border-radius: 8px;
}
.pp-stack-calendar__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #0f172a;
    font-weight: 500;
}
.pp-stack-calendar__legend-item .dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex-shrink: 0;
}
.pp-stack-calendar__legend-item[data-color="cyan"]   .dot { background: #0ea5e9; }
.pp-stack-calendar__legend-item[data-color="orange"] .dot { background: #f97316; }
.pp-stack-calendar__legend-item[data-color="purple"] .dot { background: #8b5cf6; }
.pp-stack-calendar__legend-item[data-color="green"]  .dot { background: #10b981; }
.pp-stack-calendar__legend-item[data-color="pink"]   .dot { background: #ec4899; }

@media (max-width: 480px) {
    .pp-stack-calendar { padding: 14px; }
    .pp-stack-calendar__title { font-size: 12px; }
    .pp-stack-calendar__legend-item { font-size: 9px; }
    .pp-stack-calendar__legend-item .dot { width: 6px; height: 6px; }
}

/* Mobile — keep month grid legible at 390px viewport. Cells shrink, dots
 * stay 6px so 1-2 dots per cell still read cleanly. */
@media (max-width: 480px) {
    .pp-calendar-day__hour { grid-template-columns: 44px 1fr; gap: 8px; }
    .pp-calendar-day__hour-label { font-size: 9px; }
    .pp-calendar-day__event { padding: 4px 10px; gap: 8px; }
    .pp-calendar-day__event .event-name { font-size: 12px; }
    .pp-calendar-month__grid { gap: 3px; }
    .pp-calendar-month__cell { height: 44px; padding: 4px 4px; border-radius: 6px; }
    .pp-calendar-month__cell .cell-date { font-size: 10px; }
    .pp-calendar-month__cell .cell-dots .dot { width: 6px; height: 6px; }
    .pp-calendar-month__dow { font-size: 9px; }
}