/* Business Purchase Box — styles
   Color palette taken from the reference design:
   Navy:   #10214f
   Orange: #f5820a
   Green:  #16a34a
*/

:root {
	--bpb-navy: #10214f;
	--bpb-navy-dark: #0b1838;
	--bpb-orange: #f5820a;
	--bpb-green: #16a34a;
	--bpb-border: #e5e7eb;
	--bpb-bg-soft: #f8fafc;
	--bpb-text-muted: #6b7280;
}

/* ---- Product title & rating ----
   On some pages the theme/page-builder hides WooCommerce's own product
   title and rating with CSS (rather than omitting them from the template).
   Force them back to visible rather than duplicating them. */
.product_title,
h1.product_title,
.product_title.entry-title {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	width: auto !important;
	max-height: none !important;
	overflow: visible !important;
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	margin: 0 0 10px !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	color: var(--bpb-navy-dark) !important;
}

.woocommerce-product-rating,
.woocommerce-product-rating .star-rating,
p.stars,
.star-rating {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	overflow: visible !important;
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	color: #f5a623 !important;
	margin: 0 0 6px !important;
}

/* Fallback: our own duplicate title/rating, only rendered if the
   "Show title & rating" setting is enabled in the plugin admin. */
.bpb-product-title {
	font-size: 30px;
	font-weight: 800;
	color: var(--bpb-navy-dark);
	line-height: 1.25;
	margin: 0 0 10px;
}

.bpb-product-rating {
	margin: 0 0 6px;
}

.bpb-product-rating .star-rating {
	color: #f5a623;
}

/* ---- Price row (price + in-stock badge) ---- */
.bpb-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--bpb-border);
	border-bottom: 1px solid var(--bpb-border);
	margin: 14px 0;
}

.bpb-price-row .price {
	font-size: 30px;
	font-weight: 700;
	color: var(--bpb-navy-dark);
}

.bpb-stock-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 14px;
	color: var(--bpb-green);
}

.bpb-stock-badge svg {
	width: 16px;
	height: 16px;
	stroke: var(--bpb-green);
}

/* ---- Add to cart button ---- */
.single_add_to_cart_button,
a.single_add_to_cart_button,
button.single_add_to_cart_button {
	background: var(--bpb-navy) !important;
	border-color: var(--bpb-navy) !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	padding: 16px 24px !important;
	border-radius: 8px !important;
	width: 100%;
	letter-spacing: 0.2px;
	transition: background 0.2s ease;

	/* Force reliable vertical centering regardless of the theme's own
	   button styles (line-height / height rules are a common source of
	   text sitting too low or getting clipped). */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1.2 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
	text-align: center !important;
	white-space: nowrap;
}

.single_add_to_cart_button:hover,
a.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover {
	background: var(--bpb-navy-dark) !important;
	border-color: var(--bpb-navy-dark) !important;
}

/* ---- Business Purchase box ---- */
.bpb-business-box {
	background: var(--bpb-bg-soft);
	border: 1px solid var(--bpb-border);
	border-radius: 10px;
	padding: 20px;
	margin-top: 20px;
}

.bpb-business-header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 14px;
}

.bpb-icon-circle {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #e6ecfb;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bpb-icon-circle svg {
	width: 20px;
	height: 20px;
	stroke: var(--bpb-navy);
}

.bpb-icon-circle--sm {
	width: 36px;
	height: 36px;
	background: #fdecd8;
}

.bpb-icon-circle--sm svg {
	stroke: var(--bpb-orange);
	width: 18px;
	height: 18px;
}

.bpb-business-header h4 {
	margin: 0 0 2px;
	font-size: 17px;
	font-weight: 700;
	color: var(--bpb-navy-dark);
}

.bpb-business-header p {
	margin: 0;
	font-size: 14px;
	color: var(--bpb-text-muted);
}

.bpb-checklist {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 20px;
}

.bpb-checklist li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #1f2937;
	font-weight: 500;
}

.bpb-checklist li svg {
	width: 16px;
	height: 16px;
	stroke: var(--bpb-green);
	flex: 0 0 auto;
}

