/*
Theme Name: Avanam Child
Theme URI: https://studiowd.ar
Description: Custom landing para Avanam.
Author: Emiliano G
Author URI: https://studiowd.ar/
Template: avanam
Version: 1.0.0
*/

/* Import parent theme styles - CRUCIAL */
@import url("../avanam/style.css");

/* ================================================== */
/* Custom Homepage Styling                 */
/* ================================================== */



strong {
    font-weight: 700 !important;
}


/* Global Container for Centering Content (Adjust max-width as per Avanam's design) */
.site-container {
    max-width: 1200px; /* Example width, check your Avanam theme's main container width */
    margin: 0 auto;
    padding: 0 15px; /* Padding on the sides for smaller screens */
}

/* --- Hero Section --- */
.home-hero-section {
    background-color: #f49d6e; /* Light background as in your image */
    padding: 60px 0; /* Top/bottom padding */
    margin-bottom: 40px;
    /* If you have a large background image for the entire section: */
    /* background-image: url('../assets/images/hero-background.jpg'); */
    /* background-size: cover; */
    /* background-position: center center; */
}

.hero-content-wrapper {
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 40px; /* Space between image and text columns */
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
}

.hero-image-col {
    flex: 0 0 40%; /* Image column takes 40% width */
    max-width: 40%;
}
.hero-image-col img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes extra space below image */
}

.hero-text-col {
    flex: 1; /* Text column takes remaining space */
    text-align: right; /* As seen in your image */
    padding-right: 20px; /* Adjust if needed */
}

.hero-category {
    color: #FFA500; /* Orange color (adjust to your brand color) */
    font-size: 1.2em;
    font-weight: bold;
    display: block; /* Ensures it's on its own line */
    margin-bottom: 8px;
}

.hero-title {
    font-size: 3em; /* Larger font size for the title */
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.2;
}

.hero-description {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 25px;
}

/* --- Small Blocks Section (Agujas, Moxa, Offer) --- */
.home-small-blocks-section {
    margin-bottom: 40px;
}

.small-blocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive 3-column grid */
    gap: 25px; /* Space between blocks */
}

.small-block-item {
    background-color: #fdfdfd; /* White background */
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Subtle shadow */
    transition: transform 0.3s ease; /* Smooth hover effect */
    display: flex; /* Use flex for vertical centering/alignment */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 260px; /* Ensure uniform height for all blocks */
}
.small-block-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}
.small-block-item img {
    max-width: 100px; /* Size for product images */
    height: auto;
    margin-bottom: 15px;
}
.small-block-item h3 {
    font-size: 1.4em;
    margin-bottom: 5px;
    color: #333;
}
.small-block-item p {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.4;
}
.small-block-item .brand, .small-block-item .units {
    font-weight: bold;
    color: #000; /* Darker for brand/units */
}
.small-block-item .btn-link {
    color: #007bff; /* Blue link color */
    text-decoration: none;
    font-weight: bold;
    margin-top: auto; /* Pushes the button to the bottom */
}
.small-block-item .btn-link:hover {
    text-decoration: underline;
}

/* --- Info CTA Section (Cursos, Novedades, Instagram) --- */
.home-info-cta-section {
    background-color: #2b2b2b; /* Dark background */
    color: #fff;
    padding: 40px 0;
    margin-bottom: 40px;
    border-radius: 10px; /* Rounded corners */
}

.info-cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive 3-column grid */
    gap: 20px;
    text-align: center;
}

.info-cta-item {
    padding: 20px;
}
.info-cta-item i { /* Font Awesome icon styling */
    font-size: 3em;
    color: #FFA500; /* Orange for icons */
    margin-bottom: 20px;
}
.info-cta-item h3 {
    color: #fff;
    font-size: 1.5em;
    margin-bottom: 15px;
}
.info-cta-item .btn-link {
    color: #FFA500; /* Orange link color */
    text-decoration: none;
    font-weight: bold;
}
.info-cta-item .btn-link:hover {
    text-decoration: underline;
}

/* --- Main Categories Section (Terapias, Librería) --- */
.home-main-categories-section {
    margin-bottom: 40px;
}

.main-categories-flex-wrap {
    display: flex;
    flex-wrap: wrap; /* Allows blocks to wrap on smaller screens */
    gap: 30px; /* Space between the two main category blocks */
}

