/*
Theme Name: MuuMuu WooCommerce
Description: A modern WooCommerce-focused block theme with clean design and optimized e-commerce functionality. Perfect for online stores with customizable layouts and WooCommerce integration.
Author: MuuMuu Development Team
Version: 1.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: muumuu-woocommerce
Tags: e-commerce, woocommerce, block-theme, full-site-editing, custom-colors, custom-logo, featured-images, wide-blocks, accessibility-ready, responsive-layout
*/

/* Global Styles - Use theme.json design tokens */

/* WooCommerce specific styles using design tokens */
.woocommerce {
	font-family: var(--wp--preset--font-family--system);
}

.woocommerce .product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--40) 0;
}

.woocommerce .woocommerce-product-gallery {
	margin-bottom: var(--wp--preset--spacing--40);
}

.woocommerce .single-product-summary {
	padding: var(--wp--preset--spacing--20) 0;
}

.woocommerce .price {
	color: var(--wp--preset--color--secondary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
}

.woocommerce .button {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.woocommerce .button:hover {
	background-color: var(--wp--preset--color--neutral-dark);
}

.woocommerce .button.alt {
	background-color: var(--wp--preset--color--secondary);
}

.woocommerce .button.alt:hover {
	background-color: var(--wp--preset--color--neutral-dark);
}

/* Cart and Checkout */
.woocommerce-cart-form,
.woocommerce-checkout {
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
}

.woocommerce table.cart {
	border-collapse: collapse;
	width: 100%;
}

.woocommerce table.cart th,
.woocommerce table.cart td {
	padding: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--neutral-light);
}

/* Product archive */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	padding: 0;
}

.woocommerce ul.products li.product {
	border: 1px solid var(--wp--preset--color--neutral-light);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--20);
	transition: box-shadow 0.3s ease;
}

.woocommerce ul.products li.product:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive design */
@media (max-width: 768px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--20);
	}
	
	.woocommerce ul.products li.product {
		padding: var(--wp--preset--spacing--20);
	}
}

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

/* Search button styling */
.wp-block-search .wp-block-search__button {
	color: var(--wp--preset--color--base) !important;
	background-color: var(--wp--preset--color--primary) !important;
	border: none !important;
	border-radius: 0 6px 6px 0 !important;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20) !important;
	transition: background-color 0.3s ease !important;
}

.wp-block-search .wp-block-search__button svg {
	fill: var(--wp--preset--color--base) !important;
}

.wp-block-search .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--neutral-dark) !important;
}

.wp-block-search .wp-block-search__button:hover svg {
	fill: var(--wp--preset--color--base) !important;
}

/* Search input styling */
.wp-block-search .wp-block-search__input {
	background: var(--wp--preset--color--base) !important;
	border-radius: 6px 0 0 6px !important;
}

.wp-block-search__input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: none;
	color: var(--wp--preset--color--text-light);
	cursor: pointer;
	font-size: 16px;
	height: 16px;
	width: 16px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2395a5a6'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
}

.wp-block-search__input[type="search"]::-webkit-search-cancel-button:hover {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232c3e50'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

/* Firefox search clear button */
.wp-block-search__input[type="search"]::-moz-search-clear-button {
	appearance: none;
	background: none;
	border: none;
	color: var(--wp--preset--color--text-light);
	cursor: pointer;
	font-size: 16px;
	height: 16px;
	width: 16px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2395a5a6'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
}

/* Focus styles for accessibility */
.woocommerce .button:focus,
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Remove custom checkout/cart layout - use woocommerce-custom.css instead */

/* Invoice button styling */
.muumuu-invoice-download {
	display: inline-block;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	border-radius: 6px;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	transition: background-color 0.3s ease;
}

.muumuu-invoice-download:hover {
	background-color: var(--wp--preset--color--neutral-dark);
	color: var(--wp--preset--color--base);
}