/* BP Product Information widget styles
 *
 * Tunisia product page "INFORMATIONS PRODUIT" section. Centered
 * header (eyebrow + serif title + description) above a 2-column
 * desktop layout (left ~40% / right ~60%) inside a centered
 * 1140px max-width container.
 *
 * Layout:
 *   - transparent outer section (no section background, no shadow)
 *   - centered inner (max 1140px, inline-size: calc(100% - 40px))
 *   - centered header: eyebrow + serif title + description
 *   - 2-column main grid: left card | right card
 *   - left card: section icon + heading, 5 vertical characteristic
 *     rows (icon + title + description), olive divider, "AVANTAGES
 *     CLÉS" + 4 icon+label columns
 *   - right card: section icon + heading + subtitle, two pricing
 *     blocks (G3 + G4) with left visual area (code / version /
 *     product image) and right table, contact strip at the bottom
 *   - on mobile (max-width 860px) cards stack in source order:
 *     header → left card → G3 → G4 → contact strip
 *   - on mobile, pricing tables convert to stacked mobile pricing
 *     cards (one card per row); the desktop layout is preserved
 *   - tablet (max-width 1024px) reflows the 2-column grid into a
 *     single column while keeping the G3/G4 visual+table side by
 *     side inside each pricing block
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #FFFFFF  white
 *   plus existing neutral tokens (#FBF6EC, #E4DCCB, #1F2A1F,
 *   #5C6A5C). No invented greens or browns.
 *
 * All rules are scoped under `.bp-product-information` and use
 * logical CSS properties (margin-inline, padding-inline,
 * inset-inline …) so LTR and RTL share the same ruleset.
 */

.bp-product-information {
	/* ---- Theme tokens (approved palette only) ---- */
	--bp-pi-bg:             transparent;
	--bp-pi-card-bg:        #FBF6EC;
	--bp-pi-card-border:    #E4DCCB;
	--bp-pi-card-radius:    18px;
	--bp-pi-card-border-w:  1px;

	--bp-pi-green:          #374F37;
	--bp-pi-olive:          #B8B25A;
	--bp-pi-cream:          #EDDBC3;
	--bp-pi-white:          #FFFFFF;
	--bp-pi-text:           #1F2A1F;
	--bp-pi-text-muted:     #5C6A5C;
	--bp-pi-border:         #E4DCCB;

	--bp-pi-inner-max:      1140px;
	--bp-pi-cards-gap:      24px;            /* tight gap between the two main cards */
	--bp-pi-pricing-gap:    18px;            /* tight gap between G3 and G4 blocks */

	--bp-pi-font-body:      var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-pi-font-display:   var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	/* Decorative top-right botanical defaults — every value is
	 * fully overridable from Elementor per-device (desktop /
	 * tablet / mobile). */
	--bp-pi-botanical-width:    200px;
	--bp-pi-botanical-x:        0px;
	--bp-pi-botanical-y:        0px;
	--bp-pi-botanical-rotate:   0deg;
	--bp-pi-botanical-opacity:  100%;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding: 0;
	color: var(--bp-pi-text);
	font-family: var(--bp-pi-font-body);
	line-height: 1.5;
}

.bp-product-information *,
.bp-product-information *::before,
.bp-product-information *::after {
	box-sizing: border-box;
}

/* ---- Decorative top-right botanical ---- */
.bp-pi__botanical {
	position: absolute;
	inset-block-start: var(--bp-pi-botanical-y, 0px);
	right:  var(--bp-pi-botanical-x, 0px);
	left: auto;
	inline-size: var(--bp-pi-botanical-width, 200px);
	block-size: auto;
	pointer-events: none;
	z-index: 0;
	transform: translate(0, 0) rotate(var(--bp-pi-botanical-rotate, 0deg));
	transform-origin: top right;
	opacity: var(--bp-pi-botanical-opacity, 100%);
	color: var(--bp-pi-olive);
}
.bp-pi__botanical--default {
	display: block;
}
.bp-pi__botanical-svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

/* ---- Centered inner container (1140px max) ---- */
.bp-pi__inner {
	position: relative;
	z-index: 1;
	inline-size: calc(100% - 40px);
	max-inline-size: var(--bp-pi-inner-max);
	margin-inline: auto;
	padding-block: 64px;
}

/* =========================================================
 * HEADER (eyebrow + serif title + description)
 * ========================================================= */
