/* ============================================================
 PAWLEY, QuietPaw Anti-Itch Chews PDP (Elixir-Inspired PDP)
 ============================================================ */
/* --- 1. Variables & Reset --- */
:root{
 --graphite:#171B22;
 --bone:#F3F0EA;
 --steel-blue:#516274;
 --deep-mineral:#4A6B3A;
 --slate:#8A95A2;
 --border:#D8DDE3;
 --bg:#FFFFFF;
 --bg-alt:#F7F8FA;
 --radius:8px;
 --radius-sm:4px;
 --shadow-sm:0 1px 3px rgba(0,0,0,0.06);
 --shadow-md:0 4px 16px rgba(0,0,0,0.08);
 --shadow-lg:0 8px 32px rgba(0,0,0,0.10);
 --max-width:1200px;
 --gold:#C99B3F;
}
*, *::before, *::after{
 box-sizing:border-box;
 margin:0;
 padding:0;
}
html{
 scroll-behavior:smooth;
 -webkit-text-size-adjust:100%;
}
body{
 font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 font-size:16px;
 line-height:1.6;
 color:var(--graphite);
 background:var(--bone);
 -webkit-font-smoothing:antialiased;
}
img{
 max-width:100%;
 height:auto;
 display:block;
}
a{
 text-decoration:none;
 color:inherit;
}
/* --- 2. Typography --- */
h1, h2, h3{
 font-family:'Manrope', sans-serif;
 line-height:1.25;
}
h2{
 font-size:1.75rem;
 font-weight:700;
 text-align:center;
 margin-bottom:40px;
 color:var(--graphite);
}
h3{
 font-size:1.05rem;
 font-weight:600;
 margin-bottom:6px;
}
blockquote{
 font-style:italic;
 color:var(--steel-blue);
 line-height:1.6;
}
/* --- 3. Layout --- */
.container{
 max-width:var(--max-width);
 margin:0 auto;
 padding:0 12px;
}
section{
 padding:64px 0;
}
/* --- 4. Announcement Bar + Navigation --- */
.announcement-bar{
 background:var(--deep-mineral);
 color:rgba(255,255,255,0.85);
 text-align:center;
 font-size:0.75rem;
 padding:8px 0;
 letter-spacing:0.02em;
}
.nav-bar{
 background:var(--bg);
 border-bottom:1px solid var(--border);
 position:sticky;
 top:0;
 z-index:100;
}
.nav-inner{
 display:flex;
 align-items:center;
 padding:14px 20px;
 max-width:var(--max-width);
 margin:0 auto;
 gap:32px;
}
.brand-name{
 font-family:'Manrope', sans-serif;
 font-size:0.85rem;
 letter-spacing:0.16em;
 color:var(--graphite);
 text-transform:uppercase;
 margin-right:auto;
}
.brand-name strong{
 font-weight:800;
}
.brand-name span{
 font-weight:400;
 color:var(--steel-blue);
}
.nav-links{
 display:none;
 align-items:center;
 gap:28px;
}
.nav-links a{
 font-family:'Manrope', sans-serif;
 font-size:0.85rem;
 font-weight:600;
 color:var(--steel-blue);
 transition:color 0.2s;
}
.nav-links a:hover,
.nav-links a.active{
 color:var(--graphite);
}
.nav-links a.active{
 border-bottom:2px solid var(--deep-mineral);
 padding-bottom:2px;
}
/* Hamburger */
.nav-toggle{
 display:flex;
 flex-direction:column;
 gap:5px;
 background:none;
 border:none;
 cursor:pointer;
 padding:4px;
}
.nav-toggle span{
 display:block;
 width:22px;
 height:2px;
 background:var(--graphite);
 border-radius:1px;
 transition:all 0.2s;
}
/* Mobile menu */
.nav-mobile{
 display:none;
 flex-direction:column;
 padding:0 20px 16px;
 border-bottom:1px solid var(--border);
}
.nav-mobile.open{
 display:flex;
}
.nav-mobile a{
 padding:12px 0;
 font-family:'Manrope', sans-serif;
 font-size:0.9rem;
 font-weight:600;
 color:var(--steel-blue);
 border-bottom:1px solid var(--border);
}
/* --- 5. Product Hero --- */
.pdp-hero{
 padding:40px 0 48px;
 background:var(--bg);
}
.pdp-hero-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:32px;
}
/* Gallery */
.pdp-gallery{
 min-width:0;
}
.pdp-main-image-wrap{
 position:relative;
 background:var(--bone);
 border-radius:var(--radius);
 overflow:hidden;
 aspect-ratio:1 / 1;
}
.pdp-main-scroll{
 display:flex;
 overflow-x:auto;
 scroll-snap-type:x mandatory;
 scrollbar-width:none;
 -ms-overflow-style:none;
 width:100%;
 height:100%;
}
.pdp-main-scroll::-webkit-scrollbar{
 display:none;
}
.pdp-slide{
 min-width:100%;
 width:100%;
 height:100%;
 flex:0 0 100%;
 object-fit:cover;
 scroll-snap-align:start;
}
.gallery-arrow{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 z-index:3;
 width:36px;
 height:36px;
 border-radius:50%;
 border:none;
 background:rgba(255,255,255,0.85);
 color:var(--graphite);
 font-size:1.4rem;
 line-height:1;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 2px 8px rgba(0,0,0,0.12);
 transition:opacity 0.2s, background 0.2s;
}
.gallery-arrow:hover{
 background:#fff;
}
.gallery-arrow-left{left:10px}
.gallery-arrow-right{right:10px}
.gallery-arrow.hidden{
 opacity:0;
 pointer-events:none;
}
.gallery-dots{
 position:absolute;
 bottom:10px;
 left:50%;
 transform:translateX(-50%);
 display:flex;
 gap:6px;
 z-index:3;
}
.gallery-dot{
 width:7px;
 height:7px;
 border-radius:50%;
 background:rgba(0,0,0,0.25);
 border:none;
 padding:0;
 cursor:pointer;
 transition:background 0.2s;
}
.gallery-dot.active{
 background:var(--deep-mineral);
}
.pdp-main-img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:opacity 0.25s ease;
}
.pdp-thumbs-wrap{
 position:relative;
 display:flex;
 align-items:center;
 margin-top:12px;
}
.thumb-arrow{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 z-index:2;
 width:28px;
 height:28px;
 border-radius:50%;
 border:1px solid var(--slate);
 background:#fff;
 color:var(--graphite);
 font-size:1.1rem;
 line-height:1;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 1px 4px rgba(0,0,0,0.1);
 transition:opacity 0.2s;
}
.thumb-arrow:hover{
 background:var(--bone);
}
.thumb-arrow-left{left:-14px}
.thumb-arrow-right{right:-14px}
.thumb-arrow.hidden{
 opacity:0;
 pointer-events:none;
}
.pdp-thumbs{
 display:flex;
 gap:10px;
 overflow-x:auto;
 scroll-behavior:smooth;
 scrollbar-width:none;
 -ms-overflow-style:none;
 padding:2px 0;
 flex:1;
}
.pdp-thumbs::-webkit-scrollbar{
 display:none;
}
.pdp-thumb{
 width:72px;
 height:72px;
 flex-shrink:0;
 border-radius:var(--radius-sm);
 overflow:hidden;
 cursor:pointer;
 border:2px solid transparent;
 background:var(--bone);
 padding:0;
 transition:border-color 0.2s ease;
}
.pdp-thumb img{
 width:100%;
 height:100%;
 object-fit:cover;
}
.pdp-thumb.active,
.pdp-thumb:hover{
 border-color:var(--deep-mineral);
}
/* Buy Box */
.pdp-buy-box{
 display:flex;
 flex-direction:column;
 gap:14px;
 min-width:0;
 max-width:100%;
 overflow-wrap:break-word;
}
.pdp-buy-box > *{min-width:0;max-width:100%}
.pdp-breadcrumb + .pdp-title{
 margin-top:-10px;
}
.pdp-breadcrumb{
 font-size:0.8rem;
 color:var(--slate);
 text-transform:uppercase;
 letter-spacing:0.08em;
 font-weight:500;
}
.pdp-title{
 font-size:1.35rem;
 font-weight:700;
 line-height:1.25;
}
.pdp-subtitle{
 font-size:0.95rem;
 color:var(--steel-blue);
 line-height:1.5;
}
/* Benefit Badges (Resilia-style:3x2 grid, icon + label) */
.pdp-benefits{
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:8px;
 background:var(--bg-alt);
 border-radius:10px;
 padding:16px 12px;
 border:1px solid var(--border);
}
.benefit-badge{
 display:flex;
 align-items:center;
 gap:8px;
 padding:4px 0;
}
.benefit-badge svg{
 width:20px;
 height:20px;
 stroke:var(--deep-mineral);
 flex-shrink:0;
}
.benefit-badge span{
 font-family:'Manrope', sans-serif;
 font-weight:600;
 font-size:0.78rem;
 color:var(--graphite);
 line-height:1.2;
}
/* Price Line (between badges and variants) */
.pdp-price-line{
 display:flex;
 align-items:baseline;
 gap:10px;
}
.pdp-price-current{
 font-family:'IBM Plex Mono', monospace;
 font-size:2rem;
 font-weight:700;
 color:var(--graphite);
 line-height:1;
}
.pdp-price-old{
 font-family:'IBM Plex Mono', monospace;
 font-size:1.1rem;
 color:var(--slate);
 text-decoration:line-through;
}
.pdp-price-save{
 font-family:'Manrope', sans-serif;
 font-size:0.78rem;
 font-weight:700;
 color:#fff;
 background:var(--deep-mineral);
 padding:4px 12px;
 border-radius:20px;
}
/* Rating Bar (Resilia-style, top of buy box) */
.pdp-rating{
 display:inline-flex;
 align-items:center;
 gap:6px;
 background:var(--bg-alt);
 border:1px solid var(--border);
 padding:8px 16px;
 border-radius:24px;
 font-size:0.82rem;
 width:fit-content;
}
.pdp-rating .stars{
 color:var(--gold);
 font-size:0.95rem;
 letter-spacing:1px;
}
.rating-label{
 color:var(--slate);
}
.rating-score{
 font-weight:700;
 color:var(--graphite);
}
.rating-count{
 color:var(--steel-blue);
 text-decoration:underline;
}
/* Variant Selector */
.variants-header{
 display:flex;
 align-items:center;
 gap:12px;
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.85rem;
 color:var(--steel-blue);
 text-transform:uppercase;
 letter-spacing:0.08em;
 text-align:center;
 margin-bottom:0;
 white-space:nowrap;
}
.variants-header::before,
.variants-header::after{
 content:'';
 flex:1;
 height:1.5px;
 background:var(--border);
}
.variants-sale{
 text-align:center;
 font-family:'Manrope', sans-serif;
 font-weight:600;
 font-size:0.8rem;
 color:#1a5c3a;
 margin:-4px 0 4px;
 letter-spacing:0.02em;
}
.variants-sale-wrap{
 display:flex;align-items:baseline;justify-content:center;gap:6px;
 margin:-10px 0 6px;flex-wrap:wrap;
 font-family:'Manrope',sans-serif;
 font-size:0.74rem;font-weight:600;letter-spacing:0.01em;
 color:#1a5c3a;
 line-height:1.2;
}
.variants-sale-wrap .variants-sale{margin:0;font-size:inherit;color:inherit;font-weight:inherit}
.variants-sale-wrap .variants-sale::after{content:' · ends in';opacity:0.75;font-weight:500}
.variants-countdown{
 display:inline-flex;align-items:baseline;gap:1px;
 color:#1a5c3a;
 font-family:'IBM Plex Mono','Manrope',monospace;
 font-variant-numeric:tabular-nums;
 font-weight:700;
}
.variants-countdown .vc-block{display:inline;line-height:1}
.variants-countdown .vc-num{font-size:0.74rem;font-weight:700}
.variants-countdown .vc-lbl{display:none}
.variants-countdown .vc-colon{font-weight:700;font-size:0.74rem;opacity:0.5}
.variants-header{margin-bottom:2px}
.pdp-variants{
 display:flex;
 flex-direction:column;
 gap:8px;
 max-width:100%;
}
.variant-option{
 display:flex;
 align-items:center;
 gap:14px;
 border:1.5px solid var(--border);
 border-radius:12px;
 padding:12px 16px;
 cursor:pointer;
 transition:all 0.2s ease;
 position:relative;
 background:var(--bg);
 min-height:90px;
}
.variant-option input{
 position:absolute;
 opacity:0;
 width:0;
 height:0;
}
.variant-option.selected{
 border-color:var(--deep-mineral);
 background:rgba(44, 62, 80, 0.05);
}
.variant-option:hover:not(.selected){
 border-color:var(--slate);
}
.variant-highlight{
 background:var(--bg);
}
/* Variant Badge (top-right, like Resilia), uniform size across Most Popular / Most Savings */
.variant-badge,
.variant-highlight .variant-badge{
 position:absolute;
 top:-11px;
 right:16px;
 font-family:'Manrope', sans-serif;
 font-size:0.75rem;
 font-weight:700;
 padding:4px 14px;
 border-radius:20px;
 letter-spacing:0.02em;
}
.badge-brand{
 background:var(--deep-mineral);
 color:#fff;
}
.badge-green{
 background:#1a5c3a;
 color:#fff;
}
/* Variant Image */
.variant-media{
 width:86px;
 display:flex;
 align-items:center;
 justify-content:center;
 flex-shrink:0;
}
.variant-img{
 width:72px;
 height:72px;
 object-fit:contain;
 object-position:center;
 flex-shrink:0;
}
.variant-option[data-variant="2"] .variant-img{
 width:76px;
 height:76px;
}
.variant-option[data-variant="3"] .variant-img{
 width:80px;
 height:80px;
}
/* Variant Content (middle) */
.variant-content{
 flex:1;
 min-width:0;
 overflow:hidden;
}
.variant-name{
 display:block;
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.92rem;
 color:var(--graphite);
 margin-bottom:2px;
}
.variant-discount{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 gap:2px;
 font-size:0.8rem;
 color:var(--steel-blue);
 line-height:1.3;
 margin-top:2px;
}
.variant-meta{
 display:block;
 font-size:0.75rem;
 line-height:1.35;
}
@media (min-width:768px){
 .variant-meta{font-size:0.8rem;}
}
.variant-billing{
 white-space:nowrap;
}
.variant-shipping{
 display:inline-flex;
 align-items:center;
 gap:6px;
 font-size:0.72rem;
 font-weight:700;
 letter-spacing:0.01em;
 padding:2px 0;
 border-radius:999px;
 white-space:nowrap;
}
.variant-shipping::before{
 content:'';
 width:8px;
 height:8px;
 border-radius:50%;
 flex-shrink:0;
}
.variant-shipping-free{
 color:#1f6f4a;
}
.variant-shipping-free::before{
 background:#1f6f4a;
}
.variant-shipping-paid{
 color:#b45309;
}
.variant-shipping-paid::before{
 background:#d97706;
}
/* Variant Pricing (right side) */
.variant-pricing{
 text-align:right;
 flex-shrink:0;
}
.variant-current{
 display:block;
 font-family:'IBM Plex Mono', monospace;
 font-size:1.25rem;
 font-weight:700;
 color:var(--graphite);
 line-height:1.2;
}
.variant-per{
 font-size:0.72rem;
 color:var(--slate);
 font-weight:500;
 margin-left:4px;
}
.variant-per-unit{
 display:block;
 font-family:'IBM Plex Mono', monospace;
 font-size:0.72rem;
 color:var(--slate);
 font-weight:500;
 line-height:1.3;
 margin-top:1px;
}
.variant-duration{
 display:block;
 font-size:0.68rem;
 font-weight:600;
 color:var(--deep-mineral);
 letter-spacing:0.04em;
 text-transform:uppercase;
 margin-top:2px;
 margin-bottom:2px;
 line-height:1.3;
}
.variant-cents{
 font-size:0.85rem;
 font-weight:600;
}
.variant-off{
 display:inline-block;
 background:var(--deep-mineral);
 color:#fff;
 font-size:0.65rem;
 font-weight:600;
 padding:2px 6px;
 border-radius:4px;
 vertical-align:middle;
 margin-left:4px;
 letter-spacing:0.03em;
}
.variant-original{
 display:block;
 font-family:'IBM Plex Mono', monospace;
 font-size:0.85rem;
 color:var(--slate);
}
.variant-original s{text-decoration:line-through;}
.variant-total{
 font-family:'IBM Plex Mono', monospace;
 font-size:0.8rem;
 color:var(--slate);
 font-weight:400;
}
/* Variant cards, responsive mobile */
@media (max-width:767px){
 .variant-option{gap:10px;padding:10px 12px;}
 .variant-media{width:76px;}
 .variant-img{width:70px;height:70px;}
 .variant-option[data-variant="2"] .variant-img{width:74px;height:74px;}
 .variant-option[data-variant="3"] .variant-img{width:78px;height:78px;}
 .variant-current{font-size:1.1rem;}
 .variant-original{font-size:0.78rem;}
 .variant-badge,
 .variant-highlight .variant-badge{right:10px;font-size:0.65rem;padding:3px 10px;}
}
@media (max-width:420px){
 .variant-option{gap:8px;padding:10px 10px;}
 .variant-media{width:58px;margin-left:-4px}
 .variant-img{width:56px;height:56px;}
 .variant-option[data-variant="2"] .variant-img{width:58px;height:58px;}
 .variant-option[data-variant="3"] .variant-img{width:60px;height:60px;}
 .variant-name{font-size:0.82rem;}
 .variant-duration{font-size:0.62rem;letter-spacing:0.02em;white-space:nowrap;overflow:visible}
 .variant-meta{font-size:0.7rem;line-height:1.3}
 .variant-current{font-size:1.1rem;}
 .variant-original{font-size:0.7rem;}
 .variant-per-unit{font-size:0.66rem;}
 .variant-off{font-size:0.55rem;padding:2px 4px;margin-left:2px;}
 .variant-badge,
 .variant-highlight .variant-badge{right:10px;font-size:0.62rem;padding:3px 8px;}
}
@media (max-width:374px){
 .variant-option{gap:8px;padding:8px 8px;}
 .variant-media{width:60px;}
 .variant-img{width:56px;height:56px;}
 .variant-option[data-variant="2"] .variant-img{width:58px;height:58px;}
 .variant-option[data-variant="3"] .variant-img{width:60px;height:60px;}
 .variant-name{font-size:0.78rem;}
 .variant-current{font-size:1rem;}
}
/* CTA Button */
.pdp-cta{
 display:block;
 width:100%;
 text-align:center;
 background:var(--deep-mineral);
 color:#fff;
 font-family:'Manrope', sans-serif;
 font-weight:800;
 font-size:1.05rem;
 padding:16px 20px;
 border-radius:var(--radius);
 letter-spacing:0.04em;
 transition:background 0.2s ease, transform 0.1s ease;
 white-space:nowrap;
}
@media (max-width:420px){
 .pdp-cta{font-size:0.88rem;padding:14px 10px;letter-spacing:0.01em}
}
.pdp-cta:hover{
 background:#34495e;
}
.pdp-cta:active{
 transform:scale(0.99);
}
.pdp-cta-light{
 background:#fff;
 color:var(--deep-mineral);
 border:2px solid #fff;
}
.pdp-cta-light:hover{
 background:rgba(255,255,255,0.9);
}
/* Trust Line (guarantee + shipping) */
.pdp-trust-line{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:6px 14px;
 flex-wrap:wrap;
 font-size:0.78rem;
 padding:4px 0 2px;
}
.pdp-trust-line span{
 display:inline-flex;
 align-items:center;
 gap:5px;
 font-weight:600;
 color:var(--graphite);
 white-space:nowrap;
 font-size:0.8rem;
}
.pdp-trust-line .trust-short{display:none !important}
.pdp-trust-line .trust-long{display:inline}
@media (max-width:420px){
 .pdp-trust-line{gap:4px 12px;font-size:0.78rem}
 .pdp-trust-line span{font-size:0.78rem}
 .pdp-trust-line svg{width:14px;height:14px}
 .pdp-trust-line .trust-long{display:none !important}
 .pdp-trust-line .trust-short{display:inline !important}
}
.pdp-trust-line-placeholder-x{
 white-space:nowrap;
}
.pdp-trust-line svg{
 width:16px;
 height:16px;
 stroke:var(--deep-mineral);
 flex-shrink:0;
}
/* Payment Icons */
.pdp-payments{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:6px;
 flex-wrap:wrap;
 padding:0 0 2px;
}
.pdp-payments img{
 height:24px;
 width:auto;
 border-radius:3px;
}
/* Delivery Estimate */
.pdp-delivery{
 display:flex;
 align-items:center;
 justify-content:center;
 flex-wrap:wrap;
 gap:6px;
 font-size:0.85rem;
 line-height:1.35;
 color:var(--graphite);
 background:var(--bg-alt);
 border:1px solid var(--border);
 border-radius:24px;
 padding:8px 20px;
 margin-top:2px;
 text-align:center;
}
.pdp-delivery strong{white-space:nowrap}
@media (max-width:400px){
 .pdp-delivery{padding:8px 14px;font-size:0.8rem;gap:5px}
}
.delivery-dot{
 width:10px;
 height:10px;
 border-radius:50%;
 background:#4ade80;
 flex-shrink:0;
}
.pdp-delivery-low .delivery-dot{
 background:#B8372F;
 animation:stockPulse 1.4s ease-in-out infinite;
 box-shadow:0 0 0 0 rgba(184,55,47,0.7);
}
.pdp-delivery-low strong{color:#B8372F}
@keyframes stockPulse{
 0%{box-shadow:0 0 0 0 rgba(184,55,47,0.7);transform:scale(1)}
 70%{box-shadow:0 0 0 8px rgba(184,55,47,0);transform:scale(1.15)}
 100%{box-shadow:0 0 0 0 rgba(184,55,47,0);transform:scale(1)}
}
/* Mini Review (in buy box) */
.pdp-mini-review{
 border:1px solid var(--border);
 border-radius:var(--radius);
 padding:16px;
}
.mini-review-header{
 display:flex;
 align-items:center;
 gap:6px;
 margin-bottom:8px;
}
.mini-review-name{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.9rem;
}
.mini-review-verified{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:18px;
 height:18px;
 border-radius:50%;
 background:var(--deep-mineral);
 color:#fff;
 font-size:0.6rem;
}
.mini-review-stars{
 color:var(--gold);
 font-size:0.85rem;
}
.pdp-mini-review p{
 font-size:0.85rem;
 color:var(--steel-blue);
 font-style:italic;
 line-height:1.5;
}
/* Free Gifts Section (under gallery) */
.pdp-gifts{
 margin-top:24px;
}
.gifts-header{
 display:flex;
 align-items:center;
 gap:16px;
 margin-bottom:12px;
}
.gifts-line{
 flex:1;
 height:1px;
 background:var(--deep-mineral);
}
.gifts-title{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.9rem;
 color:var(--graphite);
 white-space:nowrap;
}
.gifts-box{
 border:2px solid var(--deep-mineral);
 border-radius:10px;
 overflow:hidden;
}
.gifts-box-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:12px 16px;
 background:rgba(44, 62, 80, 0.06);
 border-bottom:1px solid var(--border);
}
.gifts-box-title{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.95rem;
}
.gifts-count{
 font-weight:400;
 color:var(--slate);
}
.gifts-box-price{
 font-family:'IBM Plex Mono', monospace;
 font-size:0.85rem;
 color:var(--slate);
 display:flex;
 align-items:center;
 gap:8px;
}
.gifts-free{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.78rem;
 background:var(--deep-mineral);
 color:#fff;
 padding:2px 10px;
 border-radius:4px;
}
.gift-item{
 display:flex;
 align-items:center;
 gap:12px;
 padding:14px 16px;
 border-bottom:1px solid var(--border);
}
.gift-item:last-child{
 border-bottom:none;
}
.gift-img{
 width:52px;
 height:52px;
 object-fit:cover;
 border-radius:6px;
 flex-shrink:0;
 border:1px solid var(--border);
}
.gift-info{
 flex:1;
 min-width:0;
}
.gift-name{
 display:block;
 font-family:'Manrope', sans-serif;
 font-weight:600;
 font-size:0.88rem;
 color:var(--graphite);
 line-height:1.3;
}
.gift-desc{
 display:block;
 font-size:0.75rem;
 color:var(--slate);
 line-height:1.3;
}
.gift-pricing{
 text-align:right;
 flex-shrink:0;
 display:flex;
 align-items:center;
 gap:8px;
}
.gift-old{
 font-family:'IBM Plex Mono', monospace;
 font-size:0.8rem;
 color:var(--slate);
 text-decoration:line-through;
}
.gift-new{
 font-family:'IBM Plex Mono', monospace;
 font-size:0.85rem;
 font-weight:700;
 color:var(--graphite);
}
/* --- 6. Trust Bar --- */
.trust-bar{
 background:var(--bone);
 padding:20px 0;
 border-top:1px solid var(--border);
 border-bottom:1px solid var(--border);
}
.trust-bar-inner{
 display:grid;
 grid-template-columns:repeat(2, 1fr);
 gap:16px;
}
.trust-badge{
 display:flex;
 align-items:center;
 gap:12px;
 justify-content:center;
 min-width:0;
}
.trust-badge > div{min-width:0;flex:1 1 auto}
.trust-badge strong,.trust-badge span{overflow-wrap:break-word;word-wrap:break-word}
.trust-badge svg{
 width:28px;
 height:28px;
 stroke:var(--deep-mineral);
 flex-shrink:0;
}
.trust-badge strong{
 display:block;
 font-family:'Manrope', sans-serif;
 font-size:0.82rem;
 font-weight:700;
 color:var(--graphite);
}
.trust-badge span{
 font-size:0.72rem;
 color:var(--slate);
}
.media-bar-inner{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:12px;
 flex-wrap:wrap;
 margin-top:14px;
 padding-top:14px;
 border-top:1px solid var(--border);
 row-gap:8px;
}
.media-logo{white-space:nowrap}
.media-bar-label{
 font-size:0.68rem;
 color:var(--slate);
 text-transform:uppercase;
 letter-spacing:0.06em;
}
.media-logo{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.8rem;
 color:var(--steel-blue);
 opacity:0.5;
}
/* --- 7. Problem Section --- */
.section-problem{
 background:var(--bg);
}
.problem-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:24px;
 margin-bottom:32px;
}
.problem-card{
 text-align:center;
 padding:32px 24px;
 background:var(--bg-alt);
 border-radius:var(--radius);
 border:1px solid var(--border);
}
.problem-icon{
 width:48px;
 height:48px;
 margin:0 auto 16px;
 display:flex;
 align-items:center;
 justify-content:center;
}
.problem-icon svg{
 width:32px;
 height:32px;
 stroke:var(--deep-mineral);
}
.problem-card h3{
 font-size:1.1rem;
 margin-bottom:8px;
}
.problem-card p{
 font-size:0.9rem;
 color:var(--steel-blue);
 line-height:1.5;
}
.problem-intro{
 text-align:center;
 font-size:1rem;
 color:var(--steel-blue);
 max-width:680px;
 margin:-20px auto 40px;
 line-height:1.6;
}
.problem-stat{
 margin-top:16px;
 padding-top:14px;
 border-top:1px solid var(--border);
}
.problem-stat-number{
 display:block;
 font-family:'IBM Plex Mono', monospace;
 font-size:1.5rem;
 font-weight:800;
 color:var(--deep-mineral);
 line-height:1;
 margin-bottom:4px;
}
.problem-stat-label{
 display:block;
 font-size:0.8rem;
 color:var(--steel-blue);
 line-height:1.4;
}
.problem-stat-source{
 display:block;
 font-size:0.68rem;
 color:var(--slate);
 margin-top:4px;
}
.problem-bottom{
 max-width:720px;
 margin:40px auto 0;
 text-align:center;
}
.problem-closer{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:1.1rem;
 color:var(--deep-mineral);
 margin-bottom:12px;
}
.problem-subtext{
 font-size:0.9rem;
 color:var(--steel-blue);
 line-height:1.6;
}
/* --- 7b. Callout Box --- */
.callout-box{
 max-width:720px;
 margin:40px auto 0;
 padding:24px 28px;
 background:rgba(44, 62, 80, 0.06);
 border-left:4px solid var(--deep-mineral);
 border-radius:0 var(--radius) var(--radius) 0;
}
.callout-text{
 font-size:0.95rem;
 color:var(--graphite);
 line-height:1.6;
}
/* --- 7c. Imagine in 90 Days --- */
.section-imagine{
 background:var(--bone);
 text-align:center;
}
.imagine-list{
 list-style:none;
 max-width:520px;
 margin:0 auto 32px;
 display:flex;
 flex-direction:column;
 gap:16px;
}
.imagine-list li{
 font-size:1.05rem;
 color:var(--graphite);
 line-height:1.5;
 font-family:'Manrope', sans-serif;
 font-weight:600;
}
.imagine-list li::before{
 content:'\2713\00a0\00a0';
 color:var(--deep-mineral);
}
.imagine-closer{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:1.15rem;
 color:var(--deep-mineral);
 font-style:italic;
}
/* --- 7d. Cost Anchor --- */
.cost-anchor{
 text-align:center;
 margin-top:32px;
 font-size:0.95rem;
 color:var(--steel-blue);
 font-family:'IBM Plex Mono', monospace;
}
.cost-anchor strong{
 color:var(--deep-mineral);
 font-size:1.05rem;
}
/* --- 8. How To Use --- */
.section-howto{
 background:var(--bone);
}
.howto-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:24px;
 max-width:720px;
 margin:0 auto;
}
.howto-step{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:12px;
 text-align:center;
}
.howto-img{
 width:100%;
 aspect-ratio:16/10;
 object-fit:cover;
 border-radius:var(--radius);
}
.step-number{
 font-family:'IBM Plex Mono', monospace;
 font-weight:700;
 font-size:1.3rem;
 color:#fff;
 background:var(--deep-mineral);
 width:40px;
 height:40px;
 min-width:40px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
}
.howto-step p{
 font-size:1rem;
 padding-top:0;
}
/* --- 90-Day Timeline --- */
.section-timeline{
 background:var(--bg);
}
.timeline-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:0;
 max-width:900px;
 margin:0 auto;
 position:relative;
}
.timeline-step{
 padding:32px 28px 32px 72px;
 position:relative;
 border-left:3px solid var(--border);
}
.timeline-step:last-child{
 border-left-color:transparent;
}
/* Circle on the timeline line */
.timeline-step::before{
 content:'';
 position:absolute;
 left:-9px;
 top:36px;
 width:15px;
 height:15px;
 border-radius:50%;
 background:var(--deep-mineral);
 border:3px solid var(--bg);
 box-shadow:0 0 0 2px var(--deep-mineral);
}
.timeline-badge{
 display:inline-block;
 font-family:'IBM Plex Mono', monospace;
 font-size:0.7rem;
 font-weight:700;
 color:#fff;
 background:var(--deep-mineral);
 padding:5px 14px;
 border-radius:20px;
 margin-bottom:10px;
 text-transform:uppercase;
 letter-spacing:0.05em;
}
.timeline-step h3{
 font-size:1.15rem;
 margin-bottom:8px;
 color:var(--graphite);
}
.timeline-step p{
 font-size:0.9rem;
 color:var(--steel-blue);
 line-height:1.55;
}
/* Checkmarks for each milestone */
.timeline-step .timeline-result{
 display:inline-flex;
 align-items:center;
 gap:6px;
 margin-top:10px;
 font-family:'Manrope', sans-serif;
 font-weight:600;
 font-size:0.82rem;
 color:var(--deep-mineral);
}
.timeline-step .timeline-result::before{
 content:'\2713';
 font-weight:700;
}
/* --- 9. Ingredients --- */
.section-ingredients{
 background:var(--bg);
}
.ingredients-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:16px;
 margin-bottom:24px;
}
.ingredient-card{
 padding:24px;
 background:var(--bg-alt);
 border-radius:var(--radius);
 border:1px solid var(--border);
}
.ingredient-card h3{
 color:var(--deep-mineral);
 margin-bottom:6px;
}
.ingredient-card p{
 font-size:0.9rem;
 color:var(--steel-blue);
 line-height:1.5;
}
.ingredients-footer{
 text-align:center;
 font-size:0.8rem;
 color:var(--slate);
 letter-spacing:0.02em;
}
/* --- 10. Clinical Evidence --- */
.section-evidence{
 background:var(--deep-mineral);
 color:#fff;
}
.section-evidence h2{
 color:#fff;
}
.section-evidence .stat-number{
 color:#fff;
}
.section-evidence .stat-label{
 color:rgba(255,255,255,0.85);
}
.section-evidence .stat-source{
 color:rgba(255,255,255,0.5);
}
.evidence-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:32px;
 text-align:center;
}
.evidence-stat{
 padding:24px 16px;
}
.stat-number{
 display:block;
 font-family:'IBM Plex Mono', monospace;
 font-size:3rem;
 font-weight:800;
 color:var(--deep-mineral);
 line-height:1;
 margin-bottom:8px;
}
.stat-label{
 display:block;
 font-family:'Manrope', sans-serif;
 font-size:0.95rem;
 font-weight:600;
 color:var(--graphite);
 margin-bottom:4px;
 color:rgba(255,255,255,0.9);
}
.stat-source{
 display:block;
 font-size:0.75rem;
 color:var(--slate);
}
/* --- Comparison Table --- */
.section-comparison{
 background:var(--bg);
}
.comparison-table-wrap{
 overflow-x:auto;
 -webkit-overflow-scrolling:touch;
 max-width:100%;
}
.comparison-table{
 width:100%;
 border-collapse:collapse;
 font-size:0.88rem;
 min-width:560px;
}
.comparison-table thead th{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.82rem;
 text-transform:uppercase;
 letter-spacing:0.04em;
 padding:14px 16px;
 text-align:left;
 border-bottom:2px solid var(--deep-mineral);
 color:var(--graphite);
}
.comparison-table thead th.col-provant{
 color:var(--deep-mineral);
}
.comparison-table tbody td{
 padding:14px 16px;
 border-bottom:1px solid var(--border);
 vertical-align:top;
 line-height:1.4;
 color:var(--steel-blue);
}
.comparison-table .row-label{
 font-family:'Manrope', sans-serif;
 font-weight:600;
 color:var(--graphite);
 white-space:nowrap;
}
.comparison-table td.col-provant{
 color:var(--deep-mineral);
 font-weight:500;
 background:rgba(44, 62, 80, 0.04);
}
.comp-check{
 color:#1a7a4c;
 font-weight:700;
 margin-right:4px;
}
.comp-x{
 color:#c0392b;
 font-weight:700;
 margin-right:4px;
 opacity:0.6;
}
/* --- 11. Before / After --- */
.section-ba{
 background:var(--bg);
}
.ba-grid-wrap{
 position:relative;
 width:100%;
 overflow:hidden;
 -webkit-mask-image:linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
 mask-image:linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.ba-track{
 display:flex;
 gap:10px;
 width:max-content;
 will-change:transform;
 animation:baScroll 40s linear infinite;
 cursor:grab;
 user-select:none;
}
.ba-track:hover{animation-play-state:paused;}
.ba-track.is-dragging{animation-play-state:paused;cursor:grabbing;}
@keyframes baScroll{
 0%{transform:translateX(0);}
 100%{transform:translateX(-50%);}
}
/* legacy .ba-grid, keep for drag JS compat */
.ba-grid{display:contents;}
.ba-pair{
 display:flex;
 flex-direction:column;
 gap:3px;
 flex:0 0 260px;
 width:260px;
 height:350px; /* 2× (173px 4:3 height) + 4px gap */
 border-radius:var(--radius);
 overflow:hidden;
}
.ba-img{
 position:relative;
 flex:1;
 width:100%;
 min-height:0;
 overflow:hidden;
}
.ba-img img{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
}
.ba-label{
 position:absolute;
 bottom:8px;
 left:8px;
 background:rgba(0,0,0,0.6);
 color:#fff;
 font-family:'IBM Plex Mono', monospace;
 font-size:0.7rem;
 font-weight:500;
 padding:3px 8px;
 border-radius:3px;
}
.ba-disclaimer{
 text-align:center;
 font-size:0.75rem;
 color:var(--slate);
 margin-top:16px;
}
/* --- 12. Reviews --- */
.section-reviews{
 background:var(--bg-alt);
}
.review-aggregate{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:10px;
 flex-wrap:wrap;
 margin-bottom:32px;
}
.review-stars{
 color:var(--gold);
 font-size:1.2rem;
}
.review-score{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:1rem;
}
.review-count{
 font-size:0.82rem;
 color:var(--slate);
}
.review-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:16px;
}
.review-card{
 background:var(--bg);
 border:1px solid var(--border);
 border-radius:var(--radius);
 padding:24px;
}
.review-header{
 display:flex;
 align-items:center;
 gap:12px;
 margin-bottom:12px;
}
.review-avatar{
 width:48px;
 height:48px;
 border-radius:50%;
 object-fit:cover;
 flex-shrink:0;
}
.review-header-text{
 display:flex;
 flex-direction:column;
 gap:2px;
}
.review-stars-sm{
 color:var(--gold);
 font-size:0.9rem;
 margin-bottom:6px;
}
.review-verified{
 font-size:0.72rem;
 color:var(--slate);
 margin-top:8px;
}
.review-headline{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:1rem;
 color:var(--deep-mineral);
 margin-bottom:8px;
 letter-spacing:0.02em;
}
.review-card blockquote{
 font-size:0.9rem;
 margin-bottom:0;
 color:var(--steel-blue);
}
.review-name{
 font-weight:600;
 font-size:0.85rem;
}
.review-context{
 font-size:0.78rem;
 color:var(--slate);
}
/* --- 13. Expert --- */
.section-expert{
 background:var(--bg);
}
.expert-card{
 display:flex;
 flex-direction:column;
 gap:24px;
 align-items:center;
 text-align:center;
 max-width:720px;
 margin:0 auto;
}
.expert-photo{
 width:100px;
 height:100px;
 border-radius:50%;
 overflow:hidden;
 flex-shrink:0;
}
.expert-photo img{
 width:100%;
 height:100%;
 object-fit:cover;
}
.expert-content blockquote{
 font-size:1rem;
 line-height:1.6;
 margin-bottom:16px;
}
.expert-name{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.95rem;
 margin-bottom:4px;
}
.expert-badge{
 font-family:'IBM Plex Mono', monospace;
 font-size:0.72rem;
 font-weight:500;
 color:var(--steel-blue);
 background:var(--bg-alt);
 padding:4px 12px;
 border-radius:3px;
 display:inline-block;
}
/* --- 14. FAQ --- */
.section-faq{
 background:var(--bg-alt);
}
.faq-list{
 max-width:720px;
 margin:0 auto;
}
.faq-item{
 border-bottom:1px solid var(--border);
}
.faq-item summary{
 font-family:'Manrope', sans-serif;
 font-weight:600;
 font-size:1rem;
 padding:20px 0;
 cursor:pointer;
 list-style:none;
 display:flex;
 justify-content:space-between;
 align-items:center;
}
.faq-item summary::after{
 content:'+';
 font-size:1.3rem;
 font-weight:300;
 color:var(--slate);
 transition:transform 0.2s ease;
}
.faq-item[open] summary::after{
 content:'\2212';
}
.faq-item summary::-webkit-details-marker{
 display:none;
}
.faq-item p{
 padding:0 0 20px;
 font-size:0.9rem;
 color:var(--steel-blue);
 line-height:1.6;
}
/* --- 14b. About Provant Labs --- */
.section-about{
 padding:72px 0;
 background:var(--bg);
}
.section-about h2{
 text-align:center;
 margin-bottom:48px;
}
.about-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:48px;
 align-items:start;
}
.about-lead{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:1.25rem;
 color:var(--graphite);
 margin-bottom:16px;
}
.about-text p{
 font-size:0.95rem;
 color:var(--steel-blue);
 line-height:1.7;
 margin-bottom:16px;
}
.about-text p:last-child{
 margin-bottom:0;
}
.about-values{
 display:flex;
 flex-direction:column;
 gap:24px;
}
.about-value{
 display:flex;
 align-items:flex-start;
 gap:16px;
 padding:20px 24px;
 background:var(--bg-alt);
 border-radius:var(--radius);
 border:1px solid var(--border);
}
.about-value-icon{
 flex-shrink:0;
 width:36px;
 height:36px;
 display:flex;
 align-items:center;
 justify-content:center;
}
.about-value-icon svg{
 width:24px;
 height:24px;
 stroke:var(--deep-mineral);
}
.about-value h3{
 font-family:'Manrope', sans-serif;
 font-size:0.95rem;
 font-weight:700;
 color:var(--graphite);
 margin-bottom:4px;
}
.about-value p{
 font-size:0.875rem;
 color:var(--steel-blue);
 line-height:1.5;
}
@media (max-width:768px){
 .about-grid{
 grid-template-columns:1fr;
 gap:32px;
}
}
/* --- 15. Guarantee --- */
.section-guarantee{
 background:var(--bone);
 padding:56px 0;
}
.guarantee-inner{
 text-align:center;
 max-width:560px;
 margin:0 auto;
}
.guarantee-icon{
 width:48px;
 height:48px;
 stroke:var(--deep-mineral);
 margin:0 auto 16px;
}
.guarantee-inner h2{
 margin-bottom:12px;
}
.guarantee-inner p{
 font-size:0.95rem;
 color:var(--steel-blue);
 line-height:1.6;
}
/* --- 16. Final CTA --- */
.section-final-cta{
 background:var(--deep-mineral);
 padding:56px 0;
}
.final-cta-inner{
 text-align:center;
 max-width:600px;
 margin:0 auto;
}
.final-cta-inner h2{
 color:#fff;
 margin-bottom:24px;
}
.final-cta-inner .pdp-cta{
 display:inline-block;
 width:auto;
 padding:16px 48px;
 margin-bottom:20px;
}
.final-ps{
 font-size:0.85rem;
 color:rgba(255,255,255,0.6);
 line-height:1.6;
 font-style:italic;
}
/* --- 17. Footer --- */
.site-footer{
 background:var(--graphite);
 color:rgba(255,255,255,0.5);
 padding:56px 0 32px;
 font-size:0.8rem;
 line-height:1.6;
}
.footer-grid{
 display:grid;
 grid-template-columns:1.5fr 1fr 1fr;
 gap:40px;
 padding-bottom:40px;
 border-bottom:1px solid rgba(255,255,255,0.1);
 margin-bottom:32px;
}
.footer-logo{
 font-family:'Manrope', sans-serif;
 font-size:0.85rem;
 letter-spacing:0.16em;
 color:#fff;
 text-transform:uppercase;
 display:inline-block;
 margin-bottom:8px;
}
.footer-logo strong{
 font-weight:800;
}
.footer-logo span{
 font-weight:400;
 color:rgba(255,255,255,0.5);
}
.footer-tagline{
 font-family:'IBM Plex Mono', monospace;
 font-size:0.7rem;
 letter-spacing:0.08em;
 text-transform:uppercase;
 color:rgba(255,255,255,0.4);
 margin-bottom:12px;
}
.footer-desc{
 color:rgba(255,255,255,0.45);
 font-size:0.8rem;
 line-height:1.5;
 max-width:260px;
}
.footer-col h3,
.footer-col h4{
 font-family:'Manrope', sans-serif;
 font-size:0.75rem;
 font-weight:700;
 letter-spacing:0.06em;
 text-transform:uppercase;
 color:rgba(255,255,255,0.7);
 margin-bottom:16px;
}
.footer-col ul{
 list-style:none;
 display:flex;
 flex-direction:column;
 gap:10px;
}
.footer-col a{
 color:rgba(255,255,255,0.45);
 font-size:0.8rem;
 transition:color 0.2s;
}
.footer-col a:hover{
 color:#fff;
}
.citations-toggle{
 margin-bottom:24px;
}
.citations-toggle summary{
 cursor:pointer;
 font-weight:600;
 color:rgba(255,255,255,0.5);
 list-style:none;
 font-size:0.75rem;
 letter-spacing:0.03em;
}
.citations-toggle summary::-webkit-details-marker{
 display:none;
}
.citations-toggle summary::before{
 content:'+ ';
}
.citations-toggle[open] summary::before{
 content:'- ';
}
.citations-content{
 margin-top:12px;
}
.citations-content p{
 margin-bottom:8px;
}
.footer-bottom{
 padding-top:24px;
 border-top:1px solid rgba(255,255,255,0.06);
}
.disclaimer{
 margin-bottom:8px;
 font-size:0.7rem;
}
.copyright{
 color:rgba(255,255,255,0.25);
 font-size:0.7rem;
}
/* --- 18. Sticky Mobile CTA --- */
/* --- Compact Gifts (mobile only, in buy box) --- */
.pdp-gifts-compact{
 display:none;
}
@media (max-width:767px){
 .pdp-gifts-desktop{
 display:none;
}
 .pdp-gifts-compact{
 display:block;
 margin:12px 0;
 padding:12px;
 background:#fff;
 border:1px solid var(--border);
 border-radius:var(--radius);
}
 .gifts-compact-header{
 display:flex;
 align-items:center;
 gap:8px;
 margin-bottom:8px;
}
 .gifts-compact-title{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.7rem;
 text-transform:uppercase;
 letter-spacing:0.08em;
 color:var(--deep-mineral);
 white-space:nowrap;
}
 .gifts-compact-header .gifts-line{
 flex:1;
 height:1px;
 background:var(--border);
}
 .gifts-compact-subtitle{
 font-family:'Manrope', sans-serif;
 font-weight:600;
 font-size:0.72rem;
 color:var(--graphite);
 margin-bottom:6px;
}
 .gifts-compact-items{
 display:flex;
 flex-direction:column;
 gap:4px;
}
 .gift-compact-item{
 display:flex;
 align-items:center;
 gap:6px;
 font-size:0.72rem;
 color:var(--graphite);
}
 .gift-compact-check{
 color:#27ae60;
 font-weight:700;
 font-size:0.65rem;
}
 .gift-compact-price{
 margin-left:auto;
 font-size:0.65rem;
 color:var(--slate);
}
 .gift-compact-price s{
 color:var(--slate);
 margin-right:3px;
}
}
/* --- Mid-page CTAs --- */
.mid-cta{
 text-align:center;
 padding:24px 20px;
 background:var(--bone);
}
.mid-cta-btn{
 display:inline-block;
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.95rem;
 color:var(--deep-mineral);
 border:2px solid var(--deep-mineral);
 padding:14px 32px;
 border-radius:var(--radius);
 transition:all 0.2s ease;
 text-decoration:none;
}
.mid-cta-btn:hover{
 background:var(--deep-mineral);
 color:#fff;
}
.sticky-mobile-cta{
 display:none;
 position:fixed;
 bottom:0;
 left:0;
 right:0;
 z-index:999;
 background:#fff;
 border-top:1px solid #e5e5e5;
 padding:10px 20px;
 transform:translateY(100%);
 transition:transform 0.3s ease;
 box-shadow:0 -2px 12px rgba(0,0,0,0.08);
}
.sticky-mobile-cta.visible{
 transform:translateY(0);
}
.sticky-mobile-inner{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 max-width:var(--max-width);
 margin:0 auto;
}
.sticky-mobile-info{
 display:flex;
 flex-direction:column;
}
.sticky-mobile-name{
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.85rem;
}
.sticky-mobile-price{
 font-family:'IBM Plex Mono', monospace;
 font-weight:700;
 font-size:1.1rem;
}
.sticky-mobile-btn{
 background:var(--deep-mineral);
 color:#fff;
 font-family:'Manrope', sans-serif;
 font-weight:700;
 font-size:0.85rem;
 padding:12px 28px;
 border-radius:var(--radius);
 white-space:nowrap;
 transition:background 0.2s ease;
}
.sticky-mobile-btn:hover{
 background:#34495e;
}
/* --- 19. Responsive:Tablet (768px+) --- */
@media (min-width:768px){
 .container{
 padding:0 32px;
}
 section{
 padding:80px 0;
}
 h2{
 font-size:2rem;
}
 /* Trust bar:4 columns evenly spaced */
 .trust-bar-inner{
 grid-template-columns:repeat(4, auto);
 justify-content:space-evenly;
}
 /* Nav:show links, hide hamburger */
 .nav-links{
 display:flex;
}
 .nav-toggle{
 display:none;
}
 /* Hero:Two columns */
 .pdp-hero-grid{
 grid-template-columns:50% 1fr;
 gap:48px;
 align-items:start;
 max-width:1100px;
 margin:0 auto;
}
 .pdp-buy-box{
 align-self:start;
}
 .pdp-title{
 font-size:1.5rem;
}
 /* Problem:3 columns */
 .problem-grid{
 grid-template-columns:repeat(3, 1fr);
}
 /* How To:horizontal */
 .howto-grid{
 grid-template-columns:repeat(3, 1fr);
 max-width:100%;
}
 .howto-step{
 flex-direction:column;
 align-items:center;
 text-align:center;
}
 /* Ingredients:2x2 */
 .ingredients-grid{
 grid-template-columns:repeat(2, 1fr);
}
 /* Evidence:3 columns */
 .evidence-grid{
 grid-template-columns:repeat(3, 1fr);
}
 /* B/A: wider cards on desktop */
 .ba-pair{
 flex:0 0 240px;
 width:240px;
 height:326px; /* 2× (180px 4:3 height) + 3px gap */
}
 /* Reviews:2 columns */
 .review-grid{
 grid-template-columns:repeat(2, 1fr);
}
 /* Expert:horizontal */
 .expert-card{
 flex-direction:row;
 text-align:left;
 gap:32px;
}
 .expert-photo{
 width:120px;
 height:120px;
}
 /* Sticky mobile:hidden on desktop */
 .sticky-mobile-cta{
 display:none !important;
}
}
/* --- 20. Responsive:Mobile (<768px) --- */
@media (max-width:767px){
 .sticky-mobile-cta{
 display:block;
}
 .pdp-hero{
 padding:12px 0 20px;
}
 .pdp-thumbs-wrap{
 display:none;
}
 .pdp-rating{
 padding:5px 10px;
 font-size:0.72rem;
 gap:4px;
}
 .pdp-rating .stars{
 font-size:0.8rem;
}
 .pdp-price{
 font-size:2rem;
}
 .stat-number{
 font-size:2.4rem;
}
 .trust-bar-inner{
 gap:16px;
 justify-content:center;
}
 .trust-bar-inner span{
 font-size:0.65rem;
}
 .pdp-benefits{
 grid-template-columns:repeat(2, 1fr);
}
 .footer-grid{
 grid-template-columns:1fr;
 gap:28px;
}
 /* Add bottom padding for sticky CTA */
 .site-footer{
 padding-bottom:80px;
}
}
/* --- 21. Responsive:Large Desktop (1024px+) --- */
@media (min-width:1024px){
 .container{
 padding:0 40px;
}
 .pdp-hero-grid{
 gap:64px;
}
 /* Sticky gallery only on large screens */
 .pdp-gallery{
 position:sticky;
 top:24px;
 align-self:start;
}
 .pdp-title{
 font-size:1.6rem;
}
}
/* ============================================================
 SUBPAGE STYLES (Our Lab, FAQ, Contact)
 ============================================================ */
