/* ==========================================================

BRAND VARIABLES
========================================================== */
:root {
--brand-green: #065f46;
--brand-green-hover: #009643;
--brand-yellow: #f5a524;
--brand-yellow-hover: #e59513;
--text-dark: #222222;
--text-gray: #666666;
--text-light: #999999;
--border-light: #eaeaea;
--bg-light: #f8f8f8;
--white: #ffffff;
--font-main: 'Jost', sans-serif;
--max-width: 1400px;
}

/* ==========================================================
2. BREADCRUMB STYLING
========================================================== */
.brand-breadcrumb-wrapper {
background-color: var(--bg-light);
padding: 16px 24px;
border-radius: 12px;
margin-bottom: 35px;
border: 1px solid var(--border-light);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
font-family: var(--font-main);
}

.brand-breadcrumb-wrapper .woocommerce-breadcrumb {
margin: 0;
font-size: 15px;
color: var(--text-gray);
font-weight: 500;
display: flex;
align-items: center;
flex-wrap: wrap;
}

.brand-breadcrumb-wrapper .woocommerce-breadcrumb a {
color: var(--brand-green);
text-decoration: none;
transition: color 0.3s ease;
}

.brand-breadcrumb-wrapper .woocommerce-breadcrumb a:hover {
color: var(--brand-yellow);
}

.brand-breadcrumb-wrapper .woocommerce-breadcrumb .divider {
color: var(--text-light);
margin: 0 10px;
font-weight: 300;
}

/* ==========================================================
3. PRODUCT CARD STYLING (Flexbox Grid)
========================================================== */
ul.products li.product {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: 16px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
font-family: var(--font-main);
position: relative;

/* Flexbox rules to make it a perfect card */
display: flex !important;
flex-direction: column;
height: 100%; /* Ensures all cards in a row are the same height */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); /* Base shadow for 3D card feel */
padding-bottom: 0 !important;


}

ul.products li.product:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(6, 95, 70, 0.08); /* Soft green shadow on hover */
border-color: rgba(6, 95, 70, 0.2);
}

/* The wrapper link inside the card that holds the image, title, and price /
ul.products li.product > a.woocommerce-LoopProduct-link {
display: flex;
flex-direction: column;
flex-grow: 1; / Pushes the add-to-cart button down to the bottom */
text-decoration: none;
}

/* Image styling inside the card */
ul.products li.product a img {
border-radius: 16px 16px 0 0;
transition: transform 0.6s ease;
margin-bottom: 20px !important;
width: 100%;
object-fit: cover;
}

/* Image hover zoom effect */
ul.products li.product:hover a img {
transform: scale(1.04);
}

/* ==========================================================
4. TYPOGRAPHY (Titles & Prices inside Card)
========================================================== /
/ Product Title */
ul.products li.product .woocommerce-loop-product__title {
color: var(--text-dark);
font-size: 1.15rem !important;
font-weight: 600;
padding: 0 20px;
margin-bottom: 10px !important;
transition: color 0.3s ease;
line-height: 1.4;
}

ul.products li.product:hover .woocommerce-loop-product__title {
color: var(--brand-green);
}

/* Product Price /
ul.products li.product .price {
color: var(--brand-green) !important;
font-weight: 700;
font-size: 1.2rem !important;
padding: 0 20px;
margin-bottom: 20px !important; / Space between price and button */
}

ul.products li.product .price del {
color: var(--text-light) !important;
font-weight: 400;
font-size: 0.9rem;
margin-right: 6px;
}

/* ==========================================================
5. BUTTON STYLING (Add to Cart inside Card)
========================================================== */
ul.products li.product .button.add_to_cart_button,
ul.products li.product .button.product_type_variable {
display: block;

margin: auto 20px 24px 20px !important;
background-color: var(--brand-green);
color: var(--white);
border-radius: 50px;
padding: 12px 20px;
text-align: center;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.5px;
border: none;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
z-index: 2;
}

ul.products li.product .button.add_to_cart_button:hover,
ul.products li.product .button.product_type_variable:hover {
background-color: var(--brand-yellow);
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(245, 165, 36, 0.35); /* Yellow glow */
}

/* Loading state for AJAX add to cart */
ul.products li.product .button.loading {
opacity: 0.7;
padding-right: 40px;
}