/*
Theme Name: Plant Store
Description: Organic Biophilic Flatsome child theme for plant nursery e-commerce
Author: Developer
Template: flatsome
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plant-store
*/

/* ============================================
   Design System: Plant Store
   Style: Organic Biophilic
   Palette: Forest Green + Lime Accent + Warm White
   ============================================ */

:root {
    /* Brand Colors */
    --primary-color: #1a5632;
    --primary-light: #2d7a4a;
    --secondary-color: #8BC34A;
    --cta-color: #F97316;
    --bg-color: #fafcf8;
    --bg-alt: #f7faf5;
    --text-color: #2d3b2d;
    --text-light: #5a6b5a;
    --border-color: #d4e5d0;
    --white: #ffffff;
    --card-bg: #ffffff;

    /* Typography */
    --heading-font: 'Rubik', sans-serif;
    --body-font: 'Nunito Sans', sans-serif;

    /* Spacing */
    --section-padding: 80px;
    --section-padding-sm: 40px;

    /* Border Radius - organic feel */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 99px;

    /* Shadows - soft, natural */
    --shadow-sm: 0 2px 8px rgba(26,86,50,0.06);
    --shadow-md: 0 4px 16px rgba(26,86,50,0.08);
    --shadow-lg: 0 8px 32px rgba(26,86,50,0.12);
    --shadow-hover: 0 12px 40px rgba(26,86,50,0.16);

    /* Transitions */
    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   GLOBAL
   ============================================ */
body {
    font-family: var(--body-font);
    color: var(--text-color);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.header-title {
    font-family: var(--heading-font);
    color: var(--primary-color);
}

a {
    transition: var(--transition);
}

p {
    line-height: 1.75;
}

::selection {
    background-color: #c8e6c9;
    color: var(--primary-color);
}

/* ============================================
   HEADER
   ============================================ */
.header-wrapper {
    transition: var(--transition);
}

.header-main {
    background-color: var(--white) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.header-main .nav > li > a {
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-color) !important;
    transition: var(--transition);
}

.header-main .nav > li > a:hover,
.header-main .nav > li.active > a,
.header-main .nav > li.current-menu-item > a {
    color: var(--secondary-color) !important;
}

.header-main .nav > li > a:after {
    background-color: var(--secondary-color) !important;
}

/* Logo */
.logo a {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--primary-color) !important;
}

/* Cart icon */
.cart-icon .cart-icon-handle {
    color: var(--primary-color);
}

.header-button .button {
    border-radius: var(--radius-pill) !important;
}

/* ============================================
   BUTTONS - Organic rounded style
   ============================================ */
.button,
button,
input[type="submit"],
.wp-block-button__link {
    font-family: var(--body-font) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    transition: var(--transition) !important;
}

.button.primary,
.button.checkout,
.button.alt,
button.single_add_to_cart_button,
.add_to_cart_button {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border-radius: var(--radius-pill) !important;
}

.button.primary:hover,
.button.checkout:hover,
.button.alt:hover,
button.single_add_to_cart_button:hover,
.add_to_cart_button:hover {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.button.secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    border-radius: var(--radius-pill) !important;
    color: var(--white) !important;
}

.button.alert,
.button.success {
    border-radius: var(--radius-pill) !important;
}

/* Outline buttons */
.button.is-outline {
    border-radius: var(--radius-pill) !important;
    border-width: 2px !important;
    transition: var(--transition) !important;
}

.button.is-outline:hover {
    transform: translateY(-2px);
}

/* White button on dark bg */
.button.white {
    color: var(--primary-color) !important;
}

.button.white:hover {
    box-shadow: var(--shadow-lg);
}

/* ============================================
   SECTIONS & LAYOUT
   ============================================ */
.section .section-title {
    font-family: var(--heading-font);
}

.section .section-title-normal b,
.section .section-title-center b {
    color: var(--primary-color);
}

/* Title shortcode */
.section-title-center span:after,
.section-title-center span:before {
    border-color: var(--secondary-color) !important;
}

/* Divider */
.divider {
    transition: var(--transition);
}

/* ============================================
   PRODUCT CARDS
   ============================================ */
.product-small {
    transition: var(--transition);
}

.product-small:hover {
    transform: translateY(-4px);
}

.product-small .col-inner {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    transition: var(--transition);
}

.product-small:hover .col-inner {
    box-shadow: var(--shadow-hover) !important;
}

.product-small .box-image {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
}

.product-small .box-image img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-small:hover .box-image img {
    transform: scale(1.05);
}

.product-small .box-text {
    padding: 15px 18px !important;
    border: none !important;
    background-color: var(--white);
}

.product-small .product-title {
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-color);
}

.product-small .price {
    color: var(--primary-color);
    font-weight: 700;
}

.product-small .price .amount {
    color: var(--primary-color);
}

.product-small .price del .amount {
    color: var(--text-light);
}

.product-small .price ins .amount {
    color: var(--cta-color);
}

/* Add to cart overlay */
.product-small .add-to-cart-button .button {
    background-color: var(--primary-color) !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.85em;
}

/* Sale badge */
.badge-inner {
    background-color: var(--cta-color) !important;
    border-radius: var(--radius-sm) !important;
}

.callout.badge-circle {
    border-radius: var(--radius-sm) !important;
}

/* Star rating */
.star-rating span:before {
    color: #FFC107 !important;
}

/* ============================================
   FEATURE CARDS
   ============================================ */
.feature-card .icon-inner {
    color: var(--secondary-color) !important;
}

