/**
 * Front styles — WC Dynamic Banners.
 */

.wc-dynamic-banners {
	--wcdb-width: 100%;
	box-sizing: border-box;
	width: var(--wcdb-width);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.wc-dynamic-banners *,
.wc-dynamic-banners *::before,
.wc-dynamic-banners *::after {
	box-sizing: border-box;
}

.wc-dynamic-banners__slide {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.wc-dynamic-banners__link {
	display: block;
	width: 100%;
	line-height: 0;
}

.wc-dynamic-banners__picture {
	display: block;
	width: 100%;
	line-height: 0;
}

.wc-dynamic-banners__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.wc-dynamic-banners__img--mobile {
	display: none;
}

/* Mobile */
@media (max-width: 767px) {
	.wc-dynamic-banners__img--desktop {
		display: none;
	}

	.wc-dynamic-banners__img--mobile {
		display: block;
	}
}

/* ---------- Auto: altura natural ---------- */
.wc-dynamic-banners--fit-auto .splide__list {
	align-items: flex-start;
}

.wc-dynamic-banners--fit-auto .splide__track {
	transition: height 0.35s ease;
}

/* ---------- Altura definida (cover): caixa fixa, crop e centralização ---------- */
.wc-dynamic-banners--fit-cover {
	overflow: hidden;
}

@media (max-width: 767px) {
	.wc-dynamic-banners--fit-cover {
		height: var(--wcdb-h-mobile, auto);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.wc-dynamic-banners--fit-cover {
		height: var(--wcdb-h-tablet, auto);
	}
}

@media (min-width: 1024px) {
	.wc-dynamic-banners--fit-cover {
		height: var(--wcdb-h-desktop, auto);
	}
}

/* Toda a cadeia do carrossel/slide preenche a caixa */
.wc-dynamic-banners--fit-cover .splide,
.wc-dynamic-banners--fit-cover .splide__track,
.wc-dynamic-banners--fit-cover .splide__list,
.wc-dynamic-banners--fit-cover .splide__slide,
.wc-dynamic-banners--fit-cover .wc-dynamic-banners__slide,
.wc-dynamic-banners--fit-cover .wc-dynamic-banners__link,
.wc-dynamic-banners--fit-cover .wc-dynamic-banners__picture {
	height: 100%;
	max-height: 100%;
}

.wc-dynamic-banners--fit-cover .splide__list {
	align-items: stretch;
}

.wc-dynamic-banners--fit-cover .wc-dynamic-banners__slide {
	overflow: hidden;
}

.wc-dynamic-banners--fit-cover .wc-dynamic-banners__picture {
	position: relative;
	overflow: hidden;
}

.wc-dynamic-banners--fit-cover .wc-dynamic-banners__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center center;
}

/* Controles do Splide — seta chevron + dots (ativo sólido / inativo anel) */
.wc-dynamic-banners--nav-white {
	--wcdb-nav: #ffffff;
}

.wc-dynamic-banners--nav-black {
	--wcdb-nav: #000000;
}

@media (max-width: 767px) {
	.wc-dynamic-banners--nav-mobile-white {
		--wcdb-nav: #ffffff;
	}

	.wc-dynamic-banners--nav-mobile-black {
		--wcdb-nav: #000000;
	}
}

.wc-dynamic-banners .splide__arrow {
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	background: transparent;
	opacity: 1;
	color: var(--wcdb-nav);
	box-shadow: none;
	filter: none;
	text-shadow: none;
}

.wc-dynamic-banners .splide__arrow:hover:not(:disabled),
.wc-dynamic-banners .splide__arrow:focus-visible:not(:disabled) {
	opacity: 0.75;
	background: transparent;
	box-shadow: none;
	filter: none;
}

.wc-dynamic-banners .splide__arrow:disabled {
	opacity: 0.35;
}

.wc-dynamic-banners .splide__arrow svg {
	display: none;
}

.wc-dynamic-banners .splide__arrow::before {
	content: '';
	display: block;
	width: 0.95rem;
	height: 0.95rem;
	border-left: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg);
	margin-left: 0.25rem;
	box-shadow: none;
	filter: none;
}

.wc-dynamic-banners .splide__arrow--next::before {
	transform: rotate(-135deg);
	margin-left: 0;
	margin-right: 0.25rem;
}

.wc-dynamic-banners .splide__pagination {
	bottom: 0.85rem;
	padding: 0;
	gap: 8px;
	align-items: center !important;
	line-height: 0;
}

.wc-dynamic-banners .splide__pagination li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	flex: 0 0 auto !important;
	min-height: unset !important;
}

