/* =========================================================================
   Batiself — Single product page styles.
   Loaded ALONGSIDE home.css. Contains: breadcrumb (autonomous), summary
   (gallery + info column matching gallery height), animated accordions,
   reviews/fbt section spacing, recent slider alignment.
   Product card / swipers come from custom.css and home.css.

   TYPOGRAPHY: every text element consumes a role from tokens.css.
   Roles in use here:
     - h1       → .bs-product-summary__price
     - h2       → .bs-product-summary__title
     - h4       → .bs-accordion__title
     - body     → .bs-qty__input
     - body-sm  → .bs-breadcrumb (overridden, muted),
                  .bs-product-summary__vendor, .bs-product-summary__rating,
                  .bs-product-summary__dimensions, .bs-accordion__body-inner,
                  .bs-product-summary__price del
   ========================================================================= */

.batiself-product { background: #fff; }

/* ---------- Breadcrumb (autonomous, doesn't depend on category.css) ----
   Role: body-sm (muted). */
.batiself-product__crumbs {
	padding-top: 20px;
	padding-bottom: 8px;
}
.batiself-product__crumbs .bs-breadcrumb { 
	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);
}
.batiself-product__crumbs .bs-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.batiself-product__crumbs .bs-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bs-color-muted);
}
.batiself-product__crumbs .bs-breadcrumb__link {
	color: var(--bs-color-muted);
	text-decoration: none;
	transition: color .15s;
}
.batiself-product__crumbs .bs-breadcrumb__link:hover { color: var(--bs-color-primary); }
.batiself-product__crumbs .bs-breadcrumb__current {
	color: var(--bs-color-text);
	font-weight: var(--bs-weight-medium);
}
.batiself-product__crumbs .bs-breadcrumb__sep {
	color: var(--bs-color-muted);
	opacity: 1;
}

/* ---------- Section spacing ------------------------------------------- */
.bs-product-section { padding: 56px 0; }

