/* ============================================================================
   theme-engine.css — Don Skene Cycles theme engine override layer.

   Loaded by incs/theme.php (global_theme_css) via the [<-EXTRA_CSS->]
   placeholder, AFTER style.css and the template's inline <style> block, and
   only when the resolved theme sets at least one token. The "Classic" theme
   sets nothing, so this file is never requested and the site renders exactly
   as before the engine existed.

   Every rule is var(--ts-token, fallback) where the fallback is the current
   compiled value copied verbatim from assets/css/style.css (brand #d25b5b,
   text #262626, button hover #b03030) or the template inline styles
   (#d63434 accents, #374151 header links). A theme that sets only two tokens
   therefore changes only two things.

   !important appears ONLY where the source rule it overrides uses !important
   (template inline header styles, .team-sale-link, footer-three socials) —
   this file wins those ties because it loads later in <head>.
   ========================================================================= */

/* ------------------------------------------------------------------------
   1. Typography — fonts + base text colours
   --------------------------------------------------------------------- */

body {
  font-family: var(--ts-font-body, "Poppins"), sans-serif;
  color: var(--ts-body, #262626);
  background-color: var(--ts-page-bg, #fff);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--ts-font-heading, "Poppins"), sans-serif;
  color: var(--ts-heading, #262626);
}

/* The handful of components compiled with Playfair Display follow the
   heading font when one is set. */
.section-title-wrap.style-two h2,
.section-title-wrap.style-three h2,
.special-category-banner .special-category-header .special-cate-header-content,
.special-category-banner.layout-five .banner-cate-name a.category-name,
.testimonial-area-wrapper .testimonial-content-wrapper .single-testimonial-wrap {
  font-family: var(--ts-font-heading, "Playfair Display"), serif;
}

/* ------------------------------------------------------------------------
   2. Links
   --------------------------------------------------------------------- */

a {
  color: var(--ts-link, #007bff); /* bootstrap default */
}

a:hover, a:focus {
  color: var(--ts-link-hover, #d25b5b);
}

::-moz-selection {
  background: var(--ts-brand, #d25b5b);
}

::selection {
  background: var(--ts-brand, #d25b5b);
}

/* ------------------------------------------------------------------------
   3. Buttons
   --------------------------------------------------------------------- */

.btn.btn-brand {
  background-color: var(--ts-btn-bg, #d25b5b);
  color: var(--ts-btn-text, #fff);
}

.btn.btn-brand:hover {
  background-color: var(--ts-btn-hover-bg, #b03030);
}

.btn.btn-black:hover {
  background-color: var(--ts-btn-bg, #d25b5b);
}

.btn.btn-transparent {
  border-color: var(--ts-btn-bg, #d25b5b);
}

.btn.btn-transparent:hover {
  background-color: var(--ts-btn-bg, #d25b5b);
  color: var(--ts-btn-text, #fff);
}

/* ------------------------------------------------------------------------
   4. Global brand accents (compiled #d25b5b throughout style.css)
   --------------------------------------------------------------------- */

.section-title-wrap h2:before,
.slider-categories-wrapper .slick-slider .slick-dots .slick-active,
.preloader-active .preloader-area-wrap .spinner div,
.table-responsive::-webkit-scrollbar-thumb,
.list::-webkit-scrollbar-thumb {
  background-color: var(--ts-brand, #d25b5b);
}

.slick-slider .slick-arrow:hover,
.single-special-banner:hover .banner-thumbnail .btn,
.layout-two .single-home-banner-wrap .home-banner-content .btn:hover,
.single-product-thumb-wrap .product-thumb-large-view .product-thumb-btns button:hover,
.single-product-thumb-wrap .product-thumb-large-view .product-thumb-btns a:hover {
  background-color: var(--ts-brand, #d25b5b);
}

.custom-checkbox input:checked ~ .custom-control-label:before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
.custom-radio input:checked ~ .custom-control-label:before,
.custom-radio .custom-control-input:checked ~ .custom-control-label:before {
  background-color: var(--ts-brand, #d25b5b);
  border-color: var(--ts-brand, #d25b5b);
}

.pro-qty a:hover,
.custom-checkbox label a:hover,
.custom-radio label a:hover,
.veeraModal .mfp-close:hover,
.preheader-middle-area,
.minicart-product-list .single-product-item .product-details .product-title a:hover,
.minicart-product-list .single-product-item .remove-icon:hover,
.offside-menu ul.left-offsidemenu li a:hover,
.offside-text a:hover,
.offcanvas-mainmenu-wrapper .slicknav_menu .slicknav_nav li a:hover,
.single-blog-post-wrap .blog-post-content h2 a:hover,
.blog-meta a:hover,
.single-comment-wrap .comment-footer a.btn-reply:hover,
.filter-item-list li a:hover,
.filter-item-list li a.active,
.sidebar-search-box form button:hover,
.sidebar-author-profile .author-social-link a:hover,
.newsletter-area form button.btn:hover,
.newsletter-area .mailchimp-alerts,
.shopping-cart-table .product-list .remove-icon button:hover,
.shopping-cart-table .product-list .product-name:hover,
.cart-coupon-update-area button:hover,
.checkout-page-coupon-area .card h3 span:hover,
.compare-table .table tbody tr td.product-image-title .title:hover,
.compare-table .table tbody tr th.product-image-title .title:hover,
.brand-accordion .card .card-header button[aria-expanded='true'],
.best-service-list li,
.my-account-item-wrapper .lost-pswd a,
.single-form-input a:not(.btn),
.single-product-details .find-store-delivery a:hover,
.single-product-details .group-product-wrap .table tr td.product-list a:hover,
.single-product-footer a:hover {
  color: var(--ts-brand, #d25b5b);
}

.spurs-checkbox li a:hover:before,
.spurs-checkbox li a.active:before,
.product-ratting-wrap .ratting-form input:focus,
.product-ratting-wrap .ratting-form textarea:focus,
.cart-coupon-update-area .coupon-form-wrap form input:focus {
  border-color: var(--ts-brand, #d25b5b);
}

.single-product-details .configurable-item .configurable-list li.active,
.single-product-details .configurable-item .configurable-list li:hover {
  border-color: var(--ts-brand, #d25b5b);
  color: var(--ts-brand, #d25b5b);
}

.search-box-wrap form input[type='search']:focus {
  border-bottom-color: var(--ts-brand, #d25b5b);
}

/* ------------------------------------------------------------------------
   5. Sale accent (inline template rule uses !important)
   --------------------------------------------------------------------- */

.team-sale-link {
  color: var(--ts-sale, #d63434) !important;
}

/* ------------------------------------------------------------------------
   6. Header — stock style.css header (template 001 + shared components)
   --------------------------------------------------------------------- */

.header-content-wrapper button.menu-icon-bar:hover,
.header-right-area button:hover,
.header-right-area .user-area li .dropdown-nav li a:hover,
.header-right-area .user-area li.dropdown-show:hover button,
.preheader-area-wrapper a:hover,
.preheader-right-area button:hover,
.preheader-right-area button:focus,
.mainmenu > li > a.current,
.mainmenu > li:hover > a {
  color: var(--ts-brand, #d25b5b);
}

.mainmenu > li > a.current:before {
  background-color: var(--ts-brand, #d25b5b);
}

/* ------------------------------------------------------------------------
   7. Header v2 — "Premium Dark Menu" (templates 002 + xmas)
      Fallbacks mirror the template inline <style> block.
   --------------------------------------------------------------------- */

.header-v2 {
  background: var(--ts-header-bg, #ffffff);
}

.header-v2 .mainmenu > li > a,
.header-v2 .dropdown-nav li a {
  color: var(--ts-header-link, #374151) !important;
}

.header-v2 .mainmenu > li:hover > a,
.header-v2 .mainmenu > li.active > a,
.header-v2 .dropdown-nav li a:hover {
  color: var(--ts-header-link-hover, #d63434) !important;
}

.header-v2 .integrated-search:focus-within,
.header-v2 .mobile-search-wrapper:focus-within {
  border-color: var(--ts-brand, #d63434);
}

.header-v2 .integrated-search button:hover,
.header-v2 .menu-icon-bar,
.header-v2 .menu-icon-bar:hover {
  color: var(--ts-brand, #d63434);
}

.header-v2 .mobile-search-btn {
  background: var(--ts-brand, #d63434);
}

/* ------------------------------------------------------------------------
   8. Header v3 — "Modern Gradient" (template 003)
   --------------------------------------------------------------------- */

.header-v3 {
  background: var(--ts-header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
}

.header-v3 .menu-section .mainmenu > li > a,
.header-v3 .menu-section .dropdown-nav li a {
  color: var(--ts-header-link, #ffffff) !important;
}

.header-v3 .menu-section .mainmenu > li:hover > a,
.header-v3 .menu-section .mainmenu > li.active > a {
  color: var(--ts-header-link-hover, #ffffff) !important;
}

.header-v3 .search-hero .search-btn {
  background: var(--ts-brand, #d63434);
}

/* ------------------------------------------------------------------------
   9. Header v4 — "Clean Minimal" (template 004)
   --------------------------------------------------------------------- */

.header-v4,
.header-v4 .nav-container {
  background: var(--ts-header-bg, #ffffff);
}

.header-v4 .main-nav > li > a {
  color: var(--ts-header-link, #374151) !important;
}

.header-v4 .main-nav > li.active > a,
.header-v4 .main-nav > li:hover > a,
.header-v4 .dropdown-menu li a:hover {
  color: var(--ts-header-link-hover, #d63434) !important;
}

.header-v4 .main-nav > li.active > a {
  border-bottom-color: var(--ts-header-link-hover, #d63434);
}

.header-v4 .search-btn:hover,
.header-v4 .phone-link,
.header-v4 .mobile-toggle:hover {
  color: var(--ts-brand, #d63434);
}

.header-v4 .mobile-toggle:hover {
  border-color: var(--ts-brand, #d63434);
}

/* ------------------------------------------------------------------------
   9b. Header v5 — "Trail & Tarmac" (template 005)
       background-color only, so a HeaderBg token recolours the ground
       without erasing the contour-line background-image.
   --------------------------------------------------------------------- */

.header-v5 {
  background-color: var(--ts-header-bg, #1E352C);
}

/* style.css turns .sticky-header.fixedHeader white on scroll — keep the
   theme's header colour in the stuck state too. */
.header-v5.sticky-header.fixedHeader {
  background-color: var(--ts-header-bg, #1E352C);
}

.header-v5 .mainmenu > li > a {
  color: var(--ts-header-link, #F5F3EC) !important;
}

.header-v5 .mainmenu > li:hover > a,
.header-v5 .mainmenu > li.active > a {
  color: var(--ts-header-link-hover, #ffffff) !important;
}

.header-v5 .mainmenu > li > a::after {
  background: var(--ts-brand, #E8611C);
}

.header-v5 .dropdown-nav {
  border-top-color: var(--ts-brand, #E8611C);
}

.header-v5 .dropdown-nav li a:hover {
  color: var(--ts-brand, #E8611C) !important;
}

.header-v5 .integrated-search button,
.header-v5 .mobile-search-btn {
  background: var(--ts-brand, #E8611C);
}

.header-v5 .integrated-search:focus-within,
.header-v5 .mobile-search-wrapper:focus-within {
  border-color: var(--ts-brand, #E8611C);
}

.header-v5 .info-link i {
  color: var(--ts-brand, #E8611C);
}

.header-v5 .info-link.sale-highlight {
  background: var(--ts-sale, #E8611C);
}

.header-v5 .info-link.sale-highlight i {
  color: #ffffff;
}

/* ------------------------------------------------------------------------
   10. Content areas — page bands, product cards / panels
   --------------------------------------------------------------------- */

.page-header-wrapper {
  /* breadcrumb band tint follows the card colour (compiled #fff9f9) */
  background-color: var(--ts-card-bg, #fff9f9);
}

.single-product-wrap,
.single-product-content-wrapper {
  background-color: var(--ts-card-bg, transparent);
}

/* ------------------------------------------------------------------------
   11. Footer
   --------------------------------------------------------------------- */

#footer-area {
  background-color: var(--ts-footer-bg, transparent);
  color: var(--ts-footer-text, inherit);
}

.footer-menu li a:hover,
.footer-four .footer-menu li a:hover {
  color: var(--ts-brand, #d25b5b);
}

#footer-area.footer-three .footer-bottom-wrapper .footer-social-icons a:hover {
  color: var(--ts-brand, #d25b5b) !important;
}
