/* =========================================================================
   Batiself — /magasins/ page.
   Layered on top of home.css (shared sections, container, btn primitives)
   and tokens.css (colors, spacing, type roles).
   ========================================================================= */

/* ---------- Hero strip (reuses .bs-woo-hero base) -------------------------- */
.bs-stores-hero { padding-block: var(--bs-space-xl); }
.bs-stores-hero .bs-woo-hero__title strong { color: var(--bs-color-primary); }

/* ---------- Stats band ----------------------------------------------------- */
.bs-stores-stats {
	background: var(--bs-color-bg-alt);
	padding: var(--bs-space-lg) 0;
	border-block: 1px solid var(--bs-color-border);
}
.bs-stores-stats__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bs-space-md);
}
.bs-stores-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 0;
}
.bs-stores-stat__num {
	color: var(--bs-color-primary);
	font-family:    var(--bs-font-family);
	font-size:      clamp(28px, 3vw, 38px);
	font-weight:    var(--bs-weight-bold);
	line-height:    1;
	letter-spacing: var(--bs-tracking-tight);
}
.bs-stores-stat__label {
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-medium);
}
@media (max-width: 900px) {
	.bs-stores-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 480px) {
	.bs-stores-stats__grid { grid-template-columns: 1fr; }
}

/* ---------- Stores grid ---------------------------------------------------- */
.bs-stores-section { padding-block: var(--bs-space-xl); }
.bs-stores-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 24px;
}

.bs-store-card {
	margin: 0;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.bs-store-card:hover {
	border-color: var(--bs-color-primary);
	box-shadow: 0 18px 40px rgba(0, 91, 167, .12);
}
.bs-store-card.is-active {
	border-color: var(--bs-color-primary);
	box-shadow: 0 0 0 2px rgba(0, 91, 167, .18);
}

/* Banner — colored block with the store initial + city name. Replace with a
   real photo later by adding a <img> on top of `.bs-store-card__banner`. */
.bs-store-card__banner {
	position: relative;
	height: 132px;
	background:
		linear-gradient(135deg, var(--bs-color-primary) 0%, var(--bs-color-primary-dark) 100%),
		var(--bs-overlay-diagonals-soft);
	background-blend-mode: overlay, normal;
	color: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: var(--bs-space-md);
}
.bs-store-card__banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--bs-overlay-diagonals-soft);
	mix-blend-mode: overlay;
	opacity: .35;
	pointer-events: none;
}
/* Batiself logo rendered in pure white via filter — works for SVG, PNG with
   transparency, or any colored logo source. `brightness(0)` flattens every
   pixel to black, `invert(1)` flips it to white. The opacity dial keeps the
   logo readable but slightly recessed so the store name pops more. */
.bs-store-card__banner-logo {
	max-width:  60%;
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	filter: brightness(0) invert(1);
	opacity: .94;
	position: relative;
	z-index: 1;
}
/* Plain-text fallback when no custom logo is configured site-wide. */
.bs-store-card__banner-fallback {
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-h3-size);
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-type-h3-tracking);
	text-transform: uppercase;
	opacity: .92;
	position: relative;
	z-index: 1;
}
.bs-store-card__banner-name {
	position: absolute;
	right: var(--bs-space-md);
	bottom: var(--bs-space-md);
	z-index: 1;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-weight-semibold);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
	opacity: .92;
}

/* Body */
.bs-store-card__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: var(--bs-space-md);
	flex: 1 1 auto;
}
.bs-store-card__header {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bs-store-card__name {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	color: var(--bs-color-primary);
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-h3-size);
	font-weight:    var(--bs-type-h3-weight);
	letter-spacing: var(--bs-type-h3-tracking);
	text-transform: var(--bs-type-h3-case);
	line-height:    var(--bs-leading-tight);
}
.bs-store-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--bs-color-primary);
	color: #fff;
	font-size:   var(--bs-type-body-xs-size, 11px);
	font-weight: var(--bs-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.bs-store-card__address,
.bs-store-card__phone {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--bs-color-text);
	font-size: var(--bs-type-body-sm-size);
	line-height: var(--bs-leading-normal);
}
.bs-store-card__address svg,
.bs-store-card__phone svg {
	flex-shrink: 0;
	color: var(--bs-color-primary);
}
.bs-store-card__phone a {
	color: inherit;
	text-decoration: none;
	font-weight: var(--bs-weight-semibold);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.bs-store-card__phone a:hover { border-bottom-color: var(--bs-color-primary); }

/* Hours */
.bs-store-card__hours-title {
	margin: 0 0 8px;
	color: var(--bs-color-muted);
	font-size:   var(--bs-type-body-xs-size, 11px);
	font-weight: var(--bs-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.bs-store-card__hours ul {
	list-style: none; margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--bs-type-body-sm-size);
}
.bs-store-card__hours li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--bs-color-text);
}
.bs-store-card__hours li > span:first-child { color: var(--bs-color-muted); }
.bs-store-card__hours li.is-closed > span:last-child {
	color: var(--bs-color-muted);
	font-style: italic;
}