.bpb-btn-outline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: #fff;
	border: 1.5px solid var(--bpb-orange);
	color: var(--bpb-orange);
	font-weight: 700;
	font-size: 15px;
	padding: 13px 18px;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.bpb-btn-outline svg {
	width: 18px;
	height: 18px;
	stroke: var(--bpb-orange);
	transition: stroke 0.2s ease;
}

.bpb-btn-outline:hover {
	background: var(--bpb-orange);
	color: #fff;
	text-decoration: none;
}

.bpb-btn-outline:hover svg {
	stroke: #fff;
}

/* ---- Contact sales strip ---- */
.bpb-contact-row {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var(--bpb-border);
	border-radius: 10px;
	padding: 16px 18px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.bpb-contact-text {
	flex: 1 1 220px;
}

.bpb-contact-text strong {
	display: block;
	font-size: 14.5px;
	color: var(--bpb-navy-dark);
	margin-bottom: 2px;
}

.bpb-contact-text p {
	margin: 0;
	font-size: 13.5px;
	color: var(--bpb-text-muted);
}

.bpb-contact-link {
	font-weight: 700;
	font-size: 14px;
	color: var(--bpb-navy);
	text-decoration: none;
	white-space: nowrap;
}

.bpb-contact-link:hover {
	color: var(--bpb-orange);
	text-decoration: none;
}

/* ---- Trust badge row ---- */
.bpb-trust-row {
	display: flex;
	gap: 18px;
	border: 1px solid var(--bpb-border);
	border-radius: 10px;
	padding: 16px 18px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.bpb-trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 150px;
}

.bpb-trust-icon {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.bpb-trust-icon svg {
	width: 22px;
	height: 22px;
	stroke: var(--bpb-navy);
}

.bpb-trust-item strong {
	display: block;
	font-size: 13.5px;
	color: var(--bpb-navy-dark);
}

.bpb-trust-item span {
	font-size: 12.5px;
	color: var(--bpb-text-muted);
}

/* Variant used when the row is relocated under the gallery images by script.js */
.bpb-trust-row--under-gallery {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px 20px;
	margin-top: 20px;
}

.bpb-trust-row--under-gallery .bpb-trust-item {
	flex: 1 1 150px;
}

/* ---- Gallery framing (added via script.js once the gallery is found) ----
   Kept intentionally light: we only round image corners and give
   thumbnails a subtle frame. We deliberately do NOT add padding/border to
   the outer gallery container itself, since that eats into the available
   width and makes the whole gallery render smaller than the column it's
   actually given. */
.bpb-gallery-styled img {
	border-radius: 10px;
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
}

.bpb-gallery-styled a {
	display: inline-block;
	border-radius: 8px;
}

/* Thumbnails: give each one a subtle frame and hover/active highlight */
.bpb-gallery-styled ul img,
.bpb-gallery-styled ol img,
.bpb-gallery-styled .flex-control-thumbs img,
.bpb-gallery-styled [class*="thumb"] img {
	border: 2px solid var(--bpb-border);
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bpb-gallery-styled ul img:hover,
.bpb-gallery-styled ol img:hover,
.bpb-gallery-styled .flex-control-thumbs img:hover,
.bpb-gallery-styled [class*="thumb"] img:hover {
	border-color: var(--bpb-navy);
}

.bpb-gallery-styled ul .flex-active img,
.bpb-gallery-styled [class*="thumb"] .active img,
.bpb-gallery-styled [class*="thumb"] img.active {
	border-color: var(--bpb-navy);
	box-shadow: 0 0 0 1px var(--bpb-navy);
}

/* ---- Bottom feature icon grid ---- */
.bpb-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 40px 0;
}

.bpb-feature-item {
	background: #fff;
	border: 1px solid var(--bpb-border);
	border-radius: 10px;
	padding: 26px 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.bpb-feature-icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--bpb-bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bpb-feature-icon svg {
	width: 22px;
	height: 22px;
	stroke: var(--bpb-navy);
}

.bpb-feature-item strong {
	font-size: 14.5px;
	color: var(--bpb-navy-dark);
}

.bpb-feature-item span {
	font-size: 13px;
	color: var(--bpb-text-muted);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
	.bpb-checklist {
		grid-template-columns: 1fr;
	}
	.bpb-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.bpb-price-row .price {
		font-size: 24px;
	}
}

@media (max-width: 480px) {
	.bpb-feature-grid {
		grid-template-columns: 1fr;
	}
}