/* ==========================================================
   AW Plus Addons - Product Box Widget Styles
   ========================================================== */

.aw-product-box-wrapper ul.products { list-style: none; margin: 0; padding: 0; }

/* ---- Grid layout (only when layout = Grid) ---- */
.aw-product-box-wrapper.aw-layout-grid ul.products { display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 20px; }
.aw-product-box-wrapper.aw-layout-grid ul.products.columns-1 { grid-template-columns: repeat(1, 1fr); }
.aw-product-box-wrapper.aw-layout-grid ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.aw-product-box-wrapper.aw-layout-grid ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.aw-product-box-wrapper.aw-layout-grid ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.aw-product-box-wrapper.aw-layout-grid ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
.aw-product-box-wrapper.aw-layout-grid ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }
.aw-product-box-wrapper.aw-layout-grid ul.products.aw-few-products {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	justify-content: center !important;
	grid-template-columns: none !important;
}
.aw-product-box-wrapper.aw-layout-grid ul.products.aw-few-products li.product { flex: 0 0 270px; width: 270px; max-width: 100%; }

/* ---- Slider layout (only when layout = Slider) ---- */
.aw-product-box-wrapper.aw-layout-slider { position: relative; }
.aw-product-box-wrapper.aw-layout-slider ul.products { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 20px; }
.aw-product-box-wrapper.aw-layout-slider ul.products li.product {
	flex: 0 0 calc((100% - (var(--aw-slider-items, 4) - 1) * 20px) / var(--aw-slider-items, 4));
	width: calc((100% - (var(--aw-slider-items, 4) - 1) * 20px) / var(--aw-slider-items, 4));
}

.aw-product-box-wrapper.aw-layout-slider ul.products.slick-initialized { display: block; overflow: visible; gap: 0; }
.aw-product-box-wrapper.aw-layout-slider ul.products.slick-initialized li.product { flex: none; width: auto; }
.aw-product-box-wrapper.aw-layout-slider .slick-list {
	overflow-x: hidden !important;
	overflow-y: visible !important;
	margin: 0 -10px; /* fallback - overridden by the Gap Between Slides control */
	padding-top: 24px !important;
	padding-bottom: 10px !important;
	/* NOTE: padding-left/padding-right are intentionally NOT set here. When Center Mode is on,
	   Slick sets its own inline padding-left/padding-right on this element (from centerPadding) to
	   create the "side slides peek in and get cropped" look - forcing them here with !important
	   would silently override that and Center Mode would look like it's "not working". */
}
.aw-product-box-wrapper.aw-layout-slider li.product.slick-slide {
	margin: 0 10px !important; /* fallback - overridden by the Gap Between Slides control */
	overflow: visible !important;
}