.featured_box .icon-inner svg,
.featured_box .icon-inner i {
    color: var(--secondary-color);
}

.featured_box_page h5,
.featured_box h5 {
    font-family: var(--heading-font);
    color: var(--primary-color);
    font-weight: 600;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonial-box {
    transition: var(--transition);
}

.testimonial-box:hover {
    transform: translateY(-3px);
}

/* ============================================
   WOOCOMMERCE
   ============================================ */
/* Breadcrumbs */
.shop-page-title .breadcrumbs {
    font-size: 0.85em;
}

.breadcrumbs a {
    color: var(--text-light);
}

.breadcrumbs a:hover {
    color: var(--primary-color);
}

/* Category cards */
.product-category .box-text {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Single product */
.product-info .price .amount {
    color: var(--primary-color);
    font-size: 1.4em;
}

.product-info .stock {
    color: var(--secondary-color);
}

/* Tabs */
.tabbed-content .nav-tabs li.active a {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
}

/* Quantity */
.quantity input[type="number"] {
    border-radius: var(--radius-sm);
    border-color: var(--border-color);
}

/* Cart page */
.cart_totals .checkout-button {
    border-radius: var(--radius-pill) !important;
}

/* ============================================
   FOOTER
   ============================================ */
.footer-wrapper {
    background-color: var(--primary-color) !important;
}

.footer-wrapper,
.footer-wrapper a,
.footer-wrapper p,
.footer-wrapper .widget-title {
    color: rgba(255,255,255,0.85) !important;
}

.footer-wrapper a:hover {
    color: var(--secondary-color) !important;
}

.footer-wrapper .widget-title {
    color: var(--white) !important;
    font-family: var(--heading-font);
}

.absolute-footer {
    background-color: #143f26 !important;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.absolute-footer,
.absolute-footer a {
    color: rgba(255,255,255,0.6) !important;
}

/* ============================================
   FORMS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select,
.select2-container--default .select2-selection--single {
    border-color: var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--body-font);
    transition: var(--transition);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 3px rgba(139,195,74,0.15) !important;
}

/* Search */
.searchform .button {
    background-color: var(--primary-color) !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* ============================================
   WIDGETS & SIDEBAR
   ============================================ */
.widget-title {
    font-family: var(--heading-font);
    color: var(--primary-color);
}

.widget_nav_menu li a:hover,
.widget_pages li a:hover {
    color: var(--secondary-color);
}

/* ============================================
   MISC
   ============================================ */
/* Scroll to top */
.back-to-top {
    background-color: var(--primary-color) !important;
    border-radius: var(--radius-md) !important;
}

.back-to-top:hover {
    background-color: var(--primary-light) !important;
}

/* Tooltips */
.tooltip-inner {
    background-color: var(--primary-color);
    border-radius: var(--radius-sm);
}

/* Loading spinner */
.processing:before {
    border-color: var(--secondary-color) !important;
}

/* Sticky add to cart */
.sticky-add-to-cart {
    border-top: 2px solid var(--secondary-color);
}

/* ============================================
   HERO SECTION
   ============================================ */
#hero .section-bg {
    transition: transform 8s ease;
}

#hero:hover .section-bg {
    transform: scale(1.03);
}

/* ============================================
   FEATURE CARDS
   ============================================ */
.feature-card-col .col-inner {
    transition: var(--transition);
    border: 1px solid transparent;
}

.feature-card-col:hover .col-inner {
    border-color: rgba(139,195,74,0.2);
    transform: translateY(-6px);
}

.feature-card-col .image-cover {
    border-radius: 50% !important;
    overflow: hidden;
}

/* ============================================
   TESTIMONIAL CARDS
   ============================================ */
.testimonial-card .col-inner {
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.testimonial-card:hover .col-inner {
    background-color: rgba(255,255,255,0.1) !important;
    border-color: rgba(139,195,74,0.3);
    transform: translateY(-4px);
}

/* ============================================
   CONTACT CARDS
   ============================================ */
#contact .col .col-inner {
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

#contact .col:hover .col-inner {
    border-color: rgba(139,195,74,0.4);
    transform: translateY(-4px);
}

/* ============================================
   ABOUT SECTION - staggered images
   ============================================ */
#about .image-cover {
    transition: transform 0.5s ease;
}

#about .col:hover .image-cover {
    transform: scale(1.03);
}

/* Stats counter style */
#about .row-inner .col-inner {
    position: relative;
}

/* ============================================
   PARALLAX SECTIONS - smooth overlay
   ============================================ */
#testimonials .section-bg,
#cta .section-bg {
    filter: saturate(0.8);
}

/* ============================================
   TRUST STRIP
   ============================================ */
#trust-strip {
    transition: var(--transition);
}

#trust-strip .col:hover p {
    color: var(--primary-color) !important;
}

/* ============================================
   UX BLOCKS - general styling
   ============================================ */
.block-content .section {
    overflow: hidden;
}

/* Section titles - consistent spacing */
.block-content .divider {
    transition: width 0.4s ease;
}

.block-content .section:hover .divider {
    width: 100px !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes gentle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media only screen and (max-width: 48em) {
    .header-main .nav > li > a {
        font-size: 0.95em;
    }

    .product-small .box-text {
        padding: 12px 14px !important;
    }

    .button.larger {
        padding: 10px 25px !important;
    }
}

/* Tablet */
@media only screen and (min-width: 48em) and (max-width: 64em) {
    .product-small .box-text {
        padding: 13px 16px !important;
    }
}