/*
Theme Name: TuanDM - The Patio Garden
Template: flatsome
Description: Custom Flatsome child theme for thepatiogarden.com — plant e-commerce for US market
Version: 1.0.0
Author: TuanDM
*/

/* ─── Design Tokens ─── */
:root {
    --primary-color: #2D5016;
    --secondary-color: #627D47;
    --cta-color: #E8772E;
    --cta-hover: #D06A22;
    --bg-color: #F5F7F2;
    --bg-alt: #EEF2E8;
    --bg-white: #FFFFFF;
    --text-color: #1A2E0B;
    --text-light: #627D47;
    --text-muted: #8A9E78;
    --border-color: #C8D5B9;
    --heading-font: 'Lora', serif;
    --body-font: 'Raleway', sans-serif;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 99px;
    --shadow-sm: 0 2px 8px rgba(45,80,22,0.06);
    --shadow-md: 0 4px 20px rgba(45,80,22,0.1);
    --shadow-lg: 0 8px 40px rgba(45,80,22,0.14);
    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Global Typography ─── */
body { font-family: var(--body-font); color: var(--text-color); background: var(--bg-color); }
h1,h2,h3,h4,h5,h6 { font-family: var(--heading-font); color: var(--primary-color); }
a { color: var(--primary-color); }
a:hover { color: var(--cta-color); }

/* ─── Buttons ─── */
.button.primary {
    background-color: var(--cta-color) !important;
    border-color: var(--cta-color) !important;
    border-radius: var(--radius-pill) !important;
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: var(--transition);
}
.button.primary:hover {
    background-color: var(--cta-hover) !important;
    border-color: var(--cta-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232,119,46,0.35);
}
.button.secondary,
.button.is-outline {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    border-radius: var(--radius-pill) !important;
    transition: var(--transition);
}
.button.secondary:hover,
.button.is-outline:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}
.button.white { border-radius: var(--radius-pill) !important; }

/* ─── Header ─── */
.header-main { background: var(--bg-white); box-shadow: var(--shadow-sm); }
.header-main .logo img { max-height: 60px; }
.nav > li > a { font-family: var(--body-font); font-weight: 600; color: var(--text-color); }
.nav > li > a:hover { color: var(--cta-color); }

/* ─── Reusable Section Patterns ─── */
.section-heading .col-inner { padding-bottom: 0; }
.section-heading h2 { font-family: var(--heading-font); color: var(--primary-color); }
.section-heading p { color: var(--text-light); }
.section-cta .col-inner { padding-top: 0; }

/* ─── Hero Section ─── */
.hero-section .section-bg { transition: transform 8s ease; }
.hero-section:hover .section-bg { transform: scale(1.03); }
.hero-content h1 {
    font-family: var(--heading-font);
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
    letter-spacing: -0.5px;
}
.hero-content p { text-shadow: 0 1px 8px rgba(0,0,0,0.2); }
.hero-cta-primary { box-shadow: 0 4px 15px rgba(232,119,46,0.4); }
.hero-cta-secondary { backdrop-filter: blur(4px); }

/* ─── Trust Strip ─── */
.trust-section { border-bottom: 1px solid var(--border-color); }
.trust-row .row-inner { gap: 0; }
.trust-item .col-inner {
    padding: 15px 20px;
    transition: var(--transition);
}
.trust-item:hover .col-inner { background: var(--bg-color); border-radius: var(--radius-sm); }
.trust-item .featured-box .icon-inner { font-size: 1.6rem; }
.trust-item .featured-box strong { color: var(--primary-color); font-size: 0.9rem; }
.trust-item .featured-box p { color: var(--text-light); font-size: 0.85rem; margin: 0; }

/* ─── Categories Section ─── */
.categories-section .section-title b { color: var(--primary-color); }
.categories-grid .product-category .col-inner {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}
.categories-grid .product-category:hover .col-inner {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--secondary-color);
}
.categories-grid .product-category .box-text h5 {
    font-family: var(--heading-font);
    color: var(--primary-color);
}

