/* ---- PDP Layout ---- */
.pdp-gallery{margin-bottom:var(--space-6)}
.pdp-main-image{aspect-ratio:1;background:var(--color-gray-50);border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-gray-200)}
.pdp-main-image img{width:90%;height:auto;object-fit:contain}
.pdp-thumbnails{display:flex;gap:var(--space-2);margin-top:var(--space-3);overflow-x:auto;scrollbar-width:none}
.pdp-thumbnails::-webkit-scrollbar{display:none}
.pdp-thumb{width:72px;height:72px;border-radius:var(--radius);overflow:hidden;border:2px solid var(--color-gray-200);flex-shrink:0;cursor:pointer;background:var(--color-gray-50);min-width:48px;min-height:48px;transition:border-color 0.2s}
.pdp-thumb.active{border-color:var(--color-accent)}
.pdp-thumb:hover{border-color:var(--color-gray-400)}

/* Title & Rating */
.pdp-title-row{margin-bottom:var(--space-4)}
.pdp-info h1{font-size:clamp(1.75rem,3.5vw,2.25rem);margin-bottom:var(--space-3)}
.pdp-rating{display:flex;align-items:center;gap:var(--space-2);cursor:pointer}
.pdp-rating .review-count{font-size:var(--text-sm);color:var(--color-gray-500);text-decoration:underline}

/* ===== SUBSCRIBE SECTION ===== */
.subscribe-section{margin:var(--space-5) 0}
.subscribe-popular{display:none}

/* Two-option selector */
.toggle-group{display:flex;flex-direction:column;gap:var(--space-2);border:none;border-radius:0;overflow:visible}

/* Shared option styles — compact radio cards */
.toggle-option{padding:var(--space-3) var(--space-4);text-align:left;cursor:pointer;transition:all 0.2s ease;min-height:auto;display:flex;align-items:center;gap:var(--space-3);border-radius:var(--radius);border:1.5px solid var(--border);background:var(--bg-white);color:var(--text-body);position:relative;flex-direction:row}

/* Radio dot */
.toggle-option::before{content:'';width:20px;height:20px;border-radius:50%;border:2px solid var(--color-gray-300);flex-shrink:0;transition:all 0.2s}

