/**
 * WooCommerce styles for Aureline.
 *
 * @package Aureline
 */

.aureline-woocommerce {
	padding-top: 48px;
	padding-bottom: 80px;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
}

.woocommerce ul.products li.product {
	background: var(--aureline-surface);
	border-radius: var(--aureline-radius);
	overflow: hidden;
	border: 1px solid var(--aureline-border);
	box-shadow: var(--aureline-shadow);
	transition: transform var(--aureline-transition), box-shadow var(--aureline-transition);
	margin: 0 !important;
	width: 100% !important;
	padding: 0 !important;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--aureline-shadow-lg);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	padding: 16px 16px 8px;
}

.woocommerce ul.products li.product .price {
	padding: 0 16px 16px;
	color: var(--aureline-accent);
	font-weight: 600;
}

.woocommerce ul.products li.product a img {
	border-radius: 0;
	margin: 0;
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
	background: var(--aureline-accent) !important;
	color: #fff !important;
	border-radius: 980px !important;
	padding: 12px 24px !important;
	font-weight: 500 !important;
	border: none !important;
	transition: all var(--aureline-transition) !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
	background: var(--aureline-accent-hover) !important;
	transform: scale(1.02);
}

.woocommerce div.product {
	background: var(--aureline-surface);
	border-radius: var(--aureline-radius);
	padding: 48px;
	border: 1px solid var(--aureline-border);
	box-shadow: var(--aureline-shadow);
}

.woocommerce div.product .product_title {
	font-size: 2rem;
	letter-spacing: -0.02em;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--aureline-radius);
	border-top: none;
	background: var(--aureline-surface);
	box-shadow: var(--aureline-shadow);
}

.woocommerce table.shop_table {
	border-radius: var(--aureline-radius);
	overflow: hidden;
	border: 1px solid var(--aureline-border);
}

@media (max-width: 768px) {
	.woocommerce div.product {
		padding: 24px;
	}
}