/* ─── Bestsellers Section ─── */
.bestsellers-section { position: relative; }
.products-grid .product-small .col-inner {
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition);
    background: var(--bg-white);
    border: 1px solid transparent;
}
.products-grid .product-small:hover .col-inner {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
    border-color: var(--border-color);
}
.products-grid .product-small .box-text {
    padding: 16px 18px;
    text-align: center;
}
.products-grid .product-small .product-title {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
}
.products-grid .product-small .price { color: var(--primary-color); font-weight: 700; }
.products-grid .product-small .price ins .amount { color: var(--cta-color); }
.products-grid .product-small .badge-inner {
    background: var(--cta-color) !important;
    border-radius: var(--radius-sm);
}
.products-grid .product-small .add-to-cart-button .button {
    background: var(--primary-color);
    border-radius: var(--radius-pill);
    transition: var(--transition);
}
.products-grid .product-small .add-to-cart-button .button:hover {
    background: var(--cta-color);
}

/* ─── Features Section ─── */
.features-section { position: relative; }
.features-grid-row .row-inner { gap: 20px; }
.plant-feature .col-inner {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    cursor: pointer;
}
.plant-feature:hover .col-inner {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--secondary-color);
}
.plant-feature .featured-box .icon-inner {
    color: var(--primary-color);
    transition: var(--transition);
}
.plant-feature:hover .featured-box .icon-inner {
    color: var(--cta-color);
    transform: scale(1.15);
}
.plant-feature .icon-box-text h5 {
    font-family: var(--heading-font);
    color: var(--text-color);
    font-size: 1.15rem;
}

/* ─── Banner CTA Section ─── */
.banner-cta-section .section-bg { transition: transform 6s ease; }
.banner-cta-section:hover .section-bg { transform: scale(1.05); }
.banner-cta-content h2 {
    font-family: var(--heading-font);
    text-shadow: 0 2px 15px rgba(0,0,0,0.3);
}
.banner-cta-content p { text-shadow: 0 1px 6px rgba(0,0,0,0.2); }
.banner-cta-content .button { box-shadow: 0 4px 15px rgba(255,255,255,0.2); }

/* ─── Testimonials Section ─── */
.testimonials-section { position: relative; }
.testimonials-grid-row .row-inner { gap: 20px; }
.testimonial-card .col-inner { padding: 0; }
.testimonial-card .testimonial-box {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    height: 100%;
}
.testimonial-card:hover .testimonial-box {
    box-shadow: var(--shadow-md);
    border-color: var(--secondary-color);
    transform: translateY(-4px);
}
.testimonial-card .testimonial-text {
    font-style: italic;
    color: var(--text-color);
    line-height: 1.7;
}
.testimonial-card .testimonial-name {
    font-family: var(--heading-font);
    color: var(--primary-color);
    font-weight: 600;
}
.testimonial-card .testimonial-company { color: var(--text-light); }
.testimonial-card .star-rating { color: var(--cta-color); }

/* ─── Newsletter Section ─── */
.newsletter-section { position: relative; overflow: hidden; }
.newsletter-content h2 { font-family: var(--heading-font); }
.newsletter-content p { opacity: 0.85; }
.newsletter-cta {
    box-shadow: 0 4px 15px rgba(255,255,255,0.2);
    transition: var(--transition);
}
.newsletter-cta:hover { box-shadow: 0 6px 25px rgba(255,255,255,0.3); }

