/**
 * HaulerProShop - Shop Products Grid
 * Estilos para tarjetas de productos en páginas de archivo
 */

/* ========================================
   VARIABLES
======================================== */
:root {
	--rh-primary: #FDB71B;
	--rh-primary-hover: #E6A515;
	--rh-price: #081124;
	--rh-sale: #ef4444;
	--rh-text-dark: #1f2937;
	--rh-text-light: #9ca3af;
	--rh-border: #CBCBCB;
	--rh-border-alpha: #C6C6C6BA;
	--rh-bg-white: #ffffff;
	--rh-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.08);
	--rh-radius: 10px;
	--rh-radius-sm: 5px;
	--rh-radius-btn: 15px;
	--rh-radius-badge: 12px;
	--content-width: min(100%, 1140px);
	--row-gap: 1.5rem;
	--column-gap: 1.5rem;
}

/* ========================================
   PRODUCTS GRID
======================================== */
body.woocommerce,
body.woocommerce-page {
	& ul.products {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: var(--row-gap) var(--column-gap);
		max-width: var(--content-width);
		margin: 0 auto;
		padding: 0;
		list-style: none;
		float: none;

		& li.product {
			background-color: var(--rh-bg-white);
			border: 1px solid var(--rh-border);
			border-radius: var(--rh-radius);
			padding: 8px 8px 0 8px;
			margin: 0;
			width: auto;
			float: none;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
			display: block;

			&:hover {
				box-shadow: var(--rh-shadow-hover);
				transform: translateY(-3px);
				border-color: var(--rh-primary);
			}

			& a img {
				border: 1px solid var(--rh-border-alpha);
				border-radius: var(--rh-radius-sm);
				margin-bottom: 0;
				width: 100%;
				height: auto;
				aspect-ratio: 1/1;
				object-fit: cover;
				transition: transform 0.3s ease;
			}

			&:hover a img {
				transform: scale(1.05);
			}

			& .woocommerce-loop-product__title,
			& h4.woocommerce-loop-product__title {
				font-family: "Open Sans", sans-serif;
				font-size: 14px;
				font-weight: 500;
				color: var(--rh-text-dark);
				margin: 0.75rem 0.5rem;
				line-height: 1.4;
			}

			& .price {
				color: var(--rh-price);
				font-family: "Rajdhani", sans-serif;
				font-size: 24px;
				font-weight: 700;
				padding: 0 0.5rem 1rem;
				margin: 0;

				& del {
					font-size: 18px;
					color: var(--rh-text-light);
					font-weight: 400;
					margin-right: 6px;
				}

				& ins {
					text-decoration: none;
					color: var(--rh-sale);
				}
			}

			& .button,
			& .add_to_cart_button {
				display: inline-block;
				border: 1px solid var(--rh-primary);
				border-radius: var(--rh-radius-btn);
				padding: 12px 20px !important;
				color: #000000 !important;
				background-color: var(--rh-primary) !important;
				font-size: 14px !important;
				font-weight: 600 !important;
				text-align: center;
				text-decoration: none;
				cursor: pointer;
				transition: all 0.2s ease;
				margin: 0 0.5rem 1rem;
				width: calc(100% - 1rem);
	
				&:hover {
					background-color: var(--rh-primary-hover) !important;
					border-color: var(--rh-primary-hover) !important;
					transform: translateY(-2px) !important;
					box-shadow: 0 4px 12px rgba(253, 183, 27, 0.3) !important;
				}
			}

			& .onsale {
				position: absolute;
				top: 10px;
				right: 10px;
				background-color: var(--rh-sale);
				color: #ffffff;
				font-size: 12px;
				font-weight: 700;
				padding: 4px 10px;
				border-radius: var(--rh-radius-badge);
				z-index: 10;
			}
		}

		& li.product-category {
			background-color: var(--rh-bg-white);
			border: 1px solid var(--rh-border);
			border-radius: var(--rh-radius);
			padding: 8px;
			margin: 0;
			width: auto;
			float: none;
			transition: all 0.3s ease;

			&:hover {
				box-shadow: var(--rh-shadow-hover);
				transform: translateY(-3px);
				border-color: var(--rh-primary);
			}

			& a img {
				border: 1px solid var(--rh-border-alpha);
				border-radius: var(--rh-radius-sm);
				margin-bottom: 0.5rem;
			}

			& .woocommerce-loop-category__title {
				font-family: "Open Sans", sans-serif;
				font-size: 12px;
				font-weight: 400;
				color: var(--rh-text-dark);
				margin: 0.5rem;
				line-height: 1.417;
			}
		}
	}
}

/* ========================================
   QUANTITY INPUT
======================================== */
.quantity .qty {
	border: 2px solid var(--rh-primary);
	border-radius: var(--rh-radius);
	padding: 5px;
	color: var(--rh-price);
	background-color: var(--rh-bg-white);
	font-size: 16px;
	text-align: center;
	transition: all 0.2s ease;

	&:focus {
		outline: none;
		border-color: var(--rh-primary-hover);
		box-shadow: 0 0 0 3px rgba(253, 183, 27, 0.1);
	}
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1024px) {
	body.woocommerce ul.products,
	body.woocommerce-page ul.products {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 1.25rem;
	}
}

@media (max-width: 768px) {
	body.woocommerce ul.products,
	body.woocommerce-page ul.products {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	body.woocommerce ul.products,
	body.woocommerce-page ul.products {
		grid-template-columns: 1fr;
	}
}