/* Closed palette shared by homepage blocks. Aliases retain the root dark tokens
   when a future dark block is nested inside a white section. */
:root {
    --bbr-block-dark-text: var(--bbr-text);
    --bbr-block-dark-muted: var(--bbr-muted);
    --bbr-block-dark-border: var(--bbr-border);
    --bbr-block-dark-control-border: var(--bbr-control-border);
}
.bbr-block-background {
    color-scheme: dark;
    --bbr-text: var(--bbr-block-dark-text);
    --bbr-muted: var(--bbr-block-dark-muted);
    --bbr-border: var(--bbr-block-dark-border);
    --bbr-control-border: var(--bbr-block-dark-control-border);
    --bbr-link: var(--bbr-text);
    --bbr-focus: var(--bbr-brand);
    --bbr-block-accent: var(--bbr-brand);
    --bbr-block-tile: var(--bbr-chrome);
    --bbr-block-tile-hover: var(--bbr-surface-raised);
    --bbr-block-logo-filter: brightness(0) invert(1);
    color: var(--bbr-text);
    background: var(--bbr-block-background);
}
.bbr-block-background--background { --bbr-block-background: var(--bbr-bg); }
.bbr-block-background--surface { --bbr-block-background: var(--bbr-surface); }
.bbr-block-background--raised { --bbr-block-background: var(--bbr-surface-raised); }
.bbr-block-background--white {
    color-scheme: light;
    --bbr-block-background: var(--bbr-light-surface);
    --bbr-text: var(--bbr-on-light);
    --bbr-muted: var(--bbr-muted-on-light);
    --bbr-border: var(--bbr-border-on-light);
    --bbr-control-border: var(--bbr-border-on-light);
    --bbr-focus: var(--bbr-on-light);
    --bbr-block-accent: var(--bbr-on-light);
    --bbr-block-tile: var(--bbr-light-bg);
    --bbr-block-tile-hover: var(--bbr-light-surface);
    --bbr-block-logo-filter: brightness(0);
}