.bp-pi__header {
	text-align: center;
	margin-block-end: 36px;
}

.bp-pi__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--bp-pi-green);
	font-family: var(--bp-pi-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.bp-pi__eyebrow-line {
	display: inline-block;
	inline-size: 56px;
	block-size: 1px;
	background: var(--bp-pi-olive);
}
.bp-pi__eyebrow-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-pi-olive);
}
.bp-pi__eyebrow-mark {
	inline-size: 18px;
	block-size: 18px;
	display: block;
}

.bp-pi__title {
	margin: 0 0 12px;
	color: #374F3C;
	font-family: var(--bp-pi-font-display);
	font-size: 48px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.bp-pi__description {
	margin: 0 auto;
	max-inline-size: 720px;
	color: var(--bp-pi-text);
	font-size: 15px;
	line-height: 1.6;
}

/* =========================================================
 * MAIN — 2-column grid (left card + right card)
 * ========================================================= */
.bp-pi__main {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: var(--bp-pi-cards-gap);
	align-items: stretch;       /* share row height between the two cards */
}

/* ---- Cards (shared) ---- */
.bp-pi__card {
	background-color: var(--bp-pi-card-bg);
	border: var(--bp-pi-card-border-w) solid var(--bp-pi-card-border);
	border-radius: var(--bp-pi-card-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	min-block-size: 0;          /* allow flex children to shrink without overflowing */
	height: 100%;               /* fill the grid row so both outer cards share one height */
}

/* The right card is the shorter one on desktop. Push its bottom
 * element (the contact strip) to the bottom of the stretched
 * card so the padding below it visually matches the bottom of
 * the left card. The natural content height of the children
 * stays untouched — we only re-position the contact strip. */
.bp-pi__card--right .bp-pi__contact-strip {
	margin-block-start: auto;
}

.bp-pi__card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-end: 18px;
}

.bp-pi__left-heading-icon,
.bp-pi__right-heading-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}
.bp-pi__left-heading-icon i,
.bp-pi__right-heading-icon i,
.bp-pi__left-heading-icon svg,
.bp-pi__right-heading-icon svg {
	inline-size: 24px;
	block-size: 24px;
	fill: #374F37;
	stroke: #374F37;
}

.bp-pi__left-heading,
.bp-pi__right-heading {
	margin: 0;
	color: var(--bp-pi-green);
	font-family: var(--bp-pi-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* =========================================================
 * LEFT CARD — characteristics + avantages clés
 * ========================================================= */
.bp-pi__chars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.bp-pi__char {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-block: 14px;
	border-top: 1px solid rgba(184,178,90,0.25);
}
.bp-pi__char:first-child {
	border-top: 0;
	padding-block-start: 0;
}
.bp-pi__char:last-child {
	padding-block-end: 0;
}

.bp-pi__char-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 999px;
	background: rgba(55,79,55,0.08);
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}
.bp-pi__char-icon i {
	font-size: 20px;
	color: #374F37;
}
.bp-pi__char-icon svg {
	inline-size: 20px;
	block-size: 20px;
	fill: #374F37;
	stroke: #374F37;
}

.bp-pi__char-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-inline-size: 0;
}
.bp-pi__char-title {
	color: var(--bp-pi-green);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.bp-pi__char-desc {
	color: var(--bp-pi-text);
	font-size: 13px;
	line-height: 1.55;
}

/* ---- Avantages clés ---- */
.bp-pi__advantages-divider {
	inline-size: 100%;
	block-size: 1px;
	background: rgba(184,178,90,0.45);
	margin-block: 24px;
}

.bp-pi__advantages-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	color: var(--bp-pi-green);
	font-family: var(--bp-pi-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.bp-pi__advantages-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-pi-olive);
}
.bp-pi__advantages-leaf svg {
	inline-size: 16px;
	block-size: 16px;
}

.bp-pi__advantages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 8px;
}

.bp-pi__advantage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 8px 4px;
	text-align: center;
	min-inline-size: 0;
}
.bp-pi__adv-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}
.bp-pi__adv-icon i {
	font-size: 28px;
	color: #374F37;
}
.bp-pi__adv-icon svg {
	inline-size: 28px;
	block-size: 28px;
	fill: #374F37;
	stroke: #374F37;
}
/* Size bump for the Avantages Clés icons (overrides the
 * Elementor slider inline CSS at 28px). */
