/*
Theme Name: Bao Chau
Description: Flatsome child theme
Author: The Patio Garden
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: baochau
*/

/* ============================================
   CUSTOM CSS
   ============================================ */

/* Global Overrides */

/* Header */

/* Footer */

/* WooCommerce */

/* Mobile Responsive */
@media only screen and (max-width: 48em) {
    /* Mobile styles */
}

/* Tablet Responsive */
@media only screen and (min-width: 48em) and (max-width: 64em) {
    /* Tablet styles */
}

/* ============================================
   Design System: The Patio Garden
   Style: Organic Biophilic
   Palette: #2D5016 + #627D47 + #E8772E
   Generated by ui-ux-pro-max + flatsome skill

   Shortcode → CSS Class Map:
   [section]       → .section, .section-bg, .has-bg, .dark
   [row]           → .row, .row-small, .row-large, .row-collapse
   [col]           → .col, .col-inner, .large-N, .medium-N, .small-N
   [ux_text]       → .ux-text
   [ux_image]      → .img-inner
   [ux_banner]     → .banner, .banner-inner, .has-hover
   [text_box]      → .text-box, .text-box-content
   [button]        → .button, .primary/.secondary/.alert/.success/.white,
                     .is-outline/.shade/.bevel, .larger/.small/.xlarge
   [featured_box]  → .icon-box.featured-box, .icon-box-img, .icon-inner,
                     .icon-box-text
   [title]         → .section-title, .section-title-normal/.center/.bold-center
   [divider]       → .divider
   [gap]           → .gap-element
   [testimonial]   → .testimonial-box, .testimonial-text, .testimonial-meta,
                     .testimonial-image, .testimonial-name, .star-rating
   [accordion]     → .accordion, .accordion-item, .accordion-title, .active
   [tabgroup]      → .tabbed-content, .nav-tabs
   [ux_image_box]  → .image-box, .box-image, .box-text
   [team_member]   → .team-member, .team-member-image, .team-member-info
   [ux_price_table]→ .pricing-table, .pricing-table-header
   [message_box]   → .message-box
   [ux_products]   → .product-small, .box-image, .box-text, .product-title,
                     .price, .add-to-cart-button
   [block]         → .block-content
   ============================================ */

:root {
    /* Brand Colors */
    --primary-color: #2D5016;
    --primary-light: #577344;
    --secondary-color: #627D47;
    --cta-color: #E8772E;
    --bg-color: #F5F7F2;
    --bg-alt: #f5f7f2;
    --text-color: #1A2E0B;
    --text-light: #5e6c54;
    --border-color: #E2E8F0;
    --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 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 99px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(45,80,22,0.06);
    --shadow-md: 0 4px 16px rgba(45,80,22,0.08);
    --shadow-lg: 0 8px 32px rgba(45,80,22,0.12);
    --shadow-hover: 0 12px 40px rgba(45,80,22,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 {
    font-family: var(--heading-font);
    color: var(--primary-color);
}

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

p {
    line-height: 1.75;
}

::selection {
    background-color: rgba(98,125,71,0.2);
    color: var(--primary-color);
}

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

/* Override Flatsome parent !important on header bg */
.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);
    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);
}

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

.logo a {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--primary-color);
}

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

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

/* ============================================
   FOOTER (.footer-wrapper, .absolute-footer)
   ============================================ */
/* Override Flatsome parent !important on footer bg */
.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);
}

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

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

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

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

/* Widgets */
.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);
}
/* ============================================
   [section] [row] [col] [divider] [ux_text] [ux_image]
   ============================================ */
.section {
    overflow: hidden;
}

.section .section-bg {
    transition: transform 0.5s ease;
}

.section .section-title {
    font-family: var(--heading-font);
}

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

.section-title-center span:after,
.section-title-center span:before {
    border-color: var(--secondary-color);
}

.divider {
    transition: var(--transition);
}

.ux-text {
    transition: var(--transition);
}

.ux-text h1, .ux-text h2, .ux-text h3,
.ux-text h4, .ux-text h5, .ux-text h6 {
    font-family: var(--heading-font);
}

.img-inner {
    transition: var(--transition);
    overflow: hidden;
}

.img-inner img {
    transition: transform 0.5s ease;
}

