@media (min-width: 1024px) {
  .hewt-archive-grid-column { grid-column: span 3 / span 3; min-width: 0; }
}

.hewt-archive-results[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity .2s ease; }

/**
 * Jovino Custom Fixes stylesheet.
 * Overrides layout issues dynamically.
 */

/* 1. Slick Slider Dots overlapping fixes */
.carousel.slick-dotted {
	padding-bottom: 4.5rem !important;
}

.carousel.slick-dotted .slick-dots {
	bottom: 1rem !important;
	z-index: 30 !important;
	display: flex !important;
	justify-content: center !important;
}

/* 2. Over Ons Avatars - Force perfect circles and responsive dimensions */
.hewt-avatars-wrap img {
	border-radius: 9999px !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
}

@media (min-width: 1024px) {
	.hewt-avatars-wrap img {
		width: var(--custom-width) !important;
		height: var(--custom-height) !important;
	}
}

/* 3. Homepage News Slider Heights - Fix flexbox inside slick slider */
.hewt-news-home-carousel .slick-track {
	display: flex !important;
	align-items: stretch !important;
}

.hewt-news-home-carousel .slick-slide {
	display: flex !important;
	height: auto !important;
}

.hewt-news-home-carousel .slick-slide > div {
	display: flex !important;
	width: 100% !important;
	height: auto !important;
}

.hewt-news-home-carousel .slick-slide .item {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	height: auto !important;
	min-height: 100% !important;
}

/* 4. Assortment archive layout fixes - Dark cards override */
.hewt-archive-results .grid .item {
	background-color: #181818 !important;
	border: 1px solid transparent !important;
	transition: all 0.3s ease !important;
}

.hewt-archive-results .grid .item:hover {
	background-color: #1f1f1f !important;
	border-color: #434343 !important;
}

.hewt-archive-results .grid .item h3 {
	color: #cab347 !important;
	font-family: 'Eurostile', sans-serif !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	font-size: 1.125rem !important;
	letter-spacing: 1.8px !important;
}

.hewt-archive-results .grid .item .text-jovino-grey-dark {
	color: #ffffff !important;
}

/* 5. Product Archive Pagination Overrides */
.hewt-pagination {
	display: inline-flex !important;
	border-radius: 0.375rem;
	margin-top: 1rem;
}

.hewt-pagination .page-numbers {
	cursor: pointer;
	position: relative;
	display: inline-flex;
	align-items: center;
	border: 1px solid #3d3935 !important;
	padding: 0.5rem 1.5rem !important;
	font-size: 1.125rem !important;
	color: #ffffff !important;
	font-family: 'Eurostile', sans-serif !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	margin: 0 -1px 0 0 !important;
}

.hewt-pagination .page-numbers:hover {
	background-color: #2F2D28 !important;
}

.hewt-pagination .page-numbers.current {
	background-color: #cab347 !important;
	border-color: #cab347 !important;
}

.hewt-pagination .page-numbers.dots {
	cursor: default;
}

/* 6. Product Detail Image Responsive Sizing & Position Overrides */
.parallax img {
	max-width: none !important;
}

@media (max-width: 1023px) {
	.parallax, .parallax [data-depth] {
		transform: none !important;
		position: relative !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
		height: auto !important;
	}
}

@media (max-width: 767px) {
	.parallax img {
		width: var(--bottle-width-mobile, 100%) !important;
		max-width: var(--bottle-width-mobile, 260px) !important;
		height: var(--bottle-height-mobile, auto) !important;
		position: relative !important;
		left: var(--bottle-left-mobile, 0px) !important;
		top: var(--bottle-top-mobile, 0px) !important;
		bottom: var(--bottle-bottom-mobile, auto) !important;
		margin: 0 auto !important;
		transform: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.parallax img {
		width: var(--bottle-width-tablet, 100%) !important;
		max-width: var(--bottle-width-tablet, 320px) !important;
		height: var(--bottle-height-tablet, auto) !important;
		position: relative !important;
		left: var(--bottle-left-tablet, 0px) !important;
		top: var(--bottle-top-tablet, 0px) !important;
		bottom: var(--bottle-bottom-tablet, auto) !important;
		margin: 0 auto !important;
		transform: none !important;
	}
}

@media (min-width: 1024px) {
	.parallax img {
		width: var(--bottle-width-desktop, 180%) !important;
		height: var(--bottle-height-desktop, auto) !important;
		position: absolute !important;
		left: var(--bottle-left-desktop, -20%) !important;
		top: var(--bottle-top-desktop, -8rem) !important;
		bottom: var(--bottle-bottom-desktop, -3.5rem) !important;
	}
}

/* 7. Ibérica Spirit Circle Outline aspect-ratio fix */
#iberica-spirit .rounded-full {
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
}

/* 8. Uniform Card Image Heights */
.image-with-blurred-bg img.relative.z-10 {
	max-height: 260px !important;
	width: auto !important;
	object-fit: contain !important;
}

.image-with-blurred-bg img.absolute.z-0 {
	max-height: 260px !important;
	width: auto !important;
	object-fit: contain !important;
}

/* 9. Prevent Homepage News Carousel Horizontal Page Overflow */
.news-home {
	overflow-x: hidden !important;
}

/* 10. Button Theme Color Overrides (Ensuring Elementor default colors are not used) */
.hewt-btn, 
a.hewt-btn, 
button.hewt-btn,
.scroll-down,
.mobile-filter-button {
	background-color: #cab347 !important;
	border-color: #cab347 !important;
	color: #ffffff !important;
	transition: all 0.3s ease !important;
}

.hewt-btn:hover, 
a.hewt-btn:hover, 
button.hewt-btn:hover,
.scroll-down:hover,
.mobile-filter-button:hover {
	background-color: #2F2D28 !important;
	border-color: #2F2D28 !important;
	color: #ffffff !important;
}

/* 11. Checkbox custom color overrides */
input[type="checkbox"]:checked {
	background-color: #cab347 !important;
	border-color: #cab347 !important;
	color: #cab347 !important;
}