.elementor-widget-bp-product-information .bp-pi__adv-icon {
	inline-size: 40px !important;
	block-size: 40px !important;
}
.elementor-widget-bp-product-information .bp-pi__adv-icon i {
	font-size: 40px !important;
}
.elementor-widget-bp-product-information .bp-pi__adv-icon svg {
	inline-size: 40px !important;
	block-size: 40px !important;
}
.bp-pi__adv-label {
	color: var(--bp-pi-text);
	font-size: 11px;
	line-height: 1.4;
	white-space: normal;
}

/* =========================================================
 * RIGHT CARD — header + pricing + contact strip
 * ========================================================= */
.bp-pi__right-subtitle {
	margin: 0 0 18px;
	color: var(--bp-pi-text);
	font-size: 14px;
	line-height: 1.55;
}

.bp-pi__pricing {
	display: flex;
	flex-direction: column;
	gap: var(--bp-pi-pricing-gap);
}

.bp-pi__pricing-block {
	display: grid;
	grid-template-columns: 38% 1fr;
	gap: 14px;
	align-items: stretch;
	padding: 14px;
	background: rgba(255,255,255,0.6);
	border: 1px solid var(--bp-pi-border);
	border-radius: 12px;
}

.bp-pi__pricing-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	padding: 6px 4px;
	min-inline-size: 0;
}
.bp-pi__pricing-code {
	font-family: var(--bp-pi-font-display);
	font-size: 64px;
	line-height: 1;
	color: var(--bp-pi-green);
	font-weight: 400;
}
.bp-pi__pricing-block--g4 .bp-pi__pricing-code {
	color: var(--bp-pi-olive);
}
.bp-pi__pricing-version {
	color: var(--bp-pi-green);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
}
/* Shared product-image wrapper used by BOTH G3 and G4 blocks.
 * Same inline-size and block-size so the two visual boxes are
 * always identical; the inner <img> fills the box with
 * object-fit: contain so the package artwork is never cropped. */
.bp-pi__pricing-product {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 0;
	margin-block-start: 4px;
	inline-size: 160px;
	block-size: 200px;
	max-inline-size: 100%;
}
.bp-pi__pricing-product img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: contain;
	object-position: center;
}

.bp-pi__pricing-right {
	display: flex;
	align-items: stretch;
	min-inline-size: 0;
}
.bp-pi__table {
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
	overflow: hidden;
	border-radius: 10px;
	font-size: 12px;
	box-shadow: 0 4px 16px rgba(55, 79, 55, 0.10), 0 1px 2px rgba(55, 79, 55, 0.06);
}
.bp-pi__table thead th {
	background: var(--bp-pi-green);
	color: var(--bp-pi-white);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 10px 8px;
	font-size: 10px;
	text-align: start;
	border: 0;
}
.bp-pi__pricing-block--g4 .bp-pi__table thead th {
	background: var(--bp-pi-olive);
	color: var(--bp-pi-white);
}
.bp-pi__pricing-block--g3 .bp-pi__pricing-code {
	color: var(--bp-pi-olive);
}
.bp-pi__pricing-block--g3 .bp-pi__table thead th {
	background: var(--bp-pi-olive);
	color: var(--bp-pi-white);
}
.bp-pi__table thead th + th {
	border-inline-start: 1px solid rgba(255,255,255,0.18);
}
.bp-pi__table tbody td {
	background: var(--bp-pi-white);
	color: var(--bp-pi-text);
	padding: 10px 8px;
	border-block-start: 1px solid var(--bp-pi-border);
	font-size: 12px;
}
.bp-pi__table tbody tr:nth-child(even) td {
	background: rgba(0,0,0,0.02);
}
.bp-pi__table tbody td + td {
	border-inline-start: 1px solid var(--bp-pi-border);
}
.bp-pi__table tbody td[data-bp-request="1"] {
	color: var(--bp-pi-olive);
	font-style: italic;
}

