/* WonderLab Slider — front-end styles (v2.0.0)
 * Splide-based carousel with prev/next arrows + a position-aware
 * fixed-button overlay that updates per slide. */

/* ─── Wrap ─────────────────────────────────────── */
.ws-slider-wrap {
	width: 100%;
	cursor: grab;
	position: relative;
}
.ws-slider-wrap:active { cursor: grabbing; }

.ws-slide          { position: relative; line-height: 0; }
.ws-slide-inner    { position: relative; width: 100%; height: 100%; line-height: 0; }
.ws-slide-link     { display: block; width: 100%; height: 100%; line-height: 0; }
.ws-slide img,
.ws-slide-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

/* ─── Splide prev/next arrows ──────────────────── */
.ws-slider-wrap .splide__arrows {
	pointer-events: none;
}
.ws-slider-wrap .ws-arrow {
	pointer-events: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(133, 22, 37, 0.15);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.9;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
	z-index: 20;
}
.ws-slider-wrap .ws-arrow:hover {
	opacity: 1;
	background: #fff;
	transform: translateY(-50%) scale(1.06);
}
.ws-slider-wrap .ws-arrow-prev { left: 18px; }
.ws-slider-wrap .ws-arrow-next { right: 18px; }
.ws-slider-wrap .ws-arrow:disabled {
	opacity: 0.35;
	cursor: default;
	transform: translateY(-50%);
}
.ws-slider-wrap .ws-arrow svg {
	width: 22px;
	height: 22px;
	fill: #851625;
}
/* Splide ships ONE arrow SVG (points right) and relies on a parent
   `transform: scaleX(-1)` to flip the prev arrow. Our .ws-arrow rule
   above sets `transform: translateY(-50%)`, which clobbered Splide's
   flip — so both arrows pointed right ("> >"). Apply the mirror to
   the inner SVG on the prev arrow only; parent transform stays clean. */
.ws-slider-wrap .ws-arrow-prev svg {
	transform: scaleX(-1);
}

@media (max-width: 768px) {
	.ws-slider-wrap .ws-arrow {
		width: 38px;
		height: 38px;
		opacity: 0.85;
	}
	.ws-slider-wrap .ws-arrow svg { width: 18px; height: 18px; }
	.ws-slider-wrap .ws-arrow-prev { left: 10px; }
	.ws-slider-wrap .ws-arrow-next { right: 10px; }
}

/* ─── Fixed button overlay ─────────────────────── */
.ws-fixed-button-container {
	position: absolute;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none; /* the <a> inside handles clicks */
	opacity: 1;
	transition: opacity 0.22s ease;
}
/* slider.js toggles these during the fade-out/fade-in cycle when slides
 * with different button positions change, so the button crossfades
 * rather than snap-jumping from one corner to another. */
.ws-fixed-button-container.is-fading { opacity: 0; }
.ws-fixed-button-container.is-hidden { display: none; }
.ws-fixed-shop-btn {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	background: #851625; /* overridden inline per slide */
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 50px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
	transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	line-height: 1;
	white-space: nowrap;
	border: none;
	cursor: pointer;
}
.ws-fixed-shop-btn:hover,
.ws-fixed-shop-btn:focus {
	filter: brightness(0.92);
	transform: translateY(-2px);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.36);
	color: #fff;
	text-decoration: none;
	outline: none;
}
.ws-fixed-shop-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	filter: brightness(0.85);
}
.ws-btn-label { display: inline-block; }
.ws-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.ws-btn-icon i { font-size: 18px; line-height: 1; color: inherit; }

/* ─── 9-grid positions ─────────────────────────── */
.ws-btn-pos-top-left      { top: 36px; left: 36px;            right: auto; bottom: auto; transform: none; }
.ws-btn-pos-top-center    { top: 36px; left: 50%;             right: auto; bottom: auto; transform: translateX(-50%); }
.ws-btn-pos-top-right     { top: 36px; right: 36px;           left: auto;  bottom: auto; transform: none; }

.ws-btn-pos-middle-left   { top: 50%;  left: 36px;            right: auto; bottom: auto; transform: translateY(-50%); }
.ws-btn-pos-middle-center { top: 50%;  left: 50%;             right: auto; bottom: auto; transform: translate(-50%, -50%); }
.ws-btn-pos-middle-right  { top: 50%;  right: 36px;           left: auto;  bottom: auto; transform: translateY(-50%); }

.ws-btn-pos-bottom-left   { bottom: 36px; left: 36px;         right: auto; top: auto;    transform: none; }
.ws-btn-pos-bottom-center { bottom: 36px; left: 50%;          right: auto; top: auto;    transform: translateX(-50%); }
.ws-btn-pos-bottom-right  { bottom: 36px; right: 36px;        left: auto;  top: auto;    transform: none; }

/* Hover transforms need to be combined with position transforms — re-declare
 * for positions that use translate. Without this the button "jumps" on hover. */
.ws-btn-pos-top-center .ws-fixed-shop-btn:hover,
.ws-btn-pos-top-center .ws-fixed-shop-btn:focus,
.ws-btn-pos-bottom-center .ws-fixed-shop-btn:hover,
.ws-btn-pos-bottom-center .ws-fixed-shop-btn:focus {
	transform: translateY(-2px);
}
.ws-btn-pos-middle-left .ws-fixed-shop-btn:hover,
.ws-btn-pos-middle-left .ws-fixed-shop-btn:focus,
.ws-btn-pos-middle-right .ws-fixed-shop-btn:hover,
.ws-btn-pos-middle-right .ws-fixed-shop-btn:focus {
	transform: translateY(-2px);
}
.ws-btn-pos-middle-center .ws-fixed-shop-btn:hover,
.ws-btn-pos-middle-center .ws-fixed-shop-btn:focus {
	transform: translateY(-2px);
}

/* ─── Mobile responsive ────────────────────────── */
@media (max-width: 768px) {
	/* Banner ~ 90vh */
	.ws-slider-wrap,
	.ws-slider-wrap .splide__track,
	.ws-slider-wrap .splide__list,
	.ws-slide,
	.ws-slide-inner { height: 90vh; }
	.ws-slide img,
	.ws-slide-image {
		height: 90vh;
		object-fit: cover;
		object-position: center top;
	}

	/* Tighter offsets, smaller button on phones */
	.ws-btn-pos-top-left,
	.ws-btn-pos-middle-left,
	.ws-btn-pos-bottom-left   { left: 16px; right: auto; }
	.ws-btn-pos-top-right,
	.ws-btn-pos-middle-right,
	.ws-btn-pos-bottom-right  { right: 16px; left: auto; }
	.ws-btn-pos-top-left,
	.ws-btn-pos-top-center,
	.ws-btn-pos-top-right     { top: 24px; }
	.ws-btn-pos-bottom-left,
	.ws-btn-pos-bottom-center,
	.ws-btn-pos-bottom-right  { bottom: 24px; }

	.ws-fixed-shop-btn {
		padding: 14px 26px;
		font-size: 14px;
		gap: 8px;
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
	}
}