/* Services list */
.bs-store-card__services {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
	font-size: var(--bs-type-body-sm-size);
	color: var(--bs-color-text);
}
.bs-store-card__services li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.bs-store-card__services svg {
	flex-shrink: 0;
	color: var(--bs-color-primary);
}

/* Actions — both buttons MUST be the same size: same height, padding,
   single-line text, identical typographic role. The .home-btn base sets a
   sensible padding/min-height; we just lock width + nowrap + sizing parity. */
.bs-store-card__actions {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bs-store-card__pick,
.bs-store-card__maps {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 16px;
	box-sizing: border-box;
	white-space: nowrap;          /* one line, no wrap */
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	font-size:   var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-semibold);
	line-height: 1.2;
}
.bs-store-card__pick-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* When the card is already the user's preferred store, swap the pick button
   into a muted "Sélectionné" look — same behaviour as the header popup. */
.bs-store-card.is-active .bs-store-card__pick {
	background: var(--bs-color-success, #1f8a4d);
	cursor: default;
}
.bs-store-card.is-active .bs-store-card__pick:hover {
	background: var(--bs-color-success, #1f8a4d);
}

/* Card responsive tightening */
@media (max-width: 640px) {
	.bs-stores-grid { grid-template-columns: 1fr; }
	.bs-store-card__services { grid-template-columns: 1fr; }
}

/* ---------- Big map ------------------------------------------------------- */
.bs-stores-map {
	background: var(--bs-color-bg-alt);
	padding-block: 0;
	border-block: 1px solid var(--bs-color-border);
}
.bs-stores-map__inner {
	position: relative;
	width: 100%;
	height: clamp(360px, 50vh, 520px);
	overflow: hidden;
}
.bs-stores-map__frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	filter: saturate(.95);
}

/* ---------- Services en magasin ------------------------------------------ */
.bs-stores-services { padding-block: var(--bs-space-xl); }
.bs-stores-services__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.bs-stores-service {
	margin: 0;
	padding: var(--bs-space-md);
	border: 1px solid var(--bs-color-border);
	border-radius: 14px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color .25s ease, transform .25s ease;
}
.bs-stores-service:hover {
	border-color: var(--bs-color-primary);
}
.bs-stores-service__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(0, 91, 167, .08);
	color: var(--bs-color-primary);
	margin-bottom: 4px;
}
.bs-stores-service__title {
	margin: 0;
	color: var(--bs-color-text);
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
	line-height: var(--bs-leading-tight);
}
.bs-stores-service__desc {
	margin: 0;
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-sm-size);
	line-height: var(--bs-leading-normal);
}
@media (max-width: 1100px) { .bs-stores-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .bs-stores-services__grid { grid-template-columns: 1fr; } }

/* ---------- Pro band ------------------------------------------------------ */
.bs-stores-pro {
	color: #fff;
	background:
		linear-gradient(135deg, var(--bs-color-primary) 0%, var(--bs-color-primary-dark) 100%),
		var(--bs-overlay-diagonals-soft);
	background-blend-mode: overlay, normal;
	padding-block: var(--bs-space-xl);
}
.bs-stores-pro__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--bs-space-lg);
	align-items: center;
}
.bs-stores-pro__copy { display: flex; flex-direction: column; gap: 12px; }
.bs-stores-pro__eyebrow {
	margin: 0;
	font-size: var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: .85;
}
.bs-stores-pro__title {
	margin: 0;
	color: #fff;
	font-family:    var(--bs-font-family);
	font-size:      clamp(26px, 2.8vw, 36px);
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-tight);
	line-height: var(--bs-leading-tight);
}
.bs-stores-pro__title strong { color: #fff; font-weight: var(--bs-weight-bold); }
.bs-stores-pro__desc {
	margin: 0;
	opacity: .92;
	font-size: var(--bs-type-body-size);
	line-height: var(--bs-leading-normal);
}
.bs-stores-pro__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-self: end;
	min-width: 220px;
}
.bs-stores-pro .home-btn--primary {
	background: #fff;
	color: var(--bs-color-primary);
}
.bs-stores-pro .home-btn--primary:hover {
	background: var(--bs-color-bg-alt);
	color: var(--bs-color-primary-dark);
}
.bs-stores-pro .home-btn--ghost-light {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,.55);
}
.bs-stores-pro .home-btn--ghost-light:hover {
	background: rgba(255,255,255,.12);
	border-color: #fff;
}
@media (max-width: 900px) {
	.bs-stores-pro__inner { grid-template-columns: 1fr; gap: var(--bs-space-md); }
	.bs-stores-pro__actions { justify-self: stretch; }
}

/* ---------- CTA strip ---------------------------------------------------- */
.bs-stores-ctas { padding-block: var(--bs-space-xl); }
.bs-stores-ctas__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.bs-stores-cta {
	padding: var(--bs-space-md);
	border: 1px solid var(--bs-color-border);
	border-radius: 14px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bs-stores-cta__title {
	margin: 0;
	color: var(--bs-color-text);
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
}
.bs-stores-cta__desc {
	margin: 0;
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-sm-size);
	flex: 1 1 auto;
}
.bs-stores-cta .home-btn { align-self: flex-start; }
@media (max-width: 900px) { .bs-stores-ctas__grid { grid-template-columns: 1fr; } }