/* ---- Contact strip ---- */
.bp-pi__contact-strip {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-block-start: 18px;
	padding: 14px 18px;
	background: rgba(255,255,255,0.6);
	border-radius: 12px;
}
.bp-pi__contact-headset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 999px;
	background-color: #FFFFFF;
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
	flex: 0 0 auto;
}
.bp-pi__contact-headset i,
.bp-pi__contact-headset svg {
	inline-size: 32px;
	block-size: 32px;
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}
.bp-pi__contact-text {
	margin: 0;
	color: var(--bp-pi-text);
	font-size: 13px;
	line-height: 1.5;
	flex: 1 1 auto;
	min-inline-size: 0;
}
.bp-pi__contact-divider {
	inline-size: 1px;
	block-size: 36px;
	background: rgba(184,178,90,0.45);
	flex: 0 0 auto;
}
.bp-pi__contact-botanical {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	color: var(--bp-pi-olive);
	flex: 0 0 auto;
}
.bp-pi__contact-botanical img,
.bp-pi__contact-botanical svg {
	inline-size: 36px;
	block-size: 36px;
	display: block;
}
.bp-pi__contact-quote {
	margin: 0;
	color: var(--bp-pi-text);
	font-size: 13px;
	line-height: 1.5;
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* =========================================================
 * TABLET (max-width 1024px) — single column main, keep pricing
 * ========================================================= */
@media (max-width: 1024px) {
	.bp-pi__main {
		grid-template-columns: 1fr;
		align-items: start;         /* stop stretching once the cards stack */
	}
	.bp-pi__card {
		height: auto;              /* let each card take its natural content height */
	}
	.bp-pi__card--right .bp-pi__contact-strip {
		margin-block-start: 0;     /* reset the desktop push-to-bottom */
	}
	.bp-pi__title {
		font-size: 40px;
	}
}

/* =========================================================
 * MOBILE (max-width 860px) — stack everything, mobile cards
 * ========================================================= */
@media (max-width: 860px) {
	.bp-pi__inner {
		inline-size: calc(100% - 24px);
		padding-block: 48px;
	}
	.bp-pi__title {
		font-size: 32px;
	}
	.bp-pi__eyebrow-line {
		inline-size: 32px;
	}
	.bp-pi__main {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	/* Characteristics stay vertical but reduce icon size */
	.bp-pi__char-icon {
		inline-size: 36px;
		block-size: 36px;
	}
	.bp-pi__char-icon i {
		font-size: 18px;
	}
	.bp-pi__char-icon svg {
		inline-size: 18px;
		block-size: 18px;
	}

	/* Avantages: 2x2 grid on mobile, same shared dimensions */
	.bp-pi__advantages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 8px;
	}

	/* Right card: pricing blocks stay horizontal but smaller */
	.bp-pi__pricing-block {
		grid-template-columns: 32% 1fr;
		gap: 10px;
		padding: 10px;
	}
	.bp-pi__pricing-code {
		font-size: 44px;
	}
	/* G3 / G4 product image — keep shared dimensions, just smaller */
	.bp-pi__pricing-product {
		inline-size: 110px;
		block-size: 140px;
	}
	.bp-pi__pricing-product img {
		inline-size: 100%;
		block-size: 100%;
	}
	.bp-pi__table {
		font-size: 11px;
	}
	.bp-pi__table thead th,
	.bp-pi__table tbody td {
		padding: 8px 6px;
	}

	/* Contact strip wraps gracefully */
	.bp-pi__contact-strip {
		flex-wrap: wrap;
		gap: 12px;
		padding: 12px;
	}
	.bp-pi__contact-headset {
		inline-size: 52px;
		block-size: 52px;
	}
	.bp-pi__contact-headset i,
	.bp-pi__contact-headset svg {
		inline-size: 26px;
		block-size: 26px;
	}
	.bp-pi__contact-text,
	.bp-pi__contact-quote {
		flex: 1 1 calc(50% - 70px);
	}
	.bp-pi__contact-divider {
		block-size: 28px;
	}
	.bp-pi__contact-botanical {
		inline-size: 32px;
		block-size: 32px;
	}
	.bp-pi__contact-botanical img,
	.bp-pi__contact-botanical svg {
		inline-size: 32px;
		block-size: 32px;
	}
}

@media (max-width: 540px) {
	.bp-pi__inner {
		inline-size: calc(100% - 32px);
	}
	.bp-pi__title {
		font-size: 26px;
	}
	.bp-pi__description {
		font-size: 14px;
	}

	/* Convert pricing table rows to stacked mobile cards.
	 * We do NOT touch the desktop table (it uses thead/tbody
	 * for the full-size layout). The stacked layout is
	 * applied only on very small screens. */
	.bp-pi__pricing-block {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.bp-pi__pricing-left {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		padding: 0;
	}
	.bp-pi__pricing-code {
		font-size: 40px;
	}
	.bp-pi__pricing-version {
		text-align: start;
	}
	.bp-pi__pricing-product {
		margin-inline-start: auto;
		margin-block-start: 0;
		inline-size: 80px;
		block-size: 100px;
	}
	.bp-pi__pricing-product img {
		inline-size: 100%;
		block-size: 100%;
	}

	.bp-pi__table thead {
		display: none;
	}
	.bp-pi__table,
	.bp-pi__table tbody,
	.bp-pi__table tr,
	.bp-pi__table td {
		display: block;
		inline-size: 100%;
	}
	.bp-pi__table tbody tr {
		background: var(--bp-pi-white);
		border: 1px solid var(--bp-pi-border);
		border-radius: 8px;
		padding: 8px 10px;
		margin-block-end: 8px;
	}
	.bp-pi__table tbody tr:nth-child(even) {
		background: var(--bp-pi-white);
	}
	.bp-pi__table tbody td {
		background: transparent;
		border: 0;
		padding: 4px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		font-size: 12px;
	}
	.bp-pi__table tbody td + td {
		border-block-start: 1px dashed rgba(184,178,90,0.3);
	}
	.bp-pi__table tbody td::before {
		content: attr(data-bp-label);
		color: var(--bp-pi-text-muted);
		font-size: 10px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.bp-pi__contact-strip {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.bp-pi__contact-divider {
		inline-size: 100%;
		block-size: 1px;
	}
	.bp-pi__contact-text,
	.bp-pi__contact-quote {
		flex: 1 1 100%;
	}
	.bp-pi__contact-botanical {
		align-self: flex-end;
	}
}

/* =========================================================
 * TINY MOBILE (≤ 360px)
 * Restore a comfortable ≥16px side gutter so content never
 * touches the viewport edges on the narrowest phones.
 * Tighten pricing visuals + tables to fit comfortably.
 * ========================================================= */
@media (max-width: 360px) {
	.bp-pi__inner {
		inline-size: calc(100% - 32px);
		padding-block: 40px;
	}
	.bp-pi__title {
		font-size: 23px;
	}
	.bp-pi__description {
		font-size: 13.5px;
	}
	.bp-pi__pricing-code {
		font-size: 36px;
	}
	.bp-pi__pricing-product {
		inline-size: 68px;
		block-size: 86px;
	}
	.bp-pi__table tbody td {
		font-size: 11.5px;
		gap: 10px;
	}
	.bp-pi__table tbody td::before {
		font-size: 9.5px;
	}
}

/* =========================================================
 * Safe-area insets (notched devices) — never touch screen
 * edges on phones with notches / cutouts.
 * The inner already provides ≥16px gutter via `inline-size:
 * calc(100% - 32px)`; this rule just bumps that gutter by
 * the safe-area inset on devices that have one.
 * ========================================================= */
@supports (padding: max(0px)) {
	.bp-pi__inner {
		padding-inline-start: max(0px, env(safe-area-inset-left));
		padding-inline-end:   max(0px, env(safe-area-inset-right));
	}
}

/* ---------------- SMALL MOBILE (≤ 480px) ----------------
 * Product-information cards + table cells forced to a
 * single vertical column. Data tables remain full-width
 * but allow horizontal scroll inside their own block so
 * pricing data stays readable. */
@media ( max-width: 480px ) {
	.bp-pi__inner {
		inline-size: calc(100% - 36px) !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
	}
	.bp-pi__cards,
	.bp-pi__grid,
	.bp-pi__row,
	.bp-pi__main,
	.bp-pi__content,
	.bp-pi__contact-strip,
	.bp-pi__pricing-block {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		column-gap: 0 !important;
		row-gap: 16px !important;
		width: 100% !important;
	}
	.bp-pi__card,
	.bp-pi__row > *,
	.bp-pi__main > * {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
	.bp-pi__table-wrapper {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		overflow-x: hidden !important;
	}
	.bp-pi__table {
		inline-size: 100% !important;
		min-inline-size: 0 !important;
		max-inline-size: 100% !important;
		table-layout: fixed !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
	}
	.bp-pi__table thead th,
	.bp-pi__table tbody td {
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
		hyphens: auto !important;
	}

	.bp-pi,
	.bp-product-information,
	.bp-product-information * {
		min-inline-size: 0 !important;
	}
}