/* --- Page Hero --- */
.page-hero{
 background:var(--bone);
 padding:72px 0 56px;
 text-align:center;
}
.page-hero h1{
 font-family:'Manrope', sans-serif;
 font-size:2rem;
 font-weight:800;
 color:var(--graphite);
 margin-bottom:16px;
}
.page-hero-sub{
 font-size:1.05rem;
 color:var(--steel-blue);
 max-width:600px;
 margin:0 auto;
 line-height:1.6;
}
/* --- Page Sections --- */
.page-section{
 padding:64px 0;
}
.page-section-alt{
 background:var(--bg-alt);
}
.page-content{
 max-width:720px;
 margin:0 auto;
}
.page-content h2{
 text-align:left;
 margin-bottom:24px;
}
.page-content p{
 font-size:0.95rem;
 color:var(--steel-blue);
 line-height:1.7;
 margin-bottom:16px;
}
.page-content p:last-child{
 margin-bottom:0;
}
.text-center{
 text-align:center;
}
/* --- Values Grid (Our Lab) --- */
.values-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:24px;
 max-width:800px;
 margin:0 auto;
}
.value-card{
 padding:32px 28px;
 background:var(--bg-alt);
 border:1px solid var(--border);
 border-radius:var(--radius);
}
.value-icon{
 width:32px;
 height:32px;
 stroke:var(--deep-mineral);
 margin-bottom:16px;
}
.value-card h3{
 font-family:'Manrope', sans-serif;
 font-size:1rem;
 font-weight:700;
 color:var(--graphite);
 margin-bottom:8px;
}
.value-card p{
 font-size:0.875rem;
 color:var(--steel-blue);
 line-height:1.6;
}
/* --- FAQ Category Headers --- */
.faq-category{
 text-align:left;
 font-size:1.25rem;
 margin-bottom:8px;
 margin-top:48px;
 padding-bottom:12px;
 border-bottom:2px solid var(--deep-mineral);
}
.faq-category:first-of-type{
 margin-top:0;
}
/* --- Contact Grid --- */
.contact-grid{
 display:grid;
 grid-template-columns:1.2fr 0.8fr;
 gap:48px;
 align-items:start;
}
.contact-form-wrap h2{
 text-align:left;
 margin-bottom:28px;
}
/* --- Contact Form --- */
.contact-form{
 display:flex;
 flex-direction:column;
 gap:20px;
}
.form-row{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:16px;
}
.form-group{
 display:flex;
 flex-direction:column;
 gap:6px;
}
.form-group label{
 font-family:'Manrope', sans-serif;
 font-size:0.85rem;
 font-weight:600;
 color:var(--graphite);
}
.form-optional{
 font-weight:400;
 color:var(--slate);
}
.form-group input,
.form-group select,
.form-group textarea{
 font-family:'Inter', sans-serif;
 font-size:0.9rem;
 padding:12px 14px;
 border:1px solid var(--border);
 border-radius:var(--radius-sm);
 background:var(--bg);
 color:var(--graphite);
 transition:border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
 outline:none;
 border-color:var(--deep-mineral);
}
.form-group textarea{
 resize:vertical;
 min-height:120px;
}
.contact-submit{
 align-self:flex-start;
 padding:14px 40px;
 border:none;
 cursor:pointer;
}
/* --- Form Success --- */
.form-success{
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 padding:48px 0;
 gap:12px;
}
.form-success svg{
 width:48px;
 height:48px;
 stroke:var(--deep-mineral);
}
.form-success h3{
 font-family:'Manrope', sans-serif;
 font-size:1.25rem;
 color:var(--graphite);
}
.form-success p{
 color:var(--steel-blue);
 font-size:0.95rem;
}
/* --- Contact Info Sidebar --- */
.contact-info{
 display:flex;
 flex-direction:column;
 gap:20px;
}
.contact-info-card{
 padding:24px;
 background:var(--bg-alt);
 border:1px solid var(--border);
 border-radius:var(--radius);
}
.contact-info-card h3{
 font-family:'Manrope', sans-serif;
 font-size:0.9rem;
 font-weight:700;
 color:var(--graphite);
 margin-bottom:8px;
}
.contact-info-card p{
 font-size:0.85rem;
 color:var(--steel-blue);
 line-height:1.5;
}
.contact-info-card a{
 color:var(--deep-mineral);
 font-weight:600;
}
/* --- Approach Bottle (Our Lab) --- */
.approach-product{
 text-align:center;
 margin-top:32px;
}
.approach-bottle{
 max-width:180px;
 height:auto;
}
/* --- Trust Line (Contact) --- */
.trust-line{
 background:var(--bg-alt);
 border-bottom:1px solid var(--border);
 padding:14px 0;
 text-align:center;
}
.trust-line p{
 font-family:'IBM Plex Mono', monospace;
 font-size:0.72rem;
 letter-spacing:0.04em;
 color:var(--steel-blue);
}
/* --- Subpage Responsive --- */
@media (max-width:768px){
 .page-hero h1{
 font-size:1.5rem;
}
 .values-grid{
 grid-template-columns:1fr;
}
 .contact-grid{
 grid-template-columns:1fr;
 gap:40px;
}
 .form-row{
 grid-template-columns:1fr;
}
}