/* [block] → .block-content (UX Blocks) */
.block-content .section {
    overflow: hidden;
}

.block-content .divider {
    transition: width 0.4s ease;
}

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

/* [page_header] → .sub-header-section */
.sub-header-section {
    background-color: var(--bg-alt);
    border-bottom: 1px solid var(--border-color);
}

.sub-header-section .breadcrumbs {
    font-family: var(--body-font);
    font-size: 0.85em;
    color: var(--text-light);
}

.sub-header-section .breadcrumbs a {
    color: var(--text-light);
    transition: var(--transition);
}

.sub-header-section .breadcrumbs a:hover {
    color: var(--primary-color);
}
/* ============================================
   SECTION-SPECIFIC (via _id="..." on [section])
   ============================================ */
#hero .section-bg {
    transition: transform 8s ease;
}

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

#contact .col .col-inner {
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

#contact .col:hover .col-inner {
    border-color: rgba(98,125,71,0.4);
    transform: translateY(-4px);
}

#about .img-inner img {
    transition: transform 0.5s ease;
}

#about .col:hover .img-inner img {
    transform: scale(1.03);
}

#testimonials .section-bg,
#cta .section-bg {
    filter: saturate(0.8);
}

#trust-strip {
    transition: var(--transition);
}

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

/* ============================================
   REUSABLE: .section-heading, .section-cta
   ============================================ */
.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-content, .hero-cta-*
   ============================================ */
.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(45,80,22,0.4);
}

.hero-cta-secondary {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
/* ============================================
   .about-section, .about-images, .about-text
   ============================================ */
.about-images .img-inner {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.about-images .img-inner img {
    transition: transform 0.6s ease;
}

.about-images:hover .img-inner img {
    transform: scale(1.05);
}

.about-text p {
    line-height: 1.8;
    margin-bottom: 1rem;
}
/* ============================================
   .cta-section, .cta-content, .cta-button
   ============================================ */
.cta-section .section-bg {
    filter: saturate(0.8);
}

.cta-content h2 {
    font-family: var(--heading-font);
    text-shadow: 0 2px 15px rgba(0,0,0,0.3);
}

.cta-content p {
    text-shadow: 0 1px 6px rgba(0,0,0,0.2);
}

.cta-button {
    box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}

.cta-button:hover {
    box-shadow: 0 6px 25px rgba(255,255,255,0.3);
}
/* ============================================
   .contact-section, .contact-card
   ============================================ */
.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);
}
/* ============================================
   .trust-section, .trust-row, .trust-item
   ============================================ */
.trust-section {
    border-bottom: 1px solid var(--border-color);
}

.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 strong {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.trust-item .featured-box p {
    color: var(--text-light);
    font-size: 0.85rem;
    margin: 0;
}

/* ============================================
   [button] → .button, .primary, .secondary, etc.
   ============================================ */
.button {
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: var(--transition);
}

/* Override Flatsome parent theme button background color !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);
}

.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);
}

/* Override Flatsome parent secondary button color !important */
.button.secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    border-radius: var(--radius-pill);
    color: var(--white);
}

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

.button.is-outline {
    border-radius: var(--radius-pill);
    border-width: 2px;
}

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

.button.white {
    color: var(--primary-color);
}

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

.button.shade {
    border-radius: var(--radius-pill);
}

/* ============================================
   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 {
    /* Override Flatsome parent form border !important */
    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(98,125,71,0.15) !important;
}

