/* Biogreen product page: dark theme, gallery on a tinted stage matched to the packaging (--acc) */
.bg-pdp{padding-block:12px 64px;color:var(--ink)}
.bg-pdp.bg-pdp .bg-w{max-width:1180px}
.bg-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--mute);padding-block:14px 8px}
.bg-crumb a{color:var(--mute)!important}.bg-crumb a:hover{color:var(--ink)!important}.bg-crumb b{color:var(--ink);font-weight:500}
.bg-crumb span{opacity:.5}
.bg-pdp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:16px 40px}
.bg-pdp-info .bg-eyebrow{display:inline-block;color:var(--lime)!important}
.bg-pdp-title{font:800 clamp(40px,5.6vw,78px)/.95 'Bricolage Grotesque',sans-serif!important;letter-spacing:-.035em;margin:12px 0 16px!important;text-wrap:balance;color:var(--ink)!important}
.bg-pdp-lead{color:var(--mute);font-size:17px;max-width:46ch;margin:0 0 26px}

/* buy box: the same markup and script as the product cards, restyled for the dark page */
.bg-pdp .bg-buy.bg-p{background:none;color:var(--ink);padding:0;border-radius:0;box-shadow:none;display:block;position:static;transform:none!important;max-width:460px}
.bg-pdp .bg-buy.bg-p:focus-within{outline:none}
.bg-buy-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:8px}
.bg-pdp .bg-buy .bg-sizes{margin:0 0 20px;gap:10px}
.bg-pdp .bg-buy .bg-size{background:var(--bg2);color:var(--ink);border:1.5px solid var(--line);border-radius:16px;padding:11px 22px;font:700 15px 'Hanken Grotesk',sans-serif}
.bg-pdp .bg-buy .bg-size:hover{border-color:var(--lime)}
.bg-pdp .bg-buy .bg-size.on{background:var(--lime);color:var(--dark);border-color:var(--lime);box-shadow:0 0 0 4px rgba(201,232,90,.18)}
.bg-pdp .bg-buy .bg-size:disabled{opacity:.35}
.bg-pdp .bg-buy .bg-pr{display:flex;align-items:baseline;gap:14px;margin:0 0 22px;flex-wrap:wrap}
.bg-pdp .bg-buy .bg-pr b{font:800 clamp(34px,4vw,48px)/1 'Bricolage Grotesque',sans-serif;color:var(--ink);letter-spacing:-.03em}
.bg-pdp .bg-buy .bg-pr s{color:var(--mute);font-size:18px}
.bg-pdp .bg-buy .bg-pr em{background:var(--lime);color:var(--dark);font-style:normal;font-weight:700;font-size:13px;padding:4px 12px;border-radius:99px}
.bg-pdp .bg-buy .bg-acts{margin:0}
.bg-pdp .bg-buy .bg-acts .bg-btn,.bg-pdp .bg-buy .bg-acts .bg-btn:hover,.bg-pdp .bg-buy .bg-acts .bg-btn:focus{background:var(--lime);color:var(--dark);width:100%;justify-content:center;padding:17px 28px;font-size:17px;border-radius:99px;box-shadow:none}
.bg-pdp .bg-buy .bg-acts .bg-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(201,232,90,.28)}
.bg-pdp .bg-buy .bg-out{background:var(--bg2)!important;color:var(--mute)!important;border:1px solid var(--line);cursor:default}
.bg-pdp .bg-buy .bg-qty{background:var(--bg2);border:1.5px solid var(--lime);padding:6px;color:var(--ink)}
.bg-pdp .bg-buy .bg-qty button{width:46px;height:46px;font-size:24px}
.bg-pdp .bg-buy .bg-q-n{font:800 20px 'Bricolage Grotesque',sans-serif;color:var(--ink)}
.bg-buylinks{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.bg-buylinks .bg-buy-label{width:100%;margin:0}
.bg-buylinks a{display:block;width:150px;border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.bg-buylinks a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.bg-buylinks img{width:100%;height:auto;display:block}

/* gallery */
.bg-pdp-gal{min-width:0}
.bg-stage{position:relative;border-radius:34px;aspect-ratio:1;overflow:hidden;background:radial-gradient(ellipse 72% 58% at 50% 38%,#fff 0,color-mix(in srgb,var(--acc) 38%,#fff) 52%,var(--acc) 100%)}
.bg-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12%;background:linear-gradient(color-mix(in srgb,var(--acc) 80%,#000),color-mix(in srgb,var(--acc) 62%,#000));box-shadow:inset 0 14px 24px -12px rgba(0,0,0,.28)}
.bg-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;z-index:1;transform:translateY(-3%) scale(1.02);transition:opacity .25s}
.bg-stage.photo::after{display:none}
.bg-stage.photo img{mix-blend-mode:normal;object-fit:cover;transform:none}
.bg-shadow{position:absolute;z-index:0;left:50%;bottom:9%;width:32%;height:5%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.4),rgba(0,0,0,0) 70%);filter:blur(4px)}
.bg-stage.photo .bg-shadow{display:none}
.bg-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px;margin-top:14px}
.bg-thumbs button{padding:0;border:2px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;cursor:pointer;aspect-ratio:1;transition:border-color .2s}
.bg-thumbs button:hover{border-color:var(--mute)}
.bg-thumbs button.on{border-color:var(--lime)}
.bg-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* content sections */
.bg-badges{display:flex;flex-wrap:wrap;gap:10px;padding-block:8px 44px}
.bg-badges span{border:1px solid var(--line);background:var(--bg2);border-radius:99px;padding:7px 18px;font-size:14px;color:var(--ink)}
.bg-pdp-sec{padding-block:0 56px}
.bg-pdp-sec>h2{font-size:clamp(28px,4vw,46px)!important;margin:0 0 22px!important;color:var(--ink)!important}
.bg-bens{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.bg-ben{background:var(--bg2);border:1px solid var(--line);border-radius:26px;padding:24px;transition:transform .25s,border-color .25s}
.bg-ben:hover{transform:translateY(-4px);border-color:var(--lime)}
.bg-ben-ic{width:48px;height:48px;border-radius:16px;background:var(--acc);display:grid;place-items:center;font-size:24px;margin-bottom:14px}
.bg-ben h3{font:800 21px/1.15 'Bricolage Grotesque',sans-serif!important;letter-spacing:-.02em;margin:0 0 6px!important;color:var(--ink)!important}
.bg-ben p{margin:0;color:var(--mute);font-size:15px}
.bg-how{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:56px}
.bg-how.one{grid-template-columns:1fr;max-width:640px}
.bg-dose{background:var(--acc);color:#0a1d13;border-radius:30px;padding:clamp(24px,3vw,38px)}
.bg-dose .bg-eyebrow{color:#0a1d13!important;opacity:.7}
.bg-dose-big{font:800 clamp(38px,5vw,64px)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.035em;margin:10px 0 12px}
.bg-dose p{margin:10px 0 0;font-size:17px;max-width:44ch;color:#0a1d13}
.bg-ing{background:var(--bg2);border:1px solid var(--line);border-radius:30px;padding:clamp(24px,3vw,38px)}
.bg-ing p{margin:12px 0 0;font-size:17px;color:var(--ink)}
.bg-prose{color:var(--mute);max-width:78ch}
.bg-prose p,.bg-prose li{color:var(--mute)}
.bg-pdp .woocommerce ul.products.bg-grid{margin-top:4px}

@media(max-width:860px){
.bg-pdp-hero{grid-template-columns:1fr;gap:24px}
.bg-pdp-gal{order:-1}
.bg-how{grid-template-columns:1fr}
.bg-stage{border-radius:26px}
.bg-pdp .bg-buy.bg-p{max-width:none}
}

.bg-pdp .bg-pdp-sec.woocommerce{max-width:none;padding-inline:0;margin-inline:0}

.bg-prose{line-height:1.7}
.bg-prose strong,.bg-prose b{color:var(--ink)}
.bg-prose div,.bg-prose p{margin:0 0 .9em}
.bg-prose ul{padding-left:1.2em}
@media(max-width:860px){
.bg-thumbs{display:flex;overflow-x:auto;gap:8px;scrollbar-width:none;padding-bottom:2px}
.bg-thumbs::-webkit-scrollbar{display:none}
.bg-thumbs button{flex:0 0 68px}
}

/* How to use + Ingredients, with the lifestyle photo beside them (no separate wide banner) */
.bg-how{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:56px;align-items:stretch}
.bg-how.has-photo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.bg-how-cards{display:grid;gap:14px;align-content:stretch}
.bg-how:not(.has-photo) .bg-how-cards{grid-column:1 / -1;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.bg-how.one:not(.has-photo){grid-template-columns:1fr;max-width:none}
.bg-how-photo{border-radius:30px;overflow:hidden;min-height:340px;position:relative}
.bg-how-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 60%;display:block}
.bg-dose,.bg-ing{display:flex;flex-direction:column;justify-content:center}
@media(max-width:860px){.bg-how.has-photo{grid-template-columns:1fr}.bg-how-photo{min-height:0;aspect-ratio:4/3}}

/* sticky add-to-cart bar (phones / tablets) */
.bg-sticky{display:none}
@media(min-width:861px){
.bg-sticky.bg-p{position:fixed;left:50%;bottom:18px;z-index:60;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:16px;width:min(720px,calc(100% - 40px));background:rgba(10,29,19,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;padding:10px 14px;color:var(--ink);transform:translate(-50%,140%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.bg-sticky.bg-p.show,.bg-sticky.bg-p.show:hover{transform:translate(-50%,0)}
.bg-sticky.bg-p:hover{transform:translate(-50%,140%)}
.bg-st-img{width:52px;height:52px;border-radius:12px;object-fit:cover;background:#fff;flex:0 0 auto}
.bg-st-info{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;line-height:1.25;text-align:left}
.bg-st-info b{margin:0;font:800 17px 'Bricolage Grotesque',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.bg-st-meta{font-size:14px;color:var(--mute)}
.bg-sticky .bg-acts{flex:0 0 auto;margin:0;width:auto;display:block}
.bg-sticky .bg-acts .bg-btn{background:var(--lime);color:var(--dark);width:auto;padding:13px 26px;font-size:15px;white-space:nowrap}
.bg-sticky .bg-qty{width:auto;gap:8px;background:var(--bg2);border:1.5px solid var(--lime);padding:4px}
.bg-sticky .bg-qty button{width:38px;height:38px;font-size:20px}
.bg-sticky .bg-q-n{min-width:2ch;font:800 17px 'Bricolage Grotesque',sans-serif;color:var(--ink)}
}
@media(max-width:860px){
.bg-sticky.bg-p{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:12px;background:rgba(10,29,19,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-radius:0;color:var(--ink);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 -12px 32px rgba(0,0,0,.35)}
.bg-sticky.bg-p.show{transform:none}
.bg-sticky.bg-p:hover{transform:translateY(110%)}
.bg-sticky.bg-p.show:hover{transform:none}
.bg-st-img{width:48px;height:48px;border-radius:12px;object-fit:cover;background:#fff;flex:0 0 auto}
.bg-st-info{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;line-height:1.25;text-align:left}
.bg-st-info b{margin:0;font:800 15px 'Bricolage Grotesque',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.bg-st-meta{font-size:13px;color:var(--mute)}
.bg-sticky .bg-acts{flex:0 0 auto;margin:0;width:auto;display:block}
.bg-sticky .bg-acts .bg-btn{background:var(--lime);color:var(--dark);width:auto;padding:12px 20px;font-size:15px;white-space:nowrap}
.bg-sticky .bg-qty{width:auto;gap:6px;background:var(--bg2);border:1.5px solid var(--lime);padding:4px}
.bg-sticky .bg-qty button{width:36px;height:36px;font-size:20px}
.bg-sticky .bg-q-n{min-width:2ch;font:800 16px 'Bricolage Grotesque',sans-serif;color:var(--ink)}
.bg-pdp{padding-bottom:110px}
}
/* benefit cards: rows stay centred whatever the count (3, 4, 7...) */
.bg-bens{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.bg-ben{flex:1 1 210px;max-width:262px}
@media(max-width:860px){.bg-ben{flex:1 1 100%;max-width:none}}

/* COVER layout: lifestyle photo behind the name, price and Add to cart; packshots in a row below */
.bg-cover{position:relative;overflow:hidden;border-radius:34px;background:#0d2318;height:clamp(420px,calc(100vh - 250px),640px);display:flex;align-items:center;margin-top:4px}
.bg-cover-img{position:absolute;right:0;top:0;height:100%;width:auto;aspect-ratio:1;max-width:none;object-fit:cover;-webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 22%,#000 46%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 22%,#000 46%)}
.bg-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,29,19,.55) 0,rgba(10,29,19,0) 55%);pointer-events:none}
.bg-cover-inner{position:relative;z-index:2;padding:clamp(28px,4vw,56px);width:min(100%,560px)}
.bg-cover-inner .bg-pdp-title{font-size:clamp(38px,5vw,66px)!important}
.bg-cover-inner .bg-pdp-lead{color:rgba(243,240,225,.86)}
.bg-cover-inner .bg-buy.bg-p{max-width:420px}
.bg-gal-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding-block:14px 30px}
.bg-pdp .bg-tile{padding:0;border:0;cursor:zoom-in;border-radius:22px;overflow:hidden;aspect-ratio:1;position:relative;background-color:#fff!important;background-image:radial-gradient(ellipse 80% 65% at 50% 40%,#fff 0,color-mix(in srgb,var(--acc) 30%,#fff) 70%,color-mix(in srgb,var(--acc) 34%,#fff) 100%)!important;transition:transform .25s,box-shadow .25s}
.bg-pdp .bg-tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.bg-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:4%}
.bg-lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,14,9,.92);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.bg-lightbox img{max-width:min(92vw,900px);max-height:88vh;border-radius:18px;background:#fff;object-fit:contain}
@media(max-width:860px){
.bg-cover{display:block;height:auto;border-radius:26px}
.bg-cover-img{position:relative;display:block;width:100%;height:auto;aspect-ratio:1;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
.bg-cover::after{display:none}
.bg-cover-inner{margin-top:-22%;width:100%;padding:0 18px 24px}
.bg-gal-row{grid-template-columns:repeat(2,1fr)}
}

.bg-pdp .bg-cover .bg-cover-img{height:100%;width:auto;max-width:none}
@media(max-width:860px){.bg-pdp .bg-cover .bg-cover-img{height:auto;width:100%}}

/* COVER layout gallery: thumbnails on the left, one large image on the right, all on the same tinted stage (no pop-up) */
.bg-gal-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;align-items:start;padding-block:16px 34px}
.bg-thumbs.bg-thumbs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0}
.bg-pdp .bg-thumbs-grid button{padding:0;border:2px solid transparent;border-radius:22px;overflow:hidden;aspect-ratio:1;cursor:pointer;position:relative;background-color:#fff!important;background-image:radial-gradient(ellipse 80% 65% at 50% 40%,#fff 0,color-mix(in srgb,var(--acc) 30%,#fff) 70%,color-mix(in srgb,var(--acc) 34%,#fff) 100%)!important;transition:transform .25s,border-color .2s,box-shadow .25s}
.bg-pdp .bg-thumbs-grid button:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.35)}
.bg-pdp .bg-thumbs-grid button.on{border-color:var(--lime);box-shadow:0 0 0 3px rgba(201,232,90,.25)}
.bg-thumbs-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:5%}
.bg-gal-split .bg-stage{position:sticky;top:90px;cursor:zoom-in}
/* hover to zoom in on the large image (follows the mouse) */
@media(hover:hover){
.bg-gal-split .bg-stage img{transition:transform .25s ease-out;transform-origin:var(--zx,50%) var(--zy,50%)}
.bg-gal-split .bg-stage:hover img{transform:scale(1.7)}
}
@media(max-width:860px){
.bg-gal-split{grid-template-columns:1fr}
.bg-gal-split .bg-stage{order:-1;position:relative;top:0;cursor:default}
.bg-thumbs.bg-thumbs-grid{display:flex;overflow-x:auto;gap:8px;scrollbar-width:none}
.bg-pdp .bg-thumbs-grid button{flex:0 0 74px;border-radius:16px}
}

/* COVER swap: the thumbnails below the cover replace the picture on the right of the cover; the name, price and Add to cart stay put */
.bg-cover-thumbs{display:flex;flex-wrap:wrap;gap:10px;padding-block:14px 30px}
.bg-pdp .bg-cover-thumbs button{flex:0 0 96px;width:96px;height:96px;padding:0;border:2px solid transparent;border-radius:18px;overflow:hidden;cursor:pointer;position:relative;background-color:#fff!important;background-image:radial-gradient(ellipse 80% 65% at 50% 40%,#fff 0,color-mix(in srgb,var(--acc) 30%,#fff) 70%,color-mix(in srgb,var(--acc) 34%,#fff) 100%)!important;transition:transform .2s,border-color .2s,box-shadow .2s}
.bg-pdp .bg-cover-thumbs button:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.35)}
.bg-pdp .bg-cover-thumbs button.on{border-color:var(--lime);box-shadow:0 0 0 3px rgba(201,232,90,.25)}
.bg-cover-thumbs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:5%}
.bg-cover-thumbs button[data-photo="1"] img{object-fit:cover;mix-blend-mode:normal;padding:0}
.bg-pdp .bg-cover .bg-cover-img{transition:opacity .22s ease}
.bg-pdp .bg-cover .bg-cover-img.swapping{opacity:0}
/* a packshot on the cover: the pink tint behind the pack, like the product stage */
.bg-pdp .bg-cover.packshot .bg-cover-img{object-fit:contain;mix-blend-mode:multiply;padding:3%;background:radial-gradient(ellipse 80% 65% at 50% 40%,#fff 0,color-mix(in srgb,var(--acc) 30%,#fff) 70%,color-mix(in srgb,var(--acc) 34%,#fff) 100%)}
@media(max-width:860px){.bg-pdp .bg-cover-thumbs button{flex:0 0 72px;width:72px;height:72px;border-radius:14px}.bg-cover-thumbs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.bg-cover-thumbs::-webkit-scrollbar{display:none}}

/* cover picture lives in its own box so a packshot can blend against a tinted background instead of the dark cover */
.bg-pdp .bg-cover .bg-cover-media{position:absolute;right:0;top:0;height:100%;aspect-ratio:1;isolation:isolate;-webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 22%,#000 46%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 22%,#000 46%);transition:background .25s}
.bg-pdp .bg-cover .bg-cover-img{position:static;display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:center;mix-blend-mode:normal;padding:0;background:none;-webkit-mask-image:none;mask-image:none}
.bg-pdp .bg-cover.packshot .bg-cover-media{background:radial-gradient(ellipse 80% 65% at 50% 40%,#fff 0,color-mix(in srgb,var(--acc) 30%,#fff) 70%,color-mix(in srgb,var(--acc) 34%,#fff) 100%)}
.bg-pdp .bg-cover.packshot .bg-cover-img{object-fit:contain;mix-blend-mode:multiply;padding:3%}
@media(max-width:860px){
.bg-pdp .bg-cover .bg-cover-media{position:relative;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
}

/* Only the scene (lifestyle) photo fades into the cover. Every other photo is a regular framed photo: no fade, rounded corners. */
.bg-pdp .bg-cover.packshot .bg-cover-media{-webkit-mask-image:none;mask-image:none;top:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);height:auto;border-radius:26px;overflow:hidden}
.bg-pdp .bg-cover.packshot::after{display:none}
@media(max-width:860px){
.bg-pdp .bg-cover.packshot .bg-cover-media{position:relative;top:auto;bottom:auto;right:auto;width:calc(100% - 28px);margin:14px 14px 0;-webkit-mask-image:none;mask-image:none;border-radius:22px}
.bg-pdp .bg-cover.packshot .bg-cover-inner{margin-top:8px}
}

/* one consistent look for every photo: same soft tint, image fills the frame, no visible edge */
.bg-pdp .bg-cover.packshot .bg-cover-img{padding:0;object-fit:contain}
.bg-pdp .bg-cover-thumbs button:not([data-photo="1"]) img{padding:0}
.bg-pdp .bg-cover-thumbs button{border-width:2px;border-color:transparent}

/* small laptops (861-1180px): give the text more room and keep a framed photo clear of it */
@media(min-width:861px) and (max-width:1180px){
.bg-cover-inner{width:54%;padding-right:12px}
.bg-pdp .bg-cover.packshot .bg-cover-media{top:50%;bottom:auto;height:auto;width:42%;aspect-ratio:1;transform:translateY(-50%)}
.bg-pdp .bg-cover .bg-cover-media{height:100%}
.bg-pdp .bg-cover.packshot .bg-cover-media{height:auto}
}

.bg-cover-inner{padding-block:clamp(20px,2.6vw,40px)}
.bg-cover-inner .bg-pdp-title{margin:8px 0 12px!important}
.bg-cover-inner .bg-pdp-lead{margin-bottom:18px}
.bg-cover-inner .bg-buy.bg-p .bg-sizes{margin-bottom:14px}
.bg-cover-inner .bg-buy.bg-p .bg-pr{margin-bottom:16px}
.bg-cover-inner .bg-buylinks{margin-top:18px}
.bg-cover-thumbs{padding-block:12px 22px}
@media(max-width:860px){.bg-cover{height:auto}}

/* condensed cover text so the whole cover + thumbnails fit on one screen */
@media(min-width:861px){
.bg-cover-inner{padding-block:clamp(16px,2vw,24px)}
.bg-cover-inner .bg-pdp-title{font-size:clamp(34px,3.7vw,52px)!important;margin:6px 0 10px!important}
.bg-cover-inner .bg-pdp-lead{font-size:16px;margin-bottom:14px}
.bg-pdp .bg-cover-inner .bg-buy .bg-sizes{margin-bottom:12px}
.bg-pdp .bg-cover-inner .bg-buy .bg-size{padding:8px 18px;font-size:14px}
.bg-pdp .bg-cover-inner .bg-buy .bg-pr{margin-bottom:14px}
.bg-pdp .bg-cover-inner .bg-buy .bg-pr b{font-size:clamp(30px,3vw,40px)}
.bg-pdp .bg-cover-inner .bg-buy .bg-acts .bg-btn,.bg-pdp .bg-cover-inner .bg-buy .bg-acts .bg-btn:hover{padding:13px 24px;font-size:16px}
.bg-pdp .bg-cover-inner .bg-buy .bg-qty button{width:40px;height:40px}
.bg-cover-inner .bg-buylinks{margin-top:14px;gap:10px}
.bg-cover-inner .bg-buylinks a{width:118px}
.bg-cover-inner .bg-buy-label{margin-bottom:6px}
}
/* short windows (laptops with toolbars): drop the intro line inside the cover */
@media(min-width:861px) and (max-height:760px){
.bg-cover-inner .bg-pdp-lead{display:none}
.bg-cover-inner .bg-pdp-title{font-size:clamp(32px,3.2vw,44px)!important}
}

/* ---------- hero title, quieter buy controls (desktop cover) ---------- */
@media(min-width:861px){
.bg-cover-inner .bg-pdp-title{font-size:clamp(42px,5.2vw,76px)!important;line-height:.94;margin:8px 0 12px!important}
.bg-cover-inner .bg-pdp-lead{font-size:16px;margin-bottom:16px}
/* size chips and price share one row; the button sits below */
.bg-pdp .bg-cover-inner .bg-buy.bg-p{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;max-width:400px}
.bg-pdp .bg-cover-inner .bg-buy .bg-buy-label{width:100%;margin:0;font-size:11px}
.bg-pdp .bg-cover-inner .bg-buy .bg-sizes{margin:0;gap:8px}
.bg-pdp .bg-cover-inner .bg-buy .bg-size{padding:6px 14px;font-size:13px;border-radius:12px}
.bg-pdp .bg-cover-inner .bg-buy .bg-pr{margin:0;gap:10px}
.bg-pdp .bg-cover-inner .bg-buy .bg-pr b{font-size:clamp(24px,2.2vw,30px)}
.bg-pdp .bg-cover-inner .bg-buy .bg-pr s{font-size:14px}
.bg-pdp .bg-cover-inner .bg-buy .bg-pr em{font-size:12px;padding:3px 9px}
.bg-pdp .bg-cover-inner .bg-buy .bg-acts{width:100%;margin-top:4px}
.bg-pdp .bg-cover-inner .bg-buy .bg-acts .bg-btn,.bg-pdp .bg-cover-inner .bg-buy .bg-acts .bg-btn:hover{padding:11px 22px;font-size:15px}
.bg-pdp .bg-cover-inner .bg-buy .bg-qty button{width:36px;height:36px;font-size:18px}
/* "Also available on" and both store buttons on one line */
.bg-cover-inner .bg-buylinks{flex-wrap:nowrap;align-items:center;gap:10px;margin-top:14px}
.bg-cover-inner .bg-buylinks .bg-buy-label{width:auto;margin:0;white-space:nowrap;font-size:11px}
.bg-cover-inner .bg-buylinks a{width:96px;flex:0 0 auto}
}
@media(min-width:861px) and (max-height:760px){
.bg-cover-inner .bg-pdp-title{font-size:clamp(38px,4.6vw,60px)!important}
}

/* ---------- the faded scene photo keeps its position when the cover gets shorter ----------
   It is a fixed share of the cover width (not a square tied to the cover height), so the fade always starts near the middle. */
@media(min-width:861px){
.bg-pdp .bg-cover .bg-cover-media{width:64%;height:100%;aspect-ratio:auto}
.bg-pdp .bg-cover .bg-cover-img{object-position:60% 55%}
/* framed photos stay square, inset, as before */
.bg-pdp .bg-cover.packshot .bg-cover-media{width:auto;height:auto;aspect-ratio:1}
.bg-pdp .bg-cover.packshot .bg-cover-img{object-position:center}
}
@media(min-width:861px) and (max-width:1180px){
.bg-pdp .bg-cover .bg-cover-media{width:60%;height:100%}
.bg-pdp .bg-cover.packshot .bg-cover-media{width:42%;height:auto;aspect-ratio:1}
}
@media(min-width:861px){
.bg-pdp .bg-cover-inner .bg-buy.bg-p{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;text-align:left}
.bg-pdp .bg-cover-inner .bg-buy .bg-sizes{justify-content:flex-start}
}

/* benefit icons: thin line icon in a soft ring, like the Japakusum banner */
.bg-ben-ic{width:54px;height:54px;border-radius:50%;background:rgba(201,232,90,.07);border:1.5px solid rgba(201,232,90,.42);color:var(--lime);display:grid;place-items:center;font-size:22px;margin-bottom:16px;transition:background .25s,border-color .25s}
.bg-ben-ic svg{display:block;width:26px;height:26px}
.bg-ben:hover .bg-ben-ic{background:rgba(201,232,90,.16);border-color:var(--lime)}
.bg-ben-ic{width:62px;height:62px}
.bg-ben-ic svg{width:34px;height:34px}

/* keep the page in the site's greens: the How to use card is lime, not the packaging tint (the tint stays behind the photos only) */
.bg-dose{background:var(--lime)}

/* Biogreen hair icons (PNG line art) shown in the site's lime through a mask */
.bg-icon-img{display:block;width:44px;height:44px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
/* eyebrow labels stay lime on product pages (the page's --acc is the packaging tint, used only behind photos) */
.bg-pdp .bg-eyebrow{color:var(--lime)}
.bg-pdp .bg-dose .bg-eyebrow{color:#0a1d13!important}
.bg-ben-ic{width:72px;height:72px}
.bg-icon-img{width:58px;height:58px}

/* trust icons row (Vegan, GMP, No GMO...): Biogreen's own icons in lime rings */
.bg-certs{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:flex-start;padding-block:6px 40px}
.bg-cert-i{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:15px;font-weight:500}
.bg-cert-ic{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(201,232,90,.42);background:rgba(201,232,90,.07);color:var(--lime);display:grid;place-items:center;flex:0 0 auto}
.bg-cert-ic .bg-icon-img{width:30px;height:30px}
.bg-cert-ic svg{width:24px;height:24px}
@media(max-width:860px){.bg-certs{gap:12px 20px}}

/* stronger fade behind the text when the scene has a bright object on the left */
@media(min-width:861px){
.bg-cover.shade-strong::after{background:linear-gradient(90deg,rgba(10,29,19,.96) 0,rgba(10,29,19,.9) 32%,rgba(10,29,19,.55) 50%,rgba(10,29,19,0) 68%)}
}
@media(max-width:860px){.bg-cover.shade-strong .bg-cover-media{-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);mask-image:linear-gradient(to bottom,#000 45%,transparent 100%)}}
/* strong-shade scenes: the photo starts a little further right so a bright bottle never sits under the buttons */
@media(min-width:861px){.bg-pdp .bg-cover.shade-strong .bg-cover-media{width:57%}}