/*
Theme Name: Brand Base
Description: Shared block theme for the M&S brand sites. Each brand is a style variation (styles/*.json) selected by the "style" setting of the Brand Core plugin. Products are WooCommerce external products that link to Tienda Vitálica.
Version: 0.1.33
Requires at least: 6.4
Requires PHP: 8.0
Author: M&S Vitamins
Text Domain: brand-base
License: GPL-2.0-or-later
*/
/* Layout polish that theme.json cannot express. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.bb-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.bb-header .wp-block-site-logo img { max-height: 48px; width: auto; }
.bb-footer { border-top: 1px solid var(--wp--preset--color--line); }
.bb-footer a { color: inherit; }
.bb-footer .wp-block-navigation__container { gap: .4rem; }
.bb-header .wp-block-site-logo { flex-shrink: 0; }
.bb-hero { border-radius: 16px; }
.bb-card { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; }
.bb-store-card { border: 2px solid var(--wp--preset--color--primary); border-radius: 16px; }
.bb-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 600; color: var(--wp--preset--color--primary); }
/* WooCommerce (classic templates rendered inside the block theme). */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { text-align: left; }
.woocommerce ul.products li.product a img { border-radius: 12px; background: var(--wp--preset--color--surface); width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: .5rem; box-sizing: border-box; }
.woocommerce ul.products li.product .button { white-space: nowrap; padding: .6em 1.2em; font-size: .9rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--ink); }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--wp--preset--color--ink); font-weight: 600; }
.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base);
border-radius: 999px; padding: .75em 1.4em; font-weight: 600;
}
.woocommerce a.button:hover,
.woocommerce a.button.alt:hover { background: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--base); }
.woocommerce div.product div.images img { border-radius: 16px; }
.woocommerce .woocommerce-breadcrumb { font-size: .85rem; }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { display: none; }
@media (max-width: 600px) {
.woocommerce ul.products[class*=columns-] li.product { width: 48%; margin-right: 4%; }
.woocommerce ul.products[class*=columns-] li.product:nth-child(2n) { margin-right: 0; }
}
/* Dark brand sections (hero, tools). */
.bb-dark, .bb-dark :where(h1, h2, h3, h4, p, li) { color: #fff; }
.bb-dark .bb-eyebrow { color: var(--wp--preset--color--glow); }
.bb-dark a:not(.wp-element-button) { color: var(--wp--preset--color--glow); }
.bb-dark .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.6); }
.bb-hero-cover { min-height: 520px; }
.bb-hero-cover .wp-block-cover__inner-container { text-align: left; }
.bb-hero-cover .wp-block-cover__inner-container > * { margin-left: 0 !important; }
.bb-hero-cover h1 { max-width: 16ch; margin-left: 0; }
.bb-hero-cover p:not(.bb-eyebrow) { max-width: 60ch; font-size: 1.15rem; }
.bb-badges .wp-block-column { display: flex; gap: .75rem; align-items: center; }
.bb-badges img { width: 44px; height: 44px; object-fit: contain; }
.bb-badges p { margin: 0; font-weight: 600; color: var(--wp--preset--color--ink); }
.bb-featured .wp-block-image img { max-height: 380px; width: auto; margin: 0 auto; display: block; }
.bb-featured .wp-block-column { text-align: center; }
.bb-featured h3 { font-size: 1.15rem; }
.bb-featured h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.bb-featured h3 a:hover { color: var(--wp--preset--color--primary); }
.bb-tool { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 1.4rem; height: 100%; box-sizing: border-box; }
.bb-tool h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.bb-tool p { opacity: .85; font-size: .95rem; }
.bb-media-round img { border-radius: 16px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.bb-tool h3 a { text-decoration: none; }
/* Design pass 2 (2026-11-08). */
.bb-footer { border-top: 0; }
.bb-footer .wp-block-site-title, .bb-footer .wp-block-site-title a { color: #fff; }
.bb-footer p, .bb-footer a { color: rgba(255,255,255,.75) !important; text-decoration: none; }
.bb-footer a:hover { color: #fff !important; }
/* No backdrop-filter here: it makes the header the containing block of position:fixed children, which trapped the
mobile menu overlay inside the header (2026-11-08). */
.bb-header { position: sticky; top: 0; z-index: 50; background: #fff; }
.bb-header .wp-block-navigation a { text-decoration: none; }
/* Product cards. */
.woocommerce ul.products li.product {
background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 1rem 1rem 1.2rem;
box-sizing: border-box; transition: box-shadow .2s ease, transform .2s ease; display: flex; flex-direction: column;
}
.woocommerce ul.products li.product:hover { box-shadow: 0 12px 30px rgba(6, 11, 38, .10); transform: translateY(-2px); }
.woocommerce ul.products li.product a img { background: radial-gradient(circle at 50% 45%, var(--wp--preset--color--surface), #fff 70%); padding: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--wp--preset--font-family--poppins); font-weight: 600; min-height: 2.6em; }
.woocommerce ul.products li.product .bb-more {
margin-top: auto; align-self: flex-start; background: transparent; color: var(--wp--preset--color--primary);
border: 1.5px solid var(--wp--preset--color--primary);
}
.woocommerce ul.products li.product .bb-more:hover { background: var(--wp--preset--color--primary); color: #fff; }
/* Product page. */
.woocommerce div.product .product_title { font-size: var(--wp--preset--font-size--x-large); }
.woocommerce div.product div.images { background: radial-gradient(circle at 50% 45%, var(--wp--preset--color--surface), #fff 70%); border-radius: 20px; }
.woocommerce div.product .woocommerce-product-details__short-description { margin: 1rem 0 1.25rem; }
.woocommerce div.product .bb-buy a { font-size: 1.05rem; padding: .9em 1.8em; }
.woocommerce div.product .product_meta { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: none; }
.woocommerce div.product .woocommerce-tabs .panel { border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.5rem; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce .related > h2 { font-size: var(--wp--preset--font-size--large); }
/* Section headings on landing pages. */
.bb-section-title { text-align: center; }
.bb-section-title + p { text-align: center; max-width: 60ch; margin-left: auto !important; margin-right: auto !important; }
.woocommerce div.product div.images img { max-height: 560px; width: auto !important; margin: 0 auto; object-fit: contain; }
.bb-source { font-size: .85rem; color: var(--wp--preset--color--muted); }
/* Distributor page. */
.bb-card-box { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 1.5rem; height: 100%; box-sizing: border-box; }
.bb-stats .bb-card-box { text-align: center; }
.bb-stat { font-family: var(--wp--preset--font-family--poppins); font-weight: 700; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.1; margin: 0 0 .3rem; color: var(--wp--preset--color--primary); }
.bb-step { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--wp--preset--color--primary); color: #fff; font-weight: 700; margin: 0 0 .6rem; }
.bb-steps h3 { margin-top: 0; }
.bb-table table { border-collapse: collapse; width: 100%; }
.bb-table th, .bb-table td { border: 0; border-bottom: 1px solid var(--wp--preset--color--line); padding: .7rem .5rem; text-align: left; }
.bb-table thead th { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wp--preset--color--muted); border-bottom-width: 2px; }
.bb-note { text-align: center; color: var(--wp--preset--color--muted); }
/* Cards: category label, compact title (pass 3). */
.bb-card-cat { margin: .6rem 0 .2rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding-top: 0 !important; font-size: .98rem; min-height: 0; margin-bottom: .9rem; }
.woocommerce ul.products li.product a img { aspect-ratio: 4 / 5; object-fit: contain; }
.bb-swipe-hint { display: none; font-size: .8rem; color: var(--wp--preset--color--muted); margin-top: -.5rem; }
/* Mobile: product lists and featured bottles become swipeable carousels. */
@media (max-width: 781px) {
.bb-carousel ul.products, .woocommerce .related ul.products, .woocommerce .upsells ul.products {
display: flex !important; flex-wrap: nowrap; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory;
padding: .25rem 1rem 1rem; margin: 0 -1rem !important; scrollbar-width: none;
}
.bb-carousel ul.products::-webkit-scrollbar, .woocommerce .related ul.products::-webkit-scrollbar { display: none; }
.bb-carousel ul.products li.product, .woocommerce .related ul.products li.product, .woocommerce .upsells ul.products li.product {
flex: 0 0 62% !important; width: auto !important; margin: 0 !important; scroll-snap-align: start;
}
.bb-carousel ul.products::before, .bb-carousel ul.products::after { display: none; }
.bb-featured { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin: 0 -1rem; padding: 0 1rem 1rem; scrollbar-width: none; }
.bb-featured > .wp-block-column { flex: 0 0 70% !important; scroll-snap-align: center; }
.bb-featured .wp-block-image img { max-height: 260px; }
.bb-swipe-hint { display: block; }
.bb-badges .wp-block-column { flex-basis: 100% !important; }
.bb-media-round img { aspect-ratio: 16 / 10; }
.bb-hero-cover { min-height: 420px !important; }
}
/* Mobile menu overlay: full screen, brand night color, large links. */
.wp-block-navigation__responsive-container.is-menu-open {
background: var(--wp--preset--color--night) !important; color: #fff !important; padding: 1.25rem 1.5rem 2rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; align-items: flex-start; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem; align-items: flex-start; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--poppins); font-size: 1.6rem; font-weight: 600; color: #fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; top: 1.25rem; right: 1.25rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }
.wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; justify-content: flex-start !important; text-align: left; }
/* Carousel controls (assets/carousel.js): only on narrow screens, where the lists scroll sideways. */
.bb-carousel-nav { display: none; }
@media (max-width: 781px) {
.bb-carousel-nav { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; }
.bb-carousel-nav[hidden] { display: none; }
.bb-carousel-btn {
width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid var(--wp--preset--color--line); background: #fff;
color: var(--wp--preset--color--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.bb-carousel-btn:disabled { opacity: .35; cursor: default; }
.bb-carousel ul.products, .related ul.products, .bb-featured { cursor: grab; user-select: none; }
.is-dragging { cursor: grabbing !important; scroll-snap-type: none !important; scroll-behavior: auto !important; }
.is-dragging a { pointer-events: none; }
}
/* Header menu: hover and current page. */
.bb-header .wp-block-navigation .wp-block-navigation-item__content { position: relative; padding: .35rem 0; transition: color .2s ease; }
.bb-header .wp-block-navigation .wp-block-navigation-item__content::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
background: var(--wp--preset--color--primary); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.bb-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.bb-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.bb-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.bb-header .wp-block-navigation [aria-current="page"] { color: var(--wp--preset--color--primary); }
.bb-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.bb-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.bb-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.bb-header .wp-block-navigation [aria-current="page"]::after { transform: scaleX(1); }
/* Mobile overlay: glow on hover / current, no underline bar. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] { color: var(--wp--preset--color--glow) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { transition: color .2s ease, transform .2s ease; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { transform: translateX(6px); }
/* Product frame (user reference, 2026-11-08): thin cyan-to-grey gradient border, rounded, white inside, around the
main image only. The card itself has no box, so there is a single frame. */
.woocommerce ul.products li.product {
background: transparent; border: 0; padding: 0; box-shadow: none !important; transform: none !important;
}
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child img {
border: 1.5px solid transparent !important; border-radius: 14px !important;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(140deg, var(--wp--preset--color--glow) 0%, #d9e0e8 38%, #d9e0e8 62%, color-mix(in srgb, var(--wp--preset--color--glow) 70%, #d9e0e8) 100%) border-box !important;
padding: 6% !important; box-sizing: border-box; transition: box-shadow .25s ease, transform .25s ease;
}
.woocommerce ul.products li.product:hover a img { box-shadow: 0 10px 28px color-mix(in srgb, var(--wp--preset--color--glow) 22%, transparent); transform: translateY(-2px); }
.woocommerce div.product div.images { background: none; }
.woocommerce ul.products li.product .bb-more { margin-top: auto; }
/* Product frame v2: 2.5px border and halo in the product's own label color (--bb-accent), livelier hover. */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child img {
--bb-a: var(--bb-accent, var(--wp--preset--color--glow));
border-width: 2.5px !important;
background:
radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--bb-a) 16%, #fff) 0%, #fff 62%) padding-box,
linear-gradient(140deg, var(--bb-a) 0%, #dfe5ec 40%, #dfe5ec 60%, color-mix(in srgb, var(--bb-a) 55%, #dfe5ec) 100%) border-box !important;
transition: box-shadow .3s ease, transform .3s ease, background-size .3s ease;
}
.woocommerce ul.products li.product:hover a img {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 16px 36px color-mix(in srgb, var(--bb-accent, var(--wp--preset--color--glow)) 28%, transparent);
}
.woocommerce ul.products li.product:hover .bb-card-cat { color: var(--bb-accent, var(--wp--preset--color--primary)); }
@media (prefers-reduced-motion: reduce) { .woocommerce ul.products li.product:hover a img { transform: none; } }
/* Product page buttons: buy (primary) + distribute (secondary). */
.woocommerce div.product .bb-buy { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.25rem 0 1.5rem; }
.woocommerce div.product .bb-buy .bb-buy-secondary {
background: transparent !important; color: var(--wp--preset--color--primary) !important;
border: 1.5px solid var(--wp--preset--color--primary) !important; padding: .85em 1.6em !important;
}
.woocommerce div.product .bb-buy .bb-buy-secondary:hover { background: var(--wp--preset--color--primary) !important; color: #fff !important; }
.bb-buy-note { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--wp--preset--color--muted); }
@media (max-width: 480px) { .woocommerce div.product .bb-buy a { flex: 1 1 100%; text-align: center; } }
/* About page. */
.bb-icon img { width: 52px; height: 52px; object-fit: contain; }
.bb-icon { margin: 0 0 .75rem; }
.bb-pillars h3, .bb-families h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.bb-families h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.bb-families h3 a::after { content: " →"; color: var(--wp--preset--color--primary); }
.bb-families .bb-card-box { transition: border-color .2s ease, box-shadow .2s ease; }
.bb-families .bb-card-box:hover { border-color: var(--wp--preset--color--primary); box-shadow: 0 10px 26px rgba(6, 11, 38, .08); }
.bb-cta-pair .wp-block-column + .wp-block-column { border-left: 1px solid rgba(255,255,255,.15); padding-left: 2rem; }
@media (max-width: 781px) { .bb-cta-pair .wp-block-column + .wp-block-column { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.5rem; } }
/* Footer v2. */
.bb-footer .bb-footer-logo img { filter: brightness(0) invert(1); opacity: .95; }
.bb-footer-title { font-size: .8rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--glow) !important; margin: .4rem 0 1rem; }
.bb-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .95rem; }
.bb-footer-list a { color: rgba(255,255,255,.78) !important; text-decoration: none; transition: color .2s ease, padding .2s ease; }
.bb-footer-list a:hover { color: #fff !important; padding-left: 4px; }
.bb-footer-cta { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 1.25rem; }
.bb-footer-cta .wp-block-button__link { padding: .6em 1.2em; font-size: .95rem; }
.bb-footer .wp-block-site-tagline { color: rgba(255,255,255,.75); margin-top: 1rem; }
.bb-social { display: flex; gap: .6rem; margin-top: 1rem; }
.bb-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff !important; }
.bb-social a:hover { background: var(--wp--preset--color--primary); }
.bb-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--wp--preset--spacing--50); padding-top: 1.25rem; gap: .5rem 2rem; }
.bb-footer-bottom p { margin: 0; color: rgba(255,255,255,.6) !important; }
@media (max-width: 781px) { .bb-footer-cols { gap: 2rem; } }
.bb-has-distributor-cta .bb-footer-cta { display: none; }
/* Split hero (about page): text + generated brand art with a soft glow. */
.bb-hero-split h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.bb-hero-split p:not(.bb-eyebrow) { font-size: 1.15rem; max-width: 46ch; opacity: .9; }
.bb-hero-art img { border-radius: 24px; box-shadow: 0 0 0 1px rgba(41,182,232,.25), 0 30px 80px rgba(41,182,232,.18); aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 781px) { .bb-hero-art img { aspect-ratio: 16 / 10; } }
/* Readable text over busy photos: dark fade from the text side. */
.bb-fade-left .wp-block-cover__background { background: linear-gradient(90deg, rgba(6,11,38,.92) 0%, rgba(6,11,38,.7) 40%, rgba(6,11,38,.1) 75%) !important; opacity: 1 !important; }
@media (max-width: 781px) { .bb-fade-left .wp-block-cover__background { background: rgba(6,11,38,.72) !important; } }
/* Real product renders side by side on white (no generated bottles). */
.bb-trio { background: radial-gradient(circle at 50% 55%, var(--wp--preset--color--surface), #fff 70%); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 1.5rem 1rem; gap: 0 !important; }
.bb-trio .wp-block-image { margin: 0 -4%; flex: 1 1 0; }
.bb-trio .wp-block-image:nth-child(2) { z-index: 1; transform: translateY(-4%) scale(1.08); }
.bb-trio img { width: 100%; height: auto; max-height: 300px; object-fit: contain; }
/* Where to buy. */
.bb-store-logo img { max-height: 56px; width: auto; }
.bb-checks { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: .55rem; }
.bb-checks li { padding-left: 1.8rem; position: relative; }
.bb-checks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/80% no-repeat; }
.bb-how { background: var(--wp--preset--color--night); border: 0; color: #fff; }
.bb-how .bb-eyebrow { color: var(--wp--preset--color--glow); }
.bb-steps-list { counter-reset: s; list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: 1.1rem; }
.bb-steps-list li { counter-increment: s; position: relative; padding-left: 3rem; color: rgba(255,255,255,.85); }
.bb-steps-list li strong { color: #fff; }
.bb-steps-list li::before { content: counter(s); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; border-radius: 999px; display: grid; place-items: center; background: var(--wp--preset--color--primary); color: #fff; font-weight: 700; }
.bb-center { text-align: center; }
/* Light hero (registro D: the brand's light facet banners). */
.bb-hero-light, .bb-hero-light :where(h1, p) { color: var(--wp--preset--color--ink); }
.bb-hero-light .wp-block-cover__inner-container { text-align: left; }
.bb-hero-light .wp-block-cover__inner-container > * { margin-left: 0 !important; }
.bb-hero-light p:not(.bb-eyebrow) { color: var(--wp--preset--color--text); font-size: 1.1rem; }
/* FAQ. */
.bb-faq-nav { list-style: none; padding: 0; margin: 0; position: sticky; top: 100px; display: grid; gap: .35rem; }
.bb-faq-nav a { display: block; padding: .55rem .9rem; border-radius: 10px; color: var(--wp--preset--color--ink); text-decoration: none; font-weight: 500; }
.bb-faq-nav a:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--primary); }
.bb-faq-layout h2 { font-size: 1.35rem; margin: 2.2rem 0 .8rem; scroll-margin-top: 100px; }
.bb-faq-layout h2:first-child { margin-top: 0; }
.bb-faq { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 14px; padding: 0 !important; margin: 0 0 .6rem; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.bb-faq[open] { border-color: var(--wp--preset--color--primary) !important; box-shadow: 0 8px 24px rgba(6, 11, 38, .06); }
.bb-faq summary { list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.2rem; font-weight: 600; color: var(--wp--preset--color--ink); position: relative; }
.bb-faq summary::-webkit-details-marker { display: none; }
.bb-faq summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); width: 1.7rem; height: 1.7rem; border-radius: 999px; display: grid; place-items: center; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--primary); font-weight: 700; transition: transform .2s ease; }
.bb-faq[open] summary::after { content: "–"; background: var(--wp--preset--color--primary); color: #fff; }
.bb-faq > p { padding: 0 1.2rem 1.1rem; margin: 0; color: var(--wp--preset--color--text); }
@media (max-width: 781px) { .bb-faq-nav { position: static; display: flex; flex-wrap: wrap; gap: .4rem; } .bb-faq-nav a { border: 1px solid var(--wp--preset--color--line); padding: .4rem .8rem; } }
.bb-footer .wp-block-button__link, .bb-footer .wp-block-button__link:hover { color: #fff !important; }
/* SVG logos have no intrinsic size for WordPress: give them one (otherwise width:auto renders 0 px). */
.wp-block-site-logo img[src$=".svg"] { width: 160px !important; height: auto !important; max-height: none !important; aspect-ratio: 564 / 144; }
.bb-footer .wp-block-site-logo img[src$=".svg"] { width: 140px !important; }
/* Light heroes over busy photos (Real Setas): cream fade from the text side; dark text. */
.bb-fade-left-light .wp-block-cover__background { background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--base) 75%, transparent) 38%, transparent 70%) !important; opacity: 1 !important; }
@media (max-width: 781px) { .bb-fade-left-light .wp-block-cover__background { background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent) !important; } }
.bb-hero-light.bb-hero-cover h1 { color: var(--wp--preset--color--ink); }
/* Light split hero (Real Setas home): text on the surface color, the brand banner cropped on its subject. */
.bb-hero-split-light h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.bb-hero-split-light p:not(.bb-eyebrow) { font-size: 1.15rem; max-width: 44ch; }
.bb-hero-banner img { border-radius: 20px; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; width: 100%; box-shadow: 0 24px 60px rgba(53, 46, 40, .14); }
/* Headline device: an italic word inside a heading (Real Setas ads: "Suma equilibrio"). */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; }
/* Product "worlds" (one band per product, in the color of its own label and ad). */
.bb-world { position: relative; overflow: hidden; }
.bb-world .wp-block-columns { position: relative; z-index: 1; }
.bb-world-illus { position: absolute !important; right: -4%; top: 50%; transform: translateY(-50%) rotate(-8deg); width: min(46vw, 560px); opacity: .22; margin: 0 !important; pointer-events: none; z-index: 0; }
.bb-world-illus img { width: 100%; height: auto; }
.bb-world--left .bb-world-illus { right: auto; left: -4%; transform: translateY(-50%) rotate(8deg); }
.bb-world-jar img { max-height: 440px; width: auto; margin: 0 auto; display: block; filter: drop-shadow(0 30px 40px rgba(0,0,0,.25)); }
.bb-world--sand { background: #e9dfce; }
.bb-world--amber { background: #e7a862; }
.bb-world--terracotta { background: #a5502f; }
.bb-world--terracotta, .bb-world--terracotta :where(h2, h3, p, li) { color: #fff; }
.bb-world--terracotta .bb-eyebrow { color: #f6d7b6; }
.bb-world--amber .bb-eyebrow, .bb-world--sand .bb-eyebrow { color: var(--wp--preset--color--primary-dark); }
/* Label chips (taken from the product label: No GMO, gluten free, grams of mushroom, servings). */
.bb-chips { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.bb-chips li { padding: .4rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600; letter-spacing: .02em;
background: rgba(255,255,255,.55); border: 1px solid rgba(53,46,40,.18); color: var(--wp--preset--color--ink); }
.bb-world--terracotta .bb-chips li { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }
.bb-world--terracotta .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.7); }
.woocommerce div.product .bb-chips li { background: color-mix(in srgb, var(--bb-accent, var(--wp--preset--color--primary)) 12%, #fff); border-color: color-mix(in srgb, var(--bb-accent, var(--wp--preset--color--primary)) 35%, #fff); }
/* Product page: a soft band in the color of the product's own label behind the gallery and summary. */
body.single-product main { background: linear-gradient(180deg, color-mix(in srgb, var(--bb-accent, var(--wp--preset--color--surface)) 13%, var(--wp--preset--color--base)) 0, var(--wp--preset--color--base) 640px); }
@media (max-width: 781px) { .bb-world-illus { width: 80vw; opacity: .14; } .bb-world-jar img { max-height: 300px; } }
/* Product worlds v2: generated backdrop (cover) + text left + real jar(s) right. */
.bb-world.wp-block-cover { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.bb-world .wp-block-cover__inner-container { text-align: left; }
.bb-world--sand, .bb-world--amber { color: var(--wp--preset--color--ink); }
.bb-world--sand :where(h2, p), .bb-world--amber :where(h2, p) { color: var(--wp--preset--color--ink); }
.bb-world-pair { gap: 0 !important; align-items: flex-end; }
.bb-world-pair .bb-world-jar { margin: 0 !important; }
.bb-world-jar--small img { max-height: 300px !important; margin-left: -2rem !important; }
@media (max-width: 781px) { .bb-world .wp-block-cover__image-background { object-position: 85% 50%; } .bb-world-jar--small img { max-height: 200px !important; } }
/* Scenes with the product inside (Kie, real jar as reference): text on the empty side; sides alternate. */
.bb-hero-scene h1 { max-width: 13ch; }
.bb-hero-scene p:not(.bb-eyebrow) { max-width: 38ch; font-size: 1.12rem; }
.bb-world--product-left .wp-block-columns { flex-direction: row; }
/* Full-width bands touch each other: no white gap between banners (page-wide template). */
.wp-block-post-content > .alignfull, .wp-block-post-content > .alignfull + * { margin-block-start: 0 !important; }
.wp-block-post-content > .alignfull { margin-block-end: 0 !important; }
/* Buttons per product world: contrast with the band color. */
.bb-world--amber .wp-element-button:not(.is-style-outline *) { background: #352e28 !important; color: #fff !important; }
.bb-world--amber .is-style-outline .wp-element-button { border-color: #352e28 !important; color: #352e28 !important; background: transparent !important; }
.bb-world--amber .wp-element-button:hover { background: #1f1a17 !important; color: #fff !important; }
.bb-world--terracotta .wp-element-button:not(.is-style-outline *) { background: #fffcf7 !important; color: #5f2a16 !important; }
.bb-world--terracotta .is-style-outline .wp-element-button { border-color: rgba(255,255,255,.8) !important; color: #fff !important; background: transparent !important; }
.bb-world--sand .wp-element-button:not(.is-style-outline *) { background: #352e28 !important; color: #fff !important; }
.bb-world--sand .is-style-outline .wp-element-button { border-color: #352e28 !important; color: #352e28 !important; }
.bb-world--amber .bb-chips li, .bb-world--sand .bb-chips li { background: rgba(255,250,240,.7); border-color: rgba(53,46,40,.25); }
/* The hover-zoom layer never gets the frame (it is also disabled in functions.php). */
.woocommerce div.product div.images img.zoomImg { display: none !important; }
/* ===== Mobile layout for photo sections (2026-11-08): photo on top, framed on its subject; text below on the band
color. No text over the photo on narrow screens. Applies to every hero cover and product world. ===== */
@media (max-width: 781px) {
.wp-block-cover.bb-hero-cover, .wp-block-cover.bb-world {
display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important;
min-height: 0 !important; padding: 0 !important; overflow: hidden;
}
.wp-block-cover.bb-hero-cover > .wp-block-cover__image-background,
.wp-block-cover.bb-world > .wp-block-cover__image-background {
position: relative !important; inset: auto !important; order: 0; display: block; width: 100% !important;
height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%;
}
.wp-block-cover.bb-hero-cover > .wp-block-cover__background,
.wp-block-cover.bb-world > .wp-block-cover__background { display: none !important; }
.wp-block-cover.bb-hero-cover > .wp-block-cover__inner-container,
.wp-block-cover.bb-world > .wp-block-cover__inner-container {
order: 1; position: relative; width: 100% !important; max-width: none; box-sizing: border-box; padding: 1.75rem 1.25rem 2.25rem !important;
background: none !important; border-radius: 0 !important;
}
/* where the subject sits in each photo */
.bb-world--product-right > .wp-block-cover__image-background, .bb-hero-scene > .wp-block-cover__image-background,
.bb-fade-left > .wp-block-cover__image-background, .bb-fade-left-light > .wp-block-cover__image-background { object-position: 78% 60% !important; }
.bb-world--product-left > .wp-block-cover__image-background { object-position: 22% 60% !important; }
/* band colors under the photo */
.wp-block-cover.bb-hero-light { background: var(--wp--preset--color--surface); }
.wp-block-cover.bb-dark { background: var(--wp--preset--color--night); }
.wp-block-cover.bb-world--sand { background: #efe6d6; }
.wp-block-cover.bb-world--amber { background: #f0c48f; }
.wp-block-cover.bb-world--terracotta { background: #8e4326; }
.bb-world .wp-block-column:empty { display: none !important; }
.bb-world .wp-block-columns, .bb-hero-cover .wp-block-columns { gap: 0; }
/* type and controls */
.bb-hero-cover h1, .bb-hero-scene h1 { font-size: 2rem !important; max-width: none !important; }
.bb-world h2 { font-size: 1.6rem; }
.bb-hero-cover p:not(.bb-eyebrow), .bb-world p:not(.bb-eyebrow) { font-size: 1rem; }
.bb-world .wp-block-buttons, .bb-hero-cover .wp-block-buttons { flex-direction: column; align-items: stretch; gap: .6rem; }
.bb-world .wp-block-button, .bb-hero-cover .wp-block-button { width: 100%; }
.bb-world .wp-block-button__link, .bb-hero-cover .wp-block-button__link { width: 100%; text-align: center; }
.bb-chips { gap: .4rem; }
.bb-chips li { font-size: .78rem; padding: .35rem .7rem; }
/* split heroes and card grids */
.bb-hero-split-light .wp-block-columns, .bb-hero-split .wp-block-columns { flex-direction: column-reverse; }
.bb-stats .wp-block-column, .bb-steps .wp-block-column, .bb-pillars .wp-block-column, .bb-families .wp-block-column { flex-basis: 100% !important; }
.bb-stat { font-size: 2rem; }
.bb-trio { padding: 1rem .5rem; }
.bb-cta-pair .wp-block-column { text-align: left; }
}
/* Page heads (contact) and the product archive head: a band with the brand, not a bare title. */
.bb-page-head h1 { margin: .2rem 0 .6rem; }
.woocommerce-products-header { background: var(--wp--preset--color--surface); border-radius: 18px; padding: clamp(1.5rem, 4vw, 2.5rem); margin: .5rem 0 2rem; }
.woocommerce-products-header__title { margin: 0 !important; }
.woocommerce-products-header .term-description { margin-top: .6rem; max-width: 60ch; }
/* CLS on the product page (2026-11-08, Lighthouse mobile 0.25 on xtralife): before FlexSlider starts, WooCommerce
renders every gallery image stacked, pushing the title and the buy button below the fold; then it collapses them.
Until the slider wraps the images in .flex-viewport, show only the first one. */
.woocommerce div.product div.images.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:nth-child(n+2) { display: none !important; }
/* WooCommerce's own CSS showed images 2+ as inline-block thumbs of another size (that beat the rule above), so the
gallery went 436 → 429 and 406 → 425 px at start. Instead, reserve the final row of thumbnails (25% of the width per
row of four) while the slider has not started. */
.woocommerce div.product div.images.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper:has(> :nth-child(2)) { padding-bottom: 25%; }
.woocommerce div.product div.images.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper:has(> :nth-child(5)) { padding-bottom: 50%; }
/* …and while FlexSlider builds its viewport, the slides stack for a moment inside it: keep the viewport square (the
product photos are square) so the summary below never jumps. */
.woocommerce-product-gallery .flex-viewport { aspect-ratio: 1 / 1; overflow: hidden; }
/* …and the main photo itself: with the 6% padding and border-box of the frame, Chrome reserves 0 px of content until the
file arrives (the gallery measured 45 px, then 343 px: CLS 0.24 on a slow phone, 2026-11-08). Square, like the photos. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; width: min(100%, 560px) !important; height: auto; object-fit: contain; }
/* …and the thumbnails under the slider: without a ratio they are 0 px until each file arrives, so the gallery went
436 → 343 → 429 px and the summary jumped twice (Magpro and Smart Gummies, 0.085–0.136 on mobile, 2026-11-08). */
.woocommerce div.product div.images .flex-control-thumbs li img { aspect-ratio: 1 / 1; width: 100% !important; height: auto; object-fit: contain; }
/* ===== Layout variant "organic" (Real Setas): centered header, gold hairlines, square buttons, light footer. ===== */
.bb-layout-organic .bb-header { border-bottom: 0; box-shadow: inset 0 -1px 0 #e6d7bf; background: var(--wp--preset--color--base); }
@media (min-width: 782px) {
.bb-layout-organic .bb-header > .wp-block-group { flex-direction: column; justify-content: center; gap: .35rem; padding-top: .4rem; }
.bb-layout-organic .bb-header .wp-block-site-logo img { max-height: 60px; }
.bb-layout-organic .bb-header .wp-block-navigation { justify-content: center; border-top: 1px solid #e6d7bf; padding-top: .5rem; width: 100%; }
.bb-layout-organic .bb-header .wp-block-navigation__container { gap: 2.2rem; }
}
.bb-layout-organic .bb-header .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--fraunces); font-size: 1.02rem; letter-spacing: .01em; }
.bb-layout-organic .bb-header .wp-block-navigation .wp-block-navigation-item__content::after { height: 1px; background: #ae7f35; }
.bb-layout-organic .wp-element-button, .bb-layout-organic .woocommerce a.button, .bb-layout-organic .bb-more { border-radius: 4px !important; }
.bb-layout-organic .bb-card-box { border-radius: 4px; border-color: #e6d7bf; box-shadow: none; border-top: 3px solid #ae7f35; }
.bb-layout-organic .bb-eyebrow { font-family: var(--wp--preset--font-family--fraunces); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 500; }
.bb-layout-organic .bb-media-round img, .bb-layout-organic .bb-hero-art img, .bb-layout-organic .bb-hero-banner img { border-radius: 4px; }
.bb-layout-organic .bb-chips li { border-radius: 4px; }
/* light footer with a centered brand line */
.bb-layout-organic .bb-footer { background: #efe6d6 !important; }
.bb-layout-organic .bb-footer, .bb-layout-organic .bb-footer :where(p, a, li) { color: var(--wp--preset--color--text) !important; }
.bb-layout-organic .bb-footer a:hover { color: var(--wp--preset--color--primary) !important; }
.bb-layout-organic .bb-footer .bb-footer-logo img { filter: none; }
.bb-layout-organic .bb-footer-title { color: var(--wp--preset--color--primary-dark) !important; font-family: var(--wp--preset--font-family--fraunces); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1rem !important; }
.bb-layout-organic .bb-footer-cta { background: #fffaf1; border-color: #e6d7bf; border-radius: 4px; }
.bb-layout-organic .bb-footer-bottom { border-top-color: #d9c8aa; }
.bb-layout-organic .bb-footer-bottom p { color: var(--wp--preset--color--muted) !important; }
/* product cards: plain image on cream, name in serif */
.bb-layout-organic .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; font-size: 1.05rem; }
.bb-layout-organic .bb-card-cat { font-family: var(--wp--preset--font-family--fraunces); font-style: italic; text-transform: none; letter-spacing: 0; font-size: .9rem; }
/* Organic footer shape: centered and stacked (logo, line, inline link rows, a CTA strip), not four columns. */
.bb-layout-organic .bb-footer-cols { flex-direction: column !important; align-items: center !important; text-align: center; gap: 1.6rem !important; }
.bb-layout-organic .bb-footer-cols > .wp-block-column { flex-basis: auto !important; width: 100%; max-width: 760px; }
.bb-layout-organic .bb-footer-cols .wp-block-site-logo { display: flex; justify-content: center; }
.bb-layout-organic .bb-footer-cols .bb-social { justify-content: center; }
.bb-layout-organic .bb-footer-title { margin: 0 0 .6rem; }
.bb-layout-organic .bb-footer-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; }
.bb-layout-organic .bb-footer-list li + li::before { content: none; }
.bb-layout-organic .bb-footer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.4rem; text-align: left; padding: 1rem 1.4rem; }
.bb-layout-organic .bb-footer-cta > * { margin: 0 !important; }
.bb-layout-organic .bb-footer-bottom { justify-content: center !important; text-align: center; flex-direction: column; }
/* Ledger: conditions or store links as labeled rows with hairlines (organic pages). */
.bb-ledger table { border-collapse: collapse; width: 100%; }
.bb-ledger th, .bb-ledger td { border: 0; border-bottom: 1px solid #d9c8aa; padding: .9rem .4rem; text-align: left; vertical-align: top; }
.bb-ledger th { width: 34%; font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; color: var(--wp--preset--color--ink); }
.bb-ledger--links td a { font-weight: 600; text-decoration: none; }
.bb-note-left { color: var(--wp--preset--color--muted); }
/* Timeline: numbered steps on a vertical gold line. */
.bb-timeline { list-style: none; counter-reset: t; padding: 0 0 0 1.4rem; margin: 1rem 0 0; border-left: 2px solid #d9c8aa; display: grid; gap: 1.3rem; }
.bb-timeline li { counter-increment: t; position: relative; padding-left: 1.4rem; }
.bb-timeline li::before { content: counter(t); position: absolute; left: -2.55rem; top: -.1rem; width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center;
background: var(--wp--preset--color--base); border: 2px solid #ae7f35; color: var(--wp--preset--color--primary-dark); font-family: var(--wp--preset--font-family--fraunces); font-weight: 700; }
.bb-layout-organic .bb-footer .wp-block-button__link, .bb-layout-organic .bb-footer .wp-block-button__link:hover { color: #fff !important; }
/* ===== Layout "apothecary" (Xtralife, 2026-11-08): everything comes from the brand's bottle label. Black header like
the bottle, copper double band like the label stripes, small caps with wide tracking like "SUPLEMENTO DIETARIO",
square buttons, cards framed by two copper bands, a centred footer seal. Different from modern (Magpro) and organic
(Real Setas) on every axis of the brand-site skill. Copper/black come from the palette (glow, night). ===== */
.bb-layout-apothecary .bb-header { background: var(--wp--preset--color--night); border-bottom: 0;
box-shadow: 0 3px 0 var(--wp--preset--color--glow), 0 5px 0 var(--wp--preset--color--night), 0 6px 0 var(--wp--preset--color--glow); }
.bb-layout-apothecary .bb-header .wp-block-navigation-item__content { color: #f3ead9; text-transform: uppercase; letter-spacing: .16em;
font-size: .78rem; font-weight: 600; }
.bb-layout-apothecary .bb-header .wp-block-navigation-item__content:hover,
.bb-layout-apothecary .bb-header .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--glow); }
.bb-layout-apothecary .bb-header .wp-block-navigation .wp-block-navigation-item__content::after { background: var(--wp--preset--color--glow); height: 2px; }
.bb-layout-apothecary .bb-header .wp-block-navigation__responsive-container-open { color: #f3ead9; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--night) !important; color: #f3ead9 !important; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #f3ead9 !important; }
.bb-layout-apothecary .wp-element-button, .bb-layout-apothecary .woocommerce a.button, .bb-layout-apothecary .bb-more,
.bb-layout-apothecary .woocommerce ul.products li.product .bb-more { border-radius: 0 !important; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.bb-layout-apothecary .is-style-outline .wp-block-button__link { border-color: var(--wp--preset--color--glow) !important; }
.bb-layout-apothecary .bb-card-box { border: 1px solid var(--wp--preset--color--line); border-radius: 0; box-shadow: none;
background-image: linear-gradient(var(--wp--preset--color--glow), var(--wp--preset--color--glow)), linear-gradient(var(--wp--preset--color--glow), var(--wp--preset--color--glow));
background-size: 100% 4px, 100% 2px; background-position: top, bottom; background-repeat: no-repeat; }
.bb-layout-apothecary .bb-eyebrow { color: var(--wp--preset--color--glow); letter-spacing: .2em; }
.bb-layout-apothecary .bb-eyebrow::before { content: ""; display: inline-block; width: 26px; height: 2px; background: currentColor; vertical-align: middle; margin: 0 .6rem .2rem 0; }
.bb-layout-apothecary .bb-media-round img, .bb-layout-apothecary .bb-hero-art img, .bb-layout-apothecary .bb-family-img img { border-radius: 0; }
.bb-layout-apothecary .woocommerce ul.products li.product .bb-card-cat { letter-spacing: .16em; }
.bb-layout-apothecary .bb-badges p { border-radius: 0 !important; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem !important; }
/* Footer: a centred seal (logo between copper rules), then the link columns, then a tracked bottom line. */
.bb-layout-apothecary .bb-footer .bb-footer-logo img { filter: none; opacity: 1; }
.bb-layout-apothecary .bb-footer-cols { flex-wrap: wrap !important; }
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child { flex-basis: 100% !important; display: flex; flex-direction: column; align-items: center;
text-align: center; padding-bottom: 1.6rem; margin-bottom: .6rem; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--glow) 45%, transparent); }
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child .wp-block-site-logo { display: flex; align-items: center; gap: 1.2rem; }
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child .wp-block-site-logo::before,
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child .wp-block-site-logo::after { content: ""; width: 72px; height: 2px; background: var(--wp--preset--color--glow); }
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:not(:first-child) { flex: 1 1 200px !important; }
.bb-layout-apothecary .bb-footer-title { color: var(--wp--preset--color--glow) !important; text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; }
.bb-layout-apothecary .bb-footer-cta { border-radius: 0; border: 1px solid var(--wp--preset--color--glow); background: transparent; }
.bb-layout-apothecary .bb-footer-bottom p { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; }
/* Facts table (any brand): a block styled like a supplement facts panel, for conditions and documents. */
.bb-facts table { border: 3px solid var(--wp--preset--color--ink); border-collapse: collapse; width: 100%; background: #fff; }
.bb-facts thead th { text-align: left; font-size: 1.35rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; padding: .7rem 1rem .4rem;
border-bottom: 10px solid var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }
.bb-facts td { border-top: 1px solid var(--wp--preset--color--ink); padding: .6rem 1rem; vertical-align: top; color: var(--wp--preset--color--ink); }
.bb-facts td:first-child { font-weight: 700; width: 38%; }
.bb-facts tr:last-child td { border-bottom: 5px solid var(--wp--preset--color--ink); }
.bb-facts figcaption { font-size: .82rem; color: var(--wp--preset--color--muted); margin-top: .5rem; text-align: left; }
@media (max-width: 600px) { .bb-facts td { display: block; width: auto !important; } .bb-facts td + td { border-top: 0; padding-top: 0; } }
/* Steps in a line (any brand): numbered stops joined by a rule. */
.bb-steps-line { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; counter-reset: step; position: relative; }
.bb-steps-line li { counter-increment: step; position: relative; padding-top: 3.4rem; }
.bb-steps-line li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
background: var(--wp--preset--color--night); color: #fff; font-weight: 700; border: 2px solid var(--wp--preset--color--glow); z-index: 1; }
.bb-steps-line li:not(:last-child)::after { content: ""; position: absolute; top: 1.2rem; left: 2.4rem; right: -1.2rem; height: 2px; background: var(--wp--preset--color--glow); }
.bb-steps-line strong { display: block; font-size: 1.1rem; margin-bottom: .3rem; color: var(--wp--preset--color--ink); }
@media (max-width: 781px) { .bb-steps-line { grid-template-columns: 1fr; } .bb-steps-line li { padding: 0 0 0 3.4rem; min-height: 2.6rem; }
.bb-steps-line li:not(:last-child)::after { top: 2.4rem; bottom: -1.2rem; left: 1.15rem; right: auto; width: 2px; height: auto; } }
.bb-facts td, .bb-facts th { border-left: 0 !important; border-right: 0 !important; }
.bb-facts thead th { border-top: 0 !important; }
/* Mobile menu, organic: cream page with the logo on top, centered serif links between gold hairlines. */
.bb-layout-organic .wp-block-navigation__responsive-container.is-menu-open {
background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--ink) !important; padding: 1.25rem 1.5rem 2.5rem !important;
}
.bb-layout-organic .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
padding-top: 1rem !important; align-items: center !important; justify-content: flex-start !important; text-align: center;
}
.bb-layout-organic .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
content: ""; display: block; width: 170px; height: 58px; margin: 0 auto 2.2rem; background: var(--bb-logo) center / contain no-repeat;
}
.bb-layout-organic .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
width: 100%; max-width: 340px; gap: 0 !important; align-items: stretch !important; border-top: 1px solid #e6d7bf;
}
.bb-layout-organic .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
justify-content: center !important; border-bottom: 1px solid #e6d7bf; padding: 1rem 0; text-align: center;
}
.bb-layout-organic .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
color: var(--wp--preset--color--ink) !important; font-family: var(--wp--preset--font-family--fraunces); font-size: 1.75rem; font-weight: 600; width: 100%;
}
.bb-layout-organic .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.bb-layout-organic .wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] { color: var(--wp--preset--color--primary) !important; font-style: italic; transform: none; }
.bb-layout-organic .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container::after {
content: ""; display: block; width: 56px; height: 3px; background: #ae7f35; margin: 1.6rem auto 0;
}
.bb-layout-organic .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ink); }
.bb-layout-organic .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--ink); }
/* Mobile menu, apothecary (Xtralife): black like the bottle, colour logo on the left over the copper double band, and
the links as numbered rows of a facts panel (01, 02...), left aligned, uppercase with tracking. Organic is cream,
centred and in serif; this one must not look like it. */
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open {
background: var(--wp--preset--color--night) !important; color: #f3ead9 !important; padding: 1.25rem 1.5rem 2.5rem !important;
}
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
padding-top: .5rem !important; align-items: stretch !important; justify-content: flex-start !important; text-align: left;
}
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
content: ""; display: block; width: 130px; height: 56px; margin: 0 0 1.4rem; background: var(--bb-logo) left center / contain no-repeat;
padding-bottom: .9rem; box-shadow: 0 3px 0 var(--wp--preset--color--glow), 0 5px 0 var(--wp--preset--color--night), 0 6px 0 var(--wp--preset--color--glow);
}
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
width: 100%; gap: 0 !important; align-items: stretch !important; counter-reset: navrow; margin-top: 1.2rem;
}
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
counter-increment: navrow; justify-content: flex-start !important; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--glow) 55%, transparent);
padding: 1.05rem 0; display: flex; align-items: baseline; gap: 1rem;
}
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::before {
content: counter(navrow, decimal-leading-zero); color: var(--wp--preset--color--glow); font-size: .8rem; font-weight: 700; letter-spacing: .1em; min-width: 1.8rem;
}
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
color: #f3ead9 !important; text-transform: uppercase; letter-spacing: .16em; font-size: 1.05rem; font-weight: 700; width: 100%;
}
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] { color: var(--wp--preset--color--glow) !important; transform: none; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #f3ead9; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { flex-direction: row !important; display: flex !important; align-items: baseline !important; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { width: auto; }
/* ---------------------------------------------------------------------------------------------------------------
Layout "earth" (first used by Herbalic, 2026-11-08): sand surfaces, gold accents in dots and seals, soft white
cards, a dark footer under a landscape strip. The landscape is the brand's own art: the style variation sets
--bb-footer-art: url(...). Generic: any brand can pick it with layout=earth.
--------------------------------------------------------------------------------------------------------------- */
.bb-layout-earth .bb-header { background: var(--wp--preset--color--surface); border-bottom: 0; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.bb-layout-earth .bb-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--wp--preset--color--glow); }
.bb-layout-earth .bb-header .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--poppins); font-weight: 600; font-size: .98rem; color: var(--wp--preset--color--ink); }
.bb-layout-earth .bb-header .wp-block-navigation .wp-block-navigation-item__content::after {
width: 6px !important; height: 6px !important; border-radius: 999px; left: 50% !important; right: auto !important; bottom: -8px !important;
transform: translateX(-50%) scale(0); background: var(--wp--preset--color--glow) !important; transition: transform .2s ease; }
.bb-layout-earth .bb-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.bb-layout-earth .bb-header .wp-block-navigation [aria-current="page"]::after,
.bb-layout-earth .bb-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { transform: translateX(-50%) scale(1); }
.bb-layout-earth .bb-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.bb-layout-earth .bb-header .wp-block-navigation [aria-current="page"] { color: var(--wp--preset--color--ink); }
/* the distributor link is the call to action of the header */
@media (min-width: 782px) {
.bb-layout-earth .bb-header .wp-block-navigation a[href*="distribuidor"] { background: var(--wp--preset--color--glow); color: var(--wp--preset--color--ink) !important;
padding: .5rem 1.1rem; border-radius: 999px; }
.bb-layout-earth .bb-header .wp-block-navigation a[href*="distribuidor"]::after { display: none; }
.bb-layout-earth .bb-header .wp-block-navigation a[href*="distribuidor"]:hover { background: var(--wp--preset--color--primary-dark); color: #fff !important; }
}
.bb-layout-earth .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--surface) !important; color: var(--wp--preset--color--ink) !important; }
.bb-layout-earth .wp-block-navigation__responsive-container.is-menu-open::before { content: ""; display: block; height: 44px; width: 150px;
background: var(--bb-logo) left center / contain no-repeat; }
.bb-layout-earth .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--ink) !important; font-size: 1.5rem; }
.bb-layout-earth .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before { content: ""; display: inline-block;
width: 8px; height: 8px; border-radius: 999px; background: var(--wp--preset--color--glow); margin: 0 .8rem .3rem 0; vertical-align: middle; }
.bb-layout-earth .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ink); }
.bb-layout-earth .bb-eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--wp--preset--color--glow);
margin: 0 .55rem .12rem 0; vertical-align: middle; }
.bb-layout-earth .bb-card-box { background: #fff; border: 0; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.bb-layout-earth .woocommerce ul.products li.product .bb-card-media,
.bb-layout-earth .woocommerce ul.products li.product a img { border-radius: 16px; }
.bb-layout-earth .bb-chips li { background: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
/* footer: the brand's landscape strip, then the dark band */
.bb-layout-earth .bb-footer { position: relative; margin-top: clamp(70px, 11vw, 150px); border-top: 0 !important; }
.bb-layout-earth .bb-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(70px, 11vw, 150px);
background: var(--bb-footer-art, none) center bottom / cover no-repeat, var(--wp--preset--color--surface); }
.bb-layout-earth .bb-footer-title { color: var(--wp--preset--color--glow) !important; font-family: var(--wp--preset--font-family--poppins); text-transform: uppercase;
letter-spacing: .14em; font-size: .75rem !important; font-weight: 600; }
.bb-layout-earth .bb-footer-title::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: currentColor; margin: 0 .5rem .15rem 0; vertical-align: middle; }
.bb-layout-earth .bb-footer-cta { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
padding-top: 4.4rem !important; position: relative; }
.bb-layout-earth .bb-footer-cta::before { content: ""; position: absolute; top: 1rem; left: 1.2rem; width: 52px; height: 52px;
background: var(--bb-footer-seal, none) center / contain no-repeat; }
.bb-layout-earth .bb-footer-bottom { border-top-color: rgba(255,255,255,.12); }
.bb-layout-earth .bb-footer .bb-footer-logo img { filter: invert(1) hue-rotate(180deg) brightness(1.15); opacity: 1; }
/* ---------------------------------------------------------------------------------------------------------------
Layout "sport" (first used by HyperNu, 2026-11-08): taken from a sports-nutrition label and its ads. Black header
with a red "speed stripe" under it, menu in heavy italic capitals with the current page on a slanted red tag;
parallelogram buttons, cards with a cut corner and a red edge, "//" eyebrows, slanted tags for badges, a
scoreboard for figures; mobile menu as big italic rows; footer with a hexagon outline (the brand's line art) and a
red CTA block. Colors come from the palette (night, primary, glow). Generic: any brand can pick layout=sport.
--------------------------------------------------------------------------------------------------------------- */
.bb-layout-sport { --bb-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M100 8l80 46v92l-80 46-80-46V54z'/%3E%3Cpath d='M100 30l61 35v70l-61 35-61-35V65z'/%3E%3Cpath d='M100 52l42 24v48l-42 24-42-24V76z'/%3E%3Cpath d='M100 74l23 13v26l-23 13-23-13V87z'/%3E%3C/svg%3E");
--bb-speed: linear-gradient(100deg, var(--wp--preset--color--primary) 0 58%, transparent 58% 60%, var(--wp--preset--color--primary) 60% 66%, transparent 66% 68%, var(--wp--preset--color--primary) 68% 71%, transparent 71%); }
.bb-layout-sport :where(h1, h2) { font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }
.bb-layout-sport :where(h1, h2, h3) em { font-style: italic; color: var(--wp--preset--color--primary); }
.bb-layout-sport .bb-dark :where(h1, h2, h3) em { color: var(--wp--preset--color--glow); }
/* Header: black, speed stripe under it, italic caps menu, current page on a slanted red tag. */
.bb-layout-sport .bb-header { background: var(--wp--preset--color--night) !important; border-bottom: 0 !important; }
.bb-layout-sport .bb-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: var(--bb-speed); pointer-events: none; }
.bb-layout-sport .bb-header .wp-block-navigation-item__content { color: #fff; text-transform: uppercase; font-style: italic; font-weight: 800; font-size: .9rem; letter-spacing: .02em; padding: .35rem .7rem !important; }
.bb-layout-sport .bb-header .wp-block-navigation .wp-block-navigation-item__content::after { display: none; }
.bb-layout-sport .bb-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--glow); }
.bb-layout-sport .bb-header .current-menu-item > .wp-block-navigation-item__content,
.bb-layout-sport .bb-header .wp-block-navigation [aria-current="page"] { color: #fff !important; background: var(--wp--preset--color--primary); transform: skewX(-12deg); }
.bb-layout-sport .bb-header .wp-block-navigation__container { gap: .4rem; }
.bb-layout-sport .bb-header .wp-block-navigation__responsive-container-open { color: #fff; }
/* Buttons: solid ones are parallelograms; outline ones are text on a red bar. */
.bb-layout-sport .wp-element-button, .bb-layout-sport .wp-block-button__link { border-radius: 0 !important; text-transform: uppercase; font-style: italic; font-weight: 800; letter-spacing: .03em;
clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-inline: 1.9rem; }
.bb-layout-sport .is-style-outline .wp-block-button__link { clip-path: none; border: 0 !important; background: transparent !important; padding-inline: .2rem;
box-shadow: inset 0 -4px 0 var(--wp--preset--color--primary); color: var(--wp--preset--color--ink) !important; }
.bb-layout-sport .bb-dark .is-style-outline .wp-block-button__link { color: #fff !important; }
.bb-layout-sport .is-style-outline .wp-block-button__link:hover { box-shadow: inset 0 -100px 0 var(--wp--preset--color--primary); color: #fff !important; }
/* Cards: cut top-right corner, red edge; white on grey bands, grey on white ones. */
.bb-layout-sport .bb-card-box { border: 0 !important; border-left: 5px solid var(--wp--preset--color--primary) !important; border-radius: 0 !important; box-shadow: none !important;
background: var(--wp--preset--color--surface); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.bb-layout-sport .has-surface-background-color .bb-card-box { background: #fff; }
.bb-layout-sport .bb-dark .bb-card-box { background: #17171a; }
.bb-layout-sport .bb-eyebrow { text-transform: uppercase; font-style: italic; font-weight: 800; letter-spacing: .06em; }
.bb-layout-sport .bb-eyebrow::before { content: "//"; margin-right: .45em; }
.bb-layout-sport .bb-section-title::after { content: ""; display: block; width: 72px; height: 5px; margin: .6rem auto 0; background: var(--wp--preset--color--primary); transform: skewX(-24deg); }
.bb-layout-sport .bb-media-round img, .bb-layout-sport .bb-hero-art img { border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%); }
/* Badges as slanted black tags; figures as a scoreboard on black; steps as slanted red numbers. */
.bb-layout-sport .bb-badges { justify-content: center; gap: .8rem !important; flex-wrap: wrap !important; }
.bb-layout-sport .bb-badges > .wp-block-column { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; }
.bb-layout-sport .bb-badges p { display: inline-block; margin: 0; padding: .55rem 1.1rem; background: var(--wp--preset--color--night); color: #fff; transform: skewX(-10deg);
text-transform: uppercase; font-weight: 800; font-style: italic; font-size: .8rem; letter-spacing: .04em; }
.bb-layout-sport .bb-stats .bb-card-box { background: var(--wp--preset--color--night) !important; clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.bb-layout-sport .bb-stats .bb-card-box p { color: #fff; }
.bb-layout-sport .bb-stats .bb-card-box .bb-stat { color: var(--wp--preset--color--glow) !important; font-style: italic; font-weight: 800; }
.bb-layout-sport .bb-step { background: var(--wp--preset--color--primary) !important; color: #fff !important; border-radius: 0 !important; transform: skewX(-12deg); font-style: italic; font-weight: 800; }
/* Mobile menu: black panel, the logo, big italic rows with a red slash, the hexagon line art in a corner. */
.bb-layout-sport .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--night) !important; color: #fff !important; padding: 1.25rem 1.5rem 2.5rem !important; overflow: hidden; }
.bb-layout-sport .wp-block-navigation__responsive-container.is-menu-open::after { content: ""; position: absolute; right: -90px; bottom: -60px; width: 340px; height: 340px; opacity: .35; pointer-events: none;
background: var(--wp--preset--color--primary); -webkit-mask: var(--bb-hex) center / contain no-repeat; mask: var(--bb-hex) center / contain no-repeat; }
.bb-layout-sport .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: .5rem !important; align-items: stretch !important; justify-content: flex-start !important; text-align: left; }
.bb-layout-sport .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
content: ""; display: block; width: 150px; height: 48px; margin: 0 0 1.8rem; background: var(--bb-logo) left center / contain no-repeat; }
.bb-layout-sport .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100%; gap: .2rem !important; align-items: stretch !important; }
.bb-layout-sport .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: .7rem; padding: .45rem 0; }
.bb-layout-sport .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::before { content: "/"; color: var(--wp--preset--color--glow); font-weight: 800; font-style: italic; font-size: 1.6rem; }
.bb-layout-sport .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff !important; text-transform: uppercase; font-style: italic; font-weight: 800;
font-size: 1.75rem; letter-spacing: -.01em; line-height: 1.15; background: none !important; transform: none !important; padding: 0 !important; }
.bb-layout-sport .wp-block-navigation__responsive-container.is-menu-open [aria-current="page"],
.bb-layout-sport .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--glow) !important; }
.bb-layout-sport .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; }
/* Footer: speed stripe on top, hexagon line art at the right, italic red titles with a slash, red CTA block. */
.bb-layout-sport .bb-footer { position: relative; overflow: hidden; border-top: 0 !important; }
.bb-layout-sport .bb-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--bb-speed); }
.bb-layout-sport .bb-footer::after { content: ""; position: absolute; right: -120px; top: -40px; width: 520px; height: 520px; opacity: .16; pointer-events: none;
background: var(--wp--preset--color--primary); -webkit-mask: var(--bb-hex) center / contain no-repeat; mask: var(--bb-hex) center / contain no-repeat; }
.bb-layout-sport .bb-footer > * { position: relative; z-index: 1; }
.bb-layout-sport .bb-footer-title { color: var(--wp--preset--color--glow) !important; text-transform: uppercase; font-style: italic; font-weight: 800; letter-spacing: .04em; font-size: .85rem; }
.bb-layout-sport .bb-footer-title::before { content: "/ "; }
.bb-layout-sport .bb-footer-cta { background: var(--wp--preset--color--primary) !important; border: 0 !important; border-radius: 0 !important;
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.bb-layout-sport .bb-footer-cta .bb-footer-title, .bb-layout-sport .bb-footer-cta p { color: #fff !important; }
.bb-layout-sport .bb-footer-cta .bb-footer-title::before { content: ""; }
.bb-layout-sport .bb-footer-cta .wp-block-button__link { background: var(--wp--preset--color--night) !important; color: #fff !important; }
.bb-layout-sport .bb-footer-bottom p { text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
/* Levels (any brand; first used by HyperNu): volume tiers as cards that rise from left to right. */
.bb-levels { align-items: flex-end !important; }
.bb-levels > .wp-block-column:nth-child(2) .bb-card-box { padding-top: 3rem !important; }
.bb-levels > .wp-block-column:nth-child(3) .bb-card-box { padding-top: 5rem !important; }
.bb-levels .bb-stat { font-size: clamp(2.4rem, 5vw, 3.4rem) !important; line-height: 1; margin: .2rem 0 .4rem; }
@media (max-width: 781px) { .bb-levels > .wp-block-column:nth-child(n) .bb-card-box { padding-top: 1.25rem !important; } }
/* Sprint (any brand; first used by HyperNu): an ordered list of steps on a track, big numbers joined by a line. */
.bb-sprint { list-style: none; counter-reset: sprint; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 0; margin: 1.5rem 0 0; position: relative; }
.bb-sprint::before { content: ""; position: absolute; left: 0; right: 0; top: 1.6rem; height: 3px; background: var(--wp--preset--color--primary); }
.bb-sprint li { counter-increment: sprint; position: relative; padding-top: 4.2rem; }
.bb-sprint li::before { content: counter(sprint, decimal-leading-zero); position: absolute; left: 0; top: 0; padding: .1rem .7rem; font-size: 2.2rem; font-weight: 800; font-style: italic; line-height: 1.2;
background: var(--wp--preset--color--night); color: #fff; border-left: 4px solid var(--wp--preset--color--primary); }
.bb-dark .bb-sprint li::before { background: var(--wp--preset--color--primary); border-left-color: #fff; }
.bb-sprint li strong { display: block; font-size: 1.1rem; margin-bottom: .3rem; text-transform: uppercase; font-style: italic; }
@media (max-width: 781px) { .bb-sprint { grid-template-columns: 1fr; gap: 1.2rem; } .bb-sprint::before { left: 1.5rem; right: auto; width: 3px; top: 0; bottom: 0; height: auto; }
.bb-sprint li { padding: 0 0 0 5.2rem; min-height: 3rem; } }
/* Apothecary v2 (user, 2026-11-08: "el logo verde sobre negro no se ve tan bien"): the header and the mobile menu
go white like the label paper, keeping the copper double band, the tracked capitals and the numbered rows, so it is
still different from modern and organic. The footer stays black, with the logo on a white plate like the label. */
.bb-layout-apothecary .bb-header { background: var(--wp--preset--color--base);
box-shadow: 0 3px 0 var(--wp--preset--color--glow), 0 5px 0 var(--wp--preset--color--base), 0 6px 0 var(--wp--preset--color--glow); }
.bb-layout-apothecary .bb-header .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); }
.bb-layout-apothecary .bb-header .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--ink); }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--ink) !important; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
box-shadow: 0 3px 0 var(--wp--preset--color--glow), 0 5px 0 var(--wp--preset--color--base), 0 6px 0 var(--wp--preset--color--glow); }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--ink) !important; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ink); }
.bb-layout-apothecary .bb-footer .bb-footer-logo { background: var(--wp--preset--color--base); padding: 12px 18px; }
.bb-label-bottle img { max-width: 260px; margin: 1rem auto 0; display: block; }
.bb-pillars:has(> .wp-block-column:nth-child(4)) { flex-wrap: wrap !important; }
/* Apothecary v3 (user, 2026-11-08): (1) footer: "esto se ve feo" (logo on a white box over black). Now the footer is
the label paper: white, the logo straight on it between copper rules, link columns in ink, and a black strip at the
bottom like the bottle base. Real Setas' footer is cream and fully centred; this one keeps columns + the black base.
(2) "los menús de mobile están quedando iguales": the mobile menu becomes a 2x2 grid of facts-panel tiles (thick
ink frame, big copper number, name in capitals), and the open button reads "MENÚ". No other brand uses tiles. */
.bb-layout-apothecary .bb-footer { background: var(--wp--preset--color--base) !important; border-top: 0;
box-shadow: inset 0 3px 0 var(--wp--preset--color--glow), inset 0 5px 0 var(--wp--preset--color--base), inset 0 6px 0 var(--wp--preset--color--glow); }
.bb-layout-apothecary .bb-footer, .bb-layout-apothecary .bb-footer :where(p, a, li) { color: var(--wp--preset--color--ink) !important; }
.bb-layout-apothecary .bb-footer a:hover { color: var(--wp--preset--color--primary) !important; }
.bb-layout-apothecary .bb-footer .bb-footer-logo { background: none; padding: 0; }
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child p { margin: .25rem 0 0; font-size: .85rem; color: var(--wp--preset--color--muted) !important; }
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child { border-bottom-color: var(--wp--preset--color--line); }
.bb-layout-apothecary .bb-footer-cta { border-color: var(--wp--preset--color--ink); border-width: 2px; }
.bb-layout-apothecary .bb-footer-bottom { background: var(--wp--preset--color--night); box-shadow: 0 0 0 100vmax var(--wp--preset--color--night);
clip-path: inset(0 -100vmax); padding: .9rem 0; margin-top: 1.5rem; border-top: 0; }
.bb-layout-apothecary .bb-footer-bottom p { color: #f3ead9 !important; }
.bb-layout-apothecary .bb-footer { padding-bottom: 0 !important; }
/* Mobile menu tiles */
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px !important; margin-top: 1.6rem; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
flex-direction: column !important; align-items: flex-start !important; justify-content: space-between !important; gap: 1.6rem;
border: 3px solid var(--wp--preset--color--ink) !important; padding: .8rem .9rem 1rem !important; min-height: 128px; background: var(--wp--preset--color--base); }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::before {
font-size: 1.9rem; font-weight: 800; letter-spacing: 0; line-height: 1; min-width: 0; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-size: .9rem; letter-spacing: .14em; border-top: 6px solid var(--wp--preset--color--ink); padding-top: .45rem !important; width: 100% !important; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] { color: var(--wp--preset--color--primary) !important; }
.bb-layout-apothecary .wp-block-navigation__responsive-container-open { display: inline-flex; align-items: center; gap: .45rem; }
.bb-layout-apothecary .wp-block-navigation__responsive-container-open::before { content: "MENÚ"; font-size: .72rem; font-weight: 700; letter-spacing: .18em; }
.bb-layout-apothecary .bb-footer p.bb-footer-title, .bb-layout-apothecary .bb-footer .bb-footer-title { color: var(--wp--preset--color--glow) !important; }
/* Apothecary v4: ONE visual language (user, 2026-11-08: "estás mezclando dos estilos... el del formulario no se ve
así en todo"; "el menú sale en desktop cuando solo debería salir en mobile").
The system is the label: white paper, the copper double band (4px top, 2px bottom), thin rules in the line colour,
tracked capitals. The heavy black "facts panel" frames are removed from tables, form and mobile tiles. */
/* 1. The hamburger exists only on mobile (WordPress shows it below 600px). */
.bb-layout-apothecary .wp-block-navigation__responsive-container-open::before { content: none; }
@media (max-width: 599px) {
.bb-layout-apothecary .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; align-items: center; gap: .45rem; }
.bb-layout-apothecary .wp-block-navigation__responsive-container-open::before { content: "MENÚ"; font-size: .72rem; font-weight: 700; letter-spacing: .18em; }
}
@media (min-width: 600px) { .bb-layout-apothecary .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; } }
/* 2. Tables (bb-facts) in the label language. */
.bb-layout-apothecary .bb-facts table { border: 1px solid var(--wp--preset--color--line);
background: linear-gradient(var(--wp--preset--color--glow), var(--wp--preset--color--glow)) top / 100% 4px no-repeat,
linear-gradient(var(--wp--preset--color--glow), var(--wp--preset--color--glow)) bottom / 100% 2px no-repeat, #fff; }
.bb-layout-apothecary .bb-facts thead th { font-size: .82rem; font-weight: 700; letter-spacing: .16em; color: var(--wp--preset--color--glow);
padding: 1.1rem 1rem .6rem; border-bottom: 1px solid var(--wp--preset--color--line) !important; }
.bb-layout-apothecary .bb-facts td { border-top: 1px solid var(--wp--preset--color--line) !important; border-bottom: 0 !important; color: var(--wp--preset--color--text); }
.bb-layout-apothecary .bb-facts td:first-child { color: var(--wp--preset--color--ink); }
.bb-layout-apothecary .bb-facts tr:last-child td { border-bottom: 0 !important; padding-bottom: 1rem; }
/* 3. Steps: copper outline on paper, like the rest. */
.bb-layout-apothecary .bb-steps-line li::before { background: #fff; color: var(--wp--preset--color--ink); border: 2px solid var(--wp--preset--color--glow); }
/* 4. Mobile menu tiles: thin rule + copper bands, like the cards. */
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
border: 1px solid var(--wp--preset--color--line) !important;
background: linear-gradient(var(--wp--preset--color--glow), var(--wp--preset--color--glow)) top / 100% 4px no-repeat,
linear-gradient(var(--wp--preset--color--glow), var(--wp--preset--color--glow)) bottom / 100% 2px no-repeat, #fff !important; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { border-top: 1px solid var(--wp--preset--color--line); }
.bb-layout-apothecary .bb-facts thead { border-bottom: 0 !important; }
/* Tall media (any brand; first used by HyperNu): a 4:5 photo beside a long text column, so it fills the band. */
.bb-media-round.bb-media-tall img { aspect-ratio: 3 / 4; object-position: 50% 30%; }
/* On phones the theme crops photos to 16:10 from the centre, which cuts heads off: a tall photo stays tall, framed high. */
@media (max-width: 781px) { .bb-media-round.bb-media-tall img { aspect-ratio: 4 / 5; object-position: 50% 25%; } }
/* Icon strip (any brand; first used by HyperNu): 3 short promises, each with an icon in a primary-colour box, a bold
line and a plain line. Desktop: 3 columns; phone: compact rows with the icon on the left. Icons are CSS masks, so
they take the palette colour; pick one per item with bb-ico--. */
.bb-icon-strip .wp-block-columns { gap: 1.5rem; margin: 0; }
.bb-icon-strip .bb-ico-item { position: relative; padding: .2rem 0 .2rem 4.4rem !important; min-height: 3.4rem; background: none !important; border: 0 !important;
box-shadow: none !important; clip-path: none !important; }
.bb-icon-strip .bb-ico-item::before { content: ""; position: absolute; left: 0; top: .1rem; width: 3.2rem; height: 3.2rem; background: var(--wp--preset--color--primary); transform: skewX(-10deg); }
.bb-icon-strip .bb-ico-item::after { content: ""; position: absolute; left: .7rem; top: .8rem; width: 1.8rem; height: 1.8rem; background: #fff;
-webkit-mask: var(--bb-ico) center / contain no-repeat; mask: var(--bb-ico) center / contain no-repeat; }
.bb-icon-strip .bb-ico-title { margin: 0 0 .15rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; line-height: 1.25; }
.bb-icon-strip .bb-ico-text { margin: 0; font-size: .92rem; line-height: 1.45; opacity: .85; }
.bb-dark.bb-icon-strip .bb-ico-title, .bb-dark.bb-icon-strip .bb-ico-text { color: #fff; }
@media (max-width: 781px) {
.bb-icon-strip .wp-block-columns { gap: 0 !important; }
.bb-icon-strip .wp-block-column + .wp-block-column .bb-ico-item { margin-top: 1rem; padding-top: 1rem !important; border-top: 1px solid rgba(255,255,255,.14) !important; }
.bb-icon-strip .wp-block-column + .wp-block-column .bb-ico-item::before { top: 1.1rem; }
.bb-icon-strip .wp-block-column + .wp-block-column .bb-ico-item::after { top: 1.8rem; }
}
.bb-ico--label { --bb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 12V3h9l9 9-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.6'/%3E%3C/svg%3E"); }
.bb-ico--percent { --bb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M19 5L5 19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); }
.bb-ico--store { --bb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 9l2-5h14l2 5M4 9v11h16V9M9 20v-6h6v6M3 9h18'/%3E%3C/svg%3E"); }
.bb-ico--whistle { --bb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='14' r='6'/%3E%3Cpath d='M13 9h8v4h-4M9 14h.01'/%3E%3C/svg%3E"); }
/* ===== Apothecary: contrast (Lighthouse 2026-11-08: copper #d9782d on white is 3.1:1). Small copper TEXT on light
backgrounds uses the label's dark copper #aa5423 (5.25:1); bright copper stays for rules, bands, big numbers and
anything on dark. ===== */
.bb-layout-apothecary :is(.bb-eyebrow, .bb-footer-title, .bb-facts thead th, .bc-form legend) { color: #aa5423 !important; }
.bb-layout-apothecary .bb-dark .bb-eyebrow, .bb-layout-apothecary .bb-banner .bb-eyebrow { color: var(--wp--preset--color--glow) !important; }
/* ===== Motion, apothecary v2 (Xtralife, 2026-11-08). The user: "no puros fade in", "usa elementos de la marca".
Every movement comes from the bottle and its art: the copper band of the label (reading progress, rules that draw),
the light on the glass (one glint over the banner), turning the bottle to read it (product hover), the label being
printed (facts rows stamp in), the rubber seal (step numbers), the floating leaves of the brand art (drifting),
the sun of the logo (a slow glow), the cap's "SEALED FOR YOUR PROTECTION" ring (turning).
Safe for SEO: CSS only; transform, opacity, clip-path and background-size only (no layout shift); nothing above the
fold starts hidden (LCP intact); scroll effects only where animation-timeline exists (elsewhere: static, visible);
decorative pieces are aria-hidden images in absolutely positioned layers; none of it runs with reduced motion. ===== */
.bb-layout-apothecary .bb-has-leaves { position: relative; overflow: clip; }
.bb-layout-apothecary .bb-leaves { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bb-layout-apothecary .bb-has-leaves > *:not(.bb-leaves):not(.bb-seal-wrap):not(.bb-sun), .bb-layout-apothecary .bb-banner .wp-block-cover__inner-container { position: relative; z-index: 1; }
.bb-layout-apothecary .bb-leaf { position: absolute; width: clamp(54px, 7vw, 96px); height: auto; filter: drop-shadow(0 10px 14px rgba(15, 13, 11, .18)); }
.bb-layout-apothecary .bb-leaf--a { top: 8%; right: 3%; transform: rotate(18deg); }
.bb-layout-apothecary .bb-leaf--b { bottom: 6%; left: 2%; transform: rotate(-35deg) scaleX(-1); width: clamp(44px, 5vw, 72px); }
.bb-layout-apothecary .bb-leaf--c { top: 38%; right: 46%; transform: rotate(60deg); width: clamp(34px, 4vw, 56px); opacity: .9; }
.bb-layout-apothecary .bb-banner .bb-leaf--c { right: auto; left: 44%; top: 12%; }
@media (max-width: 781px) { .bb-leaf--c { display: none; } .bb-leaf { width: 46px; } }
.bb-layout-apothecary .bb-seal { width: clamp(84px, 9vw, 116px); height: auto; color: var(--wp--preset--color--glow); display: block; }
.bb-layout-apothecary .bb-seal text { font: 700 8.6px/1 var(--wp--preset--font-family--body, sans-serif); letter-spacing: 2.1px; fill: currentColor; text-transform: uppercase; }
.bb-layout-apothecary .bb-seal circle { fill: none; stroke: currentColor; stroke-width: .8; }
.bb-layout-apothecary .bb-seal-wrap { position: absolute; top: 22px; right: 22px; z-index: 2; }
.bb-layout-apothecary .bb-dark .bb-seal { color: var(--wp--preset--color--glow); }
.bb-layout-apothecary .bb-sun { position: absolute; right: -4%; top: 50%; width: min(46vw, 560px); transform: translateY(-50%); opacity: .07; pointer-events: none; z-index: 0; }
.bb-layout-apothecary .bb-sun img { width: 100%; height: auto; display: block; }
.bb-layout-apothecary .bb-reading { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none; transform-origin: left; transform: scaleX(0);
background: linear-gradient(90deg, #aa5423, var(--wp--preset--color--glow), #ee8631); }
@keyframes bb-apo-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes bb-apo-glint { 0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 15% { opacity: .55; } 100% { transform: translateX(260%) skewX(-18deg); opacity: 0; } }
@keyframes bb-apo-drift-a { 0% { transform: translate(0, 0) rotate(18deg); } 50% { transform: translate(-10px, 14px) rotate(26deg); } 100% { transform: translate(6px, -8px) rotate(12deg); } }
@keyframes bb-apo-drift-b { 0% { transform: translate(0, 0) rotate(-35deg) scaleX(-1); } 50% { transform: translate(12px, -10px) rotate(-26deg) scaleX(-1); } 100% { transform: translate(-6px, 6px) rotate(-42deg) scaleX(-1); } }
@keyframes bb-apo-drift-c { 0% { transform: translate(0, 0) rotate(60deg); } 50% { transform: translate(8px, 12px) rotate(72deg); } 100% { transform: translate(-8px, -6px) rotate(50deg); } }
@keyframes bb-apo-spin { to { transform: rotate(360deg); } }
@keyframes bb-apo-breathe { 0%, 100% { transform: translateY(-50%) scale(1); opacity: .07; } 50% { transform: translateY(-50%) scale(1.04); opacity: .11; } }
@keyframes bb-apo-progress { to { transform: scaleX(1); } }
@keyframes bb-apo-print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bb-apo-band { from { background-size: 0% 4px, 0% 2px, auto; } to { background-size: 100% 4px, 100% 2px, auto; } }
@keyframes bb-apo-stamp { 0% { transform: scale(1.7) rotate(-14deg); opacity: 0; } 70% { transform: scale(.94) rotate(2deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes bb-apo-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bb-apo-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bb-apo-label-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bb-apo-stick { from { opacity: 0; transform: translateY(14px) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes bb-apo-check { 0% { transform: translateY(-50%) scale(.5); } 60% { transform: translateY(-50%) scale(1.25); } 100% { transform: translateY(-50%) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
/* The light on the glass: the banner photo settles and one copper glint crosses it, once. */
.bb-layout-apothecary .bb-banner > .wp-block-cover__image-background { animation: bb-apo-settle 2s cubic-bezier(.2, .7, .2, 1) both; }
.bb-layout-apothecary .bb-banner { overflow: hidden; }
.bb-layout-apothecary .bb-banner::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none; z-index: 1;
background: linear-gradient(90deg, transparent, rgba(238, 134, 49, .28), rgba(255, 236, 205, .35), transparent);
mix-blend-mode: screen; animation: bb-apo-glint 2.4s .5s cubic-bezier(.4, 0, .2, 1) both; }
/* The brand's floating leaves drift, slowly and never in sync. */
.bb-layout-apothecary .bb-leaf--a { animation: bb-apo-drift-a 11s ease-in-out infinite alternate; }
.bb-layout-apothecary .bb-leaf--b { animation: bb-apo-drift-b 14s ease-in-out infinite alternate; }
.bb-layout-apothecary .bb-leaf--c { animation: bb-apo-drift-c 9s ease-in-out infinite alternate; }
/* The cap seal turns; the sun of the logo breathes. */
.bb-layout-apothecary .bb-seal .bb-seal-ring { transform-origin: 60px 60px; animation: bb-apo-spin 38s linear infinite; }
.bb-layout-apothecary .bb-sun { animation: bb-apo-breathe 7s ease-in-out infinite; }
/* Turning the bottle to read it: product photos rotate a little in 3D on hover. */
.bb-layout-apothecary .woocommerce ul.products li.product a img { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.bb-layout-apothecary .woocommerce ul.products li.product:hover a img { transform: perspective(700px) rotateY(-12deg) scale(1.03); }
/* Ink: buttons fill from the left in the darker green; the form draws a copper line under the field in focus and
the ticked box lands like a stamp. */
.bb-layout-apothecary .wp-block-button__link, .bb-layout-apothecary .bc-form button[type=submit] {
background-image: linear-gradient(var(--wp--preset--color--primary-dark), var(--wp--preset--color--primary-dark)); background-repeat: no-repeat;
background-size: 0% 100%; transition: background-size .35s cubic-bezier(.2, .7, .2, 1), color .2s ease; }
.bb-layout-apothecary .wp-block-button__link:hover, .bb-layout-apothecary .bc-form button[type=submit]:hover { background-size: 100% 100%; }
.bb-layout-apothecary .bc-form :is(input[type=text], input[type=email], input[type=tel], select, textarea) { transition: box-shadow .3s ease, border-color .3s ease; }
.bb-layout-apothecary .bc-form :is(input[type=text], input[type=email], input[type=tel], select, textarea):focus { box-shadow: inset 0 -2px 0 var(--wp--preset--color--glow) !important; }
.bb-layout-apothecary .bc-form--label .bc-choice input:checked + span::before { animation: bb-apo-check .35s ease both; }
/* Cards: lift, and the label bands thicken. Family photos slide up a little inside their frame. */
.bb-layout-apothecary .bb-card-box { transition: transform .3s ease, box-shadow .3s ease, background-size .3s ease; }
.bb-layout-apothecary .bb-card-box:hover { transform: translateY(-4px); background-size: 100% 6px, 100% 3px;
box-shadow: 0 16px 32px color-mix(in srgb, var(--wp--preset--color--glow) 16%, transparent); }
.bb-layout-apothecary .bb-family-img { overflow: hidden; }
.bb-layout-apothecary .bb-family-img img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.bb-layout-apothecary .bb-card-box:hover .bb-family-img img { transform: translateY(-4px) scale(1.06); }
.bb-layout-apothecary .bb-facts tbody tr { transition: background-color .2s ease; }
.bb-layout-apothecary .bb-facts tbody tr:hover { background: var(--wp--preset--color--surface); }
/* Mobile menu: the tiles stick on like labels, one after another. */
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation: bb-apo-stick .45s cubic-bezier(.2, .7, .2, 1) both; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .07s; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .14s; }
.bb-layout-apothecary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .21s; }
@supports (animation-timeline: view()) {
/* Reading progress: the label's copper band fills as you go down the page. */
.bb-layout-apothecary .bb-reading { animation: bb-apo-progress linear both; animation-timeline: scroll(root); }
/* The label is printed: the table's copper bands draw, then each row is stamped in from the left. */
.bb-layout-apothecary .bb-facts table { animation: bb-apo-band linear both; animation-timeline: view(); animation-range: entry 5% cover 25%; }
.bb-layout-apothecary .bb-facts tbody tr { animation: bb-apo-print linear both; animation-timeline: view(); animation-range: entry 30% cover 30%; }
/* Families: each photo is uncovered from the bottom, like a label sliding up. */
.bb-layout-apothecary .bb-family-img { animation: bb-apo-label-up linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
/* Rules draw themselves: under section titles, beside eyebrows, between steps, beside the footer logo. */
.bb-layout-apothecary .bb-section-title::after { transform-origin: center; animation: bb-apo-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
.bb-layout-apothecary :not(.bb-banner) .bb-eyebrow::before { transform-origin: left; animation: bb-apo-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 25%; }
.bb-layout-apothecary .bb-steps-line li:not(:last-child)::after { transform-origin: left; animation: bb-apo-draw linear both; animation-timeline: view(); animation-range: entry 25% cover 45%; }
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child .wp-block-site-logo::before { transform-origin: right; animation: bb-apo-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child .wp-block-site-logo::after { transform-origin: left; animation: bb-apo-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
/* The rubber seal: step numbers land with a small bounce. */
.bb-layout-apothecary .bb-steps-line li::before { animation: bb-apo-stamp linear both; animation-timeline: view(); animation-range: entry 15% cover 30%; }
}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 781px) {
@supports (animation-timeline: view()) {
.bb-layout-apothecary .bb-steps-line li:not(:last-child)::after { transform-origin: top; animation-name: bb-apo-draw-y; }
}
}
@media (prefers-reduced-motion: reduce) { .bb-reading { display: none; } }
/* Leaves never over text (review 2026-11-08: they covered the banner title and paragraphs). In sections they sit in
the side gutters, half off the edge; in banners only on the photo side; with no gutter (< 1300px) they are not shown. */
.bb-layout-apothecary .bb-has-leaves .bb-leaf--a { top: 12%; right: -22px; left: auto; bottom: auto; }
.bb-layout-apothecary .bb-has-leaves .bb-leaf--b { bottom: 10%; left: -22px; right: auto; top: auto; }
.bb-layout-apothecary .bb-has-leaves .bb-leaf--c, .bb-layout-apothecary .bb-banner .bb-leaf--c { display: none; }
.bb-layout-apothecary .bb-banner .bb-leaf--a { top: auto; bottom: 6%; right: 1%; left: auto; width: clamp(56px, 6vw, 84px); }
@media (max-width: 1299px) { .bb-has-leaves .bb-leaves, .bb-banner .bb-leaves { display: none; } }
/* The decorative layer must span the whole band, not the constrained content width WordPress gives to children. */
.bb-layout-apothecary .bb-has-leaves > .bb-leaves, .bb-layout-apothecary .bb-banner .wp-block-cover__inner-container > .bb-leaves { max-width: none !important; margin: 0 !important; width: auto !important; }
.bb-layout-apothecary .bb-banner .wp-block-cover__inner-container { position: static; }
.bb-layout-apothecary .bb-banner .wp-block-cover__inner-container > *:not(.bb-leaves) { position: relative; z-index: 1; }
.bb-layout-apothecary .bb-footer p.bb-footer-title, .bb-layout-apothecary .bb-footer .bb-footer-title { color: #aa5423 !important; }
/* bb-facts title as a real (accessibility: Lighthouse table-fake-caption). */
.bb-facts caption { caption-side: top; text-align: left; font-size: 1.35rem; font-weight: 800; text-transform: uppercase; padding: .7rem 1rem .4rem;
color: var(--wp--preset--color--ink); border: 3px solid var(--wp--preset--color--ink); border-bottom: 10px solid var(--wp--preset--color--ink); background: #fff; }
.bb-layout-apothecary .bb-facts caption { font-size: .82rem; font-weight: 700; letter-spacing: .16em; color: #aa5423; padding: 1.1rem 1rem .6rem;
border: 1px solid var(--wp--preset--color--line); border-bottom: 0;
background: linear-gradient(var(--wp--preset--color--glow), var(--wp--preset--color--glow)) top / 100% 4px no-repeat, #fff; }
.bb-layout-apothecary .bb-facts table { background: linear-gradient(var(--wp--preset--color--glow), var(--wp--preset--color--glow)) bottom / 100% 2px no-repeat, #fff; border-top: 0; }
@keyframes bb-apo-band-top { from { background-size: 0% 4px, auto; } to { background-size: 100% 4px, auto; } }
@keyframes bb-apo-band-bottom { from { background-size: 0% 2px, auto; } to { background-size: 100% 2px, auto; } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
.bb-layout-apothecary .bb-facts caption { animation: bb-apo-band-top linear both; animation-timeline: view(); animation-range: entry 5% cover 25%; }
.bb-layout-apothecary .bb-facts table { animation: bb-apo-band-bottom linear both; animation-timeline: view(); animation-range: entry 40% cover 60%; }
} }
/* The seal is a white sticker (the real logo reads on white; green on black did not convince the user). */
.bb-layout-apothecary .bb-seal circle:first-of-type { fill: #fff; filter: drop-shadow(0 4px 10px rgba(15, 13, 11, .12)); }
/* ===== Apothecary: metallic copper (user, 2026-11-08: "esas líneas doradas se pueden mover con ese efecto
metalizado... no tanto en la imagen"). The copper lines get a foil gradient (dark copper, copper, a pale highlight)
and the highlight runs slowly along them; the banner glint is halved. Only background-position on thin lines is
animated (paint of a few pixels), never layout; static foil when motion is reduced. ===== */
.bb-layout-apothecary { --bb-metal: linear-gradient(100deg, #8a4419 0%, #aa5423 16%, #d9782d 34%, #ffe1b8 50%, #d9782d 66%, #aa5423 84%, #8a4419 100%); }
@keyframes bb-apo-metal { from { background-position: 100% 0; } to { background-position: 0% 0; } }
/* Header double band as one foil strip, masked into a 3px + 1px pair. */
.bb-layout-apothecary .bb-header { box-shadow: none !important; }
.bb-layout-apothecary .bb-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none;
background: var(--bb-metal); background-size: 250% 100%;
-webkit-mask: linear-gradient(#000 0 3px, transparent 3px 5px, #000 5px 6px); mask: linear-gradient(#000 0 3px, transparent 3px 5px, #000 5px 6px); }
.bb-layout-apothecary .bb-section-title::after,
.bb-layout-apothecary .bb-steps-line li:not(:last-child)::after,
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child .wp-block-site-logo::before,
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child .wp-block-site-logo::after,
.bb-layout-apothecary .bb-eyebrow::before { background: var(--bb-metal); background-size: 250% 100%; }
.bb-layout-apothecary .bb-reading { background: var(--bb-metal); background-size: 250% 100%; }
/* Banner base and footer top: static foil instead of a flat gradient. */
.bb-layout-apothecary :is(.bb-hero-split, .bb-hero-cover, .bb-hero-light), .bb-layout-apothecary .bb-footer { border-image-source: var(--bb-metal) !important; }
/* Tables and cards: foil bands (static); on card hover the highlight runs. */
.bb-layout-apothecary .bb-facts caption { background: var(--bb-metal) top / 100% 4px no-repeat, #fff; }
.bb-layout-apothecary .bb-facts table { background: var(--bb-metal) bottom / 100% 2px no-repeat, #fff; }
.bb-layout-apothecary .bb-card-box { background-image: var(--bb-metal), var(--bb-metal); background-size: 250% 4px, 250% 2px; background-position: 50% top, 50% bottom; background-repeat: no-repeat; }
/* Leaves a little further into the gutter (a 4px brush with a title block at 1440px). */
.bb-layout-apothecary .bb-has-leaves .bb-leaf--a { right: -46px; }
.bb-layout-apothecary .bb-has-leaves .bb-leaf--b { left: -46px; }
@media (prefers-reduced-motion: no-preference) {
.bb-layout-apothecary .bb-header::after { animation: bb-apo-metal 7s linear infinite; }
.bb-layout-apothecary .bb-card-box:hover { background-size: 250% 6px, 250% 3px; animation: bb-apo-metal-card 1.4s ease-in-out both; }
.bb-layout-apothecary .bb-banner::after { opacity: .5; }
}
@keyframes bb-apo-metal-card { from { background-position: 100% top, 100% bottom; } to { background-position: 0% top, 0% bottom; } }
/* Lines that draw on scroll also catch the light on scroll: two animations on the same view timeline. */
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
.bb-layout-apothecary .bb-section-title::after { animation: bb-apo-draw linear both, bb-apo-metal linear both; animation-timeline: view(), view();
animation-range: entry 20% cover 35%, entry 0% exit 100%; }
.bb-layout-apothecary .bb-steps-line li:not(:last-child)::after { animation: bb-apo-draw linear both, bb-apo-metal linear both; animation-timeline: view(), view();
animation-range: entry 25% cover 45%, entry 0% exit 100%; }
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child .wp-block-site-logo::before,
.bb-layout-apothecary .bb-footer-cols > .wp-block-column:first-child .wp-block-site-logo::after { animation: bb-apo-draw linear both, bb-apo-metal linear both;
animation-timeline: view(), view(); animation-range: entry 0% cover 30%, entry 0% exit 100%; }
.bb-layout-apothecary .bb-reading { animation: bb-apo-progress linear both, bb-apo-metal linear both; animation-timeline: scroll(root), scroll(root); }
} }
@media (prefers-reduced-motion: no-preference) and (max-width: 781px) { @supports (animation-timeline: view()) {
.bb-layout-apothecary .bb-steps-line li:not(:last-child)::after { animation-name: bb-apo-draw-y, bb-apo-metal; }
} }
/* ===== Xtralife storytelling modules (2026-11-08; user: "explotar lo que tiene la marca, no solo imágenes con
colores o aparecer elementos", after Herbalic's "¿1.000 mg o 250 mg?"). Each module explains something TRUE on the
bottle. CSS only; all text is in the HTML; without animation-timeline / :has() everything shows in its final,
readable state. ===== */
/* The user dislikes the short rule under section titles: gone in apothecary. */
.bb-layout-apothecary .bb-section-title::after { content: none !important; display: none !important; }
/* 1. Read the bottle (bb-tour): the real bottle stays while numbered pins light up with the step you are reading. */
.bb-tour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.bb-tour-stage { position: sticky; top: 110px; }
.bb-tour-bottle { position: relative; margin: 0; max-width: 520px; margin-inline: auto; }
.bb-tour-bottle img { width: 100%; height: auto; display: block; }
.bb-pin { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
display: grid; place-items: center; font: 700 .8rem/1 var(--wp--preset--font-family--body, sans-serif); color: var(--wp--preset--color--ink);
background: #fff; border: 2px solid var(--wp--preset--color--glow); box-shadow: 0 4px 12px rgba(15, 13, 11, .18); }
.bb-tour-steps { list-style: none; margin: 0; padding: 0; counter-reset: tour; }
.bb-tour-steps li { counter-increment: tour; position: relative; padding: 1.4rem 0 1.4rem 3.4rem; border-top: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--muted); }
.bb-tour-steps li::before { content: counter(tour); position: absolute; left: 0; top: 1.3rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
border: 2px solid var(--wp--preset--color--glow); color: var(--wp--preset--color--ink); font-weight: 700; font-size: .85rem; }
.bb-tour-steps strong { display: block; color: var(--wp--preset--color--ink); font-size: 1.1rem; margin-bottom: .25rem; }
@keyframes bb-pin-on { 0%, 100% { transform: scale(1); background: #fff; color: var(--wp--preset--color--ink); box-shadow: 0 4px 12px rgba(15, 13, 11, .18); }
35%, 65% { transform: scale(1.35); background: var(--wp--preset--color--glow); color: #fff; box-shadow: 0 0 0 10px color-mix(in srgb, var(--wp--preset--color--glow) 25%, transparent); } }
@keyframes bb-step-on { 0%, 100% { color: var(--wp--preset--color--muted); } 35%, 65% { color: var(--wp--preset--color--text); } }
@keyframes bb-step-dot { 0%, 100% { background: transparent; color: var(--wp--preset--color--ink); } 35%, 65% { background: var(--wp--preset--color--glow); color: #fff; } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) and (timeline-scope: --a) {
.bb-tour-steps li { animation: bb-step-on linear both; animation-timeline: view(); animation-range: cover 25% cover 75%; }
.bb-tour-steps li::before { animation: bb-step-dot linear both; animation-timeline: view(); animation-range: cover 25% cover 75%; }
.bb-pin { animation: bb-pin-on linear both; animation-range: cover 25% cover 75%; }
} }
@media (max-width: 781px) {
.bb-tour { grid-template-columns: 1fr; }
.bb-tour-stage { top: 64px; z-index: 2; background: var(--wp--preset--color--base); padding-bottom: .5rem; }
.bb-tour-bottle { max-width: 240px; }
.bb-pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: .7rem; }
}
/* 2. Count the tablets (bb-serving): 100 tablets regroup three by three into 33 servings; one is left over. */
.bb-serving { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.bb-serving-figures { display: flex; gap: 2rem; margin: 1.2rem 0; }
.bb-serving-figures div { flex: 1; }
.bb-serving-figures b { display: block; font: 600 clamp(2.4rem, 5vw, 3.6rem)/1 var(--wp--preset--font-family--fraunces, serif); color: var(--wp--preset--color--ink); }
.bb-serving-figures span { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #aa5423; margin-top: .4rem; }
.bb-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; max-width: 420px; margin-inline: auto; view-timeline-name: --serv; }
.bb-dot { aspect-ratio: 1; border-radius: 50%; background: #e7dccb; }
.bb-dot.is-a { background: var(--wp--preset--color--glow); }
.bb-dot.is-b { background: var(--wp--preset--color--primary); }
.bb-dot.is-rest { background: transparent; border: 2px dashed #aa5423; }
.bb-dots-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: center; margin-top: .9rem; font-size: .82rem; color: var(--wp--preset--color--text); }
.bb-dots-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: .35rem; }
@keyframes bb-dot-group { from { background: #e7dccb; transform: scale(.85); } to { transform: scale(1); } }
@keyframes bb-dot-rest { from { border-color: transparent; transform: scale(.85); } to { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
.bb-dot.is-a, .bb-dot.is-b { animation: bb-dot-group linear both; animation-timeline: --serv;
animation-range: cover calc(22% + var(--g) * 1.25%) cover calc(23.5% + var(--g) * 1.25%); }
.bb-dot.is-rest { animation: bb-dot-rest linear both; animation-timeline: --serv; animation-range: cover 64% cover 66%; }
} }
@media (max-width: 781px) { .bb-serving { grid-template-columns: 1fr; } .bb-dots { gap: 5px; max-width: 320px; } }
/* 3. From Florida to Colombia (bb-route): the dashed arc draws itself and a bottle travels along it. */
.bb-route { position: relative; max-width: 760px; margin: 0 auto 1rem; }
.bb-route svg { width: 100%; height: auto; display: block; overflow: visible; }
.bb-route .bb-route-path { fill: none; stroke: var(--wp--preset--color--glow); stroke-width: 2.5; stroke-dasharray: 6 8; }
.bb-route .bb-route-ghost { fill: none; stroke: var(--wp--preset--color--line); stroke-width: 2.5; }
.bb-route circle.bb-route-stop { fill: #fff; stroke: var(--wp--preset--color--ink); stroke-width: 2.5; }
.bb-route text { font: 700 13px/1 var(--wp--preset--font-family--body, sans-serif); fill: var(--wp--preset--color--ink); letter-spacing: .12em; text-transform: uppercase; }
.bb-route text.bb-route-year { font: 600 26px/1 var(--wp--preset--font-family--fraunces, serif); fill: #aa5423; letter-spacing: 0; }
.bb-route-traveler { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff;
border: 2px solid var(--wp--preset--color--glow); display: grid; place-items: center; box-shadow: 0 6px 14px rgba(15, 13, 11, .18);
offset-path: var(--route); offset-rotate: 0deg; offset-distance: 100%; }
.bb-route-traveler img { width: 22px; height: auto; }
@keyframes bb-route-draw { from { stroke-dashoffset: 900; clip-path: inset(0 100% 0 0); } to { stroke-dashoffset: 0; clip-path: inset(0 0 0 0); } }
@keyframes bb-route-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
.bb-route .bb-route-path { animation: bb-route-draw linear both; animation-timeline: --route-tl; animation-range: cover 20% cover 55%; }
.bb-route-traveler { animation: bb-route-travel linear both; animation-timeline: --route-tl; animation-range: cover 20% cover 55%; }
.bb-route { view-timeline-name: --route-tl; }
} }
/* 4. How many products (bb-tier): pick a quantity, the shelf fills with Xtralife-like bottles and the discount
shows. Radios + :has(), no JavaScript; every tier is also written in the text below for readers and crawlers. */
.bb-tier { border: 1px solid var(--wp--preset--color--line); padding: clamp(1.2rem, 3vw, 2rem); background: var(--bb-metal, var(--wp--preset--color--glow)) top / 100% 4px no-repeat, #fff; }
.bb-tier legend { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #aa5423; padding: 0; margin-bottom: .8rem; }
.bb-tier-options { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.bb-tier-options label { cursor: pointer; }
.bb-tier-options input { position: absolute; opacity: 0; pointer-events: none; }
.bb-tier-options span { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--wp--preset--color--line); font-weight: 700; font-size: .9rem; color: var(--wp--preset--color--ink); transition: background .2s, color .2s, border-color .2s; }
.bb-tier-options input:checked + span { background: var(--wp--preset--color--ink); color: #fff; border-color: var(--wp--preset--color--ink); }
.bb-tier-options input:focus-visible + span { outline: 2px solid var(--wp--preset--color--glow); outline-offset: 2px; }
.bb-shelf { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; padding: 0 0 8px; border-bottom: 6px solid #8a6a4a; margin-bottom: 1.2rem; }
.bb-mini { aspect-ratio: 5 / 8; border-radius: 6px 6px 4px 4px; position: relative; background: #0f0d0b; opacity: .12; transform: translateY(6px); transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.bb-mini::before { content: ""; position: absolute; left: 22%; right: 22%; top: -14%; height: 16%; background: #0f0d0b; border-radius: 3px 3px 0 0; }
.bb-mini::after { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 44%;
background: linear-gradient(var(--wp--preset--color--glow) 0 10%, #fff 10% 90%, var(--wp--preset--color--glow) 90%); }
.bb-tier-result { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.bb-tier-result b { font: 600 clamp(2.4rem, 6vw, 3.6rem)/1 var(--wp--preset--font-family--fraunces, serif); color: var(--wp--preset--color--ink); }
.bb-tier-result [data-t] { display: none; }
.bb-tier-result [data-t="12"] { display: inline; } /* static default: the top tier */
.bb-tier:has(input:checked) .bb-tier-result [data-t] { display: none; }
.bb-tier:has(input[value="1"]:checked) .bb-tier-result [data-t="1"],
.bb-tier:has(input[value="4"]:checked) .bb-tier-result [data-t="4"],
.bb-tier:has(input[value="6"]:checked) .bb-tier-result [data-t="6"],
.bb-tier:has(input[value="12"]:checked) .bb-tier-result [data-t="12"] { display: inline; }
.bb-tier .bb-mini { opacity: 1; transform: none; }
.bb-tier:has(input[value="1"]:checked) .bb-mini:nth-child(n+4),
.bb-tier:has(input[value="4"]:checked) .bb-mini:nth-child(n+5),
.bb-tier:has(input[value="6"]:checked) .bb-mini:nth-child(n+7) { opacity: .12; transform: translateY(6px); }
@media (prefers-reduced-motion: no-preference) {
.bb-tier .bb-mini { transition-delay: calc(var(--i) * 25ms); }
}
/* bb-route: the traveller lives inside the SVG (user units), so the path scales with the drawing. */
.bb-route .bb-route-traveler-g { offset-path: var(--route); offset-rotate: 0deg; offset-distance: 100%; }
.bb-route .bb-route-traveler-g circle { fill: #fff; stroke: var(--wp--preset--color--glow); stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
.bb-route .bb-route-traveler-g { animation: bb-route-travel linear both; animation-timeline: --route-tl; animation-range: cover 20% cover 55%; }
} }
/* Mini bottles that read as Xtralife bottles: black body with shoulders, a cap with its clear seal, white label
between two copper bands. */
.bb-mini { border-radius: 38% 38% 12% 12% / 20% 20% 6% 6%; margin-top: 18%; }
.bb-mini::before { left: 26%; right: 26%; top: -16%; height: 15%; border-radius: 2px 2px 0 0; background: linear-gradient(#e9e4dc 0 45%, #0f0d0b 45%); }
.bb-mini::after { left: 6%; right: 6%; top: 34%; height: 42%; border-radius: 1px;
background: linear-gradient(var(--wp--preset--color--glow) 0 12%, #fff 12% 88%, var(--wp--preset--color--glow) 88%); }
.bb-shelf { gap: 8px; padding-top: 10px; }
.bb-layout-apothecary .bb-route { max-width: 900px; }
.bb-layout-apothecary .bb-route text { font-size: 15px; }
.bb-layout-apothecary .bb-route text.bb-route-year { font-size: 32px; }
/* 5. One label for 25 bottles (bb-lineup, home): five real front photos side by side; as you scroll, three guide
lines cross them at the height of the copper band, the sun and the product name. The bands and the sun line up in
every bottle; the name line is dashed because that is the only thing that changes. */
.bb-lineup { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 1.5rem 0 .5rem; }
.bb-lineup img { width: 100%; height: auto; display: block; }
.bb-guide { position: absolute; left: -1%; right: -1%; top: var(--y); height: 2px; transform-origin: left; pointer-events: none; }
.bb-guide span { position: absolute; right: 0; top: -1.6rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
background: #fff; padding: .15rem .45rem; color: var(--g-color); border: 1px solid currentColor; }
.bb-guide--band { background: var(--bb-metal, #d9782d); --g-color: #aa5423; }
.bb-guide--sun { background: var(--wp--preset--color--primary); --g-color: var(--wp--preset--color--primary); }
.bb-guide--name { background: repeating-linear-gradient(90deg, var(--wp--preset--color--ink) 0 8px, transparent 8px 14px); --g-color: var(--wp--preset--color--ink); }
.bb-lineup-caption { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center; font-size: .9rem; color: var(--wp--preset--color--text); }
@keyframes bb-guide-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bb-guide-tag { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
.bb-lineup { view-timeline-name: --lineup; }
.bb-guide { animation: bb-guide-draw linear both; animation-timeline: --lineup; }
.bb-guide span { animation: bb-guide-tag linear both; animation-timeline: --lineup; }
.bb-guide--band { animation-range: cover 20% cover 35%; } .bb-guide--band span { animation-range: cover 33% cover 37%; }
.bb-guide--sun { animation-range: cover 30% cover 45%; } .bb-guide--sun span { animation-range: cover 43% cover 47%; }
.bb-guide--name { animation-range: cover 40% cover 55%; } .bb-guide--name span { animation-range: cover 53% cover 57%; }
} }
@media (max-width: 781px) { .bb-lineup { grid-template-columns: repeat(3, 1fr); } .bb-lineup img:nth-child(n+4) { display: none; }
.bb-guide span { font-size: .6rem; top: -1.35rem; } }
/* 6. Product page: a compact bb-tour ("Así se lee este frasco") with the product's own photo. */
.bb-tour--mini { margin: 0 0 2rem; }
.bb-tour--mini .bb-tour-bottle { max-width: 360px; }
.bb-tour--mini .bb-tour-stage { top: 100px; }
/* bb-tour timelines in the stylesheet, by position (WooCommerce strips timeline properties from inline styles in
product descriptions): pin n follows step n, up to 8. */
.bb-tour { timeline-scope: --t1, --t2, --t3, --t4, --t5, --t6, --t7, --t8; }
.bb-tour-steps li:nth-child(1) { view-timeline-name: --t1; }
.bb-tour-steps li:nth-child(2) { view-timeline-name: --t2; }
.bb-tour-steps li:nth-child(3) { view-timeline-name: --t3; }
.bb-tour-steps li:nth-child(4) { view-timeline-name: --t4; }
.bb-tour-steps li:nth-child(5) { view-timeline-name: --t5; }
.bb-tour-steps li:nth-child(6) { view-timeline-name: --t6; }
.bb-tour-steps li:nth-child(7) { view-timeline-name: --t7; }
.bb-tour-steps li:nth-child(8) { view-timeline-name: --t8; }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) and (timeline-scope: --a) {
.bb-tour .bb-pin:nth-of-type(1) { animation-timeline: --t1; }
.bb-tour .bb-pin:nth-of-type(2) { animation-timeline: --t2; }
.bb-tour .bb-pin:nth-of-type(3) { animation-timeline: --t3; }
.bb-tour .bb-pin:nth-of-type(4) { animation-timeline: --t4; }
.bb-tour .bb-pin:nth-of-type(5) { animation-timeline: --t5; }
.bb-tour .bb-pin:nth-of-type(6) { animation-timeline: --t6; }
.bb-tour .bb-pin:nth-of-type(7) { animation-timeline: --t7; }
.bb-tour .bb-pin:nth-of-type(8) { animation-timeline: --t8; }
} }
.bb-guide--sun span { right: auto; left: 0; top: .5rem; }