/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
	.products-grid,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}

	.categories-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.benefits-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 30px;
	}

	.single-product .product {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 768px) {
	.navbar-links {
		display: none;
	}

	.hamburger {
		display: flex;
	}

	.hero {
		height: 480px;
	}

	.categories-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.category-card {
		height: 180px;
	}

	.products-grid,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.benefits-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.reviews-grid {
		grid-template-columns: 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}

	.promo-banner {
		height: 440px;
	}

	.promo-countdown {
		gap: 8px;
	}

	.countdown-item {
		padding: 10px 12px;
		min-width: 58px;
	}

	.countdown-value {
		font-size: 22px;
	}

	.newsletter-form {
		flex-direction: column;
	}

	.section {
		padding: 44px 16px;
	}

	.page-content {
		padding: 44px 16px;
	}

	.single-product .product,
	.woocommerce .related.products,
	.woocommerce .upsells.products,
	.woocommerce .cross-sells.products {
		padding: 24px 16px;
	}

	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}

	.woocommerce div.product form.cart {
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce div.product form.cart .button {
		width: 100%;
	}

	.toast-container {
		bottom: 16px;
		right: 16px;
		left: 80px;
	}
}

@media (max-width: 480px) {
	.categories-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.category-card {
		height: 150px;
	}

	.category-card-name {
		font-size: 16px;
	}

	.products-grid,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.product-card-info,
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .price,
	.woocommerce ul.products li.product .button {
		padding-left: 10px;
		padding-right: 10px;
	}

	.woocommerce ul.products li.product .button {
		width: calc(100% - 20px);
		margin: 14px 10px 10px;
	}

	.product-card-name,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px;
	}

	.product-price-current,
	.woocommerce ul.products li.product .price {
		font-size: 15px;
	}

	.product-price-old,
	.woocommerce ul.products li.product .price del {
		font-size: 12px;
	}

	.product-add-btn,
	.woocommerce ul.products li.product .button {
		padding: 8px;
		font-size: 12px;
	}

	.benefits-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.benefit-card {
		padding: 20px 14px;
	}

	.benefit-icon {
		width: 50px;
		height: 50px;
		font-size: 20px;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.hero {
		height: 420px;
	}

	.hero-title {
		font-size: 24px;
	}

	.hero-desc {
		font-size: 14px;
	}

	.hero-cta {
		padding: 12px 24px;
		font-size: 14px;
	}

	.new-arrival-card {
		flex: 0 0 200px;
	}

	.promo-banner {
		height: 480px;
	}

	.countdown-item {
		padding: 8px 10px;
		min-width: 50px;
	}

	.countdown-value {
		font-size: 18px;
	}

	.toast-container {
		bottom: 16px;
		right: 16px;
		left: 16px;
	}

	.toast {
		min-width: auto;
		max-width: 100%;
	}

	.scroll-top-btn {
		bottom: 16px;
		left: 16px;
		width: 42px;
		height: 42px;
	}

	.navbar-inner {
		height: 60px;
	}

	.navbar-brand img {
		height: 32px;
	}

	.navbar-brand-name {
		font-size: 18px;
	}

	.announcement-bar {
		font-size: 11px;
		padding: 6px 12px;
	}

	.announcement-bar span {
		margin: 0 6px;
	}

	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}

	.woocommerce-products-header {
		padding: 24px 16px;
	}
}

/* Print styles */
@media print {
	.navbar,
	.announcement-bar,
	.search-bar,
	.mobile-overlay,
	.mobile-menu,
	.hero-dots,
	.scroll-top-btn,
	.toast-container,
	.footer-social,
	.footer-payment-icons {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}

	.hero {
		height: auto;
		min-height: 200px;
	}
}