/* ---------- Summary (gallery left + info right, matching heights) ----- */
.bs-product-summary { padding: 32px 0 56px; }
.bs-product-summary__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 48px;
	align-items: stretch;
}
@media (max-width: 900px) {
	.bs-product-summary__layout { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}

.bs-product-summary__gallery { min-width: 0; }
.bs-product-summary__info {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

/* Product title — role: h2. On white bg → Blue. */
.bs-product-summary__title {
	margin: 0;
	color: var(--bs-color-primary);
	font-size:      var(--bs-text-xl);                 /* h2 size override: xl */
	font-weight:    var(--bs-type-h2-weight);
	line-height:    var(--bs-leading-snug);            /* h2 leading override: snug */
	letter-spacing: var(--bs-type-h2-tracking);
	text-transform: none;                              /* h2 case override: not uppercase */
}

/* Vendor line — role: body-sm (muted) */
.bs-product-summary__vendor {
	margin: -12px 0 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-product-summary__vendor strong { font-weight: var(--bs-weight-bold); color: var(--bs-color-text); }

/* Rating line — role: body-sm (muted) */
.bs-product-summary__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	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-product-summary__rating .star-rating { color: var(--bs-color-primary); }

/* Price — role: h1 (large display) — wraps so the sale variant (ins + del)
   reads as: [sale Yellow highlight] [smaller struck-through original] */
.bs-product-summary__price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	color: var(--bs-color-text);
	font-size:      calc(var(--bs-type-h1-size) * 0.82);   /* slightly smaller than H1 */
	font-weight:    var(--bs-weight-bold);
	line-height:    var(--bs-leading-flat);
	letter-spacing: var(--bs-type-h1-tracking);
}
/* Prix à l'unité (« Soit X € / kg ») sous le prix principal. */
.bs-product-summary__unit-price {
	margin: 6px 0 0;
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-medium);
}
/* Sale (reduced) price — highlighted with Batiself Yellow + black text. */
.bs-product-summary__price ins {
	display: inline-block;
	padding: 4px 12px;
	background: var(--bs-color-accent);
	color: #000;
	text-decoration: none;
	border-radius: 6px;
	line-height: 1.05;
}
/* Original price — struck-through, smaller, muted, sits next to the sale price. */
.bs-product-summary__price del {
	margin: 0;
	color: var(--bs-color-muted);
	font-size:      var(--bs-text-md);
	font-weight:    var(--bs-type-body-sm-weight);
	text-decoration: line-through;
}

/* Dimensions line — role: body-sm (muted) */
.bs-product-summary__dimensions {
	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-product-summary__dimensions strong { color: var(--bs-color-text); }

/* UGS + EAN — côte à côte, mutés, juste sous la marque. */
.bs-product-summary__codes {
	display: flex;
	flex-wrap: wrap;          /* repli propre sous mobile / libellés longs */
	align-items: baseline;
	gap: 4px 22px;            /* 22px entre UGS et EAN, 4px si repli sur 2 lignes */
}
.bs-product-summary__sku {
	margin: 0;
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-body-sm-size);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.bs-product-summary__sku[hidden] { display: none; }
.bs-product-summary__sku [data-bs-sku],
.bs-product-summary__sku [data-bs-ean] {
	color: var(--bs-color-text);
	font-weight: var(--bs-weight-medium);
}

.bs-product-summary__form { margin-top: auto; }

/* ---------- Quantity + Add-to-cart row --------------------------------
   Compact quantity picker (flex: 0 0 auto) → the Add-to-cart button takes
   ALL the remaining space (flex: 1 1 auto). The result: small qty stepper
   on the left, wide CTA on the right. */
.bs-product-summary__form {
	display: flex;
	gap: 12px;
	align-items: stretch;
}
.bs-product-summary__atc {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

.bs-qty {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 116px;        /* compact stepper → the CTA takes the rest of the row */
	border: 1px solid var(--bs-color-border);
	background: #fff;
	border-radius: 999px;
	overflow: hidden;
}
.bs-qty__btn {
	width: 32px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--bs-color-text);
	font-family: var(--bs-font-family);
	font-size: 16px;  /* glyph sizing — not a typographic role */
}
.bs-qty__btn:hover { background: var(--bs-color-bg-alt); }

/* Quantity input — role: body */
.bs-qty__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	border: 0;
	border-left: 1px solid var(--bs-color-border);
	border-right: 1px solid var(--bs-color-border);
	text-align: center;
	-moz-appearance: textfield;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-type-body-weight);
	line-height:    var(--bs-type-body-leading);
	letter-spacing: var(--bs-type-body-tracking);
}
.bs-qty__input::-webkit-outer-spin-button,
.bs-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Mobile: compact qty + extra-greedy CTA ---------------------
   Below 700px the price section is narrow → the qty stepper must shrink
   so the Ajouter button keeps the majority of the row. We lock the
   stepper width and let the CTA claim everything else. */
@media (max-width: 700px) {
	.bs-product-summary__form {
		flex-wrap: nowrap;
		gap: 8px;
	}
	.bs-qty {
		flex: 0 0 auto;
		width: 108px;          /* − [N] + → fits in ~108px with our 32+36+32 buttons */
	}
	.bs-qty__btn   { width: 32px; }
	.bs-qty__input { width: 44px; }
	.bs-product-summary__atc {
		flex: 1 1 0;
		min-width: 0;
		/* Text might be long ("Ajouter au panier") — let it shrink first
		   before the qty does. */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Very small phones: pull more space for the CTA. */
@media (max-width: 380px) {
	.bs-qty         { width: 96px; }
	.bs-qty__btn    { width: 28px; }
	.bs-qty__input  { width: 40px; }
}

/* ---------- Variable product: native WooCommerce variations form -------
   WC renders <table.variations> (the « Modèle » dropdown) + a
   .single_variation_wrap (selected price + quantity + add-to-cart). We
   re-skin it to the Batiself charte and mirror the simple-product row:
   compact quantity on the left, wide primary pill CTA on the right. */
.bs-product-summary__variations { margin-top: auto; }

.bs-product-summary__variations .variations {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--bs-space-sm);
}
.bs-product-summary__variations .variations tr { display: block; margin-bottom: 12px; }
.bs-product-summary__variations .variations th,
.bs-product-summary__variations .variations td { display: block; padding: 0; text-align: left; }
.bs-product-summary__variations .variations .label label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--bs-font-family);
	font-size: var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-semibold);
	color: var(--bs-color-text);
}
.bs-product-summary__variations .variations select {
	width: 100%;
	padding: 12px 40px 12px 14px;
	border: 1px solid var(--bs-color-border);
	border-radius: 12px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23005BA7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	font-family: var(--bs-font-family);
	font-size: var(--bs-type-body-size);
	color: var(--bs-color-text);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.bs-product-summary__variations .variations select:focus {
	outline: none;
	border-color: var(--bs-color-primary);
}
.bs-product-summary__variations .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: var(--bs-type-body-sm-size);
	color: var(--bs-color-primary);
	text-decoration: underline;
}