/* Equal-height cards: make the track a flex row and stretch every slide to the tallest one, instead of each card only being as tall as its own content. */
.aw-product-box-wrapper.aw-layout-slider .slick-track {
	display: flex !important;
	align-items: stretch !important;
	overflow: visible !important;
}
.aw-product-box-wrapper.aw-layout-slider li.product.slick-slide { height: auto !important; }
.aw-product-box-wrapper.aw-layout-slider .aw-slick-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.25s ease, color 0.25s ease;
}
.aw-slick-arrow { background: #ffffff; color: #333333; }
.aw-slick-arrow:hover { background: #333333; color: #ffffff; }
.aw-product-box-wrapper.aw-layout-slider .aw-slick-arrow svg,
.aw-product-box-wrapper.aw-layout-slider .aw-slick-arrow i { color: inherit; fill: currentColor; }
.aw-product-box-wrapper.aw-layout-slider .aw-slick-arrow svg,
.aw-product-box-wrapper.aw-layout-slider .aw-slick-arrow i { width: 16px; height: 16px; font-size: 16px; line-height: 1; }
.aw-product-box-wrapper.aw-layout-slider .aw-slick-arrow.slick-disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.aw-product-box-wrapper.aw-layout-slider .aw-slick-prev { left: -18px; }
.aw-product-box-wrapper.aw-layout-slider .aw-slick-next { right: -18px; }

/* ---- Slider Navigation Style presets ---- */
/* Left Top - both arrows together, above the top-left corner */
.aw-product-box-wrapper.aw-layout-slider.aw-nav-left-top .aw-slick-prev { top: -46px; bottom: auto; left: 0; right: auto; transform: none; }
.aw-product-box-wrapper.aw-layout-slider.aw-nav-left-top .aw-slick-next { top: -46px; bottom: auto; left: 46px; right: auto; transform: none; }

/* Left Center - both arrows stacked on the left edge, vertically centered */
.aw-product-box-wrapper.aw-layout-slider.aw-nav-left-center .aw-slick-prev { top: 50%; bottom: auto; left: 10px; right: auto; transform: translateY(-46px); }
.aw-product-box-wrapper.aw-layout-slider.aw-nav-left-center .aw-slick-next { top: 50%; bottom: auto; left: 10px; right: auto; transform: translateY(10px); }

/* Left Bottom - both arrows together, below the bottom-left corner */
.aw-product-box-wrapper.aw-layout-slider.aw-nav-left-bottom .aw-slick-prev { top: auto; bottom: -46px; left: 0; right: auto; transform: none; }
.aw-product-box-wrapper.aw-layout-slider.aw-nav-left-bottom .aw-slick-next { top: auto; bottom: -46px; left: 46px; right: auto; transform: none; }

/* Right Top - both arrows together, above the top-right corner */
.aw-product-box-wrapper.aw-layout-slider.aw-nav-right-top .aw-slick-prev { top: -46px; bottom: auto; right: 46px; left: auto; transform: none; }
.aw-product-box-wrapper.aw-layout-slider.aw-nav-right-top .aw-slick-next { top: -46px; bottom: auto; right: 0; left: auto; transform: none; }

/* Right Center - both arrows stacked on the right edge, vertically centered */
.aw-product-box-wrapper.aw-layout-slider.aw-nav-right-center .aw-slick-prev { top: 50%; bottom: auto; right: 10px; left: auto; transform: translateY(-46px); }
.aw-product-box-wrapper.aw-layout-slider.aw-nav-right-center .aw-slick-next { top: 50%; bottom: auto; right: 10px; left: auto; transform: translateY(10px); }

/* Right Bottom - both arrows together, below the bottom-right corner */
.aw-product-box-wrapper.aw-layout-slider.aw-nav-right-bottom .aw-slick-prev { top: auto; bottom: -46px; right: 46px; left: auto; transform: none; }
.aw-product-box-wrapper.aw-layout-slider.aw-nav-right-bottom .aw-slick-next { top: auto; bottom: -46px; right: 0; left: auto; transform: none; }

/* Bottom Center - both arrows below the slider, side by side, centered */
.aw-product-box-wrapper.aw-layout-slider.aw-nav-bottom-center .aw-slick-prev { top: auto; bottom: -46px; left: 50%; right: auto; transform: translateX(-46px); }
.aw-product-box-wrapper.aw-layout-slider.aw-nav-bottom-center .aw-slick-next { top: auto; bottom: -46px; left: 50%; right: auto; transform: translateX(10px); }
.aw-product-box-wrapper ul.products li.product {
	display: flex !important;
	flex-direction: column !important;
	border: none;
	text-align: center;
	padding: 15px;
	margin: 0 !important;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	position: relative;
	list-style: none;
}
.aw-product-box-wrapper ul.products li.product:hover { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); transform: translateY(-4px); }
.aw-product-box-wrapper ul.products li.product a img { width: 100%; height: auto; display: block; margin: 0 auto 12px; aspect-ratio: 16 / 10;
    object-fit: cover;}
.aw-product-box-wrapper .woocommerce-loop-product__title a { color: inherit; text-decoration: none; }
.aw-product-box-wrapper .price {display: block; }
.aw-product-box-wrapper .star-rating { margin: 0 auto 10px; justify-content: center;}
.aw-product-box-wrapper a.button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	background: #333333;
	color: #ffffff;
	border-radius: 4px;
	text-decoration: none;
	font-size: 14px;
	border: none;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
}
.aw-product-box-wrapper a.button:hover { background: #555555; color: #ffffff; }
.aw-product-box-wrapper .aw-btn-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.aw-product-box-wrapper .aw-btn-arrow svg { display: block; }
.aw-product-box-wrapper a.button:hover .aw-btn-arrow,
.aw-product-box-wrapper .aw-buy-now-btn:hover .aw-btn-arrow {
	transform: translateX(4px);
}
.aw-product-box-wrapper .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #e74c3c;
	color: #fff;
	font-size: 12px;
	padding: 3px 8px;
	border-radius: 3px;
	min-height: auto;
	min-width: auto;
	line-height: normal;
	z-index: 1;
}
/* Category text/links */
.aw-product-box-wrapper .aw-product-category {display: block;}
.aw-product-box-wrapper .aw-product-category a { color: inherit; text-decoration: none; }
/* Short description */
.aw-product-box-wrapper .aw-product-description { color: inherit; margin: 6px 0 10px; }
.aw-product-box-wrapper .aw-product-description-list { list-style: none; margin: 6px 0 10px; padding: 0; text-align: left; }
.aw-product-box-wrapper .aw-product-description-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.aw-product-box-wrapper .aw-desc-icon svg { display: block; }
/* Stock status (uses WooCommerce's default .stock class) */
/* .aw-product-box-wrapper .stock { display: block; font-size: 13px; margin: 6px 0; font-weight: 500; }
.aw-product-box-wrapper .stock.in-stock { color: #2e8b57; }
.aw-product-box-wrapper .stock.out-of-stock { color: #e74c3c; } */
.aw-product-box-wrapper .aw-product-actions { display: flex !important; flex-direction: column; flex-wrap: wrap; gap: 10px; margin-top: auto !important; flex-shrink: 0; padding-top: 10px; }
/* Buy Now / Checkout button */
.aw-product-box-wrapper .aw-buy-now-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	background: transparent;
	border: 1px solid #333333;
	color: #333333;
	border-radius: 4px;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease;
}
.aw-product-box-wrapper .aw-buy-now-btn:hover { background: #333333; color: #ffffff; }
.aw-btn-arrow{ display:inline-flex; align-items:center; justify-content:center; }
.aw-btn-arrow i{ font-size:inherit; line-height:1; }
.aw-btn-arrow svg{ width:1em; height:1em; }

/* ---- Center Mode (Slick's centerMode/centerPadding, set via the "Center Mode" + "Center Padding" widget controls) ---- */
/* Slick adds "slick-current" to the centered slide and "slick-center" as well - fade/scale the side slides down slightly so the centered one reads as "active", matching the typical center-mode carousel look. Purely cosmetic, safe to remove/override from the Style tab's custom CSS if not wanted. */
.aw-product-box-wrapper.aw-layout-slider.aw-center-mode li.product.slick-slide {
	transition: opacity 0.3s ease, transform 0.3s ease;
	opacity: 0.6;
}
.aw-product-box-wrapper.aw-layout-slider.aw-center-mode li.product.slick-slide.slick-center,
.aw-product-box-wrapper.aw-layout-slider.aw-center-mode li.product.slick-current {
	opacity: 1;
}

/* ---- Break Out of Container (one side flush with the page container, the other side bleeding to the viewport edge - e.g. the "Measured Results" style card row) ---- */
/* Works by pulling the slider past its own wrapper on the chosen side using the classic 50vw trick: since the wrapper itself is centered inside the page container, "50vw minus half the wrapper's own width" is exactly the gap between the wrapper's edge and the browser edge on that side. */
.aw-product-box-wrapper.aw-layout-slider.aw-breakout-right,
.aw-product-box-wrapper.aw-layout-slider.aw-breakout-left {
	position: relative;
}
.aw-product-box-wrapper.aw-layout-slider.aw-breakout-right .slick-list {
	margin-right: calc(-1 * (50vw - 50%)) !important;
	padding-right: 0 !important;
}
.aw-product-box-wrapper.aw-layout-slider.aw-breakout-left .slick-list {
	margin-left: calc(-1 * (50vw - 50%)) !important;
	padding-left: 0 !important;
}
/* Pre-Slick-init fallback (flex row, before slick-list exists) so the bleed still shows if Slick JS hasn't finished loading yet. */
.aw-product-box-wrapper.aw-layout-slider.aw-breakout-right ul.products:not(.slick-initialized) {
	margin-right: calc(-1 * (50vw - 50%));
	padding-right: 0;
}
.aw-product-box-wrapper.aw-layout-slider.aw-breakout-left ul.products:not(.slick-initialized) {
	margin-left: calc(-1 * (50vw - 50%));
	padding-left: 0;
}

/* Responsive breakpoints (grid layout only - the slider's own "Slides to Show" responsive controls handle its breakpoints via Slick) */
@media (max-width: 1024px) {
	.aw-product-box-wrapper.aw-layout-grid ul.products.columns-5,
	.aw-product-box-wrapper.aw-layout-grid ul.products.columns-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.aw-product-box-wrapper.aw-layout-grid ul.products {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}

/* @media (max-width: 480px) {
	.aw-product-box-wrapper ul.products {
		grid-template-columns: repeat(1, 1fr) !important;
	}
} */