/* =======================
   WooCommerce Aurora Styles
   ======================= */

/* -----------------------
   Body & Wrapper
------------------------ */
body.woocommerce,
body.woocommerce-page,
.woocommerce .woocommerce-breadcrumb {
    background-color: var(--site-background-color);
    color: var(--body-text-color);
    font-family: var(--body-font-family);
    font-size: var(--body-font-size-desktop);
    line-height: var(--body-line-height-desktop);
    font-weight: var(--body-font-weight);
    text-transform: var(--body-text-transform);
    font-style: var(--body-font-style);
    text-decoration: var(--body-text-decoration);
}

@media (max-width: 1024px) {
    body.woocommerce,
    body.woocommerce-page {
        font-size: var(--body-font-size-tablet);
        line-height: var(--body-line-height-tablet);
        letter-spacing: var(--body-letter-spacing-tablet);
        word-spacing: var(--body-word-spacing-tablet);
    }
}

@media (max-width: 480px) {
    body.woocommerce,
    body.woocommerce-page {
        font-size: var(--body-font-size-mobile);
        line-height: var(--body-line-height-mobile);
        letter-spacing: var(--body-letter-spacing-mobile);
        word-spacing: var(--body-word-spacing-mobile);
    }
}

/* -----------------------
   Headings
------------------------ */
body.woocommerce h1 {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size-desktop);
    line-height: var(--h1-line-height-desktop);
    font-weight: var(--h1-font-weight);
    text-transform: var(--h1-text-transform);
    font-style: var(--h1-font-style);
    color: var(--heading-color);
}

body.woocommerce h2 {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size-desktop);
    line-height: var(--h2-line-height-desktop);
    font-weight: var(--h2-font-weight);
    text-transform: var(--h2-text-transform);
    font-style: var(--h2-font-style);
    color: var(--heading-color);
}

body.woocommerce h3 {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size-desktop);
    line-height: var(--h3-line-height-desktop);
    font-weight: var(--h3-font-weight);
    text-transform: var(--h3-text-transform);
    font-style: var(--h3-font-style);
    color: var(--heading-color);
}

/* -----------------------
   Links
------------------------ */
body.woocommerce a, .woocommerce .woocommerce-breadcrumb a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

body.woocommerce a:hover,
body.woocommerce a:focus,
.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--link-hover-color);
    text-decoration: revert;
}

/* -----------------------
   Buttons
------------------------ */
body.woocommerce button,
body.woocommerce input[type="button"],
body.woocommerce input[type="submit"],
body.woocommerce a.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt {
    font-family: var(--button-font-family);
    font-size: var(--button-font-size-desktop);
    line-height: var(--button-line-height-desktop);
    font-weight: var(--button-font-weight);
    text-transform: var(--button-text-transform);
    font-style: var(--button-font-style);
    text-decoration: var(--button-text-decoration);
    color: var(--button-text-color);
    background-color: var(--button-background-color);
    border: none;
    cursor: pointer;
    padding: 0.75em 1.5em;
    transition: all 0.3s ease;
}

body.woocommerce button:hover,
body.woocommerce input[type="submit"]:hover,
body.woocommerce a.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover {
    color: var(--button-text-hover-color);
    background-color: var(--button-background-hover-color);
}

/* -----------------------
   Form Inputs
------------------------ */
body.woocommerce input.input-text,
body.woocommerce textarea,
body.woocommerce select {
    font-family: var(--body-font-family);
    font-size: var(--body-font-size-desktop);
    color: var(--body-text-color);
    background-color: var(--site-background-color);
    border: 1px solid #ccc;
    padding: 0.5em;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

body.woocommerce input.input-text:focus,
body.woocommerce textarea:focus,
body.woocommerce select:focus {
    border-color: var(--link-color);
    outline: none;
}

/* -----------------------
   Product Titles & Prices
------------------------ */
body.woocommerce ul.products li.product h2,
body.woocommerce div.product .product_title {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size-desktop);
    line-height: var(--h2-line-height-desktop);
    font-weight: var(--h2-font-weight);
    text-transform: var(--h2-text-transform);
    font-style: var(--h2-font-style);
    color: var(--heading-color);
    margin: 0.5em 0;
}

body.woocommerce div.product p.price,
body.woocommerce ul.products li.product .price {
    font-family: var(--body-font-family);
    font-size: var(--body-font-size-desktop);
    font-weight: var(--body-font-weight);
    color: var(--button-background-color);
}

/* -----------------------
   Product Thumbnails & Images
------------------------ */
body.woocommerce ul.products li.product img,
body.woocommerce div.product img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    margin-bottom: 0.5em;
}

/* -----------------------
   Shop Loop
------------------------ */
body.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2em;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.woocommerce ul.products li.product {
    border: 1px solid #eee;
    padding: 1em;
    background-color: var(--site-background-color);
    transition: box-shadow 0.3s ease;
}

body.woocommerce ul.products li.product:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* -----------------------
   Single Product Layout
------------------------ */
body.woocommerce div.product .woocommerce-product-gallery {
    margin-bottom: 1.5em;
}

body.woocommerce div.product .woocommerce-tabs {
    margin-top: 2em;
}

body.woocommerce div.product .woocommerce-tabs h2 {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size-desktop);
    color: var(--heading-color);
    margin-bottom: 1em;
}

body.woocommerce div.product .woocommerce-Tabs-panel {
    font-family: var(--body-font-family);
    font-size: var(--body-font-size-desktop);
    color: var(--body-text-color);
    line-height: var(--body-line-height-desktop);
}

/* -----------------------
   Cart & Checkout
------------------------ */
body.woocommerce .woocommerce-cart-form,
body.woocommerce .woocommerce-checkout form {
    background-color: var(--site-background-color);
    padding: 2em;
    border: 1px solid #eee;
    margin-bottom: 2em;
}

body.woocommerce .woocommerce-cart-form table.shop_table th,
body.woocommerce .woocommerce-cart-form table.shop_table td {
    font-family: var(--body-font-family);
    font-size: var(--body-font-size-desktop);
    color: var(--body-text-color);
}

body.woocommerce .woocommerce-checkout #customer_details label {
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    color: var(--body-text-color);
}

.site-sidebar {
    display: none
}

/* -----------------------
   Responsive Adjustments
------------------------ */
@media (max-width: 1024px) {
    body.woocommerce ul.products {
        gap: 1.5em;
    }
    body.woocommerce .woocommerce-cart-form,
    body.woocommerce .woocommerce-checkout form {
        padding: 1.5em;
    }
}

@media (max-width: 480px) {
    body.woocommerce ul.products {
        grid-template-columns: 1fr;
        gap: 1em;
    }
    body.woocommerce .woocommerce-cart-form,
    body.woocommerce .woocommerce-checkout form {
        padding: 1em;
    }
    body.woocommerce div.product .woocommerce-tabs h2 {
        font-size: var(--h4-font-size-desktop);
    }
}
