/**
 * Studio Tabs, fiche produit.
 *
 * La page repond dans l'ordre aux questions qui bloquent l'achat d'une table
 * basse : a quoi elle ressemble en vrai, en quel bois, quelles dimensions,
 * combien elle pese, quand elle arrive et en combien de colis. Tout est visible
 * sans ouvrir d'onglet, parce qu'une information rangee dans un onglet n'est lue
 * par presque personne.
 *
 * Elementor 4 n'emet pas les classes personnalisees des conteneurs : tout est
 * donc accroche a `body.single-product` et aux classes de WooCommerce, qui sont
 * stables, plutot qu'a des classes posees dans le constructeur.
 */

/**
 * Galerie.
 *
 * Les visuels melangent mises en situation et packshots detoures sur fond blanc.
 * Sans fond, un packshot blanc sur une page blanche est litteralement invisible.
 * On les pose donc sur un aplat sable, et on les cadre en "contain" : recadrer
 * couperait les pieds de la table, precisement ce qu'on cherche a voir.
 */
.single-product .woocommerce-product-gallery__wrapper img,
.single-product .flex-viewport img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background-color: var(--st-surface, #f6f6f6);
	border-radius: 0 0 0 var(--st-radius-md, 15px);
	padding: 24px;
}

.single-product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.single-product .flex-control-thumbs li {
	margin: 0;
	width: auto;
	float: none;
}

.single-product .flex-control-thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	background-color: var(--st-surface, #f6f6f6);
	border-radius: var(--st-radius-sm, 8px);
	padding: 8px;
	opacity: 0.55;
	transition: opacity 0.2s ease;
	cursor: pointer;
}

.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover {
	opacity: 1;
}

/* La loupe par defaut de WooCommerce se pose mal sur l'aplat : on la discretise. */
.single-product .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: var(--st-radius-pill, 999px);
}

/**
 * Colonne d'achat.
 */