/* Shared geometry and original DS icon shapes for the composed homepage blocks. */
.bbr-block-container { width: min(100% - var(--bbr-gutter) * 2,var(--bbr-container)); margin-inline: auto; }
.bbr-home-section { padding-block: var(--bbr-space-16); }
.bbr-block-icon { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; background: currentColor; mask: var(--bbr-block-icon) center / contain no-repeat; }
.bbr-block-icon--motocross-detail { --bbr-block-icon: url('../images/BBR-icon-motocross-detail.svg'); }
.bbr-block-icon--motocross-configurator { --bbr-block-icon: url('../images/BBR-icon-motocross-configurator.svg'); }
.bbr-block-icon--racing { --bbr-block-icon: url('../images/BBR-icon-racing.svg'); }
.bbr-block-icon--shipping { --bbr-block-icon: url('../images/BBR-icon-shipping.svg'); }
.bbr-block-icon--payments { --bbr-block-icon: url('../images/BBR-icon-payments.svg'); }
.bbr-block-icon--assistance { --bbr-block-icon: url('../images/BBR-icon-assistance.svg'); }
.bbr-block-icon--hd { --bbr-block-icon: url('../images/BBR-icon-hd.svg'); }
.bbr-block-icon--shield { --bbr-block-icon: url('../images/BBR-icon-shield.svg'); }
.bbr-block-icon--italy { --bbr-block-icon: url('../images/BBR-icon-italy.svg'); }
.bbr-block-icon--compatibility { --bbr-block-icon: url('../images/BBR-icon-compatibility.svg'); }
.bbr-block-icon--search { --bbr-block-icon: url('../images/Cerca-5.svg'); }
.bbr-block-icon.bbr-arrow { width:18px; height:18px; background:none; mask:none; fill:currentColor; stroke:none; vertical-align:middle; }
.bbr-block-background .bbr-home-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--bbr-control-height); padding: var(--bbr-space-3) var(--bbr-space-5); border: 1px solid transparent; border-radius: var(--bbr-radius-sm); background: var(--bbr-brand); color: #080d0e; font-size: var(--bbr-text-sm); font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; transition: background var(--bbr-duration); overflow-wrap: anywhere; }
.bbr-home-button .bbr-block-icon { width: 18px; height: 18px; }
.bbr-block-background a.bbr-home-button:hover { background: var(--bbr-brand-hover); color: #080d0e; text-decoration: none; }
.bbr-home-button[aria-disabled] { cursor: default; }

/* .home-paths: one or two editable paths, with fixed DS sizes. */
.home-paths { padding-block: var(--bbr-space-10); border-bottom: 1px solid var(--bbr-border); }
.home-path-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.home-path-grid--1 { grid-template-columns: minmax(0,1fr); }
.home-path-grid article { display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: var(--bbr-space-8); min-width: 0; overflow-wrap: anywhere; }
.home-path-grid article + article { border-left: 1px solid var(--bbr-border); }
.home-path-grid article > .bbr-block-icon { width: 72px; height: 72px; margin-bottom: var(--bbr-space-4); color: var(--bbr-block-accent); }
.home-path-grid h2 { font-size: var(--bbr-text-xl); line-height: var(--bbr-leading-heading); letter-spacing: -.02em; margin: 0 0 var(--bbr-space-3); }
.home-path-grid p { color: var(--bbr-muted); max-width: 28rem; margin: 0 0 var(--bbr-space-5); }
.home-path-grid .bbr-home-button { margin-top: auto; max-width: 100%; }

/* .home-discovery: six/four/three columns and monochrome logos. */
.home-discovery > .bbr-block-container { border-top: 1px solid var(--bbr-border); }
.home-discovery .section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--bbr-space-6); margin-bottom: var(--bbr-space-6); }
.home-discovery h2, .home-audience-heading h2 { font-size: var(--bbr-text-xl); line-height: var(--bbr-leading-heading); letter-spacing: -.02em; margin: 0 0 var(--bbr-space-4); }
.home-discovery .section-heading h2::before { content: ""; display: block; width: var(--bbr-space-12); height: var(--bbr-space-1); background: var(--bbr-block-accent); margin-bottom: var(--bbr-space-4); }
.home-discovery .brand-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--bbr-space-3); }
.home-discovery .brand-tile { display: block; align-content: center; min-width: 0; min-height: 88px; padding: var(--bbr-space-3); border: 1px solid transparent; border-radius: var(--bbr-radius-md); background: var(--bbr-block-tile); color: var(--bbr-text); font: inherit; font-weight: 700; text-align: center; text-decoration: none; }
.home-discovery a.brand-tile:hover { background: var(--bbr-block-tile-hover); border-color: var(--bbr-brand); color: var(--bbr-text); text-decoration: none; }
.home-discovery .brand-tile img { max-width: 100%; width: 120px; height: 48px; object-fit: contain; filter: var(--bbr-block-logo-filter); }
.home-discovery .bbr-brand-name { overflow-wrap: anywhere; text-transform: uppercase; }

