/**
 * Labz Product Slider ("Best Sellers") — styles for the custom Elementor widget.
 * Dark product cards + Swiper slider. Pure CSS, no framework.
 */
.labz-bs {
	--bs-accent:  #013851;          /* theme colour (buttons, links, accents) */
	--bs-accent2: #012a3d;          /* darker shade for hover */
	--bs-link:    #013851;
	--bs-badge:   #f7831a;
	--bs-card:        #ffffff;       /* white product card */
	--bs-card2:       #f5f8fc;
	--bs-card-border: #e6eaf0;
	--bs-name:        #0d1b2c;       /* dark text on white card */
	--bs-price:       #16263a;
	--bs-star-empty:  #d3dae3;
	--bs-border:  rgba(255, 255, 255, 0.08); /* dark-section elements (nav buttons) */
	--bs-text:    #eaf2fb;
	--bs-muted:   #7a8aa0;
	--bs-star:    #f6b21b;
	--bs-content-width: 1240px;     /* matches site header/footer width */

	max-width: var(--bs-content-width);
	margin-left: auto;
	margin-right: auto;
	background: transparent;
	padding: 40px 0;               /* no horizontal gutter on desktop; content flush to 1240 */
	color: var(--bs-name);
}
.labz-bs * { box-sizing: border-box; }

/* Header */
.labz-bs__head { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
/* Heading + View All sized & coloured to match the Shop by Category section */
.labz-bs__title {
	margin: 0; color: #0c2238; font-weight: 700; text-transform: uppercase;
	letter-spacing: 1.5px; font-size: clamp(20px, 2.6vw, 30px); line-height: 1; white-space: nowrap;
	margin-bottom: 0px !important;
}
.labz-bs__divider { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(13,27,44,0.18), rgba(13,27,44,0.04)); }
.labz-bs__viewall {
	display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
	color: #2f7fc4; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
	font-size: 14px; text-decoration: none; white-space: nowrap;
}
.labz-bs__arrow { display: block; flex: none; transition: transform 0.2s ease; }
.labz-bs__viewall:hover .labz-bs__arrow { transform: translateX(4px); }

/* Swiper track. Vertical padding gives the hover-lift room inside Swiper's
   overflow:hidden box (so cards aren't clipped at the top/bottom on hover). */
.labz-bs__swiper { position: relative; padding: 14px 0 12px; }
.labz-bs__swiper .swiper-wrapper { align-items: stretch; }
.labz-bs__swiper .swiper-slide { height: auto; display: flex; }

/* Card */
.labz-bs__card {
	display: flex; flex-direction: column; width: 100%;
	background: linear-gradient(180deg, var(--bs-card) 0%, var(--bs-card2) 100%);
	border: 1px solid var(--bs-card-border); border-radius: 12px; overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.labz-bs__card:hover {
	transform: translateY(-4px); border-color: #cdddf2;
	box-shadow: 0 8px 18px rgba(13, 27, 44, 0.09);
}
.labz-bs__media {
	position: relative; padding: 20px 18px 8px;
}
.labz-bs__badge {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	background: var(--bs-badge); color: #fff; font-size: 10px; font-weight: 800;
	letter-spacing: 0.6px; text-transform: uppercase; padding: 4px 8px; border-radius: 4px;
}
/* Sale badge — navy pill matching the native shop "SALE!" flash */
.labz-bs__badge--sale {
	background: #013851;
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 11px;
	letter-spacing: 0.08em;
}
/* If a product is both on-sale and featured, keep the featured badge clear of the sale one */
.labz-bs__badge--sale + .labz-bs__badge { left: auto; right: 10px; }
.labz-bs__imglink { display: block; }
.labz-bs__media img { display: block; width: 100%; height: 265px; object-fit: contain; }

/* Centered card body: name -> price -> rating -> button */
.labz-bs__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 6px 16px 18px; flex: 1 1 auto; }
.labz-bs__cat { display: inline-block; color: #2f7fc4; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; }
.labz-bs__cat:hover { color: var(--bs-accent); }
.labz-bs__name { color: var(--bs-name); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.3px; text-decoration: none; line-height: 1.3; }
.labz-bs__name:hover { color: var(--bs-accent); }
.labz-bs__price { color: var(--bs-price); font-weight: 700; font-size: 16px; }
.labz-bs__rating { min-height: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* 0–5 star bar */
.labz-bs__stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1px; color: var(--bs-star-empty); font-family: Arial, sans-serif; }
.labz-bs__stars::before { content: "\2605\2605\2605\2605\2605"; }
.labz-bs__stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--bs-star); }
.labz-bs__stars-fill::before { content: "\2605\2605\2605\2605\2605"; }
.labz-bs__rcount { font-size: 11px; color: var(--bs-muted); }
/* Hide WooCommerce screen-reader text (e.g. variable "Price range:" string) */
.labz-bs .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
	border: 0; padding: 0; margin: -1px;
}
.labz-bs__price del { color: var(--bs-muted); font-weight: 400; font-size: 13px; margin-right: 6px; }
.labz-bs__price ins { text-decoration: none; }

