/**
 * Health Nutrition BD Pro Styling
 * Professional enhancement for WordPress/WooCommerce with Astra theme
 * Version: 1.0.0
 */

/* ==========================================
   CSS VARIABLES - Professional Color Palette
   ========================================== */
:root {
    --hnbd-primary-emerald: #10b981;
    --hnbd-primary-dark: #065f46;
    --hnbd-accent-gold: #f59e0b;
    --hnbd-bg-light: #f9fafb;
    --hnbd-text-charcoal: #111827;
    --hnbd-text-gray: #4b5563;
    --hnbd-white: #ffffff;
    --hnbd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --hnbd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --hnbd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --hnbd-transition: all 0.3s ease;
}

/* ==========================================
   GLOBAL OVERRIDES
   ========================================== */
.hnbd-pro-active body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: var(--hnbd-bg-light) !important;
    color: var(--hnbd-text-charcoal) !important;
    line-height: 1.6 !important;
}

.hnbd-pro-active h1,
.hnbd-pro-active h2,
.hnbd-pro-active h3,
.hnbd-pro-active h4,
.hnbd-pro-active h5,
.hnbd-pro-active h6 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: var(--hnbd-primary-dark) !important;
}

/* ==========================================
   HEADER STYLING
   ========================================== */
.hnbd-pro-active .site-header,
.hnbd-pro-active #masthead {
    background-color: var(--hnbd-white) !important;
    box-shadow: var(--hnbd-shadow-sm) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    border-bottom: none !important;
}

.hnbd-pro-active .site-header .site-branding .site-title,
.hnbd-pro-active .site-header .site-branding .site-title a {
    color: var(--hnbd-primary-emerald) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
}

.hnbd-pro-active .main-header-menu a,
.hnbd-pro-active .main-navigation a {
    color: var(--hnbd-text-gray) !important;
    font-weight: 500 !important;
    transition: var(--hnbd-transition) !important;
    text-decoration: none !important;
}

.hnbd-pro-active .main-header-menu a:hover,
.hnbd-pro-active .main-navigation a:hover {
    color: var(--hnbd-primary-emerald) !important;
}

/* Cart Button in Header */
.hnbd-pro-active .ast-header-woo-cart,
.hnbd-pro-active .header-main-layout-1 .ast-site-identity {
    padding: 0.5rem 1rem !important;
}

.hnbd-pro-active .ast-cart-menu-wrap {
    background-color: var(--hnbd-primary-emerald) !important;
    padding: 0.75rem 2rem !important;
    border-radius: 8px !important;
    transition: var(--hnbd-transition) !important;
}

.hnbd-pro-active .ast-cart-menu-wrap:hover {
    background-color: var(--hnbd-primary-dark) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================
   HERO/BANNER SECTION
   ========================================== */
.hnbd-pro-active .entry-header,
.hnbd-pro-active .woocommerce-products-header {
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%) !important;
    padding: 4rem 2rem !important;
    text-align: center !important;
    border-radius: 0 !important;
    margin-bottom: 3rem !important;
}

.hnbd-pro-active .woocommerce-products-header__title,
.hnbd-pro-active .entry-title {
    font-size: 3rem !important;
    color: var(--hnbd-primary-dark) !important;
    margin-bottom: 1rem !important;
}

.hnbd-pro-active .term-description,
.hnbd-pro-active .woocommerce-result-count {
    font-size: 1.25rem !important;
    color: var(--hnbd-text-gray) !important;
    max-width: 700px !important;
    margin: 0 auto !important;
}

/* ==========================================
   BUTTONS - PROFESSIONAL STYLING
   ========================================== */
.hnbd-pro-active .button,
.hnbd-pro-active button,
.hnbd-pro-active .ast-button,
.hnbd-pro-active input[type="submit"],
.hnbd-pro-active .wp-block-button__link,
.hnbd-pro-active .woocommerce #respond input#submit,
.hnbd-pro-active .woocommerce a.button,
.hnbd-pro-active .woocommerce button.button,
.hnbd-pro-active .woocommerce input.button,
.hnbd-pro-active .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: var(--hnbd-primary-emerald) !important;
    color: var(--hnbd-white) !important;
    border: 2px solid var(--hnbd-primary-emerald) !important;
    padding: 0.75rem 2rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    transition: var(--hnbd-transition) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.hnbd-pro-active .button:hover,
.hnbd-pro-active button:hover,
.hnbd-pro-active .ast-button:hover,
.hnbd-pro-active .woocommerce a.button:hover,
.hnbd-pro-active .woocommerce button.button:hover {
    background-color: var(--hnbd-primary-dark) !important;
    border-color: var(--hnbd-primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--hnbd-shadow-md) !important;
}

/* ==========================================
   PRODUCT GRID - MODERN LAYOUT
   ========================================== */
.hnbd-pro-active .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
    margin: 0 0 4rem 0 !important;
    list-style: none !important;
}

.hnbd-pro-active .woocommerce ul.products li.product {
    background: var(--hnbd-white) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: var(--hnbd-shadow-sm) !important;
    transition: var(--hnbd-transition) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

.hnbd-pro-active .woocommerce ul.products li.product:hover {
    transform: translateY(-10px) !important;
    box-shadow: var(--hnbd-shadow-lg) !important;
}

/* Product Images */
.hnbd-pro-active .woocommerce ul.products li.product img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.hnbd-pro-active .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.1rem !important;
    margin: 1rem 1.5rem 0.5rem !important;
    color: var(--hnbd-primary-dark) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
}

.hnbd-pro-active .woocommerce ul.products li.product .price {
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: var(--hnbd-text-charcoal) !important;
    margin: 0.5rem 1.5rem 1.5rem !important;
}

