/*
Theme Name: MeltBeads
Theme URI: https://meltbeads.com
Author: MeltBeads Studio
Author URI: https://meltbeads.com
Description: 完整移植 MeltBeads 测试站 UI：导航、Hero、Polaroid 堆叠、色板卡片、TRY IMAGINE FOR FREE。兼容 WooCommerce。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: meltbeads
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, woocommerce, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, one-column, two-columns, blog
*/

/*
 * MeltBeads Theme Styles
 * 
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served.
 * 
 * Main styles are defined in theme.json and can be customized via the Site Editor.
 */

/* MeltBeads Design System Variables */
:root {
	--mb-bg: #F2F0EB;
	--mb-text: #1C1C1C;
	--mb-accent: #000000;
	--mb-pegboard: #D6D3CD;
	--mb-cream: #F2F0EB;
	--mb-gray: #878787;
	--mb-gray-light: #E0E0E0;
	--mb-gray-dark: #464648;
}

/* Base Styles */
body {
	background-color: var(--mb-bg);
	color: var(--mb-text);
	font-family: 'Playfair Display', 'Times New Roman', serif;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

/* Pegboard Background Pattern */
.pegboard-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(var(--mb-pegboard) 15%, transparent 16%);
	background-size: 30px 30px;
	z-index: -1;
	opacity: 0.6;
	pointer-events: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', 'Times New Roman', serif;
	font-weight: 700;
	color: var(--mb-text);
}

.mb-mono {
	font-family: 'Space Mono', 'Courier New', monospace;
}

/* Link Styles */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.1em;
	color: var(--mb-text);
	transition: opacity 0.2s ease;
}

a:hover {
	opacity: 0.7;
}

/* Focus Styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
	outline-color: var(--mb-accent);
}

/* Button Styles */
.wp-block-button__link {
	border: 2px solid var(--mb-accent);
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;
	font-family: 'Space Mono', 'Courier New', monospace;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.wp-block-button__link:hover {
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
	transform: translate(2px, 2px);
}

.wp-block-button__link:active {
	box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.2);
	transform: translate(4px, 4px);
}

/* WooCommerce Integration Styles */
.woocommerce .products,
.woocommerce-page .products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem;
}

.woocommerce ul.products li.product {
	background: #fff;
	border: 2px solid var(--mb-accent);
	padding: 1.5rem;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
	.woocommerce .products,
	.woocommerce-page .products {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 1rem;
	}
}