/* ─── About Page ─── */
.about-hero-section .section-bg { transition: transform 8s ease; }
.about-hero-section:hover .section-bg { transform: scale(1.03); }
.about-hero-content h1 { text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.about-story-image .img-inner { border-radius: var(--radius-lg); overflow: hidden; }
.about-story-image .img-inner img { transition: transform 0.6s ease; }
.about-story-image:hover .img-inner img { transform: scale(1.05); }
.about-story-text p {
    line-height: 1.8;
    margin-bottom: 1rem;
}
.about-values-row .row-inner { gap: 20px; }

/* ─── Contact Page ─── */
.contact-hero-content h1 { font-family: var(--heading-font); }
.contact-info-row .row-inner { gap: 20px; }
.contact-card .col-inner {
    transition: var(--transition);
    cursor: pointer;
}
.contact-card:hover .col-inner {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.contact-card .featured-box .icon-inner {
    color: var(--primary-color);
    transition: var(--transition);
}
.contact-card:hover .featured-box .icon-inner {
    color: var(--cta-color);
    transform: scale(1.1);
}
.contact-form-content .wpcf7-form input,
.contact-form-content .wpcf7-form textarea {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-family: var(--body-font);
    transition: var(--transition);
}
.contact-form-content .wpcf7-form input:focus,
.contact-form-content .wpcf7-form textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(45,80,22,0.1);
}
.contact-form-content .wpcf7-form input[type="submit"] {
    background: var(--cta-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 600;
    cursor: pointer;
}
.contact-form-content .wpcf7-form input[type="submit"]:hover {
    background: var(--cta-hover);
}
.contact-map .google-map { border-radius: 0; }

/* ─── Generic Component Styles ─── */
.featured-box .icon-inner { transition: var(--transition); }
.featured-box .icon-box-text { font-family: var(--body-font); }
.banner .banner-inner { transition: var(--transition); }
.banner:hover .banner-inner { transform: scale(1.02); }
.banner .text-box h1,
.banner .text-box h2 { font-family: var(--heading-font); }
.image-box .box-image { border-radius: var(--radius-md); overflow: hidden; }
.image-box .box-text h5 { font-family: var(--heading-font); color: var(--primary-color); }
.accordion .accordion-title {
    font-family: var(--heading-font);
    color: var(--text-color);
    border-color: var(--border-color);
}
.accordion .accordion-item.active .accordion-title { color: var(--primary-color); }
.tabbed-content .nav-tabs li.active a {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.pricing-table { border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); }
.pricing-table.featured { border: 2px solid var(--cta-color); box-shadow: var(--shadow-md); }
.pricing-table-header { background: var(--primary-color); }
.flickity-page-dots .dot { background: var(--border-color); transition: var(--transition); }
.flickity-page-dots .dot.is-selected { background: var(--primary-color); }
.flickity-button { color: var(--primary-color); }

/* ─── Footer ─── */
.footer-wrapper { background: var(--primary-color); color: #fff; }
.footer-wrapper h3,
.footer-wrapper .widget-title { font-family: var(--heading-font); color: #fff; }
.footer-wrapper a { color: var(--bg-alt); }
.footer-wrapper a:hover { color: var(--cta-color); }
.absolute-footer { background: #1A2E0B; color: var(--text-muted); }

/* ─── WooCommerce ─── */
.woocommerce .star-rating span::before { color: var(--cta-color); }
.woocommerce-message { border-top-color: var(--primary-color); }
.woocommerce .button.checkout { background: var(--cta-color); border-radius: var(--radius-pill); }

/* ─── Responsive ─── */
@media (max-width: 549px) {
    .trust-item .col-inner { padding: 10px 12px; }
    .products-grid .product-small .box-text { padding: 12px 14px; }
    .testimonial-card .testimonial-box { padding: 20px; }
    .button.larger { padding: 12px 28px !important; font-size: 0.95rem !important; }
    .hero-content h1 { font-size: 1.8rem; }
    .plant-feature .col-inner { margin-bottom: 15px; }
}

@media (min-width: 550px) and (max-width: 849px) {
    .trust-item .col-inner { padding: 12px 15px; }
    .plant-feature .col-inner { margin-bottom: 20px; }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}