/* Unified color roles. Shell styling lives only in shared/shell.css. */
.product-center-page { --chapter-header: 94px; --chapter-gap: 18px; --chapter-ice: var(--apex-surface-subtle); }
html:has(.product-center-page) { scroll-padding-top: 94px; }
.product-center-page .product-chapter[id], .product-center-page .product-overview[id] { scroll-margin-top: 0px; }
.product-overview { padding: 70px var(--pad) 76px; scroll-margin-top: var(--chapter-header); }
.overview-cards { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; }
.overview-cards > a { padding: 28px; border-radius: 12px; background: var(--chapter-ice); transition: transform 0.35s, box-shadow 0.35s; }
.overview-cards h2 { font-size: clamp(26px, 2.5vw, 42px); margin-bottom: 12px; }
.overview-cards p { color: var(--body); }
.round-arrow, .chapter-nav span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--apex-surface-subtle); color: var(--navy); font-size: 25px; font-style: normal; transition: background 0.25s, color 0.25s; }
.overview-cards > a:hover .round-arrow { color: var(--apex-text-inverse); background: var(--navy); }
.overview-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; margin-top: 80px; align-items: start; }
.overview-intro h2 { font-size: clamp(36px, 3.5vw, 62px); line-height: 1.22; }
.overview-intro > p { font-size: clamp(19px, 1.7vw, 28px); color: var(--body); }
.product-center-page .product-chapter { height: calc(100svh - var(--chapter-header)); min-height: 620px; padding: 12px var(--pad) 30px; display: flex; flex-direction: column; gap: var(--chapter-gap); scroll-margin-top: var(--chapter-header); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--apex-surface-default); }
.chapter-nav { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; flex: 0 0 80px; position: static; }
.product-modules { position: relative; }
.product-nav-rail { position: sticky; top: var(--chapter-header); z-index: 35; padding: 12px var(--pad) 0; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--apex-header-glass); backdrop-filter: blur(16px) saturate(135%); }
.product-nav-global { position: relative !important; top: auto !important; }
.product-center-page .product-chapter > .chapter-nav, .product-center-page .pump-story > .chapter-nav, .product-center-page .chapter-transition > .chapter-nav { display: none; }
.chapter-nav > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--chapter-ice); border-radius: 12px; font-size: clamp(18px, 1.5vw, 26px); }
.chapter-nav.is-inactive { visibility: hidden; opacity: 0; pointer-events: none; }
.chapter-nav span { width: 36px; height: 36px; flex-shrink: 0; font-size: 23px; }
.chapter-nav [aria-current] span, .chapter-nav > a:hover span { background: var(--navy); color: var(--apex-text-inverse); }
.pump-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; flex: 1 1 0%; min-height: 0px; }
.pump-card { display: flex; flex-direction: column; min-height: 0px; background: var(--chapter-ice); border-radius: 14px; padding: 30px; }
.pump-heading h2 { font-size: clamp(32px, 3vw, 52px); margin-bottom: 10px; }
.pump-heading p { margin-bottom: 8px; color: var(--body); }
.pump-heading .eyebrow { margin-bottom: 8px; }
.pump-photo { flex: 1 1 0%; min-height: 0px; display: flex; align-items: center; justify-content: center; padding: 18px; }
.pump-photo img { width: 100%; height: 100%; max-height: 330px; object-fit: contain; mix-blend-mode: multiply; }
.pump-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pump-tabs { display: flex; gap: 8px; }
.pump-tabs button { border-width: 1px; border-style: solid; border-top-color: var(--apex-border-control); border-right-color: var(--apex-border-control); border-bottom-color: var(--apex-border-control); border-left-color: var(--apex-border-control); border-image: none; border-radius: 7px; background: transparent; padding: 8px 14px; cursor: pointer; }
.pump-tabs [aria-pressed="true"] { background: var(--navy); color: var(--apex-text-inverse); border-color: var(--navy); }
.pump-story { min-height: calc(100svh - var(--chapter-header)); padding: 12px var(--pad) 30px; display: flex; flex-direction: column; gap: var(--chapter-gap); background-image: linear-gradient(90deg, var(--apex-surface-subtle), var(--apex-surface-subtle)), url("../assets/optimized/hero-combo-pumps-v1-1600.webp"); background-position: center center; background-size: initial, cover; background-repeat: initial, no-repeat; background-attachment: initial, initial; background-origin: initial, initial; background-clip: initial, initial; background-color: initial; }
.pump-story > .chapter-nav { position: sticky; top: calc(var(--chapter-header) + 6px); z-index: 35; }
.pump-story > .transition-copy { align-self: center; text-align: center; justify-items: center; max-width: 980px; }
.pump-story h2 { font-size: clamp(40px, 4.8vw, 82px); line-height: 1.35; margin-bottom: 28px; }
.pump-story p:not(.eyebrow) { font-size: 22px; color: var(--body); margin-bottom: 32px; }
.chapter-transition { min-height: calc(100svh - var(--chapter-header)); padding: 12px var(--pad) 30px; display: flex; flex-direction: column; gap: var(--chapter-gap); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--apex-surface-default); scroll-margin-top: var(--chapter-header); }
.transition-copy { flex: 1 1 0%; display: grid; place-content: center; justify-items: start; max-width: 900px; padding: 40px 0px 80px; }
.transition-copy h2 { font-size: clamp(46px, 5.6vw, 92px); line-height: 1.18; margin: 10px 0px 24px; }
.transition-copy p:not(.eyebrow) { max-width: 650px; color: var(--body); font-size: clamp(19px, 1.8vw, 28px); line-height: 1.65; margin-bottom: 28px; }
.infusion-display { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; flex: 1 1 0%; min-height: 0px; }
.infusion-tabs { display: grid; grid-template-rows: repeat(3, 1fr); }
.infusion-tabs button { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 10px; padding: 20px 6px; border-width: 1px 0px 0px; border-style: solid none none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: none; border-top-color: var(--apex-border-control); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--apex-surface-default); color: var(--apex-text-muted); cursor: pointer; }
.infusion-tabs button:last-child { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--apex-border-control); }
.infusion-tabs strong { font-size: clamp(26px, 2.5vw, 44px); font-weight: 400; line-height: 1.3; }
.infusion-tabs span { font-size: 22px; }
.infusion-tabs [aria-pressed="true"] { color: var(--ink); }
.infusion-photo { display: flex; flex-direction: column; min-height: 0px; border-radius: 16px; background: var(--chapter-ice); padding: 28px; }
.infusion-photo img { flex: 1 1 0%; min-height: 0px; width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.infusion-caption { padding-top: 18px; }
.infusion-caption p { color: var(--body); font-size: 16px; margin-bottom: 12px; }
.product-center-page .finder-chapter .finder { padding: 24px 28px; min-height: 0px; flex: 1 1 0%; display: flex; flex-direction: column; background: var(--ice); border-radius: 14px; }
.product-center-page .finder-head { margin-bottom: 18px; gap: 30px; align-items: end; }
.product-center-page .finder-head h2 { font-size: clamp(30px, 3vw, 48px); margin: 0px; }
.finder-chapter .finder-head .eyebrow, .finder-chapter .selector-note { display: none; }
.finder-chapter .finder-head p { font-size: 14px; margin: 0px; }
.product-center-page .finder-chapter .selector-shell { flex: 1 1 0%; min-height: 0px; }
.product-center-page .finder-chapter .filter-panel, .product-center-page .finder-chapter .result-panel { padding: 24px 30px; min-height: 0px; }
.finder-chapter .filter-panel h3 { font-size: 27px; margin: 0px; }
.finder-chapter .filter-panel > p { margin: 0px 0px 12px; font-size: 14px; }
.finder-chapter .filter-group { margin: 0px; padding: 10px 0px; }
.product-center-page .finder-chapter .choice { min-height: 34px; padding: 5px 12px; }
.product-center-page .finder-chapter .result-code { font-size: clamp(58px, 5vw, 86px); }
.product-center-page .support-chapter .support { padding: 0px; flex: 1 1 0%; min-height: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--apex-surface-default); }
.support-chapter .support-head, .support-chapter .support-contact { display: none; }
.product-center-page .support-chapter .support-grid { height: 100%; gap: 22px; }
.product-center-page .support-chapter .support-card { display: flex; flex-direction: column; background: var(--chapter-ice); border-radius: 14px; overflow: hidden; min-height: 0px; }
.product-center-page .support-chapter .support-card-visual { height: 58%; min-height: 0px; padding: 25px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--apex-surface-product); }
.support-chapter .support-card-visual img { width: 100%; height: 100%; object-fit: contain; }
.product-center-page .support-chapter .support-card-copy { flex: 1 1 0%; padding: 28px 28px 76px; }
.support-chapter .support-card-copy h3 { font-size: clamp(26px, 2.5vw, 42px); margin-bottom: 10px; }
.support-chapter .support-card-copy .eyebrow { display: none; }
.product-center-page .support-chapter .support-card-arrow { left: 28px; right: auto; bottom: 24px; }
.product-center-page .product-chapter a:focus-visible, .product-chapter button:focus-visible, .overview-cards a:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
@media (hover: hover) {
.overview-cards:has(a:hover) > a, .support-grid:has(.support-card:hover) > .support-card { transform: scale(0.98); }
.overview-cards:has(a:hover) > a:hover, .product-center-page .support-grid:has(.support-card:hover) > .support-card:hover { transform: translateY(-10px) scale(0.98); }
}
@media (max-width: 900px) {
.product-center-page { --chapter-header: 74px; }
.product-center-page .product-chapter { height: auto; min-height: 0px; padding: 14px 20px 40px; }
.product-nav-rail { top: var(--chapter-header); padding: 10px 20px 0px; }
.chapter-nav { flex-basis: auto; gap: 8px; }
.chapter-nav > a { font-size: 14px; padding: 12px 10px; gap: 5px; }
.chapter-nav span { width: 26px; height: 26px; font-size: 19px; }
.product-center-page .product-chapter > .chapter-nav, .chapter-transition > .chapter-nav { top: calc(var(--chapter-header) + 4px); }
.pump-grid { grid-template-columns: 1fr; }
.pump-card { min-height: 480px; padding: 24px; }
.pump-photo { height: 240px; flex: 1 1 auto; }
.pump-bottom .btn { padding: 10px 16px; }
.infusion-display { grid-template-columns: 1fr; }
.infusion-tabs { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 10px; }
.infusion-tabs strong { font-size: 18px; }
.infusion-tabs span { font-size: 15px; }
.infusion-tabs button { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--apex-border-control); padding: 12px 0px; }
.infusion-photo img { height: 280px; flex: 1 1 auto; }
.overview-cards { grid-template-columns: 1fr; }
.overview-intro { grid-template-columns: 1fr; gap: 12px; margin-top: 45px; }
.product-overview { padding: 40px 20px; }
.pump-story { min-height: 600px; }
.pump-story h2 { font-size: 38px; }
.chapter-transition { min-height: 600px; padding: 14px 20px 40px; }
.transition-copy { padding: 30px 0px 60px; }
.transition-copy h2 { font-size: 44px; }
.transition-copy p:not(.eyebrow) { font-size: 18px; }
.product-center-page .finder-chapter .finder { padding: 20px 14px; }
.product-center-page .finder-chapter .selector-shell { display: grid; grid-template-columns: 1fr; }
.finder-chapter .result-panel { min-height: 430px !important; }
.product-center-page .finder-head { grid-template-columns: 1fr; gap: 16px; }
.product-center-page .support-chapter .support-grid { grid-template-columns: 1fr; height: auto; }
.product-center-page .support-chapter .support-card-visual { height: 320px; }
.product-center-page .support-chapter .support-card-copy { min-height: 210px; }
}
@media (max-width: 760px) {
html:has(.product-center-page) { scroll-padding-top: 74px; }
}
@media (prefers-reduced-motion: reduce) {
.overview-cards > a, .support-card, .round-arrow, .chapter-nav span { transition: none !important; transform: none !important; }
}