/* .home-audience: always two photo cards; copy may grow without clipping. */
.home-audience-heading { margin-bottom: var(--bbr-space-5); }
.home-audience .home-audience-heading h2 { color: var(--bbr-block-accent); margin-bottom: var(--bbr-space-2); }
.home-audience-heading p { color: var(--bbr-muted); margin: 0; }
.home-audience .audience-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--bbr-space-4); align-items: stretch; }
.home-audience .audience-grid article { position: relative; isolation: isolate; min-width: 0; min-height: 420px; height: auto; background: var(--bbr-block-background); border: 1px solid var(--bbr-border); border-radius: var(--bbr-radius-lg); overflow: hidden; }
.home-audience .audience-grid img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 68% center; z-index: -2; }
.home-audience .audience-grid article::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,color-mix(in srgb,var(--bbr-block-background) 98%,transparent) 0%,color-mix(in srgb,var(--bbr-block-background) 94%,transparent) 38%,color-mix(in srgb,var(--bbr-block-background) 75%,transparent) 66%,color-mix(in srgb,var(--bbr-block-background) 10%,transparent) 100%); }
.home-audience .audience-card-content { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 74%; min-height: 420px; padding: var(--bbr-space-6); color: var(--bbr-text); overflow-wrap: anywhere; }
.home-audience .audience-label { display: inline-block; border: 1px solid var(--bbr-control-border); border-radius: 999px; padding: var(--bbr-space-1) var(--bbr-space-3); font-size: var(--bbr-text-xs); line-height: 1.3; font-weight: 700; margin-bottom: var(--bbr-space-3); }
.home-audience h3 { font-size: var(--bbr-text-2xl); line-height: 1.15; margin: 0 0 var(--bbr-space-4); }
.home-audience .audience-card-content p { font-size: var(--bbr-text-sm); line-height: 1.55; margin: 0 0 var(--bbr-space-5); }
.home-audience .audience-card-content .bbr-home-button { margin-top: auto; min-width: 10rem; max-width: 100%; justify-content: space-between; }
@media(max-width:1100px) {
    .home-discovery .brand-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .home-audience .audience-card-content { width: 88%; }
}
@media(max-width:760px) {
    .bbr-home-section { padding-block: var(--bbr-space-8); }
    .home-path-grid { grid-template-columns: minmax(0,1fr); gap: var(--bbr-space-8); }
    .home-path-grid article { padding-inline: 0; }
    .home-path-grid article + article { border-left: 0; border-top: 1px solid var(--bbr-border); padding-top: var(--bbr-space-8); }
    .home-path-grid article > .bbr-block-icon { width: 64px; height: 64px; }
    .home-discovery .section-heading { display: block; }
    .home-discovery .brand-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--bbr-space-2); }
    .home-discovery .brand-tile { min-height: 76px; font-size: var(--bbr-text-sm); }
    .home-discovery .brand-tile img { height: 40px; }
    .home-audience .audience-grid { grid-template-columns: minmax(0,1fr); }
    .home-audience .audience-grid article, .home-audience .audience-card-content { min-height: 380px; }
    .home-audience .audience-card-content { width: 100%; padding: var(--bbr-space-5); }
    .home-audience .audience-grid article::before { background: linear-gradient(90deg,color-mix(in srgb,var(--bbr-block-background) 96%,transparent),color-mix(in srgb,var(--bbr-block-background) 82%,transparent)); }
    .home-audience h3 { font-size: var(--bbr-text-xl); }
}
@media(prefers-reduced-motion:reduce) { .bbr-home-button { transition: none; } }

