/* Shared presentation for all three supplements, with a gold Magnesium accent. */
.product-pricing { display: flex; flex-direction: column; gap: 4px; }
.product-pricing .product-price { text-align: left; }
.delivery-charge-note, .price-delivery-note { display: block; color: #59624c; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 4px 0 0; }
body.immersive-theme .product-card .product-pricing .delivery-charge-note { max-width: none; font-size: 14px; line-height: 1.4; white-space: nowrap; }
.product-price small, .detail-purchase-price small, .profile-pricing small, .formula-pricing small { font-size: 14px; font-weight: 400; }
.detail-purchase-price { margin: 18px 0; }
.detail-purchase-price strong { font-size: 24px; }
.profile-pricing { margin: 14px 0; }
.formula-pricing { margin: 0 0 18px; }
.profile-pricing strong, .formula-pricing strong { font-size: 20px; }
body.immersive-theme .filter-tabs { flex-wrap: wrap; }
body.immersive-theme .product-card[data-tone="gold"] { --product-accent: #e4c85a; --product-bg: #201e15; }
body.immersive-theme .product-card[data-tone="gold"] .product-visual { background: #201e15; }
body.immersive-theme .product-card[data-tone="gold"] .product-image { mix-blend-mode: normal; clip-path: inset(4.8% 0 0); }
body.immersive-theme .product-card[data-tone="gold"] .product-visual::before { border-color: #e4c85a40; }
body.immersive-theme .product-profile[data-product="magnesium"] { border-top-color: #ceb332; }
body.immersive-theme #cart-dialog .cart-item[data-product="magnesium"] { --cart-tint: #faf2cc; --cart-ring: #e0d28f; --cart-accent: #77601b; }
body.immersive-theme #cart-dialog .cart-item-info .delivery-charge-note { font-size: 12px; margin-top: 4px; }
.detail-photo[data-tone="gold"], .detail-image.magnesium { background: #201e15; }
.detail-photo[data-tone="gold"] img, .detail-image.magnesium img { mix-blend-mode: normal; clip-path: inset(4.8% 0 0); }
.detail-photo[data-tone="gold"] .detail-label-link { color: #eadb9a; border-color: #eadb9a70; }
body.immersive-theme .formula-explorer .formula-switch { display: flex; flex-wrap: wrap; }
body.immersive-theme .formula-explorer .formula-switch button { flex: 1; }
body.immersive-theme .formula-bottle[data-product="magnesium"] .formula-bottle-fallback { mix-blend-mode: normal; object-fit: contain; clip-path: inset(4.8% 0 0); }
body.immersive-theme .product-heading { flex-direction: column; align-items: flex-start; gap: 10px; }
.scene-formula[data-chapter="3"] :is(.scene-eyebrow, h2 em) { color: #e4cd78; }
[data-ingredient-story="magnesium"] { --ingredient-accent: #e4cd78; border-color: #e4cd7866; }
.formula-content[data-product="magnesium"] { --ingredient-ink: #77601b; --ingredient-wash: #f0ead1; }
body.immersive-theme .product-tagline { font-size: 18px; font-weight: 650; line-height: 1.4; color: #263523; }
.product-faq-section { margin: 0 0 64px; }
.product-faq-section h2 { margin-bottom: 16px; }
.product-faq-list { border-top: 1px solid #cbd0bf; }
.product-faq-list details { border-bottom: 1px solid #cbd0bf; padding: 16px 0; }
.product-faq-list summary { position: relative; padding-right: 36px; cursor: pointer; font-weight: 650; line-height: 1.5; list-style: none; }
.product-faq-list summary::-webkit-details-marker { display: none; }
.product-faq-list summary::after { content: '+'; position: absolute; right: 4px; top: 0; font-size: 22px; line-height: 1.15; font-weight: 400; }
.product-faq-list details[open] summary::after { content: '−'; }
.product-faq-list details p { margin: 12px 0 0; color: #536249; font-size: 16px; line-height: 1.7; }
.product-faq-list summary:focus-visible { outline: 2px solid #687d4b; outline-offset: 6px; }
@media (min-width: 1000px) {
  body.immersive-theme .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.immersive-theme .product-card { grid-template-columns: 1fr; grid-row: span 6; grid-template-rows: subgrid; }
  body.immersive-theme .product-info { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  body.immersive-theme .product-visual { height: 280px; min-height: 0; }
  body.immersive-theme .product-image,
  body.immersive-theme .product-card[data-tone="blue"] .product-image { height: calc(100% - 50px); top: 30px; width: 70%; left: 15%; }
  body.immersive-theme .product-category { max-width: calc(100% - 24px); width: fit-content; }
  body.immersive-theme .product-profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; row-gap: 0; }
  /* Share the seven content rows so wrapped copy cannot shift the prices and links. */
  body.immersive-theme .product-profile { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-items: start; padding: 20px; }
  body.immersive-theme .product-profile .profile-product-name { display: flex; flex-direction: column; align-items: flex-start; }
  body.immersive-theme .product-profile .profile-product-name .quick-add { align-self: flex-start; }
}

/* One transparent render matches the live scene before WebGL is ready. */
#hero-stage .scene-fallback img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
@media (prefers-reduced-motion: no-preference) { .experience { height: 780svh; } }
@media (min-width: 960px) and (max-width: 1250px) { #hero-stage .scene-skip { display: none; } }
@media (max-width: 959px) { #hero-stage[data-hero-layout="stack"] .scene-navigation { gap: 4px; } }
@media (max-width: 360px) { #hero-stage[data-hero-layout="stack"] .scroll-invitation { font-size: 0; gap: 0; } }
@media (max-width: 360px) and (max-height: 600px) {
  #hero-stage[data-hero-layout="stack"] { --hero-model-min: 160px; }
  #hero-stage[data-hero-layout="stack"] .scene-formula h2 { font-size: 24px; margin-bottom: 10px; }
  #hero-stage[data-hero-layout="stack"] .ingredient-feature { grid-template-columns: minmax(0, 1fr) 60px; min-height: 64px; }
  #hero-stage[data-hero-layout="stack"] .ingredient-feature h3 { font-size: 20px; }
  #hero-stage[data-hero-layout="stack"] .ingredient-benefit { font-size: 13px; }
  #hero-stage[data-hero-layout="stack"] .ingredient-explanation { font-size: 13px; line-height: 1.35; }
}