/* =========================================================================
   Batiself — Product category page styles.
   Loaded ALONGSIDE home.css on category pages.
   This file ONLY contains category-specific overrides and new components.
   Shared components (.home-section, .home-btn, .home-arrow, swipers, services
   band, etc.) are inherited from home.css.

   TYPOGRAPHY: every text element consumes a role from tokens.css.
   Roles in use here:
     - h1       → .cat-hero__title
     - h2       → .cat-hero--sub .cat-hero__title, .cat-related__title
     - h3       → .cat-brand-card__title, .cat-project-card__label
     - h4       → .bs-filter__title
     - body     → .cat-hero__text (mobile/sub variant uses body-sm)
     - body-sm  → .cat-subcat-card__label, .cat-related-card__label, 
                  .bs-filter__summary, .bs-filter__option label, .bs-toolbar__count, 
                  .bs-toolbar__sort select, .bs-pagination__item, .cat-hero--sub .cat-hero__text 
     - caption  → .bs-breadcrumb  
   ========================================================================= */
 
/* ---------- Hero (variant of home hero, term-driven) -------------------- */
.cat-hero {
	position: relative;   
	min-height: clamp(480px, 70vh, 640px);
	background-color: var(--bs-color-bg-alt); 
	background-image: var(--hero-bg); 
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
/* Diagonal Blue overlay (lighter than before) + Batiself diagonals signature
   on the right so the photo really breathes on the CTA side while the title
   block (left) keeps its readability. */
.cat-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			115deg,
			rgba(16, 54, 86, .25)  0%,
			rgba(16, 54, 86, .15) 45%,
			rgba(0, 91, 167, .06) 100%
		),
		var(--bs-overlay-diagonals-soft);
	pointer-events: none;
	z-index: 0;
}
.cat-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-top: 64px;
	padding-bottom: 40px;
	flex-wrap: wrap;
}
.cat-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: 520px;
}

/* Category hero title — role: h1. White block on cover → Blue. */
.cat-hero__title {
	display: inline-block;
	margin: 0;
	background: #fff;
	color: var(--bs-color-primary);
	padding: 14px 24px;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-h1-size);
	font-weight:    var(--bs-weight-bold);             /* h1 weight override */
	line-height:    var(--bs-type-h1-leading);
	letter-spacing: var(--bs-type-h1-tracking);
	text-transform: var(--bs-type-h1-case);
}
.cat-hero__rule {
	display: block;
	width: 64px;
	height: 2px;
	background: var(--bs-color-accent);
}

/* Hero body text — role: body-sm */
.cat-hero__text {
	color: #fff;
	max-width: 520px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.cat-hero__text p { margin: 0 0 6px; }
.cat-hero__cta {
	align-self: flex-end;
	/* Force white label — some parent-theme link rules can override the
	   default .home-btn--primary color, so we re-assert it here. */
	color: #fff;
}
.cat-hero__cta:hover,
.cat-hero__cta:focus,
.cat-hero__cta:visited {
	color: #fff;
}

/* ---------- Sub-categories section ------------------------------------
   Card markup + visuals live in the canonical .bs-category-card /
   .bs-categories-grid component in home.css (rendered by
   template-parts/components/section-categories.php). Same component is
   reused on the home page references section. This block only declares
   the per-context section padding. */
.bs-categories-section.cat-subcategories {
	padding: var(--bs-space-xl) 0;
}

/* ---------- Brands ambiance grid (different from home partners) -------- */
.cat-brands__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}
@media (max-width: 1100px) { .cat-brands__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .cat-brands__grid { grid-template-columns: repeat(2, 1fr); } }

.cat-brand-card { margin: 0; aspect-ratio: 1 / 1.1; overflow: hidden; }
.cat-brand-card__link {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.cat-brand-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s;
	display: block;
}
.cat-brand-card__link:hover .cat-brand-card__img { transform: scale(1.04); }