/* .home-range: manually curated product categories, with fixed DS geometry. */
.home-range-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bbr-space-6); margin-bottom: var(--bbr-space-4); }
.home-range-heading h2 { margin: 0; font-size: var(--bbr-text-xl); line-height: var(--bbr-leading-heading); letter-spacing: -.02em; }
.home-range-heading h2::before { content: ""; display: block; width: var(--bbr-space-12); height: var(--bbr-space-1); margin-bottom: var(--bbr-space-4); background: var(--bbr-block-accent); }
.home-range-description { color: var(--bbr-muted); font-size: var(--bbr-text-sm); line-height: 1.4; }
.home-range-description p { margin: 0 0 var(--bbr-space-2); }
.home-range-controls { display: flex; justify-content: flex-end; gap: var(--bbr-space-2); margin-bottom: var(--bbr-space-3); }
.home-range-controls[hidden] { display: none; }
.home-range-controls button { display: inline-flex; align-items: center; justify-content: center; width: var(--bbr-target-min); height: var(--bbr-target-min); min-height: 0; padding: 1px 6px; background: transparent; border: 1px solid var(--bbr-control-border); border-radius: var(--bbr-radius-sm); color: var(--bbr-block-accent); flex-shrink: 0; }
.home-range-controls button:hover { background: #77777718; }
.home-range-controls button:disabled { opacity: .5; cursor: not-allowed; }
.home-range .category-carousel { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * var(--bbr-space-4)) / 5.5); gap: var(--bbr-space-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bbr-space-1); padding: var(--bbr-space-1) var(--bbr-space-1) var(--bbr-space-4); scrollbar-width: none; }
.home-range .category-carousel::-webkit-scrollbar { display: none; }
.home-range .category-tile { display: flex; flex-direction: column; gap: 0; padding: 0; scroll-snap-align: start; align-items: stretch; min-width: 0; border: 1px solid var(--bbr-border); border-radius: var(--bbr-radius-md); overflow: hidden; background: var(--bbr-surface); color: var(--bbr-text); text-decoration: none; }
.home-range.bbr-block-background--white .category-tile { background: var(--bbr-light-bg); }
.home-range a.category-tile:hover { border-color: var(--bbr-brand); background: var(--bbr-surface-raised); color: var(--bbr-block-accent); }
.home-range.bbr-block-background--white a.category-tile:hover { background: var(--bbr-light-surface); border-color: var(--bbr-on-light); }
.home-range .category-tile > img { width: 100%; margin: 0; aspect-ratio: 16/11; object-fit: cover; }
.home-range .category-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--bbr-space-2); padding: var(--bbr-space-3); min-height: 5rem; flex: 1; }
.home-range .category-tile h3 { margin: 0; font-size: var(--bbr-text-sm); line-height: 1.35; overflow-wrap: anywhere; }
.home-range .category-card-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--bbr-radius-sm); background: var(--bbr-brand); }
.home-range .category-card-arrow .bbr-block-icon { width: 18px; height: 18px; color: #000; }
/* Grid variant shares the range cards, without carousel behavior. */
.home-category-grid { --bbr-category-columns: 3; }
.home-category-grid--2 { --bbr-category-columns: 2; }
.home-category-grid--4 { --bbr-category-columns: 4; }
.home-category-grid > .bbr-block-container > .category-grid { display: grid; grid-template-columns: repeat(var(--bbr-category-columns), minmax(0, 1fr)); gap: var(--bbr-space-4); }
.home-category-grid .category-tile { aspect-ratio: 4/3; }
.home-category-grid .category-tile > img { height: 0; min-height: 0; flex: 1 1 auto; aspect-ratio: auto; }
.home-category-grid .category-card-footer { flex: 0 0 auto; }
.home-category-grid .category-tile h3 { font-size: var(--bbr-text-lg); }
@media(max-width:1100px) { .home-category-grid { --bbr-category-columns: 2; } }
@media(max-width:767px) { .home-category-grid { --bbr-category-columns: 1; } }
@media(max-width:1100px) { .home-range .category-carousel { grid-auto-columns: calc((100% - 2 * var(--bbr-space-4)) / 3.25); } }
@media(max-width:760px) {
    .home-range-heading { flex-direction: column; gap: var(--bbr-space-2); }
    .home-range .category-carousel { grid-auto-columns: calc((100% - var(--bbr-space-3)) / 1.35); gap: var(--bbr-space-3); }
}

/* .home-editorial: DS photograph, copy and four fixed navigation slots. */
.bbr-home-outline-icon { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.home-editorial { padding-block: var(--bbr-space-16); border-block: 1px solid var(--bbr-border); }
.home-editorial .company-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,2fr); align-items: center; gap: var(--bbr-space-10); }
.home-editorial .company-photo { width: 100%; height: 320px; object-fit: cover; border: 1px solid var(--bbr-border); border-radius: var(--bbr-radius-md); }
.home-editorial .company-content { min-width: 0; overflow-wrap: anywhere; }
.home-editorial h2, .home-catalog-section h2 { font-size: var(--bbr-text-xl); line-height: var(--bbr-leading-heading); letter-spacing: -.02em; margin: 0 0 var(--bbr-space-4); }
.home-editorial .company-content h2 { color: var(--bbr-block-accent); }
.home-editorial .company-content > p { color: var(--bbr-muted); line-height: 1.65; margin: 0 0 var(--bbr-space-3); }
.home-editorial .editorial-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--bbr-space-3); margin-top: var(--bbr-space-6); align-content: stretch; }
.home-editorial .company-link { display: flex; align-items: center; justify-content: flex-start; gap: var(--bbr-space-3); min-width: 0; min-height: 76px; padding: var(--bbr-space-4); background: var(--bbr-surface); border: 1px solid var(--bbr-border); color: var(--bbr-text); border-radius: var(--bbr-radius-md); font-size: var(--bbr-text-sm); font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; transition: background var(--bbr-duration); }
.home-editorial .company-link > :is(.bbr-home-outline-icon,.bbr-company-icon) { width: 32px; height: 32px; }
.home-editorial .company-link > .bbr-block-icon { margin-left: auto; width: 18px; height: 18px; }
.home-editorial .bbr-company-icon { object-fit: contain; filter: var(--bbr-block-logo-filter); }
.home-editorial a.company-link:hover { background: var(--bbr-surface-raised); border-color: var(--bbr-brand); }
.home-editorial.bbr-block-background--white .company-link { background: var(--bbr-light-bg); }
.home-editorial.bbr-block-background--white a.company-link:hover { background: var(--bbr-light-surface); border-color: var(--bbr-on-light); }
.home-editorial .company-layout--no-image { grid-template-columns: minmax(0,1fr); }

