/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks-child
 Domain Path:  /languages
*/

/* ==========================================================================
   USP Bar Element
   ========================================================================== */

.usp-bar-wrapper {
	width: 100%;
}

.usp-bar-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}

.usp-item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.usp-item-link {
	text-decoration: none;
	color: inherit;
}

.usp-item-link:hover {
	opacity: 0.8;
}

.usp-icon {
	font-size: 16px;
	color: inherit;
}

.usp-text {
	font-size: 14px;
	font-weight: 500;
}

.usp-divider {
	width: 1px;
	height: 16px;
	background-color: currentColor;
	opacity: 0.3;
}

.usp-divider--dotted {
	border-left: 1px dotted currentColor;
	background-color: transparent;
}

.usp-divider--dashed {
	border-left: 1px dashed currentColor;
	background-color: transparent;
}

/* USP Bar CSS-Only Slider Animation - Mobile/Tablet (<= 991px) */

@media (max-width: 991px) {
	.usp-bar-container {
		position: relative;
		width: 100%;
		overflow: hidden;
		display: block;
	}

	.usp-item {
		width: 100%;
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-12px);
	}

	.usp-item:first-of-type {
		position: relative;
		inset: auto;
		opacity: 1;
		transform: translateY(0);
	}

	/* Hide dividers in slider mode */
	.usp-divider {
		display: none;
	}
}

/* ==========================================================================
   Why Choose Us Element
   ========================================================================== */

.why-choose-us-wrapper {
	width: 100%;
}

.why-choose-us-title {
	text-align: center;
	margin-bottom: 40px;
}

.why-choose-us-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

/* Stack on mobile when one-line setting is disabled */
@media (max-width: 768px) {
	.why-choose-us-cards {
		grid-template-columns: 1fr;
	}

	/* Keep one line on mobile when setting is enabled (default) */
	.why-choose-us--one-line-mobile .why-choose-us-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.why-choose-us-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

.why-choose-us-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 32px 24px;
}

.why-choose-us-icon {
	display: block;
	font-size: 48px;
	margin-bottom: 16px;
	line-height: 1;
}

.why-choose-us-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

/* ==========================================================================
   Product Labels
   ========================================================================== */

.product-label {
	display: inline-block;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 4px;
	margin-right: 8px;
	margin-bottom: 8px;
}

.product-label--bio {
	background-color: #22c55e;
	color: #ffffff;
}

.product-label--new {
	background-color: #3b82f6;
	color: #ffffff;
}

.product-label--top {
	background-color: #f59e0b;
	color: #ffffff;
}

.product-label--promotion {
	background-color: #ef4444;
	color: #ffffff;
}

/* ==========================================================================
   Product Badge - SVG Overlay
   ========================================================================== */

/* Badge container for absolute positioning */
.product-badge-wrapper {
	position: absolute;
	top: 0;
	left: 30px;
	width: 50px !important;
	height: 50px !important;
	z-index: 10;
	pointer-events: none;
}

/* Badge image styling */
.product-badge-image {
	display: block;
	width: 50px !important;
	height: 50px !important;
	max-width: none;
	object-fit: contain;
}

/* Ensure product thumbnail container has relative positioning */
.woocommerce ul.products li.product a img {
	position: relative;
}

/* Alternative: target the product link/container */
.woocommerce ul.products li.product {
	position: relative;
}

/* Ensure product card has proper stacking context */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	position: relative;
}

/* ==========================================================================
   Product Badge - Bricks Builder Single Product Page
   ========================================================================== */

/* Bricks product gallery wrapper - ensure it has positioning context */
.brxe-product-gallery,
.woocommerce-product-gallery__wrapper {
	position: relative;
}

/* Badge positioning for Bricks product gallery - ensure absolute positioning */
.brxe-product-gallery .product-badge-wrapper,
.woocommerce-product-gallery__wrapper .product-badge-wrapper {
	position: absolute;
	top: 0;
	left: 30px;
	z-index: 10;
	pointer-events: none;
}

