/* ==========================================================================
   Module Divi « Produit (bouteille) »
   Valeurs standard relevées sur la maquette Figma (artboard 1920 px).
   Les tailles sont fluides : valeur Figma atteinte à 1920 px de large.
   ========================================================================== */

.pbx_product_box {
	--pbx-navy: #1D2245;
	--pbx-navy-soft: #1F274B;
	--pbx-rust: #983B25;

	/* Ajustements à la marge (surchargés par le module si modifiés) */
	--pbx-img-scale: 1;
	--pbx-stamp-x: 0px;
	--pbx-stamp-y: 0px;
	--pbx-wm-scale: 1;
	--pbx-wm-x: 0px;
	--pbx-wm-y: 0px;

	position: relative;
	container-type: inline-size;        /* la zone photo s'adapte à la colonne */
	color: var(--pbx-navy);
	text-align: center;
}

/* --- Zone photo ----------------------------------------------------------- */
/* Figma : bouteille + étui = 344 × 573 px.
   Hauteur = valeur Figma (fluide), limitée par la largeur de la colonne. */

.pbx_product_box .pbx-media {
	--pbx-media-h: min(
		calc(clamp(300px, 29.85vw, 575px) * var(--pbx-img-scale)),
		calc(100cqw * 1.6 * var(--pbx-img-scale))
	);
	position: relative;
	display: flex;
	align-items: flex-end;              /* photos alignées sur leur base */
	justify-content: center;
	gap: clamp(12px, 1.6vw, 30px);      /* Figma : 30 px texte vertical ↔ photo */
	height: var(--pbx-media-h);
	margin-bottom: clamp(24px, 2.6vw, 50px);
}

.pbx_product_box .pbx-image-wrap {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.pbx_product_box .pbx-figure {
	position: relative;                 /* repère du tampon et du filigrane */
	display: inline-flex;
	height: 100%;
	max-width: 100%;
}

/* Ratio connu : le cadre épouse exactement la photo */
.pbx_product_box .pbx-figure--ratio {
	display: block;
	height: auto;
	width: min(100%, calc(var(--pbx-media-h) * var(--pbx-ratio)));
	aspect-ratio: var(--pbx-ratio);
}

.pbx_product_box .pbx-figure > a {
	position: relative;
	z-index: 1;
	display: block;
	height: 100%;
	max-width: 100%;
}

.pbx_product_box .pbx-image {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom center;
}

.pbx_product_box .pbx-figure--ratio > a,
.pbx_product_box .pbx-figure--ratio .pbx-image {
	width: 100%;
	height: 100%;
}

/* --- Filigrane (derrière) ------------------------------------------------- */
/* Figma : ~165 px de haut, dépasse de 35 px au-dessus de la photo */

.pbx_product_box .pbx-watermark {
	position: absolute;
	z-index: 0;
	top: calc(-6% + var(--pbx-wm-y));
	height: calc(29% * var(--pbx-wm-scale));
	width: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

.pbx_product_box .pbx-watermark--top_left  { left:  calc(4% + var(--pbx-wm-x)); }
.pbx_product_box .pbx-watermark--top_right { right: calc(4% - var(--pbx-wm-x)); }

/* --- Tampon (par-dessus) -------------------------------------------------- */
/* Figma : 108 × 108 px, 67 px du bord gauche, 60 px au-dessus de la photo */

.pbx_product_box .pbx-stamp {
	position: absolute;
	z-index: 2;
	top: calc(-10.5% + var(--pbx-stamp-y));
	width: 31.4%;
	height: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

.pbx_product_box .pbx-stamp--top_left  { left:  calc(19.5% + var(--pbx-stamp-x)); }
.pbx_product_box .pbx-stamp--top_right { right: calc(8% - var(--pbx-stamp-x)); }

/* --- Texte vertical ------------------------------------------------------- */
/* Figma : Token Sans Medium 40 px, capitales, +3 %, #983B25, lu de bas en haut */

.pbx_product_box .pbx-vertical {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	align-self: flex-end;
	max-height: 100%;
	overflow: hidden;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	font-family: token, "Token Sans", sans-serif;
	/* ne dépasse jamais la hauteur de la photo (~19 caractères) */
	font-size: min(clamp(24px, 2.08vw, 40px), calc(var(--pbx-media-h) / 13.5));
	font-weight: 500;
	line-height: 1;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--pbx-rust);
}

.pbx_product_box .pbx-vertical--black { color: #000; }
.pbx_product_box .pbx-vertical--navy  { color: var(--pbx-navy); }
.pbx_product_box .pbx-vertical--right { order: 2; }

/* --- Nom ------------------------------------------------------------------ */
/* Figma : Token Sans Bold 31 px, capitales, interligne 100 %, #1D2245 */

.pbx_product_box .pbx-title {
	margin: 0;
	padding: 0;
	font-family: token, "Token Sans", sans-serif;
	font-size: clamp(22px, 1.62vw, 31px);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	color: var(--pbx-navy);
}

/* --- Sous-titre ----------------------------------------------------------- */
/* Figma : Rowan Italic 20 px, -1 %, #1F274B */

.pbx_product_box .pbx-subtitle {
	margin: 6px 0 0;
	padding: 0;
	font-family: rowan, "Rowan", serif;
	font-size: clamp(16px, 1.05vw, 20px);
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--pbx-navy-soft);
}

/* --- Description ---------------------------------------------------------- */
/* Figma : Token Sans 22/29 px, accroche en Bold, largeur 458 px */

.pbx_product_box .pbx-description {
	max-width: 458px;
	margin: clamp(14px, 1.2vw, 22px) auto 0;
	font-family: token, "Token Sans", sans-serif;
	font-size: clamp(16px, 1.15vw, 22px);
	font-weight: 400;
	line-height: 1.32;
	color: var(--pbx-navy);
}

.pbx_product_box .pbx-description p {
	padding-bottom: 0;
	font-size: inherit;
	line-height: inherit;
}

.pbx_product_box .pbx-description strong,
.pbx_product_box .pbx-description b {
	font-weight: 700;
}

/* --- Bouton --------------------------------------------------------------- */
/* Aligné sur les boutons Divi du site (.et_pb_button_1 / _2) :
   bordure 1 px #0E102D, rayon 9 px, Token Medium 18 px, capitales */

.pbx_product_box .pbx-button-wrap {
	margin-top: clamp(22px, 1.8vw, 35px);
}

body #page-container .pbx_product_box .pbx-button.et_pb_button,
.pbx_product_box .pbx-button.et_pb_button {
	display: inline-block;
	padding: .3em 1em !important;
	border: 1px solid #0E102D;
	border-radius: 9px;
	background-color: transparent;
	font-family: token, "Token Sans", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.7em !important;
	text-transform: uppercase !important;
	color: #0E102D !important;
	transition: all 300ms ease 0ms;
}

body #page-container .pbx_product_box .pbx-button.et_pb_button:hover,
.pbx_product_box .pbx-button.et_pb_button:hover {
	padding: .3em 1em !important;
	border: 1px solid transparent !important;
	background-color: rgba(0, 0, 0, .06) !important;
	color: #0E102D !important;
}

/* Pas de flèche Divi, sauf si une icône personnalisée est choisie */
.pbx_product_box .pbx-button.et_pb_button:not(.et_pb_custom_button_icon):after {
	display: none;
}