/*
Theme Name: Medieval Spirits Shop
Theme URI: https://your-domain.com/
Author: Your Name
Author URI: https://your-domain.com/
Description: A medieval-themed block theme for a spirits shop with WooCommerce integration
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medieval-spirits
*/

/* Core Theme Styles */
:root {
    --wp--preset--color--dark-green: #1a3a2a;
    --wp--preset--color--gold-amber: #c4963d;
    --wp--preset--color--dark-brown: #3e2723;
    --wp--preset--color--cream-white: #f5f0e1;
    --wp--preset--color--dark-green-light: #2a5a3a;
    --wp--preset--color--gold-light: #d4a74a;
    --wp--preset--color--brown-light: #5d4037;

    /* Typography */
    --wp--preset--font-family--medieval-heading: "Cinzel", Georgia, serif;
    --wp--preset--font-family--body-text: "Cormorant Garamond", Garamond, serif;
}

/* Global Styles */
body {
    background-color: var(--wp--preset--color--cream-white);
    color: var(--wp--preset--color--dark-brown);
    font-family: var(--wp--preset--font-family--body-text);
}

/* WooCommerce Custom Styles */
.woocommerce .products .product {
    background: var(--wp--preset--color--cream-white);
    border: 2px solid var(--wp--preset--color--gold-amber);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(62, 39, 35, 0.1);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.woocommerce .products .product:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(62, 39, 35, 0.2);
}

.woocommerce .button,
.woocommerce button.button {
    background: var(--wp--preset--color--dark-green) !important;
    color: var(--wp--preset--color--cream-white) !important;
    border: 2px solid var(--wp--preset--color--gold-amber) !important;
    font-family: var(--wp--preset--font-family--medieval-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover {
    background: var(--wp--preset--color--gold-amber) !important;
    color: var(--wp--preset--color--dark-brown) !important;
    border-color: var(--wp--preset--color--dark-brown) !important;
}

.woocommerce div.product {
    background: var(--wp--preset--color--cream-white);
}

.woocommerce div.product .product_title {
    font-family: var(--wp--preset--font-family--medieval-heading);
    color: var(--wp--preset--color--dark-green);
    font-size: 2.5em;
    border-bottom: 3px double var(--wp--preset--color--gold-amber);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.woocommerce div.product .price {
    color: var(--wp--preset--color--gold-amber) !important;
    font-size: 2em !important;
    font-weight: bold;
}

/* Navigation Styles */
.wp-block-navigation {
    background: var(--wp--preset--color--dark-green);
}

.wp-block-navigation .wp-block-navigation-item a {
    color: var(--wp--preset--color--cream-white);
    font-family: var(--wp--preset--font-family--medieval-heading);
    text-transform: uppercase;
    font-size: 0.9em;
}

.wp-block-navigation .wp-block-navigation-item a:hover {
    color: var(--wp--preset--color--gold-amber);
}

/* Medieval decorative elements */
.medieval-divider {
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--wp--preset--color--gold-amber) 20%,
        var(--wp--preset--color--gold-amber) 80%,
        transparent 100%
    );
    height: 2px;
    margin: 40px 0;
}

/* Cart & Checkout Styling */
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
    background: var(--wp--preset--color--cream-white);
    border: 2px solid var(--wp--preset--color--gold-amber);
}

.woocommerce-cart table.cart thead th,
.woocommerce-checkout table.shop_table thead th {
    background: var(--wp--preset--color--dark-green);
    color: var(--wp--preset--color--cream-white);
    font-family: var(--wp--preset--font-family--medieval-heading);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .woocommerce .products .product {
        width: 48% !important;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .woocommerce .products .product {
        width: 100% !important;
    }
}