/* The selected variation's PRICE and DESCRIPTION are NOT repeated below the
   dropdown: the price REPLACES the main price at the top and the description is
   moved into the "Description du produit" section (both via the inline script in
   section-summary.php). WooCommerce force-shows .single_variation inline
   (slideDown), so the two children must be hidden with !important. */
.bs-product-summary__variations .woocommerce-variation-price,
.bs-product-summary__variations .woocommerce-variation-description {
	display: none !important;
}

/* Stock state — kept here and made prominent (esp. "Rupture de stock"). */
.bs-product-summary__variations .woocommerce-variation-availability { margin: 0 0 14px; }
.bs-product-summary__variations .woocommerce-variation-availability .stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-bold);
	line-height: 1.2;
}
.bs-product-summary__variations .woocommerce-variation-availability .stock::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}
.bs-product-summary__variations .woocommerce-variation-availability .stock.in-stock {
	background: rgba(34, 139, 80, .12);
	color: #1c8a4e;
}
.bs-product-summary__variations .woocommerce-variation-availability .stock.out-of-stock,
.bs-product-summary__variations .woocommerce-variation-availability .stock.available-on-backorder {
	background: rgba(207, 46, 46, .12);
	color: #cf2e2e;          /* clear red (the promo token is yellow) */
	font-size: var(--bs-type-body-size);
	padding: 10px 18px;
}

.bs-product-summary__variations .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 12px;
	align-items: stretch;
}
.bs-product-summary__variations .quantity {
	display: inline-flex;
	flex: 0 0 auto;
	border: 1px solid var(--bs-color-border);
	background: #fff;
	border-radius: 999px;
	overflow: hidden;
}
.bs-product-summary__variations .quantity input.qty {
	width: 72px;
	border: 0;
	text-align: center;
	background: transparent;
	-moz-appearance: textfield;
	font-family: var(--bs-font-family);
	font-size: var(--bs-type-body-size);
	color: var(--bs-color-text);
}
.bs-product-summary__variations .quantity input.qty::-webkit-outer-spin-button,
.bs-product-summary__variations .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bs-product-summary__variations .single_add_to_cart_button {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--bs-color-primary);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	letter-spacing: var(--bs-type-button-tracking);
	text-transform: var(--bs-type-button-case);
	transition: background .2s ease;
}
.bs-product-summary__variations .single_add_to_cart_button:hover { background: var(--bs-color-primary-dark); }
.bs-product-summary__variations .single_add_to_cart_button.disabled,
.bs-product-summary__variations .single_add_to_cart_button.wc-variation-selection-needed {
	opacity: .45;
	cursor: not-allowed;
}
.bs-product-summary__variations .wc-no-matching-variations {
	margin: 10px 0;
	font-size: var(--bs-type-body-sm-size);
	color: var(--bs-color-text);
}
@media (max-width: 700px) {
	.bs-product-summary__variations .quantity { width: 108px; }
	.bs-product-summary__variations .quantity input.qty { width: 44px; }
}

/* ---------- Accordions (Description / Caractéristiques) --------------- */
.bs-product-details { padding: 32px 0; }
.bs-product-details__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: flex-start;
}
@media (max-width: 900px) {
	.bs-product-details__grid { grid-template-columns: 1fr; gap: 24px; }
}

.bs-accordion {
	border-bottom: 1px solid var(--bs-color-text);
}
.bs-accordion__summary {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	padding: 16px 0;
	background: transparent;
	border: 0;
	font-family: var(--bs-font-family);
	text-align: left;
	color: var(--bs-color-text);
}

/* Accordion title — role: h4 (md size override, no uppercase). On white → Blue. */
.bs-accordion__title {
	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 */
	text-transform: none;                              /* h4 case override */
}
.bs-accordion__sign {
	width: 18px;
	height: 18px;
	position: relative;
	flex-shrink: 0;
}
.bs-accordion__sign::before,
.bs-accordion__sign::after {
	content: '';
	position: absolute;
	background: var(--bs-color-text);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity .25s ease, transform .25s ease;
}
.bs-accordion__sign::before { width: 16px; height: 2px; }
.bs-accordion__sign::after  { width: 2px;  height: 16px; }
.bs-accordion.is-open .bs-accordion__sign::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.bs-accordion__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
}
.bs-accordion.is-open .bs-accordion__body {
	grid-template-rows: 1fr;
}