.bbr-catalog-icon { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; background: currentColor; mask: var(--bbr-catalog-icon) center / contain no-repeat; }
.bbr-catalog-icon--pdf { --bbr-catalog-icon: url('../images/BBR-icon-pdf.svg'); }
.bbr-catalog-icon--catalogue { --bbr-catalog-icon: url('../images/BBR-icon-catalogue.svg'); }

/* .home-catalog-section: introduction, two fixed actions and editable cover. */
.home-catalog-section { padding-block: var(--bbr-space-10); border-block: 1px solid var(--bbr-border); }
.home-catalog-section .catalog-promo { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr); align-items: center; gap: var(--bbr-space-6); min-height: 240px; }
.home-catalog-section .catalog-intro { min-width: 0; padding-right: var(--bbr-space-6); border-right: 1px solid var(--bbr-border); overflow-wrap: anywhere; }
.home-catalog-section .catalog-intro p { font-size: var(--bbr-text-sm); line-height: 1.65; color: var(--bbr-muted); margin: 0; }
.home-catalog-section .catalog-intro p + p { margin-top: var(--bbr-space-3); }
.home-catalog-section .catalog-action { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: var(--bbr-space-3); min-height: 172px; }
.home-catalog-section .catalog-action > .bbr-catalog-icon { width: 32px; height: 32px; }
.home-catalog-section .catalog-action-body { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.home-catalog-section .catalog-action h3 { font-size: var(--bbr-text-sm); line-height: 1.4; margin: 0 0 var(--bbr-space-2); }
.home-catalog-section .catalog-action p { color: var(--bbr-muted); font-size: var(--bbr-text-sm); line-height: 1.5; margin: 0 0 var(--bbr-space-5); }
.home-catalog-section .catalog-action .bbr-home-button { justify-content: space-between; gap: var(--bbr-space-3); margin-top: auto; max-width: 100%; }
.home-catalog-section .catalog-cover { width: 100%; height: 248px; object-fit: contain; }
.home-catalog-section .catalog-promo--no-cover { grid-template-columns: minmax(0,1.35fr) repeat(2,minmax(0,1fr)); }
@media(max-width:1100px) {
    .home-editorial .company-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: var(--bbr-space-6); }
    .home-editorial .company-layout--no-image { grid-template-columns: minmax(0,1fr); }
    .home-editorial .editorial-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home-catalog-section .catalog-promo { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--bbr-space-8); }
    .home-catalog-section .catalog-intro { grid-column: 1; grid-row: 1; border-right: 0; padding-right: 0; }
    .home-catalog-section .catalog-cover { grid-column: 2; grid-row: 1; height: 220px; }
    .home-catalog-section .catalog-action { grid-row: 2; }
    .home-catalog-section .catalog-promo--no-cover .catalog-intro { grid-column: 1 / -1; }
}
@media(max-width:760px) {
    .home-editorial { padding-block: var(--bbr-space-10); }
    .home-editorial .company-layout { grid-template-columns: minmax(0,1fr); }
    .home-editorial .company-photo { height: 260px; }
    .home-editorial .company-link { gap: var(--bbr-space-2); padding: var(--bbr-space-3); min-height: 64px; }
    .home-editorial .company-link > :is(.bbr-home-outline-icon,.bbr-company-icon) { width: 24px; height: 24px; }
    .home-catalog-section .catalog-promo { grid-template-columns: minmax(0,1fr); gap: var(--bbr-space-6); }
    .home-catalog-section .catalog-intro { grid-column: auto; grid-row: auto; }
    .home-catalog-section .catalog-action { grid-row: auto; min-height: 0; border-top: 1px solid var(--bbr-border); padding-top: var(--bbr-space-6); }
    .home-catalog-section .catalog-cover { grid-column: auto; grid-row: auto; height: 240px; margin-top: var(--bbr-space-2); }
}
@media(prefers-reduced-motion:reduce) { .home-editorial .company-link { transition: none; } }