/* Brand card fallback title (no image) — role: h3. On light-bg → Blue. */
.cat-brand-card__title {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--bs-color-bg-alt);
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h3-size);
	font-weight:    var(--bs-type-h3-weight);
	line-height:    var(--bs-type-h3-leading);
	letter-spacing: var(--bs-type-h3-tracking);
	text-transform: var(--bs-type-h3-case);
}

/* ---------- Projects section -------------------------------------------
   Card markup + visuals live in the canonical .bs-project-card /
   .bs-projects-grid component in home.css (rendered by
   template-parts/components/section-projects.php). Same component is
   reused on the home + single-project pages. No category-specific
   overrides needed. */

/* =========================================================================
   SUB-CATEGORY page (catalog with filters)
   ========================================================================= */

/* ---------- Hero variant — IDENTICAL size + overlay to .cat-hero -------
   The sub-cat hero now inherits everything from .cat-hero (same min-
   height, same diagonal overlay, same white-block title with Blue text).
   Only the layout inside differs: the breadcrumb sits above the title
   instead of a CTA button below it. */
.cat-hero--sub {
	color: #fff;
}
.cat-hero--sub .cat-hero__inner {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bs-space-sm);
}
.cat-hero--sub .cat-hero__content {
	max-width: 720px;
	gap: var(--bs-space-sm);
}
/* (sub-hero text inherits .cat-hero__text body-sm role) */

/* Breadcrumb override — white on dark hero photo, on BOTH .cat-hero
   variants (main + sub) so the trail is always legible over the image. */
.cat-hero .bs-breadcrumb,
.cat-hero .bs-breadcrumb__link,
.cat-hero .bs-breadcrumb__current,
.cat-hero .bs-breadcrumb__sep {
	color: #fff;
}
.cat-hero .bs-breadcrumb__link { opacity: .85; }
.cat-hero .bs-breadcrumb__link:hover { opacity: 1; color: #fff; }
.cat-hero .bs-breadcrumb__current { font-weight: var(--bs-weight-bold); }
.cat-hero .bs-breadcrumb__sep { opacity: 1; }

/* ---------- Breadcrumb — base styles moved to home.css ----------------
   The canonical .bs-breadcrumb component lives in home.css so it loads
   on EVERY page (header-enqueue.php → home.css), not only on category
   pages. This keeps the breadcrumb horizontal + conventionally styled
   on project / product / search pages too. */

/* ---------- Catalog layout (sidebar + main) ---------------------------- */
.cat-catalog { padding: var(--bs-section-pad-y) 0; }
.cat-catalog__layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--bs-space-xl);
	align-items: flex-start;
}
/* Sticky sidebar on desktop — the filter form sits next to the long product
   grid, sticking near the header so it stays accessible while scrolling. */
@media (min-width: 901px) {
	.cat-catalog__layout > .bs-filter {
		top: calc(var(--bs-header-h) + 56px + var(--bs-space-md));
		max-height: calc(100vh - var(--bs-header-h) - 56px - var(--bs-space-md) * 2);
		overflow-y: auto;
		padding-right: var(--bs-space-2xs);
	}
	/* Exception: on the SHOP archive the filter list is much longer (all
	   attributes site-wide), so it scrolls WITH the page instead of being
	   stuck in a cropped viewport-height window — the visitor can reach
	   the bottom of every facet without an inner scrollbar. */
	.batiself-shop .cat-catalog__layout > .bs-filter {
		position: static;
		top: auto;
		max-height: none;
		overflow-y: visible;
		padding-right: 0;
	}
}
@media (max-width: 900px) {
	.cat-catalog__layout { grid-template-columns: 1fr; gap: var(--bs-space-md); }
}

/* =========================================================================
   SHOP ARCHIVE — /boutique/
   Page-level container + sober light-bg hero. Reuses the catalog filter +
   toolbar + grid + pagination from above without overrides.
   ========================================================================= */