/* Content layout inside option */
.toggle-option .toggle-label{font-size:var(--text-sm);font-weight:600;color:var(--text-primary);flex:1}
.toggle-option .toggle-price{font-size:var(--text-lg);font-weight:800;color:var(--text-primary);white-space:nowrap}
.toggle-option .toggle-savings{font-size:0.6875rem;font-weight:700;color:#fff;background:var(--color-cta);padding:2px 8px;border-radius:var(--radius-full);white-space:nowrap;margin-left:var(--space-2)}

/* Subscribe option — order first */
.toggle-option[data-type="subscribe"]{order:-1}

/* Active state — blue border, filled radio */
.toggle-option.active{border-color:var(--color-accent);background:#F8FBFF;box-shadow:0 0 0 1px var(--color-accent)}
.toggle-option.active::before{border-color:var(--color-accent);background:var(--color-accent);box-shadow:inset 0 0 0 3px #fff}

/* Inactive subscribe — still visually prioritized */
.toggle-option[data-type="subscribe"]:not(.active){border-color:var(--border)}

/* Inactive one-time — muted */
.toggle-option[data-type="onetime"] .toggle-price{color:var(--text-muted)}
.toggle-option[data-type="onetime"].active .toggle-price{color:var(--text-primary)}

/* Benefits list */
.subscribe-benefits{margin-top:var(--space-4);padding:0;background:none;border-radius:0;font-size:var(--text-sm);color:var(--text-body);display:flex;flex-direction:column;gap:var(--space-2)}
.subscribe-benefits li{display:flex;align-items:center;gap:var(--space-2);padding:0}
.subscribe-benefits li::before{content:'';width:18px;height:18px;border-radius:50%;flex-shrink:0;background:var(--color-accent-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/10px}

/* ===== PACKAGE OPTIONS ===== */
.package-options{margin:var(--space-4) 0;display:flex;flex-direction:column;gap:var(--space-2)}
.package-option{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);cursor:pointer;min-height:56px;transition:all 0.2s}
.package-option:hover{border-color:var(--color-gray-400)}
.package-option.active{border-color:var(--color-accent);background:var(--color-accent-light);box-shadow:0 0 0 1px var(--color-accent)}
.package-option-label{font-weight:600;color:var(--text-primary)}
.package-option-price{font-weight:800;color:var(--color-accent);font-size:var(--text-lg)}
.package-option-badge{font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:3px 10px;border-radius:var(--radius-full);font-family:var(--font-body)}
.package-option .popular-badge{background:var(--color-gold-light);color:var(--color-gold)}
.package-option .value-badge{background:var(--color-accent-light);color:var(--color-accent)}

/* ===== ADD TO CART ===== */
.atc-section{margin:var(--space-5) 0}
.atc-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:64px;padding:var(--space-3) var(--space-4);font-family:var(--font-body);letter-spacing:0.01em;background:var(--color-cta);color:#fff;border:none;border-radius:var(--radius-lg);transition:all 0.25s ease;box-shadow:0 4px 14px var(--color-cta-glow);cursor:pointer;line-height:1.2}
.atc-button:hover{background:var(--color-cta-hover);box-shadow:0 6px 20px rgba(22,163,74,0.3);transform:translateY(-2px)}
.atc-button:active{transform:translateY(0)}
.atc-button-main{font-size:clamp(1rem,2.6vw,1.125rem);font-weight:700;white-space:nowrap}
.atc-button-sub{font-size:var(--text-xs);font-weight:500;opacity:0.85;white-space:nowrap}
.atc-shipping{text-align:center;margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-gray-500)}

/* ===== QUALITY BANNER (Gundry-style filled badges) ===== */
.quality-banner{margin:var(--space-6) 0;background:var(--bg-cream);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.25rem,2.5vw,1.5rem);overflow:hidden}
.quality-badges{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);justify-content:center;margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--border)}
.quality-badge{display:flex;align-items:center;gap:var(--space-2)}
.quality-badge-icon{width:32px;height:32px;border-radius:50%;background:var(--color-accent-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.quality-badge-icon svg{flex-shrink:0;width:16px;height:16px;stroke:var(--color-accent)!important}
.quality-badge-text{display:flex;flex-direction:column}
.quality-badge-text strong{font-size:var(--text-xs);font-weight:700;color:var(--text-primary);font-family:var(--font-body);line-height:1.2}
.quality-badge-text span{font-size:0.625rem;color:var(--text-faint);line-height:1.3}
.quality-claims{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);justify-content:center}
.quality-claims span{display:flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:500;color:var(--text-muted)}
.quality-claims svg{color:var(--color-accent)!important;flex-shrink:0;width:14px;height:14px}

/* ===== RESULTS TIMELINE (Premium milestone cards) ===== */
.results-timeline{margin:clamp(3rem,6vw,5rem) 0}
.results-timeline h2{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.rt-milestones{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
.rt-milestone{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5);background:var(--bg-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);transition:all 0.3s}
.rt-milestone:hover{border-color:var(--color-accent);box-shadow:0 8px 24px rgba(0,0,0,0.06);transform:translateY(-2px)}
.rt-num{width:48px;height:48px;border-radius:50%;background:var(--color-accent-light);color:var(--color-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);flex-shrink:0;position:relative}
.rt-num::after{content:'';position:absolute;bottom:-20px;left:50%;width:2px;height:16px;background:var(--color-gray-200)}
.rt-milestone:last-child .rt-num::after{display:none}
.rt-text h4{font-family:var(--font-body);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-1);font-size:var(--text-base)}
.rt-text .rt-timeframe{font-size:var(--text-xs);font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-2);display:block}
.rt-text p{font-size:var(--text-sm);color:var(--text-muted);line-height:1.6}
@media(min-width:640px){.rt-milestones{grid-template-columns:repeat(2,1fr)}.rt-num::after{display:none}}

/* ===== INGREDIENTS ACCORDION ===== */
.ingredients-section{margin:clamp(3rem,6vw,5rem) 0}
.ingredients-section h2{margin-bottom:clamp(1.5rem,3vw,2rem)}
.ingredient-header{display:flex;justify-content:space-between;align-items:center}
.ingredient-amount{font-size:var(--text-sm);color:var(--color-accent);font-weight:700;background:var(--color-accent-light);padding:2px 10px;border-radius:var(--radius-full)}

