to a real
![]()
exposed the theme/WP core `img { max-width: 100% }` responsive-image
reset, which resolves against the DIRECT PARENT's own box -- for
.bcp-strip--strip-3/-4 that parent is the normal ~1290px content
container, not the viewport, so it silently capped the `width: 100vw`
full-bleed breakout below at 1290px instead of the real viewport width
(measured 1290 vs 1440 at a 1440px viewport). `max-width: none` here
removes that cap for every `.bcp-strip`; harmless for the 6 positions
nested inside `.bcp-cta-band` (already full-bleed, so their own
`width: 100%` already equals the viewport with or without this). */
max-width: none;
height: auto;
aspect-ratio: 11.69;
object-fit: cover;
}
.bcp-strip--strip-3,
.bcp-strip--strip-4 {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* z8udzket44 r4: a torn edge is drawn in the colours of the two sections it joins
(Figma 21316:76927 / 23313:52676, eight dividers: beige>green, green>white,
white>green, green>white, white>beige, beige>white, white>beige, beige>green).
bonza_category_edge_img() picks the artwork; these rules give it the paper
colour and direction. Green edges keep the 1959/120 box the Collection and
FAQ tops already use, beige/white ones the strip's 11.69 box. */
img.bcp-edge {
display: block;
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
height: auto;
aspect-ratio: 11.69;
object-fit: cover;
}
/* A turned-over image is drawn on its own layer whose antialiased rim lands on a
fractional pixel, which left a 1px hairline against the neighbour. Each edge
therefore casts 2px of its neighbour's colour past both rims (box-shadow, so no
layout change), putting the rim inside same-colour paint. First shadow lands below the box, second above, before any turn. */
img.bcp-edge--white-green,
img.bcp-edge--green-white {
aspect-ratio: 1959 / 120;
object-fit: fill;
background-color: var(--wp--preset--color--bhp-white, #FFFFFF);
}
img.bcp-edge--white-green {
box-shadow: 0 2px 0 var(--wp--preset--color--bhp-green, #247B4E), 0 -2px 0 var(--wp--preset--color--bhp-white, #FFFFFF);
}
/* Turned over, so the shadow offsets swap: the top neighbour is green. */
img.bcp-edge--green-white {
transform: rotate(180deg);
box-shadow: 0 2px 0 var(--wp--preset--color--bhp-green, #247B4E), 0 -2px 0 var(--wp--preset--color--bhp-white, #FFFFFF);
/* Green behind the image's own top rim (bottom, before the turn), so its
antialiased first row blends with green, not the white fill. */
background-image: linear-gradient(to top, var(--wp--preset--color--bhp-green, #247B4E) 3px, transparent 3px);
}
img.bcp-edge--white-beige {
transform: rotate(180deg);
box-shadow: 0 2px 0 var(--wp--preset--color--bhp-white, #FFFFFF), 0 -2px 0 var(--wp--preset--color--bhp-cream, #F8EDE3);
}
img.bcp-edge--beige-white {
box-shadow: 0 2px 0 var(--wp--preset--color--bhp-white, #FFFFFF), 0 -2px 0 var(--wp--preset--color--bhp-cream, #F8EDE3);
}
/* The Bites page stack is beige: the grid block, Reviews and the FAQ lead-in all
use it (Figma frames 29854:99313 / 34247:214036 / 34323:189494 are #F8EDE3). The
FAQ band is the last thing in the stack, so no .ct-container bottom padding or
.site-main bottom margin may open a gap before the footer's Keep Reading band. */
html body[class*="term-bioactive-bites"] main.site-main {
background-color: var(--wp--preset--color--bhp-cream, #F8EDE3);
margin-bottom: 0;
}
html body[class*="term-bioactive-bites"] main.site-main > .ct-container {
padding-bottom: 0;
}
.bcp-cta-band {
display: flex;
flex-direction: column;
}
.bcp-cta-band__content {
background: var(--wp--preset--color--bhp-green, #247B4E);
padding: 20px var(--bcp-edge-gutter);
/* 86eypb6m9 fix, defect 7: Figma (EL-50cec58b) groups copy + button as
2 row+wrap children at all 3 breakpoints; the old flat 4-child column
couldn't reproduce that with CSS alone, so the copy trio now nests in
.bcp-cta-band__copy (markup change in category-page.php). */
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 64px;
}
.bcp-cta-band__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.bcp-cta-band__eyebrow {
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-weight: 900;
font-size: 14px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--wp--preset--color--bhp-white, #FFFFFF);
margin: 0;
}
.bcp-cta-band__heading {
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 36px;
line-height: 40px;
text-transform: uppercase;
color: var(--wp--preset--color--bhp-white, #FFFFFF);
margin: 0;
}
.bcp-cta-band__body {
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-size: 20px;
color: var(--wp--preset--color--bhp-white, #FFFFFF);
margin: 0;
max-width: 640px;
}
.bcp-cta-band__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 32px;
height: 48px;
border-radius: 999px;
background: var(--wp--preset--color--bhp-yellow, #FFC125);
color: var(--wp--preset--color--bhp-black, #000000);
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(0, 0, 0, 0.08);
}
.bcp-cta-band__button-icon {
flex: 0 0 auto;
color: currentColor;
}
/* NEW-5 (86eyv0k44 parity audit, verify-Category.json): on hover, the label
colour was flipping from black to the theme's default link-hover blue
(rgb(21,89,237)) while the background correctly darkened -- an inherited
`a:hover` rule from Blocksy/WooCommerce core beat this component's own
hover state because neither :hover rule here set `color` explicitly.
Setting it here, at the same specificity as the background change,
fixes both bugs with one declaration. */
.bcp-cta-band__button:hover,
.bcp-cta-band__button:focus-visible {
background: var(--wp--preset--color--bhp-amber, #FFA825);
color: var(--wp--preset--color--bhp-black, #000000);
}
/* Corrected ink token (86eyv0k44 GL-05, was #494545): #2E2A2A on the
#247B4E band measures 2.71:1, still under the 3:1 WCAG 1.4.11 floor for
a focus indicator (improved from #494545's 1.81:1, but not a pass); white
measures 5.23:1 (the same figure already established for header text on
this band), which is why the base band variant outlines in white, not
ink. The routines variant swaps the band to a white background, where
white-on-white would be 1:1, so it needs the ink color back, which now
measures 14.18:1 there. */
.bcp-cta-band__button:focus-visible {
outline: 2px solid var(--wp--preset--color--bhp-white, #FFFFFF);
outline-offset: 2px;
}
/* ==========================================================================
"Routines That Work as One" carousel (86eypb6m9 CAT-09)
========================================================================== */
.bcp-routine-carousel {
display: flex;
flex-direction: column;
align-items: center;
/* Figma Frame 2147229895: section gap 64 (D) / 24 (T) / 20 (M); the dots row
sits 20 under the cards via its own margin-top (z8udzket44). */
gap: 64px;
/* --bcp-edge-gutter reaches from the viewport edge to the container edge,
but this section already sits inside .ct-container, so past ~1512px the
gutter was added on top of the container margin (z8udzket44). Capped at
64px, the in-container inset; 25% only kept the track from collapsing. */
padding: 64px min(var(--bcp-edge-gutter), 64px);
/* Figma band fill is cream (F8EDE3), the same band the homepage routines use. */
background: var(--wp--preset--color--bhp-cream, #F8EDE3);
}
.bcp-routine-carousel__intro {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
width: 100%;
max-width: 1000px;
text-align: center;
}
.bcp-routine-carousel__eyebrow {
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 14px;
line-height: 16px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* Figma eyebrow fill is ink; 12.3:1 on the cream band */
margin: 0;
}
.bcp-routine-carousel__heading {
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 36px;
line-height: 40px;
text-transform: uppercase;
white-space: nowrap; /* client C13: heading on one line (wraps below 600px, where it cannot fit) */
color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 14.18:1 on white section bg (WCAG AA/AAA) */
margin: 0;
}
.bcp-routine-carousel__body {
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-size: 20px;
line-height: 24px;
color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 12.3:1 on the cream band */
margin: 0;
}
/* Track scrolls its own cards; height comes from the card content itself
(badges + title + rating + cost-per-day + purchase-mode chips), which is
what reaches Figma's 1396px desktop frame instead of the old static
160px-image pair's 685.5px. */
.bcp-routine-carousel__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 1fr);
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
list-style: none;
margin: 0;
padding: 0;
align-self: stretch;
scrollbar-width: none;
}
.bcp-routine-carousel__track::-webkit-scrollbar {
display: none;
}
.bcp-routine-carousel__item {
scroll-snap-align: start;
}
.bcp-routine-carousel__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
/* Figma: dot row 20px under the cards (the section gap is 64/24/20). */
margin-top: -44px;
}
/* Single scrollable row (Figma node I29576:32285;35879:95774, itemSpacing
24): 5 x 257.6px + 4 x 24px gap = 1384px. Capping/centering the track
at 1384px lets all 5 fit with no scroll on wide viewports; narrower
ones keep the base rule's column flow + overflow-x: auto. */
@media (min-width: 1024px) {
.bcp-routine-carousel__track {
grid-auto-columns: 216px; /* homepage + Figma tablet card; scrolls below 1440 */
max-width: 1384px;
margin-inline: auto;
/* Flex item's default min-width:auto sizes it to its 1384px grid
content instead of the (narrower) container, so auto margins
can't center it; width:100%+min-width:0 cap it to the container. */
width: 100%;
min-width: 0;
}
.bcp-routine-carousel__dots {
height: 48px;
}
}
/* z8udzket44 (client C13/G6): six routine cards at Figma's 257.6px; the row
scrolls and the last visible card is partly cut off, arrows + dots appear
(category-routine-carousel.js). */
@media (min-width: 1440px) {
.bcp-routine-carousel__track {
grid-auto-columns: 257.6px;
}
}
/* Figma routines section (nodes I29854:99313;34323:180175 mobile /
I29629:136070;34323:180175 tablet): T744 pad 60/24/24/24, card 216x620;
M428 pad 33/24/24/24, card 182x586. Gap 24 at both matches the track's
autoLayout.itemSpacing (nodes ...95774, confirmed 24, not 12). Dots
wrapper is 48px tall at every breakpoint (nodes ...83188). */
@media (min-width: 600px) and (max-width: 1023px) {
.bcp-routine-carousel {
padding: 24px;
gap: 24px;
}
.bcp-routine-carousel__intro {
max-width: none;
}
.bcp-routine-carousel__heading {
font-size: 30px;
line-height: 36px;
}
.bcp-routine-carousel__body {
font-size: 18px;
}
.bcp-routine-carousel__dots {
margin-top: -4px;
}
.bcp-routine-carousel__track {
grid-auto-columns: 216px;
gap: 24px;
}
.bcp-routine-carousel__dots {
height: 48px;
}
}
@media (max-width: 599.98px) {
.bcp-routine-carousel {
padding: 20px;
gap: 20px;
}
.bcp-routine-carousel__intro {
max-width: none;
}
.bcp-routine-carousel__eyebrow {
font-size: 12px;
}
.bcp-routine-carousel__heading {
font-size: 24px;
line-height: 32px;
white-space: normal;
}
.bcp-routine-carousel__body {
font-size: 18px;
}
.bcp-routine-carousel__dots {
margin-top: 0;
}
.bcp-routine-carousel__track {
grid-auto-columns: 182px;
gap: 24px;
}
.bcp-routine-carousel__dots {
height: 48px;
}
}
/* Overrides homepage.css's 317px default so this card matches Figma's
PRODUCT-CATEGORY-PAGE---D routines-track PRODUCT CARD instances
(D1512/T744/M428 sizes) exactly, now that PHP suppresses the
elements that drove the extra height. */
.bpc-card.bpc-card--compact {
width: 100%;
max-width: none;
height: 586px;
}
@media (min-width: 600px) and (max-width: 1023px) {
.bpc-card.bpc-card--compact {
height: 620px;
}
}
@media (min-width: 1024px) {
.bpc-card.bpc-card--compact {
height: 661.6px;
}
}
.bpc-price-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
}
.bpc-save-badge {
margin: 0;
padding: 2px 8px;
border-radius: 999px;
background: var(--wp--preset--color--bhp-cream, #F8EDE3);
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-size: 12px; /* WCAG floor 12px (Figma 10px), 86eypb6j8 */
line-height: 1.4;
color: var(--wp--preset--color--bhp-green, #247B4E); /* same token as .bpc-mode__save, 4.5:1+ on white */
}
.bcp-routine-carousel__dot {
width: var(--bonza-dot-size, 8px);
height: var(--bonza-dot-size, 8px);
padding: 0;
border: 0;
border-radius: 9999px;
background: var(--bonza-dot-inactive, #878787);
cursor: pointer;
}
.bcp-routine-carousel__dot.is-active {
width: var(--bonza-dot-pill, 32px);
background: var(--bonza-dot-active, #ffc125);
}
.bcp-routine-carousel__dot:focus-visible {
outline: 2px solid var(--wp--preset--color--bhp-green, #247B4E);
outline-offset: 2px;
}
/* Dot list + arrows (client G6). Arrows: solid brand green on the cream band
(4.9:1, needs 3:1), 44px target, visible focus ring, disabled at each end. */
.bcp-routine-carousel__dot-list {
display: flex;
align-items: center;
gap: var(--bonza-dot-gap, 12px);
}
.bcp-routine-carousel__dot {
position: relative;
}
/* 8px dot, 24px hit area. */
.bcp-routine-carousel__dot::before {
content: "";
position: absolute;
inset: -8px;
}
.bcp-routine-carousel__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--wp--preset--color--bhp-green, #247B4E);
color: var(--wp--preset--color--bhp-white, #FFFFFF);
cursor: pointer;
}
.bcp-routine-carousel__arrow:hover {
background: #1c5f3c; /* editor-friendly-ok: same hover shade the PDP routine button uses */
}
.bcp-routine-carousel__arrow:focus-visible {
outline: 2px solid var(--wp--preset--color--bhp-ink, #2E2A2A);
outline-offset: 2px;
}
.bcp-routine-carousel__arrow:disabled {
opacity: 0.35;
cursor: default;
}
.bcp-routine-carousel__dots[hidden] {
display: none;
}
/* ==== z8udzket44 routine cards (Figma PRODUCT CARD routine instances) ====
Same markup as the PDP and homepage routine cards
(product-page/routine-cards.php, bonza_pdp_routine_card()); neither of those
stylesheets loads here, so the card is styled below, scoped to the carousel.
Figma: 257.6 / 216 / 182 wide (the track sets the width), radius 12, square
image, body padding 16 (D) / 8 (T, M), gap 12, track gap 24. */
.bcp-routine-carousel__item {
display: flex;
}
.bcp-routine-carousel .bppm-routine-card {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
border-radius: 12px;
overflow: hidden;
background: var(--wp--preset--color--bhp-white, #FFFFFF);
/* Figma draws no ring or shadow on the card; it sits on the cream band like the homepage. */
box-shadow: none;
}
.bcp-routine-carousel .bppm-routine-card__media {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.bcp-routine-carousel .bppm-routine-card__img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.bcp-routine-carousel .bppm-routine-card__wishlist {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
min-width: 26px;
padding: 0;
border: 0;
border-radius: 999px;
background: #ffffff; /* editor-friendly-ok: exact Figma WISHLIST ICON fill, no palette slot */
box-shadow: none;
cursor: pointer;
}
.bcp-routine-carousel .bppm-routine-card__wishlist svg {
display: block;
width: 16px;
height: 14px;
}
.bcp-routine-carousel .bppm-routine-card__wishlist svg path {
fill: none;
stroke: #ff0000; /* editor-friendly-ok: exact Figma heart fill, no palette slot */
stroke-width: 1.3;
}
.bcp-routine-carousel .bppm-routine-card__wishlist[data-active="true"] svg path {
fill: #ff0000; /* editor-friendly-ok: exact Figma heart fill, no palette slot */
stroke: none;
}
.bcp-routine-carousel .bppm-routine-card__wishlist:focus-visible {
outline: 2px solid var(--wp--preset--color--bhp-green, #247B4E);
outline-offset: 2px;
}
/* "New Recipe Coming Soon" pill on the sold-out routine (Figma 34902:94476). */
.bcp-routine-carousel .bppm-routine-card__soon {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 1;
transform: translateX(-50%);
padding: 4px 6px;
border-radius: 999px;
background: var(--wp--preset--color--bhp-cream, #F8EDE3);
color: var(--wp--preset--color--bhp-ink, #2E2A2A);
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 8px;
line-height: 14px;
text-transform: uppercase;
white-space: nowrap;
}
.bcp-routine-carousel .bppm-routine-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
}
.bcp-routine-carousel .bppm-routine-card__title {
min-height: 32px;
margin: 0;
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 16px;
line-height: 16px;
letter-spacing: 0.02em;
text-transform: uppercase;
text-align: left;
color: var(--wp--preset--color--bhp-ink, #2E2A2A);
}
.bcp-routine-carousel .bppm-routine-card:has(.bppm-routine-card__soon) .bppm-routine-card__title {
min-height: 16px;
}
.bcp-routine-carousel .bppm-routine-card__tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.bcp-routine-carousel .bppm-routine-card__tag {
margin: 0;
padding: 4px 6px;
border-radius: 999px;
background: var(--wp--preset--color--bhp-cream, #F8EDE3);
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: var(--wp--preset--color--bhp-ink, #2E2A2A);
}
/* Tag pills are product links; the theme's global link underline and colour
leaked onto them. Figma D/T/M tag text: Kobe 12px, textDecoration NONE (z8udzket2d). */
.bcp-routine-carousel .bppm-routine-card__tag a,
.bcp-routine-carousel .bppm-routine-card__tag a:hover,
.bcp-routine-carousel .bppm-routine-card__tag a:visited {
color: inherit; /* bhp-ink on the bhp-cream pill = 12.3:1 */
text-decoration: none;
}
.bcp-routine-carousel .bppm-routine-card__tag a:focus-visible {
outline: 2px solid var(--wp--preset--color--bhp-green, #247B4E); /* 4.53:1 vs the cream pill, UI boundary needs 3:1 */
outline-offset: 2px;
border-radius: 999px;
}
.bcp-routine-carousel .bppm-routine-card__desc {
flex: 1;
min-height: 176px;
}
.bcp-routine-carousel .bppm-routine-card:has(.bppm-routine-card__soon) .bppm-routine-card__desc {
min-height: 192px;
}
.bcp-routine-carousel .bppm-routine-card__desc p {
margin: 0;
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: left;
color: var(--wp--preset--color--bhp-ink, #2E2A2A);
}
.bcp-routine-carousel .bppm-routine-card__desc p + p {
margin-top: 16px;
}
.bcp-routine-carousel .bppm-routine-card__rule {
margin: 0 0 -1px;
border: 0;
border-top: 1px solid #f3f4f6; /* editor-friendly-ok: exact Figma divider stroke, no palette slot */
}
/* Price row + saving badge sit 4px apart (Figma Frame 2147230024). */
.bcp-routine-carousel p.bppm-routine-card__price {
display: flex;
flex-wrap: wrap; /* "One-time total" drops to its own left-aligned line instead of breaking inside its box */
align-items: baseline;
column-gap: 4px;
row-gap: 0;
margin: 0 0 -8px;
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 400;
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
text-align: left;
color: var(--wp--preset--color--bhp-green, #247B4E);
}
/* G43: the price is one line and its "Subscribe & Save" label is a second
line, never wrapped, in every language and at every card width. */
.bcp-routine-carousel .bppm-routine-card__price-label {
flex: 0 0 100%;
white-space: nowrap;
text-align: left;
font-size: 12px;
line-height: 16px;
}
.bcp-routine-carousel .bppm-routine-card__price-label:is(:lang(fr), :lang(es), :lang(nl)) {
font-size: 10px;
letter-spacing: 0;
}
/* The mobile cards are 182px wide (166px of text): the DE label is 176px and
the FR label 204px at the sizes above, so they step down to stay inside. */
@media (max-width: 599px) {
.bcp-routine-carousel .bppm-routine-card__price-label:lang(de) {
font-size: 10px;
}
.bcp-routine-carousel .bppm-routine-card__price-label:lang(fr) {
font-size: 8px;
}
}
.bcp-routine-carousel .bppm-routine-card__price-was {
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-weight: 400;
font-size: 14px;
line-height: normal;
text-transform: none;
text-decoration: line-through;
color: #6b7280; /* editor-friendly-ok: exact Figma struck-price fill, no palette slot */
}
.bcp-routine-carousel .bppm-routine-card__badge {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
height: 18px;
padding: 4px 8px;
border-radius: 4px;
background: #ee0000; /* editor-friendly-ok: Figma #ff0000 is 4.0:1 with white (fails AA at 10px); #ee0000 is 4.5:1, same as #1002 */
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-weight: 700;
font-size: 10px;
line-height: 10px;
color: var(--wp--preset--color--bhp-white, #FFFFFF);
}
.bcp-routine-carousel .bppm-routine-card__form {
margin: 0;
}
.bcp-routine-carousel .bppm-routine-card__btn {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
min-height: 40px;
margin: 0;
padding: 0 16px;
border: 1px solid var(--wp--preset--color--bhp-green, #247B4E);
border-radius: 999px;
background: var(--wp--preset--color--bhp-green, #247B4E);
box-shadow: none;
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 10px;
line-height: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--bhp-white, #FFFFFF);
cursor: pointer;
}
.bcp-routine-carousel .bppm-routine-card__btn--notify {
padding: 0 12px;
background: transparent;
color: var(--wp--preset--color--bhp-green, #247B4E);
}
.bcp-routine-carousel .bppm-routine-card__btn:not(.bppm-routine-card__btn--notify):hover {
background: #1c5f3c; /* editor-friendly-ok: same hover shade the PDP routine button already uses */
border-color: #1c5f3c; /* editor-friendly-ok: same hover shade the PDP routine button already uses */
}
.bcp-routine-carousel .bppm-routine-card__btn:focus-visible {
outline: 2px solid var(--wp--preset--color--bhp-ink, #2E2A2A);
outline-offset: 2px;
}
@media (max-width: 1023px) {
.bcp-routine-carousel .bppm-routine-card__body {
padding: 8px;
}
.bcp-routine-carousel .bppm-routine-card__title {
font-size: 14px;
}
.bcp-routine-carousel .bppm-routine-card__desc {
min-height: 192px;
}
.bcp-routine-carousel .bppm-routine-card__price-was {
font-size: 12px;
}
}
@media (max-width: 743px) {
.bcp-routine-carousel .bppm-routine-card__desc p {
font-size: 12px;
}
.bcp-routine-carousel p.bppm-routine-card__price {
font-size: 12px;
}
.bcp-routine-carousel .bppm-routine-card__price-was {
font-size: 10px;
}
}
/* The notify-me variant is 12px padded. */
.bcp-routine-carousel a.bppm-routine-card__btn {
padding: 12px;
}
/* z8udzket2d: two buttons per card (one per product, G26). 12px under the
price, 8px between them, last row pinned to the card foot so the pairs line
up across the row. Height grows with the label (min 40px) so a long name
such as "Shop Superfoods & Ancient Grains" wraps instead of clipping. */
.bcp-routine-carousel .bppm-routine-card__actions {
display: grid; /* G43: equal rows, so the two-line Superfoods button and its partner match in height */
grid-auto-rows: 1fr;
gap: 8px; /* same 8px if the pair ever sits side by side (row-gap = column-gap) */
width: 100%;
margin-top: auto;
/* Pin the price + buttons to the same line on every card: a two-line label
("Shop Superfoods & Ancient Grains") makes its pair 6px taller, which used
to lift that card's price above the rest. Reserve the tallest pair
(8 + 46 + 8 + 40) and anchor the buttons to the bottom. */
min-height: 102px;
/* G43/G38: the buttons must fill the card's inner width. In a grid,
justify-content: flex-end shrank the single auto column to the widest
label and pushed it right, so every short label (e.g. "Shop Biotics")
rendered ~126px wide instead of the full 166-226px. Stretch the column
and anchor the rows to the bottom with align-content instead. */
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
align-content: end;
}
.bcp-routine-carousel .bppm-routine-card__actions .bppm-routine-card__btn {
flex: 1 1 auto;
min-width: 0;
}
.bcp-routine-carousel p.bppm-routine-card__price + .bppm-routine-card__actions {
padding-top: 8px; /* the price carries margin-bottom -8px, so 12px gap + 8px - 8px */
}
.bcp-routine-carousel .bppm-routine-card__actions .bppm-routine-card__btn {
height: auto;
min-height: 40px;
padding: 8px 16px;
text-align: center;
overflow-wrap: anywhere;
}
.bcp-routine-carousel .bppm-routine-card__actions .bppm-routine-card__btn--notify {
padding: 8px 12px;
}
/* G43: DE "BIOTICS ENTDECKEN" / "BOUNCE ENTDECKEN" wrapped onto two lines in the
166px mobile button (all engines). Trim side padding and tracking so single-
product labels fit on one line; font stays 10px, no truncation. The Superfoods
label is the one accepted wrap and still wraps (it is far longer). */
@media (max-width: 743px) {
.bcp-routine-carousel .bppm-routine-card__actions .bppm-routine-card__btn,
.bcp-routine-carousel .bppm-routine-card__actions .bppm-routine-card__btn--notify {
padding-left: 8px;
padding-right: 8px;
letter-spacing: 0.02em;
}
}
@media (max-width: 374.98px) {
.bcp-routine-carousel .bppm-routine-card__actions .bppm-routine-card__btn,
.bcp-routine-carousel .bppm-routine-card__actions .bppm-routine-card__btn--notify {
padding-left: 4px;
padding-right: 4px;
letter-spacing: 0;
}
}
.bcp-routine-carousel .bppm-routine-card__wishlist {
padding: 0 8px;
}
.bcp-routine-carousel .bppm-routine-card__wishlist svg {
flex: none;
}
/* ==== z8udzket44 routine cards (end) ==== */
/* ==========================================================================
Generic section: How It Works / Connected System / Real Science
========================================================================== */
.bcp-section {
padding: 64px;
display: flex;
flex-direction: column;
gap: 48px;
background: var(--wp--preset--color--bhp-white, #FFFFFF);
position: relative;
isolation: isolate;
}
/* z8udzket44 r4: on the Bites page the stack sits on beige (rule below the strips),
so a white section has to reach the viewport edges like Figma's full-width white
frames; behind its content, same fill as the section. */
body[class*="term-bioactive-bites"] .bcp-section::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: calc(50% - 50vw);
width: 100vw;
background: inherit;
}
.bcp-section__intro {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 640px;
}
.bcp-section__eyebrow {
/* CAT-01 (86eypb6m9 triage, confirmed against elements-desktop/tablet/
mobile.json): every eyebrow instance uses Nominee 900 in Figma, not
Kobe1.1; the var below is already loaded (bcp-section__heading uses it). */
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 14px;
line-height: 1.2; /* >=1.2x, 86eypb6j8 */
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 14.18:1 on white / 12.30:1 on cream .bcp-section bg (WCAG AA/AAA) */
margin: 0;
}
.bcp-section__eyebrow--center,
.bcp-section__heading--center {
text-align: center;
max-width: none;
}
.bcp-section__eyebrow--light {
color: var(--wp--preset--color--bhp-white, #FFFFFF);
}
.bcp-section__heading {
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 36px;
line-height: 40px;
text-transform: uppercase;
color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 14.18:1 on white / 12.30:1 on cream .bcp-section bg (WCAG AA/AAA) */
margin: 0;
}
.bcp-section__heading--accent {
color: var(--wp--preset--color--bhp-green, #247B4E);
}
.bcp-section__heading--light {
color: var(--wp--preset--color--bhp-white, #FFFFFF);
}
.bcp-section__body {
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-weight: 700;
font-size: 20px;
line-height: 24px; /* CAT-02, confirmed: flat 24px in Figma at every breakpoint */
color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 14.18:1 on white / 12.30:1 on cream .bcp-section bg (WCAG AA/AAA) */
margin: 0;
}
.bcp-section__link {
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 12px;
line-height: 26px; /* CAT-02, confirmed: flat 26px in Figma at every breakpoint */
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--wp--preset--color--bhp-green, #247B4E);
text-decoration: none;
}
.bcp-section__link:hover,
.bcp-section__link:focus-visible {
text-decoration: underline;
}
/* z8udzket44: Figma is intro centred on top (1000 wide), then image left +
3 numbered steps right (660 each, gap 64), section padding/gap 64. */
.bcp-how-it-works {
flex-direction: column;
align-items: center;
gap: 64px;
}
.bcp-how-it-works .bcp-section__intro {
align-items: center;
text-align: center;
width: 100%;
max-width: 1000px;
}
.bcp-how-it-works .bcp-section__body {
max-width: 600px;
}
.bcp-how-it-works__row {
display: flex;
flex-direction: row;
align-items: center;
gap: 64px;
width: 100%;
max-width: 1384px;
}
.bcp-how-it-works__media {
flex: 1 1 0;
min-width: 0;
display: block;
}
.bcp-how-it-works__media img {
width: 100%;
height: auto;
aspect-ratio: 660 / 880;
object-fit: cover;
border-radius: 24px;
}
/* Figma crops: tablet 696/928, mobile 388/800. */
@media (max-width: 1023.98px) {
.bcp-how-it-works__media img {
aspect-ratio: 696 / 928;
}
}
@media (max-width: 599.98px) {
.bcp-how-it-works__media img {
aspect-ratio: 388 / 800;
}
}
.bcp-how-it-works__steps {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 28px;
list-style: none;
margin: 0;
padding: 0;
}
.bcp-how-it-works__step {
display: flex;
flex-direction: row;
align-items: center;
gap: 22px;
margin: 0;
padding: 0;
}
.bcp-how-it-works__num {
flex: 0 0 35px;
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 50%;
background: var(--wp--preset--color--bhp-amber, #FFA825);
color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 8.1:1 on amber */
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 18px;
line-height: 1;
}
.bcp-how-it-works__content {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 1 0;
min-width: 0;
}
.bcp-how-it-works__icon {
display: block;
width: auto;
height: 90px;
max-width: none;
margin: 0 0 18px;
}
.bcp-how-it-works__title {
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 18px;
line-height: 20px;
text-transform: uppercase;
color: var(--wp--preset--color--bhp-ink, #2E2A2A);
margin: 0 0 8px;
}
.bcp-how-it-works__text,
.bcp-how-it-works__tag {
margin: 0;
}
.bcp-how-it-works__text {
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-weight: 400;
font-size: 20px;
line-height: 24px;
color: var(--wp--preset--color--bhp-ink, #2E2A2A);
margin-bottom: 8px;
}
.bcp-how-it-works__tag {
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: var(--wp--preset--color--bhp-green, #247B4E);
}
.bcp-connected-system {
/* z8udzket44 item 9: Figma S6 (21316:76927 / 23310:35541 / 23313:52676) is a
346px row on desktop (362px diagram left, copy left-aligned right, 64px gap,
20px/64px padding), the same copy stacked and left-aligned on tablet/mobile
with the diagram centred above it. The build centred everything (765px). */
align-items: center;
text-align: left;
gap: 24px;
}
.bcp-connected-system .bcp-section__intro {
align-self: stretch;
max-width: none;
}
.bcp-connected-system .bcp-section__body {
max-width: 800px;
}
.bcp-connected-system__diagram {
width: 100%;
max-width: 362px;
height: auto;
aspect-ratio: 362 / 258;
object-fit: contain;
}
@media (min-width: 1024px) {
.bcp-connected-system {
flex-direction: row;
gap: 64px;
padding: 20px 64px;
}
.bcp-connected-system__diagram {
flex: 0 0 362px;
}
.bcp-connected-system .bcp-section__intro {
flex: 1 1 auto;
align-self: center;
}
}
@media (max-width: 1023px) {
.bcp-connected-system .bcp-section__heading {
font-size: 30px;
line-height: 36px;
}
.bcp-connected-system .bcp-section__body {
font-size: 18px;
}
}
@media (max-width: 599.98px) {
.bcp-connected-system {
gap: 20px;
}
.bcp-connected-system .bcp-section__heading {
font-size: 24px;
line-height: 32px;
}
}
.bcp-real-science {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
/* z8udzket44 r4: Figma's "Ciencia real" frame (34323:182647) is #FFFFFF; the
cream band was the routines section's colour, so it inherits .bcp-section white. */
}
/* z8udzket44 (iss-07e88227): never crop the illustration. The asset is 1400x786
(1.78:1), the same ratio Figma uses at tablet (696x391) and desktop (668x375).
Figma's mobile frame (388x337) cropped it to ~1.15:1, which cut the dog's head
and the icons; the whole image now renders at its own ratio at every width, so
mobile is shorter than Figma's 337 on purpose. */
.bcp-real-science__media {
flex: 1 1 388px;
width: 100%;
max-width: 668px;
height: auto;
aspect-ratio: 1400 / 786;
border-radius: 24px;
object-fit: contain;
/* z8udzket44 item 12: the 1.2MB PNG is lazy, so at scroll speed the slot shows
the section's own cream for a moment; a faint tint reads as "loading". */
background-color: rgba(46, 42, 42, 0.06);
}
.bcp-real-science .bcp-section__intro {
flex: 1 1 320px;
}
/* CAT-03 (86eypb6m9 triage, confirmed against elements-desktop/tablet/
mobile.json): this section's own body copy is 18px/120% line-height in
Figma at every breakpoint, not the shared 20px/24px base rule. */
.bcp-real-science .bcp-section__body {
font-size: 18px;
line-height: 1.2;
}
/* ==========================================================================
FAQ accordion
========================================================================== */
.bcp-faq {
position: relative;
}
/* C16: the torn top edge sits above the green band, so the band is its own
element instead of the section. */
.bcp-faq__band {
background: var(--wp--preset--color--bhp-green, #247B4E);
padding: 32px var(--bcp-edge-gutter);
display: flex;
flex-direction: column;
gap: 64px;
}
/* Torn-paper top edge: transparent above, green below, the divider strip's own silhouette. */
.bcp-torn-top {
display: block;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 1959 / 120;
margin-bottom: -1px;
/* z8udzket44 r4: both users (Collection band, FAQ band) lead in from a beige section. */
background-color: var(--wp--preset--color--bhp-cream, #F8EDE3);
}
.bcp-faq__intro {
display: flex;
flex-direction: column;
gap: 16px;
/* z8udzket44 item 14: Figma centres a 1000px column (x256 of 1512) for both
the intro and the list; the 640px cap wrapped "Your Questions Answered". */
width: 100%;
max-width: 1000px;
margin-inline: auto;
}
.bcp-faq__list {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
max-width: 1000px;
margin-inline: auto;
}
/* 0.08 white-on-#247B4E composited to ~4.47:1, under the 4.5:1 the 14px
answer copy and the 16px/900 (not "large text" by the 18.66px bold
threshold) question text both need. 0.05 composites to ~4.74:1, verified
against the WCAG relative-luminance formula directly, not assumed. */
.bcp-faq__item {
/* z8udzket44 item 14: Figma's summary rows (32px: 8px + 16px text + 8px) have no
fill or radius; the tinted card here made each row 44px and the list ~500px
taller than the 811px frame. */
background: none;
border-radius: 0;
/* CT-08 (86eyv0k44 parity audit, verify-Category.json row 1464f06a2211):
item count already matched Figma 13/13, so the +155 to +228px overshoot
was pure padding/line-height, not missing content. 16px top/bottom was
the biggest single contributor across 13 rows; trimmed here rather
than shrinking the 16px/900 question text itself (Gate 3B contrast +
legibility). */
padding: 23px 0 8px;
/* C16: the thin brushstroke divider above every row, the same image and
15px box the homepage FAQ list draws; no boxed rows, no heavy rules. */
background-image: url('../assets/category-page/bcp-faq-separator.png');
background-repeat: no-repeat;
background-position: top center;
background-size: 100% 15px;
}
.bcp-faq__item:last-child {
padding-bottom: 0;
}
/* Each question is its own
inside the summary (C16); the row styles above carry the type. */
.bcp-faq__q-text {
margin: 0;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
}
.bcp-faq__question {
/* 86eyy8hud: Figma draws FAQ questions in Nominee Heavy Extended (I36250:89836;34338:180384). Size and line-height stay at the 16px text floor (kobe-16-floor.css, Vita QA) rather than Figma 16/14 lh 16. */
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 16px;
line-height: 1.4; /* was flat 16px (1.0x), 86eypb6j8 */
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--wp--preset--color--bhp-white, #FFFFFF);
cursor: pointer;
list-style: none;
}
.bcp-faq__question::-webkit-details-marker {
display: none;
}
.bcp-faq__question:focus-visible {
outline: 2px solid var(--wp--preset--color--bhp-white, #FFFFFF);
outline-offset: 2px;
}
.bcp-faq__answer {
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-size: 14px;
color: var(--wp--preset--color--bhp-white, #FFFFFF);
margin-top: 12px;
}
/* Not opacity: dimming white text further toward the already-dark FAQ
background composites down to about 3.4:1, under the 4.5:1 this text
needs, worse than the plain answer text it is meant to be a variant of.
Full-opacity white plus italic still reads as a placeholder without
losing contrast. */
.bcp-faq__answer--todo {
font-style: italic;
}
/* ==========================================================================
Tablet (744) and mobile (428 as drawn, 375 floor)
========================================================================== */
@media (max-width: 1023px) {
/* .bcp-cta-band__content and .bcp-faq stay OUT of this flat padding
rule on purpose. They sit outside .ct-container (full-bleed), while
.bcp-quiz/.bcp-section/the grid/the result count sit inside it, so a
flat 20px on both groups misaligns them by however wide the
container's own inset is at this breakpoint, the same alignment
defect the desktop gutter fix above exists to prevent, just below
1024px instead of above it (confirmed live: 22-51px depending on
width in this range). Redefining --bcp-edge-gutter below with a 20px
base, instead of giving these two elements their own flat padding,
lets the SAME var(--bcp-edge-gutter) reference already on
.bcp-cta-band__content/.bcp-faq above pick up the narrower value
automatically. */
:root {
--bcp-edge-gutter: max(20px, calc((100vw - var(--bcp-container-width)) / 2 + 20px));
}
.woocommerce ul.products {
padding: 0 20px 40px;
gap: 16px;
}
.woocommerce .woocommerce-result-count {
padding: 0 20px;
}
.bcp-quiz,
.bcp-section {
padding: 20px;
}
/* No tablet/mobile Figma frame for this section; stays visible at every
width, adapted from desktop. Base nowrap cascades into these children
and can push a long pill label past the viewport even though the row
itself wraps, so reset both here. Tap target already >=24x24 CSS px
(min-height: 56px on .bcp-pill above satisfies WCAG 2.2 AA 2.5.8).
Chips keep Figma's single scrolling row (no wrap), so the base
nowrap/overflow-x: auto on .bcp-quiz__pills and .bcp-pill stays. */
.bcp-how-it-works,
.bcp-real-science {
flex-direction: column;
}
/* z8udzket44: in this column layout the base `flex: 1 1 388px` basis would set the
image HEIGHT to 388px and override aspect-ratio, which re-crops it. Let the
ratio decide the height. */
.bcp-real-science__media {
flex: 0 0 auto;
}
/* z8udzket44 tablet 744: padding 24, gaps 24, image full width then steps. */
html body.tax-product_cat .bcp-section.bcp-how-it-works {
padding: 24px;
gap: 24px;
}
.bcp-how-it-works__row {
flex-direction: column;
align-items: stretch;
gap: 24px;
max-width: none;
}
.bcp-how-it-works__media {
flex: 0 0 auto;
}
.bcp-how-it-works__steps {
flex: 0 0 auto;
}
.bcp-how-it-works .bcp-section__body,
.bcp-how-it-works__text {
font-size: 18px;
line-height: 24px;
}
.bcp-how-it-works__title {
font-size: 16px;
line-height: 16px;
}
.bcp-quiz__heading,
.bcp-cta-band__heading,
.bcp-section__heading {
font-size: 26px;
line-height: 30px;
}
/* 86eypb6m9 fix, defect 7: Figma tablet frame tightens the row gap
between the copy group and button vs the 64px desktop value. */
.bcp-cta-band__content {
gap: 24px;
}
/* CAT-05 (86eypb6m9 triage, confirmed): FAQ question drops 16px->14px
at tablet+mobile in Figma; the base rule's flat 16px line-height
already gives the correct ~1.14 ratio at 14px. */
.bcp-faq__question {
font-size: 14px;
}
/* z8udzket44 item 14: intro-to-list gap is 24px in the tablet frame. */
.bcp-faq__band {
gap: 24px;
}
}
/* CT-11 (86eyv0k44 parity audit, runs/verify-Category.json row fa466e700c68):
Figma's tablet anchor (744) lays the catalogue out in 3 columns; the base
grid above is 4-up (desktop) and the <1024px block was flattening
straight to 2-up with no 3-up tablet step. Live-verified: theme has no
dedicated tablet tier before this fix, confirmed 2 columns at both
744 and 768. 600px is this file's own mobile/tablet split (below it,
CT-10's 2-up + featured-first-card rule takes over). max-width uses
599.98px, not 599px, so fractional viewport widths (browser zoom,
non-integer device-pixel-ratio) fall inside one tier or the other
instead of a 599-600px gap that would silently match neither and fall
back to the base 4-up desktop grid. */
@media (min-width: 600px) and (max-width: 1023px) {
.woocommerce ul.products {
grid-template-columns: repeat(3, 1fr);
}
/* Same auto-fit collapse as the desktop tier above, at the tablet
card width (216px, Figma T744 3-col frame); guarded to this tier's
own item count so it can't leak into the 4-up desktop match. */
.woocommerce ul.products:has(li.product:first-child:nth-last-child(-n+3)) {
grid-template-columns: repeat(auto-fit, minmax(0, 216px));
justify-content: start;
}
}
@media (max-width: 599.98px) {
.woocommerce ul.products {
grid-template-columns: repeat(2, 1fr);
}
/* 86eypb6m9 fix, defect 7: Figma mobile frame tightens the row gap
further than the 24px tablet value. */
.bcp-cta-band__content {
gap: 20px;
}
.bcp-faq__band {
gap: 20px;
}
/* CT-10 (86eyv0k44 parity audit, verify-Category.json new_finding NEW-2):
Figma's mobile catalogue leads with one full-width featured card
(BIOTICS, 388px) then switches to 2-up for the rest. Live rendered
all 14 products at a uniform 2-up from row 1. grid-column: 1 / -1
spans the featured first card across both tracks without needing to
reorder the WooCommerce loop markup; every following item falls back
into the normal 2-up auto-placement. Scoped to page 1 only (body not
carrying .bcp-paged, category-page.php) -- Figma has no equivalent
"featured first card" frame for page 2+ of the same archive.
:not(.product-category) guards against WooCommerce's "Show
subcategories" archive setting: :first-of-type is positional among
sibling li elements regardless of class, so when Woo emits a
subcategory tile first (li.product-category.product) the whole
compound selector matches nothing -- the grid safely degrades to a
plain 2-up with no featured card, it does NOT relocate the span to
the first real product. This site's category archive does not
currently enable that Woo setting (confirmed live, no
.product-category tiles render), so the featured card always shows
today; the guard only protects the no-crash-into-wrong-element
fallback if that setting is ever turned on.
`.woocommerce` lives on itself on this theme, so it must be
compounded directly onto `body` (no space), never used as a separate
descendant of it -- see CHANGELOG for the regression this fixed. */
body.woocommerce:not(.bcp-paged) ul.products li.product:not(.product-category):first-of-type {
grid-column: 1 / -1;
}
/* CAT-05 (86eypb6m9 triage, confirmed): eyebrow drops 14px->12px at this
same mobile tier in Figma, across all four sections using it; the
base rule's flat 16px line-height is unchanged here. */
.bcp-section__eyebrow {
font-size: 12px;
}
/* z8udzket44 mobile 428: padding 20, gaps 20, tag 12/16. */
html body.tax-product_cat .bcp-section.bcp-how-it-works {
padding: 20px;
gap: 20px;
}
.bcp-how-it-works__row {
gap: 20px;
}
.bcp-how-it-works__tag {
font-size: 12px;
}
}
/* Section heading scale per Figma (tablet 744: 30/36, mobile 428: 24/32;
* quiz heading 28/28 tablet and 20/24 mobile). The <1024px block above
* flattened everything to 26/30, and the routine carousel heading stayed
* 36/40 at every width. `body` prefix wins over the extra-sections file
* regardless of stylesheet order. */
@media (max-width: 1023px) {
body .bcp-cta-band__heading,
body .bcp-section__heading,
body .bcp-routine-carousel__heading,
body .bcp-collection-intro__heading,
body .bcp-testimonials__heading {
font-size: 30px;
line-height: 36px;
}
body .bcp-quiz__heading {
font-size: 28px;
line-height: 28px;
}
}
@media (max-width: 599.98px) {
body .bcp-cta-band__heading,
body .bcp-section__heading,
body .bcp-routine-carousel__heading,
body .bcp-collection-intro__heading,
body .bcp-testimonials__heading {
font-size: 24px;
line-height: 32px;
}
body .bcp-quiz__heading {
font-size: 20px;
line-height: 24px;
}
}
/* Pill hover/focus text colour: the theme's link hover blue (#1559ED) was
* showing through, giving 1.5:1 on the active (green) pill. Figma draws no
* hover axis for the chips, so hold the resting colours. */
body .bcp-pill:hover,
body .bcp-pill:focus-visible {
color: var(--wp--preset--color--bhp-ink, #2E2A2A);
}
body .bcp-quiz--filtered .bcp-pill--active:hover,
body .bcp-quiz--filtered .bcp-pill--active:focus-visible {
color: var(--wp--preset--color--bhp-white, #FFFFFF);
}
/* Filter chip height: Figma draws 56px (12px padding around a 32px icon);
* the 1px transparent border added 2px on top, so v1 was 58px. */
body .bcp-pill {
padding-block: 11px;
}
/* 86eypb6m9 Figma parity: the category frames put content 64px (20px on
mobile) from the viewport edge at a 1512 cap. Blocksy's 90% / 1290px
container pushed everything inward (cards 273px not 328px, Foundation text
at x=221 not 64, the contained image strips at 110px not 129px). The
container fills the viewport up to 1512 here and the shared gutter formula
collapses to the Figma value on its own. */
body.tax-product_cat main.site-main {
--bcp-container-width: min(100vw, 1512px);
--bcp-edge-gutter: max(64px, calc((100vw - var(--bcp-container-width)) / 2 + 64px));
}
body.tax-product_cat main.site-main > .ct-container {
width: 100%;
max-width: 1512px;
}
@media (max-width: 1023px) {
body.tax-product_cat main.site-main {
--bcp-edge-gutter: max(20px, calc((100vw - var(--bcp-container-width)) / 2 + 20px));
}
}
/* CAT-08a never applied: Blocksy puts .woocommerce on , so the
descendant form never matched and titles stayed 14px. Figma: 16px at 1512,
14px at 744 and 428. */
@media (min-width: 1024px) {
html body.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
font-size: 16px;
line-height: 1.2;
}
}
/* Tablet frame (744): 32px side margin, three 216px cards. */
@media (min-width: 744px) and (max-width: 1023px) {
body.tax-product_cat main.site-main {
--bcp-edge-gutter: max(32px, calc((100vw - var(--bcp-container-width)) / 2 + 32px));
}
html body.tax-product_cat ul.products,
html body.tax-product_cat .woocommerce-result-count {
padding-inline: 32px;
}
html body.tax-product_cat .bcp-quiz,
html body.tax-product_cat .bcp-section {
padding: 32px;
}
}
/* Category card content, Figma node I29576:32285;34250:87132 and the 744/428
frames. Inset 16px (8px at 428), 12px row gaps, text at the 12px floor where
Figma draws 10px. `order` is paint order only; nothing here is focusable. */
html body.tax-product_cat ul.products li.product {
--bcp-card-inset: 16px;
padding-bottom: 16px;
}
html body.tax-product_cat ul.products li.product .entry-meta {
display: none; /* the category pill is not on the Figma card; the axis tag sits over the photo */
}
html body.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
margin: 16px var(--bcp-card-inset) 0;
}
html body.tax-product_cat ul.products li.product .bcp-card-rating {
order: 3;
margin: 12px var(--bcp-card-inset) 0;
line-height: 16px; /* Figma row is 16px; the inherited 16.8px added 0.8px */
min-height: 16px; /* a card without reviews keeps the row, so the rows below stay level */
align-items: center;
}
/* Star icons (client revisions C6): five stars, filled to the live average. */
html body.tax-product_cat ul.products li.product .bcp-card-stars {
--bcp-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16' viewBox='0 0 80 16'%3E%3Cg id='s'%3E%3Cpath d='M8 1l2.1 4.6 5 .6-3.7 3.4 1 5L8 12.1 3.6 14.6l1-5L.9 6.2l5-.6z'/%3E%3C/g%3E%3Cuse href='%23s' x='16'/%3E%3Cuse href='%23s' x='32'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='64'/%3E%3C/svg%3E");
display: inline-block;
flex: none;
width: 80px;
height: 16px;
background: linear-gradient(90deg, #E0A100 var(--bcp-rating, 0%), #D4D0CC var(--bcp-rating, 0%)); /* editor-friendly-ok: star fill/empty, no registered palette slug */
-webkit-mask: var(--bcp-star) no-repeat center / 80px 16px;
mask: var(--bcp-star) no-repeat center / 80px 16px;
}
html body.tax-product_cat ul.products li.product .bcp-card-rating--empty {
margin-bottom: 0;
}
html body.tax-product_cat ul.products li.product .bcp-card-desc {
order: 4;
margin: 12px var(--bcp-card-inset) 0;
min-height: 32px;
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 14.18:1 on white */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
html body.tax-product_cat ul.products li.product .bcp-card-chips {
order: 5;
display: flex;
/* C7 asks for one line at every width. WCAG overrides the client layout (12px
text floor, reported to QA): the text scales down to 12px to keep one line, and
where three chips still do not fit at 12px (2-column mobile, long translations)
the row wraps cleanly rather than shrinking, clipping or overflowing. */
flex-wrap: wrap;
gap: 4px;
margin: 12px var(--bcp-card-inset) 12px; /* Figma: 12px from the chips to the 1px rule */
padding: 0;
list-style: none;
container-type: inline-size;
min-width: 0;
align-content: flex-start; /* price and buttons are bottom-anchored, so a wrapped row cannot unlevel them */
}
html body.tax-product_cat ul.products li.product .bcp-card-chip {
flex: 0 1 auto;
min-width: 0;
white-space: nowrap;
padding: 4px 0.5em;
border-radius: 4px;
background: rgba(255, 193, 37, 0.1);
font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif);
font-weight: 700;
font-size: clamp(12px, 3.8cqw, 13px); /* scales with the card, never below the 12px floor */
line-height: 15px;
color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 14.18:1 on the 10% amber tint over white */
}
/* Price and per-day share one row under Figma's 1px rule (node 29323:47298). */
html body.tax-product_cat ul.products li.product .bcp-card-pricerow {
order: 6;
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 4px;
row-gap: 0;
margin: auto var(--bcp-card-inset) 0; /* price, saving and buttons sit on the card base, level across a row */
min-height: 0;
padding-top: 12px;
border-top: 1px solid #F3F4F6; /* editor-friendly-ok: Figma Line 12 stroke, no registered palette slug */
}
html body.tax-product_cat ul.products li.product .bcp-card-pricerow .price {
display: block;
margin: 0;
text-transform: none;
}
html body.tax-product_cat ul.products li.product .bcp-card-pricerow .bcp-cost-per-day {
order: 0;
margin: 0;
font-weight: 700;
font-size: 12px; /* Figma 10px, 12px floor */
line-height: 16px;
opacity: 1;
}
html body.tax-product_cat ul.products li.product .bcp-card-save {
order: 7;
margin: 4px var(--bcp-card-inset) 0;
padding-block: 3px; /* Figma badge is 18px tall; the 12px text floor stays */
}
html body.tax-product_cat ul.products li.product .ct-woo-card-actions {
order: 8;
margin-inline: var(--bcp-card-inset);
}
/* Higher specificity than the margin-top: 0 reset further down, so it wins from here. */
html body.tax-product_cat ul.products li.product:not(:has(.bcp-card-pricerow)) .ct-woo-card-actions {
margin-top: auto; /* products without the Bite price row still anchor their button */
}
/* Sold-out Bite: Notify Me and View Product share the button row, so the
card base is the same height as its neighbours' single button. */
html body.tax-product_cat ul.products li.product .bcp-card-actionpair {
display: flex;
flex-wrap: wrap; /* z8udzket2d: stack full-width when the card is too narrow for two */
gap: 8px;
width: 100%;
min-width: 0;
}
html body.tax-product_cat ul.products li.product .bcp-card-actionpair a.button {
flex: 1 1 168px; /* two 168px buttons + 8px gap = 344px (fits the longest DE labels); narrower cards stack */
min-width: 0;
box-sizing: border-box;
padding-inline: 8px;
gap: 4px;
white-space: normal; /* a long label (DE at 320px) wraps to two lines inside the 40px button, never clips */
text-align: center;
}
@media (max-width: 599.98px) {
html body.tax-product_cat ul.products li.product .bcp-card-actionpair a.button {
padding-inline: 4px;
letter-spacing: 0;
font-size: 11px;
}
/* 116px buttons at 320px: DE "Benachrichtigen" is one unbreakable word and clipped at 11px;
hyphenate it (the page is lang="de") instead of shrinking below the 11px label size. */
@media (max-width: 359.98px) {
html body.tax-product_cat ul.products li.product .bcp-card-actionpair a.button {
padding-inline: 2px;
hyphens: auto;
overflow-wrap: anywhere;
line-height: 1.1;
}
}
html body.tax-product_cat ul.products li.product .bcp-card-actionpair a.button svg {
display: none;
}
}
/* Axis tag beside Best Seller over the photo, top-left 8px, in a row (Figma
draws them side by side; white pill, node 29323:47310). */
html body.tax-product_cat ul.products li.product .bcp-card-badges {
flex-direction: row;
flex-wrap: wrap;
max-width: calc(100% - 16px);
}
html body.tax-product_cat ul.products li.product .bcp-card-badge--tag {
background: var(--wp--preset--color--bhp-white, #FFFFFF);
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
line-height: 16px;
letter-spacing: 0;
padding: 2px 8px;
}
/* z8udzket44: keep the over-photo badges clear of the wishlist heart (26px,
8px in) at every width. */
html body.tax-product_cat ul.products li.product .bcp-card-badges {
max-width: calc(100% - 46px);
}
html body.tax-product_cat ul.products li.product .bcp-card-axis {
display: none;
}
/* Below 600px the axis tag leaves the photo: at the 12px floor the long ones
(up to 234px in ES) cannot sit beside the heart in a 2-column card. It gets
its own row above the photo, and the cards become subgrids of the 2-column
list so that row (and every row below) is as tall as the taller card in it. */
@media (max-width: 599.98px) {
html body.tax-product_cat ul.products li.product .bcp-card-badges .bcp-card-badge--tag {
display: none;
}
html body.tax-product_cat ul.products li.product .bcp-card-axis {
display: block;
order: -2;
margin: 8px var(--bcp-card-inset, 8px) 0;
}
html body.tax-product_cat ul.products li.product .bcp-card-axis .bcp-card-badge--tag {
display: block;
width: fit-content;
max-width: 100%;
box-sizing: border-box;
padding: 2px 6px;
border-radius: 10px;
background: rgba(255, 193, 37, 0.1); /* the chip fill: a white pill has no edge on the white card */
line-height: 14px;
overflow-wrap: break-word; /* only a word wider than the card breaks */
}
}
@supports (grid-template-rows: subgrid) {
@media (max-width: 599.98px) {
html body.tax-product_cat ul.products li.product {
display: grid;
grid-template-columns: minmax(0, 1fr); /* an auto column grows to the longest tag and overflows the card */
grid-template-rows: subgrid;
grid-row: span 9;
row-gap: 0;
align-content: start;
}
html body.tax-product_cat ul.products li.product > .bcp-card-axis {
grid-row: 1;
min-width: 0; /* a grid item otherwise grows to its longest word and the card clips it */
}
html body.tax-product_cat ul.products li.product > figure { grid-row: 2; }
/* Placed in the photo's row, the absolute badge stack takes that grid area
as its containing block, so Best Seller sits 8px into the photo instead
of over the axis row at the card's top edge. */
html body.tax-product_cat ul.products li.product > .bcp-card-badges {
grid-row: 2;
grid-column: 1;
}
html body.tax-product_cat ul.products li.product > .woocommerce-loop-product__title { grid-row: 3; }
html body.tax-product_cat ul.products li.product > .bcp-card-rating { grid-row: 4; }
html body.tax-product_cat ul.products li.product > .bcp-card-desc { grid-row: 5; }
html body.tax-product_cat ul.products li.product > .bcp-card-chips { grid-row: 6; }
html body.tax-product_cat ul.products li.product > .bcp-card-pricerow { grid-row: 7; }
html body.tax-product_cat ul.products li.product > .bcp-card-save { grid-row: 8; }
/* Row 9 is as tall as the tallest actions in the row (a sold-out card stacks
Notify me over View product), so a single button sits at its bottom. */
html body.tax-product_cat ul.products li.product > .ct-woo-card-actions {
grid-row: 9;
align-self: end;
}
}
}
/* "New Recipe Coming Soon" (node 34902:94476): cream pill 15px above the
photo's bottom edge. The wrapper is a card-wide square, i.e. the photo, so
the pill follows the photo at every width. */
html body.tax-product_cat ul.products li.product .bcp-card-soon {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 1 / 1;
box-sizing: border-box;
padding: 0 8px 15px;
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
z-index: 2;
}
html body.tax-product_cat ul.products li.product .bcp-card-soon span {
padding: 4px 12px;
border-radius: 999px;
background: var(--wp--preset--color--bhp-cream, #F8EDE3);
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
font-weight: 900;
font-size: 12px; /* Figma 8px, 12px floor */
line-height: 14px;
text-align: center;
text-transform: uppercase;
color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 12.30:1 on cream */
}
html body.tax-product_cat ul.products li.product.bcp-card-soon-state .out-of-stock-badge,
body.tax-product_cat li.product:has(.bcp-card-soon) .out-of-stock-badge {
display: none; /* the Coming Soon / Sold out label carries the state: one label only (C8) */
}
/* NOTIFY ME is Figma's outlined button (stroke #247B4E, no fill); hover and
focus keep the shared filled hover. */
html body.tax-product_cat ul.products li.product .ct-woo-card-actions a.button.bcp-notify-link {
background: transparent;
color: var(--wp--preset--color--bhp-green, #247B4E); /* 5.3:1 on white */
border: 1px solid var(--wp--preset--color--bhp-green, #247B4E);
box-sizing: border-box;
}
@media (max-width: 599.98px) {
html body.tax-product_cat ul.products li.product {
--bcp-card-inset: 8px;
padding-bottom: 8px;
}
html body.tax-product_cat ul.products li.product .bcp-card-desc {
font-size: 12px;
}
html body.tax-product_cat ul.products li.product .bcp-card-chip {
line-height: 13px;
}
}
@media (min-width: 600px) and (max-width: 1023.98px) {
html body.tax-product_cat ul.products li.product .bcp-card-chip {
line-height: 13px;
}
}
/* Card price is 14/20 at 1512 and 744, 12px at 428 (nodes 29323:47306). The
View More button is 40px tall (node 34233:176228); its 10px Figma label
stays at the 12px floor. */
@media (min-width: 744px) {
html body.tax-product_cat ul.products li.product .price {
font-size: 14px;
line-height: 20px;
}
}
html body.tax-product_cat ul.products li.product .ct-woo-card-actions a.button {
height: 40px;
min-height: 40px;
padding-block: 0;
line-height: 1.2;
display: flex;
align-items: center;
justify-content: center;
}
/* 86eypb6m9 L1 map vs Figma category page (1512 / 744 / 428 frames):
- results count is 14/16 at 1512 and 744, 12/16 at 428 (node 34250:90704, current extract)
- 'Find yours' eyebrow is Nominee 900, 14/16 (12/16 at 428), not Kobe1.1 (node 34247:214456)
- quiz lead is 18px at 1512 and 16px at 744 and 428 (node 34247:214467)
- filter pill label is 12/16 at 428 (node 34250:89747)
- card price line-height is 20px at every width (node 29323:47306) */
@media (min-width: 744px) {
html body.tax-product_cat .woocommerce-result-count {
font-size: 14px;
}
}
.bcp-quiz__eyebrow {
font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif);
}
@media (max-width: 1023px) {
.bcp-quiz__lead {
font-size: 16px;
}
}
@media (max-width: 599.98px) {
.bcp-quiz__eyebrow {
font-size: 12px;
}
.bcp-pill__label {
font-size: 12px;
}
html body.tax-product_cat ul.products li.product .price {
line-height: 20px;
}
}
@media (max-width: 599.98px) {
.bcp-pill__label {
line-height: 16px; /* Figma 12/16 at 428 */
}
}
/* blaze-blocksy borders .woo-listing-top top and bottom; with the count and
sort moved out it is empty here, so the two borders read as a double rule.
Figma 21316:76927 has no divider. Bonza-only, and only while empty. */
html body.tax-product_cat .woo-listing-top:not(:has(*)) {
display: none;
}
/* An out-of-stock card has no "From" price block, so without this its
button rides higher than the rest of the row. The auto margin replaces
product-card.css's 12px top margin, so the 12px Figma gap above View
More (price block bottom to button top, node 29323:47306) moves to
padding and survives on every card. */
html body.tax-product_cat ul.products li.product .ct-woo-card-actions {
margin-top: 0;
padding-top: 12px;
}
/* Bonza QA sweep lane C, M12: "View Product" on one line. */
html body.tax-product_cat ul.products li.product .ct-woo-card-actions { container-type: inline-size; }
html body.tax-product_cat ul.products li.product .ct-woo-card-actions a.button.bc-see-more-link {
white-space: nowrap;
padding-inline: 8px;
gap: 4px;
}
@container (max-width: 170px) {
html body.tax-product_cat ul.products li.product .ct-woo-card-actions a.button.bc-see-more-link .bc-see-more-arrow { display: none; }
}
/* Below 340px the two-up card is narrower than the 12px label itself (the
12px floor is WCAG, so the label cannot shrink); let it wrap there. */
@media (max-width: 339.98px) {
html body.tax-product_cat ul.products li.product .ct-woo-card-actions a.button.bc-see-more-link {
white-space: normal;
padding-inline: 4px;
}
}
/* M14: closing band button on one line from 340px up. */
.bcp-cta-band__button {
white-space: nowrap;
max-width: 100%;
}
/* 8px side padding up to 417.98px: at 390-417 the 32px padding plus the icon made
the button 378px wide in a 350px box, so it ran past the right edge. */
@media (max-width: 417.98px) {
.bcp-cta-band__button { padding-inline: 8px; }
}
@media (max-width: 374.98px) {
.bcp-cta-band__button .bcp-cta-band__button-icon { display: none; }
}
@media (max-width: 339.98px) {
.bcp-cta-band__button {
white-space: normal;
height: auto;
min-height: 48px;
padding-block: 8px;
text-align: center;
text-wrap: balance;
}
}
/* G43: routine card names stay on one line from 744 up ("THE FOUNDATION
ROUTINE" broke with one word alone at 744-1920). 12px + -0.4px tracking fits
the narrowest card; Lan-approved Figma deviation. Below 744 the wrap is accepted. */
@media (min-width: 744px) {
html body .bppm-routine-card .bppm-routine-card__title {
font-size: 12px;
letter-spacing: -0.4px;
margin-inline-end: -8px; /* half the 16px card padding: keeps 8px to the card edge */
text-wrap: balance;
}
}
/* G43: German names are the longest ("Die Beruhigungs-Routine" is 199px at
-0.4px tracking against 192px of room from 1024 on the category carousel),
so German takes slightly tighter tracking and 4px to the card edge. */
@media (min-width: 1024px) {
html:lang(de) body .bppm-routine-card .bppm-routine-card__title {
letter-spacing: -0.6px;
margin-inline-end: -12px;
}
}