/* Accordion body text — role: body-sm */
.bs-accordion__body-inner {
	min-height: 0;
	overflow: hidden;
	color: var(--bs-color-text);
	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-accordion.is-open .bs-accordion__body-inner {
	padding-bottom: 20px;
}

/* ---------- Recent products slider — aligned left, home design --------
   Inherits .home-section.home-bestsellers + section title role from home.css. */
.bs-product-recent .home-section__header {
	justify-content: flex-start;
	gap: 24px;
}
.bs-product-recent .home-section__title {
	margin-right: auto;
}

/* =========================================================================
   PER-STORE STOCK CARD — sits between the add-to-cart form and the existing
   shortcode availability block on the product summary.
   States (driven by `data-state`):
     • none     no store chosen (gray, info)
     • in       healthy stock (green)
     • low      low stock (yellow)
     • out      out of stock (red)
     • unknown  store chosen but ACF empty (gray)
   ========================================================================= */
.bs-stock-card {
	margin-top: var(--bs-space-sm);
	padding: var(--bs-space-md);
	background: #fff;
	border: 1px solid var(--bs-color-border);
	border-radius: 0;
	box-shadow: 0 4px 14px rgba(16, 54, 86, .04);
}
.bs-stock-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}
.bs-stock-card__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bs-color-muted);
	flex-shrink: 0;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .04);
}
.bs-stock-card__title {
	margin: 0;
	color: var(--bs-color-primary);
	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-stock-card__line {
	margin: 0 0 var(--bs-space-sm);
	color: var(--bs-color-text);
	font-size:   var(--bs-type-body-size);
	line-height: var(--bs-leading-snug);
}
.bs-stock-card__foot {
	display: flex;
	gap: var(--bs-space-sm);
	flex-wrap: wrap;
}
.bs-stock-card__change {
	background: transparent;
	border: 0;
	padding: 6px 0;
	cursor: pointer;
	color: var(--bs-color-primary);
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bs-stock-card__change:hover { color: var(--bs-color-primary-dark); }

/* State variants — only the accent color / dot changes, layout stays put. */
.bs-stock-card[data-state="in"]      { border-color: rgba(20, 142, 64, .35); background: linear-gradient(180deg, rgba(20,142,64,.05) 0%, #fff 100%); }
.bs-stock-card[data-state="in"]      .bs-stock-card__dot { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .12); }

.bs-stock-card[data-state="low"]     { border-color: rgba(250, 184, 0, .55); background: linear-gradient(180deg, rgba(250,184,0,.08) 0%, #fff 100%); }
.bs-stock-card[data-state="low"]     .bs-stock-card__dot { background: var(--bs-color-accent); box-shadow: 0 0 0 4px rgba(250, 184, 0, .18); }

.bs-stock-card[data-state="out"]     { border-color: rgba(200, 35, 51, .35); background: linear-gradient(180deg, rgba(200,35,51,.05) 0%, #fff 100%); }
.bs-stock-card[data-state="out"]     .bs-stock-card__dot { background: #c82333; box-shadow: 0 0 0 4px rgba(200, 35, 51, .12); }

.bs-stock-card[data-state="unknown"] .bs-stock-card__dot { background: var(--bs-color-muted); }

.bs-stock-card[data-state="none"]    { background: var(--bs-color-bg-alt); border-style: dashed; }
.bs-stock-card[data-state="none"]    .bs-stock-card__dot { background: var(--bs-color-primary); box-shadow: 0 0 0 4px rgba(0, 91, 167, .12); }

@media (max-width: 600px) {
	.bs-stock-card { padding: var(--bs-space-sm); border-radius: 12px; }
	.bs-stock-card__title { font-size: var(--bs-type-h4-size); }
}

/* Bouton « Ajouter au panier » de la fiche : états AJAX (sans reload). */
.bs-product-summary__atc.is-loading { opacity: .75; cursor: progress; }
/* Confirmé : bascule en jaune charte + texte noir (le JS met « Ajouté ✓ »). */
.bs-product-summary__atc.is-added {
	background: var(--bs-color-accent) !important;
	color: #000 !important;
}