/**
 * Offers slider — desktop only, height matched to category sidebar.
 */

/* Hidden on mobile / tablet — PC only for now */
.shop-offers {
	display: none;
}

@media (min-width: 993px) {
	.shop-offers {
		display: block;
		position: relative;
		margin: 0 0 1.5rem;
		border-radius: var(--radius-lg);
		overflow: hidden;
		background: var(--color-bg-alt);
		border: 1px solid var(--color-border);
		box-shadow: 0 10px 28px var(--color-shadow);
		/* Fallback until JS measures the category widget */
		min-height: 280px;
		height: var(--liliya-offers-height, auto);
	}

	.shop-offers__viewport,
	.shop-offers__track,
	.shop-offers__slide {
		height: 100%;
	}

	.shop-offers__viewport {
		position: relative;
		overflow: hidden;
	}

	.shop-offers__slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.45s ease, visibility 0.45s ease;
	}

	.shop-offers__slide.is-active {
		position: relative;
		opacity: 1;
		visibility: visible;
	}

	.shop-offers__slide[hidden] {
		display: block !important;
	}

	.shop-offers__link {
		display: block;
		position: relative;
		height: 100%;
		color: inherit;
		text-decoration: none;
	}

	.shop-offers__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.shop-offers__caption {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 1.25rem 1.35rem;
		font-family: var(--font-display);
		font-size: clamp(1.25rem, 2vw, 1.75rem);
		font-weight: 600;
		color: #fff;
		background: linear-gradient(180deg, transparent 0%, rgba(45, 36, 40, 0.72) 100%);
		pointer-events: none;
	}

	.shop-offers__controls {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0.85rem;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.65rem;
		pointer-events: none;
	}

	.shop-offers__nav,
	.shop-offers__dots {
		pointer-events: auto;
	}

	.shop-offers__nav {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.92);
		color: var(--color-accent);
		cursor: pointer;
		box-shadow: 0 4px 14px rgba(45, 36, 40, 0.18);
		transition: transform 0.2s ease, background 0.2s ease;
	}

	.shop-offers__nav:hover {
		background: #fff;
		transform: scale(1.05);
	}

	.shop-offers__dots {
		display: flex;
		gap: 0.4rem;
		padding: 0.35rem 0.55rem;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.88);
	}

	.shop-offers__dot {
		width: 0.55rem;
		height: 0.55rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(74, 44, 78, 0.28);
		cursor: pointer;
	}

	.shop-offers__dot.is-active {
		background: var(--color-primary);
	}

	/* When caption exists, keep controls above it a bit */
	.shop-offers:has(.shop-offers__caption) .shop-offers__controls {
		bottom: 3.75rem;
	}
}