/* Product page styling measured against the Transparent Labs Mass Gainer page. */
:root{--accent:#111314;--accent-deep:#1b73b3;--accent-ink:#fff;--ink:#111314;--muted:#676767;--line:#d1d5db;--bg:#fff;--bg-soft:#f8f9fb;--tint:#f8f9fb;--tint-2:#f8f9fb}
body{font:400 16px/1.5 "neue-haas-unica",sans-serif;color:#111314;background:#fff}
h1,h2,h3{font-family:Aeonik,sans-serif;font-weight:600;letter-spacing:-.02em}
.tv-announcement{height:41px;display:flex;align-items:center;justify-content:center;background:#132836;color:#fff;font:400 14px/1 "neue-haas-unica",sans-serif}
.tvh{border-bottom:0;box-shadow:0 2px 4px rgba(17,19,20,.12)}
.tvh-in{max-width:1292px;height:57px;padding-inline:0}
.tvh-logo{font-size:26px}
.tvh-nav{gap:26px}
.tvh-nav a{font-weight:400;font-size:14px;border-bottom-width:1px}
.tvh-nav a:first-child{font-weight:600}
.tvh-bag svg{width:22px;height:22px;stroke-width:1.5}
.hero{padding-top:64px!important;padding-bottom:72px!important}
.hero .wrap{max-width:1292px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;padding-inline:0!important;align-items:start}
.hero .gallery-col{min-width:0;--gallery-radius:16px}
.mobile-gallery{display:none}
.hero .gallery-col>div.shot>img.main:not([src*="unlock-bottle-performance"]){transform:none}
@media(max-width:899px){
  .hero .gallery-col.has-mobile-gallery>.shot{display:none!important}
  .mobile-gallery{position:relative;display:flex;gap:12px;width:100%;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .mobile-gallery::-webkit-scrollbar{display:none}
  .mobile-gallery::after{content:"";flex:0 0 15%}
  .mobile-gallery-slide{flex:0 0 calc(85% - 12px);min-width:0;aspect-ratio:1;overflow:hidden;border-radius:var(--gallery-radius);scroll-snap-align:start;background:#f8f9fb}
  .mobile-gallery-slide img{display:block;width:100%;height:100%;object-fit:contain}
  .mobile-gallery:focus-visible{outline:2px solid #1b73b3;outline-offset:3px}
}
.hero .gallery-col>.shot{border:0!important;border-radius:6px!important;overflow:hidden;box-shadow:none!important;background:#f8f9fb}
.hero .gallery-col>div.shot>img.main,.hero .gallery-col>div.shot>video.main{border:0!important;border-radius:6px!important;background:#f8f9fb!important}
.hero .tstrip{gap:18px;margin-top:30px}
.hero .tstrip .thumb{border:1px solid transparent!important;outline:0!important;border-radius:var(--gallery-radius)!important;padding:0!important;object-fit:contain;background:#f8f9fb;box-shadow:none!important}
.hero .tstrip .thumb.on{border:1px solid rgba(17,19,20,.32)!important;outline:0!important}
.hero .tstrip .thumb:focus-visible{outline:2px solid #1b73b3!important;outline-offset:2px!important}
.hero .buy{display:flex;flex-direction:column;min-width:0}
.hero .buy h1{order:1;font:600 40px/1.2 Aeonik,sans-serif!important;letter-spacing:-.02em!important;margin:0 0 12px!important;color:#111314}
.hero .buy h1 .h1-sub{display:block!important;font:400 17px/1.35 "neue-haas-unica",sans-serif!important;letter-spacing:0!important;color:#676767!important;margin-top:5px!important}
.hero .buy .social{order:2;margin:0 0 22px;font-size:14px;line-height:1.3;color:#676767;gap:7px}
.hero .buy .social .faces,.hero .buy .social .who,.hero .buy .social .soc-div{display:none}
.hero .buy .vsub.vbyline{order:3;font:400 18px/1.4 "neue-haas-unica",sans-serif!important;letter-spacing:0!important;color:#676767!important;margin:0 0 22px!important}
.hero .buy .vquad{order:4;display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px 24px!important;margin:0 0 24px!important;padding:0!important}
.hero .buy .vquad li{display:flex!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;gap:9px!important;border:0!important;padding:0!important;min-height:26px!important}
.hero .buy .vquad .vic{display:flex!important;align-items:center!important;justify-content:center!important;width:24px!important;height:24px!important;min-width:24px!important;margin:0!important;padding:0!important;border:0!important;background:none!important;border-radius:0!important;color:#111314!important}
.hero .buy .vquad .vic svg{width:21px!important;height:21px!important;stroke:#111314!important}
.hero .buy .vquad .vic svg circle[fill="#ee583a"]{fill:#1b73b3}
.hero .buy .vquad b{font:400 14px/1.3 "neue-haas-unica",sans-serif!important;letter-spacing:0!important;color:#111314!important}
.hero .buy .vquad br{display:none}
.hero .buy form{order:5}
.hero .buy h2.section{font:400 14px/1.3 "neue-haas-unica",sans-serif!important;color:#676767;margin:0 0 10px}
.hero .buy .tiles{gap:10px!important;margin:0 0 18px!important}
.hero .buy .tiles .tile{border:1px solid #d1d5db!important;border-radius:6px!important;background:#fff!important;box-shadow:none!important;min-height:100px!important;padding:12px 16px!important;transition:border-color .18s,background-color .18s}
.hero .buy .tiles .tile:hover{border-color:#111314!important}
.hero .buy .tiles .tile.on{border:1px solid #111314!important;background:#f8f9fb!important;box-shadow:none!important}
.hero .buy .tiles .tile .tile-products{width:76px!important;max-width:76px!important;height:74px!important;margin:0!important}
.hero .buy .tiles .tile .tile-body>b{font:600 17px/1.25 Aeonik,sans-serif!important;color:#111314!important;letter-spacing:-.01em!important}
.hero .buy .tiles .tile .tile-day{font:600 20px/1.15 Aeonik,sans-serif!important;color:#111314!important}
.hero .buy .tiles .tile .tile-supply{font:400 13px/1.3 "neue-haas-unica",sans-serif!important;color:#676767!important}
.hero .buy .tiles .tile .tile-money s{font-size:13px}
.hero .buy .tiles .tile .tile-save{font:500 13px/1.2 "neue-haas-unica",sans-serif!important;color:#1b73b3!important}
.hero .buy .tiles .tile .tile-tag{font:600 13px/1.2 "neue-haas-unica",sans-serif;letter-spacing:.02em;text-transform:none;background:#173446;color:#fff;padding:7px 10px;border-radius:4px}
.hero .buy .tiles .tile .pop{right:12px;top:-10px;padding:4px 9px;border-radius:3px;background:#173446;box-shadow:none!important;font:500 11px/1 "neue-haas-unica",sans-serif;letter-spacing:0;text-transform:none}
.hero .buy .autoship #atc,.hero #atc{border-radius:6px!important;min-height:56px!important;box-shadow:none!important;background:#111314!important;color:#fff!important;font:400 16px/1.2 "neue-haas-unica",sans-serif!important;letter-spacing:0!important;text-transform:none!important}
.hero #atc:hover{background:#173446!important}
.hero .buy .autoship .assure{font-weight:400;color:#676767}
/* The same restrained border system applies to supporting content. */
.plan,.how-card,.icard,.dont,.gcard,.survey .card,.faq-item{border-radius:6px}
button:focus-visible,a:focus-visible{outline:2px solid #1b73b3;outline-offset:2px}
@media(max-width:1399px){.tvh-in,.hero .wrap{margin-inline:5.1%;max-width:none}.hero .wrap{gap:4%}}
@media(max-width:899px){.tv-announcement{height:36px;font-size:12px}.tvh-in{margin:0;padding-inline:18px;height:60px}.hero{padding-top:22px!important}.hero .wrap{display:block!important;margin:0!important;padding-inline:18px!important}.hero .gallery-col{margin:0!important}.hero .gallery-col>.shot{aspect-ratio:1}.hero .buy{margin-top:24px}.hero .tstrip{margin-top:12px;gap:9px}.hero .buy h1{font-size:34px!important}.hero .buy .vsub.vbyline{font-size:16px!important}}
@media(max-width:620px){.hero .wrap{padding-inline:16px!important}.hero .buy h1{font-size:30px!important}.hero .buy h1 .h1-sub{font-size:15px!important}.hero .buy .vquad{gap:9px 14px!important}.hero .buy .vquad b{font-size:12px!important}.hero .buy .tiles .tile{min-height:92px!important;padding:12px!important}.hero .buy .tiles .tile .tile-products{width:58px!important;max-width:58px!important;height:62px!important}.hero .buy .tiles .tile .tile-body>b{font-size:15px!important}.hero .buy .tiles .tile .tile-day{font-size:17px!important}.hero .buy .tiles .tile .pop{right:8px}}
/* Keep purchase controls after the product details at every breakpoint. */
.hero .buy h1{order:1!important}
.hero .buy .social{order:2!important}
.hero .buy .vsub.vbyline{order:3!important}
.hero .buy .vquad{order:4!important}
.hero .buy form{order:5!important}
.hero .buy .autoship{order:6!important}
.hero .buy .vquad li{flex-direction:row!important}
.hero .buy .vquad b br{display:inline!important}
.hero .gallery-col>div.shot>img.main{transform:none}

/* Reference review blue; no separator lines in the benefit list. */
.vstars,.stars{color:#1b73b3!important}
.hero .buy .vquad li::before{content:none!important;display:none!important}
/* Continue the same type and surface system below the purchase area. */
.fstrip{background:#173446}
.fstrip li{font-family:"neue-haas-unica",sans-serif;font-weight:500;letter-spacing:.02em}
.loved,.expect,#expect{background:#f8f9fb}
.loved h2,.loved h2 .ring,#routine .h2,#expect .h2,#cellsci h2,#facts h2,#guarantee h2{font-family:Aeonik,sans-serif!important;font-size:clamp(32px,3vw,40px)!important;font-weight:600!important;line-height:1.2!important;letter-spacing:-.02em!important}
.loved h2 .ring{border-width:1px!important;padding:3px 18px}
#routine .sub,#expect .sub,#cellsci .sub,#facts .sub,#guarantee .sub{font:400 16px/1.6 "neue-haas-unica",sans-serif!important;color:#676767!important}
#routine .gw-step h3,#routine .gw-step b{font-weight:600}
.vshot,.gw-art,.rw,.cellsci-card,.survey-photo,.icard,.how-card,.gcard,.dont{border-radius:6px!important}
.rw,.cellsci-card,.icard,.plan{border-width:1px!important;box-shadow:none!important}
.sticky .pill,.sec-cta .pill{border-radius:6px!important;font-weight:400!important;box-shadow:none!important}
@media(max-width:899px){
  .hero .wrap>.autoship{display:flex!important;flex-direction:column;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;padding:0!important;margin:16px 0 0!important;width:100%!important}
  .hero .wrap>.autoship .ship-row-sel,.hero .wrap>.autoship .perks{display:none!important}
  .hero .wrap>.autoship #atc{display:flex!important;width:100%;justify-content:center;align-items:center}
  .hero .wrap>.autoship .assure{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:#676767}
}
/* Offer rows select a quantity; the single button below them submits it. */
.hero .buy .tiles .tile .tile-cta{display:none!important}
/* Match framing and corners throughout the gallery. */
.hero .gallery-col>.shot{border-radius:var(--gallery-radius)!important}
.hero .gallery-col>div.shot>img.main,.hero .gallery-col>div.shot>video.main{border-radius:var(--gallery-radius)!important}
/* Make the selected supply easier to spot without changing card layout. */
.hero .buy .tiles .tile.on{border:2px solid #111314!important;box-shadow:0 0 0 2px rgba(17,19,20,.09)!important}
.hero .buy .tiles .tile.on .tile-radio{border-color:#111314!important}
.hero .buy .tiles .tile:has(.tile-tag){background:#f8f9fb!important}
.hero .buy .tiles .tile.on:has(.tile-tag){background:#edf4f9!important}
.hero .buy .tiles .tile:has(.tile-tag) .tile-products{width:90px!important;max-width:90px!important;height:88px!important}
@media(max-width:620px){.hero .buy .tiles .tile:has(.tile-tag) .tile-products{width:68px!important;max-width:68px!important;height:74px!important}.hero .buy .tiles .tile .tile-tag{font-size:12px;padding:6px 9px}}
/* The gallery stays in view while the purchase details move alongside it. */
@media(min-width:900px){
  .hero .wrap>.gallery-col{position:sticky!important;top:112px!important;align-self:start!important;height:auto!important;min-height:0!important}
  .hero .wrap>.gallery-col>.shot{flex:none!important;aspect-ratio:1 / 1!important;height:auto!important}
}
.product-details{margin-top:28px;border-top:1px solid #d1d5db}
.product-detail{border-bottom:1px solid #d1d5db}
.product-detail summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:56px;padding:16px 0;cursor:pointer;color:#111314;font:500 16px/1.4 "neue-haas-unica",sans-serif}
.product-detail summary::-webkit-details-marker{display:none}
.product-detail summary::after{content:"+";flex:none;color:#111314;font:300 24px/1 "neue-haas-unica",sans-serif}
.product-detail[open] summary::after{content:"−"}
.product-detail summary:focus-visible{outline:2px solid #1b73b3;outline-offset:2px}
.product-detail-answer{padding:0 24px 18px 0;color:#676767;font:400 15px/1.6 "neue-haas-unica",sans-serif}
.product-detail-answer p{margin:0}
@media(max-width:899px){.product-details{margin-top:24px}.product-detail summary{min-height:54px}}
@media(min-width:900px) and (max-height:820px){
  .hero .wrap>.gallery-col{top:70px!important;width:min(100%,calc(100dvh - 215px))}
}
/* Timeline-style rating link and review sheet, using TrueVita's existing testimonials. */
.review-trigger{padding:0;border:0;background:none;color:#111314;font:400 14px/1.35 "neue-haas-unica",sans-serif;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
.review-trigger:hover{color:#1b73b3}
.review-trigger:focus-visible,.review-dialog-close:focus-visible{outline:2px solid #1b73b3;outline-offset:3px}
.review-dialog{position:fixed;inset:0 0 0 auto;width:min(1192px,calc(100vw - 248px));max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:#fff;color:#111314;box-shadow:-8px 0 32px rgba(17,19,20,.12);overflow:auto;font:400 16px/1.5 "neue-haas-unica",sans-serif}
.review-dialog::backdrop{background:rgba(17,19,20,.22)}
.review-dialog-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:105px;padding:26px 60px;background:#fff;border-bottom:1px solid #d1d5db}
.review-dialog-head>div{display:flex;align-items:baseline;gap:16px}
.review-kicker{font-weight:600}
.review-dialog-head h2{margin:0;font:400 16px/1.3 "neue-haas-unica",sans-serif;letter-spacing:0}
.review-dialog-close{display:grid;place-items:center;width:36px;height:36px;border:0;background:none;color:#111314;font:300 30px/1 "neue-haas-unica",sans-serif;cursor:pointer}
.review-dialog-content{display:grid;grid-template-columns:minmax(250px,310px) minmax(0,1fr);gap:58px;padding:58px 60px}
.review-dialog-summary{align-self:start;position:sticky;top:140px}
.review-metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.review-metrics strong{display:block;font:400 48px/1 Aeonik,sans-serif;letter-spacing:-.04em}
.review-metrics strong span{display:inline-block;margin-left:4px;font:400 16px/1 "neue-haas-unica",sans-serif;letter-spacing:0;vertical-align:baseline}
.review-metrics p{margin:8px 0 0;font:400 16px/1.4 Georgia,serif}
.review-breakdown{display:grid;gap:11px;margin-top:40px}
.review-breakdown-row{display:grid;grid-template-columns:12px minmax(0,1fr) 36px;align-items:center;gap:12px;font-size:14px;line-height:1.2}
.review-breakdown-row>span:last-child{text-align:right}
.review-breakdown-track{height:6px;background:#e5e8ea;border-radius:10px;overflow:hidden}
.review-breakdown-track span{display:block;height:100%;background:#1b73b3;border-radius:10px}
.review-dialog-main h3{margin:0 0 28px;font:600 20px/1.2 Aeonik,sans-serif}
.review-entry{display:grid;grid-template-columns:minmax(130px,190px) minmax(0,1fr);gap:28px;padding:28px 0;border-top:1px dotted #9da5aa}
.review-entry[hidden]{display:none}
.review-entry-meta{display:flex;flex-direction:column;gap:8px}
.review-entry-stars{color:#1b73b3;letter-spacing:2px;font-size:17px;line-height:1}
.review-entry-meta strong{font-size:14px;font-weight:500}
.review-entry-date{color:#676767;font-size:13px}
.review-pagination{display:flex;align-items:center;justify-content:flex-end;gap:20px;margin-top:24px;padding-top:24px;border-top:1px solid #d1d5db;font-size:14px}
.review-pagination button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #111314;border-radius:50%;background:#fff;color:#111314;font:400 22px/1 "neue-haas-unica",sans-serif;cursor:pointer}
.review-pagination button:hover:not(:disabled){background:#111314;color:#fff}
.review-pagination button:disabled{opacity:.35;cursor:default}
.review-pagination button:focus-visible{outline:2px solid #1b73b3;outline-offset:3px}
.review-entry-body h4{margin:0 0 10px;font:600 17px/1.3 Aeonik,sans-serif}
.review-entry-body p{margin:0;color:#676767;font-size:16px;line-height:1.55}
.review-purchase{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:16px;margin-top:22px;padding:14px 16px;border-radius:12px;background:#f7f7f7}
.review-purchase img{width:82px;height:68px;object-fit:contain}
.review-purchase>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.review-purchase strong{font:600 16px/1.3 Aeonik,sans-serif}
.review-purchase b{margin-top:2px;color:#16774c;font:600 18px/1.25 Aeonik,sans-serif}
.review-purchase span{margin-top:5px;color:#333;font-size:14px;line-height:1.35}
@media(max-width:899px){.review-dialog{width:100vw}.review-dialog-head{min-height:72px;padding:18px 20px}.review-dialog-content{grid-template-columns:1fr;gap:28px;padding:28px 20px}.review-dialog-summary{position:static}.review-metrics{max-width:350px}.review-entry{grid-template-columns:1fr;gap:12px}.review-entry-meta{flex-direction:row;align-items:center;gap:12px}}
/* Give the product descriptor a clearer second level in the heading. */
.hero .buy h1 .h1-sub{font:500 20px/1.3 "neue-haas-unica",sans-serif!important;color:#173446!important;margin-top:8px!important}
@media(max-width:620px){.hero .buy h1 .h1-sub{font-size:17px!important}}
/* Match the Transparent Labs benefit section's actual grid, type, spacing and images. */
.loved{background:#fff}
#routine .gw-eyebrow{font:500 12px/1.4 "neue-haas-unica",sans-serif;letter-spacing:.12em;color:#173446;margin-bottom:14px}
#routine .gw-intro .h2{max-width:none;font-size:clamp(28px,3vw,40px)!important;line-height:1.18!important;text-wrap:initial}
#routine .gw-title-line{display:block}
#routine .gw-title-line.hl{color:#173446}
.mass-benefits{background:#f8f9fb;color:#111314;padding:88px 0}
.mass-benefits-inner{max-width:1292px;margin:auto;padding:0 24px;display:grid;grid-template-columns:1fr 2fr;gap:32px;align-items:start}
.mass-benefits-heading{max-width:500px;display:flex;flex-direction:column;gap:16px;text-align:left}
.mass-benefits-heading h2{margin:0;font:700 40px/1.2 Aeonik,sans-serif;letter-spacing:-.02em}
.mass-benefits-heading p{margin:0;color:#676767;font:400 18px/1.3 "neue-haas-unica",sans-serif}
.mass-benefits-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;width:100%}
.mass-benefit{display:flex;flex-direction:column;justify-content:space-between;min-width:0;height:100%;background:#fff;border-radius:6px;overflow:hidden}
.mass-benefit-copy{padding:12px 16px}
.mass-benefit h3{margin:0 0 4px;font:600 20px/1.3 Aeonik,sans-serif;letter-spacing:0}
.mass-benefit p{margin:0;color:#676767;font:400 14px/1.3 "neue-haas-unica",sans-serif}
.mass-benefit img{display:block;width:100%;height:180px;object-fit:cover}
@media(max-width:1023px){.mass-benefits-inner{display:flex;flex-direction:column;gap:32px}.mass-benefits-heading{margin-bottom:0}.mass-benefits-grid{gap:48px}}
@media(max-width:767px){.mass-benefits{padding:48px 0}.mass-benefits-inner{gap:32px;padding:0 16px}.mass-benefits-heading{gap:8px}.mass-benefits-heading h2{font-size:28px}.mass-benefits-heading p{font-size:16px}.mass-benefits-grid{display:flex;flex-direction:column;gap:40px}.mass-benefit-copy{padding:12px}.mass-benefit img{height:140px}}