/* Homepage FAQ: native disclosures, independent from product/category ACF FAQ. */
.home-faq .eyebrow { color: var(--bbr-text); font-size: var(--bbr-text-xs); font-weight: 700; letter-spacing: .055em; text-transform: uppercase; margin: 0 0 var(--bbr-space-3); }
.home-faq h2, .article-recommendations h2 { font-size: var(--bbr-text-xl); line-height: var(--bbr-leading-heading); letter-spacing: -.02em; margin: 0 0 var(--bbr-space-4); }
.home-faq h2::before, .article-recommendations h2::before { content: ""; display: block; width: var(--bbr-space-12); height: var(--bbr-space-1); margin-bottom: var(--bbr-space-4); background: var(--bbr-block-accent); }
.home-faq .faq-list { margin-top: var(--bbr-space-6); }
.home-faq details { padding: var(--bbr-space-5); background: var(--bbr-surface); border: 1px solid var(--bbr-border); border-radius: var(--bbr-radius-md); margin-bottom: var(--bbr-space-3); overflow-wrap: anywhere; }
.home-faq.bbr-block-background--white details { background: var(--bbr-light-bg); }
.home-faq summary { cursor: pointer; min-height: var(--bbr-target-min); align-content: center; font-weight: 700; padding: var(--bbr-space-5); margin: calc(-1 * var(--bbr-space-5)); border-radius: var(--bbr-radius-md); background: var(--bbr-header-gradient); }
.home-faq details[open] summary { margin-bottom: 0; border-radius: var(--bbr-radius-md) var(--bbr-radius-md) 0 0; border-bottom: 1px solid var(--bbr-border); }
.home-faq.bbr-block-background--white summary { background: linear-gradient(to bottom,var(--bbr-light-bg),var(--bbr-light-surface)); }
.home-faq .faq-list p { color: var(--bbr-muted); margin: var(--bbr-space-4) 0 0; }

/* Reusable article card and the high fidelity homepage article carousel. */
.article-recommendations .section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--bbr-space-6); margin-bottom: var(--bbr-space-6); }
.article-recommendations .section-heading > div { min-width: 0; }
.article-recommendations .section-heading h2 { margin-bottom: var(--bbr-space-3); }
.article-recommendations .section-heading p { color: var(--bbr-muted); margin: 0; font-size: var(--bbr-text-sm); overflow-wrap: anywhere; }
.article-carousel-actions { display: flex; align-items: center; flex-wrap: wrap; flex-shrink: 0; gap: var(--bbr-space-6); }
.article-carousel-controls { display: flex; gap: var(--bbr-space-2); flex-shrink: 0; }
.article-carousel-controls[hidden] { display: none; }
.article-carousel-controls button { display: inline-flex; align-items: center; justify-content: center; width: var(--bbr-target-min); height: var(--bbr-target-min); min-height: 0; padding: 1px 6px; border: 1px solid var(--bbr-control-border); border-radius: var(--bbr-radius-sm); background: transparent; color: var(--bbr-block-accent); flex-shrink: 0; }
.article-carousel-controls button:hover { background: #77777718; }
.article-carousel-controls button:disabled { opacity: .5; cursor: not-allowed; }
.article-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: var(--bbr-space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 2px; padding: 3px 2px 16px; scrollbar-width: none; }
.article-carousel::-webkit-scrollbar { display: none; }
.article-card { min-width: 0; background: var(--bbr-surface); border: 1px solid var(--bbr-border); border-radius: var(--bbr-radius-lg); overflow: hidden; transition: border-color var(--bbr-duration); }
.article-recommendations.bbr-block-background--white .article-card { background: var(--bbr-light-bg); }
.article-card:hover, .article-card:focus-within { border-color: var(--bbr-control-border); }
.article-carousel .article-card { scroll-snap-align: start; }
.article-card-link { display: flex; flex-direction: column; height: 100%; color: var(--bbr-text); text-decoration: none; }
.article-card-link:focus-visible { outline: 3px solid var(--bbr-focus); outline-offset: -4px; }
.article-card-link:hover, .article-card-link:focus-visible { color: var(--bbr-text); text-decoration: none; }
.article-card-link:hover h3, .article-card-link:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.article-card-media { position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--bbr-surface-raised); }
.article-recommendations.bbr-block-background--white .article-card-media { background: var(--bbr-light-surface); }
.article-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 240ms ease; }
.article-card:hover .article-card-media img { transform: scale(1.025); }
.article-card-body { display: flex; flex-direction: column; flex: 1; gap: var(--bbr-space-3); padding: var(--bbr-space-6); }
.article-category { color: var(--bbr-block-accent); font-size: var(--bbr-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere; }
.article-card h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }
.article-card-body > p { color: var(--bbr-muted); font-size: var(--bbr-text-sm); line-height: 1.6; margin: 0 0 var(--bbr-space-2); overflow-wrap: anywhere; }
.article-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; font-size: var(--bbr-text-xs); color: var(--bbr-muted); }
.article-card-action { display: flex; align-items: center; justify-content: space-between; gap: var(--bbr-space-4); border-top: 1px solid var(--bbr-border); padding-top: var(--bbr-space-4); font-size: var(--bbr-text-sm); font-weight: 700; }
.article-card-action .bbr-block-icon { width: 22px; height: 22px; color: var(--bbr-block-accent); }
@media(max-width:1100px) {
    .article-carousel { grid-auto-columns: calc((100% - 24px) / 2.15); }
    .article-card-body { padding: var(--bbr-space-5); }
}
@media(max-width:760px) {
    .article-recommendations .section-heading { display: block; }
    .article-card h3 { font-size: 20px; }
    .article-carousel { grid-auto-columns: 88%; gap: var(--bbr-space-4); }
    .article-carousel-actions { justify-content: space-between; gap: var(--bbr-space-4); width: 100%; margin-top: var(--bbr-space-5); }
}
@media(prefers-reduced-motion:reduce) {
    .article-card, .article-card-media img { transition: none; }
    .article-card:hover .article-card-media img { transform: none; }
}