.searchform .button {
    background-color: var(--primary-color);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Searchform inline inputs reset their border (parent applies it via .searchform) */
.searchform input[type="search"],
.searchform input[type="text"] {
    border: none !important;
    box-shadow: none !important;
    flex: 1;
    font-family: var(--body-font);
}
/* ============================================
   [ux_banner] → .banner, .banner-inner
   ============================================ */
.banner {
    overflow: hidden;
    transition: var(--transition);
}

.banner .banner-inner {
    transition: var(--transition);
}

.banner:hover .banner-inner {
    transform: scale(1.02);
}

/* [text_box] → .text-box, .text-box-content */
.text-box {
    transition: var(--transition);
}

.text-box .text-box-content {
    font-family: var(--body-font);
}

.text-box .text-box-content h1,
.text-box .text-box-content h2,
.text-box .text-box-content h3 {
    font-family: var(--heading-font);
}

/* ============================================
   [ux_image_box] → .image-box, .box-image, .box-text
   ============================================ */
.image-box {
    transition: var(--transition);
}

.image-box:hover {
    transform: translateY(-4px);
}

.image-box .box-text {
    font-family: var(--body-font);
}

.image-box .box-text h5 {
    font-family: var(--heading-font);
    color: var(--primary-color);
}

/* ============================================
   [featured_box] → .icon-box.featured-box
   ============================================ */
.icon-box.featured-box {
    transition: var(--transition);
}

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

.featured-box .icon-inner {
    color: var(--secondary-color);
    transition: var(--transition);
}

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

.featured-box .icon-inner img {
    transition: var(--transition);
}

.featured-box:hover .icon-inner {
    transform: scale(1.1);
}

.featured-box .icon-box-text h5 {
    font-family: var(--heading-font);
    color: var(--primary-color);
    font-weight: 600;
}

.featured-box .icon-box-text p {
    color: var(--text-light);
}

.feature-card-col .col-inner {
    transition: var(--transition);
    border: 1px solid transparent;
}

.feature-card-col:hover .col-inner {
    border-color: rgba(98,125,71,0.2);
    transform: translateY(-6px);
}
/* ============================================
   [testimonial] → .testimonial-box
   ============================================ */
.testimonial-box {
    transition: var(--transition);
}

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

.testimonial-box .testimonial-text {
    font-family: var(--body-font);
    color: var(--text-color);
    font-style: italic;
}

.testimonial-box .testimonial-name {
    font-family: var(--heading-font);
    font-weight: 600;
    color: var(--primary-color);
}

.testimonial-box .testimonial-company {
    color: var(--text-light);
    font-size: 0.85em;
}

.testimonial-box .testimonial-image img {
    border: 2px solid var(--secondary-color);
}

.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);
    border-color: rgba(98,125,71,0.3);
    transform: translateY(-4px);
}

/* ============================================
   [accordion] → .accordion
   ============================================ */
.accordion .accordion-title {
    font-family: var(--heading-font);
    color: var(--text-color);
    border-color: var(--border-color);
    transition: var(--transition);
}

.accordion .accordion-title:hover,
.accordion .accordion-item.active .accordion-title {
    color: var(--primary-color);
}

.accordion .accordion-item.active .accordion-title {
    border-color: var(--primary-color);
}

.accordion .accordion-inner {
    border-color: var(--border-color);
    font-family: var(--body-font);
}

/* ============================================
   [tabgroup] → .tabbed-content, .nav-tabs
   ============================================ */
.tabbed-content .nav-tabs li a {
    font-family: var(--body-font);
    font-weight: 600;
    color: var(--text-light);
    transition: var(--transition);
}

.tabbed-content .nav-tabs li a:hover {
    color: var(--primary-color);
}

/* Increase specificity to override parent active tab border (no !important needed) */
.tabbed-content .nav-tabs li.active > a,
.tabbed-content .nav-tabs > li.active > a {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tabbed-content .tab-panel {
    font-family: var(--body-font);
}

/* ============================================
   [team_member] → .team-member
   ============================================ */
.team-member {
    transition: var(--transition);
}

.team-member:hover {
    transform: translateY(-4px);
}

.team-member .team-member-image img {
    transition: transform 0.5s ease;
}

.team-member:hover .team-member-image img {
    transform: scale(1.05);
}

.team-member .team-member-info h5 {
    font-family: var(--heading-font);
    color: var(--primary-color);
}

.team-member .team-member-info .social-icons a {
    color: var(--secondary-color);
    transition: var(--transition);
}

.team-member .team-member-info .social-icons a:hover {
    color: var(--primary-color);
}

/* ============================================
   [ux_price_table] → .pricing-table
   ============================================ */
.pricing-table {
    border-color: var(--border-color);
    border-radius: var(--radius-md);
    transition: var(--transition);
    overflow: hidden;
}

.pricing-table:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.pricing-table.featured {
    border-color: var(--primary-color);
}

.pricing-table .pricing-table-header {
    background-color: var(--primary-color);
    color: var(--white);
    font-family: var(--heading-font);
}

.pricing-table .pricing-table-price {
    color: var(--primary-color);
    font-family: var(--heading-font);
    font-weight: 700;
}

.pricing-table .button {
    background-color: var(--primary-color);
    border-radius: var(--radius-pill);
}

/* ============================================
   [message_box] → .message-box
   ============================================ */
.message-box {
    border-radius: var(--radius-sm);
    font-family: var(--body-font);
}

.message-box.success {
    border-left: 4px solid var(--secondary-color);
}

.message-box.primary {
    border-left: 4px solid var(--primary-color);
}

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

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

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

.processing:before {
    border-color: var(--secondary-color);
}

.sticky-add-to-cart {
    border-top: 2px solid var(--secondary-color);
}
/* ============================================
   WOOCOMMERCE (single product, cart, checkout)
   ============================================ */
.shop-page-title .breadcrumbs {
    font-size: 0.85em;
}

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

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

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

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

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

.cart_totals .checkout-button {
    border-radius: var(--radius-pill);
}

/* ============================================
   [ux_products] → .product-small
   ============================================ */
.product-small {
    transition: var(--transition);
}

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

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

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

.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;
    border: none;
    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);
}

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

