/*
Theme Name: Mourwiful
Theme URI: http://example.com/mourwiful/
Author: Antigravity
Author URI: http://example.com/
Description: Custom e-commerce theme for Mourwiful clay jewellery.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mourwiful
Tags: custom, e-commerce, woocommerce
*/

/* Basic resets and general styles to follow the design */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #FAFAFA;
    color: #333333;
}

/* Include any CSS variables or globals from the designs here */

/* Ensure WooCommerce grids work well with Tailwind */
.woocommerce ul.products {
    display: grid !important;
    gap: 1.5rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Mobile */
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}

.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    clear: none !important;
    position: relative !important;
    padding-bottom: 2rem !important;
    text-align: left !important;
}

.woocommerce ul.products li.product .price {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* Columns-6 layout */
@media (min-width: 768px) {
    .woocommerce ul.products.columns-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
    .woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

/* Columns-4 layout (Related Products) */
@media (min-width: 768px) {
    .woocommerce ul.products.columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
    .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Columns-3 layout */
@media (min-width: 768px) {
    .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Force Logo Sizes */
img[alt="Mourwiful Logo"] {
    max-height: 80px !important;
    max-width: 300px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.woocommerce-ordering {
    float: none !important;
    margin: 0 !important;
}

/* Style all WooCommerce buttons (Add to cart, checkout, etc.) */
.woocommerce .button:not(.ajax_add_to_cart), 
.woocommerce-page .button:not(.ajax_add_to_cart), 
.woocommerce button.button:not(.ajax_add_to_cart), 
.woocommerce-page button.button:not(.ajax_add_to_cart), 
.woocommerce input.button, 
.woocommerce-page input.button, 
.woocommerce #respond input#submit, 
.woocommerce-page #respond input#submit, 
.woocommerce #content input.button, 
.woocommerce-page #content input.button {
    background-color: var(--primary-color) !important; /* Theme Primary Container Green */
    color: #ffffff !important;
    border-radius: 20px !important; /* User requested 20px */
    padding: 10px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce .button:not(.ajax_add_to_cart):hover, 
.woocommerce-page .button:not(.ajax_add_to_cart):hover, 
.woocommerce button.button:not(.ajax_add_to_cart):hover, 
.woocommerce-page button.button:not(.ajax_add_to_cart):hover, 
.woocommerce input.button:hover, 
.woocommerce-page input.button:hover, 
.woocommerce #respond input#submit:hover, 
.woocommerce-page #respond input#submit:hover, 
.woocommerce #content input.button:hover, 
.woocommerce-page #content input.button:hover {
    background-color: #496455 !important; /* Theme Primary Green */
    color: #ffffff !important;
}

/* Specific styling for the circular cart icon button on shop loop and front page */
.woocommerce ul.products li.product .button.ajax_add_to_cart,
.front-page-product .button.ajax_add_to_cart,
a.button.ajax_add_to_cart,
.woocommerce ul.products li.product .added_to_cart,
.front-page-product .added_to_cart,
a.added_to_cart.wc-forward {
    background-color: #e6f0eb !important; /* Light green */
    color: var(--primary-color) !important; /* Forest green icon */
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    min-height: 44px !important;
}

/* Hide the text in the View Cart button and show an icon instead */
.woocommerce ul.products li.product .added_to_cart,
.front-page-product .added_to_cart,
a.added_to_cart.wc-forward {
    font-size: 0 !important; 
}

.woocommerce ul.products li.product .added_to_cart::after,
.front-page-product .added_to_cart::after,
a.added_to_cart.wc-forward::after {
    content: "\e8cc"; /* fallback to shopping_cart, but we want shopping_bag */
    content: "\f1cc"; /* Wait, shopping_bag might be different code */
    /* It's safer to use the ligature name for material symbols */
    content: "shopping_bag";
    font-family: "Material Symbols Outlined";
    font-size: 20px !important;
    line-height: 1 !important;
}

.woocommerce ul.products li.product .button.ajax_add_to_cart:hover,
.front-page-product .button.ajax_add_to_cart:hover,
a.button.ajax_add_to_cart:hover,
.woocommerce ul.products li.product .added_to_cart:hover,
.front-page-product .added_to_cart:hover,
a.added_to_cart.wc-forward:hover {
    background-color: #ccead6 !important; /* slightly darker light green */
    color: #173124 !important; /* darker forest green icon */
    transform: translateY(-2px) !important;
}

/* Hide the default WooCommerce checkmark that appears after adding to cart */
.woocommerce ul.products li.product .button.added::after,
.front-page-product .button.added::after,
a.button.added::after {
    display: none !important;
    content: none !important;
}

/* Ensure the product link on shop list page has enough clearance so text doesn't hide under the cart buttons */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
    display: block !important;
    padding-bottom: 4rem !important;
}

/* Align Add to Cart button next to quantity for both simple and variable products */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 2rem !important;
}

/* Ensure variable product options form stays block-level */
.woocommerce div.product form.variations_form {
    display: block !important;
}

.woocommerce .quantity {
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    display: inline-flex !important;
}

/* Cart Block Specific Fixes */
.wc-block-cart {
    margin-top: 0 !important; /* Remove gap above cart */
}

/* Style the Cart Block Checkout Button */
.wc-block-cart .wc-block-components-checkout-button,
.wc-block-cart .wc-block-components-checkout-button .wp-block-button__link,
.wc-block-cart .checkout-button {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.wc-block-cart .wc-block-components-checkout-button:hover,
.wc-block-cart .wc-block-components-checkout-button .wp-block-button__link:hover,
.wc-block-cart .checkout-button:hover {
    background-color: #496455 !important;
    color: #ffffff !important;
}

/* WooCommerce Notices (Message, Error, Info) */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
    border-radius: 8px !important; /* A little rounded corner */
    position: relative !important;
    padding-right: 40px !important;
}

/* Close button for notices */
.woocommerce-notice-close {
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: inherit !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
    z-index: 10 !important;
}
.woocommerce-notice-close:hover {
    opacity: 1 !important;
}

/* My Account Dashboard Styling */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 25% !important;
    float: left !important;
    padding-right: 2rem !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--secondary-color) !important; /* surface-container */
    border-radius: 1rem !important;
    overflow: hidden !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #e4e2dd !important; /* outline-variant */
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 1rem 1.5rem !important;
    color: #424844 !important; /* on-surface-variant */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--primary-color) !important; /* primary-container */
    color: #ffffff !important; /* on-primary-container */
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 75% !important;
    float: right !important;
    background-color: #ffffff !important;
    padding: 2.5rem !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        float: none !important;
        padding-right: 0 !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 2rem !important;
    }
}

