/* Sitex Product Blocks  Zoro-style notice */
.sitex-pb-block {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--sitex-pb-bg, #eaf1f5);
	color: var(--sitex-pb-text, #1c4b63);
	border: 1px solid var(--sitex-pb-border, #d7e3ea);
	border-radius: 10px;
	padding: 16px 18px;
	margin: 14px 0;
	box-sizing: border-box;
	line-height: 1.4;
}

.sitex-pb-icon-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sitex-pb-icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
}

.sitex-pb-content {
	flex: 1 1 auto;
	min-width: 0;
}

.sitex-pb-heading {
	font-weight: 700;
	font-size: 1.02em;
	margin-bottom: 2px;
}

.sitex-pb-body {
	font-size: 0.92em;
	opacity: 0.95;
}

.sitex-pb-body p {
	margin: 0;
}

.sitex-pb-cta {
	flex: 0 0 auto;
	margin-left: auto;
}

.sitex-pb-btn {
	display: inline-block;
	background: var(--sitex-pb-btn-bg, var(--sitex-pb-text, #1c4b63));
	color: var(--sitex-pb-btn-text, #fff) !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9em;
	padding: 10px 18px;
	border-radius: 6px;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}

.sitex-pb-btn:hover,
.sitex-pb-btn:focus {
	opacity: 0.88;
	color: var(--sitex-pb-btn-text, #fff) !important;
}

/* Stack neatly on small screens */
@media (max-width: 480px) {
	.sitex-pb-block {
		flex-wrap: wrap;
		clear: both;
	}
	.sitex-pb-cta {
		width: 100%;
		margin-left: 0;
	}
	.sitex-pb-btn {
		display: block;
		text-align: center;
	}
}

/* Block 3 — price-triggered bubble (pill) */
.sitex-pb-bubble {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--sitex-pb-bubble-bg, #e5f6e5);
	color: var(--sitex-pb-bubble-text, #1e6b32);
	border: 1px solid var(--sitex-pb-bubble-border, #c4e8c4);
	border-radius: 999px;
	padding: 6px 14px;
	margin: 8px 0;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.3;
	box-sizing: border-box;
}

.sitex-pb-bubble-icon-wrap {
	display: inline-flex;
	align-items: center;
}

.sitex-pb-bubble-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	display: block;
}

.sitex-pb-bubble-text {
	white-space: normal;
}

/* Block 4 — "Staff Hot Pick" bubble, inline next to the SKU */
.sitex-pb-hotpick {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--sitex-pb-hp-bg, #ffe8cc);
	color: var(--sitex-pb-hp-text, #7a3d00);
	border: 1px solid var(--sitex-pb-hp-border, #f6c890);
	border-radius: 999px;
	padding: 3px 12px 3px 9px;
	margin-left: 10px;
	font-size: 0.8em;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

/* Ensure the theme can't grey out or lighten the bubble text */
.sitex-pb-hotpick,
.product-sku .sitex-pb-hotpick,
.sku_wrapper .sitex-pb-hotpick {
	color: var(--sitex-pb-hp-text, #7a3d00) !important;
}
.sitex-pb-hotpick .sitex-pb-hp-text,
.product-sku .sitex-pb-hotpick .sitex-pb-hp-text,
.sku_wrapper .sitex-pb-hotpick .sitex-pb-hp-text {
	color: var(--sitex-pb-hp-text, #7a3d00) !important;
	font-weight: 800 !important;
	line-height: 1;
}

/* Prevent themes (e.g. Blonwe base.css .product-sku span:not(.sku)) from dimming the bubble */
.sitex-pb-hotpick,
.product-sku .sitex-pb-hotpick,
.product-meta .product-sku .sitex-pb-hotpick,
.sku_wrapper .sitex-pb-hotpick,
.sitex-pb-hotpick .sitex-pb-hp-text,
.product-sku .sitex-pb-hotpick .sitex-pb-hp-text {
	opacity: 1 !important;
}

.sitex-pb-hp-icon-wrap {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.sitex-pb-hp-flame {
	display: block;
	width: 18px;
	height: 18px;
}

/* Uploaded icon: match text height, keep the image's own proportions (no squashing). */
.sitex-pb-hp-icon {
	height: 18px;
	width: auto;
	max-width: 34px;
	object-fit: contain;
	display: block;
}

/* Prevent duplication inside theme "sticky product" bars (e.g. Kalium .single-product-sticky).
   Some themes clone the add-to-cart / summary area into a sticky bar on scroll, which would
   otherwise duplicate our blocks. Hide our output inside those cloned containers. */
.single-product-sticky .sitex-pb-block,
.single-product-sticky .sitex-pb-bubble,
.single-product-sticky .sitex-pb-hotpick,
.product-sticky .sitex-pb-block,
.product-sticky .sitex-pb-bubble,
.product-sticky .sitex-pb-hotpick,
.tm-sticky-single-add-to-cart .sitex-pb-block,
.tm-sticky-single-add-to-cart .sitex-pb-bubble,
.tm-sticky-single-add-to-cart .sitex-pb-hotpick {
	display: none !important;
}

/* CLS / Reflow fix — prevent layout shift (Cumulative Layout Shift) on product pages.
   Blocks 1, 2, 5 & 6 are rendered server-side so they arrive with the initial HTML;
   the contain property stops them from affecting surrounding layout during paint. */
.sitex-pb-block {
	contain: layout style;
}

/* Block 3 bubble: contain its layout influence */
.sitex-pb-bubble {
	contain: layout style;
}

/* Block 4 (Staff Hot Pick) is JS-injected next to the SKU.
   Reserve the SKU line height so the line does not jump when the bubble appears. */
.product-sku {
	min-height: 1.5em;
}
.sitex-pb-hotpick {
	contain: layout style;
}