/* Eco Paper — Lighthouse performance / CLS / a11y */

/*
 * Desktop CLS: header_transparent — header giữ trong document flow (SCSS + critical CSS).
 */
body.header_transparent #goal-header,
body.header_transparent .goal-header {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
}

@media (min-width: 992px) {
	#goal-header {
		min-height: 100px !important;
		box-sizing: border-box;
	}

	#goal-header .main-sticky-header-wrapper,
	#goal-header .main-sticky-header {
		min-height: 100px !important;
		box-sizing: border-box;
	}

	#goal-header .logo .logo-wrapper,
	.main-sticky-header .logo .logo-wrapper {
		display: flex;
		align-items: center;
		min-height: 100px;
	}

	#goal-header .logo .logo-wrapper img,
	.main-sticky-header .logo .logo-wrapper img,
	#goal-header .main-sticky-header .elementor-widget-image img,
	#goal-header .main-sticky-header .elementor-widget-image a img,
	#goal-header .main-sticky-header .elementor-widget-theme-site-logo img,
	#goal-header .main-sticky-header .elementor-widget-site-logo img {
		width: 97px;
		height: 97px;
		max-width: 97px;
		max-height: 97px;
		object-fit: contain;
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 991px) {
	#goal-header .logo .logo-wrapper,
	#goal-header-mobile .logo a,
	.header-offcanvas .logo .logo-wrapper {
		display: flex;
		align-items: center;
		min-height: 48px;
	}

	#goal-header-mobile .logo img {
		max-height: 48px;
		width: auto;
		height: auto;
	}
}

/* Hero — reserve slot trước Slick init & khi ảnh LCP load */
.ecopaper-content-hero-slider,
.ecopaper-content-hero-slider .js-ecopaper-hero-track,
.ecopaper-content-hero-slider .slick-list,
.ecopaper-content-hero-slider .slick-track {
	min-height: var(--ecopaper-hero-min-height, 520px);
}



.ecopaper-hero-slider__slide {
	contain: layout style;
}

.ecopaper-hero-slider__media {
	background-color: #f4f4f4;
}

.ecopaper-hero-slider__media img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Giảm shift khi Poppins load trên hero heading */
.ecopaper-hero-slider__heading {
	min-height: 1.15em;
}

@media (max-width: 767px) {
	.ecopaper-content-hero-slider,
	.ecopaper-content-hero-slider .js-ecopaper-hero-track,
	.ecopaper-content-hero-slider .slick-list,
	.ecopaper-content-hero-slider .slick-track {
		min-height: var(--ecopaper-hero-min-height-mobile, 380px);
	}
}

/* Slick / hero arrows — touch target min 44px (mobile a11y) */
.ecopaper-content-hero-slider .slick-arrow,
.slick-arrow.slick-prev,
.slick-arrow.slick-next {
	min-width: 44px;
	min-height: 44px;
}

.details-product .goal-woocommerce-product-gallery-thumbs.vertical .slick-arrow {
	min-width: 0;
	min-height: 0;
}

.dual-image-slider-wrapper .swiper-button-prev,
.dual-image-slider-wrapper .swiper-button-next {
	min-width: 0;
	min-height: 0;
}

/* Icon-only controls reset */
button.btn-showmenu,
button.btn-toggle-canvas,
button.quickview,
button#back-to-top {
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

button#back-to-top {
	background: var(--ecopaper-back-to-top-bg, #26901b);
	border-radius: 50%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	padding: 0;
	line-height: 1;
	box-sizing: border-box;
}

button#back-to-top svg {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
	color: #fff;
}

/* Product grid contrast improvements */
.product-block .cat-title,
.product-block h3.cat-title {
	color: #1a1a1a;
}

.product-block .price,
.product-block .price bdi,
.product-block .woocommerce-Price-amount {
	color: #1a1a1a;
}

.product-block .view-detail-button,
.product-block a.view-detail-button.button {
	color: #ffffff;
	background-color: #26901b;
	border-color: #26901b;
}

/* Product grid — tránh ô trắng khi ảnh đang load / lazy-load lỗi */
.product-block .block-image {
	aspect-ratio: 1;
	background-color: #f4f4f4;
}

.product-block .block-image .product-image {
	display: block;
	width: 100%;
	height: 100%;
}

.product-block .block-image img.image-hover,
.product-block .block-image img.image-no-effect {
	object-fit: contain;
	width: 100%;
	height: auto;
	min-height: 1px;
}

/* Touch / mobile: tắt hiệu ứng swap ảnh hover */
@media (hover: none), (pointer: coarse) {
	.product-block .image .image-effect {
		display: none !important;
	}

	.product-block .block-inner .image .image-hover,
	.product-block .block-inner:hover .image .image-hover {
		opacity: 1 !important;
		filter: none !important;
	}
}

/* Menu button focus */
button.btn-showmenu:focus-visible,
button.btn-toggle-canvas:focus-visible,
button.quickview:focus-visible,
button#back-to-top:focus-visible {
	outline: 2px solid #26901b;
	outline-offset: 2px;
}