#brx-content .brxe-product-gallery .product-badge-wrapper,
#brx-content .brxe-product-gallery .woocommerce-product-gallery__wrapper .product-badge-wrapper,
#brx-content .woocommerce-product-gallery__wrapper .product-badge-wrapper {
	width: 50px !important;
	height: 50px !important;
}

/* Badge image styling for gallery */
.brxe-product-gallery .product-badge-image,
.woocommerce-product-gallery__wrapper .product-badge-image {
	width: 50px !important;
	height: 50px !important;
	display: block;
	max-width: none;
	object-fit: contain;
}

#brx-content .brxe-product-gallery .product-badge-wrapper > .product-badge-image,
#brx-content .brxe-product-gallery .woocommerce-product-gallery__wrapper .product-badge-wrapper > .product-badge-image,
#brx-content .woocommerce-product-gallery__wrapper .product-badge-wrapper > .product-badge-image {
	width: 50px !important;
	height: 50px !important;
	max-width: none !important;
	min-width: 50px !important;
	min-height: 50px !important;
	object-fit: contain !important;
	flex: 0 0 50px !important;
}

/* Ensure the first image in gallery has positioning context */
.brxe-product-gallery .woocommerce-product-gallery__image:first-child,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child,
.brxe-product-gallery .woocommerce-product-gallery__image--placeholder,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image--placeholder {
	position: relative;
}

/* Fallback: also target standard WooCommerce single product gallery */
.woocommerce-single-product .product-badge-wrapper {
	position: absolute;
	top: 0;
	left: 30px;
	z-index: 10;
}

#brx-content.woocommerce-single-product .product-badge-wrapper {
	width: 50px !important;
	height: 50px !important;
}

/* ==========================================================================
   Product Badge - Slide Image Offset Fix
   ========================================================================== */

/* Offset for labels inside slide images to compensate for .wc-slick-slide padding */
/* Using position instead of margin to avoid affecting main thumb image */
.slide-image .product-badge-wrapper {
	top: -20px;
	left: -20px;
	right: auto;
}

/* 1:1 ratio for badges in slide images only */
.slide-image .product-badge-image {
	width: 50px !important;
	height: 50px !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* ==========================================================================
	 Slick Slide Price Fix
	 ========================================================================== */

.wc-slider-wrapper .slide-price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.wc-slider-wrapper .slide-price del,
.wc-slider-wrapper .slide-price ins {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	white-space: nowrap;
}

.wc-slider-wrapper .slide-price del {
	opacity: 0.7;
	text-decoration: line-through;
}

.wc-slider-wrapper .slide-price ins {
	text-decoration: none;
}

.wc-slider-wrapper .slide-price del .woocommerce-Price-amount,
.wc-slider-wrapper .slide-price del .eur-price {
	text-decoration: inherit;
}

/* ==========================================================================
	 Bricks Product Price Fix
	 ========================================================================== */

.products.woocommerce .repeater-item .dynamic[data-field-id="f1c856"] {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.products.woocommerce .repeater-item .dynamic[data-field-id="f1c856"] del,
.products.woocommerce .repeater-item .dynamic[data-field-id="f1c856"] ins {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	white-space: nowrap;
}

.products.woocommerce .repeater-item .dynamic[data-field-id="f1c856"] del {
	opacity: 0.7;
	text-decoration: line-through;
}

.products.woocommerce .repeater-item .dynamic[data-field-id="f1c856"] ins {
	text-decoration: none;
}

.products.woocommerce .repeater-item .dynamic[data-field-id="f1c856"] del .woocommerce-Price-amount,
.products.woocommerce .repeater-item .dynamic[data-field-id="f1c856"] del .eur-price {
	text-decoration: inherit;
}

/* ==========================================================================
   Checkout Badges Element
   ========================================================================== */

.checkout-badges-wrapper {
	width: 100%;
}

.checkout-badges-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}

@media (max-width: 991px) {
	.checkout-badges-container {
		grid-template-columns: 1fr;
	}
}

.checkout-badge-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.checkout-badge-label {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 500;
}

.checkout-badge-image {
	display: block;
	max-width: 80px;
	height: auto;
	object-fit: contain;
}