.badge-inner {
    background-color: var(--cta-color);
    border-radius: var(--radius-sm);
}

/* Star ratings use hardcoded gold - override parent !important */
.star-rating span:before {
    color: #FFC107 !important;
}

/* ============================================
   [ux_product_categories] → .product-category
   ============================================ */
.product-category {
    transition: var(--transition);
    overflow: hidden;
}

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

.product-category .box-image {
    overflow: hidden;
}

.product-category .box-image img {
    transition: transform 0.5s ease;
}

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

.product-category .box-text {
    background-color: var(--white);
    font-family: var(--body-font);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.product-category .box-text h5,
.product-category .box-text h4 {
    font-family: var(--heading-font);
    color: var(--primary-color);
}

/* ============================================
   [ux_product_flip] → .product-flip
   ============================================ */
.product-flip {
    perspective: 1000px;
    transition: var(--transition);
}

.product-flip-inner {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    position: relative;
}

.product-flip:hover .product-flip-inner {
    transform: rotateY(180deg);
}

.product-flip-front,
.product-flip-back {
    backface-visibility: hidden;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-flip-back {
    background-color: var(--primary-color);
    color: var(--white);
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.product-flip-back .button {
    background-color: var(--white);
    color: var(--primary-color);
    border-radius: var(--radius-pill);
}

/* ============================================
   [ux_products_list] → .products-list
   ============================================ */
.products-list .product-list-item {
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
    padding: 12px 0;
}

.products-list .product-list-item:hover {
    border-color: var(--primary-color);
}

.products-list .product-list-item .product-title {
    font-family: var(--heading-font);
    color: var(--primary-color);
    font-weight: 600;
}

/* ============================================
   [ux_payment_icons] → .payment-icons
   ============================================ */
.payment-icons img,
.payment-icons svg {
    opacity: 0.6;
    transition: var(--transition);
    filter: grayscale(0.3);
}

.payment-icons img:hover,
.payment-icons svg:hover {
    opacity: 1;
    filter: grayscale(0);
}

/* ============================================
   [ux_slider] → .slider, .flickity-page-dots
   ============================================ */
.slider {
    overflow: hidden;
}

.flickity-page-dots .dot {
    background-color: var(--primary-color);
    opacity: 0.3;
    transition: var(--transition);
}

.flickity-page-dots .dot.is-selected {
    opacity: 1;
    background-color: var(--primary-color);
}

/* Override Flatsome parent flickity button bg/color !important */
.flickity-button {
    background-color: var(--white) !important;
    color: var(--primary-color) !important;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.flickity-button:hover {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-md);
}

.flickity-button svg {
    fill: currentColor;
}

/* ============================================
   [ux_hotspot] → .hotspot, .hotspot-popup
   ============================================ */
.hotspot {
    position: absolute;
    transition: var(--transition);
}

.hotspot-marker {
    background-color: var(--primary-color);
    border: 3px solid var(--white);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border-radius: 50%;
}

.hotspot-marker:hover {
    background-color: var(--secondary-color);
    transform: scale(1.2);
    box-shadow: var(--shadow-lg);
}

.hotspot-popup {
    background-color: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    font-family: var(--body-font);
}

.hotspot-popup h5, .hotspot-popup h6 {
    font-family: var(--heading-font);
    color: var(--primary-color);
}

/* ============================================
   [ux_countdown] → .ux-countdown, .countdown-item
   ============================================ */
.ux-countdown {
    display: flex;
    gap: 20px;
}

.countdown-item {
    text-align: center;
    transition: var(--transition);
}

.countdown-number {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.countdown-label {
    font-family: var(--body-font);
    color: var(--text-light);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   [scroll_to] → .scroll-to-bullets
   ============================================ */
.scroll-to-bullets {
    position: fixed;
    z-index: 100;
}

.scroll-to-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--border-color);
    transition: var(--transition);
    cursor: pointer;
}

.scroll-to-bullet.active,
.scroll-to-bullet:hover {
    background-color: var(--primary-color);
    transform: scale(1.3);
}

/* ============================================
   [share] → .social-icons.share
   [follow] → .social-icons.follow
   ============================================ */
.social-icons a {
    color: var(--text-light);
    transition: var(--transition);
}

.social-icons a:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.social-icons.follow a {
    background-color: var(--border-color);
    border-radius: 50%;
    color: var(--text-color);
    transition: var(--transition);
}

.social-icons.follow a:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Increase specificity to override parent share icon color */
.social-icons.share > a,
.social-icons.share a:link {
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.social-icons.share a:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ============================================
   [ux_video] → .video-wrapper, .video-popup-button
   ============================================ */
.video-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.video-wrapper iframe,
.video-wrapper video {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
}

.video-popup-button {
    background-color: var(--primary-color);
    border-radius: 50%;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}

.video-popup-button:hover {
    background-color: var(--secondary-color);
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

/* ============================================
   [search] → .searchform, .search-toggle
   ============================================ */
.searchform {
    display: flex;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.searchform:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(45,80,22,0.12);
}

.search-toggle {
    color: var(--text-color);
    transition: var(--transition);
}

.search-toggle:hover {
    color: var(--primary-color);
}

/* ============================================
   [ux_nav] → .ux-nav
   ============================================ */
.ux-nav {
    font-family: var(--body-font);
}

.ux-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ux-nav ul li a {
    color: var(--text-color);
    transition: var(--transition);
    font-weight: 500;
    padding: 6px 0;
    display: block;
}

.ux-nav ul li a:hover,
.ux-nav ul li.current-menu-item > a {
    color: var(--primary-color);
}
/* ============================================
   [ux_gallery] → .ux-gallery, .gallery-col
   ============================================ */
.ux-gallery {
    overflow: hidden;
}

.gallery-col {
    transition: var(--transition);
    overflow: hidden;
}

.gallery-col img {
    transition: transform 0.5s ease;
    display: block;
    width: 100%;
}

.gallery-col:hover img {
    transform: scale(1.05);
}

/* ============================================
   [ux_banner_grid] → .banner-grid, .col-grid
   ============================================ */
.banner-grid {
    overflow: hidden;
}

.banner-grid .banner {
    height: 100%;
}

.banner-grid .col-grid {
    overflow: hidden;
    transition: var(--transition);
}

.banner-grid .col-grid:hover .banner-inner {
    transform: scale(1.02);
}

/* ============================================
   [lightbox] → .mfp-content, .mfp-close, .mfp-bg
   ============================================ */
.mfp-bg {
    background-color: rgba(0,0,0,0.85);
}

/* Override Flatsome parent lightbox close button color */
.mfp-close {
    color: var(--white) !important;
    font-size: 28px;
    transition: var(--transition);
}

.mfp-close:hover {
    color: var(--secondary-color) !important;
    transform: rotate(90deg);
}

.mfp-content {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* ============================================
   [blog_posts] → .post-item, .blog-post
   ============================================ */
.post-item {
    transition: var(--transition);
}

.post-item:hover {
    transform: translateY(-4px);
}

.post-item .col-inner {
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition);
}

.post-item:hover .col-inner {
    box-shadow: var(--shadow-hover);
}

.post-item .post-image {
    overflow: hidden;
}

.post-item .post-image img {
    transition: transform 0.5s ease;
    display: block;
    width: 100%;
}

.post-item:hover .post-image img {
    transform: scale(1.05);
}

.post-item .post-text {
    padding: 16px 18px;
    font-family: var(--body-font);
}

.post-item .post-text h5,
.post-item .post-text h4 {
    font-family: var(--heading-font);
    color: var(--primary-color);
    transition: var(--transition);
}

.post-item:hover .post-text h5,
.post-item:hover .post-text h4 {
    color: var(--secondary-color);
}

.blog-post .post-title {
    font-family: var(--heading-font);
    color: var(--primary-color);
}

.post-item .post-date,
.blog-post .post-date {
    color: var(--text-light);
    font-size: 0.8em;
}

/* ============================================
   [ux_portfolio] → .portfolio-item, .portfolio-image
   ============================================ */
.portfolio-item {
    overflow: hidden;
    transition: var(--transition);
    border-radius: var(--radius-md);
}

.portfolio-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

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

.portfolio-image img {
    transition: transform 0.5s ease;
    display: block;
    width: 100%;
}

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.05);
}

/* ============================================
   [ux_instagram_feed] → .instagram-item
   ============================================ */
.ux-instagram-feed {
    overflow: hidden;
}

.instagram-item {
    overflow: hidden;
    transition: var(--transition);
}

.instagram-item img {
    transition: transform 0.5s ease;
    display: block;
    width: 100%;
}

.instagram-item:hover img {
    transform: scale(1.06);
}

/* ============================================
   [map] → .google-map
   ============================================ */
.google-map {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.google-map iframe {
    display: block;
    width: 100%;
}

/* ============================================
   [ux_lottie] → .ux-lottie
   ============================================ */
.ux-lottie {
    display: block;
    transition: var(--transition);
}

.ux-lottie:hover {
    transform: scale(1.02);
}

/* ============================================
   [logo] → .logo-element
   ============================================ */
.logo-element {
    display: inline-block;
    transition: var(--transition);
}

.logo-element:hover {
    opacity: 0.85;
}

.logo-element img {
    transition: var(--transition);
}

/* ============================================
   [phone] → .phone-number, .phone-element
   ============================================ */
.phone-number,
.phone-element {
    font-family: var(--body-font);
    font-weight: 600;
    color: var(--primary-color);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.phone-number:hover,
.phone-element:hover {
    color: var(--secondary-color);
}

/* ============================================
   [ux_stack] → .ux-stack
   ============================================ */
.ux-stack {
    display: flex;
    transition: var(--transition);
}

.ux-stack-inner {
    display: flex;
    transition: var(--transition);
}

/* ============================================
   [gap] → .gap-element
   [ux_html] → .ux-html
   ============================================ */
.gap-element {
    display: block;
}

.ux-html {
    font-family: var(--body-font);
}

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

html {
    scroll-behavior: smooth;
}

/* Respect reduced-motion preference - !important required to override all transitions */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html {
        scroll-behavior: auto;
    }
}

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

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

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

    /* Stack feature cards */
    .icon-box.featured-box {
        margin-bottom: 20px;
    }

    /* Pricing table: remove hover transform on mobile */
    .pricing-table:hover {
        transform: none;
    }
}

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

    .button {
        font-size: 0.9em;
    }

    .button.larger {
        padding: 10px 28px;
        font-size: 0.95em;
    }

    .button.small {
        padding: 0 0.8em;
        font-size: 0.8em;
    }

    /* Inline button groups: prevent overflow on tablet */
    .row-inner .col-inner .button {
        margin-right: 0.5em;
        margin-bottom: 0.5em;
    }

    /* Add to cart button: full width on tight tablet layouts */
    .product-info .cart .button,
    .product-info .cart .single_add_to_cart_button {
        width: 100%;
        text-align: center;
    }

    .product-info .cart .quantity {
        margin-bottom: 8px;
    }

    /* CTA/hero buttons: minimum width */
    #cta .button,
    #hero .button {
        min-width: 160px;
    }

    .nav > li > a.button {
        padding: 0 0.8em;
        font-size: 0.85em;
    }
}