/**
* BI Archive Intro v16
*
* Category H1 panel + below-grid About / FAQ / buying guide.
* v9: buying guide drops the wash panel — clean editorial section.
* v10: exclude product_brand archives — those use logo + pill H1 + lede
* (bi-brand-archive-header).
* v11: long FAQ/body copy moves under the product grid; empty header collapses.
* v12: short one-line ledes stay under the H1 in the connected bluish wash
* panel (matches the title chrome). Only long-form FAQ/body splits below.
* v14–v15: category hero experiments (50/50, then inset tile).
* v21: softer scrim so photo reads under the title; CTA not pill.
* v20: full-bleed photo background + text overlay.
* v16–v18: single-panel crossfade experiments.
*/
:root {
--bi-intro-ink: #15212b;
--bi-intro-body: #4b5563;
--bi-intro-muted: #6b7280;
--bi-intro-rule: #e4e8ee;
--bi-intro-wash: #f4f6f8;
--bi-intro-panel: #ffffff;
--bi-intro-link: #004466;
--bi-intro-accent: #3bb54a;
--bi-intro-radius: 10px;
}
/* ---------------------------------------------------------------- header
*
* Shoptimizer prints:
*
*
* as siblings — not H1-inside-header. Style them as one connected panel.
*/
/* H1 is a full panel when the header is empty (no lede / CTA). */
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main#main > h1.woocommerce-products-header__title.page-title,
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main.site-main > h1.woocommerce-products-header__title.page-title {
display: block !important;
margin: 0 0 18px !important;
padding: 18px 20px !important;
background: var(--bi-intro-wash) !important;
border: 1px solid var(--bi-intro-rule) !important;
border-radius: var(--bi-intro-radius) !important;
color: var(--bi-intro-ink);
font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.65rem) !important;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
/* Collapse empty products-header (image-only after long copy was moved). */
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) header.woocommerce-products-header:not(:has(.term-description)):not(:has(.bi-intro__guide-cta)) {
display: none !important;
}
/* Keep header visible when it has a short lede and/or guide CTA. */
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main#main > h1.woocommerce-products-header__title.page-title + header.woocommerce-products-header:has(.term-description),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main.site-main > h1.woocommerce-products-header__title.page-title + header.woocommerce-products-header:has(.term-description),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main#main > h1.woocommerce-products-header__title.page-title + header.woocommerce-products-header:has(.bi-intro__guide-cta),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main.site-main > h1.woocommerce-products-header__title.page-title + header.woocommerce-products-header:has(.bi-intro__guide-cta),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) header.woocommerce-products-header:has(.term-description),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) header.woocommerce-products-header:has(.bi-intro__guide-cta) {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin: 0 0 18px !important;
padding: 10px 20px 18px !important;
background: var(--bi-intro-wash) !important;
border: 1px solid var(--bi-intro-rule) !important;
border-top: 0 !important;
border-radius: 0 0 var(--bi-intro-radius) var(--bi-intro-radius) !important;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main#main > h1.woocommerce-products-header__title.page-title:has(+ header.woocommerce-products-header .term-description),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main.site-main > h1.woocommerce-products-header__title.page-title:has(+ header.woocommerce-products-header .term-description),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main#main > h1.woocommerce-products-header__title.page-title:has(+ header.woocommerce-products-header .bi-intro__guide-cta),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main.site-main > h1.woocommerce-products-header__title.page-title:has(+ header.woocommerce-products-header .bi-intro__guide-cta) {
margin-bottom: 0 !important;
border-bottom: 0 !important;
border-radius: var(--bi-intro-radius) var(--bi-intro-radius) 0 0 !important;
padding-bottom: 6px !important;
}
body.bi-archive-intro:not(.tax-product_brand) .woocommerce-products-header .term-description,
body.bi-archive-intro:not(.tax-product_brand) .woocommerce-products-header .term-description.bi-intro__lede {
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
max-width: 68ch;
font-size: inherit !important;
color: var(--bi-intro-body);
}
body.bi-archive-intro:not(.tax-product_brand) .woocommerce-products-header .term-description p,
body.bi-archive-intro:not(.tax-product_brand) .woocommerce-products-header .term-description.bi-intro__lede p {
margin: 0;
color: var(--bi-intro-body);
font-size: 0.9375rem;
line-height: 1.6;
}
/* Buying-guide CTA (controllers cats via bi-internal-links). */
body.bi-archive-intro .bi-intro__guide-cta,
.bi-intro__guide-cta {
display: block;
margin: 6px 0 0;
padding: 10px 12px;
max-width: 42rem;
box-sizing: border-box;
background: var(--bi-intro-panel);
border: 1px solid var(--bi-intro-rule);
border-radius: 8px;
color: var(--bi-intro-body);
font-size: 0.8125rem;
line-height: 1.45;
box-shadow: none;
}
body.bi-archive-intro .bi-intro__guide-cta strong,
.bi-intro__guide-cta strong {
color: var(--bi-intro-ink);
font-weight: 600;
}
body.bi-archive-intro .bi-intro__guide-cta a,
.bi-intro__guide-cta a {
color: var(--bi-intro-link);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
}
body.bi-archive-intro .bi-intro__guide-cta a:hover,
.bi-intro__guide-cta a:hover {
color: #00334d;
border-bottom-color: currentColor;
}
/* 800×800 category image crowds the header (non-hero archives). */
body.bi-archive-intro:not(.bi-cat-hero) header.woocommerce-products-header .cg-cat-image {
display: none !important;
}
/* ---------------------------------------------------------------- Category hero
*
* Full-bleed photo as the panel background; title/lede/CTA overlay on the left
* with a soft left→right scrim for readability. One box only.
* Opt-in per category via term meta bi_archive_hero_id.
*/
body.bi-cat-hero:not(.tax-product_brand) main#main > h1.woocommerce-products-header__title.page-title,
body.bi-cat-hero:not(.tax-product_brand) main.site-main > h1.woocommerce-products-header__title.page-title {
display: none !important;
}
body.bi-cat-hero:not(.tax-product_brand) header.woocommerce-products-header,
body.bi-cat-hero:not(.tax-product_brand) header.woocommerce-products-header:has(.term-description),
body.bi-cat-hero:not(.tax-product_brand) header.woocommerce-products-header:has(.bi-intro__guide-cta),
body.bi-cat-hero:not(.tax-product_brand) header.woocommerce-products-header:has(.bi-cat-banner),
body.bi-cat-hero:not(.tax-product_brand) main#main > h1.woocommerce-products-header__title.page-title + header.woocommerce-products-header,
body.bi-cat-hero:not(.tax-product_brand) main.site-main > h1.woocommerce-products-header__title.page-title + header.woocommerce-products-header {
display: block !important;
margin: 0 0 18px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 100%;
max-width: 100%;
overflow: visible;
}
body.bi-cat-hero .bi-cat-banner {
position: relative;
display: block;
overflow: hidden;
isolation: isolate;
background: #1a222c;
border: 1px solid var(--bi-intro-rule);
border-radius: var(--bi-intro-radius);
box-sizing: border-box;
padding: 0;
min-height: 190px;
}
/* Photo fills the whole panel behind the copy. */
body.bi-cat-hero .bi-cat-banner__media {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
min-height: 0;
background: #1a222c;
border-radius: 0;
box-shadow: none;
overflow: hidden;
}
body.bi-cat-hero .bi-cat-banner__img {
position: absolute;
inset: 0;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: 70% center;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Soft scrim so title/lede stay readable over any photo. */
body.bi-cat-hero .bi-cat-banner__media::before {
content: "";
display: block;
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(16, 24, 32, 0.72) 0%,
rgba(16, 24, 32, 0.55) 32%,
rgba(16, 24, 32, 0.28) 58%,
rgba(16, 24, 32, 0.08) 78%,
rgba(16, 24, 32, 0) 100%
);
}
body.bi-cat-hero .bi-cat-banner__copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
padding: 22px 28px;
min-width: 0;
max-width: min(36rem, 72%);
box-sizing: border-box;
}
body.bi-cat-hero .bi-cat-banner__title,
body.bi-cat-hero .bi-cat-banner h1.woocommerce-products-header__title {
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
color: #ffffff;
font-size: clamp(1.4rem, 1.15rem + 0.7vw, 1.85rem) !important;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
width: auto;
max-width: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
body.bi-cat-hero .bi-cat-banner__lede,
body.bi-cat-hero .bi-cat-banner .term-description {
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
max-width: 42ch;
}
body.bi-cat-hero .bi-cat-banner__lede p,
body.bi-cat-hero .bi-cat-banner .term-description p {
margin: 0;
color: rgba(255, 255, 255, 0.88);
font-size: 0.9375rem;
line-height: 1.55;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
body.bi-cat-hero .bi-cat-banner .bi-intro__guide-cta {
margin-top: 4px;
align-self: flex-start;
max-width: 100%;
background: rgba(255, 255, 255, 0.94);
border-color: rgba(255, 255, 255, 0.55);
border-radius: 8px;
color: var(--bi-intro-body);
box-shadow: none;
}
body.bi-cat-hero .bi-cat-banner .bi-intro__guide-cta a {
color: var(--bi-intro-link);
}
@media (max-width: 992px) {
/* Beat Additional CSS that hides the whole products-header on mobile. */
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main#main > h1.woocommerce-products-header__title.page-title,
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main.site-main > h1.woocommerce-products-header__title.page-title {
display: block !important;
}
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) header.woocommerce-products-header:not(:has(.term-description)):not(:has(.bi-intro__guide-cta)) {
display: none !important;
}
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main#main > h1.woocommerce-products-header__title.page-title + header.woocommerce-products-header:has(.term-description),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main.site-main > h1.woocommerce-products-header__title.page-title + header.woocommerce-products-header:has(.term-description),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main#main > h1.woocommerce-products-header__title.page-title + header.woocommerce-products-header:has(.bi-intro__guide-cta),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) main.site-main > h1.woocommerce-products-header__title.page-title + header.woocommerce-products-header:has(.bi-intro__guide-cta),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) header.woocommerce-products-header:has(.term-description),
body.bi-archive-intro:not(.tax-product_brand):not(.bi-cat-hero) header.woocommerce-products-header:has(.bi-intro__guide-cta) {
display: flex !important;
}
body.bi-cat-hero .bi-cat-banner {
min-height: 156px;
}
body.bi-cat-hero .bi-cat-banner__copy {
padding: 18px 16px;
max-width: min(34rem, 88%);
}
body.bi-cat-hero .bi-cat-banner__media::before {
background: linear-gradient(
90deg,
rgba(16, 24, 32, 0.75) 0%,
rgba(16, 24, 32, 0.55) 42%,
rgba(16, 24, 32, 0.25) 72%,
rgba(16, 24, 32, 0.06) 100%
);
}
body.bi-cat-hero .bi-cat-banner__title,
body.bi-cat-hero .bi-cat-banner h1.woocommerce-products-header__title {
max-width: none;
font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem) !important;
}
}
@media (max-width: 480px) {
body.bi-cat-hero .bi-cat-banner {
min-height: 148px;
}
body.bi-cat-hero .bi-cat-banner__copy {
padding: 16px 14px;
max-width: 92%;
}
body.bi-cat-hero .bi-cat-banner__media::before {
background: linear-gradient(
180deg,
rgba(16, 24, 32, 0.78) 0%,
rgba(16, 24, 32, 0.55) 55%,
rgba(16, 24, 32, 0.28) 100%
);
}
}
/* Compact About block for short one-line category descriptions (legacy). */
.bi-faq--lede-only .bi-faq__title {
font-size: 1.15rem;
}
.bi-faq--lede-only .bi-faq__intro {
margin: 0;
}
.bi-faq--lede-only .bi-faq__intro p {
margin: 0;
color: var(--bi-intro-body);
font-size: 0.975rem;
line-height: 1.65;
}
/* --------------------------------------------- shared long-form sections */
body.bi-archive-intro .shoptimizer-sorting.sorting-end {
flex-wrap: wrap;
}
.bi-faq,
body.bi-archive-intro .woo-buying-guide-wrap {
clear: both;
display: block;
flex: 1 1 100%;
order: 99;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
margin: 28px 0 0;
padding: 0;
border: 0;
}
body.bi-archive-intro .woo-buying-guide-wrap {
order: 100;
}
/* --------------------------------------------------------------- the FAQ */
.bi-faq__inner {
max-width: 100%;
margin: 0;
padding: 22px 24px 8px;
background: var(--bi-intro-wash);
border: 1px solid var(--bi-intro-rule);
border-radius: var(--bi-intro-radius);
box-sizing: border-box;
}
.bi-faq__title,
body.bi-archive-intro .woo-buying-guide__title {
margin: 0 0 14px !important;
padding: 0 0 12px !important;
color: var(--bi-intro-ink);
font-size: 1.0625rem !important;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.015em;
border-bottom: 2px solid var(--bi-intro-accent);
display: inline-block;
width: auto;
max-width: 100%;
}
.bi-faq__intro {
margin: 0 0 16px;
max-width: 72ch;
color: var(--bi-intro-body);
font-size: 0.9375rem;
line-height: 1.6;
}
.bi-faq__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
@media (min-width: 860px) {
.bi-faq__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 28px;
}
}
.bi-faq__item {
background: var(--bi-intro-panel);
border: 1px solid var(--bi-intro-rule);
border-radius: 8px;
padding: 14px 16px;
margin: 0 0 12px;
}
.bi-faq__q {
margin: 0 0 6px;
color: var(--bi-intro-ink);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.4;
}
.bi-faq__a {
margin: 0;
color: var(--bi-intro-body);
font-size: 0.875rem;
line-height: 1.6;
}
.bi-faq__a a {
color: var(--bi-intro-link);
font-weight: 500;
}
/* -------------------------------------------------------- buying guide
*
* No wash / tan box — reads as an editorial section under the grid
* (same quiet treatment as the brand archive lede).
*/
body.bi-archive-intro .woo-buying-guide {
background: transparent !important;
border: 0 !important;
border-top: 1px solid var(--bi-intro-rule) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 28px 0 4px !important;
margin: 0 !important;
max-width: 100% !important;
font-size: 1rem !important;
box-sizing: border-box !important;
}
body.bi-archive-intro .woo-buying-guide p {
margin: 0 0 14px;
max-width: 70ch;
color: var(--bi-intro-body);
font-size: 0.9375rem !important;
line-height: 1.65;
}
body.bi-archive-intro .woo-buying-guide p strong {
color: var(--bi-intro-ink);
font-weight: 600;
}
body.bi-archive-intro .woo-buying-guide__subtitle {
margin: 20px 0 14px;
padding: 0;
color: var(--bi-intro-ink);
font-size: 0.9375rem !important;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
}
body.bi-archive-intro .woo-buying-guide__list {
display: grid;
grid-template-columns: 1fr;
column-gap: 28px;
row-gap: 12px;
margin: 0 0 16px;
padding: 0;
list-style: none;
max-width: 78ch;
}
@media (min-width: 860px) {
body.bi-archive-intro .woo-buying-guide__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
body.bi-archive-intro .woo-buying-guide__list li {
position: relative;
margin: 0;
padding: 0 0 0 22px;
color: var(--bi-intro-body);
font-size: 0.875rem !important;
line-height: 1.55;
list-style: none;
background: transparent;
border: 0;
border-radius: 0;
}
body.bi-archive-intro .woo-buying-guide__list li::before {
content: "";
position: absolute;
top: 0.45em;
left: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bi-intro-accent);
box-shadow: none;
}
body.bi-archive-intro .woo-buying-guide__list li strong {
color: var(--bi-intro-ink);
font-weight: 600;
}
/* --------------------------------------------------------------- mobile */
@media (max-width: 600px) {
body.bi-archive-intro:not(.tax-product_brand) main#main > h1.woocommerce-products-header__title.page-title,
body.bi-archive-intro:not(.tax-product_brand) main.site-main > h1.woocommerce-products-header__title.page-title {
padding: 14px 14px 4px !important;
}
body.bi-archive-intro:not(.tax-product_brand) main#main > h1.woocommerce-products-header__title.page-title + header.woocommerce-products-header,
body.bi-archive-intro:not(.tax-product_brand) header.woocommerce-products-header {
padding: 8px 14px 14px !important;
}
.bi-faq__inner {
padding: 16px !important;
}
body.bi-archive-intro .woo-buying-guide {
padding: 22px 0 4px !important;
}
.bi-faq,
body.bi-archive-intro .woo-buying-guide-wrap {
margin-top: 22px;
}
body.bi-archive-intro .bi-intro__guide-cta,
.bi-intro__guide-cta {
border-radius: 8px;
padding: 10px 12px;
}
}