.batiself-shop { background: #fff; }

.bs-shop-hero {
	background: var(--bs-color-bg-alt);
	border-bottom: 1px solid var(--bs-color-border);
	padding: var(--bs-space-xl) 0 var(--bs-space-lg);
}
.bs-shop-hero__crumbs { margin-bottom: var(--bs-space-md); }
.bs-shop-hero__eyebrow {
	margin: 0 0 var(--bs-space-xs);
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-shop-hero__title {
	margin: 0 0 var(--bs-space-sm);
	max-width: 880px;
	color: var(--bs-color-primary);
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-h1-size);
	font-weight:    var(--bs-type-h1-weight);
	line-height:    var(--bs-type-h1-leading);
	letter-spacing: var(--bs-type-h1-tracking);
	text-transform: var(--bs-type-h1-case);
}
.bs-shop-hero__title strong { font-weight: var(--bs-weight-black); }
.bs-shop-hero__lead {
	margin: 0;
	max-width: 760px;
	color: var(--bs-color-text);
	font-size:      var(--bs-type-lead-size);
	font-weight:    var(--bs-type-lead-weight);
	line-height:    var(--bs-type-lead-leading);
}
.bs-shop-hero__count {
	margin: var(--bs-space-md) 0 0;
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-sm-size);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}
.bs-shop-hero__count strong { color: var(--bs-color-primary); font-weight: var(--bs-weight-bold); }

/* Shop categories section — tighter rhythm than the home one so it doesn't
   dwarf the filterable catalogue underneath. */
.bs-shop-categories { padding: var(--bs-space-xl) 0 var(--bs-space-lg); }

/* Mobile filters toggle — a single button at the top of the catalog that
   opens the sidebar as a slide-down panel (the sidebar is hidden on mobile
   until the toggle is pressed). Pure-CSS via the [open] attribute of a
   <details> wrapping the form would have been an option, but the sort
   toolbar already lives outside the sidebar — so we use a small inline
   script in the toolbar instead. The button is rendered by sort-toolbar.php
   when present; here we just style + reveal it on mobile. */
.bs-toolbar__filters-toggle {
	display: none;
}
@media (max-width: 900px) {
	.bs-toolbar__filters-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 10px 18px;
		background: #fff;
		border: 1px solid var(--bs-color-primary);
		color: var(--bs-color-primary);
		cursor: pointer;
		border-radius: 999px;
		font-family:    var(--bs-font-family);
		font-size:      var(--bs-type-body-sm-size);
		font-weight:    var(--bs-weight-bold);
		letter-spacing: var(--bs-tracking-wide);
		text-transform: uppercase;
	}
	.bs-toolbar__filters-toggle:hover {
		background: var(--bs-color-primary);
		color: #fff;
	}
	/* Hide the sidebar by default on mobile; reveal when the toolbar toggle
	   sets data-open="true" on the section wrapper. */
	.cat-catalog .bs-filter { display: none; }
	.cat-catalog[data-filters-open="true"] .bs-filter {
		display: block;
		margin-bottom: var(--bs-space-md);
	}
}

/* ---------- Filter sidebar -------------------------------------------- */
.bs-filter__form { display: flex; flex-direction: column; gap: 8px; }

/* Filter section title — role: h4 (md size override). On white sidebar → Blue. */
.bs-filter__title {
	margin: 0 0 8px;
	color: var(--bs-color-primary);
	font-size:      var(--bs-text-md);                 /* h4 size override: md */
	font-weight:    var(--bs-type-h4-weight);
	line-height:    var(--bs-type-h4-leading);
	letter-spacing: var(--bs-tracking-normal);         /* h4 tracking override: no spacing */
	text-transform: none;                              /* h4 case override: not uppercase */
}
.bs-filter__group {
	border-bottom: 1px solid var(--bs-color-border);
	padding: 8px 0;
}