/* ===== CLINICAL EFFICACY GRAPH ===== */
.clinical-graph{margin:clamp(3rem,6vw,5rem) 0;background:var(--bg-cream);border-radius:var(--radius-lg);padding:clamp(2rem,4vw,3rem)}
.clinical-graph h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:var(--space-2)}
.clinical-graph-sub{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.graph-bars{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.5rem)}
.graph-row{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
@media(min-width:640px){.graph-row{grid-template-columns:160px 1fr auto;gap:var(--space-4);align-items:center}}
.graph-label{display:flex;flex-direction:column}
.graph-label strong{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);font-family:var(--font-body)}
.graph-label span{font-size:var(--text-xs);color:var(--text-faint)}
.graph-track{height:36px;background:var(--bg-white);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);position:relative}
.graph-fill{height:100%;background:linear-gradient(90deg,var(--color-accent) 0%,#3B82F6 100%);border-radius:var(--radius);display:flex;align-items:center;justify-content:flex-end;padding-right:var(--space-3);width:0;transition:width 1.2s cubic-bezier(0.4,0,0.2,1)}
.graph-fill.animated{width:var(--bar-width)}
.graph-value{font-size:var(--text-sm);font-weight:800;color:#fff;font-family:var(--font-body)}
.graph-cite{font-size:0.6875rem;color:var(--text-faint);font-style:italic;white-space:nowrap}
.clinical-graph-disclaimer{font-size:var(--text-xs);color:var(--text-faint);margin-top:clamp(1.5rem,3vw,2rem);line-height:1.5;font-style:italic}

/* ===== REVIEWS ===== */
.reviews-section{margin:clamp(3rem,6vw,5rem) 0}
.reviews-header{text-align:center;margin-bottom:var(--space-5)}
.reviews-summary{display:flex;align-items:center;gap:var(--space-4)}
.reviews-avg{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;color:var(--text-primary);font-family:var(--font-display)}
.reviews-breakdown{margin-bottom:var(--space-6)}
.review-bar-row{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.review-bar-label{font-size:var(--text-sm);font-weight:600;width:40px;text-align:right;color:var(--text-body)}
.review-bar-track{flex:1;height:8px;background:var(--color-gray-100);border-radius:4px;overflow:hidden}
.review-bar-fill{height:100%;background:var(--color-gold);border-radius:4px}
.review-bar-count{font-size:var(--text-xs);color:var(--color-gray-400);width:36px}

.review-card{padding:var(--space-5) 0;border-bottom:1px solid var(--color-gray-100)}
.review-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.review-author{font-weight:700;font-size:var(--text-sm);color:var(--text-primary)}
.review-verified{font-size:var(--text-xs);color:var(--color-green);font-weight:600}
.review-title{font-weight:700;margin-bottom:var(--space-2);font-family:var(--font-body);color:var(--text-primary)}
.review-body{font-size:var(--text-sm);color:var(--text-body);line-height:1.7}
.review-timeframe{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--color-accent-light);color:var(--color-accent);font-size:var(--text-xs);font-weight:600;padding:4px 10px;border-radius:var(--radius-full);margin-top:var(--space-3)}

/* ===== FAQ ACCORDION (Premium) ===== */
.faq-section{margin:clamp(3rem,6vw,5rem) 0}
.faq-section h2{margin-bottom:clamp(1.5rem,3vw,2rem)}

/* Override generic accordion for PDP FAQ */
.faq-section .accordion-item{border-bottom:none;margin-bottom:var(--space-2)}
.faq-section .accordion-trigger{padding:var(--space-4) var(--space-5);background:var(--color-gray-50);border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:600;color:var(--text-primary);transition:all 0.2s;border:1px solid transparent}
.faq-section .accordion-trigger:hover{background:var(--color-gray-100)}
.faq-section .accordion-trigger::after{width:28px;height:28px;border-radius:50%;background:var(--bg-white);border:1px solid var(--color-gray-200);display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);color:var(--color-accent);transition:all 0.2s}

/* Active FAQ state */
.faq-section .accordion-item.active .accordion-trigger{background:var(--color-accent-light);border-color:var(--color-accent);color:var(--color-accent);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.faq-section .accordion-item.active .accordion-trigger::after{background:var(--color-accent);color:#fff;border-color:var(--color-accent);content:'\2212'}
.faq-section .accordion-item.active .accordion-content{background:var(--bg-white);border:1px solid var(--color-accent);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.faq-section .accordion-content-inner{padding:var(--space-5);color:var(--text-body);line-height:1.7}

/* ===== CROSS-SELL ===== */
.cross-sell{margin:clamp(3rem,6vw,5rem) 0;padding:var(--space-8);background:var(--color-gray-50);border-radius:var(--radius-lg)}
.cross-sell h2{margin-bottom:var(--space-5)}
.cross-sell-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
@media(min-width:1024px){.cross-sell-grid{grid-template-columns:repeat(3,1fr)}}

/* Bundle */
.bundle-savings{background:var(--color-accent-light);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4);text-align:center}
.bundle-savings strong{color:var(--color-accent)}