.wc-dynamic-banners button.splide__pagination__page {
	display: block !important;
	box-sizing: border-box !important;
	-webkit-appearance: none;
	appearance: none;
	width: 10px !important;
	height: 10px !important;
	min-width: 10px !important;
	max-width: 10px !important;
	min-height: 10px !important;
	max-height: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid var(--wcdb-nav) !important;
	border-radius: 50% !important;
	background: transparent !important;
	opacity: 1;
	aspect-ratio: 1 / 1;
	line-height: 0 !important;
	font-size: 0 !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: 10px !important;
	transform: none !important;
	box-shadow: none !important;
	filter: none;
	overflow: hidden;
}

.wc-dynamic-banners .splide__pagination__page.is-active,
.wc-dynamic-banners button.splide__pagination__page.is-active {
	background: var(--wcdb-nav) !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Visibilidade: sempre ou revelar no hover com fade (desktop ≥768px, mobile ≤767px) */
.wc-dynamic-banners .splide__arrow,
.wc-dynamic-banners .splide__pagination {
	transition: opacity 0.25s ease;
}

@media (min-width: 768px) {
	.wc-dynamic-banners--nav-vis-hover .splide__arrow,
	.wc-dynamic-banners--nav-vis-hover .splide__pagination {
		opacity: 0;
	}

	.wc-dynamic-banners--nav-vis-hover:hover .splide__arrow,
	.wc-dynamic-banners--nav-vis-hover:focus-within .splide__arrow,
	.wc-dynamic-banners--nav-vis-hover:hover .splide__pagination,
	.wc-dynamic-banners--nav-vis-hover:focus-within .splide__pagination {
		opacity: 1;
	}

	.wc-dynamic-banners--nav-vis-hover .splide__arrow:disabled {
		opacity: 0.35;
	}

	.wc-dynamic-banners--nav-vis-hover:not(:hover):not(:focus-within) .splide__arrow:disabled {
		opacity: 0;
	}
}

@media (max-width: 767px) {
	.wc-dynamic-banners--nav-vis-mobile-hover .splide__arrow,
	.wc-dynamic-banners--nav-vis-mobile-hover .splide__pagination {
		opacity: 0;
	}

	.wc-dynamic-banners--nav-vis-mobile-hover:hover .splide__arrow,
	.wc-dynamic-banners--nav-vis-mobile-hover:focus-within .splide__arrow,
	.wc-dynamic-banners--nav-vis-mobile-hover:hover .splide__pagination,
	.wc-dynamic-banners--nav-vis-mobile-hover:focus-within .splide__pagination {
		opacity: 1;
	}

	.wc-dynamic-banners--nav-vis-mobile-hover .splide__arrow:disabled {
		opacity: 0.35;
	}

	.wc-dynamic-banners--nav-vis-mobile-hover:not(:hover):not(:focus-within) .splide__arrow:disabled {
		opacity: 0;
	}
}

@media (hover: none) and (min-width: 768px) {
	.wc-dynamic-banners--nav-vis-hover .splide__arrow,
	.wc-dynamic-banners--nav-vis-hover .splide__pagination {
		opacity: 1;
	}
}

@media (hover: none) and (max-width: 767px) {
	.wc-dynamic-banners--nav-vis-mobile-hover .splide__arrow,
	.wc-dynamic-banners--nav-vis-mobile-hover .splide__pagination {
		opacity: 1;
	}
}
