/* ==========================================================================
   Pollen Healthcure — page components (light theme). Loaded on every page.
   ========================================================================== */
html, body { overflow-x: clip; max-width: 100%; }
img, video, svg, iframe { max-width: 100%; }
.wrap--narrow { max-width: 860px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* section heading */
.sh { margin: 0 0 clamp(26px, 4vw, 48px); max-width: 780px; }  
.sh .lead { margin-top: .9rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; }

/* flat page hero (no WebGL): copy left, product collage right */
.phero--flat { min-height: 0; padding: calc(var(--hdr) + 44px) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.phero--flat::before { background: radial-gradient(900px 520px at 88% 30%, color-mix(in srgb, var(--ac, #12b3a6) 22%, transparent), transparent 70%); -webkit-mask-image: none; mask-image: none; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); align-items: center; position: relative; }
.collage { position: relative; aspect-ratio: 1 / .92; min-height: 280px; }
.collage img { position: absolute; width: 56%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 28px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 30px 70px rgba(20, 50, 90, .18); }
.collage__0 { left: 8%; top: 6%; z-index: 2; transform: rotate(-4deg); } .collage__1 { right: 0; top: 0; transform: rotate(5deg); width: 46%; } .collage__2 { left: 0; bottom: 0; width: 44%; transform: rotate(4deg); } .collage__3 { right: 4%; bottom: 2%; z-index: 3; width: 48%; transform: rotate(-3deg); }
.mini-stats { display: flex; gap: clamp(18px, 3vw, 40px); margin-top: 2rem; padding: 0; list-style: none; flex-wrap: wrap; } .mini-stats b { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; } .mini-stats span { font-size: .78rem; color: var(--muted); }
.usecase { margin-top: .8rem; font-size: .88rem; color: var(--ink-2); } .usecase b { color: var(--teal-2); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-right: 8px; }
.crumbs span { color: var(--muted); } .crumbs [aria-current] { color: var(--ink-2); }

/* category / range tiles */
.gtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.gtile { position: relative; display: flex; flex-direction: column; padding: 24px 24px 20px; border-radius: 26px; background: var(--glass); border: 1px solid var(--line-2); backdrop-filter: blur(14px); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; overflow: hidden; color: var(--ink); }
.gtile::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--ac, var(--teal)); opacity: .85; }
.gtile:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ac, var(--teal)) 55%, #fff); box-shadow: 0 28px 60px color-mix(in srgb, var(--ac, var(--teal)) 22%, transparent); }
.gtile h3 { font-family: var(--display); font-size: 1.14rem; letter-spacing: -.02em; line-height: 1.25; margin: 14px 0 6px; } .gtile p { font-size: .87rem; color: var(--ink-2); flex: 1; }
.gtile__f { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: .8rem; font-weight: 600; color: var(--teal-2); } .gtile__f em { font-style: normal; color: var(--muted); font-weight: 500; } .gtile__f i { font-style: normal; transition: transform .4s var(--ease); } .gtile:hover .gtile__f i { transform: translateX(5px); }
.tstack { display: flex; height: 66px; } .tstack img { width: 66px; height: 66px; object-fit: cover; border-radius: 18px; background: #fff; border: 2px solid #fff; box-shadow: 0 8px 22px rgba(20, 50, 90, .16); margin-left: -16px; transform: rotate(calc(var(--k) * 4deg - 4deg)); } .tstack img:first-child { margin-left: 0; }
.chips--lg { gap: 10px; } .chips--lg .chip { padding: 9px 16px; font-size: .86rem; } .chips--lg .chip small { color: var(--muted); margin-left: 4px; } a.chip:hover { border-color: var(--teal); color: var(--ink); }

/* bands + notes */
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px); border-radius: 34px; background: linear-gradient(120deg, #e4f6f3 0%, #dbeaf8 55%, #e6e9fb 100%); border: 1px solid var(--line-2); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(18, 179, 166, .22), transparent 70%); pointer-events: none; }
.band > div { max-width: 640px; position: relative; z-index: 1; } .band .row { position: relative; z-index: 1; margin: 0; }
.hcp { font-size: .8rem; color: var(--ink-2); max-width: 780px; margin-top: 2rem; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--glass); } .hcp b { display: inline-block; padding: 1px 8px; margin-right: 8px; border-radius: 6px; background: rgba(214, 176, 75, .22); color: #8a6a14; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }

/* generic feature grids */
.feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; padding: 0; list-style: none; }
.feat li { position: relative; padding: 26px 24px; border-radius: 26px; background: var(--glass); border: 1px solid var(--line-2); backdrop-filter: blur(14px); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .feat li:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feat__i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 24%, #fff), color-mix(in srgb, var(--blue) 20%, #fff)); color: var(--teal-2); font-weight: 700; font-family: var(--display); font-size: .95rem; margin-bottom: 14px; }
.feat h3 { font-family: var(--display); font-size: 1.1rem; letter-spacing: -.02em; margin-bottom: .4rem; } .feat p { font-size: .88rem; color: var(--ink-2); }
.feat a.more { display: inline-block; margin-top: 10px; font-size: .84rem; font-weight: 600; color: var(--teal-2); }

/* audience cards */
.aud { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; padding: 0; list-style: none; }
.aud a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 24px 22px; border-radius: 24px; background: var(--glass); border: 1px solid var(--line-2); color: var(--ink); transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; backdrop-filter: blur(12px); }
.aud a:hover { transform: translateY(-6px); border-color: var(--teal); box-shadow: var(--shadow); } .aud b { font-family: var(--display); font-size: 1.1rem; letter-spacing: -.02em; } .aud span { font-size: .84rem; color: var(--ink-2); flex: 1; } .aud i { font-style: normal; color: var(--teal-2); font-weight: 600; font-size: .84rem; margin-top: 10px; }
.aud__k { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-2); font-weight: 700; }

/* division cards (home) */
.dcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dcard { position: relative; display: flex; flex-direction: column; padding: 30px 28px 26px; border-radius: 34px; background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 9%, #fff) 0%, #fff 70%); border: 1px solid color-mix(in srgb, var(--ac) 22%, transparent); box-shadow: 0 24px 60px color-mix(in srgb, var(--ac) 12%, transparent); transition: transform .55s var(--ease), box-shadow .55s var(--ease); overflow: hidden; color: var(--ink); }
.dcard:hover { transform: translateY(-8px); box-shadow: 0 40px 90px color-mix(in srgb, var(--ac) 26%, transparent); }
.dcard::before { content: ""; position: absolute; right: -50px; top: -50px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ac) 30%, transparent), transparent 70%); }
.dcard__k { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--ac); position: relative; }
.dcard h3 { font-family: var(--display); font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; margin: 8px 0 8px; position: relative; } .dcard > p { font-size: .92rem; color: var(--ink-2); position: relative; }
.dcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 18px; padding: 0; list-style: none; position: relative; } .dcard__chips li { padding: 4px 11px; border-radius: 99px; font-size: .74rem; background: color-mix(in srgb, var(--ac) 10%, #fff); border: 1px solid color-mix(in srgb, var(--ac) 20%, transparent); color: var(--ink-2); }
.dcard__f { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; } .dcard__f b { font-family: var(--display); font-size: 1.05rem; } .dcard__f b small { display: block; font-size: .7rem; font-weight: 500; color: var(--muted); font-family: var(--font); }
.dcard__go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ac); color: #fff; font-size: 1.15rem; transition: transform .45s var(--ease); } .dcard:hover .dcard__go { transform: translateX(6px); }
.dcard .tstack { margin: 20px 0 0; position: relative; }

/* process rail + stat band + steps */

  
.marq { overflow: hidden; margin-top: 2rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
 
@keyframes marq { to { transform: translateX(-50%); } } 
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; } .twocol--top { align-items: start; }
.figure { margin: 0; border-radius: 30px; overflow: hidden; border: 1px solid var(--line-2); background: var(--glass); box-shadow: var(--shadow); } .figure img, .figure video { display: block; width: 100%; height: auto; } .figure figcaption { padding: 12px 18px; font-size: .78rem; color: var(--muted); }
.checklist { list-style: none; padding: 0; display: grid; gap: 10px; margin: 1.2rem 0; } .checklist li { position: relative; padding-left: 32px; color: var(--ink-2); } .checklist li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--teal) 18%, #fff); color: var(--teal-2); font-size: .78rem; font-weight: 700; }
.callout { padding: 18px 22px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(120deg, #eef9f7, #eef3fb); font-size: .92rem; color: var(--ink-2); } .callout b { color: var(--ink); }
.tag--warn { background: rgba(214, 176, 75, .22); color: #8a6a14; }

/* forms: messages */
.form__msg { margin-top: 14px; padding: 0; border-radius: 14px; font-size: .92rem; } .form__msg.is-ok, .form__msg.is-err { padding: 14px 18px; } .form__msg.is-ok { background: #e6f6ee; color: #14633a; border: 1px solid #b8e0c7; } .form__msg.is-err { background: #fdecea; color: #8d2a1e; border: 1px solid #f2c1bb; }

/* video blocks / embeds */
.embed { position: relative; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: #e8eef4; border: 1px solid var(--line-2); box-shadow: var(--shadow); } .embed iframe, .embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 1000px) { .dcards { grid-template-columns: 1fr; } .twocol { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
    .phero__grid { grid-template-columns: 1fr; } .collage { max-width: 440px; margin: 10px auto 0; width: 100%; }
    .band { border-radius: 26px; } .gtiles { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .mini-stats b { font-size: 1.4rem; } .feat { grid-template-columns: 1fr; } .aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aud a { padding: 20px 16px; overflow-wrap: anywhere; } }
@media (max-width: 380px) { .aud { grid-template-columns: minmax(0, 1fr); } }

/* blocks added from the admin */
.tc { text-align: center; } .tc .row { justify-content: center; }
.twocol--rev > :first-child { order: 2; }
.bgrid { display: grid; gap: 14px; margin-top: 1.4rem; grid-template-columns: repeat(3, 1fr); } .bgrid--2 { grid-template-columns: repeat(2, 1fr); } .bgrid--4 { grid-template-columns: repeat(4, 1fr); }
.bgrid .ph { margin: 0; } .bgrid .ph button { display: block; width: 100%; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: #e8eef4; cursor: zoom-in; } .bgrid .ph img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease); } .bgrid .ph button:hover img { transform: scale(1.04); }
.feat__img { width: 100%; height: 150px; object-fit: cover; border-radius: 18px; margin-bottom: 14px; }
@media (max-width: 800px) { .bgrid, .bgrid--4 { grid-template-columns: repeat(2, 1fr); } .twocol--rev > :first-child { order: 0; } }

/* sitemap page */
.smap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 34px; } .smap h2 { font-family: var(--display); font-size: 1.05rem; margin-bottom: .6rem; color: var(--teal-2); letter-spacing: .02em; } .smap ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .smap ul ul { margin: 6px 0 8px 14px; padding-left: 12px; border-left: 1px solid var(--line); } .smap a { color: var(--ink-2); font-size: .92rem; } .smap a:hover { color: var(--ink); text-decoration: underline; }
/* compact tiles, professionals quick-links */
.gtiles--compact { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .gtile--s { padding: 20px 20px 16px; } .gtile--s h3 { margin-top: 4px; font-size: 1.02rem; }
.hcp-quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 1.4rem; padding: 0; list-style: none; } .hcp-quick a { display: grid; gap: 2px; padding: 18px; overflow-wrap: anywhere; border-radius: 24px; background: var(--glass); border: 1px solid var(--line-2); color: var(--ink); transition: transform .45s var(--ease), border-color .3s; backdrop-filter: blur(10px); } .hcp-quick a:hover { transform: translateY(-5px); border-color: var(--teal); } .hcp-quick b { font-family: var(--display); font-size: 1.2rem; } .hcp-quick span { color: var(--muted); font-size: .84rem; }
/* gallery: kind filter + video tiles */
.tabs--kind { display: flex; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; } .tabs--kind .chip b { margin-left: 4px; } .tabs--kind .is-on { background: rgba(18, 179, 166, .16); border-color: var(--teal); color: var(--ink); }
.ph--video button { position: relative; } .ph__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--teal-2); font-size: 1.3rem; padding-left: 4px; box-shadow: 0 12px 30px rgba(11, 27, 51, .3); transition: transform .4s var(--ease); } .ph--video button:hover .ph__play { transform: translate(-50%, -50%) scale(1.1); }
.ph[hidden], .yr[hidden] { display: none; }
.mags--lg { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .mag em { display: block; font-style: normal; font-size: .72rem; color: var(--teal-2); margin-top: 2px; }
.mk-card--home { border-color: var(--teal); background: linear-gradient(140deg, rgba(18, 179, 166, .12), var(--glass)); }
.avatar--img { object-fit: cover; padding: 0; } .page-safety .eyebrow { color: #b3261e; }
.lb__video { width: min(960px, 92vw); aspect-ratio: 16/9; } .lb__video iframe, .lb__video video { width: 100%; height: 100%; border: 0; border-radius: 14px; background: #000; }

/* footer */
.brand--ftr { margin-bottom: 1.4rem; display: inline-flex; } .ftr__cols small { display: block; font-size: .72rem; color: var(--muted); opacity: .9; }
.ftr__links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .ftr__links a { color: var(--ink-2); font-size: .8rem; } .ftr__links a:hover { color: var(--ink); text-decoration: underline; }
.ftr__bar { gap: 14px 24px; flex-wrap: wrap; }
.ftr__cols a { overflow-wrap: anywhere; }
@media (max-width: 1180px) { .ftr__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ftr__cols { grid-template-columns: 1fr; } }

/* never let long names or breadcrumbs push the page wider than the screen */
.crumbs { flex-wrap: wrap; row-gap: 4px; } .phero h1, .phero .lead, .phero__sub { overflow-wrap: anywhere; } .tags { max-width: 100%; }

/* ---- "View details" button on product cards + quick-view pop-up ---- */
.pr-card__eye { position: absolute; z-index: 4; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 0; height: 40px; min-width: 40px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 6px 18px rgba(20, 50, 80, .16); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; transition: gap .3s var(--ease), padding .3s var(--ease), background .25s, color .25s, transform .25s; }
.pr-card__eye svg { flex: none; }
.pr-card__eye span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .35s var(--ease), opacity .25s; }
.pr-card__eye:hover, .pr-card__eye:focus-visible, .pr-card:hover .pr-card__eye { gap: 8px; padding: 0 14px 0 11px; background: var(--ink); color: #fff; }
.pr-card__eye:hover span, .pr-card__eye:focus-visible span, .pr-card:hover .pr-card__eye span { max-width: 9em; opacity: 1; }
@media (hover: none) { .pr-card__eye { gap: 7px; padding: 0 13px 0 10px; } .pr-card__eye span { max-width: 9em; opacity: 1; } }
@media (max-width: 560px) { .pr-card__eye { right: 8px; bottom: 8px; height: 36px; font-size: .74rem; } }
html.qv-lock { overflow: hidden; }
.qvm { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px)); opacity: 0; transition: opacity .22s; }
.qvm[hidden] { display: none; } .qvm.is-open { opacity: 1; }
.qvm__bg { position: absolute; inset: 0; background: rgba(12, 32, 58, .46); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.qvm__box { position: relative; width: min(1040px, 100%); max-height: min(88vh, 900px); max-height: min(88dvh, 900px); overflow: auto; overscroll-behavior: contain; background: #fff; border-radius: 28px; box-shadow: 0 30px 90px rgba(10, 30, 60, .35); transform: translateY(18px) scale(.98); transition: transform .3s var(--ease); outline: none; }
.qvm.is-open .qvm__box { transform: none; }
.qvm__x { position: sticky; top: 12px; float: right; z-index: 5; margin: 12px 12px -52px 0; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(255, 255, 255, .96); color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px rgba(20, 50, 80, .18); transition: background .2s, color .2s, transform .2s; }
.qvm__x:hover, .qvm__x:focus-visible { background: var(--ink); color: #fff; transform: rotate(90deg); }
.qvm__load { padding: 80px 24px; text-align: center; color: var(--muted); }
.qv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(18px, 3vw, 40px); padding: clamp(18px, 3vw, 36px); }
.qv__media { display: flex; flex-direction: column; gap: 12px; align-self: start; position: sticky; top: 0; }
.qv__shot { margin: 0; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ac) 18%, #fff), #f3f7fb 72%); display: grid; place-items: center; }
.qv__shot img { width: 100%; height: 100%; object-fit: cover; } .qv__shot--cut img { object-fit: contain; padding: 6%; }
.qv__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.qv__thumb { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1.5px solid var(--line-2); border-radius: 99px; background: #fff; font: inherit; font-size: .76rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.qv__thumb img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #eef3f8; }
.qv__thumb.is-on { border-color: var(--ac); color: var(--ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 25%, transparent); }
.qv__rx { margin: 0; font-size: .76rem; line-height: 1.5; color: var(--ink-2); padding: 10px 12px; border-radius: 14px; background: #f4f7fb; } .qv__rx b { color: #8a6a12; margin-right: 4px; }
.qv__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; padding-right: 54px; }
.qv__title { font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.03em; line-height: 1.05; margin: 0 0 4px; }
.qv__sub { margin: 0 0 10px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--teal-2); }
.qv__lead { margin: 0 0 16px; font-size: 1.02rem; color: var(--ink-2); }
.qv__facts { margin: 0 0 8px; border-top: 1px solid var(--line-2); } .qv__facts > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: .88rem; } .qv__facts dt { color: var(--muted); } .qv__facts dd { margin: 0; overflow-wrap: anywhere; }
.qv__h { margin: 18px 0 8px; font-family: var(--display); font-size: 1.02rem; }
.qv__prose { margin: 12px 0; font-size: .92rem; color: var(--ink-2); line-height: 1.65; }
.qv__acc { border-bottom: 1px solid var(--line-2); } .qv__acc summary { cursor: pointer; padding: 13px 0; font-weight: 700; font-size: .94rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; } .qv__acc summary::-webkit-details-marker { display: none; } .qv__acc summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--teal-2); transition: transform .25s; } .qv__acc[open] summary::after { transform: rotate(45deg); }
.qv__acc > div, .qv__acc > p { padding-bottom: 14px; }
.qv__ing, .qv__faq { padding: 0 0 12px; } .qv__ing h4, .qv__faq h4 { margin: 0 0 3px; font-size: .9rem; display: flex; align-items: center; gap: 8px; } .qv__ing h4 i { width: 10px; height: 10px; border-radius: 50%; } .qv__ing p, .qv__faq p { margin: 0 0 4px; font-size: .86rem; color: var(--ink-2); }
.qv__store { margin: 14px 0 0; font-size: .8rem; color: var(--muted); } .qv__store a { color: var(--teal-2); text-decoration: underline; }
.qv__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.qv__err { padding: 60px 24px; text-align: center; display: grid; gap: 16px; justify-items: center; }
@media (max-width: 760px) {
    .qvm { padding: 0; align-items: end; } .qvm__box { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 24px 24px 0 0; transform: translateY(40px); }
    .qv { grid-template-columns: minmax(0, 1fr); } .qv__media { position: static; } .qv__shot { max-height: 46vh; aspect-ratio: 4 / 3; } .qv__shot img { object-fit: contain; } .qv__tags { padding-right: 0; margin-top: 4px; }
    .qv__facts > div { grid-template-columns: 7em minmax(0, 1fr); } .qv__cta .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .qvm, .qvm__box, .pr-card__eye, .pr-card__eye span { transition: none; } }
.qv__main { position: relative; }
.qv__cta { position: sticky; bottom: 0; z-index: 2; margin: 18px calc(-1 * clamp(18px, 3vw, 36px)) calc(-1 * clamp(18px, 3vw, 36px)); padding: 14px clamp(18px, 3vw, 36px) calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 28%); }
@media (max-width: 760px) { .qv__cta { margin-inline: calc(-1 * clamp(18px, 3vw, 36px)); } }
@media (max-width: 760px) { .qv__cta { flex-wrap: nowrap; gap: 8px; } .qv__cta .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; font-size: .84rem; justify-content: center; } .qv__cta .btn i { display: none; } }

/* ---- home: highlights list + pillars strip ---- */
.picks { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; display: grid; gap: 8px; max-width: 440px; counter-reset: pk; }
.picks li { counter-increment: pk; }
.picks a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 11px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line-2); transition: transform .35s var(--ease), border-color .25s, background .25s, box-shadow .35s; }
.picks a::before { content: counter(pk, decimal-leading-zero); grid-row: 1 / 3; font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--teal-2); }
.picks b { font-family: var(--display); font-size: 1.02rem; letter-spacing: -.01em; } .picks span { font-size: .8rem; color: var(--muted); }
.picks li.on a, .picks a:hover, .picks a:focus-visible { transform: translateX(8px); border-color: var(--teal); background: #fff; box-shadow: var(--shadow); }
.pillars--strip { margin: 0 0 32px; } .pillars--strip li p { font-size: .86rem; }
@media (max-width: 900px) {
    #highlights .lead { display: none; }
    .picks { display: flex; flex-wrap: wrap; gap: 6px; max-width: none; margin: .7rem 0 1rem; }
    .picks a { display: block; padding: 7px 13px; border-radius: 99px; } .picks a::before, .picks span { display: none; } .picks b { font-size: .84rem; }
    .picks li.on a, .picks a:hover { transform: none; }
}

/* ---- pinned rows: heading stays readable over the wall, mouse "grab" cursor ---- */
.pin--vis .pin__head, .pin--int .pin__head { padding-block: 12px 18px; background: linear-gradient(90deg, rgba(240, 245, 250, .94) 0%, rgba(240, 245, 250, .72) 55%, rgba(240, 245, 250, 0) 100%); left: 0; right: auto; width: min(760px, 92vw); margin-inline: 0; padding-left: max(var(--gut), calc((100vw - 1320px) / 2 + var(--gut))); }
html.can-drag, html.can-drag body { cursor: grab; } html.is-dragging, html.is-dragging body { cursor: grabbing; user-select: none; -webkit-user-select: none; }
html.can-drag a, html.can-drag button, html.can-drag .pcard, html.can-drag .rail { cursor: pointer; }
.pin--vis .pin__head > *, .pin--int .pin__head > * { max-width: 700px; }
.pin--vis .pcard { top: 60%; } .pin--int .pcard { top: 63%; } .pin--vis .pcard__photo { height: 120px; }
@media (max-width: 900px) { .pin--vis .pcard, .pin--int .pcard { top: auto; } }

/* product page: the static pack photo shows at once and gives way to the 3D pack when it is ready */
.phero__ph { position: absolute; z-index: 0; right: max(var(--gut), calc((100vw - 1320px) / 2 + var(--gut))); top: 50%; transform: translateY(-46%); width: min(34vw, 460px); aspect-ratio: 1; pointer-events: none; opacity: 1; transition: opacity .7s ease; }
.phero__ph img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(20, 50, 80, .22)); }
.phero__ph--photo img { object-fit: cover; border-radius: 30px; }
html.is-3d .phero__ph, html.no-webgl .phero__ph--hide { opacity: 0; }
@media (max-width: 900px) { .phero__ph { position: relative; right: auto; top: auto; transform: none; width: min(70vw, 320px); margin: 10px auto 0; } }
/* range pages: copy stays readable over the lit wall / helix */
.page-inner .sc--left::before { background: linear-gradient(90deg, rgba(240, 245, 250, .95) 0%, rgba(240, 245, 250, .86) 38%, rgba(240, 245, 250, .35) 58%, transparent 74%); }
.rangebody { padding-top: 24px; }

