/**
 * WooCommerce Styles
 * Apple-inspired, block-based WooCommerce styling
 * 
 * @package StoneMason
 */

/* ========================================
   WooCommerce Blocks
   ======================================== */

/* Product Grid */
.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wc-block-grid__product {
	margin: 0;
}

/* Product Card Enhancements */
.mason-product-card,
.wc-block-grid__product {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.mason-product-card:hover,
.wc-block-grid__product:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* Product Image */
.wc-block-grid__product-image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #f5f5f7;
}

.wc-block-grid__product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img {
	transform: scale(1.05);
}

/* Product Title */
.wc-block-grid__product-title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

.wc-block-grid__product-title a {
	color: #000000;
	text-decoration: none;
}

.wc-block-grid__product-title a:hover {
	color: #0071e3;
}

/* Product Price */
.wc-block-grid__product-price {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 500;
	color: #0071e3;
}

.wc-block-grid__product-price .amount {
	font-weight: 600;
}

/* Add to Cart Button */
.wc-block-grid__product-add-to-cart {
	margin-top: auto;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link {
	width: 100%;
	padding: 0.75rem 1.5rem;
	background-color: #0071e3;
	color: #ffffff;
	text-align: center;
	border: none;
	border-radius: 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	transition: background-color 0.3s ease;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background-color: #005bb5;
}

/* ========================================
   Single Product
   ======================================== */

.single-product .product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

/* Product Gallery */
.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery__image {
	border-radius: 12px;
	overflow: hidden;
	background-color: #f5f5f7;
}

/* Product Summary */
.product .summary {
	position: sticky;
	top: 2rem;
}

.product_title {
	margin: 0 0 1rem;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.price {
	margin: 0 0 1.5rem;
	font-size: 2rem;
	font-weight: 600;
	color: #0071e3;
}

.woocommerce-product-details__short-description {
	margin: 0 0 2rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: #1d1d1f;
}

/* ========================================
   Cart & Checkout
   ======================================== */

.wc-block-cart,
.wc-block-checkout {
	max-width: 1280px;
	margin: 0 auto;
	padding: 2rem;
}

.wc-block-cart__main,
.wc-block-checkout__main {
	background: #ffffff;
	border-radius: 12px;
	padding: 2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Cart Table */
.wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 80px 1fr auto auto auto;
	gap: 1.5rem;
	align-items: center;
	padding: 1.5rem 0;
	border-bottom: 1px solid #e5e5e7;
}

.wc-block-cart-items__row:last-child {
	border-bottom: none;
}

/* Cart Item Image */
.wc-block-cart-item__image {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #f5f5f7;
}

.wc-block-cart-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cart Totals */
.wc-block-cart__totals,
.wc-block-checkout__totals {
	background: #f5f5f7;
	border-radius: 12px;
	padding: 2rem;
}

.wc-block-cart__totals-title,
.wc-block-checkout__totals-title {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	font-weight: 700;
}

/* ========================================
   Buttons
   ======================================== */

.single_add_to_cart_button,
.wc-block-components-button {
	width: 100%;
	padding: 1rem 2rem;
	background-color: #0071e3;
	color: #ffffff;
	border: none;
	border-radius: 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.single_add_to_cart_button:hover,
.wc-block-components-button:hover {
	background-color: #005bb5;
}

.single_add_to_cart_button:focus,
.wc-block-components-button:focus {
	outline: 2px solid #0071e3;
	outline-offset: 2px;
}

/* ========================================
   Notices
   ======================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 1rem 1.5rem;
	margin-bottom: 1.5rem;
	border-radius: 8px;
	border-left: 4px solid;
}

.woocommerce-message {
	background-color: #d4edda;
	border-color: #34c759;
	color: #155724;
}

.woocommerce-info {
	background-color: #d1ecf1;
	border-color: #0071e3;
	color: #0c5460;
}

.woocommerce-error {
	background-color: #f8d7da;
	border-color: #ff3b30;
	color: #721c24;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 1024px) {
	.single-product .product {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.product .summary {
		position: static;
	}
}

@media (max-width: 768px) {
	.wc-block-grid__products {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 1.5rem;
	}

	.wc-block-cart-items__row {
		grid-template-columns: 60px 1fr;
		gap: 1rem;
	}

	.product_title {
		font-size: 2rem;
	}

	.price {
		font-size: 1.5rem;
	}
}

/* ========================================
   Accessibility
   ======================================== */

/* Focus styles */
.wc-block-grid__product a:focus,
.single_add_to_cart_button:focus,
.wc-block-components-button:focus {
	outline: 2px solid #0071e3;
	outline-offset: 2px;
}

/* Screen reader text */
.woocommerce-product-gallery__trigger {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

.woocommerce-product-gallery__trigger:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
	position: static;
}