/*=========================================================
    KINDLEAPSE — THEME COLOR CONTROL
    =====================================================
    To change the ENTIRE site theme, edit ONE line below.
    Change --theme to any color you want.

    Examples:
        --theme: #D10024;        ← current red (default)
        --theme: #16a34a;        ← green
        --theme: #2563eb;        ← blue
        --theme: #ea580c;        ← orange
        --theme: #9333ea;        ← purple
        --theme: #0891b2;        ← cyan
        --theme: #d97706;        ← amber/gold
        --theme: #84cc16;        ← lime
        --theme: #db2777;        ← pink
        --theme: #0f766e;        ← teal
        --theme: #B07B7B;        ← muted brown
===========================================================*/

:root {
    --theme: #999;
}

/*=========================================================
    DO NOT EDIT BELOW THIS LINE
    Everything below maps the theme color to the site.
===========================================================*/

/* --- Buttons --- */
.primary-btn                                        { background-color: var(--theme); }
a:hover, a:focus                                    { color: var(--theme); }

/* --- Section title underline --- */
.section-tab-nav li a:after,
.section-tab-nav li.active a:after                  { background-color: var(--theme); }
.section-tab-nav li.active a                        { color: var(--theme); }

/* --- Navigation bar top border --- */
#navigation                                         { border-top-color: var(--theme); }

/* --- Main nav hover/active underline --- */
.main-nav > li > a:hover,
.main-nav > li > a:focus,
.main-nav > li.active > a                           { color: var(--theme); }
.main-nav > li > a:after                            { background-color: var(--theme); }
.main-nav > li > a:hover:after,
.main-nav > li > a:focus:after,
.main-nav > li.active > a:after                     { background-color: var(--theme); }

/* --- Header icons --- */
.header-links li a:hover                            { color: var(--theme); }
.header-links li i                                  { color: var(--theme); }
.header-ctn > div > a > .qty                        { background-color: var(--theme); }

/* --- Search button --- */
.header-search form .search-btn                     { background: var(--theme); }

/* --- Cart dropdown buttons --- */
.cart-dropdown .cart-btns > a                       { background-color: var(--theme); }

/* --- Category shop overlay --- */
.shop:before,
.shop:after                                         { background: var(--theme); }

/* --- Hot deal countdown circles --- */
.hot-deal .hot-deal-countdown > li                  { background: color-mix(in srgb, var(--theme) 90%, transparent); }

/* --- Product labels --- */
.product .product-img .product-label > span.sale    { border-color: var(--theme); color: var(--theme); }
.product .product-img .product-label > span.new     { background-color: var(--theme); border-color: var(--theme); }

/* --- Product name hover --- */
.product .product-body .product-name > a:hover,
.product .product-body .product-name > a:focus      { color: var(--theme); }

/* --- Product price --- */
.product .product-body .product-price              { color: var(--theme); }
.product-widget .product-body .product-price       { color: var(--theme); }

/* --- Product rating stars --- */
.product .product-body .product-rating > i.fa-star { color: var(--theme); }

/* --- Product hover border --- */
.product:hover                                      { box-shadow: 0px 0px 6px 0px #E4E7ED, 0px 0px 0px 2px var(--theme); }

/* --- Product buttons hover --- */
.product .product-body .product-btns > button:hover { color: var(--theme); }

/* --- Add to cart button --- */
.product .add-to-cart .add-to-cart-btn              { background-color: var(--theme); }
.product .add-to-cart .add-to-cart-btn:hover        { color: var(--theme); border-color: var(--theme); }
.product .add-to-cart .add-to-cart-btn > i         { color: var(--theme); }

/* --- Product details page --- */
.product-details .product-rating > i.fa-star        { color: var(--theme); }
.product-details .product-price                     { color: var(--theme); }
.product-details .product-available                 { color: var(--theme); }
.product-details .add-to-cart .add-to-cart-btn      { background-color: var(--theme); }
.product-details .add-to-cart .add-to-cart-btn:hover { color: var(--theme); border-color: var(--theme); }
.product-details .add-to-cart .add-to-cart-btn > i  { color: var(--theme); }
#product-imgs .product-preview.slick-current        { border-color: var(--theme); }

/* --- Product tab underline --- */
#product-tab .tab-nav li.active a                   { color: var(--theme); }
#product-tab .tab-nav li a:after                    { background-color: var(--theme); }

/* --- Rating stars (reviews tab) --- */
.rating-avg .rating-stars > i.fa-star,
.rating .rating-stars > i.fa-star                   { color: var(--theme); }
.rating .rating-progress > div                      { background-color: var(--theme); }
.reviews .review-heading .review-rating > i.fa-star { color: var(--theme); }
.reviews-pagination li.active                       { background-color: var(--theme); border-color: var(--theme); }
.reviews-pagination li:hover                        { color: var(--theme); }

/* --- Checkboxes & radio buttons --- */
.input-radio input[type="radio"]:checked + label span,
.input-checkbox input[type="checkbox"]:checked + label span { background-color: var(--theme); border-color: var(--theme); }

/* --- noUI price slider --- */
.noUi-connect                                       { background-color: var(--theme); }
.noUi-horizontal .noUi-handle                       { background: var(--theme); }

/* --- Store grid/pagination active --- */
.store-grid li.active                               { background-color: var(--theme); border-color: var(--theme); }
.store-grid li:hover                                { color: var(--theme); }
.store-pagination li.active                         { background-color: var(--theme); border-color: var(--theme); }
.store-pagination li:hover                          { color: var(--theme); }

/* --- Breadcrumb links hover --- */
#breadcrumb .breadcrumb-tree li a:hover             { color: var(--theme); }

/* --- Order total price --- */
.order-summary .order-col .order-total              { color: var(--theme); }

/* --- Newsletter --- */
#newsletter.section                                 { border-bottom-color: var(--theme); }
.newsletter form .newsletter-btn                    { background: var(--theme); }

/* --- Footer icon dots --- */
.footer-links li i                                  { color: var(--theme); }
.footer-links li a:hover                            { color: var(--theme); }

/* --- Slick arrows --- */
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover, .slick-next:focus                { background-color: var(--theme); border-color: var(--theme); }
.slick-dots li.slick-active button:before           { background-color: var(--theme); }

/* --- Scroll to top button --- */
#scroll-top                                         { background: var(--theme); }
#scroll-top:hover                                   { background: color-mix(in srgb, var(--theme) 80%, black); }

/* --- Animate scroll indicator (if any) --- */



/* --- Category grid (category-grid.js) --- */
.kl-cat-card:hover                                  { box-shadow: 0 0 6px #E4E7ED, 0 0 0 2px var(--theme); }
.kl-cat-overlay                                     { background: color-mix(in srgb, var(--theme) 80%, transparent); }

/* --- Collections jump nav (collections.js) --- */
#kl-jumpnav a:hover,
#kl-jumpnav a.kl-nav-active                         { color: var(--theme); border-bottom-color: var(--theme); }

/* --- Collections category header bar --- */
.kl-collection-bar                                  { border-left-color: var(--theme); }
.kl-collection-bar i                                { color: var(--theme); }
.kl-collection-bar a                                { color: var(--theme); }