/* globe tour: the country the globe is on right now */
.markets--live li.now { opacity: 1; border-color: var(--teal); background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 6px 18px rgba(18, 179, 166, .28); transform: translateY(-1px); }
.markets--live li { transition: opacity .5s, border-color .5s, transform .4s, box-shadow .4s; }

/* cookie notice */
.cookie-note { position: fixed; z-index: 120; left: 20px; bottom: 20px; max-width: 420px; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 18px; background: rgba(255, 255, 255, .94); border: 1px solid var(--line-2); box-shadow: 0 14px 40px rgba(12, 32, 60, .18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .45s ease, transform .5s var(--ease); }
.cookie-note.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cookie-note p { margin: 0; font-size: .8rem; line-height: 1.4; color: var(--ink-2); } .cookie-note a { color: var(--blue, #1f6fd6); text-decoration: underline; text-underline-offset: 2px; }
.cookie-note button { flex: none; border: 0; border-radius: 999px; padding: 8px 16px; background: var(--ink, #0b2a4a); color: #fff; font: 600 .78rem/1 inherit; cursor: pointer; }
@media (max-width: 700px) { .cookie-note { left: 10px; right: 10px; bottom: 10px; max-width: none; z-index: 140; } }

/* highlights: eye buttons (quick view) on the list and under every 3D pack */
.picks li { position: relative; } .picks a { padding-right: 62px; }
.pk-row-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--ink); cursor: pointer; transition: background .25s, color .25s, transform .3s var(--ease); }
.pk-row-eye:hover, .pk-row-eye:focus-visible { background: var(--ink); color: #fff; transform: translateY(-50%) scale(1.06); }
.picks li.on a, .picks li:hover a { transform: translateX(8px); } .picks li.on .pk-row-eye, .picks li:hover .pk-row-eye { right: 4px; }
.pk-eye { position: fixed; z-index: 40; left: 0; top: 0; display: inline-flex; align-items: center; gap: 0; height: 38px; min-width: 38px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(255, 255, 255, .95); color: var(--ink); box-shadow: 0 8px 22px rgba(20, 50, 80, .18); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .35s, background .25s, color .25s, gap .3s, padding .3s; will-change: transform; }
.pk-eye.is-on { opacity: 1; pointer-events: auto; }
.pk-eye span { max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; transition: max-width .35s var(--ease), opacity .25s; }
.pk-eye:hover, .pk-eye:focus-visible { gap: 8px; padding: 0 14px 0 11px; background: var(--ink); color: #fff; } .pk-eye:hover span, .pk-eye:focus-visible span { max-width: 9em; opacity: 1; }
@media (max-width: 900px) { .pk-eye { display: none; } .picks a { padding-right: 13px; } .pk-row-eye { display: none; } }

/* home headline: "no" in red, "yes" in green */
body[data-scene="home"] #top h1 em:first-of-type { color: #c62f2a; }
body[data-scene="home"] #top h1 em:last-of-type { color: #1f8a46; }

/* the batch film on the Manufacturing page */
.bfilm { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(11, 42, 74, .12); background: linear-gradient(180deg, #eef2f7, #c3cfdc); box-shadow: 0 30px 70px rgba(11, 42, 74, .14); }
.bfilm__f { display: block; width: 100%; height: clamp(520px, 78vh, 760px); border: 0; }
@media (max-width: 720px) { .bfilm__f { height: min(86vh, 720px); } .bfilm { border-radius: 16px; } }