/* Filter group summary — role: body-sm (medium weight override) */
.bs-filter__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	list-style: none;
	padding: 6px 0;
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-medium);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.bs-filter__summary::-webkit-details-marker { display: none; }
.bs-filter__summary::after {
	content: '';
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--bs-color-text);
	border-bottom: 2px solid var(--bs-color-text);
	transform: rotate(45deg);
	transition: transform .2s;
	margin-right: 4px;
}
.bs-filter__group[open] .bs-filter__summary::after { transform: rotate(-135deg); margin-top: 4px; }
.bs-filter__options {
	list-style: none;
	margin: 8px 0 4px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Filter option — role: body-sm */
.bs-filter__option label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.bs-filter__option input[type="checkbox"] { accent-color: var(--bs-color-primary); }
.bs-filter__count { color: var(--bs-color-muted); margin-left: 4px; }
.bs-filter__submit { margin-top: 16px; align-self: flex-start; }

/* ---------- Toolbar (count + sort) ------------------------------------ */
.bs-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--bs-color-border);
	margin-bottom: 24px;
}

/* Result count — role: body-sm (muted) */
.bs-toolbar__count {
	margin: 0;
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.bs-toolbar__count strong { color: var(--bs-color-text); }

/* Sort dropdown — role: body-sm */
.bs-toolbar__sort select {
	padding: 8px 32px 8px 14px;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' stroke='%23111' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}

/* ---------- Product grid ---------------------------------------------- */
.bs-product-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* More generous gutter for a premium, breathable catalogue. */
	gap: 32px;
	align-items: stretch;
}
@media (max-width: 1100px) { .bs-product-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (max-width: 700px)  { .bs-product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.bs-product-grid__item {
	margin: 0;
	display: flex;
	align-items: stretch;
}
.bs-product-grid__item > .product-card { flex: 1 1 auto; }

/* ---------- Pagination ------------------------------------------------- */
.bs-pagination { margin-top: 32px; display: flex; justify-content: flex-end; }
.bs-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
}

/* Page number — role: body-sm (medium weight override) */
.bs-pagination__item a,
.bs-pagination__item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--bs-color-border);
	color: var(--bs-color-text);
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-medium);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.bs-pagination__item a:hover {
	border-color: var(--bs-color-primary);
	color: var(--bs-color-primary);
}
.bs-pagination__item .current {
	background: var(--bs-color-primary);
	border-color: var(--bs-color-primary);
	color: #fff;
}

/* ---------- En relation avec cette catégorie -------------------------
   Cards + grid markup live in the canonical .bs-category-card /
   .bs-categories-grid component in home.css (rendered by
   template-parts/components/section-categories.php). Same component
   is reused on the home references section + on the parent-category
   sub-categories section. */

/* =========================================================================
   EDITORIAL BLOCK — visual breath between exploration and trust sections.
   Tight column, centered, generous vertical padding so it reads as a pause.
   ========================================================================= */
.cat-editorial {
	padding: var(--bs-space-xl) 0;
	background: #fff;
}
.cat-editorial__inner {
	max-width: 760px;
	text-align: center;
}
.cat-editorial__title {
	margin: 0 0 var(--bs-space-md);
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h2-size);
	font-weight:    var(--bs-type-h2-weight);
	line-height:    var(--bs-type-h2-leading);
	letter-spacing: var(--bs-type-h2-tracking);
	text-transform: var(--bs-type-h2-case);
}
.cat-editorial__text {
	margin: 0;
	color: var(--bs-color-text);
	font-size:      var(--bs-type-lead-size);
	font-weight:    var(--bs-type-lead-weight);
	line-height:    var(--bs-type-lead-leading);
}

/* =========================================================================
   PARTNERS GRID — layout only.
   Card visuals (image-bg, logo overlay, hover, placeholder pattern) live
   in assets/style/partners.css (loaded site-wide) so home + category share
   the exact same partner card design.
   ========================================================================= */
.cat-partners {
	background: var(--bs-color-bg-alt);
	padding: var(--bs-space-xl) 0;
}
/* .cat-partners__grid layout + compact brand-card sizing live in partners.css
   (loaded site-wide) so the category page AND the /marques/ page share them. */

