/**
 * BoisVision — blocs Panier et Commande de WooCommerce.
 *
 * WooCommerce propose deux systèmes pour le panier et la commande : les
 * anciens shortcodes et les blocs Gutenberg. Le thème habille les deux, car on
 * ignore lequel le marchand activera.
 *
 * Ces sélecteurs ciblent des classes fournies par WooCommerce : on ne peut ni
 * les renommer ni les préfixer. En revanche, on n'utilise aucun !important —
 * possible uniquement parce que les feuilles natives sont déchargées et qu'il
 * n'y a donc pas de guerre de spécificité à mener.
 */

.wc-block-components-title,
.wp-block-woocommerce-cart .wc-block-cart__submit-container {
	font-family: var(--bv-font-display);
}

.wc-block-components-product-name {
	color: var(--bv-bark);
	font-size: var(--bv-text-sm);
	font-weight: 500;
	text-decoration: none;
}

.wc-block-components-product-price,
.wc-block-components-totals-item__value {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.wc-block-components-totals-item__value {
	color: var(--bv-bark);
}

.wc-block-cart-items__row {
	border-block-end: var(--bv-line);
}

.wc-block-components-panel,
.wc-block-components-totals-wrapper {
	border-color: var(--bv-rule);
}

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--bv-space-md);
	border: var(--bv-line);
	border-radius: var(--bv-r-lg);
	background-color: var(--bv-linen);
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-combobox input,
.wc-block-components-textarea {
	border: 1px solid var(--bv-shade-14);
	border-radius: var(--bv-r);
	background-color: var(--bv-paper);
	color: var(--bv-bark);
	font-size: var(--bv-text-sm);
}

.wc-block-components-text-input.is-active input:focus,
.wc-block-components-combobox input:focus {
	border-color: var(--bv-ember);
	box-shadow: 0 0 0 3px var(--bv-ember-050);
	outline: none;
}

.wc-block-components-text-input label,
.wc-block-components-checkbox__label {
	color: var(--bv-muted);
	font-size: var(--bv-text-sm);
}

.wc-block-components-checkbox__input {
	accent-color: var(--bv-ember);
}

/* Boutons : même mécanique de remplissage par le bas que le reste. */
.wc-block-components-button:not(.is-link) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 0;
	border-radius: var(--bv-r-pill);
	background-color: var(--bv-ember);
	color: var(--bv-paper);
	font-family: var(--bv-font-body);
	font-size: var(--bv-text-sm);
	font-weight: 600;
	padding: 0.95rem 1.75rem;
	transition: color var(--bv-dur-mid) var(--bv-ease);
}

.wc-block-components-button:not(.is-link)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--bv-ember-700);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--bv-dur-mid) var(--bv-ease-mass);
}

.wc-block-components-button:not(.is-link):hover::before {
	transform: scaleY(1);
}

.wc-block-components-button.is-link {
	color: var(--bv-muted);
	font-size: var(--bv-text-xs);
}

.wc-block-components-quantity-selector {
	border: 1px solid var(--bv-shade-14);
	border-radius: var(--bv-r);
}

.wc-block-components-quantity-selector__button {
	color: var(--bv-muted);
}

.wc-block-components-notice-banner {
	border-radius: var(--bv-r);
	border-inline-start-width: 2px;
	font-size: var(--bv-text-sm);
}

.wc-block-components-notice-banner.is-success {
	background-color: var(--bv-success-bg);
	border-color: var(--bv-success);
	color: var(--bv-success);
}

.wc-block-components-notice-banner.is-error {
	background-color: var(--bv-danger-bg);
	border-color: var(--bv-danger);
	color: var(--bv-danger);
}

.wc-block-components-notice-banner.is-info {
	background-color: var(--bv-linen);
	border-color: var(--bv-rule);
	color: var(--bv-bark);
}

.wc-block-components-radio-control__option {
	border-radius: var(--bv-r);
}

.wc-block-components-radio-control__input {
	accent-color: var(--bv-ember);
}

.wc-block-components-product-metadata {
	color: var(--bv-muted);
	font-size: var(--bv-text-xs);
}