.hnbd-pro-active .woocommerce ul.products li.product .price del {
    opacity: 0.5 !important;
    font-weight: 400 !important;
}

.hnbd-pro-active .woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    color: var(--hnbd-primary-emerald) !important;
}

/* Product Category Badge */
.hnbd-pro-active .woocommerce ul.products li.product .ast-woo-product-category {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--hnbd-primary-emerald) !important;
    font-weight: 600 !important;
    margin: 1rem 1.5rem 0.25rem !important;
    display: block !important;
}

/* Add to Cart Button */
.hnbd-pro-active .woocommerce ul.products li.product .button {
    width: calc(100% - 3rem) !important;
    margin: 0 1.5rem 1.5rem !important;
    text-align: center !important;
}

/* ==========================================
   SINGLE PRODUCT PAGE
   ========================================== */
.hnbd-pro-active .woocommerce div.product {
    background: var(--hnbd-white) !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    box-shadow: var(--hnbd-shadow-md) !important;
}

.hnbd-pro-active .woocommerce div.product .product_title {
    font-size: 2.5rem !important;
    color: var(--hnbd-primary-dark) !important;
}

.hnbd-pro-active .woocommerce div.product p.price {
    font-size: 2rem !important;
    color: var(--hnbd-primary-emerald) !important;
}

.hnbd-pro-active .woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 1.1rem !important;
    color: var(--hnbd-text-gray) !important;
    line-height: 1.8 !important;
}

/* ==========================================
   CART PAGE
   ========================================== */
.hnbd-pro-active .woocommerce-cart table.cart {
    background: var(--hnbd-white) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: var(--hnbd-shadow-sm) !important;
}

.hnbd-pro-active .woocommerce-cart table.cart th {
    background-color: var(--hnbd-primary-dark) !important;
    color: var(--hnbd-white) !important;
    padding: 1rem !important;
    font-weight: 600 !important;
}

.hnbd-pro-active .woocommerce-cart table.cart td {
    padding: 1.5rem 1rem !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.hnbd-pro-active .cart-collaterals .cart_totals {
    background: var(--hnbd-white) !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    box-shadow: var(--hnbd-shadow-md) !important;
}

/* ==========================================
   CHECKOUT PAGE
   ========================================== */
.hnbd-pro-active .woocommerce-checkout .woocommerce-billing-fields,
.hnbd-pro-active .woocommerce-checkout .woocommerce-shipping-fields {
    background: var(--hnbd-white) !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    box-shadow: var(--hnbd-shadow-sm) !important;
    margin-bottom: 2rem !important;
}

.hnbd-pro-active .woocommerce-checkout #order_review {
    background: var(--hnbd-white) !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    box-shadow: var(--hnbd-shadow-md) !important;
}

.hnbd-pro-active .woocommerce form .form-row input.input-text,
.hnbd-pro-active .woocommerce form .form-row textarea {
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    transition: var(--hnbd-transition) !important;
}

.hnbd-pro-active .woocommerce form .form-row input.input-text:focus,
.hnbd-pro-active .woocommerce form .form-row textarea:focus {
    border-color: var(--hnbd-primary-emerald) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* ==========================================
   FOOTER STYLING
   ========================================== */
.hnbd-pro-active .site-footer,
.hnbd-pro-active footer {
    background-color: var(--hnbd-primary-dark) !important;
    color: var(--hnbd-white) !important;
    padding: 4rem 0 2rem !important;
    margin-top: 4rem !important;
}

.hnbd-pro-active .site-footer h1,
.hnbd-pro-active .site-footer h2,
.hnbd-pro-active .site-footer h3,
.hnbd-pro-active .site-footer h4 {
    color: var(--hnbd-accent-gold) !important;
}

.hnbd-pro-active .site-footer a {
    color: #d1d5db !important;
    transition: var(--hnbd-transition) !important;
}

.hnbd-pro-active .site-footer a:hover {
    color: var(--hnbd-white) !important;
}

.hnbd-pro-active .site-info,
.hnbd-pro-active .ast-small-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 2rem !important;
    margin-top: 2rem !important;
    color: #9ca3af !important;
}

/* ==========================================
   SECTION TITLES
   ========================================== */
.hnbd-pro-active .woocommerce-loop-product__title::before,
.hnbd-pro-active h2.woocommerce-loop-category__title::after {
    content: '' !important;
    display: block !important;
    width: 50px !important;
    height: 4px !important;
    background: var(--hnbd-accent-gold) !important;
    margin: 10px auto !important;
    border-radius: 2px !important;
}

/* ==========================================
   BREADCRUMBS
   ========================================== */
.hnbd-pro-active .woocommerce-breadcrumb {
    background: var(--hnbd-white) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 8px !important;
    margin-bottom: 2rem !important;
    box-shadow: var(--hnbd-shadow-sm) !important;
}

.hnbd-pro-active .woocommerce-breadcrumb a {
    color: var(--hnbd-primary-emerald) !important;
    text-decoration: none !important;
}

/* ==========================================
   SALE BADGES
   ========================================== */
.hnbd-pro-active .woocommerce span.onsale {
    background-color: var(--hnbd-accent-gold) !important;
    color: var(--hnbd-white) !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 768px) {
    .hnbd-pro-active .woocommerce ul.products {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 1.5rem !important;
    }
    
    .hnbd-pro-active .woocommerce-products-header__title,
    .hnbd-pro-active .entry-title {
        font-size: 2rem !important;
    }
    
    .hnbd-pro-active .entry-header,
    .hnbd-pro-active .woocommerce-products-header {
        padding: 2rem 1rem !important;
    }
}

/* ==========================================
   LOADING ANIMATIONS
   ========================================== */
@keyframes hnbd-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hnbd-pro-active .woocommerce ul.products li.product {
    animation: hnbd-fade-in 0.5s ease-out !important;
}