/*
Theme Name: CMILO Beauty
Theme URI: https://www.cmilo.shop
Author: CMILO
Author URI: https://www.cmilo.shop
Description: Custom WooCommerce theme for CMILO beauty e-commerce website - Eyelashes Only
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cmilo
Tags: e-commerce, woocommerce, beauty, cosmetics, eyelashes
*/

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --primary-color: #ff6b6b;
    --secondary-color: #4ecdc4;
    --accent-color: #ffe66d;
    --text-color: #2d3436;
    --light-text: #636e72;
    --background-color: #ffffff;
    --light-gray: #f8f9fa;
    --border-color: #e9ecef;
    --success-color: #2ecc71;
    --warning-color: #f1c40f;
    --danger-color: #e74c3c;
    --font-main: 'Poppins', sans-serif;
    --font-heading: 'Playfair Display', serif;
}

/* ========================================
   Reset & Base Styles
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   Header Styles
   ======================================== */
.custom-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-top {
    background: var(--primary-color);
    color: white;
    padding: 10px 0;
}

.header-top .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info {
    display: flex;
    gap: 20px;
}

.contact-info a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 14px;
}

.contact-info a:hover {
    opacity: 0.8;
}

.whatsapp-icon,
.email-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.whatsapp-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>');
}

.email-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
}

.account-section a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 14px;
}

.account-section a:hover {
    opacity: 0.8;
}

.login-icon,
.account-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.login-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}

.account-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>');
}

/* ========================================
   Navigation Styles
   ======================================== */
.main-navigation {
    background: white;
    padding: 15px 0;
}

.main-navigation .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    font-size: 28px;
    font-weight: bold;
    color: var(--primary-color);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-menu li a {
    color: var(--text-color);
    font-weight: 500;
    font-size: 16px;
}

.nav-menu li a:hover {
    color: var(--primary-color);
}

/* ========================================
   Footer Styles
   ======================================== */
.custom-footer {
    background: #2d3436;
    color: white;
    padding: 60px 0 30px;
}

.custom-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.footer-section p {
    color: #b2bec3;
    line-height: 1.8;
}

.footer-nav ul {
    list-style: none;
}

.footer-nav ul li {
    margin-bottom: 12px;
}

.footer-nav ul li a {
    color: #b2bec3;
    transition: color 0.3s ease;
}

.footer-nav ul li a:hover {
    color: var(--primary-color);
}

.social-links {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--secondary-color);
    transform: translateY(-3px);
}

.business-hours p {
    color: #b2bec3;
    margin-bottom: 8px;
}

/* ========================================
   Homepage Slider
   ======================================== */
.homepage-slider {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-content {
    position: absolute;
    bottom: 50px;
    left: 50px;
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 10px;
    max-width: 600px;
}

.slide-content h2 {
    font-size: 32px;
    color: var(--text-color);
    margin-bottom: 10px;
}

/* ========================================
   Product Categories
   ======================================== */
.product-categories {
    padding: 60px 0;
    background: var(--light-gray);
}

.product-categories .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.product-categories h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    color: var(--text-color);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.category-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.category-item:hover {
    transform: translateY(-10px);
}

.category-image {
    height: 200px;
    overflow: hidden;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-item:hover .category-image img {
    transform: scale(1.1);
}

.category-item h3 {
    text-align: center;
    padding: 20px;
    font-size: 18px;
    color: var(--text-color);
}

/* ========================================
   Featured Products
   ======================================== */
.featured-products {
    padding: 60px 0;
}

.featured-products .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.featured-products h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    color: var(--text-color);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.product-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.1);
}

.product-info {
    padding: 15px;
}

.product-info h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text-color);
}

.product-price {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-color);
}

/* ========================================
   Featured Showcase
   ======================================== */
.featured-showcase {
    padding: 80px 0;
    background: white;
}

.featured-showcase .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.featured-showcase h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    color: var(--text-color);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-item {
    text-align: center;
    padding: 30px;
    background: var(--light-gray);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.feature-item h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--text-color);
}

.feature-item p {
    font-size: 14px;
    color: var(--light-text);
    line-height: 1.6;
}

/* ========================================
   Customer Feedback
   ======================================== */
.customer-feedback {
    padding: 60px 0;
    background: var(--light-gray);
}

.customer-feedback .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.customer-feedback h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    color: var(--text-color);
}

.feedback-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px 0;
}

.feedback-item {
    min-width: 350px;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.feedback-content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 20px;
    font-style: italic;
}

.customer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.customer-name {
    font-weight: bold;
    color: var(--text-color);
}

.customer-rating {
    color: var(--warning-color);
}

/* ========================================
   Floating Cart
   ======================================== */
.floating-cart {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.floating-cart .cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.floating-cart .cart-icon:hover {
    background: var(--secondary-color);
    transform: scale(1.1);
}

.cart-icon-image {
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger-color);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 768px) {
    .header-top .container {
        flex-direction: column;
        gap: 10px;
    }
    
    .contact-info {
        flex-direction: column;
        gap: 10px;
    }
    
    .category-grid,
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .homepage-slider {
        height: 300px;
    }
    
    .slide-content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }
    
    .slide-content h2 {
        font-size: 24px;
    }
}

/* ========================================
   Single Product Showcase
   ======================================== */
.single-product-showcase {
    padding: 60px 0;
    background: var(--light-gray);
}

.single-product-showcase .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.single-product-showcase h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    color: var(--text-color);
}

.product-showcase {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

.showcase-product {
    display: flex;
    gap: 40px;
    max-width: 1000px;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.showcase-product .product-image {
    flex: 1;
    max-width: 400px;
}

.showcase-product .product-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.showcase-product .product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.showcase-product .product-details h3 {
    font-size: 28px;
    color: var(--text-color);
}

.showcase-product .product-short-desc {
    font-size: 16px;
    color: var(--light-text);
    line-height: 1.6;
}

.showcase-product .product-price {
    font-size: 32px;
    color: var(--primary-color);
    font-weight: bold;
}

.showcase-product .btn-primary {
    background: var(--primary-color);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
}

.showcase-product .btn-primary:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}

/* ========================================
   Eyelash Features
   ======================================== */
.eyelash-features {
    background: var(--light-gray);
    padding: 30px;
    border-radius: 10px;
    margin: 30px 0;
}

.eyelash-features h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--text-color);
}

.eyelash-features ul {
    list-style: none;
}

.eyelash-features li {
    padding: 10px 0;
    font-size: 16px;
    color: var(--text-color);
}

/* ========================================
   Product Description
   ======================================== */
.product-description {
    background: white;
    padding: 40px;
    border-radius: 10px;
    margin: 40px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.product-description h3 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--text-color);
}

.product-description p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 15px;
}

/* ========================================
   Responsive Design for Single Product Showcase
   ======================================== */
@media (max-width: 768px) {
    .showcase-product {
        flex-direction: column;
        padding: 20px;
    }
    
    .showcase-product .product-image {
        max-width: 100%;
    }
    
    .showcase-product .product-details h3 {
        font-size: 24px;
    }
    
    .showcase-product .product-price {
        font-size: 28px;
    }
    
    .single-product-showcase h2 {
        font-size: 28px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .feature-item {
        padding: 20px;
    }
    
    .feature-icon {
        font-size: 36px;
    }
    
    .feature-item h3 {
        font-size: 18px;
    }
    
    .feature-item p {
        font-size: 13px;
    }
}