.main-category-block {
    flex: 1 1 calc(50% - 15px); /* Two columns layout on larger screens */
    background-color: #e6e6e6; /* Light gray background */
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    min-height: 480px; /* Adjust height for consistent layout */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main-category-block h2 {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 25px;
}

/* Styling for WooCommerce product grids/carousels generated by shortcode */
/* Overrides default WooCommerce list styles */
.products-carousel-terapias .products,
.products-carousel-libreria .products,
.featured-products-grid .products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust minmax based on product card size */
    gap: 15px;
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
}

/* Styling for individual product items within the grid/carousel */
/* (This part will heavily depend on WooCommerce's default product item HTML) */
.main-category-block .products li.product {
    text-align: center;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.main-category-block .products li.product img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}
.main-category-block .products li.product h2.woocommerce-loop-product__title {
    font-size: 1em;
    margin-bottom: 5px;
}
.main-category-block .products li.product .price {
    font-weight: bold;
    color: #333;
}
.woocommerce .woocommerce-Price-amount:not(del .woocommerce-Price-amount):not(.tmcore-product-price-filter .woocommerce-Price-amount)
{color:#ffab00 !important;}

.main-category-block .btn-link {
    display: inline-block; /* Make it block-level for padding/margins */
    background-color: #FFA500; /* Orange button */
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 30px; /* Space above button */
    transition: background-color 0.3s ease;
}
.main-category-block .btn-link:hover {
    background-color: #e09400; /* Darker orange on hover */
}


/* --- Featured Products Section --- */
.home-featured-products-section {
    margin-bottom: 60px;
}
.featured-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* Align text baselines */
    margin-bottom: 30px;
}
.featured-header h2 {
    font-size: 2.5em;
    color: #333;
    margin: 0;
}
.featured-header .view-more {
    color: #007bff; /* Blue link */
    text-decoration: none;
    font-weight: bold;
}
.featured-header .view-more:hover {
    text-decoration: underline;
}

/* Styling for featured product grid (similar to main categories, but potentially different sizes) */
.featured-products-grid .products li.product {
    /* Apply similar styles as .main-category-block .products li.product */
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}
.featured-products-grid .products li.product:hover {
    transform: translateY(-5px);
}
/* You may need to target specific elements within the WooCommerce product loop */
/* E.g., .featured-products-grid .products li.product a img, .featured-products-grid .products li.product h2, .featured-products-grid .products li.product .price */


/* --- Floating WhatsApp Button (Example) --- */
.whatsapp-button {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #25D366; /* WhatsApp Green */
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2em; /* Icon size */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000; /* Ensure it's on top */
    text-decoration: none; /* Remove underline for link */
    transition: background-color 0.3s ease;
}
.whatsapp-button:hover {
    background-color: #128C7E; /* Darker green on hover */
}


/* ================================================== */
/* Responsive Adjustments                    */
/* ================================================== */

@media (max-width: 992px) {
    /* Adjust Hero Section for tablets */
    .hero-content-wrapper {
        flex-direction: column; /* Stack columns */
        text-align: center;
    }
    .hero-image-col, .hero-text-col {
        flex: 1 1 100%; /* Take full width */
        max-width: 100%;
        padding-right: 0;
    }
    .hero-title {
        font-size: 2.5em;
    }

    /* Adjust main category blocks for tablets */
    .main-categories-flex-wrap {
        flex-direction: column; /* Stack blocks */
    }
    .main-category-block {
        flex: 1 1 100%; /* Take full width */
    }
}

@media (max-width: 768px) {
    /* General padding adjustment */
    .site-container {
        padding: 0 10px;
    }

    /* Smaller fonts for mobile */
    .hero-title {
        font-size: 2em;
    }
    .hero-description {
        font-size: 1em;
    }
    .featured-header h2 {
        font-size: 2em;
    }

    /* Adjust grid layouts for mobile */
    .small-blocks-grid,
    .info-cta-grid {
        grid-template-columns: 1fr; /* Single column layout on mobile */
        gap: 15px;
    }

    /* Adjust product grids for mobile */
    .products-carousel-terapias .products,
    .products-carousel-libreria .products,
    .featured-products-grid .products {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 2 columns on mobile */
        gap: 10px;
    }

    .whatsapp-button {
        width: 50px;
        height: 50px;
        font-size: 1.8em;
        bottom: 15px;
        right: 15px;
    }
}