/* ---------- Category "Coming soon" placeholder (empty category) --------- */
.bs-cat-soon__crumbs { margin-bottom: var(--bs-space-lg); }
.bs-cat-soon__card {
	max-width: 640px;
	margin: var(--bs-space-md) auto var(--bs-space-xl);
	padding: var(--bs-space-2xl) var(--bs-space-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	background: var(--bs-color-bg-alt);
	border: 1px solid var(--bs-color-border);
}
.bs-cat-soon__icon {
	width: 72px;
	height: 72px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	color: var(--bs-color-primary);
}
.bs-cat-soon__eyebrow {
	margin: 6px 0 0;
	color: var(--bs-color-primary);
	font-size: var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}
.bs-cat-soon__title {
	margin: 0;
	color: var(--bs-color-primary);
	font-size:   var(--bs-type-h2-size);
	font-weight: var(--bs-type-h2-weight);
	line-height: var(--bs-leading-tight);
}
.bs-cat-soon__badge {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--bs-color-accent);
	color: var(--bs-color-primary-dark);
	font-size: var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
}
.bs-cat-soon__text {
	margin: 0;
	max-width: 460px;
	color: var(--bs-color-muted);
	font-size:   var(--bs-type-body-size);
	line-height: var(--bs-leading-normal);
}
.bs-cat-soon__actions {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* =========================================================================
   Brand archive hero (/marque/<slug>/) — taxonomy-product_brand.php
   ========================================================================= */
.bs-brand-hero {
	background: var(--bs-color-bg-alt);
	border-bottom: 1px solid var(--bs-color-border);
}
.bs-brand-hero__inner {
	display: flex;
	align-items: center;
	gap: var(--bs-space-xl);
}
.bs-brand-hero__logo {
	flex: 0 0 auto;
	width: clamp(120px, 16vw, 200px);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--bs-space-md);
	background: #fff;
	border: 1px solid var(--bs-color-border);
}
.bs-brand-hero__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.bs-brand-hero__text { min-width: 0; }
.bs-brand-hero__eyebrow {
	margin: 0 0 6px;
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-brand-hero__title {
	margin: 0 0 var(--bs-space-sm);
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h1-size);
	font-weight:    var(--bs-type-h1-weight);
	line-height:    var(--bs-type-h1-leading);
	letter-spacing: var(--bs-type-h1-tracking);
}
.bs-brand-hero__desc {
	max-width: 62ch;
	color: var(--bs-color-text);
	font-size:   var(--bs-type-body-size);
	line-height: var(--bs-leading-normal);
}
.bs-brand-hero__desc p { margin: 0 0 var(--bs-space-sm); }
.bs-brand-hero__meta {
	margin: var(--bs-space-sm) 0 0;
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-medium);
}
.bs-brand-hero__site { margin-top: var(--bs-space-md); }

@media (max-width: 700px) {
	.bs-brand-hero__inner { flex-direction: column; align-items: flex-start; gap: var(--bs-space-md); }
	.bs-brand-hero__logo { width: clamp(110px, 40vw, 160px); }
}

/* ── Shop: active theme banner (?theme=Brico|Déco|Jardin) ─────────────────
   Shown when a « Meilleures ventes » tab opens the shop filtered on a theme,
   so the selection is explicit and one click clears it. */
.bs-shop-theme-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bs-space-sm);
	margin-bottom: var(--bs-space-md);
	padding: 14px 18px;
	background: var(--bs-color-bg-alt);
	border-left: 4px solid var(--bs-color-primary);
}
.bs-shop-theme-banner__label {
	margin: 0;
	color: var(--bs-color-text);
	font-size: var(--bs-type-body-size);
}
.bs-shop-theme-banner__label strong { color: var(--bs-color-primary); }
.bs-shop-theme-banner__reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bs-color-primary);
	font-weight: var(--bs-weight-bold);
	font-size: var(--bs-type-body-sm-size);
	text-decoration: none;
	white-space: nowrap;
}
.bs-shop-theme-banner__reset:hover { text-decoration: underline; }