.single-product .woocommerce-breadcrumb {
	margin: 0;
	color: var(--st-muted, #7a6a5f);
	font-size: 0.8125rem;
}

.single-product .woocommerce-breadcrumb a {
	color: var(--st-muted, #7a6a5f);
}

.single-product .product_title {
	margin: 0;
	font-family: var(--st-font, "Cabin", sans-serif);
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem);
	font-weight: 500;
	line-height: 1.1;
	color: var(--st-ink, #3d1e14);
}

.single-product .price,
.single-product .price .woocommerce-Price-amount {
	font-family: var(--st-font, "Cabin", sans-serif);
	font-size: 1.75rem;
	font-weight: 500;
	color: var(--st-ink, #3d1e14) !important;
}

/* La mention de TVA et de port evite la mauvaise surprise au panier, premier
   motif d'abandon sur du mobilier. */
.single-product .elementor-widget-woocommerce-product-price .price::after {
	content: "TTC, livraison comprise";
	display: block;
	margin-top: 2px;
	color: var(--st-muted, #7a6a5f);
	font-size: 0.8125rem;
	font-weight: 400;
}

.single-product .woocommerce-product-details__short-description {
	color: var(--st-muted, #7a6a5f);
	font-size: 1rem;
	line-height: 1.6;
}

.single-product .woocommerce-product-details__short-description p {
	margin: 0;
}

/**
 * Quatre informations cles, juste sous le prix.
 */
.st-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--st-line, #e4ded9);
	border: 1px solid var(--st-line, #e4ded9);
	border-radius: var(--st-radius-sm, 8px);
	overflow: hidden;
}

.st-specs__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	background-color: var(--st-bg, #ffffff);
}

.st-specs__label {
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--st-muted, #7a6a5f);
}

.st-specs__value {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--st-ink, #3d1e14);
}

/**
 * Ajout au panier.
 */
.single-product form.cart {
	display: flex;
	gap: 10px;
	align-items: stretch;
	margin: 0;
}

.single-product form.cart .quantity {
	flex: 0 0 auto;
	margin: 0;
}

.single-product form.cart .quantity input.qty {
	width: 76px;
	min-height: 47px;
	height: 100%;
	text-align: center;
	border: 1px solid var(--st-line, #e4ded9);
	border-radius: var(--st-radius-sm, 8px);
	font-size: 1rem;
}

.single-product form.cart button.single_add_to_cart_button,
.single-product .elementor-button-wrapper .single_add_to_cart_button {
	flex: 1 1 auto;
	/* Meme hauteur que tous les autres boutons du site. */
	min-height: 47px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--st-radius-pill, 999px);
	background-color: transparent;
	background-image: var(--st-btn);
	color: #ffffff;
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background-image 0.2s ease, transform 0.15s ease;
}

.single-product form.cart button.single_add_to_cart_button:hover {
	background-image: var(--st-btn-hover);
	color: #ffffff;
}

.single-product form.cart button.single_add_to_cart_button:active {
	transform: translateY(1px);
}

/**
 * Reassurance.
 *
 * Trois lignes, uniquement des engagements que la marque tient reellement.
 */
.st-reassure {
	margin: 0;
	padding: 16px 18px;
	list-style: none;
	background-color: var(--st-surface, #f6f6f6);
	border-radius: var(--st-radius-sm, 8px);
	display: grid;
	gap: 10px;
}

.st-reassure__item {
	display: grid;
	gap: 1px;
	font-size: 0.875rem;
	line-height: 1.4;
}

.st-reassure__item strong {
	color: var(--st-ink, #3d1e14);
	font-weight: 500;
}

.st-reassure__item span {
	color: var(--st-muted, #7a6a5f);
	font-size: 0.8125rem;
}

/**
 * Description, essence et livraison.
 */
.single-product .elementor-widget-woocommerce-product-content p,
.single-product .elementor-widget-woocommerce-product-content ul {
	max-width: 68ch;
	color: var(--st-ink, #3d1e14);
}

.single-product .elementor-widget-woocommerce-product-content ul {
	padding-left: 1.1em;
}

.single-product .elementor-widget-woocommerce-product-content li {
	margin-bottom: 6px;
}

.st-essence,
.st-livraison {
	padding: 22px 24px;
	background-color: var(--st-bg, #ffffff);
	border-radius: 0 0 0 var(--st-radius-md, 15px);
}

.st-essence__title,
.st-livraison__title {
	margin: 0 0 8px;
	font-family: var(--st-font, "Cabin", sans-serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--st-ink, #3d1e14);
}

.st-essence__text {
	margin: 0;
	color: var(--st-muted, #7a6a5f);
	line-height: 1.6;
}

.st-livraison ul {
	margin: 0;
	padding-left: 1.1em;
	color: var(--st-muted, #7a6a5f);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.st-livraison li {
	margin-bottom: 5px;
}

/**
 * Tableau des caracteristiques.
 */
.st-table {
	width: 100%;
	max-width: 760px;
	border-collapse: collapse;
}

.st-table th,
.st-table td {
	padding: 13px 0;
	text-align: left;
	border-bottom: 1px solid var(--st-line, #e4ded9);
	font-size: 0.9375rem;
}

.st-table th {
	width: 40%;
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-weight: 600;
	color: var(--st-muted, #7a6a5f);
}

.st-table td {
	color: var(--st-ink, #3d1e14);
}

/**
 * Produits associes.
 */
.single-product .elementor-widget-woocommerce-product-related h2 {
	font-family: var(--st-font, "Cabin", sans-serif);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
	font-weight: 400;
	color: var(--st-ink, #3d1e14);
	margin-bottom: 24px;
}

@media (min-width: 1025px) {
	.single-product .elementor-widget-woocommerce-product-related ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/**
 * Barre d'achat mobile.
 *
 * Sur mobile le bouton d'ajout sort de l'ecran des la premiere photo parcourue.
 * La barre le ramene sous le pouce, avec le nom et le prix pour que l'acheteur
 * sache toujours ce qu'il ajoute.
 */
.st-buybar {
	display: none;
}

/* La galerie etant collante, c'est la colonne d'achat qui defile : le bouton
   sort de l'ecran des qu'on entre dans la description. La barre le rappelle,
   sur toutes les tailles d'ecran et non plus seulement en tactile. */
.st-buybar:not([hidden]) {
		display: flex;
		align-items: center;
		gap: 12px;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 200;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background-color: var(--st-bg, #ffffff);
		border-top: 1px solid var(--st-line, #e4ded9);
		box-shadow: 0 -6px 20px rgba(61, 30, 20, 0.08);
	}

	.st-buybar__info {
		display: grid;
		min-width: 0;
	}

	.st-buybar__name {
		font-size: 0.8125rem;
		color: var(--st-muted, #7a6a5f);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.st-buybar__price,
	.st-buybar__price .woocommerce-Price-amount {
		font-size: 1rem;
		font-weight: 500;
		color: var(--st-ink, #3d1e14) !important;
	}

	.st-buybar__button {
		flex: 1 1 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 0 20px;
		border-radius: var(--st-radius-pill, 999px);
		background-image: var(--st-btn);
		color: #ffffff;
		font-family: var(--st-font-ui, "Figtree", sans-serif);
		font-weight: 600;
		font-size: 0.9375rem;
		text-decoration: none;
		/* Le libelle ne doit jamais passer sur deux lignes : la barre grandirait et
		   mangerait le contenu. C'est le nom du produit qui cede la place. */
		white-space: nowrap;
		flex: 0 1 auto;
	}

	.st-buybar__info {
		flex: 1 1 auto;
	}

/* La barre masque le pied de page : on lui rend sa place. */
body.single-product .elementor-location-footer {
	padding-bottom: 76px;
}

/* Sur grand ecran la barre reste centree sur le conteneur plutot que de barrer
   toute la largeur. */
@media (min-width: 1025px) {
	.st-buybar:not([hidden]) {
		justify-content: center;
		gap: 24px;
		padding: 12px 40px;
	}

	.st-buybar__info {
		flex: 0 1 auto;
	}

	.st-buybar__name {
		max-width: 420px;
		font-size: 0.9375rem;
	}

	.st-buybar__button {
		flex: 0 0 auto;
		min-width: 240px;
	}
}

@media (max-width: 767px) {
	.single-product .flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/**
 * Galerie : etat avant l'initialisation de FlexSlider.
 *
 * WooCommerce sort les cinq visuels empiles dans le document, puis FlexSlider les
 * met en ligne au chargement. Entre les deux, la colonne mesurait plus de
 * 6000 pixels de haut : ecran blanc geant, puis saut de mise en page brutal.
 *
 * Tant que FlexSlider n'a pas tourne, la liste est un enfant direct de la
 * galerie ; une fois initialisee, elle passe dans `.flex-viewport`. On se sert de
 * cette difference pour ne montrer que le premier visuel avant l'init, sans
 * aucun script.
 */
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > *:not(:first-child) {
	display: none;
}

/* Filet de securite : pendant le bref instant ou FlexSlider a deja deplace la
   liste dans son viewport mais n'a pas encore fixe sa hauteur, les visuels
   restent empiles. Une fois initialisee, la liste ne fait plus aucune hauteur
   (ses enfants sont flottants et clippes), donc ce plafond ne genera rien. */
.single-product .woocommerce-product-gallery__wrapper {
	max-height: 78vh;
	overflow: hidden;
}

/**
 * Date d'expedition.
 *
 * Une date sur le calendrier est nettement plus concrete qu'un nombre de jours.
 */
.st-expedition {
	margin: 0;
	font-size: 0.875rem;
	color: var(--st-muted, #7a6a5f);
}

.st-expedition strong {
	color: var(--st-ink, #3d1e14);
	font-weight: 500;
}

/**
 * Moyens de paiement.
 */
.st-paiement {
	display: grid;
	gap: 8px;
	margin: 0;
}

.st-paiement__label {
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--st-muted, #7a6a5f);
}

.st-paiement__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-paiement__list img {
	display: block;
	width: 46px;
	height: 32px;
}

/**
 * Schema cote.
 *
 * Le dessin est a l'echelle : c'est ce qui permet de juger d'un coup d'oeil
 * qu'une table est longue et basse, ce qu'une ligne de cotes ne transmet pas.
 */
.st-dim {
	padding: 22px 24px;
	background-color: var(--st-bg, #ffffff);
	border-radius: 0 0 0 var(--st-radius-md, 15px);
}

.st-dim__title {
	margin: 0 0 4px;
	font-family: var(--st-font, "Cabin", sans-serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--st-ink, #3d1e14);
}

.st-dim__svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 320px;
	margin: 4px 0 6px;
}

.st-dim__legend {
	margin: 0;
	color: var(--st-muted, #7a6a5f);
	font-size: 0.875rem;
}

/**
 * Vignettes.
 *
 * FlexSlider pose une largeur en pourcentage sur chaque <li> de la liste des
 * vignettes, calculee sur son propre nombre de colonnes. Cette largeur ecrasait
 * notre grille et reduisait les vignettes a une trentaine de pixels, perdues au
 * milieu de leur cellule. On rend la main a la grille.
 */
.single-product .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.single-product .flex-control-thumbs img {
	width: 100% !important;
	height: auto;
}

/**
 * Fleches de navigation.
 *
 * Cinq visuels ne se parcourent pas confortablement a la vignette seule. Les
 * fleches sont donc visibles en permanence : une commande qui n'apparait qu'au
 * survol n'existe pas pour qui ne survole pas, et se decouvre par hasard pour
 * les autres. Le survol se contente de les affirmer un peu.
 */
.single-product .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product .flex-direction-nav a {
	position: absolute;
	top: calc(50% - 32px);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: var(--st-radius-pill, 999px);
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 10px rgba(61, 30, 20, 0.12);
	color: var(--st-ink, #3d1e14);
	/* Le libelle textuel de FlexSlider est remplace par un chevron dessine. */
	font-size: 0;
	text-indent: 0;
	opacity: 1;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.single-product .flex-direction-nav a::before {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.single-product .flex-direction-nav .flex-prev {
	left: 14px;
}

.single-product .flex-direction-nav .flex-prev::before {
	transform: rotate(-135deg);
	margin-left: 3px;
}

.single-product .flex-direction-nav .flex-next {
	right: 14px;
}

.single-product .flex-direction-nav .flex-next::before {
	transform: rotate(45deg);
	margin-right: 3px;
}

.single-product .woocommerce-product-gallery:hover .flex-direction-nav a,
.single-product .flex-direction-nav a:focus-visible {
	background-color: #ffffff;
	box-shadow: 0 3px 14px rgba(61, 30, 20, 0.2);
}

.single-product .flex-direction-nav a:hover {
	background-color: #ffffff;
}

/* FlexSlider masque la fleche en bout de course : sans boucle, on la cache
   proprement plutot que de la laisser inerte. */
.single-product .flex-direction-nav .flex-disabled {
	opacity: 0 !important;
	pointer-events: none;
}

/* Sans survol possible, les fleches restent affichees. */
@media (hover: none) {
	.single-product .flex-direction-nav a {
		opacity: 1;
	}
}

/**
 * Disponibilite.
 *
 * Une ligne, juste au-dessus du bouton. Le chiffre n'apparait qu'en dessous de
 * cinq exemplaires : au-dela il n'apprend rien, et affiche en permanence il
 * ressemblerait a un compteur de rarete fabrique.
 */
/* WooCommerce affiche sa propre mention de disponibilite dans le bloc d'achat.
   Elle repete mot pour mot la ligne ci-dessous, sans sa mise en forme : on ne
   garde que la notre. */
.single-product .woocommerce-variation-availability,
.single-product .elementor-add-to-cart p.stock,
.single-product form.cart p.stock,
.single-product .summary p.stock {
	display: none;
}

.single-product .st-stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--st-ink, #3d1e14);
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
}

.single-product .st-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #2f7a4f;
}

.single-product .st-stock--low {
	color: var(--st-accent, #a3280a);
}

.single-product .st-stock--low::before {
	background-color: var(--st-accent, #a3280a);
}

.single-product .st-stock--out {
	color: var(--st-muted, #7a6a5f);
}

.single-product .st-stock--out::before {
	background-color: var(--st-muted, #7a6a5f);
}