/* .home-services from the high fidelity DS; geometry is never an editor option. */
.home-services { padding-block: var(--bbr-space-6); border-bottom: 1px solid var(--bbr-border); }
.home-service-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: min(100% - var(--bbr-gutter) * 2,var(--bbr-container)); margin-inline: auto; }
.home-service-grid--1 { grid-template-columns: minmax(0,1fr); }
.home-service-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.home-service-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.home-service { display: flex; align-items: center; justify-content: center; gap: var(--bbr-space-4); padding-inline: var(--bbr-space-5); min-width: 0; }
.home-service + .home-service { border-left: 1px solid var(--bbr-border); }
.home-service > div { min-width: 0; overflow-wrap: anywhere; }
.home-services .bbr-service-icon { display: inline-block; width: 44px; height: 44px; flex-shrink: 0; background: currentColor; mask: var(--bbr-service-icon) center / contain no-repeat; }
.bbr-service-icon--racing { --bbr-service-icon: url('../images/BBR-icon-racing.svg'); }
.bbr-service-icon--shipping { --bbr-service-icon: url('../images/BBR-icon-shipping.svg'); }
.bbr-service-icon--payments { --bbr-service-icon: url('../images/BBR-icon-payments.svg'); }
.bbr-service-icon--assistance { --bbr-service-icon: url('../images/BBR-icon-assistance.svg'); }
.bbr-service-icon--hd { --bbr-service-icon: url('../images/BBR-icon-hd.svg'); }
.bbr-service-icon--shield { --bbr-service-icon: url('../images/BBR-icon-shield.svg'); }
.bbr-service-icon--italy { --bbr-service-icon: url('../images/BBR-icon-italy.svg'); }
.bbr-service-icon--compatibility { --bbr-service-icon: url('../images/BBR-icon-compatibility.svg'); }
.home-service strong { display: block; font-size: var(--bbr-text-sm); font-weight: 700; line-height: 1.3; letter-spacing: 0; margin: 0 0 var(--bbr-space-1); color: var(--bbr-text); }
.home-service p { font-size: var(--bbr-text-sm); line-height: 1.4; color: var(--bbr-muted); margin: 0; }
@media(max-width:1100px) {
    .home-service { padding-inline: var(--bbr-space-3); gap: var(--bbr-space-3); }
    .home-services .bbr-service-icon { width: 36px; height: 36px; }
}
@media(max-width:760px) {
    .home-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--bbr-space-5) 0; }
    .home-service-grid--1 { grid-template-columns: minmax(0,1fr); }
    .home-service { justify-content: flex-start; align-items: flex-start; gap: var(--bbr-space-2); padding-inline: var(--bbr-space-2); }
    .home-service:nth-child(3) { border-left: 0; }
    .home-services .bbr-service-icon { width: 28px; height: 28px; }
    .home-service strong, .home-service p { font-size: var(--bbr-text-xs); }
}