/* ==========================================================================
Bear Biotech — consolidated fixpack stylesheet
Version: 20260803-hoodie-removal1
Supersedes: bearbiotech-alignment-patch.css, bearbiotech-consistency-patch.css
(delete those files/links if they were ever added — this file replaces both)
Load order on EVERY page, AFTER existing stylesheets:
(adjust relative prefix to ../assets/... on compounds/*.html)
Contents:
S0 Design tokens + global alignment primitives
S1 Header / controls (Improvement 1-2)
S2 Homepage (Improvements 3-5, hoodie block removed)
S3 Shop catalogue (Improvement 6)
S4 Compound hero + navy vial panel (owner mockup)
S5 "Choose a format" vial cards — the selection UI (owner mockup)
S6 Service info cards: batch documentation / express delivery
S7 Reference columns, dark research banner, related entries
S8 Compound guide (Improvement 7)
S9 Policy / delivery (Improvement 8)
S10 Portal / account (Improvement 9)
S11 Cart + footer (Improvement 10)
S12 Responsive
========================================================================== */
:root {
--bb-header-h: 72px;
--bb-container: 1180px;
--bb-wide: 1320px;
--bb-gap: 16px;
--bb-line: #c7c9ca;
--bb-ink: #151618;
--bb-muted: #66696d;
--bb-panel: #eef0f1;
--bb-public-hero-background:
radial-gradient(circle at 72% 42%, rgba(47, 112, 170, 0.22), transparent 36%),
linear-gradient(115deg, #061a33 0%, #0a294b 58%, #123f6c 100%);
}
/* ==========================================================================
S20 · Homepage composition matched to the approved reference
========================================================================== */
.home-hero.home-hero--visual .home-hero__scene {
grid-template-columns: minmax(370px, 1.08fr) minmax(275px, 0.78fr) minmax(150px, 0.42fr) minmax(240px, 0.72fr);
align-items: center;
min-height: clamp(390px, 33vw, 440px);
padding-top: 20px;
padding-bottom: 20px;
}
.home-hero.home-hero--visual .home-hero__copy {
position: relative;
z-index: 8;
align-self: center;
max-width: 500px;
padding: 26px 0 34px;
}
.home-hero.home-hero--visual .home-hero__copy .eyebrow {
margin: 0 0 15px;
color: #dbe8fb;
font-size: 0.68rem;
letter-spacing: 0.16em;
}
.home-hero.home-hero--visual .home-hero__copy h1 {
max-width: 9.5em;
margin: 0;
color: #fff;
font-size: clamp(3rem, 4.25vw, 4.15rem);
letter-spacing: -0.052em;
line-height: 0.91;
text-wrap: balance;
text-transform: uppercase;
}
.home-hero.home-hero--visual .home-hero__copy > p:last-of-type {
max-width: 470px;
margin: 18px 0 0;
color: #e0e8f2;
font-size: 0.94rem;
line-height: 1.5;
}
.home-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.home-hero__actions .btn {
min-width: 126px;
min-height: 46px;
padding: 12px 20px;
border-radius: 0;
}
.home-hero.home-hero--visual .home-hero__bear-art {
justify-self: center;
width: min(430px, 34vw);
margin: 0 -19% -7% -21%;
}
.home-hero.home-hero--visual .home-hero__bear-art img { height: clamp(350px, 34vw, 430px); }
.home-hero.home-hero--visual .home-hero__vial-art {
width: clamp(205px, 19vw, 250px);
margin: 0 -42% 4% -48%;
}
.home-hero.home-hero--visual .home-hero__australia {
width: min(390px, 30vw);
margin-right: -5%;
}
@media (max-width: 900px) {
.home-hero.home-hero--visual .home-hero__scene {
grid-template-columns: minmax(330px, 1.05fr) minmax(235px, 0.72fr) minmax(125px, 0.4fr);
min-height: clamp(390px, 49vw, 440px);
}
.home-hero.home-hero--visual .home-hero__copy h1 { font-size: clamp(2.75rem, 5.5vw, 3.35rem); }
.home-hero.home-hero--visual .home-hero__bear-art { width: min(350px, 38vw); margin-left: -20%; }
.home-hero.home-hero--visual .home-hero__bear-art img { height: clamp(330px, 43vw, 390px); }
.home-hero.home-hero--visual .home-hero__vial-art { width: clamp(185px, 23vw, 220px); margin-left: -52%; }
.home-hero.home-hero--visual .home-hero__australia {
position: absolute;
z-index: 0;
right: -12%;
width: min(380px, 39vw);
opacity: 0.72;
}
}
@media (max-width: 620px) {
.home-hero.home-hero--visual .home-hero__scene {
grid-template-columns: minmax(0, 1fr) minmax(100px, 0.38fr);
grid-template-rows: auto minmax(300px, auto);
min-height: 0;
width: 100%;
padding-top: 28px;
padding-bottom: 0;
}
.home-hero.home-hero--visual .home-hero__copy {
grid-column: 1 / -1;
grid-row: 1;
padding: 0;
}
.home-hero.home-hero--visual .home-hero__copy h1 {
max-width: 8.6em;
font-size: clamp(2.6rem, 13vw, 3.65rem);
}
.home-hero.home-hero--visual .home-hero__copy > p:last-of-type { max-width: 36em; font-size: 0.9rem; }
.home-hero__actions .btn { flex: 1 1 145px; }
.home-hero.home-hero--visual .home-hero__bear-art {
grid-column: 1;
grid-row: 2;
width: min(360px, 86vw);
margin: 0 -34% -5% -22%;
}
.home-hero.home-hero--visual .home-hero__bear-art img { height: clamp(300px, 82vw, 360px); }
.home-hero.home-hero--visual .home-hero__vial-art {
grid-column: 2;
grid-row: 2;
width: clamp(170px, 48vw, 220px);
margin: 0 0 7% -58%;
}
.home-hero.home-hero--visual .home-hero__australia {
top: 44%;
right: -28%;
width: 74vw;
}
}
/* ==========================================================================
S19 · Image-free, purchase-led product detail pages (2026-08-05)
One shared hierarchy across every generated catalogue page:
identity -> selectable formats -> service facts -> research/details.
========================================================================== */
.seo-compound-page .seo-product-stage--purchase {
padding-bottom: clamp(48px, 6vw, 76px);
border-bottom: 0;
color: #fff;
background:
radial-gradient(circle at 82% 22%, rgba(116, 173, 224, 0.16), transparent 31%),
linear-gradient(118deg, #07192d 0%, #0b2d50 64%, #071b32 100%);
}
.seo-compound-page .seo-product-stage--purchase .seo-breadcrumb {
padding-top: 22px;
padding-bottom: clamp(28px, 4vw, 48px);
color: rgba(255, 255, 255, 0.64);
}
.seo-compound-page .seo-product-stage--purchase .seo-breadcrumb a { color: rgba(255, 255, 255, 0.82); }
.seo-compound-page .seo-product-stage--purchase .seo-breadcrumb strong { color: #fff; }
.seo-product-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(290px, 390px);
gap: clamp(34px, 7vw, 92px);
align-items: end;
}
.seo-product-heading__copy { min-width: 0; }
.seo-product-heading__copy .eyebrow { color: #b6cce0; }
.seo-product-heading__copy h1 {
max-width: 12ch;
margin: 8px 0 14px;
color: #fff;
font-size: clamp(3.3rem, 7vw, 6.2rem);
line-height: 0.88;
letter-spacing: -0.065em;
overflow-wrap: normal;
word-break: normal;
text-wrap: balance;
}
.seo-product-heading__intro {
max-width: 62ch;
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: clamp(0.98rem, 1.5vw, 1.14rem);
line-height: 1.55;
}
.seo-product-heading__topics {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.seo-product-heading__topics li {
padding: 7px 11px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
color: rgba(255, 255, 255, 0.82);
background: rgba(255, 255, 255, 0.055);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.055em;
}
.seo-product-heading__summary {
display: grid;
gap: 10px;
padding: clamp(22px, 3vw, 30px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
background: rgba(255, 255, 255, 0.075);
box-shadow: 0 24px 55px rgba(0, 6, 18, 0.18);
}
.seo-product-heading__summary > span {
color: #a9c6e0;
font-size: 0.67rem;
font-weight: 850;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.seo-product-heading__summary > strong {
max-width: 23ch;
color: #fff;
font-size: clamp(1.2rem, 2vw, 1.55rem);
line-height: 1.13;
}
.seo-product-heading__summary p {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: 0.86rem;
line-height: 1.55;
}
.seo-product-heading__summary small {
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.56);
font-size: 0.7rem;
}
.seo-compound-page .seo-format-section--purchase {
position: relative;
z-index: 2;
margin-top: -28px;
padding: clamp(24px, 4vw, 42px);
border: 1px solid #cfd4d8;
border-radius: 18px;
background: #fff;
box-shadow: 0 20px 50px rgba(10, 25, 42, 0.11);
}
.seo-format-section--purchase .seo-format-section__head {
display: grid;
grid-template-columns: minmax(0, 0.75fr) minmax(320px, 1fr);
column-gap: clamp(28px, 6vw, 80px);
align-items: end;
margin-bottom: 24px;
}
.seo-format-section--purchase .seo-format-section__head .eyebrow {
grid-column: 1 / -1;
margin-bottom: 8px;
}
.seo-format-section--purchase .seo-format-section__head h2 {
margin: 0;
font-size: clamp(2.1rem, 4vw, 3.65rem);
line-height: 0.96;
letter-spacing: -0.05em;
}
.seo-format-section--purchase .seo-format-section__head > p:last-child {
max-width: 62ch;
margin: 0 0 4px;
font-size: 0.9rem;
line-height: 1.55;
}
.seo-format-section--purchase .seo-format-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
}
.seo-format-section--purchase .seo-format-card {
max-width: none;
border-color: #d7dbde;
border-radius: 12px;
background: #f7f8f8;
}
.seo-format-section--purchase .seo-format-card__buy { margin-top: auto; }
.seo-format-section--purchase .seo-purchase-reassurance {
padding-top: 17px;
border-top: 1px solid #e0e3e5;
}
.seo-compound-page .seo-info-cards {
gap: 12px;
padding-top: clamp(28px, 4vw, 44px);
}
.seo-compound-page .seo-info-cards article {
padding: clamp(18px, 2.3vw, 24px);
border-radius: 12px;
}
.seo-compound-page .seo-info-cards__icon { width: 40px; height: 40px; border-radius: 10px; }
.seo-compound-page .seo-info-cards__icon svg { width: 20px; height: 20px; }
.seo-product-information {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
gap: 14px;
align-items: start;
padding-top: clamp(28px, 4vw, 46px);
padding-bottom: clamp(42px, 5vw, 64px);
}
.seo-product-information > article {
min-width: 0;
padding: clamp(24px, 3vw, 34px);
border: 1px solid #d2d6d8;
border-radius: 14px;
background: #fff;
}
.seo-product-information .eyebrow { margin-bottom: 7px; }
.seo-product-information h2 {
margin: 0 0 16px;
font-size: clamp(1.55rem, 2.5vw, 2.25rem);
line-height: 1;
letter-spacing: -0.035em;
}
.seo-product-information p {
color: #505356;
font-size: 0.86rem;
line-height: 1.62;
}
.seo-product-information .compound-card__evidence {
display: grid;
gap: 5px;
padding-top: 14px;
border-top: 1px solid #d8dbdc;
font-size: 0.8rem;
}
.seo-product-information .compound-card__evidence strong {
color: #13243c;
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.seo-product-information a { color: #151618; font-weight: 800; }
.seo-product-information .seo-spec-grid {
grid-template-columns: 1fr;
border: 0;
}
.seo-product-information .seo-spec-grid > div {
min-height: 0;
gap: 4px;
padding: 10px 0;
border-right: 0;
background: transparent;
}
.seo-product-information .seo-spec-grid dd {
font-size: 0.85rem;
overflow-wrap: normal;
word-break: normal;
}
.seo-account-inline {
display: grid;
gap: 7px;
margin-top: 20px;
padding: 18px;
border-radius: 10px;
color: #fff;
background: #13243c;
}
.seo-account-inline strong { color: #fff; }
.seo-account-inline p { margin: 0; color: rgba(255, 255, 255, 0.72); }
.seo-account-inline a { color: #fff; font-size: 0.82rem; }
.seo-compound-page .seo-product-faqs { padding-top: clamp(36px, 4vw, 52px); }
.seo-compound-page .seo-product-faqs > h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); }
.seo-compound-page .seo-related > .seo-related-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
.seo-compound-page .seo-related .seo-related-card {
display: block;
min-height: 0;
padding: 22px;
}
.seo-compound-page .seo-related-card__body {
display: flex;
min-width: 0;
height: 100%;
flex-direction: column;
align-items: flex-start;
}
.seo-compound-page .seo-related .seo-related-card h3,
.seo-compound-page .seo-related .seo-related-card p,
.seo-compound-page .seo-related .seo-related-card a {
overflow-wrap: normal;
word-break: normal;
}
.seo-compound-page .seo-related .seo-related-card__body > strong { margin-top: auto; }
.seo-compound-page .seo-related .seo-related-card__action { margin-top: 12px; }
/* The supplied homepage reference uses a calm standing bear, not the former
charging/leaping brand mark. Its transparent padding is accounted for here. */
.home-hero.home-hero--visual .home-hero__bear-art {
width: min(550px, 43vw);
margin: 0 -25% -4% -17%;
}
.home-hero.home-hero--visual .home-hero__bear-art img {
height: clamp(430px, 39vw, 500px);
filter: saturate(0.62) brightness(0.92) contrast(1.08) drop-shadow(0 24px 26px rgba(0, 5, 15, 0.45));
}
@media (max-width: 900px) {
.seo-product-heading { grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: 28px; }
.seo-product-information { grid-template-columns: 1fr; }
.seo-compound-page .seo-related > .seo-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-hero.home-hero--visual .home-hero__bear-art { width: min(500px, 53vw); margin-left: -17%; }
.home-hero.home-hero--visual .home-hero__bear-art img { height: clamp(390px, 51vw, 455px); }
}
@media (max-width: 700px) {
.seo-product-heading { grid-template-columns: 1fr; }
.seo-product-heading__copy h1 { font-size: clamp(2.9rem, 14vw, 4.6rem); }
.seo-product-heading__summary { padding: 20px; }
.seo-format-section--purchase .seo-format-section__head { grid-template-columns: 1fr; gap: 9px; }
.seo-compound-page .seo-info-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.seo-compound-page .seo-format-section--purchase { margin-top: -18px; padding: 20px 16px; border-radius: 14px; }
.seo-compound-page .seo-related > .seo-related-grid { grid-template-columns: 1fr; }
.home-hero.home-hero--visual .home-hero__bear-art {
width: min(390px, 92vw);
margin: 0 -34% -3% -16%;
}
.home-hero.home-hero--visual .home-hero__bear-art img { height: clamp(325px, 87vw, 390px); }
}
/* ------------------------- S0 · Global primitives ------------------------ */
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--bb-header-h) + 24px);
}
body { text-rendering: optimizeLegibility; }
section, article, aside, [id] { scroll-margin-top: calc(var(--bb-header-h) + 24px); }
h1, h2, h3 { overflow-wrap: anywhere; }
img { max-width: 100%; }
.eyebrow { margin: 0; }
.section-lede { max-width: 780px; }
.product-grid,
.home-featured-grid,
.home-benefit-grid,
.compound-reference__grid,
.account-summary-grid,
.account-resource-grid,
.delivery-coverage-grid,
.built-within-info-grid {
grid-auto-rows: 1fr;
}
.catalogue-card,
.home-product-tile,
.compound-card,
.seo-format-card,
.seo-related-card,
.account-summary-grid article,
.account-resource-grid button {
min-width: 0;
}
/* ------------------- S1 · Header / controls (Impr. 1-2) ------------------ */
.site-header .nav { min-height: var(--bb-header-h); align-items: center; }
.nav-links { align-items: center; }
.nav-cta,
.cart-toggle,
.btn,
.filter-button,
.cart-summary {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.btn-block { width: 100%; }
/* --------------------- S2 · Homepage (Impr. 3-5) ------------------------- */
.home-page .container { width: min(var(--bb-container), 92%); }
/* Compact banner hero: no forced viewport height, content-sized padding,
bear contained beside the headline block. */
.home-hero { min-height: 0; overflow: clip; }
/* Watermark bear restored: clearly visible but tasteful (opacity 0.20),
anchored to the right side behind the hero content. The mask is recentered
on the bear with a large solid core and a gentle falloff so the silhouette
reads clearly on dim displays instead of fading away. */
.home-hero::after {
opacity: 0.2;
background-position: 84% 52%;
background-size: min(820px, 58vw) auto;
-webkit-mask-image: radial-gradient(ellipse 58% 90% at 78% 50%, #000 52%, rgba(0,0,0,0.72) 80%, transparent 100%);
mask-image: radial-gradient(ellipse 58% 90% at 78% 50%, #000 52%, rgba(0,0,0,0.72) 80%, transparent 100%);
}
.home-hero__grid {
grid-template-columns: minmax(0, 1.04fr) minmax(280px, 0.96fr);
align-items: center;
min-height: 0;
padding-block: clamp(36px, 4.5vw, 64px);
}
/* Owner-approved mockup: a second, large pale watermark bear behind the LEFT
side of the hero, behind the "Clear formats. Controlled records." headline
block. Rendered as a pseudo-element of the hero grid (the grid is the
z-index:1 content layer, so z-index:-1 keeps the bear behind the headline
but above the hero's gradient background). Opacity 0.10 with a soft radial
mask keeps the black headline perfectly readable. */
.home-hero__grid::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
background: url("../img/bear-hero-silver-anime.webp?v=20260730") 15% 45% / min(640px, 44vw) auto no-repeat;
opacity: 0.1;
filter: grayscale(0.9) contrast(1.04) brightness(1.02);
mix-blend-mode: multiply;
-webkit-mask-image: radial-gradient(ellipse 54% 82% at 22% 46%, #000 44%, rgba(0,0,0,0.7) 74%, transparent 100%);
mask-image: radial-gradient(ellipse 54% 82% at 22% 46%, #000 44%, rgba(0,0,0,0.7) 74%, transparent 100%);
}
.home-hero__bear { justify-self: end; width: 100%; max-width: 460px; }
.home-hero__bear img { width: min(100%, 380px); max-width: 100%; max-height: 400px; object-fit: contain; transform: none; }
/* Featured-section watermark bear at the right edge, same clearly-visible
treatment as the hero (0.17 under the tile grid); mask recentered on the
bear with a large solid core and gentle falloff. */
.home-featured-shell::before {
opacity: 0.17;
background-position: 84% 30%;
background-size: min(920px, 64vw) auto;
-webkit-mask-image: radial-gradient(ellipse 68% 92% at 76% 40%, #000 52%, rgba(0,0,0,0.68) 80%, transparent 100%);
mask-image: radial-gradient(ellipse 68% 92% at 76% 40%, #000 52%, rgba(0,0,0,0.68) 80%, transparent 100%);
}
.home-featured-bear { top: 6px; right: 2.5%; width: clamp(120px, 14vw, 190px); opacity: 0.2; }
/* Section head shares one baseline: heading baseline == action-link baseline
("last baseline" aligns the h2 baseline, flex-end is the fallback). */
.home-section__head { align-items: flex-end; align-items: last baseline; gap: 28px; }
.home-featured-actions { align-self: auto; padding-bottom: 0; }
.home-featured-actions .text-link, .home-section__head > .text-link { white-space: nowrap; }
/* No side padding: the grid's outer tile edges share the section-head
container line exactly (measured 2px inset at 1440px before this fix). */
.home-featured-grid { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bb-gap); align-items: stretch; justify-items: stretch; overflow: visible; padding: 0; }
.home-product-tile { display: flex; flex-direction: column; height: 100%; }
.home-product-tile__image { height: auto; aspect-ratio: 4 / 4.6; padding: clamp(18px, 2vw, 28px); }
.home-product-tile__photo, .home-product-tile .brochure-vial { width: 100%; height: 100%; max-height: 100%; object-fit: contain; background-size: contain; }
/* Unified tile vial: every featured tile shows the same branded master vial
with the compound-page overlay label (light chip, dark text). The wrapper
is a centred square so the label percentages land on the master's printed
label band (same measurement as the S5 overlay: band ≈ top 42–61%). */
.home-product-tile__vial {
position: relative;
container-type: inline-size;
width: 100%;
aspect-ratio: 1 / 1;
}
.home-product-tile__vial .home-product-tile__photo { display: block; width: 100%; height: 100%; }
.home-product-tile__vial > .bb-vial { width: 100%; height: 100%; }
.vial-overlay-label {
position: absolute;
top: 42.5%;
left: 34%;
z-index: 2;
display: flex;
overflow: hidden;
width: 32%;
height: 18%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.12em;
border: 1px solid rgba(26, 26, 26, 0.16);
color: #1a1a1a;
background: rgba(248, 248, 246, 0.96);
text-align: center;
text-transform: uppercase;
pointer-events: none;
}
.vial-overlay-label em { font-size: 2.4cqw; font-style: normal; font-weight: 800; letter-spacing: 0.08em; }
.vial-overlay-label strong { max-width: 96%; font-size: 4cqw; line-height: 1.02; letter-spacing: -0.01em; }
.vial-overlay-label b {
padding: 0.14em 0.42em;
border: 1px solid rgba(26, 26, 26, 0.42);
font-size: 3.4cqw;
line-height: 1;
white-space: nowrap;
}
/* Compound artwork uses the supplied product-specific full-vial files. Bottle
framing is consistent, while every compound retains its own label system. */
.bb-vial {
display: block;
width: 100%;
max-width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f3f3f5;
}
.bb-vial__photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.bb-vial.is-unavailable { filter: grayscale(1); opacity: 0.48; }
/* Tile copy runs as a flex column with fixed-height slots: format line and
name reserve two lines each, price and pill stack in order, and the action
row is pinned to the bottom — so names, prices, pills and CTAs align across
every tile in a row regardless of text length. */
.home-product-tile__copy { flex: 1; display: flex; flex-direction: column; min-height: 138px; padding: 14px 14px 15px; }
.home-product-tile__copy small { flex: 0 0 auto; min-height: 2.7em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-product-tile__copy strong { flex: 0 0 auto; margin-top: 6px; min-height: 2.35em; line-height: 1.18; }
.home-product-tile__copy em { margin-top: 0; padding-top: 8px; font-style: normal; }
/* Account benefits now stand alone — the hoodie reward column is removed
(FIX 1). The benefit grid takes the full width, two columns on desktop. */
.home-account-benefits-layout { display: block; }
.home-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bb-gap); }
/* Owner request: the registered-access section head is centred — eyebrow and
"One account for the order trail." share the section centre line, and the
"Register →" link sits centred beneath them. */
.home-account-benefits .home-section__head {
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
/* Process strip: the three trust cells plus delivery become ONE connected
order-flow row — steps joined by arrow separators, left to right.
Mobile stacks the steps and rotates the arrow down. */
.home-flow__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-flow__grid p {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 14px;
align-items: center;
}
.home-flow__grid p strong, .home-flow__grid p span { grid-column: 1; }
.home-flow__grid p::after {
content: "→";
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
color: #8f9295;
font-size: 1.05rem;
line-height: 1;
}
.home-flow__grid p:last-child::after { content: none; }
/* Typography harmonization: one label treatment across the homepage,
matching the compound pages (uppercase, 0.72rem, 0.14em, 600). */
.home-page .eyebrow,
.home-trust__grid strong,
.home-product-tile__copy small {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* "Private by design" highlight: three confidential payment/posting cards
reusing the benefit-grid frame, one row on desktop, stacked on mobile. */
.home-privacy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-privacy-grid article { min-height: 0; height: 100%; border-bottom: 0; }
/* Dividers between every pair of cards (was: only after the middle card). */
.home-privacy-grid article:not(:last-child) { border-right: 1px solid #c4c6c8; }
.home-privacy-grid strong {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ---------------------- S3 · Shop catalogue (Impr. 6) -------------------- */
.shop-page .shop-head {
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
align-items: end;
padding-top: clamp(36px, 5vw, 64px);
}
.shop-page .shop-head .section-lede { align-self: end; margin: 0; }
/* One container line for the whole shop page: head, catalogue and guide
panels share the standard container the nav, RPO banner and footer use
(measured at 1440px before this fix: panels ran 60–1380 while nav,
RPO banner and footer ran 180–1260 — a 120px edge jump per side).
Head and catalogue panels also share one inline padding so the "Research
compounds" heading edge matches the card-grid edge (was 54px vs 34px). */
.shop-page .shop-head--catalogue,
.shop-page .shop-section.container,
.shop-page .catalogue-guide.container { width: min(1080px, 92%); }
.shop-page .shop-head--catalogue { padding-inline: clamp(18px, 2.5vw, 34px); }
@media (min-width: 1500px) {
.shop-page .shop-head--catalogue,
.shop-page .shop-section.container,
.shop-page .catalogue-guide.container { width: min(1080px, 92%); }
.shop-section .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.shop-toolbar { align-items: center; flex-wrap: wrap; row-gap: 12px; }
.shop-toolbar .filter-group { align-items: center; }
.catalogue-results { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.shop-section .product-grid { gap: 18px; align-items: stretch; overflow: visible; }
.shop-section .catalogue-card { display: flex; flex-direction: column; height: 100%; }
.shop-section .catalogue-card__visual,
.shop-section .catalogue-card--essential .product-image {
height: auto;
aspect-ratio: 4 / 3.35;
display: grid;
place-items: center;
padding: clamp(18px, 2.4vw, 28px);
}
.shop-section .catalogue-card__visual .catalogue-product-photo,
.shop-section .catalogue-card__visual .brochure-vial,
.shop-section .catalogue-card--essential .product-image img {
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
background-size: contain;
}
/* Unified catalogue vial: same branded master + overlay label chip as the
homepage tiles. The catalogue frame is wider than tall, so the square
wrapper is sized by height here (width is the limit on homepage tiles).
This rule must outrank the width:100% photo rule above. */
.shop-section .catalogue-card__visual .catalogue-product-vial,
.shop-section .product-image .catalogue-product-vial {
position: relative;
container-type: inline-size;
display: block;
width: auto;
height: 100%;
max-width: 100%;
aspect-ratio: 1 / 1;
margin-inline: auto;
}
.shop-section .catalogue-product-vial img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.shop-section .catalogue-product-vial > .bb-vial { width: 100%; height: 100%; }
.shop-section .catalogue-card__body,
.shop-section .catalogue-card--essential .product-info {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.shop-section .catalogue-card__summary,
.shop-section .catalogue-card--essential .product-research-note {
min-height: 3.05em;
-webkit-line-clamp: 2;
}
.shop-section .catalogue-card__footer,
.shop-section .catalogue-card--essential .product-buy {
margin-top: auto;
}
.shop-section .catalogue-card__footer .btn,
.shop-section .catalogue-card--essential .product-buy .btn { width: 100%; }
/* ------------ S4 · Compound hero + navy vial panel (owner mockup) ---------
Owner-approved mockup layout: the media rail, strengths-at-a-glance module
and the separate strength detail table are gone. The page opens with a
hero — title and identity copy left, the compound's exact product vial on
a navy panel right, with a pale crystalline-bear watermark masked behind
the vial area. */
.seo-compound-hero {
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
align-items: stretch;
gap: clamp(24px, 4vw, 72px);
padding-block: clamp(18px, 2.6vw, 34px) clamp(26px, 3vw, 44px);
}
.seo-compound-hero__copy { min-width: 0; max-width: 660px; align-self: center; }
/* Sized like the title this hero replaces in the purchase panel (was
clamp(3rem, 4.5vw, 4.75rem)); the base h1 display size would overflow
narrow viewports. */
.seo-compound-hero__copy h1 {
margin: 5px 0 9px;
font-size: clamp(2.6rem, 7vw, 4.75rem);
line-height: 0.92;
overflow-wrap: break-word;
}
.seo-compound-hero__intro { margin: 0; max-width: 58ch; }
.seo-compound-hero__topics {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.seo-compound-hero__topics li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border: 1px solid #b7babb;
border-radius: 999px;
color: #343638;
background: rgba(255, 255, 255, 0.72);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
}
.seo-compound-hero__topics li::before {
content: "";
width: 7px;
height: 7px;
border: 1.5px solid #13243c;
transform: rotate(45deg);
}
.seo-compound-hero__media {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
padding: clamp(22px, 3vw, 40px);
border-radius: 18px;
border: 1px solid #d2d6d8;
background: #f3f3f5;
}
.seo-compound-hero__media .bb-vial { width: min(100%, 360px); }
/* --------- S5 · "Choose a format" cards — the selection UI ----------------
Each released catalogue option is one vial card (per-strength art, or the
generic master with the overlay-label chip); planned strengths with no
released format render greyscaled with "Price unavailable". main.js
toggles every released card between the filled dark-navy status pill and
the working add-to-cart controls from the live checkout configuration,
so an unreleased option never offers a purchase action. */
.seo-format-section { padding-top: clamp(34px, 4.5vw, 56px); }
.seo-format-section__head { margin-bottom: 20px; }
.seo-format-section__head h2 { margin: 0 0 6px; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.02em; }
.seo-format-section__head p { margin: 0; color: var(--bb-muted); font-size: 0.85rem; }
.seo-format-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 14px;
}
.seo-format-card {
display: flex;
min-width: 0;
width: 100%;
max-width: 340px;
flex-direction: column;
gap: 12px;
padding: 18px;
border: 1px solid #d2d6d8;
border-radius: 14px;
background: #fff;
}
.seo-format-card__head h3 { margin: 0; font-size: 1.12rem; }
.seo-format-card__head p { margin: 3px 0 0; color: var(--bb-muted); font-size: 0.8rem; }
.seo-format-card__media {
position: relative;
container-type: inline-size;
height: clamp(150px, 13vw, 185px);
aspect-ratio: 1 / 1;
margin-inline: auto;
}
.seo-format-card__media > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.seo-format-card__media .bb-vial { width: 100%; height: 100%; }
.seo-format-card__price { font-size: 1.02rem; font-weight: 800; }
.seo-format-card__pill,
.seo-related-card__pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 6px 12px;
border-radius: 999px;
color: #fff;
background: #13243c;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1.3;
text-align: center;
text-transform: uppercase;
}
.seo-format-card__pill--pending { color: #4a4d50; background: #eceeef; }
.seo-format-card.is-unavailable .seo-format-card__media > img { filter: grayscale(1); opacity: 0.5; }
.seo-format-card.is-unavailable .vial-overlay-label { opacity: 0.72; }
.seo-format-card.is-unavailable .seo-format-card__price { color: #7a7d80; font-weight: 600; }
.seo-format-card__buy { display: grid; gap: 10px; }
.seo-format-card__buy > label {
display: grid;
gap: 6px;
color: #313335;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.seo-format-card__buy select {
width: 100%;
min-height: 40px;
padding: 8px 34px 8px 10px;
border: 1px solid #aeb1b3;
border-radius: 8px;
background: #fff;
color: #151618;
}
.seo-format-card__buy .product-buy { display: block; grid-column: 1 / -1; grid-row: auto; margin: 0; }
.seo-format-card__buy [data-add-cart] { width: 100%; }
/* The preparation summary and bacteriostatic-water add-on only make sense
once the card is purchasable; hidden while the status pill is showing. */
.seo-format-card:not(.is-purchasable) .preparation-choice { display: none; }
.seo-format-card .preparation-choice__summary { margin: 0; font-size: 0.74rem; }
.seo-purchase-reassurance {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 18px;
}
.seo-purchase-reassurance a {
color: #343638;
font-size: 0.78rem;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
/* --------- S6 · Service info cards (batch docs / delivery) --------------- */
.seo-info-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
padding-top: clamp(30px, 4vw, 48px);
}
.seo-info-cards article {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 16px;
align-items: start;
padding: clamp(20px, 2.6vw, 28px);
border: 1px solid #d2d6d8;
border-radius: 14px;
background: #fff;
}
.seo-info-cards__icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 12px;
color: #fff;
background: #13243c;
}
.seo-info-cards__icon svg { width: 24px; height: 24px; }
.seo-info-cards h2 { margin: 0 0 6px; font-size: 1.12rem; }
.seo-info-cards p { margin: 0 0 8px; color: #505356; font-size: 0.85rem; line-height: 1.55; }
.seo-info-cards p:last-child { margin-bottom: 0; }
.seo-info-cards a { color: #151618; font-size: 0.85rem; font-weight: 800; }
/* ---- S7 · Reference columns, dark research banner, related entries ------- */
.seo-compound-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
padding-top: clamp(30px, 4vw, 48px);
padding-bottom: clamp(34px, 4.5vw, 56px);
}
.seo-compound-columns > article {
min-width: 0;
padding: clamp(20px, 2.6vw, 28px);
border: 1px solid #d2d6d8;
border-radius: 14px;
background: #fff;
}
.seo-compound-columns h2 { margin: 0 0 12px; font-size: 1.12rem; }
.seo-compound-columns p { color: #505356; font-size: 0.85rem; line-height: 1.6; }
.seo-compound-columns .compound-card__evidence {
display: grid;
gap: 5px;
padding-top: 12px;
border-top: 1px solid #d8dbdc;
font-size: 0.8rem;
}
.seo-compound-columns .compound-card__evidence strong {
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.seo-compound-columns a { color: #151618; font-size: 0.85rem; font-weight: 800; }
.compound-research-links {
display: grid;
gap: 10px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #d8dbdc;
}
.compound-research-links .compound-research-links__label {
margin: 0;
color: #13243c;
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.compound-research-links > p { margin: 0; }
.compound-research-links ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.compound-research-links li { display: grid; gap: 3px; }
.compound-research-links li a { line-height: 1.4; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.compound-research-links li span {
color: #666a6e;
font-size: 0.76rem;
line-height: 1.45;
}
.compound-research-links .compound-research-links__caveat,
.compound-research-links .compound-research-links__boundary {
padding: 10px 12px;
border-radius: 8px;
background: #f2f4f6;
font-size: 0.74rem;
line-height: 1.5;
}
.seo-compound-columns .seo-spec-grid { grid-template-columns: 1fr; border-top: 0; border-left: 0; }
.seo-compound-columns .seo-spec-grid > div {
min-height: 0;
gap: 4px;
padding: 10px 0;
border-right: 0;
background: transparent;
}
.seo-compound-columns .seo-spec-grid dd { font-size: 0.85rem; }
.seo-research-boundary {
margin-bottom: 0;
padding: 0;
border-left: 0;
color: #fff;
background: linear-gradient(120deg, #142539, #0d1826);
}
.seo-research-boundary__inner {
display: flex;
align-items: center;
gap: 18px;
padding-block: 26px;
}
.seo-research-boundary__icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 12px;
}
.seo-research-boundary__icon svg { width: 22px; height: 22px; }
.seo-research-boundary strong { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.seo-research-boundary p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 0.82rem; }
.seo-related > .seo-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seo-related .seo-related-card {
display: grid;
min-height: 0;
grid-template-columns: 92px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 14px;
border: 1px solid #d2d6d8;
border-radius: 14px;
background: #fff;
}
.seo-related-card__media {
display: grid;
place-items: center;
align-self: stretch;
border-radius: 10px;
background: #eef0f2;
}
.seo-related-card__media > img,
.seo-related-card__media > svg { width: 100%; height: 110px; object-fit: contain; }
.seo-related-card__media .bb-vial { width: 92px; max-width: 100%; }
.seo-related-card__body { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.seo-related .seo-related-card h3 { margin: 0 0 3px; font-size: 1rem; }
.seo-related .seo-related-card p { margin: 0 0 8px; font-size: 0.76rem; }
.seo-related .seo-related-card__body > strong { margin: 0 0 8px; font-size: 0.85rem; }
.seo-related-card__pill { min-height: 26px; margin-bottom: 8px; padding: 4px 10px; font-size: 0.6rem; }
.seo-related .seo-related-card__action { margin-top: 0; font-size: 0.8rem; }
.seo-related .seo-related-card.is-unavailable .seo-related-card__media > img,
.seo-related .seo-related-card.is-unavailable .seo-related-card__media > .bb-vial { filter: grayscale(1); opacity: 0.55; }
/* ------------------- S8 · Compound guide (Impr. 7) ----------------------- */
.compound-guide-page .compound-guide-hero { position: relative; overflow: clip; }
.compound-guide-page .compound-guide-hero > :not(.compound-guide-hero__bear) { position: relative; z-index: 1; max-width: min(760px, 74%); }
.compound-guide-hero__bear { position: absolute; z-index: 0; top: 18px; right: 3%; width: clamp(180px, 24vw, 320px); opacity: 0.92; }
.compound-guide-page .compound-reference__head { align-items: end; gap: 24px; }
.compound-card { display: flex; flex-direction: column; height: 100%; }
.compound-card__link { margin-top: auto; }
.guide-layout { align-items: start; }
.guide-panel { top: calc(var(--bb-header-h) + 28px); }
/* ----------------- S9 · Policy / delivery (Impr. 8) ---------------------- */
.policy-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
gap: clamp(24px, 5vw, 72px);
align-items: end;
}
.policy-hero__summary { align-self: end; }
.policy-layout { align-items: start; }
.policy-nav { position: sticky; top: calc(var(--bb-header-h) + 28px); }
.policy-content { max-width: 900px; }
.policy-section p, .policy-section li { max-width: 82ch; }
.policy-section h2, .policy-section h3 { text-wrap: balance; }
.delivery-coverage-grid article, .delivery-facts div { min-width: 0; }
/* Payment-page trust band: one quiet row of dot-separated points under the
checkout intro, sized like the page's existing small notes. The selector
must outrank style.css's `.checkout-heading__intro > p:last-child` note
styling (that rule would otherwise enlarge the band to 1.06rem). */
.checkout-heading__intro > p.payment-trust-band {
display: flex;
flex-wrap: wrap;
column-gap: 10px;
margin-top: 14px;
color: #5b5e61;
font-size: 0.8rem;
line-height: 1.55;
}
.checkout-heading__intro > p.payment-trust-band span + span::before {
content: "·";
margin-right: 10px;
color: #a3a6a8;
}
/* ------------------ S10 · Portal / account (Impr. 9) --------------------- */
.portal-entry { align-items: stretch; }
.portal-entry__intro, .login-card { min-height: 100%; }
.portal-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-tab { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
.portal-form input { min-height: 46px; }
.account-layout { align-items: start; }
.account-nav { position: sticky; top: calc(var(--bb-header-h) + 28px); }
.account-content { min-width: 0; }
.account-summary-grid article, .account-resource-grid button { display: flex; flex-direction: column; }
.account-resource-grid button em { margin-top: auto; }
/* -------------------- S11 · Cart + footer (Impr. 10) --------------------- */
.cart-drawer { display: flex; flex-direction: column; }
.cart-drawer .cart-items { flex: 1; overflow: auto; }
.cart-drawer .cart-footer { margin-top: auto; position: sticky; bottom: 0; background: inherit; }
.home-boundary__inner { display: flex; align-items: center; gap: 16px; }
.home-boundary__inner > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; }
.home-boundary__inner a { margin-left: auto; white-space: nowrap; }
.footer-grid { align-items: start; }
.footer-grid .footer-links a { text-decoration: none; }
.footer-grid .footer-links a:hover, .footer-grid .footer-links a:focus-visible { text-decoration: underline; }
/* ------------------------- S12 · Responsive ------------------------------ */
@media (max-width: 1080px) {
.shop-section .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.policy-hero { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.home-hero { min-height: auto; }
.home-hero__grid { grid-template-columns: 1fr; }
.seo-compound-hero { grid-template-columns: 1fr; }
.seo-compound-hero__vial { height: clamp(200px, 42vw, 260px); }
.seo-compound-hero__media { min-height: 260px; }
.seo-compound-columns { grid-template-columns: 1fr; }
.seo-related > .seo-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-hero__bear { justify-self: center; max-width: 420px; }
.home-hero__bear img { max-height: 300px; }
.home-flow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Even steps wrap to the next row — their arrow points down instead. */
.home-flow__grid p:nth-child(2n)::after {
grid-column: 1;
grid-row: 3;
justify-self: start;
transform: rotate(90deg);
}
.home-featured-grid, .shop-section .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo-info-cards { grid-template-columns: 1fr; }
.compound-guide-page .compound-guide-hero > :not(.compound-guide-hero__bear) { max-width: 100%; }
.compound-guide-hero__bear { position: relative; right: auto; top: auto; margin: 24px 0 0 auto; }
}
/* style.css already collapses .home-benefit-grid to one column at 680px;
match that breakpoint so the stacked privacy cards switch to horizontal
dividers at the same moment. */
@media (max-width: 680px) {
.home-privacy-grid { grid-template-columns: 1fr; }
.home-privacy-grid article,
.home-privacy-grid article:not(:last-child) { border-right: 0; border-bottom: 1px solid #c4c6c8; }
.home-privacy-grid article:last-child { border-bottom: 0; }
/* Watermarks strongly reduced on small screens so they never clutter copy. */
.home-hero::after {
opacity: 0.12;
background-position: 76% 14%;
background-size: min(430px, 92vw) auto;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.72) 60%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.72) 60%, transparent 100%);
}
.home-featured-shell::before { opacity: 0.12; }
.home-featured-bear { opacity: 0.12; }
/* Left watermark shrinks and fades further on small screens so it never
clutters the stacked headline copy. */
.home-hero__grid::before {
background-position: 50% 22%;
background-size: min(300px, 68vw) auto;
opacity: 0.07;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.6) 55%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.6) 55%, transparent 100%);
}
}
/* The fixpack desktop rule above imposes a 320px-min second column on the
catalogue head; below 760px style.css intends one column — restore it
(measured at 390px before this fix: the h1 rendered one letter per line
and the head ballooned to ~4870px tall). */
@media (max-width: 760px) {
.shop-page .shop-head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 620px) {
.home-featured-grid, .shop-section .product-grid, .home-benefit-grid { grid-template-columns: 1fr; }
.home-section__head { align-items: flex-start; flex-direction: column; }
.home-featured-actions { align-self: flex-start; padding-bottom: 0; }
/* Single stack: every arrow drops below its step, rotated down. */
.home-flow__grid { grid-template-columns: 1fr; }
.home-flow__grid p::after {
grid-column: 1;
grid-row: 3;
justify-self: start;
transform: rotate(90deg);
}
.policy-nav, .account-nav { position: relative; top: auto; }
.home-boundary__inner { align-items: flex-start; flex-wrap: wrap; }
.home-boundary__inner a { margin-left: 0; width: 100%; }
.seo-related > .seo-related-grid { grid-template-columns: 1fr; }
.seo-format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo-research-boundary__inner { align-items: flex-start; }
}
/* ==========================================================================
S13 · About page (owner-approved mockup 2026-08)
Dark-navy hero on a light #F5F7FA body; the page sections, sidebar and
support CTA remain scoped to .about-page. The navy header and footer were
extracted into the reusable site-wide S14 components (.site-header /
.site-footer) when the design system rolled out to every page.
========================================================================== */
:root {
--ab-navy: #061B36;
--ab-navy-deep: #031328;
--ab-blue: #1558B0;
--ab-pale: #EAF2FF;
--ab-bg: #F5F7FA;
--ab-card: #FFFFFF;
--ab-border: #D5DDE8;
--ab-text: #0A1830;
--ab-muted: #526177;
--ab-line-on-navy: rgba(157, 185, 232, 0.28);
--ab-text-on-navy: rgba(214, 228, 248, 0.78);
}
.about-page { background: var(--ab-bg); }
.about-page .site-header .container,
.about-hero__inner,
.about-layout { width: min(var(--bb-container), calc(100% - 48px)); }
/* ----------------------- S13a · Dark navy header -------------------------
Moved to S14a: the navy header is now the site-wide component. */
/* --------------------------- S13b · Hero --------------------------------- */
.about-hero {
position: relative;
overflow: clip;
color: #fff;
background: linear-gradient(115deg, var(--ab-navy-deep) 0%, var(--ab-navy) 56%, #0A2547 100%);
}
.about-hero__molecules {
position: absolute;
right: 4%;
bottom: 4%;
width: min(520px, 46vw);
opacity: 0.07;
pointer-events: none;
}
.about-hero__inner {
/* No z-index here: a stacking context on the inner wrapper would isolate
the bear's screen blend from the hero's navy gradient and render it as
a dark rectangle. position:relative alone still paints it above the
absolutely positioned molecule lines (later in DOM order). */
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 356px) minmax(170px, 250px);
gap: clamp(24px, 4vw, 56px);
align-items: center;
min-height: 410px;
margin-inline: auto;
padding-block: clamp(40px, 5vw, 60px);
}
.about-hero .eyebrow {
color: #9DB9E8;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.about-hero__copy h1 {
margin: 12px 0 0;
color: #fff;
font-size: clamp(2.5rem, 5vw, 4.35rem);
line-height: 0.99;
letter-spacing: -0.03em;
}
.about-hero__card {
position: relative;
z-index: 2;
padding: clamp(20px, 2.4vw, 28px);
border: 1px solid var(--ab-line-on-navy);
border-radius: 14px;
background: rgba(10, 37, 71, 0.55);
}
.about-hero__card-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin-bottom: 14px;
border: 1px solid rgba(157, 185, 232, 0.4);
border-radius: 10px;
color: #BBD2F2;
}
.about-hero__card-icon svg { width: 22px; height: 22px; }
.about-hero__card-title {
margin: 0 0 8px;
color: var(--ab-pale);
font-size: 1.12rem;
line-height: 1.32;
}
.about-hero__card-body {
margin: 0;
color: var(--ab-text-on-navy);
font-size: 0.85rem;
line-height: 1.6;
}
.about-hero__card-updated {
margin: 16px 0 0;
padding-top: 12px;
border-top: 1px solid rgba(157, 185, 232, 0.2);
color: rgba(157, 185, 232, 0.72);
font-size: 0.74rem;
}
/* Approved standing-bear artwork as faint line art on the navy hero: the
source is pale-on-light, so invert + screen leaves only the pale facet
lines, same treatment as the S4 compound hero panel. cover sizing fills
the tall column with the bear's head and shoulders; the wide soft radial
mask fades every edge so the source's light backdrop never reads as a
rectangle against the navy gradient. */
.about-hero__bear {
align-self: stretch;
min-height: 300px;
background: url("../img/bear-hero-silver-anime.webp?v=20260730") 50% 32% / cover no-repeat;
filter: invert(1) grayscale(0.3) brightness(1.02);
mix-blend-mode: screen;
opacity: 0.24;
-webkit-mask-image: radial-gradient(ellipse 74% 88% at 50% 46%, #000 38%, rgba(0, 0, 0, 0.5) 66%, transparent 90%);
mask-image: radial-gradient(ellipse 74% 88% at 50% 46%, #000 38%, rgba(0, 0, 0, 0.5) 66%, transparent 90%);
}
/* --------------------- S13c · Layout + sidebar --------------------------- */
.about-body { padding-block: clamp(54px, 6vw, 70px); }
.about-layout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: clamp(44px, 5vw, 56px);
align-items: start;
margin-inline: auto;
}
.about-sidebar { min-width: 0; }
.about-side-nav {
display: grid;
overflow: hidden;
border: 1px solid var(--ab-border);
border-radius: 12px;
background: var(--ab-card);
position: sticky;
top: calc(var(--bb-header-h) + 28px);
}
.about-side-nav a {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid #E4EAF2;
color: var(--ab-text);
font-size: 0.88rem;
font-weight: 650;
text-decoration: none;
}
.about-side-nav a:last-child { border-bottom: 0; }
.about-side-nav a svg { width: 19px; height: 19px; flex: none; color: var(--ab-muted); }
.about-side-nav a:hover { background: #F0F5FC; }
.about-side-nav a.active,
.about-side-nav a.active:hover { background: var(--ab-navy); color: #fff; }
.about-side-nav a.active svg { color: #fff; }
/* ------------------------- S13d · Sections ------------------------------- */
.about-sections { min-width: 0; }
.about-section {
display: grid;
grid-template-columns: 60px minmax(0, 1fr);
gap: 22px;
padding: 34px 0;
border-bottom: 1px solid var(--ab-border);
}
.about-section:first-child { padding-top: 4px; }
.about-section:last-child { border-bottom: 0; padding-bottom: 0; }
.about-section__icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
color: var(--ab-blue);
background: var(--ab-pale);
}
.about-section__icon svg { width: 26px; height: 26px; }
.about-section__body h2 {
margin: 4px 0 12px;
color: var(--ab-text);
font-size: clamp(1.65rem, 2.6vw, 1.9rem);
letter-spacing: -0.02em;
}
.about-section__body p {
margin: 0;
max-width: 730px;
color: var(--ab-muted);
font-size: 0.92rem;
line-height: 1.65;
}
.about-section__body p + p { margin-top: 12px; }
/* ---------------------- S13e · Support CTA ------------------------------- */
.about-support {
display: flex;
align-items: center;
gap: 18px;
max-width: 730px;
margin-top: 24px;
padding: 20px 24px;
border-radius: 12px;
color: #fff;
background: var(--ab-navy);
text-decoration: none;
transition: background 0.16s ease;
}
.about-support:hover { background: #0A2547; }
.about-support__icon {
display: grid;
place-items: center;
flex: none;
width: 46px;
height: 46px;
border: 1px solid rgba(157, 185, 232, 0.4);
border-radius: 10px;
color: #BBD2F2;
}
.about-support__icon svg { width: 24px; height: 24px; }
.about-support__text { display: grid; gap: 3px; min-width: 0; }
.about-support__text strong { font-size: 0.88rem; font-weight: 750; }
.about-support__text span { color: var(--ab-text-on-navy); font-size: 0.84rem; }
.about-support__arrow {
width: 22px;
height: 22px;
margin-left: auto;
flex: none;
color: #BBD2F2;
transition: transform 0.16s ease;
}
.about-support:hover .about-support__arrow,
.about-support:focus-visible .about-support__arrow { transform: translateX(4px); }
/* -------------------------- S13f · Footer --------------------------------
Moved to S14b: the navy footer is now the site-wide component. */
/* ----------------------- S13g · Responsive ------------------------------- */
@media (max-width: 1080px) {
.about-hero__copy h1 { font-size: 3rem; }
.about-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.about-hero__bear { display: none; }
}
@media (max-width: 900px) {
.about-layout { grid-template-columns: 1fr; gap: 34px; }
.about-side-nav {
position: static;
display: flex;
flex-wrap: wrap;
}
.about-side-nav a {
border-bottom: 0;
border-right: 1px solid #E4EAF2;
padding: 11px 14px;
}
.about-side-nav a:last-child { border-right: 0; }
}
@media (max-width: 760px) {
.about-hero__inner {
grid-template-columns: 1fr;
min-height: 0;
gap: 28px;
}
.about-hero__card { max-width: 460px; }
}
@media (max-width: 620px) {
.about-page .site-header .container,
.about-hero__inner,
.about-layout { width: calc(100% - 40px); }
.about-hero__copy h1 { font-size: 2.5rem; line-height: 1.02; }
.about-section { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 30px 0; }
.about-section__icon { width: 44px; height: 44px; }
.about-section__icon svg { width: 22px; height: 22px; }
.about-support { padding: 18px; gap: 14px; }
}
/* ==========================================================================
S14 · Site-wide navy chrome (owner-approved rollout 2026-08)
The S13 about-page header/footer, extracted into the reusable site-wide
components: every root page and every generated compound page now ships
the navy .site-header and the navy .site-footer. Design tokens are the
S13 --ab-* set (#061B36 / #031328 / #1558B0 / #EAF2FF / #F5F7FA / #FFFFFF
/ #D5DDE8 / #0A1830 / #526177).
========================================================================== */
/* ----------------------- S14a · Navy header ------------------------------ */
.site-header {
background: var(--ab-navy);
border-bottom: 1px solid rgba(157, 185, 232, 0.16);
}
/* style.css ships white-chrome header overrides for these page bodies. */
.home-page .site-header,
.payment-page .site-header {
background: var(--ab-navy);
border-bottom: 1px solid rgba(157, 185, 232, 0.16);
box-shadow: none;
backdrop-filter: none;
}
.site-header .brand-lockup strong { color: #fff; }
.site-header .brand-lockup small { color: rgba(214, 228, 248, 0.6); }
.site-header .nav-links a { color: rgba(233, 240, 252, 0.82); }
.site-header .nav-links a:hover { color: #fff; }
.site-header .nav-links a.active {
color: #fff;
font-weight: 800;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 7px;
}
/* Account + Cart read as outlined ghost buttons on the navy bar (mockups). */
.site-header .nav-cta,
.site-header .cart-toggle {
border: 1px solid rgba(233, 240, 252, 0.65);
border-radius: 9px;
color: #fff !important;
background: transparent;
}
.site-header .nav-cta:hover,
.site-header .cart-toggle:hover { background: #fff; color: var(--ab-navy) !important; }
/* Checkout / admin header utilities, same ghost treatment on navy. */
.site-header .checkout-return { color: rgba(233, 240, 252, 0.82); }
.site-header .checkout-return:hover { color: #fff; }
.site-header .btn-ghost {
border-color: rgba(233, 240, 252, 0.65);
color: #fff;
background: transparent;
}
.site-header .btn-ghost:hover { border-color: #fff; background: #fff; color: var(--ab-navy); }
.site-header .nav-toggle span { background: #fff; }
@media (max-width: 860px) {
.site-header .brand--bear-biotech {
display: inline-flex;
align-items: center;
min-block-size: 44px;
}
.site-footer .brand--bear-biotech {
display: inline-flex;
align-items: center;
min-block-size: 44px;
}
.checkout-return {
display: inline-flex;
align-items: center;
min-block-size: 44px;
}
.payment-status-brand {
display: inline-flex;
align-items: center;
min-block-size: 44px;
}
/* Navy dropdown panel for the mobile menu (was white). */
.site-header .nav-links {
background: var(--ab-navy);
border-bottom: 1px solid rgba(157, 185, 232, 0.16);
}
}
/* ----------------------- S14b · Navy footer ------------------------------ */
.site-footer {
margin-top: 0;
color: #fff;
background: var(--ab-navy-deep);
}
/* style.css ships a dark-grey homepage footer variant. */
.home-page .site-footer {
margin-top: 0;
border-top: 0;
background: var(--ab-navy-deep);
}
.site-footer__inner {
width: min(var(--bb-container), calc(100% - 48px));
margin-inline: auto;
padding: clamp(44px, 5vw, 60px) 0 26px;
}
.site-footer__upper {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
gap: clamp(32px, 5vw, 72px);
align-items: start;
padding-bottom: 30px;
}
.site-footer .brand-lockup strong { color: #fff; }
.site-footer .brand-lockup small { color: rgba(214, 228, 248, 0.6); }
.site-footer__tagline {
margin: 18px 0 22px;
max-width: 44ch;
color: rgba(233, 240, 252, 0.82);
font-size: 0.88rem;
font-weight: 650;
line-height: 1.55;
}
.site-footer__nav {
display: flex;
flex-wrap: wrap;
gap: 12px 26px;
}
.site-footer__nav a {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(233, 240, 252, 0.82);
font-size: 0.8rem;
font-weight: 650;
text-decoration: none;
}
.site-footer__nav a svg { width: 16px; height: 16px; color: rgba(157, 185, 232, 0.85); }
.site-footer__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer__notice {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 22px;
border: 1px solid var(--ab-line-on-navy);
border-radius: 12px;
}
.site-footer__notice-icon {
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border: 1px solid rgba(157, 185, 232, 0.4);
border-radius: 10px;
color: #BBD2F2;
}
.site-footer__notice-icon svg { width: 22px; height: 22px; }
.site-footer__notice-title {
margin: 2px 0 6px;
color: var(--ab-pale);
font-size: 0.95rem;
}
.site-footer__notice p {
margin: 0;
color: var(--ab-text-on-navy);
font-size: 0.8rem;
line-height: 1.55;
}
.site-footer__bottom {
display: flex;
justify-content: space-between;
gap: 10px 24px;
flex-wrap: wrap;
padding-top: 20px;
border-top: 1px solid rgba(157, 185, 232, 0.16);
color: rgba(157, 185, 232, 0.62);
font-size: 0.74rem;
}
@media (max-width: 620px) {
.site-footer__inner { width: calc(100% - 40px); }
.site-footer__upper { grid-template-columns: 1fr; }
.site-footer__bottom { flex-direction: column; }
}
/* ==========================================================================
S15 · Homepage navy redesign (owner-approved mockup 2026-08)
Navy hero with the approved bear artwork + product vial composition,
white 4-step flow cards, navy "Private by design", two-step connector
strip, icon benefit cards and the navy research-use banner.
========================================================================== */
/* ------------------------- S15a · Navy hero ------------------------------ */
.home-hero {
border-bottom: 1px solid rgba(157, 185, 232, 0.16);
background: linear-gradient(115deg, var(--ab-navy-deep) 0%, var(--ab-navy) 56%, #0A2547 100%);
}
.home-hero::before { content: none; } /* pale diagonal hatch is a light-bg texture */
/* The faint watermark bears adapt to navy with the S4/S13 invert + screen
treatment: only the pale facet lines ghost onto the navy gradient. */
.home-hero::after {
opacity: 0.13;
filter: invert(1) grayscale(0.35) brightness(1.05);
mix-blend-mode: screen;
}
.home-hero__grid::before {
opacity: 0.07;
filter: invert(1) grayscale(0.35) brightness(1.05);
mix-blend-mode: screen;
}
.home-hero__molecules {
position: absolute;
right: 3%;
top: 9%;
width: min(560px, 48vw);
opacity: 0.08;
pointer-events: none;
}
.home-hero__copy .eyebrow { color: #9DB9E8; }
.home-hero__copy h1 { color: #fff; }
.home-hero__copy > p:last-of-type { color: var(--ab-text-on-navy); }
/* Mockup CTAs on navy: solid white primary, outlined ghost secondary. */
.home-hero .btn-primary { border-color: #fff; color: var(--ab-navy); background: #fff; }
.home-hero .btn-primary:hover { border-color: var(--ab-pale); background: var(--ab-pale); }
.home-hero .btn-ghost {
border-color: rgba(233, 240, 252, 0.65);
color: #fff;
background: transparent;
}
.home-hero .btn-ghost:hover { border-color: #fff; color: var(--ab-navy); background: #fff; }
/* Art column: the approved leaping bear, pale and large behind (same
invert + screen line-art treatment as the S13 about hero), the product
vial foreground with the S4 feathered-studio-backdrop mask. */
.home-hero__art {
position: relative;
display: grid;
place-items: center;
min-height: 380px;
}
.home-hero__art::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: url("../img/bear-leap-silver.webp?v=20260730") 66% 42% / min(540px, 40vw) auto no-repeat;
opacity: 0.5;
filter: invert(1) grayscale(0.25) brightness(1.04);
mix-blend-mode: screen;
-webkit-mask-image: radial-gradient(ellipse 74% 88% at 60% 46%, #000 42%, rgba(0, 0, 0, 0.55) 68%, transparent 92%);
mask-image: radial-gradient(ellipse 74% 88% at 60% 46%, #000 42%, rgba(0, 0, 0, 0.55) 68%, transparent 92%);
}
.home-hero__vial-img {
position: relative;
z-index: 1;
display: block;
width: auto;
height: clamp(300px, 27vw, 400px);
max-width: 100%;
object-fit: contain;
-webkit-mask-image: radial-gradient(ellipse 52% 78% at 50% 52%, #000 44%, rgba(0, 0, 0, 0.5) 70%, transparent 97%);
mask-image: radial-gradient(ellipse 52% 78% at 50% 52%, #000 44%, rgba(0, 0, 0, 0.5) 70%, transparent 97%);
}
/* --------------------- S15b · White flow cards --------------------------- */
.home-flow {
border-bottom: 1px solid var(--ab-border);
background: var(--ab-bg);
}
.home-flow__grid { gap: var(--bb-gap); padding-block: clamp(22px, 2.6vw, 30px); }
.home-flow__grid p {
align-content: start;
min-height: 0;
padding: 18px;
border: 1px solid var(--ab-border);
border-radius: 12px;
background: var(--ab-card);
}
.home-flow__grid p strong { color: var(--ab-text); }
.home-flow__grid p span { color: var(--ab-muted); }
.home-flow__grid p > .home-flow__icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
margin-bottom: 12px;
border-radius: 10px;
color: var(--ab-blue);
background: var(--ab-pale);
}
.home-flow__icon svg { width: 20px; height: 20px; }
.home-flow__grid p::after { grid-row: 1 / 4; color: #9AA7BC; }
/* ------------------- S15c · Navy "Private by design" --------------------- */
.home-privacy-highlight {
color: #fff;
background: linear-gradient(135deg, var(--ab-navy-deep) 0%, var(--ab-navy) 58%, #0A2547 100%);
}
.home-privacy-highlight .home-section { padding-block: clamp(52px, 6vw, 72px); }
.home-privacy-highlight .eyebrow { color: #9DB9E8; }
.home-privacy-highlight .home-section__head h2 { color: #fff; }
.home-privacy-highlight .home-benefit-grid {
border: 0;
background: transparent;
gap: var(--bb-gap);
}
.home-privacy-highlight .home-benefit-grid article,
.home-privacy-highlight .home-benefit-grid article:not(:last-child) {
display: flex;
align-items: flex-start;
gap: 16px;
min-height: 0;
padding: 22px;
border: 1px solid var(--ab-line-on-navy);
border-radius: 12px;
background: rgba(10, 37, 71, 0.55);
}
.home-privacy-highlight .home-benefit-grid strong {
margin-bottom: 8px;
color: var(--ab-pale);
}
.home-privacy-highlight .home-benefit-grid p { color: var(--ab-text-on-navy); }
/* Bordered icon chips: navy variant on dark cards, pale-blue on light. */
.home-icon-chip {
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border: 1px solid rgba(157, 185, 232, 0.4);
border-radius: 10px;
color: #BBD2F2;
}
.home-icon-chip svg { width: 22px; height: 22px; }
.home-icon-chip--light {
border-color: var(--ab-border);
color: var(--ab-blue);
background: var(--ab-pale);
}
/* ------------------- S15d · Two-step connector strip --------------------- */
.home-ordering-strip {
border-bottom: 1px solid var(--ab-border);
background: #fff;
}
.home-ordering-strip .home-trust__grid { gap: var(--bb-gap); }
.home-ordering-strip .home-trust__grid p {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 14px;
align-items: center;
min-height: 0;
padding-block: 20px;
border-right: 0;
}
.home-ordering-strip .home-trust__grid p strong,
.home-ordering-strip .home-trust__grid p span { grid-column: 1; }
.home-ordering-strip .home-trust__grid p strong { color: var(--ab-text); }
.home-ordering-strip .home-trust__grid p span { color: var(--ab-muted); }
.home-ordering-strip .home-trust__grid p::after {
content: "→";
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
color: #9AA7BC;
font-size: 1.05rem;
line-height: 1;
}
.home-ordering-strip .home-trust__grid p:last-child::after { content: none; }
/* ------------------- S15e · Account benefit cards ------------------------ */
.home-account-benefits .home-benefit-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 0;
background: transparent;
gap: var(--bb-gap);
}
.home-account-benefits .home-benefit-grid article,
.home-account-benefits .home-benefit-grid article:not(:last-child) {
display: flex;
align-items: flex-start;
gap: 14px;
min-height: 0;
padding: 20px;
border: 1px solid var(--ab-border);
border-radius: 12px;
background: var(--ab-card);
}
.home-account-benefits .home-benefit-grid strong {
margin-bottom: 6px;
color: var(--ab-text);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.home-account-benefits .home-benefit-grid p { color: var(--ab-muted); }
/* ------------------- S15f · Navy research-use banner --------------------- */
.home-boundary {
position: relative;
overflow: clip;
border-top: 0;
color: #fff;
background: linear-gradient(100deg, var(--ab-navy-deep) 0%, var(--ab-navy) 55%, #0A2547 100%);
}
.home-boundary__molecules {
position: absolute;
right: 2%;
bottom: -18%;
width: min(420px, 44vw);
opacity: 0.08;
pointer-events: none;
}
.home-boundary__inner { position: relative; z-index: 1; }
/* The old black "!" square becomes the bordered flask chip. */
.home-boundary__inner > span.home-icon-chip {
width: 44px;
height: 44px;
color: #BBD2F2;
background: transparent;
}
.home-boundary__inner strong { color: var(--ab-pale); }
.home-boundary__inner p { color: var(--ab-text-on-navy); }
.home-boundary__inner a {
padding: 10px 16px;
border: 1px solid rgba(233, 240, 252, 0.55);
border-radius: 9px;
color: #fff;
white-space: nowrap;
}
.home-boundary__inner a:hover { background: #fff; color: var(--ab-navy); }
/* Featured catalogue sits on the mockup's flat light background. */
.home-featured-shell {
border-bottom: 1px solid var(--ab-border);
background: var(--ab-bg);
}
/* --------------------- S15g · Homepage responsive ------------------------ */
@media (max-width: 1080px) {
.home-account-benefits .home-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.home-hero__art { min-height: 320px; }
.home-hero__art::before { background-size: min(420px, 72vw) auto; background-position: 50% 40%; }
.home-hero__vial-img { height: clamp(240px, 44vw, 320px); }
.home-hero__molecules { top: 4%; }
/* Three content rows now (icon, title, copy): the wrapped arrow drops below. */
.home-flow__grid p:nth-child(2n)::after { grid-row: 4; }
}
@media (max-width: 680px) {
/* Stacked navy privacy cards keep their own borders — no extra dividers. */
.home-privacy-highlight .home-benefit-grid article,
.home-privacy-highlight .home-benefit-grid article:not(:last-child) {
border: 1px solid var(--ab-line-on-navy);
}
}
@media (max-width: 620px) {
.home-flow__grid p::after { grid-row: 4; }
.home-ordering-strip .home-trust__grid { grid-template-columns: 1fr; }
.home-ordering-strip .home-trust__grid p { border-bottom: 0; }
.home-ordering-strip .home-trust__grid p::after {
grid-column: 1;
grid-row: 3;
justify-self: start;
transform: rotate(90deg);
}
}
/* ==========================================================================
S16 · Shop catalogue redesign (owner-approved mockup 2026-08)
Product cards: light vial panel, PEPTIDE/BLEND · RESEARCH USE ONLY eyebrow,
navy name, one-line summary, uniform status pill (S17: green Available /
navy Catalogue identity / grey Unavailable),
price left + navy "View compound" button. Below the grid: the 4-step
"Compare the available options." panel, the formats/handling accordion and
the navy research-use banner (S15f .home-boundary component reused).
========================================================================== */
/* ---------- S16a · Page canvas: flat mockup background, no grey panels ---- */
.shop-page { background: var(--ab-bg); }
.shop-page .shop-main { background: none; }
.shop-page .shop-head--catalogue,
.shop-page .shop-section {
border: 0;
background: transparent;
}
.shop-page .shop-head .eyebrow,
.shop-page .catalogue-guide__heading .eyebrow { color: var(--ab-blue); }
.shop-page .shop-head h1,
.shop-page .catalogue-guide__heading h2 { color: var(--ab-navy); }
.shop-page .shop-head .section-lede,
.shop-page .catalogue-guide__heading > p:last-child { color: var(--ab-muted); }
.shop-page .shop-head .section-lede strong { color: var(--ab-text); }
/* ---------- S16b · Product cards ------------------------------------------ */
.shop-section .catalogue-card {
border: 1px solid var(--ab-border);
border-radius: 16px;
background: var(--ab-card);
box-shadow: 0 2px 10px rgba(6, 27, 54, 0.05);
}
.shop-section .catalogue-card:hover,
.shop-section .catalogue-card:focus-within {
border-color: #A9BBD4;
box-shadow: 0 20px 44px rgba(6, 27, 54, 0.14);
}
/* Vial panel: flat light field, image centred (sizing/aspect stays S3). */
.shop-section .catalogue-card__visual,
.shop-section .catalogue-card--essential .product-image {
border-bottom: 1px solid #E3EAF4;
background: #F2F6FC;
}
.shop-section .catalogue-card__body,
.shop-section .catalogue-card--essential .product-info {
min-height: 0;
padding: 15px 17px 17px;
}
/* Eyebrow row ("PEPTIDE · RESEARCH USE ONLY", written by the shop script). */
.shop-section .catalogue-card__meta,
.shop-section .catalogue-card--essential .product-format {
min-height: 0;
max-height: none;
overflow: visible;
color: var(--ab-muted);
font-size: 0.6rem;
font-weight: 750;
letter-spacing: 0.13em;
line-height: 1.45;
text-transform: uppercase;
}
.shop-section .catalogue-card__body h2,
.shop-section .catalogue-card--essential .product-info h2 {
min-height: 0;
margin-top: 7px;
color: var(--ab-navy);
font-size: 1.26rem;
font-weight: 750;
letter-spacing: -0.015em;
line-height: 1.12;
}
.shop-section .catalogue-card__body h2 a { color: var(--ab-navy); }
.shop-section .catalogue-card__summary,
.shop-section .catalogue-card--essential .product-research-note {
min-height: 2.9em;
margin-top: 7px;
color: var(--ab-muted);
font-size: 0.79rem;
line-height: 1.45;
-webkit-line-clamp: 2;
}
/* Mockup cards carry no option-count or saving line — the compound page
keeps that detail. */
.shop-section .catalogue-card__option-count,
.shop-section .catalogue-card__saving { display: none; }
/* Truthful status pill: colours come from the shared S17 .status-pill
component (green Available / navy Catalogue identity / grey Unavailable);
this rule keeps the shop-card layout only. */
.shop-section .catalogue-card [data-catalogue-status],
.shop-section .catalogue-card .product-release-status {
display: inline-flex;
align-items: center;
align-self: flex-start;
width: auto;
min-height: 0;
max-width: 100%;
margin: 11px 0 0;
padding: 5px 11px;
border: 1px solid #C3D8F5;
border-radius: 999px;
color: var(--ab-navy);
background: var(--ab-pale);
font-size: 0.66rem;
font-weight: 750;
letter-spacing: 0.02em;
line-height: 1.25;
text-align: left;
text-transform: none;
}
/* Footer: price bottom-left, navy View compound / Add to cart bottom-right. */
.shop-section .catalogue-card__footer,
.shop-section .catalogue-card--essential .product-buy {
display: flex;
align-items: end;
justify-content: space-between;
gap: 10px;
min-height: 0;
margin-top: auto;
padding-top: 14px;
}
.shop-section .catalogue-card__footer > div > span { color: var(--ab-muted); }
.shop-section .catalogue-card__footer .product-price,
.shop-section .catalogue-card--essential .product-price {
color: var(--ab-navy);
font-size: 1.18rem;
font-weight: 800;
}
.shop-section .catalogue-card__footer .btn,
.shop-section .catalogue-card--essential .product-buy .btn {
width: auto;
min-height: 40px;
padding: 10px 14px;
border-radius: 9px;
font-size: 0.72rem;
}
.shop-section .catalogue-card__footer .btn-primary,
.shop-section .catalogue-card--essential .product-buy .btn-primary {
border-color: var(--ab-navy);
background: var(--ab-navy);
}
.shop-section .catalogue-card__footer .btn-primary:hover,
.shop-section .catalogue-card--essential .product-buy .btn-primary:hover {
border-color: var(--ab-navy-deep);
background: var(--ab-navy-deep);
}
/* Supply cards: status pill under the summary, price row pinned to bottom. */
.shop-section .catalogue-card--essential .product-release-status {
order: 1;
margin-top: 11px;
}
.shop-section .catalogue-card--essential .product-buy { order: 2; }
/* ---------- S16c · "Compare the available options." panel ----------------- */
.shop-page .catalogue-guide {
position: relative;
overflow: hidden;
border: 1px solid var(--ab-border);
border-radius: 20px;
background: var(--ab-card);
}
.catalogue-guide__molecules {
position: absolute;
top: -34px;
right: -24px;
width: min(470px, 48vw);
opacity: 0.55;
pointer-events: none;
}
.shop-page .catalogue-guide__heading,
.shop-page .catalogue-guide__steps,
.shop-page .catalogue-guide__details { position: relative; z-index: 1; }
/* Wider title column so the mockup heading sets on two lines. */
@media (min-width: 1081px) {
.shop-page .catalogue-guide__heading {
grid-template-columns: minmax(340px, 1.05fr) minmax(300px, 0.95fr);
row-gap: 10px;
}
}
.shop-page .catalogue-guide__steps article {
grid-template-rows: 170px 1fr;
overflow: hidden;
border: 1px solid var(--ab-border);
border-radius: 14px;
background: var(--ab-card);
}
/* Mockup has no connector arrows between the four steps. */
.shop-page .catalogue-guide__steps article::after { content: none; }
.shop-page .catalogue-guide__step-copy {
grid-template-columns: 30px minmax(0, 1fr);
gap: 12px;
border-top: 1px solid var(--ab-border);
}
.shop-page .catalogue-guide__number {
width: 30px;
height: 30px;
border-radius: 50%;
color: #fff;
background: var(--ab-navy);
font-size: 0.74rem;
}
.shop-page .catalogue-guide__steps h3 { color: var(--ab-navy); }
.shop-page .catalogue-guide__steps p { color: var(--ab-muted); }
.shop-page .catalogue-guide__visual { background: #EFF3FA; }
.shop-page .catalogue-guide__visual--formats { background: #DCE4F0; }
.shop-page .catalogue-guide__visual--formats span {
color: var(--ab-muted);
background: #E7EDF6;
}
/* Step 2 status legend mirrors the live card pills. */
.shop-page .catalogue-guide__visual--status span {
border-color: var(--ab-border);
color: var(--ab-muted);
background: #fff;
}
.shop-page .catalogue-guide__visual--status .is-available {
border-color: #A6DABF;
color: #17663F;
background: #E6F5ED;
}
.shop-page .catalogue-guide__visual--status .is-available::after { background: #2F8F5B; }
.shop-page .catalogue-guide__visual--status .is-pending {
border-color: #C3D8F5;
color: var(--ab-navy);
background: var(--ab-pale);
}
.shop-page .catalogue-guide__visual--status .is-pending::after { background: var(--ab-navy); }
.shop-page .catalogue-guide__visual--status .is-unavailable::after { background: #98A3B5; }
/* Step 4: sealed-pouch stand-in for private batch documents. */
.catalogue-guide__visual--documents {
display: grid;
place-items: center;
padding: 16px;
}
.catalogue-guide__doc-pouch {
display: grid;
place-items: center;
align-content: center;
gap: 8px;
width: min(74%, 150px);
aspect-ratio: 1 / 1.04;
padding: 10px;
border: 1px solid #C7D3E6;
border-radius: 10px;
color: var(--ab-muted);
background: linear-gradient(160deg, #F7FAFE, #DFE8F5);
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.55);
font-size: 0.56rem;
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1.5;
text-align: center;
text-transform: uppercase;
}
.catalogue-guide__doc-pouch svg { width: 22px; height: 22px; color: var(--ab-navy); }
/* ---------- S16d · Formats / handling / transport accordion ---------------- */
.shop-page .catalogue-guide__details {
margin-top: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--ab-border);
border-radius: 12px;
background: var(--ab-card);
}
.shop-page .catalogue-guide__details summary {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
color: var(--ab-navy);
font-size: 0.95rem;
font-weight: 750;
list-style: none;
}
.shop-page .catalogue-guide__details summary::-webkit-details-marker { display: none; }
.shop-page .catalogue-guide__details summary::before {
content: "›";
color: var(--ab-muted);
font-size: 1.05rem;
line-height: 1;
}
.shop-page .catalogue-guide__details summary::after {
content: "";
flex: none;
width: 9px;
height: 9px;
margin-left: auto;
border-right: 2px solid var(--ab-navy);
border-bottom: 2px solid var(--ab-navy);
transform: rotate(45deg);
transition: transform 160ms ease;
}
.shop-page .catalogue-guide__details[open] summary {
border-bottom: 1px solid var(--ab-border);
}
.shop-page .catalogue-guide__details[open] summary::after { transform: rotate(225deg); }
.shop-page .catalogue-guide__details .format-details__content {
margin-top: 0;
padding: 18px 20px 20px;
}
.shop-page .catalogue-guide__details .format-details__content > div { gap: 14px; }
.shop-page .catalogue-guide__details .format-details__visual {
border-color: var(--ab-border);
border-radius: 10px;
background: #EFF3FA;
}
.format-details__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.format-details__links a {
color: var(--ab-blue);
font-weight: 750;
text-decoration: none;
}
.format-details__links a:hover { text-decoration: underline; }
/* ---------- S16e · Shop responsive ----------------------------------------- */
@media (max-width: 760px) {
.shop-page .catalogue-guide__steps article { grid-template-rows: 170px 1fr; }
}
@media (max-width: 620px) {
.home-boundary__inner { grid-template-columns: auto 1fr; }
.home-boundary__inner a { grid-column: 2; justify-self: start; }
}
/* ==========================================================================
S17 · Unified availability system (owner request 2026-08)
One status pill and one action rule on every surface that shows a product
or strength — homepage tiles, shop cards, compound format cards and the
compound guide:
.status-pill--available green "Available" (genuinely released)
.status-pill--awaiting navy "Catalogue identity" (no commercial data)
.status-pill--unavailable grey "Unavailable" (no released format)
.status-pill--pending grey "Checking availability…" (transient)
Action rule: Available + single option → navy Add to cart; Available +
multiple options → navy View compound; otherwise a "Get notified →" link
to the product-request.html mailto enquiry form (no server notify).
========================================================================== */
.status-pill {
display: inline-flex;
align-items: center;
align-self: flex-start;
justify-self: start;
justify-content: center;
box-sizing: border-box;
width: auto;
max-width: 100%;
min-height: 28px;
margin: 0;
padding: 5px 12px;
border: 1px solid #D5DAE2;
border-radius: 999px;
color: #526177;
background: #EEF1F6;
font-size: 0.66rem;
font-weight: 750;
letter-spacing: 0.03em;
line-height: 1.3;
text-align: center;
text-transform: none;
}
.status-pill--available { border-color: #A6DABF; color: #1e7e4a; background: #E6F5ED; }
.status-pill--awaiting { border-color: #C3D8F5; color: #13243c; background: #E9F1FC; }
.status-pill--unavailable { border-color: #D5DAE2; color: #526177; background: #EEF1F6; }
.status-pill--pending { border-style: dashed; }
/* "Get notified →" — mailto enquiry link, one shared treatment. */
.get-notified {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 4px;
width: auto;
min-height: 32px;
color: #13243c;
font-size: 0.78rem;
font-weight: 750;
text-decoration: underline;
text-underline-offset: 3px;
}
.get-notified:hover, .get-notified:focus-visible { color: #061B36; }
/* Homepage tiles: pill under the price line, one full-width action pinned to
the tile bottom; Get notified matches the button geometry as a ghost button. */
.home-product-tile__copy .status-pill { margin-top: 10px; align-self: flex-start; }
.home-product-tile__actions { display: flex; align-items: center; margin-top: auto; padding-top: 12px; }
/* The tile's format small-line already carries the preparation detail; the
injected preparation summary would only repeat it under the action. */
.home-product-tile .preparation-choice { display: none; }
.home-product-tile__actions .btn {
width: 100%;
min-height: 40px;
padding: 9px 12px;
border-radius: 9px;
font-size: 0.72rem;
}
.home-product-tile__actions .get-notified {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 40px;
padding: 9px 12px;
border: 1px solid #C3D8F5;
border-radius: 9px;
background: #E9F1FC;
font-size: 0.72rem;
text-decoration: none;
}
.home-product-tile__actions .get-notified:hover, .home-product-tile__actions .get-notified:focus-visible {
border-color: #13243c;
}
/* Compound format cards: notify link takes the purchase-action slot. */
.seo-format-card .get-notified {
justify-content: center;
width: 100%;
min-height: 40px;
padding: 8px 12px;
border: 1px solid #C3D8F5;
border-radius: 9px;
background: #E9F1FC;
text-decoration: none;
}
.seo-format-card .get-notified:hover, .seo-format-card .get-notified:focus-visible {
border-color: #13243c;
}
/* Shop cards: notify link takes the footer action slot with the same
geometry as the Add to cart button (ghost variant), so mixed rows align. */
.shop-section .catalogue-card__footer .get-notified {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: end;
min-height: 40px;
padding: 10px 14px;
border: 1px solid #C3D8F5;
border-radius: 9px;
background: #E9F1FC;
font-size: 0.72rem;
font-weight: 750;
text-decoration: none;
white-space: nowrap;
}
.shop-section .catalogue-card__footer .get-notified:hover,
.shop-section .catalogue-card__footer .get-notified:focus-visible { border-color: #13243c; }
.shop-section .catalogue-card--essential .get-notified { order: 2; margin-top: 8px; }
/* Compound guide cards (products.html). */
.compound-card .status-pill { margin-top: 10px; }
.compound-card .get-notified { margin-top: 10px; }
/* ==========================================================================
S19 · One named Bear Biotech vial on every product page (owner request)
The same photographic master is shared by all 33 pages. Exact catalogue
names and representative strengths are rendered as HTML so label wording
cannot drift through image generation or manual artwork variants.
========================================================================== */
.bb-vial--catalogue {
position: relative;
container-type: inline-size;
isolation: isolate;
}
.seo-compound-hero__media .bb-vial--catalogue {
width: 300px;
max-width: 100%;
}
.bb-vial--catalogue .product-page-vial {
position: relative;
z-index: 1;
}
.product-vial-label {
position: absolute;
z-index: 2;
top: 42.8%;
left: 37.15%;
display: flex;
width: 25.7%;
height: 21.45%;
box-sizing: border-box;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.12em;
overflow: hidden;
padding: 1.2% 1%;
color: #f8f7f2;
background: transparent;
font-family: Arial, Helvetica, sans-serif;
line-height: 1;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
text-transform: uppercase;
pointer-events: none;
}
.product-vial-label::before,
.product-vial-label::after {
content: "";
position: absolute;
left: 3%;
right: 3%;
height: 1px;
background: #c8a86b;
opacity: 0.9;
}
.product-vial-label::before { top: 1%; }
.product-vial-label::after { bottom: 1%; }
.product-vial-label em {
color: #d7b87b;
font-size: 2.45cqw;
font-style: normal;
font-weight: 800;
letter-spacing: 0.08em;
white-space: nowrap;
}
.product-vial-label small {
color: #d7b87b;
font-size: 1.3cqw;
font-weight: 700;
letter-spacing: 0.09em;
white-space: nowrap;
}
.product-vial-label strong {
display: flex;
min-height: 2.3em;
max-width: 100%;
align-items: center;
justify-content: center;
margin-top: 0.08em;
font-size: 4.4cqw;
font-weight: 800;
letter-spacing: -0.015em;
line-height: 0.93;
overflow-wrap: anywhere;
text-wrap: balance;
}
.product-vial-label--long strong { font-size: 2.75cqw; line-height: 0.9; }
.product-vial-label--very-long strong { font-size: 2.45cqw; line-height: 0.9; }
.product-vial-label b {
padding: 0.16em 0.4em;
border: 1px solid rgba(215, 184, 123, 0.9);
color: #d7b87b;
font-size: 2.75cqw;
font-weight: 750;
line-height: 1;
white-space: nowrap;
}
.product-vial-label i {
color: rgba(255, 255, 255, 0.88);
font-size: 1.28cqw;
font-style: normal;
font-weight: 700;
letter-spacing: 0.08em;
white-space: nowrap;
}
@media (max-width: 620px) {
.seo-compound-hero__media .bb-vial--catalogue {
width: 250px;
max-width: 72vw;
}
}
/* ==========================================================================
S18 · Visual-first homepage hero (owner reference 2026-08-05)
Silver faceted bear + one BPC-157 vial + Australia constellation. The
ordering steps, eight featured compounds and full Quick Order CTA remain
immediately below the hero and are intentionally unchanged.
========================================================================== */
.home-hero.home-hero--visual {
isolation: isolate;
min-height: 0;
overflow: clip;
border-bottom: 1px solid rgba(157, 185, 232, 0.18);
background:
radial-gradient(circle at 48% 47%, rgba(103, 166, 222, 0.2) 0%, rgba(39, 86, 135, 0.1) 22%, transparent 45%),
radial-gradient(circle at 17% 74%, rgba(98, 151, 205, 0.17), transparent 38%),
linear-gradient(112deg, #061629 0%, #0a2848 52%, #071d36 100%);
}
.home-hero.home-hero--visual::before,
.home-hero.home-hero--visual::after { content: none; }
.home-hero__accessible-title {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.home-hero__scene {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.14fr) minmax(190px, 0.52fr) minmax(0, 1fr);
align-items: end;
min-height: clamp(500px, 43vw, 560px);
}
.home-hero__scene::before {
content: "";
position: absolute;
z-index: -1;
inset: 6% -9% 0;
pointer-events: none;
background-image:
linear-gradient(28deg, transparent 48.7%, rgba(157, 185, 232, 0.035) 49%, transparent 49.3%),
linear-gradient(152deg, transparent 48.7%, rgba(157, 185, 232, 0.03) 49%, transparent 49.3%);
background-size: 92px 92px;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 76%, transparent);
mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 76%, transparent);
}
.home-hero__bear-art {
position: relative;
z-index: 2;
align-self: end;
justify-self: start;
width: min(640px, 50vw);
margin: 0 -21% -5% -7%;
pointer-events: none;
}
.home-hero__bear-art::after {
content: "";
position: absolute;
z-index: -1;
left: 10%;
right: 4%;
bottom: 7%;
height: 22%;
border-radius: 50%;
background: rgba(100, 164, 221, 0.24);
filter: blur(34px);
}
.home-hero__bear-art img {
display: block;
width: auto;
max-width: none;
height: clamp(500px, 44vw, 570px);
filter: saturate(0.58) brightness(0.86) contrast(1.11) drop-shadow(0 24px 26px rgba(0, 5, 15, 0.5));
}
.home-hero__vial-art {
position: relative;
z-index: 4;
align-self: end;
justify-self: center;
width: clamp(320px, 31vw, 400px);
margin: 0 -22% 8% -27%;
pointer-events: none;
}
.home-hero__vial-art::after {
content: "";
position: absolute;
z-index: -1;
left: 17%;
right: 17%;
bottom: 1%;
height: 8%;
border-radius: 50%;
background: rgba(0, 5, 14, 0.6);
filter: blur(12px);
}
.home-hero__vial-halo {
position: absolute;
z-index: -2;
inset: -5% -42% -2%;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(218, 238, 255, 0.6) 0%, rgba(113, 179, 231, 0.21) 36%, transparent 71%);
filter: blur(10px);
}
.home-hero__vial-art img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 22px 28px rgba(0, 6, 18, 0.55));
}
.home-hero__australia {
position: relative;
z-index: 1;
align-self: center;
justify-self: end;
width: min(520px, 37vw);
margin-right: -7%;
color: rgba(157, 185, 232, 0.31);
filter: drop-shadow(0 0 12px rgba(89, 147, 204, 0.2));
}
.home-hero__map-lines { stroke-width: 2.1; }
.home-hero__map-detail { opacity: 0.42; stroke-width: 1.1; }
.home-hero__stars { opacity: 0.78; }
@media (max-width: 900px) {
.home-hero__scene {
grid-template-columns: minmax(0, 1.18fr) minmax(160px, 0.52fr) minmax(0, 0.9fr);
min-height: clamp(430px, 56vw, 500px);
}
.home-hero__bear-art { width: min(560px, 58vw); margin-left: -12%; }
.home-hero__bear-art img { height: clamp(430px, 55vw, 500px); }
.home-hero__vial-art { width: clamp(260px, 35vw, 320px); margin-left: -40%; }
.home-hero__australia { width: min(430px, 39vw); margin-right: -12%; }
}
@media (max-width: 620px) {
.home-hero__scene {
grid-template-columns: minmax(0, 1fr) minmax(105px, 0.42fr);
min-height: clamp(350px, 102vw, 430px);
width: 100%;
}
.home-hero__bear-art {
grid-column: 1;
grid-row: 1;
width: min(430px, 96vw);
margin: 0 -34% -4% -20%;
}
.home-hero__bear-art img { height: clamp(360px, 96vw, 420px); }
.home-hero__vial-art {
grid-column: 2;
grid-row: 1;
width: clamp(210px, 58vw, 270px);
margin: 0 2% 8% -54%;
}
.home-hero__australia {
position: absolute;
z-index: 0;
top: 6%;
right: -28%;
width: 74vw;
margin: 0;
color: rgba(157, 185, 232, 0.2);
}
}
/* ---------------- S20 · Quick Order supplied visual system ------------- */
.quick-order-page .quick-order-hero.quick-hero {
position: relative;
min-height: 350px;
padding: 0;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
background:
radial-gradient(circle at 75% 30%, #164b7e 0, #0b315b 28%, #061d38 68%, #04172d 100%);
color: #fff;
}
.quick-order-page .quick-order-hero.quick-hero::before {
position: absolute;
inset: 0;
background: linear-gradient(115deg, rgba(255, 255, 255, 0.04), transparent 38%);
content: "";
pointer-events: none;
}
.quick-order-page .quick-hero__inner {
position: relative;
display: grid;
grid-template-columns: 48% 52%;
align-items: center;
min-height: 350px;
max-width: 1180px;
width: min(1180px, 100%);
margin-inline: auto;
padding: 42px 24px;
text-align: left;
}
.quick-order-page .quick-hero__copy { position: relative; z-index: 5; }
.quick-order-page .quick-hero__copy .eyebrow { color: #b9cce0; }
.quick-order-page .quick-hero__copy h1 {
margin: 8px 0 20px;
color: #fff;
font-size: clamp(3.4rem, 5vw, 4.4rem);
line-height: 0.95;
letter-spacing: -0.055em;
}
.quick-order-page .quick-hero__copy > p:last-child {
max-width: 540px;
margin: 0;
color: #e3ebf4;
font-size: clamp(1rem, 1.55vw, 1.12rem);
line-height: 1.55;
}
.quick-order-page .quick-hero__art {
position: absolute;
top: 0;
right: 0;
width: 58%;
height: 100%;
pointer-events: none;
}
.quick-order-page .quick-hero__bear {
position: absolute;
z-index: 2;
left: 2%;
bottom: -42px;
width: min(520px, 48vw);
object-fit: contain;
filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.26));
}
.quick-order-page .quick-hero__vial {
position: absolute;
z-index: 4;
left: 59%;
bottom: 28px;
width: 160px;
filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.35));
}
.quick-order-page .quick-hero__australia {
position: absolute;
z-index: 1;
top: 52px;
right: -18px;
width: 330px;
opacity: 0.33;
}
.quick-order-page .quick-order-tools,
.quick-order-page .quick-order-catalogue,
.quick-order-page .quick-order-notices {
max-width: 1180px;
width: min(1180px, calc(100% - 48px));
}
.quick-order-page .quick-order-preparation-card {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
gap: 20px;
min-height: 208px;
padding: clamp(22px, 2.5vw, 28px);
border-color: #b7c5d3;
box-shadow: 0 4px 18px rgba(3, 21, 43, 0.04);
}
.quick-order-page .quick-order-preparation-card__icon {
display: grid;
place-items: center;
width: 62px;
height: 62px;
border-radius: 50%;
background: #061d38;
color: #fff;
}
.quick-order-page .quick-order-preparation-card__icon svg { width: 34px; height: 34px; }
.quick-order-page .quick-order-preparation-card__body {
display: flex;
flex-direction: column;
min-width: 0;
}
.quick-order-page .quick-order-preparation-card__body > p:last-of-type {
margin: 0;
color: #526472;
line-height: 1.55;
}
.quick-order-page .quick-order-preparation-card::before { height: 4px; }
.quick-order-page .quick-order-preparation-card__action { padding-top: 14px; }
.quick-order-page .quick-order-table-head,
.quick-order-page .quick-order-row {
grid-template-columns: minmax(190px, 1.45fr) minmax(170px, 1fr) minmax(180px, 1.05fr) minmax(88px, 0.45fr) minmax(190px, 0.9fr);
gap: 12px;
}
.quick-order-page .quick-order-table-head {
background: linear-gradient(90deg, #03152b, #0b2f58);
}
.quick-order-page .quick-order-row { min-height: 76px; padding-block: 10px; }
.quick-order-page .quick-order-category { padding-block: 13px 11px; }
.quick-order-page .quick-order-category h3 { font-size: 1rem; }
/* ---------------- S21 · Registered account visual refresh -------------- */
.account-page {
background: #edf0f2;
color: #0b1628;
}
.account-page .account-shell {
max-width: 1180px;
padding-top: 30px;
padding-bottom: 76px;
}
.account-page .account-heading.account-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
align-items: center;
min-height: 330px;
padding: clamp(34px, 5vw, 58px);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
background:
radial-gradient(circle at 76% 30%, #164b7e 0, #0b315b 28%, #061d38 68%, #04172d 100%);
color: #fff;
}
.account-page .account-heading.account-hero::before {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(115deg, rgba(255, 255, 255, 0.04), transparent 42%);
content: "";
pointer-events: none;
}
.account-page .account-hero__copy { position: relative; z-index: 5; max-width: 540px; }
.account-page .account-hero__copy .eyebrow { color: #b9cce0; }
.account-page .account-heading.account-hero h1 {
margin: 10px 0 16px;
color: #fff;
font-size: clamp(3rem, 5.2vw, 5rem);
line-height: 0.92;
letter-spacing: -0.055em;
}
.account-page .account-heading.account-hero [data-account-greeting] {
max-width: 470px;
margin: 0;
color: #dce7f1;
font-size: 1.03rem;
line-height: 1.55;
}
.account-page .account-heading.account-hero .account-signout {
margin-top: 24px;
border-color: rgba(255, 255, 255, 0.72);
background: transparent;
color: #fff;
}
.account-page .account-heading.account-hero .account-signout:hover,
.account-page .account-heading.account-hero .account-signout:focus-visible {
background: #fff;
color: #061d38;
}
.account-page .account-hero__art {
position: absolute;
top: 0;
right: 0;
width: 57%;
height: 100%;
pointer-events: none;
}
.account-page .account-hero__bear {
position: absolute;
z-index: 2;
left: 0;
bottom: -58px;
width: min(500px, 43vw);
filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.24));
}
.account-page .account-hero__vial {
position: absolute;
z-index: 4;
left: 61%;
bottom: 24px;
width: 142px;
filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.34));
}
.account-page .account-hero__australia {
position: absolute;
z-index: 1;
top: 38px;
right: -36px;
width: 310px;
opacity: 0.28;
}
.account-page .account-layout {
grid-template-columns: 250px minmax(0, 1fr);
gap: 22px;
margin-top: 22px;
}
.account-page .account-nav {
overflow: hidden;
border: 1px solid #163452;
border-radius: 8px;
background: #061d38;
box-shadow: 0 12px 30px rgba(3, 21, 43, 0.1);
color: #fff;
}
.account-page .account-nav__identity {
padding: 22px 20px;
border-color: rgba(255, 255, 255, 0.14);
background: #03152b;
}
.account-page .account-nav__identity span { color: #9fb3c6; }
.account-page .account-nav__identity strong { color: #fff; }
.account-page .account-nav button {
min-height: 50px;
border-color: rgba(255, 255, 255, 0.11);
color: #d7e2ec;
}
.account-page .account-nav button:hover,
.account-page .account-nav button:focus-visible,
.account-page .account-nav button.active {
background: #fff;
color: #061d38;
}
.account-page .account-content {
padding: clamp(24px, 3.4vw, 40px);
border: 1px solid #c7d1da;
border-radius: 8px;
background: #fff;
box-shadow: 0 12px 30px rgba(3, 21, 43, 0.07);
}
.account-page .account-summary-grid {
gap: 12px;
border: 0;
}
.account-page .account-summary-grid article {
padding: 22px;
border: 1px solid #cbd5de;
border-radius: 6px;
background: linear-gradient(145deg, #f9fbfd, #eef4f9);
}
.account-page .account-summary-grid article:last-child { border-right: 1px solid #cbd5de; }
.account-page .account-summary-grid strong { color: #061d38; }
.account-page .account-payment-guide,
.account-page .account-details-card,
.account-page .account-recent,
.account-page .account-resources {
border-color: #cbd5de;
border-radius: 6px;
}
.account-page .account-details-card { background: #f4f7fa; }
@media (max-width: 980px) {
.quick-order-page .quick-hero__inner { grid-template-columns: 1fr; min-height: 420px; padding-bottom: 180px; }
.quick-order-page .quick-hero__art { top: auto; bottom: 0; width: 100%; height: 55%; }
.quick-order-page .quick-hero__bear { right: 24%; bottom: -50px; left: auto; width: 390px; }
.quick-order-page .quick-hero__vial { right: 15%; bottom: 12px; left: auto; width: 120px; }
.quick-order-page .quick-hero__australia { top: 20px; right: -25px; width: 240px; }
.quick-order-page .quick-order-row {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"identity price"
"format format"
"delivery delivery"
"controls controls";
min-height: 0;
gap: 13px;
}
.quick-order-page .quick-order-row__identity { grid-area: identity; }
.quick-order-page .quick-order-row__format { grid-area: format; }
.quick-order-page .quick-order-row__delivery { grid-area: delivery; }
.quick-order-page .quick-order-row__price { grid-area: price; text-align: right; }
.quick-order-page .quick-order-row__controls { grid-area: controls; justify-content: flex-start; }
.account-page .account-heading.account-hero { grid-template-columns: 1fr; min-height: 410px; padding-bottom: 180px; }
.account-page .account-hero__art { top: auto; bottom: 0; width: 100%; height: 57%; }
.account-page .account-hero__bear { right: 25%; bottom: -58px; left: auto; width: 390px; }
.account-page .account-hero__vial { right: 15%; bottom: 10px; left: auto; width: 118px; }
.account-page .account-hero__australia { top: 12px; right: -28px; width: 240px; }
.account-page .account-layout { grid-template-columns: 1fr; }
.account-page .account-nav { position: relative; top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-page .account-nav__identity { grid-column: 1 / -1; }
.account-page .account-nav button { border-right: 1px solid rgba(255, 255, 255, 0.11); }
}
@media (max-width: 680px) {
.quick-order-page .quick-order-tools,
.quick-order-page .quick-order-catalogue,
.quick-order-page .quick-order-notices { width: calc(100% - 28px); }
.quick-order-page .quick-hero__inner { min-height: 430px; padding: 34px 20px 190px; }
.quick-order-page .quick-hero__copy h1 { font-size: 3rem; }
.quick-order-page .quick-hero__bear { right: 18%; bottom: -56px; width: 340px; }
.quick-order-page .quick-hero__vial { right: 8%; bottom: 8px; width: 105px; }
.quick-order-page .quick-hero__australia { width: 210px; }
.quick-order-page .quick-order-preparation-card { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
.quick-order-page .quick-order-preparation-card__icon { width: 48px; height: 48px; }
.quick-order-page .quick-order-preparation-card__icon svg { width: 27px; height: 27px; }
.account-page .account-shell { padding-top: 16px; }
.account-page .account-heading.account-hero { min-height: 430px; padding: 30px 22px 190px; }
.account-page .account-heading.account-hero h1 { font-size: clamp(2.8rem, 14vw, 4rem); }
.account-page .account-hero__bear { right: 17%; bottom: -62px; width: 340px; }
.account-page .account-hero__vial { right: 7%; bottom: 7px; width: 104px; }
.account-page .account-hero__australia { width: 210px; }
.account-page .account-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-page .account-content { padding: 18px; }
.account-page .account-summary-grid { grid-template-columns: 1fr; }
.account-page .account-summary-grid article,
.account-page .account-summary-grid article:last-child { border: 1px solid #cbd5de; }
}
/* ================= S21 · Home, portal and format-card visual reset =======
These rules deliberately finish after the earlier visual passes. They keep
the artwork inside its frame and give every purchasable format the same
purchase baseline, irrespective of the selected-option or water add-on. */
/* Home: use the supplied Australia artwork, with one explicit desktop scene
grid. The bear and vial share the centre stage; neither relies on negative
vertical offsets, so their full silhouette remains in view. */
.home-page .home-hero__scene {
grid-template-columns: minmax(320px, 1.04fr) minmax(300px, 0.88fr) minmax(210px, 0.58fr);
grid-template-rows: minmax(420px, 1fr);
min-height: 420px;
padding-block: 16px;
}
.home-page .home-hero__copy { grid-column: 1; grid-row: 1; z-index: 5; }
.home-page .home-hero__bear-art {
grid-column: 2;
grid-row: 1;
z-index: 2;
align-self: end;
justify-self: center;
width: min(440px, 35vw);
margin: 0;
}
.home-page .home-hero__bear-art img {
display: block;
width: 100%;
height: auto;
max-height: 420px;
object-fit: contain;
}
.home-page .home-hero__vial-art {
grid-column: 2;
grid-row: 1;
z-index: 4;
align-self: end;
justify-self: end;
width: clamp(148px, 13vw, 190px);
margin: 0 -10% 12px 0;
}
.home-page img.home-hero__australia {
grid-column: 3;
grid-row: 1;
position: relative;
z-index: 1;
align-self: center;
justify-self: end;
width: min(350px, 28vw);
max-width: 128%;
margin: 0 -4% 0 0;
opacity: 0.62;
color: inherit;
}
.home-page .home-product-tile__image {
display: grid;
height: 246px;
aspect-ratio: auto;
padding: 12px 22px;
place-items: center;
overflow: hidden;
}
.home-page .home-product-tile__vial {
display: grid;
width: 100%;
height: 100%;
aspect-ratio: auto;
place-items: center;
}
.home-page .home-product-tile__photo {
display: block;
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
/* Product detail: every direct child occupies a reserved row. The preferred
note takes its own reserved line, and the preparation panel always starts
after the add button. This prevents a selected format or a powder add-on
from shifting only one card's controls. */
.seo-compound-page .seo-format-section--purchase .seo-format-grid { align-items: stretch; }
.seo-compound-page .seo-format-section--purchase .seo-format-card {
display: grid;
grid-template-rows: 70px 22px 28px minmax(24px, 1fr) 74px 116px;
gap: 8px;
min-height: 410px;
height: 100%;
}
.seo-compound-page .seo-format-section--purchase .seo-format-card__head {
display: grid;
grid-row: 1;
grid-template-rows: auto auto 26px;
align-content: start;
}
.seo-compound-page .seo-format-section--purchase .seo-format-card__head::after {
content: "";
grid-row: 3;
}
.seo-compound-page .seo-format-section--purchase .seo-format-card__head h3 { grid-row: 1; }
.seo-compound-page .seo-format-section--purchase .seo-format-card__head p { grid-row: 2; }
.seo-compound-page .seo-format-section--purchase .seo-format-card__selected-note {
grid-row: 3;
align-self: end;
min-height: 24px;
margin: 0;
}
.seo-compound-page .seo-format-section--purchase .seo-format-card__price {
grid-row: 2;
align-self: start;
}
.seo-compound-page .seo-format-section--purchase .seo-format-card__pill {
grid-row: 3;
align-self: start;
min-height: 26px;
padding-block: 4px;
}
.seo-compound-page .seo-format-section--purchase .seo-format-card__notify,
.seo-compound-page .seo-format-section--purchase .seo-format-card__buy {
grid-row: 5;
align-self: start;
margin: 0;
}
.seo-compound-page .seo-format-section--purchase .seo-format-card__buy {
display: grid;
gap: 8px;
}
.seo-compound-page .seo-format-section--purchase .seo-format-card__buy > label { gap: 5px; }
.seo-compound-page .seo-format-section--purchase .seo-format-card__buy select,
.seo-compound-page .seo-format-section--purchase .seo-format-card__buy [data-add-cart] { min-height: 38px; }
.seo-compound-page .seo-format-section--purchase .seo-format-card .preparation-choice {
grid-row: 6;
align-self: stretch;
min-height: 116px;
margin: 0;
}
.seo-compound-page .seo-format-section--purchase .seo-format-card .preparation-choice__summary {
margin: 0;
font-size: 0.72rem;
line-height: 1.35;
}
/* Portal: the public account screen now shares the Bear Biotech navy, bear,
vial and supplied Australia artwork without touching authentication logic. */
.portal-page .portal-entry--visual {
grid-template-columns: minmax(0, 1.02fr) minmax(400px, 0.98fr);
min-height: 640px;
padding-block: 44px 64px;
}
.portal-page .portal-entry--visual .portal-entry__intro {
min-height: 640px;
padding: clamp(36px, 4.5vw, 58px);
background:
linear-gradient(90deg, rgba(4, 22, 43, 0.96) 0%, rgba(4, 22, 43, 0.78) 56%, rgba(4, 22, 43, 0.34) 100%),
radial-gradient(circle at 76% 36%, rgba(111, 166, 213, 0.32), transparent 38%),
linear-gradient(128deg, #061a31, #0c3964);
}
.portal-page .portal-entry--visual .portal-entry__intro::after { content: none; }
.portal-page .portal-entry--visual .portal-entry__intro > :not(.portal-entry__art) {
position: relative;
z-index: 3;
}
.portal-page .portal-entry--visual .portal-entry__intro h1 { max-width: 6.8em; }
.portal-page .portal-entry__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.portal-page .portal-entry__art img { position: absolute; display: block; }
.portal-page .portal-entry__australia {
top: 48px;
right: -48px;
width: min(320px, 56%);
opacity: 0.38;
}
.portal-page .portal-entry__bear {
right: -54px;
top: 360px;
bottom: auto;
width: min(445px, 76%);
opacity: 0.52;
filter: saturate(0.56) brightness(0.9) contrast(1.08);
}
.portal-page .portal-entry__vial {
right: 17%;
top: 430px;
bottom: auto;
z-index: 2;
width: min(138px, 25%);
filter: drop-shadow(0 18px 16px rgba(0, 6, 18, 0.46));
}
.portal-page .portal-entry--visual .login-card {
min-height: 640px;
padding: clamp(36px, 4.5vw, 58px);
border-color: #cbd7e2;
background: linear-gradient(145deg, #ffffff, #f4f8fb);
}
@media (max-width: 900px) {
.home-page .home-hero__scene {
grid-template-columns: minmax(0, 1.08fr) minmax(270px, 0.92fr);
min-height: 410px;
}
.home-page .home-hero__copy { grid-column: 1; }
.home-page .home-hero__bear-art,
.home-page .home-hero__vial-art { grid-column: 2; }
.home-page img.home-hero__australia {
position: absolute;
right: -9%;
width: min(350px, 44vw);
}
.portal-page .portal-entry--visual { grid-template-columns: 1fr; }
.portal-page .portal-entry--visual .portal-entry__intro,
.portal-page .portal-entry--visual .login-card { min-height: 0; }
.portal-page .portal-entry--visual .portal-entry__intro { min-height: 530px; }
.portal-page .portal-entry__bear { top: auto; bottom: -46px; }
.portal-page .portal-entry__vial { top: auto; bottom: 44px; }
}
@media (max-width: 620px) {
.home-page .home-hero__scene {
grid-template-columns: minmax(0, 1fr) minmax(96px, 0.38fr);
grid-template-rows: auto 280px;
min-height: 0;
padding-top: 28px;
}
.home-page .home-hero__copy { grid-column: 1 / -1; grid-row: 1; }
.home-page .home-hero__bear-art {
grid-column: 1;
grid-row: 2;
width: min(355px, 86vw);
margin: 0 0 0 -16%;
}
.home-page .home-hero__bear-art img { max-height: 280px; }
.home-page .home-hero__vial-art {
grid-column: 2;
grid-row: 2;
width: clamp(128px, 37vw, 162px);
margin: 0 0 8px -35%;
}
.home-page img.home-hero__australia {
top: 42%;
right: -18%;
width: 76vw;
opacity: 0.4;
}
.home-page .home-product-tile__image { height: 224px; padding: 10px 18px; }
.seo-compound-page .seo-format-section--purchase .seo-format-card {
grid-template-rows: auto auto auto minmax(20px, 1fr) auto auto;
min-height: 0;
}
.portal-page .portal-entry--visual { padding-block: 24px 40px; }
.portal-page .portal-entry--visual .portal-entry__intro { min-height: 490px; padding: 32px 24px; }
.portal-page .portal-entry--visual .login-card { padding: 30px 24px; }
.portal-page .portal-entry__bear { right: -60px; width: 390px; }
.portal-page .portal-entry__vial { right: 17%; width: 115px; }
}
/* ================= S22 · Artwork and portal palette correction ==========
The supplied Australia/Southern Cross artwork stays whole at the far right;
the bear and hero vial occupy their own foreground plane. Featured tiles
deliberately use one restrained master vial, with only the label changing. */
.home-page .home-hero__scene {
position: relative;
grid-template-columns: minmax(330px, 0.92fr) minmax(470px, 1.08fr);
min-height: 430px;
padding-block: 12px;
}
.home-page .home-hero__copy { grid-column: 1; }
.home-page .home-hero__bear-art {
grid-column: 2;
width: min(460px, 38vw);
margin: 0 8% 0 0;
}
.home-page .home-hero__bear-art img { max-height: 410px; }
.home-page .home-hero__vial-art {
grid-column: 2;
width: clamp(126px, 11vw, 156px);
margin: 0 11% 25px 0;
}
.home-page img.home-hero__australia {
position: absolute;
z-index: 1;
top: 48px;
right: 0;
width: min(340px, 28vw);
max-width: none;
margin: 0;
opacity: 0.52;
}
.home-page .home-product-tile__image {
height: 202px;
padding: 10px 18px;
background: linear-gradient(145deg, #fbfcfe, #edf3f8);
}
.home-page .home-product-tile__vial {
position: relative;
width: min(136px, 80%);
height: 100%;
margin: 0 auto;
overflow: visible;
}
.home-page .home-product-tile__photo {
width: 100%;
height: 100%;
object-fit: contain;
}
.home-page .home-product-tile__vial::before,
.home-page .home-product-tile__vial::after {
position: absolute;
z-index: 2;
left: 25%;
width: 50%;
color: #fff;
font-weight: 800;
line-height: 1.1;
pointer-events: none;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.home-page .home-product-tile__vial::before {
top: 42.5%;
content: "BEAR BIOTECH";
color: #dcc28c;
font-size: clamp(0.34rem, 0.48vw, 0.46rem);
letter-spacing: 0.07em;
}
.home-page .home-product-tile__vial::after {
top: 49%;
content: attr(data-vial-name);
font-size: clamp(0.48rem, 0.67vw, 0.64rem);
letter-spacing: 0.025em;
}
/* Keep the supplied, product-specific vial files on the home page. The blank
master bottle and CSS overprint were rejected; never substitute them here. */
.home-page .home-product-tile__vial::before,
.home-page .home-product-tile__vial::after { content: none; }
.home-page .home-product-tile__vial > .bb-vial { background: transparent; }
.home-page .home-product-tile__vial .bb-vial__photo { object-fit: contain; }
/* Exact coordinates from the supplied Quick Order visual pack. */
.home-page img.home-hero__australia {
top: 52px;
right: -18px;
width: 330px;
opacity: 0.33;
}
/* The authenticated portal uses the same navy / blue-grey visual language as
the public pages rather than the inherited black-and-white document UI. */
.account-page {
background: linear-gradient(135deg, #f1f5f8 0%, #e7edf2 100%);
}
.account-page .account-heading.account-hero {
grid-template-columns: minmax(0, 0.84fr) minmax(470px, 1.16fr);
background:
radial-gradient(circle at 78% 30%, #1c5b91 0, #0c3a69 27%, #061f3d 64%, #04172d 100%);
}
.account-page .account-hero__art { width: 62%; }
.account-page .account-hero__australia {
z-index: 1;
top: 52px;
right: -18px;
width: 330px;
opacity: 0.33;
}
.account-page .account-hero__bear {
z-index: 2;
left: 0;
bottom: -40px;
width: min(468px, 39vw);
}
.account-page .account-hero__vial {
z-index: 4;
left: 60%;
bottom: 30px;
width: 112px;
}
.account-page .account-content {
border-color: #c9dce9;
border-radius: 14px;
background: linear-gradient(145deg, #ffffff, #f8fbfd);
box-shadow: 0 16px 34px rgba(9, 37, 63, 0.08);
}
.account-page .account-summary-grid article,
.account-page .account-details-card,
.account-page .account-payment-guide,
.account-page .account-recent,
.account-page .account-resources {
border-color: #c8dce9;
background: linear-gradient(145deg, #fbfdff, #eef6fb);
}
.account-page .account-resource-grid { border-color: #c5d9e7; }
.account-page .account-resource-grid button {
border-color: #c5d9e7;
background: linear-gradient(145deg, #fbfdff, #edf6fb);
color: #092a4d;
}
.account-page .account-resource-grid b,
.account-page .account-resource-grid span { color: #39729b; }
.account-page .account-resource-grid button:hover,
.account-page .account-resource-grid button:focus-visible {
background: #0b4b7c;
color: #fff;
}
.account-page .account-resource-grid button:hover b,
.account-page .account-resource-grid button:focus-visible b,
.account-page .account-resource-grid button:hover span,
.account-page .account-resource-grid button:focus-visible span { color: #ddecf7; }
.account-page .account-resource-notice,
.account-page .account-boundary {
border-color: #bbd6e9;
background: linear-gradient(135deg, #eef7ff, #e0effa);
color: #092a4d;
}
.account-page .account-resource-notice p,
.account-page .account-boundary p,
.account-page .account-boundary span,
.account-page .account-boundary strong { color: #254b6d; }
.account-page .process-claim-notice { border-left-color: #277bb8; }
.account-page .product-process {
border-color: #bdd4e5;
background:
radial-gradient(circle at 8% 5%, rgba(123, 191, 231, 0.18), transparent 26%),
linear-gradient(145deg, #fbfdff, #eaf3f9);
}
.account-page .product-process__track article { border-color: #c5d9e7; }
.account-page .product-process__track article:not(:last-child)::after { background: #0b4b7c; }
.account-page .product-process__icon {
border-color: #9fc2db;
color: #0b4b7c;
background: #f7fbff;
}
.account-page .product-process__track b,
.account-page .process-evidence-grid span { color: #39729b; }
.account-page .product-process__track p,
.account-page .process-evidence-grid p { color: #49677e; }
.account-page .product-process figcaption {
border-color: #c5d9e7;
color: #49677e;
background: #f8fcff;
}
.account-page .process-evidence-grid { border-color: #c5d9e7; }
.account-page .process-evidence-grid article {
border-color: #c5d9e7;
background: #f9fcfe;
}
.account-page .account-placeholder-grid article {
border-color: #c5d9e7;
background: linear-gradient(145deg, #fbfdff, #edf6fb);
}
.account-page .account-placeholder-grid span { background: #0b4b7c; }
.account-page .account-placeholder-grid p { color: #49677e; }
@media (max-width: 980px) {
.home-page .home-hero__scene {
grid-template-columns: minmax(0, 1.08fr) minmax(270px, 0.92fr);
min-height: 410px;
}
.home-page .home-hero__bear-art,
.home-page .home-hero__vial-art { grid-column: 2; }
.home-page img.home-hero__australia { right: -8%; width: min(330px, 43vw); }
.account-page .account-heading.account-hero { grid-template-columns: 1fr; min-height: 410px; padding-bottom: 180px; }
.account-page .account-hero__art { top: auto; bottom: 0; width: 100%; height: 57%; }
.account-page .account-hero__bear { right: 25%; bottom: -58px; left: auto; width: 390px; }
.account-page .account-hero__vial { right: 15%; bottom: 10px; left: auto; width: 108px; }
.account-page .account-hero__australia { top: 12px; right: -28px; width: 240px; }
}
@media (max-width: 620px) {
.home-page .home-hero__scene {
grid-template-columns: minmax(0, 1fr) minmax(96px, 0.38fr);
grid-template-rows: auto 280px;
min-height: 0;
padding-top: 28px;
}
.home-page .home-hero__copy { grid-column: 1 / -1; grid-row: 1; }
.home-page .home-hero__bear-art {
grid-column: 1;
grid-row: 2;
width: min(355px, 86vw);
margin: 0 0 0 -16%;
}
.home-page .home-hero__vial-art {
grid-column: 2;
grid-row: 2;
width: clamp(112px, 31vw, 138px);
margin: 0 0 14px -30%;
}
.home-page img.home-hero__australia { top: 42%; right: -18%; width: 76vw; opacity: 0.4; }
.home-page .home-product-tile__image { height: 190px; }
.home-page .home-product-tile__vial { width: min(124px, 78%); }
.account-page .account-shell { padding-top: 16px; }
.account-page .account-heading.account-hero { min-height: 430px; padding: 30px 22px 190px; }
.account-page .account-hero__bear { right: 17%; bottom: -62px; width: 340px; }
.account-page .account-hero__vial { right: 7%; bottom: 7px; width: 96px; }
.account-page .account-hero__australia { width: 210px; }
}
/* ================= S23 · Fixed homepage correction brief ================
This final layer follows the approved Peptides project reference. Keep the
hero as three independent assets and the best-seller grid as navigation. */
.home-page .home-hero__scene,
.home-page .home-flow__grid,
.home-page .home-section {
width: min(1180px, calc(100% - 40px));
}
.home-page .home-hero__scene {
position: relative;
display: grid;
grid-template-columns: minmax(0, 44%) minmax(0, 56%);
grid-template-rows: 430px;
min-height: 430px;
padding: 0;
}
.home-page .home-hero__copy {
position: relative;
z-index: 5;
grid-column: 1;
grid-row: 1;
align-self: center;
width: 100%;
max-width: 500px;
padding: 28px 0;
}
.home-page .home-hero__copy .eyebrow {
margin-bottom: 17px;
font-size: 12px;
}
.home-page .home-hero__copy h1 {
max-width: 500px;
margin: 0 0 18px;
font-size: clamp(58px, 4.35vw, 64px);
font-weight: 800;
line-height: 0.95;
letter-spacing: -0.045em;
}
.home-page .home-hero__copy > p:not(.eyebrow):not(.home-hero__location) {
max-width: 500px;
margin: 0;
font-size: 18px;
line-height: 1.55;
}
.home-page .home-hero__location {
max-width: 500px;
margin: 14px 0 0;
color: #b8d1e3;
font-size: 11px;
font-weight: 750;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.home-page .home-hero__actions {
display: flex;
align-items: center;
gap: 14px;
margin-top: 20px;
}
.home-page .home-hero__bear-art,
.home-page .home-hero__vial-art,
.home-page img.home-hero__australia {
position: absolute;
grid-column: auto;
grid-row: auto;
align-self: auto;
justify-self: auto;
margin: 0;
}
.home-page .home-hero__bear-art {
z-index: 2;
right: 250px;
bottom: -25px;
width: 490px;
height: auto;
}
.home-page .home-hero__bear-art img {
display: block;
width: 100%;
height: auto;
max-height: none;
object-fit: contain;
}
.home-page .home-hero__vial-art {
z-index: 4;
right: 175px;
bottom: 38px;
width: 136px;
height: auto;
}
.home-page .home-hero__vial-art img {
position: relative;
z-index: 2;
display: block;
width: 100%;
height: auto;
max-height: none;
object-fit: contain;
}
.home-page .home-hero__vial-halo {
position: absolute;
inset: 8% -45% -8%;
z-index: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(197, 224, 244, 0.5), rgba(102, 159, 203, 0.14) 44%, transparent 72%);
filter: blur(12px);
}
.home-page img.home-hero__australia {
z-index: 1;
top: 70px;
right: 15px;
width: 300px;
max-width: none;
height: auto;
opacity: 0.26;
pointer-events: none;
}
.home-page .home-flow {
padding: 8px 0 10px;
}
.home-page .home-flow__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.home-page .home-flow__grid > p {
min-height: 156px;
padding: 28px;
border-color: #cbd8e3;
background: #fff;
}
.home-page .home-flow__grid strong {
font-size: 14px;
line-height: 1.3;
}
.home-page .home-flow__grid p > span:last-child {
font-size: 14px;
line-height: 1.5;
}
.home-page .home-section__head .eyebrow {
font-size: 12px;
}
.home-page .home-section__head h2 {
font-size: clamp(46px, 4vw, 52px);
line-height: 1;
letter-spacing: -0.04em;
}
.home-page .home-featured-controls {
display: none;
}
.home-page .home-product-tile {
display: grid;
grid-template-rows: 225px minmax(188px, 1fr);
min-width: 0;
height: 100%;
border-color: #c8d2dc;
background: #fff;
}
.home-page .home-product-tile__image {
display: grid;
width: 100%;
height: 225px;
padding: 20px;
place-items: center;
overflow: hidden;
background: #f1f3f5;
}
.home-page .home-product-tile__vial,
.home-page .home-product-tile__vial > .bb-vial {
display: grid;
width: 100%;
height: 100%;
margin: 0;
place-items: center;
overflow: visible;
aspect-ratio: auto;
background: transparent;
}
.home-page .home-product-tile__photo,
.home-page .home-product-tile__vial .bb-vial__photo {
display: block;
width: auto;
max-width: 78%;
height: auto;
max-height: 185px;
margin: auto;
object-fit: contain;
}
.home-page .home-product-tile__copy {
display: grid;
grid-template-rows: minmax(28px, auto) minmax(27px, auto) 22px 27px minmax(42px, auto);
align-content: start;
gap: 5px;
min-height: 188px;
padding: 15px 14px 14px;
}
.home-page .home-product-tile__copy small {
font-size: 11px;
line-height: 1.25;
}
.home-page .home-product-tile__copy strong {
align-self: start;
font-size: 18px;
line-height: 1.15;
}
.home-page .home-product-tile__copy em {
align-self: center;
font-size: 14px;
line-height: 1.3;
}
.home-page .home-product-tile__copy .status-pill {
align-self: center;
justify-self: start;
font-size: 11px;
}
.home-page .home-product-tile__actions {
align-self: end;
}
.home-page .home-product-tile__actions .btn {
display: inline-flex;
width: 100%;
min-height: 40px;
align-items: center;
justify-content: center;
font-size: 13px;
}
@media (max-width: 980px) {
.home-page .home-hero__scene {
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
}
.home-page .home-hero__copy h1 {
font-size: clamp(48px, 7vw, 58px);
}
.home-page .home-hero__bear-art {
right: 135px;
width: 420px;
}
.home-page .home-hero__vial-art {
right: 74px;
width: 122px;
}
.home-page img.home-hero__australia {
top: 92px;
right: -44px;
width: 260px;
}
.home-page .home-flow__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.home-page .home-hero__scene {
display: block;
min-height: 690px;
padding-top: 26px;
}
.home-page .home-hero__copy {
max-width: none;
padding: 0;
}
.home-page .home-hero__copy h1 {
max-width: 360px;
font-size: clamp(44px, 13vw, 54px);
}
.home-page .home-hero__copy > p:not(.eyebrow):not(.home-hero__location) {
max-width: 355px;
font-size: 16px;
}
.home-page .home-hero__actions {
flex-wrap: wrap;
}
.home-page .home-hero__bear-art {
right: 54px;
bottom: -26px;
width: min(420px, 104vw);
}
.home-page .home-hero__vial-art {
right: 12px;
bottom: 32px;
width: 108px;
}
.home-page img.home-hero__australia {
top: auto;
right: -86px;
bottom: 62px;
width: 270px;
opacity: 0.23;
}
.home-page .home-flow__grid {
grid-template-columns: 1fr;
}
.home-page .home-flow__grid > p {
min-height: 0;
}
.home-page .home-section__head h2 {
font-size: 42px;
}
}
/* S24 · Resolve legacy hero-specificity conflicts. The older composed-hero
selectors carry three class components, so this final block deliberately
scopes through the hero modifier instead of using !important. */
.home-page .home-hero.home-hero--visual .home-hero__scene {
position: relative;
display: grid;
width: min(1180px, calc(100% - 40px));
min-height: 430px;
grid-template-columns: minmax(0, 44%) minmax(0, 56%);
grid-template-rows: 430px;
padding: 0;
}
.home-page .home-hero.home-hero--visual .home-hero__copy .eyebrow {
margin-bottom: 17px;
font-size: 12px;
}
.home-page .home-hero.home-hero--visual .home-hero__copy h1 {
max-width: 500px;
margin: 0 0 18px;
font-size: clamp(58px, 4.35vw, 64px);
font-weight: 800;
line-height: .95;
letter-spacing: -.045em;
}
.home-page .home-hero.home-hero--visual .home-hero__copy > p:not(.eyebrow):not(.home-hero__location) {
max-width: 500px;
margin: 0;
color: #d7e2ec;
font-size: 18px;
line-height: 1.55;
}
.home-page .home-hero.home-hero--visual .home-hero__bear-art {
position: absolute;
z-index: 2;
right: 250px;
bottom: -25px;
width: 490px;
height: auto;
margin: 0;
}
.home-page .home-hero.home-hero--visual .home-hero__bear-art img {
display: block;
width: 100%;
height: auto;
max-height: none;
object-fit: contain;
}
.home-page .home-hero.home-hero--visual .home-hero__vial-art {
position: absolute;
z-index: 4;
right: 175px;
bottom: 38px;
width: 136px;
height: auto;
margin: 0;
}
.home-page .home-hero.home-hero--visual .home-hero__vial-art img {
position: relative;
z-index: 2;
display: block;
width: 100%;
height: auto;
max-height: none;
object-fit: contain;
}
.home-page .home-hero.home-hero--visual img.home-hero__australia {
position: absolute;
z-index: 1;
top: 70px;
right: 15px;
width: 300px;
max-width: none;
height: auto;
margin: 0;
opacity: .26;
}
@media (max-width: 980px) {
.home-page .home-hero.home-hero--visual .home-hero__scene {
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
}
.home-page .home-hero.home-hero--visual .home-hero__copy h1 {
font-size: clamp(48px, 7vw, 58px);
}
.home-page .home-hero.home-hero--visual .home-hero__bear-art {
right: 135px;
width: 420px;
}
.home-page .home-hero.home-hero--visual .home-hero__vial-art {
right: 74px;
width: 122px;
}
.home-page .home-hero.home-hero--visual img.home-hero__australia {
top: 92px;
right: -44px;
width: 260px;
}
}
@media (max-width: 620px) {
.home-page .home-hero.home-hero--visual .home-hero__scene {
display: block;
min-height: 830px;
padding-top: 26px;
}
.home-page .home-hero.home-hero--visual .home-hero__copy h1 {
max-width: 360px;
font-size: clamp(44px, 13vw, 54px);
}
.home-page .home-hero.home-hero--visual .home-hero__copy > p:not(.eyebrow):not(.home-hero__location) {
max-width: 355px;
font-size: 16px;
}
.home-page .home-hero.home-hero--visual .home-hero__bear-art {
right: 54px;
bottom: -26px;
width: min(420px, 104vw);
}
.home-page .home-hero.home-hero--visual .home-hero__vial-art {
right: 12px;
bottom: 32px;
width: 108px;
}
.home-page .home-hero.home-hero--visual img.home-hero__australia {
top: auto;
right: -86px;
bottom: 62px;
width: 270px;
opacity: .23;
}
}
/* S25 · Final homepage composition. This block replaces the legacy fixed-height
hero and scrolling product rail with one shared, responsive 1500px system. */
.home-page .home-hero.home-hero--visual .home-hero__scene {
position: relative;
display: grid;
width: min(1500px, calc(100% - 48px));
min-height: 540px;
grid-template-columns: minmax(570px, .95fr) minmax(700px, 1.05fr);
grid-template-rows: auto;
gap: 24px;
padding: 0;
}
.home-page .home-hero.home-hero--visual .home-hero__copy .home-hero__eyebrow {
max-width: 620px;
margin: 0 0 19px;
color: #a9c2e7;
font-size: 12px;
line-height: 1.35;
letter-spacing: .18em;
}
.home-page .home-hero.home-hero--visual .home-hero__copy h1 {
max-width: 650px;
margin: 0 0 22px;
font-size: clamp(58px, 4.3vw, 72px);
font-weight: 800;
line-height: .94;
letter-spacing: -.048em;
word-spacing: .035em;
}
.home-page .home-hero.home-hero--visual .home-hero__copy .home-hero__intro {
max-width: 610px;
margin: 0;
color: #d7e2ec;
font-size: 18px;
line-height: 1.55;
}
.home-page .home-hero.home-hero--visual .home-hero__copy .home-hero__location {
max-width: 610px;
margin: 14px 0 0;
}
.home-page .home-hero.home-hero--visual .home-hero__copy .home-hero__actions {
margin-top: 24px;
}
.home-page .home-hero.home-hero--visual .home-hero__art .home-hero__vial:hover,
.home-page .home-hero.home-hero--visual .home-hero__art .home-hero__vial:focus-visible {
background: transparent;
box-shadow: none;
transform: none;
}
.home-page .home-proof {
padding: 30px 0;
}
.home-page .home-proof__grid > p {
min-height: 160px;
}
.home-page .home-featured-shell::before {
content: none;
display: none;
background: none;
}
.home-page .home-featured-bear {
display: none;
}
.home-page .featured-products__head {
align-items: end;
gap: 28px;
margin-bottom: 28px;
}
.home-page .featured-products__head h2 {
max-width: none;
font-size: clamp(48px, 4.7vw, 76px);
line-height: .98;
}
.home-page .home-featured-controls {
display: none;
}
.home-page .home-product-tile {
display: grid;
min-width: 0;
min-height: 570px;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 280px minmax(0, 1fr);
align-items: stretch;
justify-items: stretch;
border: 1px solid #cbd1d6;
background: #fff;
box-shadow: none;
overflow: hidden;
}
.home-page .home-product-tile__image {
display: flex;
width: 100%;
height: 280px;
align-items: center;
justify-content: center;
padding: 24px;
border-bottom: 1px solid #d7dce0;
background: #f1f3f4;
overflow: hidden;
}
.home-page .home-product-tile__vial {
display: flex;
width: 100%;
height: 100%;
aspect-ratio: auto;
align-items: center;
justify-content: center;
overflow: visible;
}
.home-page .home-product-tile__photo {
display: block;
width: auto;
height: auto;
max-width: 72%;
max-height: 230px;
object-fit: contain;
transform: scale(1);
transform-origin: center;
}
.home-page .home-product-tile--pt-141 .home-product-tile__photo {
transform: scale(.9);
}
.home-page .home-product-tile--retatrutide .home-product-tile__photo {
transform: scale(1.03);
}
.home-page .home-product-tile__copy {
display: flex;
min-width: 0;
min-height: 0;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 21px 22px 22px;
}
.home-page .home-product-tile__copy small {
display: block;
min-height: 40px;
margin: 0;
color: #606970;
font-size: 12px;
font-style: normal;
font-weight: 750;
line-height: 1.35;
letter-spacing: .12em;
text-transform: uppercase;
}
.home-page .home-product-tile__copy strong {
display: block;
min-height: 54px;
color: #111820;
font-size: 22px;
line-height: 1.12;
}
.home-page .home-product-tile__copy em {
min-height: 23px;
margin: 0;
color: #34414d;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 1.4;
align-self: flex-start;
}
.home-page .home-product-tile__copy .status-pill {
margin: 0;
align-self: flex-start;
justify-self: auto;
}
.home-page .home-product-tile__actions {
display: flex;
width: 100%;
margin-top: auto;
}
.home-page .home-product-tile__actions .btn {
width: 100%;
min-height: 44px;
justify-content: center;
}
@media (max-width: 1280px) {
.home-page .home-hero.home-hero--visual .home-hero__scene {
grid-template-columns: minmax(480px, .92fr) minmax(620px, 1.08fr);
}
}
@media (max-width: 1050px) {
.home-page .home-hero.home-hero--visual .home-hero__scene {
grid-template-columns: minmax(390px, .9fr) minmax(470px, 1.1fr);
}
.home-page .home-hero.home-hero--visual .home-hero__copy h1 {
font-size: clamp(54px, 6.2vw, 68px);
}
}
@media (max-width: 820px) {
.home-page .home-hero.home-hero--visual .home-hero__scene {
display: grid;
min-height: 0;
grid-template-columns: 1fr;
grid-template-rows: auto 390px;
gap: 0;
padding: 0;
}
}
@media (max-width: 580px) {
.home-page .home-hero.home-hero--visual .home-hero__scene {
width: calc(100% - 32px);
}
.home-page .home-hero.home-hero--visual .home-hero__scene {
grid-template-rows: auto 350px;
}
.home-page .home-hero.home-hero--visual .home-hero__copy .home-hero__eyebrow {
margin-bottom: 15px;
font-size: 10px;
}
.home-page .home-hero.home-hero--visual .home-hero__copy h1 {
max-width: 100%;
margin-bottom: 18px;
font-size: clamp(44px, 13vw, 54px);
}
.home-page .home-hero.home-hero--visual .home-hero__copy .home-hero__intro {
font-size: 16px;
}
.home-page .home-hero.home-hero--visual .home-hero__copy .home-hero__actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.home-page .home-hero.home-hero--visual .home-hero__copy .home-hero__actions .btn {
width: 100%;
min-height: 48px;
}
.home-page .home-proof {
padding: 22px 0;
}
.home-page .home-proof__grid > p {
min-height: 0;
}
.home-page .featured-products__head {
align-items: flex-start;
}
.home-page .featured-products__head h2 {
font-size: 43px;
}
.home-page .home-product-tile {
min-height: 560px;
}
}
/* S26 · Approved public-page navy banner authority.
Artwork remains page-specific: only the homepage keeps its bear and map. */
.home-page .home-hero.home-hero--visual,
.quick-order-page .quick-order-hero,
.seo-compound-page .compound-hero,
.compound-guide-page .compound-guide-hero,
.research-handling-page .research-handling-hero,
.about-page .about-hero,
.account-page .account-heading.account-hero,
.policy-redesign .policy-hero,
.delivery-coverage-page.policy-redesign .delivery-coverage-hero {
background: var(--bb-public-hero-background) !important;
}
.compound-guide-page .compound-guide-hero,
.research-handling-page .research-handling-hero {
width: 100%;
max-width: none;
min-height: 320px;
margin: 0;
padding: clamp(48px, 6vw, 72px) max(24px, calc((100vw - var(--bb-container)) / 2));
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: hidden;
color: #fff;
}
.compound-guide-page .compound-guide-hero > :not(.compound-guide-hero__bear) {
width: min(760px, 100%);
max-width: 760px;
}
.compound-guide-page .compound-guide-hero__bear {
display: none;
}
.compound-guide-page .compound-guide-hero .eyebrow,
.research-handling-page .research-handling-hero .eyebrow {
color: #a9c7e6;
}
.compound-guide-page .compound-guide-hero h1,
.research-handling-page .research-handling-hero h1 {
margin: 10px 0 14px;
color: #fff;
font-size: clamp(3.2rem, 6vw, 5.4rem);
line-height: 0.94;
letter-spacing: -0.055em;
}
.compound-guide-page .compound-guide-hero .section-lede,
.research-handling-page .research-handling-hero .section-lede {
max-width: 720px;
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: clamp(1rem, 1.5vw, 1.1rem);
line-height: 1.6;
}
.research-handling-page .research-handling-hero .access-gate {
width: min(760px, 100%);
max-width: 760px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
text-align: left;
}
.research-handling-page .research-handling-hero .hero-actions {
justify-content: flex-start;
margin-top: 28px;
}
.research-handling-page .research-handling-hero .btn-ghost {
border-color: rgba(255, 255, 255, 0.62);
color: #fff;
}
.account-page .account-heading.account-hero {
grid-template-columns: minmax(0, 1fr);
min-height: 300px;
}
.account-page .account-hero__art {
display: none;
}
@media (max-width: 620px) {
.compound-guide-page .compound-guide-hero,
.research-handling-page .research-handling-hero {
min-height: 280px;
padding: 42px 24px;
}
}
/* JOB 2B-C shared mobile hit areas. These enlarge interaction boxes without
turning ordinary inline copy links into oversized visual buttons. */
@media (max-width: 860px) {
.site-header .nav-toggle,
.site-header .nav-links a,
.site-header .cart-toggle,
.cart-close,
.footer-links a,
.cart-line-controls button,
.compound-guide-page .compound-guide-card__cta,
.seo-compound-page .compound-related-card a {
min-block-size: 44px;
min-inline-size: 44px;
}
.site-header .nav-links a,
.site-header .cart-toggle,
.footer-links a,
.cart-line-controls button,
.site-footer__nav a,
.compound-guide-page .compound-guide-card__cta,
.seo-compound-page .compound-related-card a {
display: inline-flex;
align-items: center;
}
.site-header .cart-toggle,
.footer-links a,
.cart-line-controls button {
min-block-size: 44px;
min-inline-size: 44px;
}
.cart-line-controls button {
justify-content: center;
}
.site-footer__nav a {
min-block-size: 44px;
min-inline-size: 44px;
}
}