/*!----------------------------------------
 Product cards (.product-card-1) — mobile layout fixes
 Used by: home page grids + "Best Value Picks" slider, shop / category / brand
 pages (product/shop.html) and the "Similar Products" slider on the product page.

 On phones the cards show 2 per row. The card markup uses a fixed image box
 (h-[290px]) and style.css forces .product-img to height: 230px !important, which
 made narrow mobile cards very tall with a small image. Below 768px the image box
 becomes a square that follows the card width instead.
----------------------------------------*/

/* style.css sets `.product-img { height: 230px !important }` inside `@layer properties`.
   An !important declaration in a cascade layer beats any unlayered !important, so the
   override has to live in that same layer with a more specific selector. */
@layer properties {
	@media (max-width: 767px) {
		.product-card-1 .product-image .product-img {
			width: 100% !important;
			height: 100% !important;
		}
	}
}

@media (max-width: 767px) {

	/* ---------- Card ---------- */
	.product-card-1 {
		padding: 10px !important;
		border-radius: 14px;
	}

	/* ---------- Image: square box that scales with the card width ---------- */
	.product-card-1 .product-image {
		height: auto !important;
		aspect-ratio: 1 / 1;
		margin-bottom: 8px;
		border-radius: 10px;
	}

	.product-card-1 .product-image .product-img {
		object-fit: contain;
		object-position: center;
	}

	/* Hover-only action bar (wishlist / compare / quick view) is not usable on touch screens */
	.product-card-1 .product-btn-actions {
		display: none;
	}

	/* ---------- Discount badge ---------- */
	.product-card-1 .product-discount-badge {
		top: 6px;
		font-size: 11px;
		line-height: 18px;
	}

	/* ---------- Title ---------- */
	.product-card-1 .product-content h5,
	.product-card-1 .product-content h6 {
		margin-bottom: 4px;
		padding-bottom: 0;
		line-height: 1.3;
	}

	.product-card-1 .product-title {
		font-size: 13px;
		min-height: 50px;
		margin: 4px 0;
	}

	/* ---------- Price ---------- */
	.product-card-1 .price-section {
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 6px;
		row-gap: 0;
		margin-bottom: 8px;
		text-align: center;
	}

	.product-card-1 .price-section .current-price {
		font-size: 14px;
		line-height: 20px;
	}

	.product-card-1 .price-section .old-price {
		font-size: 11px;
		line-height: 18px;
	}

	/* ---------- Bottom buttons ---------- */
	.product-card-1 .btn-section > * {
		width: 36px;
		height: 36px;
	}

	.product-card-1 .btn-section i {
		font-size: 18px;
	}
}

/* ---------- Product grid: 2 per row on phones with tighter gaps ---------- */
@media (max-width: 767px) {
	.our-products-grid {
		gap: 10px;
	}

	.product-grid-mobile-2 {
		column-gap: 10px !important;
		row-gap: 10px !important;
	}

	/* Sliders: pull the side gutters in so 2 cards fit comfortably */
	.product-slider-mobile-2 {
		margin-left: -5px !important;
		margin-right: -5px !important;
	}

	.product-slider-mobile-2 .product-card-1 {
		margin-left: 5px !important;
		margin-right: 5px !important;
	}
}

/*!----------------------------------------
 Sold-out product cards (home "Sold Out – Pre-order Now" slider and /sold-out page)
----------------------------------------*/
.product-card-soldout .product-image img {
	opacity: 0.6;
	filter: grayscale(35%);
	transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.product-card-soldout:hover .product-image img {
	opacity: 0.85;
	filter: none;
}

.soldout-badge {
	position: absolute;
	top: 11px;
	left: 0;
	padding: 1px 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	background-color: #374151;
	border-radius: 0 6px 6px 0;
}

.preorder-card-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 9px 12px;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	background-color: var(--color-primary);
	border-radius: 100px;
	transition: background-color 0.2s ease;
}

.preorder-card-btn:hover {
	background-color: var(--color-primary-dark);
}

.preorder-card-btn i {
	font-size: 16px;
}

@media (max-width: 767px) {
	.soldout-badge {
		top: 6px;
		font-size: 10px;
		line-height: 18px;
		padding: 0 7px;
	}

	.preorder-card-btn {
		padding: 7px 8px;
		font-size: 12px;
	}
}