.labz-bs__cart { margin-top: auto; padding-top: 12px; width: 100%; }
.labz-bs__cart .button,
.labz-bs__cart a.button {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; min-height: 44px; text-align: center;
	background: rgba(1, 56, 81, 0.05);
	color: var(--bs-accent) !important; border: 1.5px solid var(--bs-accent);
	border-radius: 8px; padding: 10px 14px;
	font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
	line-height: 1; text-decoration: none; cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.05s ease;
}
/* Cart icon (masked SVG, follows the button text colour) */
.labz-bs__cart .button::before {
	content: ""; flex: none; width: 16px; height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zM7.16 14h9.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 21.16 5H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7.16z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zM7.16 14h9.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 21.16 5H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7.16z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.labz-bs__cart .button:hover,
.labz-bs__cart a.button:hover {
	background: var(--bs-accent); color: #fff !important;
	box-shadow: 0 8px 18px rgba(1, 56, 81, 0.28);
}
.labz-bs__cart .button:active { transform: translateY(1px); }

/* Loading state (WooCommerce adds .loading during the AJAX add-to-cart).
   Selectors include the `a`/`button` element to outrank WooCommerce's own
   .woocommerce a.button.loading::after spinner. */
.labz-bs .labz-bs__cart a.button.loading,
.labz-bs .labz-bs__cart button.button.loading {
	color: transparent !important; pointer-events: none; position: relative;
}
.labz-bs .labz-bs__cart a.button.loading::before,
.labz-bs .labz-bs__cart button.button.loading::before { opacity: 0; } /* hide cart icon */
.labz-bs .labz-bs__cart a.button.loading::after,
.labz-bs .labz-bs__cart button.button.loading::after {
	content: "" !important;                         /* override Woo's glyph */
	position: absolute; top: 50%; left: 50%;
	width: 18px; height: 18px; margin: -9px 0 0 -9px;
	box-sizing: border-box;
	border: 3px solid rgba(1, 56, 81, 0.3); border-top-color: var(--bs-accent);
	border-radius: 50%; background: none;
	font-size: 0; line-height: 0;
	animation: labz-bs-spin 0.6s linear infinite !important;
}
.labz-bs .labz-bs__cart a.button.loading:hover::after,
.labz-bs .labz-bs__cart button.button.loading:hover::after { border-color: rgba(255, 255, 255, 0.45); border-top-color: #fff; }

.labz-bs__cart .button.added { border-color: #1f9d57; color: #1f9d57 !important; }
.labz-bs__cart .button.added:hover { background: #1f9d57; color: #fff !important; }

@keyframes labz-bs-spin { to { transform: rotate(360deg); } }
.labz-bs__cart .added_to_cart {
	display: block; text-align: center; margin-top: 8px; color: var(--bs-accent);
	font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none;
}

/* Swiper navigation */
.labz-bs__swiper .swiper-button-prev,
.labz-bs__swiper .swiper-button-next {
	width: 40px; height: 40px; border-radius: 50%; margin-top: -28px;
	background: #ffffff; border: 1px solid var(--bs-accent); color: var(--bs-accent);
	box-shadow: 0 6px 16px rgba(1, 56, 81, 0.16);
	transition: background 0.2s ease, color 0.2s ease;
}
.labz-bs__swiper .swiper-button-prev:hover,
.labz-bs__swiper .swiper-button-next:hover { background: var(--bs-accent); color: #fff; }
.labz-bs__swiper .swiper-button-prev::after,
.labz-bs__swiper .swiper-button-next::after { font-size: 15px; font-weight: 700; }
.labz-bs__swiper .swiper-button-disabled { opacity: 0; pointer-events: none; }

/* Pagination dots */
.labz-bs__swiper .swiper-pagination { position: static; margin-top: 22px; }
.labz-bs__swiper .swiper-pagination-bullet { background: #cdd6e1; opacity: 1; width: 8px; height: 8px; transition: width 0.2s ease, background 0.2s ease; }
.labz-bs__swiper .swiper-pagination-bullet-active { background: var(--bs-accent); width: 22px; border-radius: 5px; }

/* Hide nav/dots when there aren't enough slides to scroll (watchOverflow lock) */
.labz-bs__swiper .swiper-button-lock,
.labz-bs__swiper .swiper-pagination-lock { display: none !important; }

.labz-bs__empty { padding: 22px; border: 1px dashed #b9c4d2; color: #5a6b7d; text-align: center; border-radius: 10px; }

/* Mobile */
@media (max-width: 600px) {
	.labz-bs { padding: 34px 0 10px 24px; }
	.labz-bs__head { padding-right: 24px; gap: 12px; margin-bottom: 20px; }
	.labz-bs__divider { display: none; }
	.labz-bs__title { font-size: 18px; letter-spacing: 0.8px; }
	.labz-bs__viewall { margin-left: auto; font-size: 12px; }
	.labz-bs__swiper { padding-right: 24px; }
	.labz-bs__swiper .swiper-button-prev,
	.labz-bs__swiper .swiper-button-next { display: none; }
	.labz-bs__media img { height: 200px; }
}