/* --- Nav Components (shared across all pages) --- */
.nav-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-sub-manage{display:none;align-items:center;justify-content:center;min-height:34px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--graphite);font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;transition:border-color 150ms ease,color 150ms ease,background 150ms ease}
.nav-sub-manage:hover{border-color:var(--slate);background:rgba(44,62,80,.04)}
.nav-mobile-manage{border-top:1px solid var(--border);padding-top:12px;margin-top:4px;font-size:.82rem;color:var(--steel-blue)}
.nav-cart{position:relative;background:none;border:none;cursor:pointer;padding:8px;color:var(--graphite);line-height:0;transition:color 150ms}
.nav-cart:hover{color:var(--deep-mineral)}
.nav-cart svg{width:22px;height:22px}
.nav-cart-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;background:#1f6f4a;color:#fff;border-radius:999px;font-family:'Manrope',sans-serif;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.nav-cart-count.empty{display:none}
@media(min-width:769px){.nav-sub-manage{display:inline-flex;padding:0 12px}.nav-sub-manage-short{display:none}.nav-sub-manage-long{display:inline}.nav-mobile-manage{display:none}}
@media(max-width:768px){.nav-actions{gap:2px}.nav-cart{margin-right:2px}}

/* ============================================================
   COMPONENT STYLES (originally inline in Provant HTML, moved here for clean separation)
   ============================================================ */
    .cd-backdrop {
      position: fixed; inset: 0; background: rgba(23, 27, 34, 0.5);
      opacity: 0; pointer-events: none; transition: opacity 200ms ease;
      z-index: 9998;
    }
    .cd-backdrop.open { opacity: 1; pointer-events: auto; }

    .cd-drawer {
      position: fixed; z-index: 9999; background: #fff;
      display: flex; flex-direction: column;
      box-shadow: -12px 0 48px rgba(23, 27, 34, 0.14);
      transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--graphite);
    }
    @media (max-width: 768px) {
      .cd-drawer {
        left: 0; right: 0; bottom: 0;
        max-height: 90vh; min-height: 60vh;
        border-radius: 12px 12px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -12px 48px rgba(23, 27, 34, 0.18);
      }
      .cd-drawer.open { transform: translateY(0); }
      .cd-grabber {
        width: 40px; height: 4px; background: var(--border); border-radius: 2px;
        margin: 10px auto 0;
      }
    }
    @media (min-width: 769px) {
      .cd-drawer {
        top: 0; right: 0; bottom: 0;
        width: 440px; max-width: 100vw;
        transform: translateX(100%);
      }
      .cd-drawer.open { transform: translateX(0); }
      .cd-grabber { display: none; }
    }

    .cd-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
    }
    .cd-title {
      font-family: 'Manrope', sans-serif;
      font-size: 1.1rem; font-weight: 700; color: var(--graphite);
      letter-spacing: -0.01em;
    }
    .cd-close {
      background: none; border: none; cursor: pointer; padding: 6px;
      color: var(--steel-blue); line-height: 0;
      transition: color 150ms;
    }
    .cd-close:hover { color: var(--graphite); }
    .cd-close svg { width: 22px; height: 22px; }

    .cd-timer-bar {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 11px 22px; background: var(--deep-mineral); color: #fff;
      font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em;
    }
    .cd-timer-bar svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--gold); }
    .cd-timer-time {
      font-family: 'Manrope', sans-serif;
      font-variant-numeric: tabular-nums;
      padding: 2px 8px; border-radius: 3px;
      color: var(--graphite); font-weight: 700; background: var(--gold);
      font-size: 0.82rem;
    }
    .cd-timer-bar.expired { background: #5a1f1f; }
    .cd-timer-bar.expired .cd-timer-time { background: #d4a5a5; color: #5a1f1f; }

    .cd-shipping {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 22px; background: #f4f8f5;
      border-bottom: 1px solid var(--border);
      font-size: 0.8rem; color: var(--graphite); font-weight: 500;
    }
    .cd-shipping svg { width: 18px; height: 18px; flex-shrink: 0; color: #1f6f4a; }
    .cd-shipping strong { color: var(--graphite); font-weight: 700; }

    .cd-body {
      flex: 1; overflow-y: auto; padding: 0;
      -webkit-overflow-scrolling: touch;
    }
    .cd-line {
      position: relative;
      display: flex; gap: 14px; padding: 18px 22px;
      border-bottom: 1px solid var(--border);
    }
    .cd-line-img {
      width: 78px; height: 78px; border-radius: var(--radius);
      background: var(--bone); object-fit: contain; flex-shrink: 0; padding: 8px;
    }
    .cd-line-info { flex: 1; min-width: 0; padding-right: 28px; }
    .cd-line-name {
      font-family: 'Manrope', sans-serif;
      font-size: 0.95rem; font-weight: 700; color: var(--graphite);
      line-height: 1.3; margin-bottom: 3px; letter-spacing: -0.01em;
    }
    .cd-line-variant {
      font-size: 0.78rem; color: var(--steel-blue); margin-bottom: 10px;
    }
    .cd-line-price {
      font-family: 'Manrope', sans-serif;
      font-size: 1rem; font-weight: 700; color: var(--graphite);
    }
    .cd-line-price s {
      color: var(--slate); font-weight: 400; margin-right: 6px; font-size: 0.85rem;
    }
    .cd-line-remove {
      position: absolute; top: 16px; right: 18px;
      background: none; border: none; cursor: pointer; padding: 4px;
      color: var(--slate); line-height: 0;
      transition: color 150ms;
    }
    .cd-line-remove:hover { color: var(--graphite); }
    .cd-line-remove svg { width: 16px; height: 16px; }

    .cd-empty {
      display: none; flex-direction: column; align-items: center; justify-content: center;
      padding: 60px 22px; text-align: center;
    }
    .cd-empty svg {
      width: 48px; height: 48px; color: var(--slate); margin-bottom: 16px;
    }
    .cd-empty-title {
      font-family: 'Manrope', sans-serif;
      font-size: 1.1rem; font-weight: 700; color: var(--graphite);
      margin-bottom: 6px;
    }
    .cd-empty-text {
      font-size: 0.85rem; color: var(--steel-blue); margin-bottom: 20px;
    }
    .cd-empty-btn {
      background: var(--deep-mineral); color: #fff; border: none;
      padding: 12px 24px; border-radius: var(--radius-sm);
      font-family: 'Manrope', sans-serif;
      font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
      text-transform: uppercase; cursor: pointer;
    }
    .cd-drawer.is-empty .cd-lines,
    .cd-drawer.is-empty .cd-gifts,
    .cd-drawer.is-empty .cd-foot { display: none; }
    .cd-drawer.is-empty .cd-empty { display: flex; }
    .cd-drawer.is-empty .cd-shipping { display: none; }

    .cd-gifts {
      padding: 10px 22px; background: #f4f8f5;
      border-bottom: 1px solid var(--border);
    }
    .cd-gifts-title {
      font-family: 'Manrope', sans-serif;
      font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.08em; color: #1f6f4a; margin-bottom: 5px;
    }
    .cd-gifts ul { margin: 0; padding: 0; list-style: none; }
    .cd-gifts li {
      display: flex; align-items: center; gap: 7px;
      font-size: 0.78rem; color: var(--graphite); padding: 1px 0; line-height: 1.35;
    }
    .cd-gifts li::before {
      content: '✓'; color: #1f6f4a; font-weight: 700; font-size: 0.9rem;
    }
    .cd-gifts li s { color: var(--slate); font-size: 0.72rem; margin-left: 4px; }

    .cd-foot {
      border-top: 1px solid var(--border); padding: 18px 22px 22px;
      background: #fff;
    }
    .cd-subtotal {
      display: flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 14px;
    }
    .cd-subtotal-label {
      font-size: 0.8rem; color: var(--steel-blue); font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.06em;
    }
    .cd-subtotal-val {
      font-family: 'Manrope', sans-serif;
      font-size: 1.35rem; font-weight: 800; color: var(--graphite);
      letter-spacing: -0.01em;
    }
    .cd-subtotal-val s {
      font-size: 0.85rem; color: var(--slate); font-weight: 400; margin-right: 8px;
    }
    .cd-savings {
      display: block; text-align: center;
      background: #f4f8f5;
      color: var(--graphite);
      padding: 8px 12px; border-radius: var(--radius-sm);
      font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em;
      margin-bottom: 12px;
      border: 1px solid rgba(31, 111, 74, 0.2);
      line-height: 1.5;
    }
    .cd-savings strong { white-space: nowrap; }
    .cd-savings strong {
      color: #1f6f4a; font-weight: 800; margin-left: 4px;
      font-family: 'Manrope', sans-serif;
    }
    .cd-sub-nudge {
      display: none;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: #fef9ee;
      border: 1.5px solid #e8d5a8;
      border-radius: 8px;
      margin-bottom: 12px;
    }
    .cd-sub-nudge.visible { display: flex; }
    .cd-sub-nudge-text {
      flex: 1;
      font-size: 0.75rem;
      line-height: 1.35;
      color: var(--graphite);
    }
    .cd-sub-nudge-text strong {
      display: block;
      font-size: 0.8rem;
      color: var(--graphite);
      margin-bottom: 1px;
    }
    .cd-sub-nudge-text strong span { color: #1f6f4a; }
    .cd-sub-nudge-btn {
      flex-shrink: 0;
      padding: 6px 12px;
      background: var(--gold);
      color: var(--graphite);
      border: none;
      border-radius: 6px;
      font-family: 'Manrope', sans-serif;
      font-size: 0.72rem;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
    }
    .cd-sub-nudge-btn:hover { background: #c9a94f; }
    /* Upgrade nudge, mirrors sub-nudge, green accent */
    .cd-upgrade-nudge {
      display: none;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: #f1f8f3;
      border: 1.5px solid #bfe0cc;
      border-radius: 8px;
      margin-bottom: 12px;
    }
    .cd-upgrade-nudge.visible { display: flex; }
    .cd-upgrade-text {
      flex: 1;
      font-size: 0.75rem;
      line-height: 1.35;
      color: var(--graphite);
    }
    .cd-upgrade-text strong {
      display: block;
      font-size: 0.8rem;
      color: var(--graphite);
      margin-bottom: 1px;
    }
    .cd-upgrade-text strong span { color: #1f6f4a; }
    .cd-upgrade-text #cdUpgradeSaving { color: #1f6f4a; font-weight: 800; }
    .cd-upgrade-btn {
      flex-shrink: 0;
      padding: 6px 14px;
      background: #1a5c3a;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-family: 'Manrope', sans-serif;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 150ms;
    }
    .cd-upgrade-btn:hover { background: #124b2d; }
    .cd-cta {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; padding: 17px; background: var(--deep-mineral); color: #fff;
      border: none; border-radius: var(--radius-sm);
      font-family: 'Manrope', sans-serif;
      font-size: 0.9rem; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
      text-decoration: none; transition: background 200ms;
    }
    .cd-cta:hover { background: #34495e; }
    .cd-cta:active { transform: scale(0.99); }
    .cd-cta svg { width: 15px; height: 15px; }
    .cd-trust-line {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      margin-top: 12px; font-size: 0.7rem; color: var(--steel-blue); font-weight: 500;
      letter-spacing: 0.02em;
    }
    .cd-pay-icons {
      display: flex; justify-content: center; gap: 6px; margin-top: 12px;
      flex-wrap: wrap;
    }
    .cd-pay-icons span {
      display: inline-flex; align-items: center; justify-content: center;
      height: 22px; padding: 0 8px; background: var(--bone); border-radius: 3px;
      font-family: 'Manrope', sans-serif;
      font-size: 0.6rem; font-weight: 700; color: var(--steel-blue);
      letter-spacing: 0.06em; border: 1px solid var(--border);
    }

    body.cd-locked { overflow: hidden; }

    /* Cart drawer, subscription mode accents */
    .cd-refill-tag {
      display: inline-block;
      background: #1a5c3a; color: #fff;
      padding: 1px 6px; border-radius: 3px;
      font-family: 'Manrope', sans-serif;
      font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.04em; text-transform: uppercase;
      margin-left: 2px;
    }
    .cd-mo {
      font-size: 0.7rem; color: var(--slate); font-weight: 500;
      margin-left: 2px;
    }
    .cd-subtotal-val .cd-mo { font-size: 0.75rem; }
    .cd-sub-disclosure {
      padding: 10px 12px; margin-bottom: 12px;
      background: var(--bg-alt);
      border-left: 3px solid var(--gold);
      border-radius: var(--radius-sm);
      font-size: 0.72rem; color: var(--steel-blue); line-height: 1.5;
    }
    .cd-sub-disclosure strong { color: var(--graphite); font-weight: 700; }

    /* Subscribe & Save toggle (Apple-style switch) */
    .sub-toggle {
      display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
      padding: 10px 12px;
      border: 2px dashed var(--border);
      border-radius: var(--radius);
      background: #fff;
      cursor: pointer;
      margin-bottom: 0;
      transition: all 200ms ease;
      position: relative;
      min-width: 0;
    }
    .sub-text { min-width: 0; flex: 1 1 auto; }
    @media (max-width:420px){
      .sub-toggle { gap: 8px; padding: 9px 10px; }
      .sub-title { font-size: 0.75rem !important; }
      .sub-sub { font-size: 0.62rem !important; }
      .sub-badge { font-size: 0.58rem !important; padding: 3px 6px !important; }
    }
    /* Tighten gap between toggle and CTA button */
    .sub-toggle + .pdp-cta { margin-top: 2px; }
    .sub-toggle.active {
      border-color: #1a5c3a;
      background: rgba(74, 222, 128, 0.06);
      border-style: dashed;
    }
    .sub-toggle input { position: absolute; opacity: 0; pointer-events: none; }
    /* Apple-style switch track + thumb */
    .sub-check {
      flex-shrink: 0;
      width: 40px; height: 24px;
      border-radius: 12px;
      background: #E4E7EB;
      border: none;
      position: relative;
      display: flex; align-items: center;
      padding: 0 3px;
      transition: background-color 220ms ease;
    }
    .sub-check::before {
      content: '';
      position: absolute;
      top: 3px; left: 3px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
      transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* Hide the legacy checkmark icon, switch uses thumb instead */
    .sub-check svg { display: none; }
    .sub-toggle.active .sub-check {
      background: #1a5c3a;
    }
    .sub-toggle.active .sub-check::before {
      transform: translateX(16px);
    }
    .sub-text { flex: 1; min-width: 0; }
    .sub-title {
      font-family: 'Manrope', sans-serif;
      font-size: 0.82rem; font-weight: 700; color: var(--graphite);
      line-height: 1.25;
    }
    .sub-sub {
      font-size: 0.68rem; color: var(--steel-blue); font-weight: 500;
    }
    .sub-badge {
      flex-shrink: 0;
      padding: 3px 7px; border-radius: 4px;
      background: var(--gold); color: var(--graphite);
      font-family: 'Manrope', sans-serif;
      font-size: 0.65rem; font-weight: 800;
      letter-spacing: 0.02em;
      white-space: nowrap;
      opacity: 0; transform: scale(0.8);
      transition: all 200ms ease;
    }
    .sub-toggle.active .sub-badge { opacity: 1; transform: scale(1); }

    .sub-disclosure {
      display: none;
      margin-top: 10px; padding: 12px 16px;
      background: var(--bg-alt);
      border-radius: var(--radius-sm);
      border-left: 3px solid var(--gold);
    }
    .sub-disclosure.active { display: block; }
    .sub-disclosure-text {
      font-size: 0.75rem; color: var(--steel-blue); line-height: 1.5;
      text-align: center;
    }
    .sub-disclosure strong { color: var(--graphite); font-weight: 700; }
    .sub-benefits {
      display: flex; justify-content: center; align-items: center;
      gap: 14px; margin-top: 10px; padding-top: 10px;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
    }
    .sub-benefit {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 0.7rem; color: var(--graphite); font-weight: 600;
      letter-spacing: 0.01em;
    }
    .sub-benefit svg {
      width: 12px; height: 12px; color: var(--gold);
      flex-shrink: 0;
    }

    /* /mo suffix on variant card prices */
    .variant-mo {
      font-size: 0.8rem; color: var(--graphite); font-weight: 600;
      margin-left: 1px; letter-spacing: -0.01em;
    }

    /* Header actions */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }
    .nav-sub-manage {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: #fff;
      color: var(--graphite);
      font-family: 'Manrope', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      white-space: nowrap;
      transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
    }
    .nav-sub-manage:hover {
      border-color: var(--slate);
      background: rgba(44, 62, 80, 0.04);
    }
    .nav-sub-manage { display: none; }
    .nav-mobile-manage {
      border-top: 1px solid var(--border);
      padding-top: 12px;
      margin-top: 4px;
      font-size: 0.82rem;
      color: var(--steel-blue);
    }

    /* Cart icon in header */
    .nav-cart {
      position: relative;
      background: none; border: none; cursor: pointer;
      padding: 8px; color: var(--graphite); line-height: 0;
      transition: color 150ms;
    }
    .nav-cart:hover { color: var(--deep-mineral); }
    .nav-cart svg { width: 22px; height: 22px; }
    .nav-cart-count {
      position: absolute; top: 2px; right: 2px;
      min-width: 16px; height: 16px; padding: 0 4px;
      background: #1f6f4a; color: #fff;
      border-radius: 999px;
      font-family: 'Manrope', sans-serif;
      font-size: 0.62rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      line-height: 1;
    }
    .nav-cart-count.empty { display: none; }
    @media (min-width: 769px) {
      .nav-sub-manage {
        display: inline-flex;
        padding: 0 12px;
      }
      .nav-sub-manage-short { display: none; }
      .nav-sub-manage-long { display: inline; }
      .nav-mobile-manage { display: none; }
    }
    @media (max-width: 768px) {
      .nav-actions { gap: 2px; }
      .nav-cart { margin-right: 2px; }
    }

    /* ── UGC SCROLL STRIP ─────────────────────────────────────────── */
    .section-ugc-strip {
      padding: 40px 0 0;
      background: #fff;
      width: 100%;
    }
    .ugc-strip-header {
      text-align: center;
      margin-bottom: 16px;
      padding: 0 24px;
    }
    .ugc-strip-header h2 { margin-bottom: 0; }
    .ugc-strip-viewport {
      position: relative;
      width: 100%;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent 0px, black 80px, black calc(100% - 80px), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0px, black 80px, black calc(100% - 80px), transparent 100%);
    }
    .ugc-strip-track {
      display: flex;
      gap: 10px;
      width: max-content;
      padding: 0 0 32px;
      will-change: transform;
      cursor: grab;
    }
    .ugc-strip-track.is-dragging { cursor: grabbing; user-select: none; }
    .ugc-strip-item {
      flex: 0 0 auto;
      width: 190px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    }
    .ugc-strip-item img {
      width: 100%;
      display: block;
      aspect-ratio: 9/16;
      object-fit: cover;
    }
    @media (max-width: 768px) {
      .ugc-strip-viewport {
        -webkit-mask-image: linear-gradient(to right, transparent 0px, black 40px, black calc(100% - 40px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0px, black 40px, black calc(100% - 40px), transparent 100%);
      }
      .ugc-strip-item { width: 180px; }
    }