/**
 * Fond de page et surfaces.
 *
 * La direction demande « a white order card inset on a pale tinted ground,
 * framed by a light band » : trois niveaux, le bandeau (#BFE0D8), le fond de
 * page (#F4FAF8) et les cartes (blanc). Seul le bandeau avait été posé ; le
 * fond restait blanc, donc les cartes ne se détachaient de rien.
 *
 * Teinter le fond ne suffit pas : Flatsome ne donne aucun fond aux cartes
 * produit ni aux encadrés du tunnel, qui sont transparents. Sans la seconde
 * moitié du geste, le site devient un aplat vert pâle uniforme. Les deux
 * vivent donc dans ce fichier.
 */

/* Flatsome peint #wrapper ET #main en blanc : un fond posé sur <body> seul est
   entièrement recouvert et ne se voit nulle part. Le fond se pose donc sur le
   wrapper, et les deux conteneurs au-dessus deviennent transparents pour le
   laisser passer. */
body,
#wrapper {
	background-color: var(--maelia-teal-100);
}

#main,
#content {
	background-color: transparent;
}

/* ---------------------------------------------------------------------------
 * Cartes produit (grille boutique, carrousels, produits liés)
 * ------------------------------------------------------------------------- */

.products .product-small.col > .col-inner {
	background-color: var(--maelia-surface);
	border: 1px solid var(--maelia-hairline);
	border-radius: var(--maelia-radius);
	overflow: hidden;
	transition: border-color .2s ease;
}

.products .product-small.col > .col-inner:hover {
	border-color: var(--maelia-teal-decor);
}

/* Le texte touchait le bord de la carte une fois le fond posé. */
.products .product-small.col > .col-inner .box-text {
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom: 14px;
}

/* ---------------------------------------------------------------------------
 * Panneaux : barre latérale, tunnel, compte, avis
 * ------------------------------------------------------------------------- */

.shop-sidebar .widget,
.sidebar-inner .widget,
.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
	background-color: var(--maelia-surface);
	border: 1px solid var(--maelia-hairline);
	border-radius: var(--maelia-radius);
	padding: 18px 20px;
	margin-bottom: 22px;
}

/* Flatsome donne déjà une marge basse aux widgets : la doubler creuse la
   colonne. */
.shop-sidebar .widget,
.sidebar-inner .widget {
	margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
 * Fiche produit : le haut de page est la « carte de commande » du contrat.
 * ------------------------------------------------------------------------- */

.single-product .product-main {
	background-color: var(--maelia-surface);
	border: 1px solid var(--maelia-hairline);
	border-radius: var(--maelia-radius);
	padding: 24px 24px 12px;
}

@media (max-width: 849px) {
	.single-product .product-main {
		padding: 16px 16px 8px;
	}
}