/**
 * Digibit Product Carousel — front-end styles.
 *
 * The product cards themselves are intentionally left untouched: they are rendered
 * by the active theme (Blocksy, Astra, ...) through `content-product.php`.
 * This stylesheet only disables the theme's grid layout on `ul.products` so that
 * Swiper can take over sizing, and styles the carousel chrome (arrows, dots, tabs).
 *
 * @package Digibit\ProductCarousel
 * @author  Digibit.si
 */

.digibit-carousel-section {
	--digibit-arrow-size: 42px;
	--digibit-accent: var( --theme-palette-color-1, #2872fa );
	--digibit-text: var( --theme-palette-color-4, #192a3d );
	--digibit-border: var( --theme-border-color, rgba( 0, 0, 0, 0.1 ) );
	--digibit-surface: var( --theme-palette-color-8, #fff );

	position: relative;
}

.digibit-carousel__title {
	margin: 0 0 1em;
}

.digibit-carousel {
	position: relative;
}

/* Small inset so card shadows / hover effects are not clipped by the viewport. */
.digibit-carousel__viewport.swiper {
	width: auto;
	padding: 5px;
	margin: -5px;
}

/* -----------------------------------------------------------------------------
 * Neutralise the theme's grid layout on the products list
 * -------------------------------------------------------------------------- */

/*
 * Only the grid container is neutralised. The product item keeps every property
 * the theme gave it — padding, background, borders, inner layout — so the card
 * looks exactly as it does in the shop archive. The three properties overridden
 * here are the ones that would otherwise fight Swiper's own sizing.
 */
.digibit-carousel .swiper-wrapper.products,
.digibit-carousel ul.products.swiper-wrapper,
.digibit-carousel .products.swiper-wrapper[data-products] {
	display: flex !important;
	grid-template-columns: none !important;
	grid-gap: 0 !important;
	gap: 0 !important;
	column-gap: 0 !important;
	row-gap: 0 !important;
	align-items: stretch;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.digibit-carousel .products.swiper-wrapper > li.product,
.digibit-carousel .products.swiper-wrapper > .product.swiper-slide {
	box-sizing: border-box;
	flex-shrink: 0;
	max-width: none !important;  /* the theme's grid may cap the item width */
	height: auto;                /* let the tallest card define the row height */
	float: none !important;
	clear: none !important;

	/*
	 * No !important here on purpose. Swiper applies `spaceBetween` as an inline
	 * margin on the slide, and an !important rule would beat that inline style
	 * and collapse the gap to zero. A plain declaration still overrides the
	 * theme's own margins while leaving Swiper's inline value in charge.
	 */
	margin: 0;
}

.digibit-carousel .products.swiper-wrapper::before,
.digibit-carousel .products.swiper-wrapper::after {
	display: none !important;
	content: none !important;
}

/* Avoid a flash of the full product list before Swiper initialises. */
.digibit-carousel:not( .is-ready ) .products.swiper-wrapper {
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
 * Arrows
 * -------------------------------------------------------------------------- */

.digibit-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --digibit-arrow-size );
	height: var( --digibit-arrow-size );
	padding: 0;
	color: var( --digibit-text );
	background: var( --digibit-surface );
	border: 1px solid var( --digibit-border );
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -50% );
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.digibit-carousel__arrow svg {
	display: block;
	width: 20px;
	height: 20px;
}

.digibit-carousel__arrow:hover {
	color: #fff;
	background: var( --digibit-accent );
	border-color: var( --digibit-accent );
}

.digibit-carousel__arrow:focus-visible {
	outline: 2px solid var( --digibit-accent );
	outline-offset: 2px;
}

.digibit-carousel__arrow.is-disabled,
.digibit-carousel__arrow.swiper-button-disabled {
	opacity: 0;
	pointer-events: none;
}

.digibit-carousel--nav-sides .digibit-carousel__arrow--prev {
	left: calc( var( --digibit-arrow-size ) / -2 );
}

.digibit-carousel--nav-sides .digibit-carousel__arrow--next {
	right: calc( var( --digibit-arrow-size ) / -2 );
}

@media ( max-width: 1400px ) {
	.digibit-carousel--nav-sides .digibit-carousel__arrow--prev {
		left: 4px;
	}

	.digibit-carousel--nav-sides .digibit-carousel__arrow--next {
		right: 4px;
	}
}

.digibit-carousel--nav-top-right .digibit-carousel__arrow {
	top: auto;
	bottom: calc( 100% + 14px );
	transform: none;
}

.digibit-carousel--nav-top-right .digibit-carousel__arrow--prev {
	right: calc( var( --digibit-arrow-size ) + 8px );
	left: auto;
}

.digibit-carousel--nav-top-right .digibit-carousel__arrow--next {
	right: 0;
}

@media ( max-width: 767px ) {
	.digibit-carousel__arrow {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
 * Pagination & scrollbar
 * -------------------------------------------------------------------------- */

.digibit-carousel__dots {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	line-height: 1;
}

.digibit-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: var( --digibit-border );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.25s ease;
}

.digibit-carousel__dot.is-active {
	width: 22px;
	background: var( --digibit-accent );
	border-radius: 4px;
}

.digibit-carousel__scrollbar {
	position: relative;
	height: 4px;
	margin-top: 18px;
	background: var( --digibit-border );
	border-radius: 4px;
}

.digibit-carousel__scrollbar .swiper-scrollbar-drag {
	background: var( --digibit-accent );
	border-radius: 4px;
}

/* -----------------------------------------------------------------------------
 * Tabs
 * -------------------------------------------------------------------------- */

.digibit-tabs__head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.digibit-tabs__head .digibit-carousel__title {
	margin: 0;
}

.digibit-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.digibit-tabs__button {
	padding: 9px 18px;
	font-size: 15px;
	line-height: 1.2;
	color: var( --digibit-text );
	white-space: nowrap;
	background: transparent;
	border: 1px solid var( --digibit-border );
	border-radius: 999px;
	cursor: pointer;
	appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.digibit-tabs__button:hover {
	color: var( --digibit-accent );
	border-color: var( --digibit-accent );
}

.digibit-tabs__button.is-active {
	color: #fff;
	background: var( --digibit-accent );
	border-color: var( --digibit-accent );
}

.digibit-tabs__button:focus-visible {
	outline: 2px solid var( --digibit-accent );
	outline-offset: 2px;
}

@media ( max-width: 767px ) {
	.digibit-tabs__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.digibit-tabs__nav {
		flex-wrap: nowrap;
		width: 100%;
		padding-bottom: 4px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.digibit-tabs__nav::-webkit-scrollbar {
		display: none;
	}
}

.digibit-tabs__panel[hidden] {
	display: none;
}

.digibit-tabs__message {
	padding: 40px 0;
	text-align: center;
	opacity: 0.6;
}