/* Mobile image controls, deliberately loaded after the existing section styles. */
.image-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px;color:#234638;font-size:12px}.image-navigation>span{text-align:center;line-height:1.5}.image-navigation button,.image-expand{cursor:pointer;border:1px solid #cbd8d4;border-radius:999px;background:#fff;color:#143c39;min-height:44px;min-width:44px;font:inherit}.image-navigation button{font-size:22px}.image-expand{position:absolute;right:12px;bottom:12px;z-index:4;padding:0 14px;font-size:12px;box-shadow:0 3px 14px #102e3a18}.visual-tree-detail-image{position:relative}.dosage-visual .image-expand{bottom:46px}.packaging-stage .image-expand{bottom:auto;top:12px}.image-navigation button:focus-visible,.image-expand:focus-visible,.oktw-image-viewer button:focus-visible{outline:3px solid #258f80;outline-offset:3px}
.oktw-image-viewer{box-sizing:border-box;width:100%;height:100dvh;max-width:none;max-height:none;inset:0;margin:0;padding:16px;padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border:0;background:#0c2029;color:#fff;overflow:hidden}.oktw-image-viewer[open]{display:flex;flex-direction:column;gap:12px}.oktw-image-viewer::backdrop{background:#0c2029ed}.image-viewer-toolbar{display:flex;justify-content:space-between;gap:12px;flex-shrink:0}.oktw-image-viewer button{min-height:44px;padding:10px 16px;border:1px solid #607780;border-radius:24px;color:#fff;background:#203e49;font:inherit;cursor:pointer}.image-viewer-scroll{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;overscroll-behavior:contain}.image-viewer-scroll img{display:block;width:100%;height:100%;object-fit:contain;max-width:none}.oktw-image-viewer.is-zoomed .image-viewer-scroll{display:block}.oktw-image-viewer.is-zoomed img{width:200%;height:auto;max-width:none;object-fit:initial}.oktw-image-viewer>p{font-size:13px;text-align:center;margin:0;flex-shrink:0;line-height:1.5}
@media(min-width:981px){[data-application-accordion] .image-navigation{display:none}}
@media(max-width:980px){
.application-tabs-mobile{position:relative;padding:4px 3px 14px;scroll-padding:4px;scrollbar-width:thin}.application-tabs-mobile button{min-height:44px;touch-action:manipulation}.application-panel-content{min-width:0}.application-product{height:auto;aspect-ratio:4/3;background:var(--panel-tint)}.application-product .application-scene{object-fit:contain}.application-product:after{pointer-events:none;background:none}.application-copy{padding:24px 20px}.application-copy h3{font-size:clamp(28px,7vw,36px)}
.dosage-tabs{display:flex;overflow-x:auto;gap:8px;padding:4px 3px 12px;scroll-snap-type:x proximity;scrollbar-width:thin}.dosage-tabs button{flex:0 0 154px;min-height:68px;scroll-snap-align:start}.dosage-tabs button img{object-fit:contain}.dosage-panel{grid-template-columns:1fr;min-height:0}.dosage-visual{min-height:0;aspect-ratio:1/1;max-height:440px;padding:18px}.dosage-visual>img{object-fit:contain;mix-blend-mode:normal}.dosage-copy{padding:24px 20px}.dosage-visual-bottom{padding-right:0}.dosage-panel:hover .dosage-visual>img{transform:none}
#packaging .packaging-stage{min-width:0;padding:52px 12px 16px}#packaging .packaging-stage img{aspect-ratio:1/1;object-fit:contain}.packaging-stage-meta{max-width:100%}.packaging-stage-meta span{line-height:1.5}.packaging-stage-number{pointer-events:none} .packaging-explorer>.image-navigation{grid-column:1/-1}
.product-detail-image{min-height:0;aspect-ratio:1/1;clip-path:none;border-radius:16px}.product-detail-image img{width:100%;height:100%;padding:40px 18px;object-fit:contain;box-sizing:border-box}.home-product-grid .product-image-wrap{height:auto;aspect-ratio:1/1}.home-product-grid .product-image-wrap img{padding:32px 12px 12px}.product-card:hover .product-image-wrap img{transform:none}
.application-product,.dosage-visual,.packaging-stage{touch-action:pan-y pinch-zoom}.image-expand{touch-action:manipulation}
}
@media(prefers-reduced-motion:reduce){.application-panel,.application-panel-content{transition:none}.packaging-stage img,.dosage-copy{animation:none}}

/* v1.7.2: give the original hero artwork its own mobile stage. */
@media(max-width:980px){
  .hero.hero-light{display:flex;flex-direction:column;min-height:0;background:#f1f8fd;isolation:isolate}
  .hero.hero-light::after{display:none}
  .hero-light .hero-bg{position:relative;inset:auto;right:auto;z-index:0;display:block;flex:none;width:100%;height:clamp(220px,64vw,380px);max-width:none;object-fit:cover;object-position:right center;opacity:1;mask-image:none;-webkit-mask-image:none}
  .hero-light .hero-inner{position:relative;z-index:1;width:calc(100% - 40px);max-width:640px;display:flex;flex-direction:column;padding:22px 0 24px;gap:0}
  .hero-light .hero-panel{width:100%;max-width:none;padding:0;background:transparent;border:0;box-shadow:none}
  .hero-light .eyebrow.light{max-width:460px;margin:0 0 12px;font-size:10px;line-height:1.65;letter-spacing:.12em}
  .hero-light .hero-panel h1{max-width:620px;margin:0;font-size:clamp(30px,7.8vw,46px);line-height:1.08;letter-spacing:-.045em;overflow-wrap:normal}
  .hero-light .hero-panel h1 span{display:inline}
  .hero-light .hero-copy{max-width:600px;font-size:14px;line-height:1.7;margin:16px 0 18px}
  .hero-light .hero-stock{max-width:100%;margin:0 0 16px}
  .hero-light .hero-stock b,.hero-light .hero-stock span{font-size:8px;line-height:1.5;padding:8px 10px}
  .hero-light .button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
  .hero-light .button-row .button{width:100%;min-width:0;min-height:48px;padding:12px 14px;font-size:12px;line-height:1.4;justify-content:space-between;box-sizing:border-box}
  .hero-light .trust-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:0}
  .hero-light .trust-row span{font-size:9px;line-height:1.4;padding:6px 10px}
  .hero-light .hero-stats{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
  .hero-light .hero-stats div{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;min-height:0;padding:12px 0 0}
  .hero-light .hero-stats strong{font-size:16px;line-height:1.3;letter-spacing:-.03em}
  .hero-light .hero-stats span{font-size:10px;line-height:1.5}
}
@media(max-width:380px){
  .hero-light .hero-inner{width:calc(100% - 32px)}
  .hero-light .hero-bg{height:210px}
  .hero-light .hero-panel h1{font-size:29px}
  .hero-light .button-row{grid-template-columns:1fr}
  .hero-light .button-row .button{font-size:13px}
}