/* Custom Address Form Layout (Flexbox) */
.woocommerce-address-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

.woocommerce-address-fields__field-wrapper .form-row {
    margin-right: 0 !important;
    float: none !important;
    clear: none !important;
}

/* Widths */
#billing_first_name_field, #shipping_first_name_field,
#billing_last_name_field, #shipping_last_name_field,
#billing_country_field, #shipping_country_field,
#billing_state_field, #shipping_state_field {
    width: 48% !important;
}

#billing_company_field, #shipping_company_field,
#billing_address_1_field, #shipping_address_1_field,
#billing_address_2_field, #shipping_address_2_field,
#billing_email_field {
    width: 100% !important;
}

#billing_city_field, #shipping_city_field,
#billing_postcode_field, #shipping_postcode_field,
#billing_phone_field, #shipping_phone_field {
    width: 32% !important;
}

/* Explicit DOM Ordering */
#billing_first_name_field, #shipping_first_name_field { order: 10 !important; }
#billing_last_name_field, #shipping_last_name_field { order: 20 !important; }
#billing_company_field, #shipping_company_field { order: 30 !important; }
#billing_country_field, #shipping_country_field { order: 40 !important; }
#billing_state_field, #shipping_state_field { order: 50 !important; }
#billing_address_1_field, #shipping_address_1_field { order: 60 !important; }
#billing_address_2_field, #shipping_address_2_field { order: 70 !important; }
#billing_city_field, #shipping_city_field { order: 80 !important; }
#billing_postcode_field, #shipping_postcode_field { order: 90 !important; }
#billing_phone_field, #shipping_phone_field { order: 100 !important; }
#billing_email_field { order: 110 !important; }

@media (max-width: 768px) {
    .woocommerce-address-fields__field-wrapper .form-row {
        width: 100% !important;
    }
}

/* My Account Addresses List (Saved Addresses) */
.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: var(--primary-color) !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title .edit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    border: none !important;
    float: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title .edit:hover {
    background-color: #496455 !important;
    color: #ffffff !important;
}

.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title::before,
.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title::after,
.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title h2::before,
.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title h2::after {
    display: none !important;
    content: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title .edit:active {
    transform: scale(0.95) !important;
}

.woocommerce-account .woocommerce-MyAccount-content div.woocommerce-Address address {
    text-align: left !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    color: #424844 !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
}

/* Address columns layout */
.woocommerce-account .woocommerce-MyAccount-content div.u-columns.woocommerce-Addresses {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 2rem !important;
    width: 100% !important;
    clear: both !important;
}

.woocommerce-account .woocommerce-MyAccount-content div.u-columns.woocommerce-Addresses > div.woocommerce-Address {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-content div.u-columns.woocommerce-Addresses {
        flex-direction: column !important;
    }
    .woocommerce-account .woocommerce-MyAccount-content div.u-columns.woocommerce-Addresses > div.woocommerce-Address {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* Account Details Form Tweaks */
.half-width-row {
    width: 48% !important;
    float: left !important;
    clear: none !important;
}
.half-width-row.first {
    margin-right: 4% !important;
    clear: both !important;
}

.pass-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
    gap: 2%;
}

.pass-wrapper p.form-row {
    width: 32% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.woocommerce-EditAccountForm .woocommerce-password-hint,
.woocommerce-EditAccountForm .woocommerce-password-strength {
    display: none !important;
}

/* Replace WooCommerce Cart Block empty sad face with shopping cart */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    background-color: transparent !important;
    font-family: 'Material Symbols Outlined' !important;
    content: 'shopping_cart' !important;
    font-size: 5rem !important;
    color: var(--primary-color) !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
    margin-bottom: 20px !important;
}

@media (max-width: 768px) {
    .half-width-row, .pass-wrapper p.form-row {
        width: 100% !important;
        margin-right: 0 !important;
    }
}