
:root{--compact-height:0px;--masthead-height:80px}.reading-layout{grid-template-columns:245px minmax(0,1fr);gap:55px;padding-top:45px}.product-directory{position:sticky;top:calc(var(--masthead-height) + var(--compact-height) + 20px);align-self:start;max-height:calc(100dvh - var(--masthead-height) - var(--compact-height) - 40px);overflow:auto;scrollbar-width:thin;padding-right:10px}.product-directory .eyebrow{margin-bottom:20px}.product-directory a{display:block;font-size:14px;line-height:1.4;padding:13px 14px;border-bottom:1px solid var(--line)}.product-directory a:hover{color:var(--red);background:#faf5f6}.product-directory a[aria-current]{background:var(--red);color:#fff}.product-tabs{position:sticky;top:calc(var(--masthead-height) + var(--compact-height));z-index:15;display:flex;flex-wrap:wrap;gap:1px;background:var(--line);padding:1px;margin-bottom:30px}.product-tabs button{border:0;background:#f7f8f6;color:var(--ink);padding:15px 18px;flex:1 1 auto;font-size:14px;cursor:pointer}.product-tabs button[aria-selected=true]{background:var(--red);color:white}.reading-section[hidden]{display:none!important}.reading-section{margin-bottom:25px;scroll-margin-top:220px}.compact-product{position:fixed;left:0;right:0;top:var(--masthead-height);z-index:25;background:white;border-bottom:1px solid var(--line);box-shadow:0 4px 16px #20252208}.compact-product[hidden]{display:none}.compact-product-inner{padding:14px 0;display:flex;align-items:center;gap:25px}.compact-product-name{font-family:"Futura Bold",Futura,sans-serif;font-weight:700;font-size:27px;line-height:1.2}.compact-product-name .registered-mark{vertical-align:baseline;top:-1.35em}.compact-product-inner p{font-size:13px;color:var(--muted);line-height:1.4;margin:0}.reading-head{padding-bottom:18px;margin-bottom:22px}.reading-head .eyebrow{display:none}@media(max-width:760px){.reading-layout{display:block;padding-top:25px}.product-directory{position:static;max-height:200px;margin-bottom:30px;padding:0;border:1px solid var(--line)}.product-directory .eyebrow{padding:14px;margin:0}.product-directory nav{display:grid;grid-template-columns:1fr 1fr}.product-directory a{font-size:12px}.compact-product-inner{display:block;padding:12px 0}.compact-product-name{font-size:20px}.compact-product-inner p{font-size:11px;margin-top:5px}.product-tabs{flex-wrap:nowrap;overflow:auto}.product-tabs button{flex:0 0 auto;padding:14px;font-size:13px}.reading-section{scroll-margin-top:200px}}@media print{.product-directory,.product-tabs,.compact-product{display:none}.reading-section[hidden]{display:block!important}}

/* Opaque header layers keep scrolling content underneath. */
.masthead{background:#fff;z-index:40}.compact-product{background:#fff;z-index:35}.product-tabs{z-index:30}

/* Extend the opaque compact-header backing up to the viewport edge. */
.compact-product::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:100vh;background:#fff;pointer-events:none}

.product-heading-actions{display:flex;flex-direction:column;gap:25px;flex-shrink:0;max-width:42%}.product-badges{display:flex;align-items:center;justify-content:flex-end;gap:24px}.product-badges img{width:90px;height:94px;object-fit:contain}.product-heading-actions .product-tools{justify-content:flex-end}@media(max-width:760px){.product-heading-actions{max-width:100%;margin-top:26px;gap:18px}.product-badges,.product-heading-actions .product-tools{justify-content:flex-start}.product-badges img{width:75px;height:78px}.product-heading-actions .product-tools{margin-top:0}}

.product-heading-actions .product-badges{justify-content:space-between;gap:36px}.product-heading-actions .product-tools{justify-content:flex-start}.product-heading-actions{gap:28px}

/* Optical alignment for the different SVG artwork bounds. */
.product-badges img[src$="/triple.svg"]{transform:translateY(7px)}

.compact-product-inner{flex-wrap:wrap}.compact-product-badges{margin-left:auto;gap:18px;flex-shrink:0}.compact-product-badges img{width:42px;height:44px}.compact-product-badges img[src$="/triple.svg"]{transform:translateY(3px)}@media(max-width:760px){.compact-product-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}.compact-product-name{grid-column:1;grid-row:1}.compact-product-inner p{grid-column:1;grid-row:2}.compact-product-badges{grid-column:2;grid-row:1 / span 2;gap:10px;align-self:center}.compact-product-badges img{width:32px;height:34px}}

.product-ultracell-vi .product-heading-actions .product-badges{justify-content:flex-end}

.product-heading-actions .product-badges img[src$="/sello-5g.svg"]{width:120px;height:124px}.compact-product-badges img[src$="/sello-5g.svg"]{width:56px;height:58px}@media(max-width:760px){.product-heading-actions .product-badges img[src$="/sello-5g.svg"]{width:100px;height:104px}.compact-product-badges img[src$="/sello-5g.svg"]{width:43px;height:45px}}

/* Cropped SVG now uses the same layout footprint as the 4G seal. */
.product-heading-actions .product-badges img[src*="/sello-5g.svg"]{width:90px;height:94px}.compact-product-badges img[src*="/sello-5g.svg"]{width:42px;height:44px}@media(max-width:760px){.product-heading-actions .product-badges img[src*="/sello-5g.svg"]{width:75px;height:78px}.compact-product-badges img[src*="/sello-5g.svg"]{width:32px;height:34px}}

/* Start the directory alongside the product heading; align the heading with its tabs and copy. */
.reading-layout{padding-top:0}
.reading-content>.product-heading{align-items:center;flex-wrap:wrap;gap:24px;margin-bottom:38px}
.reading-content>.product-heading>div:first-child{flex:1 1 360px;min-width:0}
.reading-content>.product-heading h1{font-size:clamp(42px,5vw,72px)}
.reading-content>.product-heading h1.long-name{font-size:clamp(36px,3.8vw,56px)}
.reading-content>.product-heading .product-heading-actions{max-width:100%;margin-left:auto}
@media(max-width:760px){
 .reading-content>.product-heading h1{font-size:clamp(36px,9vw,60px)}
 .reading-content>.product-heading h1.long-name{font-size:clamp(32px,8vw,48px)}
 .reading-content>.product-heading .product-heading-actions{margin-left:0}
}

/* Human Ultracell VII: smaller generation marker and variant on its own line. */
.product-heading h1 .product-generation,
.compact-product-name .product-generation{font-size:.72em;letter-spacing:inherit;margin-left:0;vertical-align:baseline;white-space:nowrap}
.product-heading h1 .product-variant,
.compact-product-name .product-variant{display:block;font-size:.62em;line-height:1.2;letter-spacing:-.02em;margin:8px 0 0;vertical-align:baseline}
.compact-product-name .product-variant{margin-top:3px}

/* Product pages start directly with the directory and heading. */
main>.reading-layout{padding-top:45px}
@media(max-width:760px){main>.reading-layout{padding-top:25px}}

/* Emphasize the therapy subtitle without changing its size. */
.product-heading .product-line{font-weight:700;color:#000}

/* Match the generation numeral to the Human Ultracell packaging. */
.product-heading h1 .product-generation,
.compact-product-name .product-generation{font-family:"Times New Roman",Times,serif;font-weight:700;-webkit-text-stroke:.3px currentColor}

/* Tighten spacing between the product name and its generation numeral. */
.product-heading h1 .product-generation,
.compact-product-name .product-generation{margin-left:.1em}

/* Side-by-side packaging photo and rotating product video. */
.packaging-showcase{align-items:center;background:#fff}
.packaging-showcase .packaging-video,.packaging-showcase .packaging-photo-slot img{display:block;width:100%;height:auto;max-height:540px;aspect-ratio:1;object-fit:contain;background:#fff}
.packaging-showcase .packaging-photo-slot[hidden]{display:none}
.packaging-showcase:has(.packaging-photo-slot[hidden]) .packaging-video{grid-column:2}
@media(max-width:760px){.packaging-showcase{grid-template-columns:1fr}.packaging-showcase:has(.packaging-photo-slot[hidden]) .packaging-video{grid-column:1}}

/* Keep long tab labels on two deliberate lines. */
.product-tabs .tab-label-line{display:block;white-space:nowrap;line-height:1.35}

.mechanism-intro-video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000;margin:0 0 32px}

/* Visible mechanism text flows around the accompanying video. */
.mechanism-flow{display:flow-root}
.mechanism-flow .mechanism-intro-video{float:right;width:46%;margin:6px 0 24px 28px;aspect-ratio:16/9}
.mechanism-subheading{font-size:20px;line-height:1.4;margin:0 0 20px;font-weight:600}
.mechanism-copy-section{margin-bottom:28px}
.mechanism-flow .copy{display:block}
@media(max-width:760px){.mechanism-flow .mechanism-intro-video{float:none;width:100%;margin:20px 0}.mechanism-flow .copy{display:flex;flex-direction:column}.mechanism-flow .mechanism-intro-video{order:1}}

/* Match the VII presentation frame to the packaging photograph. */
.human-ultracell-packaging .packaging-video,
.human-ultracell-packaging .packaging-photo-slot img{aspect-ratio:3/2;width:100%;height:auto;max-height:none;object-fit:contain}
