/* Poppins import removed - Barlow & Barlow Condensed are loaded globally in frame.html */


body {font-family:'Barlow', sans-serif;background: #fdfdfd;color: #464646;line-height: 1.5;padding-top:0px;overflow-x: hidden;}
.container {width: 100%;padding: 0 15px;max-width:1720px;}
img {max-width: 100%;height:auto;}
.page-content {min-height: 450px;height:auto !important;}
.primary-bg {background: #644a3b;color: #fff;}
.secondary-bg {background: #fdfdfd;}
h1 {font-size: 30px;}
.header-specials {color: #111;text-transform: uppercase;border-bottom: 0px solid #ddd;padding: 10px;margin-bottom: 25px;}
.titles {margin: 0 0 20px;font-size: 18px;font-weight: 400;letter-spacing: 0;}
section, .site-footer {float: left;width: 100%;}
a {color: #111;text-decoration: none;}
a:hover, a:focus {color:#f8a81a;text-decoration: none;}
:focus {box-shadow: none !important;outline: none !important;}
.form-control {color: #000;font-family: 'Barlow', sans-serif;font-size: 13px;height: 36px;padding: 7px 12px;}
.page_heading:after {display:none;}

/*---------------------------------------------------------
DEFAULT BUTTONS
-----------------------------------------------------------*/
.btn {font-size: 13px;padding: 8px 12px;font-weight: 400;text-transform: uppercase;}
.btn-default {color: #202020;background-color: #fff;border-color: #000;border-radius: 0px;border-width: 2px;transition: all 0.3s ease 0s;}
.btn-default:hover,
.btn-default:focus, 
.btn-default.focus {color: #fff;background-color: #111;border-color: #000;opacity: 0.8;}
.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary {color: #fff; background-color: #444;border-color: #000;}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {color: #fff; background-color: #444;border-color: #000;}
.btn-default.btn-inverse,
.btn-primary {color: #fff;background-color: #121212;border-color: #000;}
.btn-default.btn-inverse:hover,
.btn-primary:hover {color: #fff;background-color: #111;border-color: #000;}
.btn-link {color: #777;}
.btn.btn-checkout {background: #644a3b;}
.btn.btn-addcart {font-size: 14px;padding: 8px 12px;}
.btn.btn-addcart:hover {color: #000;background-color: #f8a81a;border-color: #000;}

/*---------------------------------------------------------
BREADCRUMB
-----------------------------------------------------------*/
.breadcrumnb .container { max-width: 1600px;}
.breadcrumnb ol li {font-size: 12px;}
.breadcrumnb ol li > a {color: #000;}

/*---------------------------------------------------------
HEADER
-----------------------------------------------------------*/
.navbar.navbar-inverse {margin-bottom: 0;border: none;background-color: transparent;min-height: 36px;}
.navbar.navbar-inverse.tcdfixed .site-header  {position: fixed;z-index: 995;top: 0;width: 100%;box-shadow: 0px 2px 10px rgba(30, 30, 30, 0.5), 0 4px 0 0 #121212 inset; -webkit-box-shadow: 0px 2px 10px rgba(30, 30, 30, 0.5), 0 4px 0 0 #121212 inset; -moz-box-shadow: 0px 2px 10px rgba(30, 30, 30, 0.5), 0 4px 0 0 #121212 inset;-ms-box-shadow: 0px 2px 10px rgba(30, 30, 30, 0.5), 0 4px 0 0 #121212 inset;border-top: none;webkit-animation-name: fadeInDown;animation-name: fadeInDown;-webkit-animation-duration: 0.5s;animation-duration: 0.5s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.navbar.navbar-inverse.tcdfixed .site-header .logo img {top: 5px;}
.navbar.navbar-inverse.tcdfixed .site-header .header-info {top: 5px;}
.navbar.navbar-inverse.tcdfixed .header-info {background-color: transparent;border: none;box-shadow: none;height: 80px;}
.navbar.navbar-inverse.tcdfixed .site-header .header-info:before, .navbar.navbar-inverse.tcdfixed .site-header .header-info:after {display:none;}
.top-note {width: auto;line-height: 34px; color: #000; font-weight: 600; font-size: 11px; letter-spacing: 1px; float: right;padding: 0 10px 0 0;text-transform: uppercase;}
.top-contact {float: left;padding: 0 0 0 10px;}
.top-contact a {color: #000;font-size: 14px;letter-spacing: 1px;font-weight: 600;margin: 0 10px 0 0;text-transform: uppercase;line-height: 34px;}
.top-contact a span {padding: 0 0 0 5px;}
.top-header {padding: 0; text-align: center; height: 35px; background-size: 86px;position: relative;background-color: #f8a81a;}
.logo img {position: absolute;top: 0; right: 0;bottom: 0;left: 0;margin: auto;max-width: 173px; width: auto;z-index: 11;}
.header-info {position: absolute; top: -1px;bottom: 0; right: 0; width: 395px; float: right; height: 70px;background-color: #f8a81a; border-bottom: 1px solid #000;box-shadow: 0 -1px 0 0 #f8a81a;border-radius: 0 0 15px 15px;}
.header-info::before {content: ""; width: 50px;  height: 70px; background-color: #f8a81a; left: -10px; position: absolute; transform: skew(12deg); border-left: 1px solid #000; border-bottom: 1px solid #000; box-shadow: 0 -1px 0 0 #f8a81a;border-radius: 0 0 0 12px;}
.header-info::after { content: ""; width: 50px; height: 70px; background-color: #f8a81a; right: -10px;  position: absolute; transform: skew(-12deg); border-right: 1px solid #000; border-bottom: 1px solid #000; box-shadow: 0 -1px 0 0 #f8a81a;border-radius: 0 0 12px 0;}
.site-header {position: relative;padding: 0;height: 85px;background: #eeeeee;-moz-transition: all 500ms ease-in-out;-o-transition: all 500ms ease-in-out;transition: all 500ms ease-in-out;z-index: 10;box-shadow: 0px -1px 0 0 #000;}
.site-header .container {position: relative;height: 85px;width:100%;max-width:1720px}

.main-bar {background-color: #000; text-align: center; font-weight: 600; padding: 20px; float: left;width: 100%;color: #fff;}
.main-bar a {display: block;color: #eee;font-size: 12px;letter-spacing: 0;}
.main-bar a span {background-color: #f8a81a;padding: 0 5px;border-radius: 2px;color: #000;margin: 0 0 0 2px;}

@media(max-width: 1440px) {
.logo img {max-width: 160px;}
.header-info {width: 380px;}
}
@media(max-width: 1200px) {
.logo img {right: -115px;}
.header-info {width: 335px;}
}
@media(max-width: 991px) {
.logo img {max-width: 180px;  margin: auto 0 auto 55px;  right: auto;top: 0;}
}
@media(max-width: 767px) {
.site-header ul li span {font-size: 16px;color:#644a3b;}
.site-header {height: 60px;}
.site-header .container {position: relative;height: 60px;}
.top-note {font-size: 10px;letter-spacing: 0px;display:none;}
.header-info {height: 55px;width: 360px;}
.header-info::before {height: 55px;}
.header-info::after {height: 55px;}
.navbar.navbar-inverse.tcdfixed .header-info {height: 55px;}
}
@media(max-width: 640px) {
.top-contact { float: left; padding: 0;width: 100%; text-align: center;}
.site-header {height: 100px;}
.header-info {height: auto;width: 100%; background-color: transparent;border: 0px;}
.header-info::before {display:none;}
.header-info::after {display:none;}
}
@media(max-width: 460px) {
}

/*---------------------------------------------------------
SEARCHBOX
-----------------------------------------------------------*/
#searchBox {width: 250px; margin: auto;top: -4px;bottom: 0;position: absolute;height: 32px;right: 115px;left: auto;}
.search-form {position: relative;}
.search-form .search-text {padding: 9px 40px 9px 10px;height: 32px;border-radius: 4px;border-color: #555;}
.search-form .search-submit {position: absolute;top: 0;right: 0;width: 30px;height: 100%;text-align: center;font-size: 15px;bottom: 0;padding: 0;border: none;background-color: #111;color: #fff;}
.search-form .search-submit:hover {background-color: #555;}

div.searchlight-balloon { padding: 2px 2px !important; top: 35px !important;}
div.searchlight-results-wrapper {border: 1px solid #222;border-radius: 3px;}

@media(max-width: 1200px) {
#searchBox {width: 210px;}
}

@media(max-width: 991px) {
#searchBox {width: 100%;margin: auto;top: -4px;bottom: 0;position: absolute;right: 0;left: 0;padding: 0 115px 0 30px;}
}
@media(max-width: 767px) {
#searchBox {padding: 0 115px 0 15px;}
}
@media(max-width:640px) {
#searchBox { top: auto; bottom: -35px;padding: 0 3px;z-index: 1;}
.search-form .search-text {border-radius: 0;}
}
@media(max-width:410px) {
#searchBox {padding: 0 2px;}
}

.store-search--advanced .product-items .product-item .name a {white-space: wrap;overflow: visible; height: 70px !important;overflow: hidden;}
.store-search--advanced .product-items .product-item .status { font-size: 11px;width: auto; position: absolute; top: 5px;}

/*---------------------------------------------------------
CATEGORY MENU
-----------------------------------------------------------*/
.tcdmenu {height: 85px; margin: auto;max-width: 100%;position: absolute; text-align: center;width: 100%;  top: 0; left: 0; right: 0; bottom: 0;padding: 0 5px;}
.tcdmenu > ul {border-radius: 0;display: inline-block;list-style: outside none none;margin: 0 auto;padding: 0;right: 0;width: 100%;max-width: 100%;text-align: left;}
.tcdmenu ul li {display: inline-block;position: relative;padding: 0;text-align: right; border-right: 0px solid #ddd;float: none;z-index: 6; color: #fff !important;}
.tcdmenu ul li a {color: #000;display: inline-block;font-size: 14px;font-weight: 500;height: auto;letter-spacing: -0.3px;padding: 0 8px;text-decoration: none;transition: all .2s linear 0s,color .2s linear 0s;vertical-align: middle;line-height: 85px;width: 100%;position: relative;z-index: 1;}
.tcdmenu > ul > li > a {height: 85px;}
.tcdmenu > ul > li:hover > a { background-color: #f8a81a;color: #000;}
.tcdmenu ul li a.selected {}
.tcdmenu ul li a:active{color: #444;}
.tcdmenu ul ul {background: #fff;visibility: hidden;opacity: 0;height: auto;position: absolute;left: -10px;text-align: left;padding: 5px;width: 260px;-webkit-box-shadow: 0 5px 5px rgb(0 0 0 / 60%), 0 0 0 1px #ccc inset;-moz-box-shadow: 0 5px 5px rgb(0 0 0 / 60%), 0 0 0 1px #ccc inset;box-shadow: 0 5px 5px rgb(0 0 0 / 60%), 0 0 0 1px #ccc inset;-moz-transition: all 0.3s ease 0.1s;-ms-transition: all 0.3s ease 0.1s;-o-transition: all 0.3s ease 0.1s;transition: all 0.3s ease 0.1s;z-index: 999999;display: none;border-radius: 0;}
.tcdmenu ul li:hover>ul{visibility: visible; opacity: 1; margin-top:0;}
.tcdmenu ul ul li { width: 100%; border: medium none; cursor: pointer;text-align:left;float: left;}
.tcdmenu ul ul li a { background: transparent; color: #292929 !important; font-size: 13px; line-height: 18px; padding: 5px 10px; width: 100%;border-bottom: 0px solid rgba(0,0,0,0.05);}
.tcdmenu ul ul li:hover > a {background-color: #000; color: #fff !important;}
.tcdmenu ul ul li a:active{color: #fff;}
.tcdmenu ul ul ul {visibility: hidden;opacity: 0; position: absolute;top: -4px;left: 250px; padding: 4px;border-width: 0 1px 1px 1px;border-style: solid; border-color: #ccc;box-shadow: 0 4px 5px 0 rgba(0,0,0,0.2);}
.tcdmenu ul ul ul li a {border-bottom: 1px solid rgba(0,0,0,0.05);}
.tcdmenu .arrow { display: none;}
.tcdmenu ul ul ul li a { box-shadow: none !important;}
.tcdmenu > ul > li.dropdown > a::after {content: '\f107';font-family: 'fontello';position: relative;left: 2px;color: #f8a81a;}
.tcdmenu > ul > li.dropdown > a:hover::after {color: #000;}
.tcdmenu > ul > li.dropdown > ul, .tcdmenu > ul > li.dropdown > ul li.dropdown ul {display: block;}

.tcdmenu ul li.SHOP.BY.MAKE {position: initial;}
.tcdmenu ul li.SHOP.BY.MAKE ul {width: 100%;left: 0;}
.tcdmenu ul li.SHOP.BY.MAKE ul li {float: left;width: 20%;}

.tcdmenu ul li.DEPARTMENTS {position: initial;}
.tcdmenu ul li.DEPARTMENTS ul {width: 100%;left: 0;}
.tcdmenu ul li.DEPARTMENTS ul li {float: left;width: 25%;}

.tcdmenu ul li.SHOP.BRANDS {position: initial;}
.tcdmenu ul li.SHOP.BRANDS ul {width: 100%;left: 0;}
.tcdmenu ul li.SHOP.BRANDS ul li {float: left;width: 25%;}

.tcdmenu ul li.Utility.Vehicles ul {width: 560px;}
.tcdmenu ul li.Utility.Vehicles ul li {float: left;width: 50%;}

.tcdmenu ul li.Mowers ul {width: 460px;}
.tcdmenu ul li.Mowers ul li {float: left;width: 50%;}

@media(max-width:1440px) {
.tcdmenu ul li a {font-size: 12px;padding: 0 4px;}
}
@media(max-width:1100px) {
.tcdmenu ul li a {font-size: 12px;}
}
@media(max-width:991px) {
.tcdmenu-wrapper {display: none;}
}
@media(max-width:720px) {
}
@media(max-width:567px) {
}

/*---------------------------------------------------------
MOBILE MENU
-----------------------------------------------------------*/
.head-mobile-nav {display: none;}
.head-mobile-nav > a {color: #000;font-size: 28px;line-height: 1;}

#mobacc, #mobacc ul, #mobacc ul li, #mobacc ul li a {margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#mobacc {display:inline-block; width: 100%; color: #ffffff; margin: 0;}
#mobacc ul ul {background: transparent none repeat scroll 0 0; display: none;}
#mobacc > ul > li > a { background: #fff none repeat scroll 0 0; border-bottom: 1px solid #eee;color: #111 !important; cursor: pointer; font-size: 13px !important;font-weight: 600; padding: 10px 10px !important; text-decoration: none; text-shadow: none !important; z-index: 2;transition: all 0.3s linear 0s;}
#mobacc > ul > li > a:hover, #mobacc > ul > li.active > a, #mobacc > ul > li.open > a {background: #555 !important;color: #ffffff !important;}
.arrow {width: 0; height: 0; position: absolute; top: 0; right: 0;}
#mobacc > ul > li > a:hover > span::after, #mobacc > ul > li.active > a > span::after, #mobacc > ul > li.open > a > span::after {border-color: #eeeeee;}
#mobacc ul ul li a {cursor: pointer; padding: 12px 20px; z-index: 1; text-decoration: none; font-size: 13px; color: #222; font-weight: 500; background: #f5f5f5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);}
#mobacc ul ul li:first-child > a {box-shadow: none;}
#mobacc ul ul ul li:first-child > a {box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);}
#mobacc ul ul ul li a {padding-left: 30px;}
#mobacc ul ul li.dropdown > a::after {display: block; position: absolute; content: ""; width: 5px; height: 5px; right: 20px; z-index: 10; top: 11.5px; border-top: 0 solid #eeeeee; border-left: 0 solid #eeeeee; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}
#mobacc ul ul li.active > a::after, #mobacc ul ul li.open > a::after, #mobacc ul ul li > a:hover::after {border-color: #ffffff;}
#mobacc .arrow {background-color: #fff;height: 33px;position: absolute;top: 0px;right: 0;width: 38px;z-index: 15;cursor: pointer;border-left: 1px dotted #ccc;}
#mobacc .dropdown.open ul ul li a { background: #ffffff none repeat scroll 0 0 !important; font-weight: 500; color: #222 !important;}
#mobacc ul ul li a.cat {background: #111;}
#mobacc ul ul li a.subcat {font-size: 14px !important;padding: 8px 15px 8px 20px !important;border-bottom: 1px solid #e0e0e0;}
#mobacc .dropdown i { bottom: 0; height: 30px;left: 0;margin: auto;  padding: 0;position: absolute;right: 0;  top: 0; width: 30px;font-size: 20px;}
#mobacc .dropdown .icon-angle-right::before {;margin: 0 !important;padding: 0;font-size: 28px;}
#mobacc .dropdown .icon-angle-right {transition: all 0.3s linear 0s;color: #111;}
#mobacc .dropdown.open .icon-angle-right {transform: rotate(90deg);-webkit-transform: rotate(90deg);color: #111;}
#mobacc .dropdown .arrow {display: block !important;}


.menu-open {overflow: hidden;}
.mobile-menu {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1050;display: none;overflow: hidden;-webkit-overflow-scrolling: touch;outline: 0;background-color: rgba(0,0,0,0.5);}
.menu-open .mobile-menu {overflow-x: hidden;overflow-y: auto;}
.mobile-menu-inner {background-color: #fff;padding: 0;width: 310px;margin-left: 0;margin-right: auto;min-height: 100vh;position: relative;-o-transition: -o-transform .3s ease-out;transition: transform .3s ease-out;-webkit-transform: translate(-310px,0);-ms-transform: translate(-310px,0);-o-transform: translate(-310px,0);transform: translate(-310px,0);}
.menu-open .mobile-menu-inner {-webkit-transform: translate(0,0);-ms-transform: translate(0,0);-o-transform: translate(0,0);transform: translate(0,0);}
.mobile-menu-close {padding: 20px 10px; text-align: center;background-color: #eee;}
.mobile-menu-close img {max-width: 230px;margin: 0 auto;}
.mobile-menu-close a.mobile-close {color: #000;display: inline-block;line-height: 1;font-size: 18px;text-decoration: none;background: #fff;width: 23px;text-align: center;height: 30px;line-height: 30px;border-radius: 0 5px 5px 0;position: absolute;top: 25px;right: -23px;}
.mobile-menu-close a.logo-link:after {display: none;}
.mobile-menu-close a:after {content: '\e805';font-family: "fontello";}
.mobile-menu-close a:nth-of-type(1):after {display:none;}
#mobile-menulinks ul {padding:0;margin:0;list-style: none;}
#mobile-menulinks ul li {float: left;width: 100%;list-style: none;}
#mobile-menulinks ul li a {padding: 8px 10px;float: left;width: 100%;font-size: 16px;color: #111;font-weight: 600;text-decoration: none;border-bottom: 1px solid #eee;}
.mobile-menu-widget {float: left;width: 100%;background: #fff;}
.mobile-menu-widget h3 {margin: 0;text-align: center;background: #121212;color: #fff;border-bottom: 1px solid #fff;font-size: 20px;line-height: 35px;font-style: italic;}
.mobile-menu h5 {background-color: #121212; padding: 8px 10px;font-size: 15px;color: #fff;margin: 0; text-transform: uppercase;}

/*---------------------------------------------------------
VIEW CART
-----------------------------------------------------------*/
.view-cart {background: #fff;}
.cart-left {width: 68%;float: left;padding:0;}
.cart-right {width: 31%;float: right;padding:0;}
span.item-fullname {display: block;font-size: 14px;line-height: 1.15;}
.cart-details .row {margin: 0;}
.cart-box {border: 1px solid #ccc;padding: 10px;border-radius:5px;}
span.item-thumb {width: 80px;height: 80px;position: relative;display: block;float: left;}
.cart-items > li > span.item-name {width: 52%;padding: 0 0 0 5px;}
span.quant-input {display: block;position: relative;width: 70px;margin: 0 auto 8px;}
span.quant-input input[type="text"] {width: 70px;border: 1px solid #bbb;color: #222;}
.cart-items > li.items-header {border-top: 1px solid #ccc;}
.cart-items > li {border-bottom: 1px solid #ccc;}
span.item-name-right {padding: 0 0 0 10px !important;}
.cart-items > li > span.item-price {width: 16%;padding: 0 !important;color: #000 !important;text-align: center;}
.cart-items > li > span.item-qty {width: 16%;padding: 0 !important;color: #000 !important;text-align: center;}
.cart-items > li > span.item-total {width: 16%;padding: 0 !important;color: #000 !important;text-align: center;}
.cart-detail-item {padding: 10px 0;border-bottom: 1px solid #ececec;}
.checkout-btns .btn.btn-checkout {background: #018952;letter-spacing: 0;font-weight: 600;font-size: 20px;}
.carttotal-label {padding: 0;}
.carttotal-price {padding: 0;}
.shipquoteint-location .col-xs-12 {padding: 0 0 5px;}
#apply-coupon, #ShipQuote-module {width: 100%;}
.checkout-options {padding: 25px 0 0;}
body:not(.has-stickymenu) .cart-box.fixed-cart-box {padding-top: 0 !important;}
body:not(.has-stickymenu) .cart-box.fixed-cart-box .cart-box-sticky {max-width: 100%;position: relative;margin: 0;padding: 0;z-index: 0;top: 0;}
#mobile-sticky-checkout {display: none;}
#viewcart a.removeItem {color: #e74c3c;}
.view-cart #thirdPartyPayment {position: relative;z-index: 1;display: none;}
.view-cart #apply-coupon, .view-cart #ShipQuote-module {width: 100%;display: block !important;}

@media(max-width:1070px) {
.cart-left {width: 100%;float: left;padding: 0;}
.cart-right {width: 100%;float: right;padding: 0;max-width: 380px;}
}
@media(max-width: 767px) {
.cart-left {width: 100%;}
.cart-right {max-width: 100%;width: 100%;}
span.item-fullname {line-height:1.15;}
span.item-fullname a {font-size: 11px;}
span.item-actions {float: left;width: 100%;}
.cart-items > li > span.item-name {float: left;}
.cart-items > li.items-header {display: block;}
.cart-items > li.cart-item > span.item-price, .cart-items > li.cart-item > span.item-qty, .cart-items > li.cart-item > span.item-total {padding-top: 0;line-height: 1.4em;color: #000;}
.cart-items > li.cart-item > span.item-price, .cart-items > li.cart-item > span.item-qty, .cart-items > li.cart-item > span.item-total {float: left;width: 16%;text-align: center;padding-top:0;font-size: 11px;}
}
@media(max-width: 640px) {
.cart-items > li > span.item-name {width: 46%;}
.cart-items > li > span.item-price {width: 18% !important;}
.cart-items > li > span.item-qty {width: 18% !important;}
.cart-items > li > span.item-total {width: 18% !important;}
}
@media(max-width: 460px) {
span.item-thumb {width: 100%;float: none;}
span.item-thumb img {margin: 0 auto;}
.cart-items > li > span.item-name {width: 37%;}
.cart-items > li > span.item-price {width: 21% !important;}
.cart-items > li > span.item-qty {width: 21% !important;}
.cart-items > li > span.item-total {width: 21% !important;}
span.quant-input {width: 65px;}
span.quant-input input[type="text"] {width: 65px;padding: 0 26px 0 0;font-size: 12px;}
}


/*---------------------------------------------------------
HEADER CART
-----------------------------------------------------------*/
.header-links #maincart {position: relative;width: 50px;}
.header-links #maincart a:hover .cart-details span.cart-title {color: #333;}
.minicart .cart-details { display: block; float: left;}
.minicart .cart-details span.cart-title { font-size: 12px; line-height: 15px; display: inline-block; text-transform: capitalize;}
.minicart .cart-details span.cart-title:hover { color: #646464;}
.minicart .cart-details span.cart-count {display: inline-block;position: absolute;left: 22px;top: -1px;}
.minicart .cart-details span.cart-count .minicart-items {width: 22px;height: 22px; border-radius: 50%; -webkit-border-radius: 50%; display: inline-block; text-align: center;padding-top: 0; margin-left: 0;line-height: 22px; font-size: 9px;  font-weight: 600; color: #000;  background-color: #fff;}
span.cart-title {font-size: 12px;line-height: 15px;display: block;font-weight: bold;}
span.cart-count {color: #676767;font-size: 10px;display: block;line-height: 15px;font-weight: 400;}

@media(max-width: 767px) { top: 4px;}
}

/*---------------------------------------------------------
HOME PAGE
-----------------------------------------------------------*/

.homepage-slider {}
/* Full-bleed homepage carousel. The 1920px cap left white gutters on any
   display wider than 1920 (320px each side at 2560, 760px at 3440). The
   cap has to be lifted BEFORE flexslider initialises, because flexslider
   measures this container and writes an inline pixel width onto every
   <li>; lifting it later leaves the slides stuck at the old width. */
.homepage-slider .container {max-width:none;padding: 0 0 5px;width:100%;height:auto;}
.homepage-slider .homeCarousel.flexslider {}
.homepage-slider .flexslider .slides img {height: auto;width: 100%;max-width:none;}
#home.page-content {padding: 0;}
.home-page-content .category-header {padding: 0; margin: 0;}
.home-page-content .category-header img {margin: 0 auto;}
.home-page-content .category-footer {padding: 0;margin: 0;}
.home-page-content .category-footer .content.tc-pagebuilder {font-size: 17px; line-height: 1.5; padding: 50px 30px; max-width: 100%; margin: 0 auto; width: 100%;border-top: 1px solid #ccc;}
.home-page .header-specials {text-align: center;margin: 50px 0 40px;border-bottom: 2px solid #ccc;line-height: 0;padding: 0;}
.homepage-blog-posts .header-specials {line-height: normal; min-height: auto;}
.home-page .header-specials span {background: #fdfdfd;padding: 0 30px;font-weight: 700;}
.home-page .products-section {background-color: #fdfdfd;}

#home section#modFeatured.products-section {padding: 0;margin: 0;position: relative;height:auto;}
#home section#modFeatured.products-section::before {content: "";background-color: rgba(0,0,0,0);position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;}
#home section#modFeatured.products-section .tcdprod-wrap {position: relative;padding: 0 25px;float: right;width: 100%;}
#home section#modFeatured.products-section .header-specials {margin: 50px 0;}
#home section#modFeatured.products-section .header-specials:after {content: "Shop Our Favorites";display: block; font-size: 12px;position: absolute;top: 22px;left: 0;right: 0; margin: auto;background-color: transparent;text-align: center;}
#home section#modNewReleases.products-section {padding: 0;margin: 15px 0 20px;position: relative;height: auto;}
#home section#modNewReleases.products-section::before {background-color: rgba(0,0,0,0);content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;}
#home section#modNewReleases.products-section .tcdprod-wrap { position: relative;float: left;padding: 0 25px;width: 100%;}
#home section#modNewReleases.products-section .header-specials {margin: 50px 0;}
#home section#modNewReleases.products-section .header-specials:after {content: "Shop Our Recently Added Items";display: block; font-size: 12px;position: absolute;top: 22px;left: 0;right: 0; margin: auto;background-color: transparent;text-align: center;}
#home section#modTopSellers.products-section {padding: 0;margin: 0 0 20px;position: relative;height: auto;}
#home section#modTopSellers.products-section::before {background-color: rgba(0,0,0,0);content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;}
#home section#modTopSellers.products-section .tcdprod-wrap { position: relative;float: left;padding: 0 25px;width: 100%;}
#home section#modTopSellers.products-section .header-specials {margin: 50px 0;}
#home section#modTopSellers.products-section .header-specials:after {content: "Shop Our Best Sellers";display: block; font-size: 12px;position: absolute;top: 22px;left: 0;right: 0; margin: auto;background-color: transparent;text-align: center;}

#home .tcdprod-wrap .product-items .product-item {width: 100% !important;}
#home .new-top-wrap {float:left;width:100%;}
#home .new-top-wrap-inner { max-width: 1600px; width: 100%; margin: 0 auto;}
#home .new-top-wrap .new-top-block {float: left; width: 50%;}

.home-cat-wrap {float: left;width: 100%;}
.home-cat-title { float: left;width: 100%;padding: 0; overflow: hidden; text-align: center;}
.home-cat-title-inner {float: none;width: auto;font-size: max(2.95vw,25px);font-weight: 800;text-transform: uppercase; position: relative;padding: 0;color: #000;}
.home-cat-title-inner span {color: #f8a81a;}
.home-cat-block { float: left; width: 100%;border: 2px solid #fff;}
.home-cat {float: left; width: 33.33%; border: 3px solid #fff; border-radius: 20px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.home-cat img {width: 100%; display: block; border-radius: 20px;}
.home-cat:hover {transform: scale(1.05); box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); z-index: 10;}
.home-cat-two {float: left;width: 50%;border: 3px solid #fff;}

.tcdprod-wrap .owl-nav {}
.tcdprod-wrap .owl-nav button.owl-prev {height: 37px;width: 37px;top: 30%;position: absolute;left: -20px;border-left: 0 solid #ccc !important;background-color: #111 !important;border-radius: 50%;}
.tcdprod-wrap .owl-nav button.owl-next {height: 37px;width: 37px;top: 30%;position: absolute;right: -20px;border-left: 0 solid #ccc !important;background-color: #111 !important;border-radius: 50%;}
.tcdprod-wrap .owl-nav button.owl-prev span {color: #f8a81a;font-size: 32px;top: -8px;position: relative;}
.tcdprod-wrap .owl-nav button.owl-next span {color: #f8a81a;font-size: 32px;top: -8px;position: relative;}
.owl-dots {display: none;}
.tcdprod-wrap .product-items { overflow: visible !important;}

.tcdbrands-wrap {float: left;width: 100%; padding: 0;position: relative;border-top: 0px solid #f6f6f6;margin:15px 0 0;background-color: #f6f6f6;}
.tcdbrands-wrap .header-specials span {  background: #f6f6f6;}
.tcdbrands-wrap .header-specials:after {content: "Shop Our Featured Bands";display: block; font-size: 12px;position: absolute;top: 22px;left: 0;right: 0; margin: auto;background-color: transparent;text-align: center;}
#tcdbrands {width: 100%;margin: 0 auto;position: relative;padding: 15px 5px 35px;height:155px;float:left;}
#tcdbrands .owl-item div {border: 0px solid #ccc;}
#tcdbrands.owl-carousel .owl-item img {max-width: 100% !important;width: 100% !important;margin: 0 auto;height: auto;border: 1px solid #ccc;padding: 10px 30px;background-color: #fff;}
#tcdbrands.owl-carousel .owl-dots {text-align: center;display:none;}
#tcdbrands.owl-carousel button.owl-dot {background: 0 0;color: #333;border: 1px solid;font: inherit;padding: 5px !important; margin: 0 5px 0;border-radius: 15px;transition: all 0.3s ease 0s;}
#tcdbrands.owl-carousel button.owl-dot.active {background: #333;}
#tcdbrands .owl-nav, #tcdbrands .owl-dots {display: none;}

.fleetbanner-wrapper{clear:both!important;width:100%!important}.fleetbanner-wrapper .fleetbanner{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#f8a81c;color:#000;padding:50px;font-size:14px;min-height:140px}.fleetbanner-wrapper .fleetbanner h1,.fleetbanner-wrapper .fleetbanner h2{margin:5px 0;font-weight:700}.fleetbanner-wrapper .fleetbanner p{margin:5px 0}.fleetbanner-wrapper .fleetbanner .btn{margin-top:15px}@media(max-width:640px){.fleetbanner-wrapper .fleetbanner{padding:20px;font-size:12px}.fleetbanner-wrapper .fleetbanner h1{font-size:18px}.fleetbanner-wrapper .fleetbanner h2{font-size:16px}.fleetbanner-wrapper .fleetbanner p{font-size:14px}}




@media(max-width:1400px) {
}
@media(max-width: 991px) {
#home section#modNewReleases.products-section .header-specials:after {left: 15px;right: auto;}
#home section#modFeatured.products-section .header-specials:after {left: 15px;right: auto;}
#home section#modTopSellers.products-section .header-specials:after {left: 15px;right: auto;}
.tcdbrands-wrap .header-specials:after {left: 15px;right: auto;}
.home-page .header-specials span {background: #fdfdfd;padding: 0 15px;}
.tcdbrands-wrap .header-specials span {  background: #f6f6f6;}
.home-page .header-specials {text-align: left;font-size: 20px;border-bottom: none;}
.tcdprod-wrap .owl-nav button.owl-prev {height: 35px;width: 35px;top: -59px;position: absolute;right: 41px; border-left: 0px solid #ccc !important;background-color: #111 !important;left:auto;box-shadow: 0 0 0 3px #FDFDFD;}
.tcdprod-wrap .owl-nav button.owl-next {height: 35px;width: 35px;top: -59px;position: absolute;right: 3px;border-left: 0px solid #ccc !important;background-color: #111 !important;box-shadow: 0 0 0 3px #FDFDFD;}
}
@media screen and (max-width: 867px) {
}
@media(max-width: 640px) {
.home-cat {width: 50%;}
}
@media(max-width: 567px) {
.home-page .header-specials span {font-size: 18px;}
}
@media(max-width: 459px) {
}

/*---------------------------------------------------------
CATEGORY
-----------------------------------------------------------*/
#category .container {max-width: 1600px;}
.subcategories {border-bottom: 1px solid #ececec;padding: 0 0 30px;}
section.subcategories_block {margin: 0;}
.subcategories > ul {margin: 0;}
.subcategories > ul > li {padding: 5px;margin: 0;float: left;}
.subcategories > ul > li > a {float: left;width: 100%;border: 1px solid #ccc;}
.subcategories > ul > li > a:hover {}
.subcategories > ul > li span.category-img {border: 1px solid #eee;background: #f6f6f6;}
.subcategories > ul > li span.name {padding: 5px 0;margin: 0;background-color: #000;color: #fff;font-weight: 600;transition:all 0.3s ease 0s;}
.subcategories > ul > li > a:hover span.name {background-color: #f8a81a;color: #000;}
.category-products {padding: 15px 0;}
.category-toolbar {margin-bottom: 15px; margin-top: 15px;}
.category-actions {padding: 0;margin: 0 0 35px;border-bottom: 1px solid #ececec;}
.sidebar-widget .product-item .img {padding: 2px !important;margin: 0;}
.sidebar-widget .widget-body .row {margin: 0 !important;padding: 0;}
.sidebar-widget .product-item .img img {position: relative;}
.sidebar-widget .topsellers-item .col-xs-4, .sidebar-widget .new-release-item .col-xs-4 {background: #fff;border: 1px solid #ccc;border-radius: 2px;}
.sidebar-widget .product-item .status span {display: none;}
.sidebar-widget .product-item .img a {float: left;width: 100%;}
.sidebar-widget .product-item .img img {position: relative;max-width: 100%; height: auto;width: auto;}
.new-release-item.product-item:nth-of-type(6),
.new-release-item.product-item:nth-of-type(5),
.new-release-item.product-item:nth-of-type(4)
 { display: none;}
.topsellers-item.product-item:nth-of-type(6),
.topsellers-item.product-item:nth-of-type(5),
.topsellers-item.product-item:nth-of-type(4)
 { display: none;}

@media(max-width: 1200px) {
.subcategories > ul > li {width:25% !important;}
}
@media(max-width: 767px) {
.subcategories > ul > li {width:33.33% !important;}
}
@media(max-width: 567px) {
.subcategories > ul > li {width:50% !important;}
}

/*---------------------------------------------------------
SIDEBAR
---------------------------------------------------------*/
.sidebar-widget .product-item .name {text-align: left;}

/*---------------------------------------------------------
LISTING
---------------------------------------------------------*/
.listing-page .breadcrumnb .container, #listing .container {max-width: 1600px;}
#listing #main-image {  background-color: #fff;  border: 1px solid #eee;}
/*#listing .main-image > a img {max-height: 400px !important;}*/
#listing .product-details {float: left; width: 100%;}
#listing .product-details .header {float: left;width: 100%;}
#listing .product-details .header .page_heading {float: left;width: 100%; margin-bottom: 10px;}
#listing .product-details h1 {float: left;width: 100%;font-size: 25px;color: #000;}
#listing .product-reviews {margin-top: 10px; margin-bottom: 15px; float: left; width: 100%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px 0; display: flex; align-items: center; justify-content: space-between;}
#listing span.reviews {margin: 0; padding-left: 10px; font-size: 14px; color: #333; font-weight: normal; flex: 1;}
#listing span.create-review-link {margin: 0; padding-right: 10px;}
#listing span.create-review-link a {display: inline-flex; align-items: center; font-size: 14px; text-decoration: none; background-color: #f8a81a; color: #fff; padding: 5px 10px; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease; float: right;}
#listing span.create-review-link a:hover {background-color: #333;}
#listing span.create-review-link a .icon {margin-right: 5px; font-size: 16px;}
#listing span.create-review-link { float: right;text-align: right;padding: 0 5px 0 0;}
#listing .pricingBlock { margin: 0 0 15px; line-height: 1;float: left; width: 100%;}
#listing .pricingBlock .retailprice {margin: 4px 0;font-size: 13px;}
#listing .short-description {margin: 0 0 15px;width: 100%;float: left;display:none;}
#listing #divOptionsBlock.sub-section { margin: 0 0 15px;padding: 10px;background-color: #fff;border: 1px solid #ccc;float: left;width: 100%;}
#listing .quantityBlock.sub-section { margin: 0 0 15px;padding: 10px;background-color: #fff;border: 1px solid #ccc;float: left;width: 100%;}
#listing .quantityBlock .header > .page_heading {margin-bottom: 0;font-size: 14px;}
#listing .quantityBlock .quantity-table {margin-top: 10px;float: left;width: 100%;}
#listing .quantityBlock .quantity-table table > thead > tr > th {vertical-align: bottom;border-bottom: 2px solid #ddd;font-size: 13px;}
#listing .waitinglist.sub-section {margin: 0;float: left; width: 100%;padding: 15px 0px;}
#listing .addToCartBlock.sub-section {margin: 0;width: 100%; float: left; padding: 0px;background-color: #fff;border: 1px solid #ccc;position: relative;}
#listing .qtybox-addcart.form-group { margin: 0; float: left;width: 100%;padding:25px 10px;}
#listing .qty-input { width: 70px;margin: 0 5px;}
#listing .qty-input input[type="text"] {border: 1px solid #000;width: 70px;}
#listing .product-id {margin: 0;float: left;width: 50%;font-size: 13px;text-align: left;padding: 2px 0 2px 10px;border-bottom: 1px solid #ccc;}
#listing #availabilityInfo {float: right;width: 50%;font-size: 13px;padding: 2px 10px 2px 0;border-bottom: 1px solid #ccc;text-align: right;font-weight: 800;}
#listing span.freeshipping.availability-item {position: absolute; top: 19px; left: auto; width: 80px; text-align: center; right: 10px; margin: auto; background-color: #46b727; color: #fff; bottom: 0; line-height: 1.25;height: auto; padding: 4px;height: 40px;}
#listing .special-actions.text-center { display: flex; width: 100%;border: 1px solid #000;}
#listing .special-action {display: inline-block; margin: 0; border-right: 1px solid #000;flex-grow: 1;}
#listing .special-action .btn-link {font-size: 12px;float: left;width: 100%;background-color: #f8a81a;color: #000;text-decoration: none;padding: 5px 0;font-weight: 600;letter-spacing: -0.2px;transition: all 0.3s ease 0s;}
#listing .special-action:hover .btn-link {background-color: #000;color: #fff;}
#listing .special-action:nth-last-of-type(1) { border: none;}
#listing .qaLink {float: left;width: 100%;margin: 0 0 15px;}
#listing a.qaLink {float:left;margin: 0;padding: 0 8px;width: auto;text-align: right;background-color: #000;color: #fff;border-radius: 3px;font-size: 12px;}
#listing .qaLink > a > i {color: #fff;}
#listing .addl-images ul.slides li a {background-color: #fff; border: 1px solid #eee;}
#listing .category_breadcrumbs.sub-section {display: none;}
.mb--messagebar {font-size: 18px; line-height: normal; }
#listing .likebutton {margin: 25px 0 0;display: none;}
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {background-color: #f8a81a;color: #000;border-top: 1px solid #000;border-right: 1px solid #000;border-left: 1px solid #000;}
.r-tabs .r-tabs-nav .r-tabs-anchor {font-size: 12px;}
#listing .ppCheckout {display: none;}

#listing .sub-section {margin: 0;}

#tab-4 .col-md-6:nth-of-type(1), #tab-4 .col-md-6.average-customer-rating-sm {float: left;width: 100%; margin: 0 0 25px;}

@media(min-width: 992px) {
#listing .col-md-6.tcd-stuck {position: sticky;top: 110px;bottom: 0;}
}
@media(max-width: 991px) {
#listing.page-content {padding: 15px 0 0;}
#listing .product-cols.row > .col-md-6 {float: left;width: 100%;}
#listing #main-image {float: left;width: 100%;}
#listing #main-image a { float: left;width: 100%; padding: 10px;}
#listing .addl-images { float: left;width: 100%;}
#listing #imagecaptiont {display: none;}
}
/*@media(max-width: 767px) {
#listing #main-image {height: 280px;}
#listing .main-image > a img {max-height: 260px !important;}
#listing .addl-images {height: 145px;}
}
@media(max-width: 640px) {
#listing .addl-images {height: 115px;}
}
@media(max-width: 567px) {
#listing .addl-images {height: 100px;}
}
@media(max-width: 460px) {
#listing .addl-images {height: 75px;}
}
@media(max-width: 420px) {
#listing .addl-images {height: 65px;}
}
@media(max-width: 380px) {
#listing .addl-images {height: 55px;}
}*/

/*---------------------------------------------------------
LISTING ACCESSORIES
-----------------------------------------------------------*/

@media(min-width: 768px) {
div#atcblock {top: 0;transition: top 0s linear 0s;}
div#atcblock.sticky {position: fixed !important;top: 84px;z-index: 100;width: 100%;left: 0;right: 0;text-align: center;padding: 0px 5px !important;transition: top 0.4s linear 0s;}
div#atcblock.sticky .atcblock-wrap { max-width: 991px;margin: auto;}
div#atcblock.sticky .atcblock-info {float: left;display: block !important;width: 50%;padding: 10px 0;}
div#atcblock.sticky .qtybox-addcart.form-group { float: right; margin: 0 auto; width: 50%;}
div#atcblock.sticky .atcblock-manu {display: none;}
div#atcblock.sticky .atcblock-logo {float: left;width: auto;}
div#atcblock.sticky .atcblock-logo img {max-height: 50px;border: 1px solid #ccc;}
div#atcblock.sticky .atcblock-title {float: left;padding: 0 5px;max-width: 260px;text-align: left; font-weight: 600;line-height: 1.25;font-size: 12px;}
div#atcblock.sticky .qtybox-addcart.form-group label:nth-of-type(1) { display: none;}
div#atcblock.sticky .btn.btn-addcart {padding: 4px 10px;font-size: 14px;}
div#atcblock.sticky .qtybox-addcart.form-group label.qty-input {  width: 65px;}
div#atcblock.sticky .qty-input input[type=text] {padding: 0 25px 0 5px;height: 28px; width: 65px;font-size: 15px;}
div#atcblock.sticky span.qty-nav {height: 26px; width: 22px;}
div#atcblock.sticky span.qty-nav>button {  font-size: 12px;  line-height: 12px;}
div#atcblock.sticky .atcblock-price { display: block !important;float: right;width: 100%;padding: 3px 5px;font-weight: 700; font-size: 17px;}
}
@media(max-width: 991px) {
}
@media (max-width:768px) {
div#atcblock.sticky {top: 0px;}
}  
@media (max-width:640px) {
}
@media (max-width:479px) {
}
@media(max-width: 991px) {
}
@media(max-width: 767px) {
}
@media(max-width: 460px) {
}

/*---------------------------------------------------------
PRODUCT ITEM
-----------------------------------------------------------*/
.product-items .product-item .reviews { min-height: 21px; position: absolute;margin: -22px auto 0px;width: 110px; left: 0;right: 0;background-color: #fff; border-radius: 10px 10px 0 0;display: none;}
.product-items .product-item .reviews span.reviews-count {line-height: 1;display:none;margin-left: 3px;color: #d7e0de;text-align:left;}
.product-items .product-item .reviews-stars {margin-right: 0;line-height: 23px;display: none;}
.product-items .product-item .reviews-stars:before {font-family: "fontello";content: "\e803  \e803  \e803  \e803  \e803";color: rgba(0,0,0,0.3);}
.product-items .product-item .reviews-stars::after {font-family: "fontello";content: "\e803  \e803  \e803  \e803  \e803";}
.product-items .product-item .rating:hover .rating-star:hover,
.product-items .product-item .rating:hover .rating-star:hover ~ .rating-star,
.product-items .product-item .rating-input:checked ~ .rating-star,
.product-items .product-item .reviews-stars {color: #f9ad35;}
.product-items {overflow: hidden;margin:0;}
/* --- UPDATED: PADDING FIX TO PREVENT BUTTON CLIPPING --- */
.product-items .product-item {padding: 0 5px 5px 5px;text-align: center;margin-bottom: 10px;position: relative;overflow: hidden;}
.product-items .product-item .product-info {}
.product-items .product-item .name {margin-bottom: 4px;line-height: 1.25;text-align:left;position:relative;z-index:11;float: left;width: 100%;height: auto;}
.product-items .product-item .name a {color: #111;font-size: 13px;text-align: center;float: left;width: 100%;padding: 5px;font-weight: 500;font-family:'Barlow', sans-serif;}
.product-items .product-item .description {color: #d7e0de;line-height: 1.25;text-align:left;}
.product-items .product-item del.regular-price {text-decoration: line-through;}
.product-items .product-item .sale-price {color: #df4748;}
.product-items .product-item del.original-price {font-weight: 400;}
.product-items .product-item span.freeshipping {color: #00a888;}
.product-items .product-item .status span:before {content: "";}

/* --- UPDATED: MODERN AVAILABILITY BADGE --- */
.product-items .product-item .status {
    width: 100%;
    float: none;
    text-align: center;
    margin: 8px 0; /* Breathing room */
    padding: 0;
    height: auto;
    font-size: 13px;
    line-height: 1.25;
    display: block;
}

.product-items .product-item .status span.availability {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px; /* Pill shape */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #f4f4f4; /* Default Gray */
    color: #444;
    border: 1px solid #e0e0e0;
}
/* Note: Use JS for Green/Red color coding based on text content */

/* --- UPDATED: CLEANER PRODUCT SKU --- */
.product-items .product-item .status span, .product-item .regular-price {color: #000;font-weight: 600;line-height: 1.25;}
.product-items .product-item .price {font-size: 13px;font-weight: bold;float: left; text-align: center;width: 100%;margin: 0;line-height: 1.25; height: auto;  padding: 0 5px 5px 0;}
.product-items .product-item .img {min-height: 250px;position: relative;border: 1px solid #ececec;background-color: #fff;margin: 0;}
.product-items .product-item .img a {display: block;}
/* gen-2 .img img base rule: position/sizing now handled by FT8 block; kept only the opacity:1 default */
.product-items .product-item .img img {opacity: 1;}
/* --- Native second-image hover swap (server-rendered [image2] token in product_items.html). Piggybacks on the .img img absolute-center + transition rule directly above. --- */
/* gen-2 hover rules removed   superseded by FT8 slide-up reveal system */

.product-items .product-item .on-sale-badge {line-height: 15px;padding: 8px 20px 8px 10px;width: auto;text-align: center;top: 14px;right: -5px;background: #df4748;color: #fff;transform: rotate(90deg);-webkit-transform: rotate(90deg);font-size: 15px;font-style: italic;clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);-webkit-clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);}
.product-items .product-item .action .btn {border-radius: 3px;width: 100%;font-size: 14px;padding: 5px;margin: 5px 0 0; background-color: #000; color: #fff;}
.product-items .product-item:hover .action .btn {color: #000;background-color: #fff;border-color: #000;opacity: 0.8;width: 100%;}
.products-section h2:after {}
.product-items .product-item .description {display:none;}
.product-items .product-item .img .quickview {position: absolute;left: 0;right: 0;top: auto;bottom: -40px;margin: auto;width: 100%;height: 36px;opacity: 0;color: #333;background-color: #fff;border: none;-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.75);-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.75);box-shadow: 0 0 10px 0 rgba(0,0,0,.75);transition: all 0.3s linear 0s;-webkit-transition: all 0.3s linear 0s;}
.product-items .product-item:hover .img .quickview {opacity: 1;bottom: 0;z-index: 1;}
.product-items .product-item .action {min-height: 42px;}
.product-items .product-item .status span:before {content: "";}
.product-items .product-item .status span span.oosm {position: absolute;top: 0;bottom: auto;margin: auto;height: 100%;width: 100%;text-align: center;background-color: rgba(255,255,255,0.75);left: 0;right: 0;line-height: 42px;text-transform: uppercase;color: #777;font-weight: 600;font-size: 20px;border: 0 solid #fff;z-index: 10;padding: 25% 0;}
.product-items .product-item .img .ajaxcart-added.icon-ok {position: absolute;transition: 0.3s linear 0s;top: -113px;left: -138px;opacity:0;}
.product-items .product-item .img .ajaxcart-added.icon-ok.incart {position: absolute;z-index: 10;left: -38px;background-color: #079b49;width: 140px;text-align: center;border: 1px solid #fff;top: 19px;border-radius: 0;font-size: 11px;font-weight: 600;line-height: 28px;height: 30px;transform: rotate(-45deg);display: block !important;opacity: 1;color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);}

/* --- UPDATED: CENTERED & SUBTLE SKU --- */
.prod-id {
    width: 100%;
    text-align: center;
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
    color: #888;
}
.prod-id span {
    display: none; /* Hides "Product Number" label for cleaner look */
}

#modTopSellers.products-section .prod-id {display:none;}


@media(max-width:1200px) {
.product-items .product-item .name a {font-size: 13px;padding: 3px 5px;}
}

@media(max-width: 567px) {
.product-items .product-item {float: left !important;width: 50% !important;padding: 2px !important;height:auto !important;}
.product-items .product-item .description {font-size: 12px;}
.product-items .product-item .action .btn {min-width: 125px;}
.product-items .product-item .img {min-height: 170px;}
.product-items .product-item .name a {font-size: 12px;}
}
@media(max-width: 460px) {
.product-items .product-item .status {width: 100%;text-align: center;padding: 0;}
.product-items .product-item .price {text-align: center;width: 100%; padding: 0;}
}
hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid #353131;
}
td,th {
    padding: 5px;
}
/*---------------------------------------------------------
QUICKVIEW
-----------------------------------------------------------*/
#quickView .product-item .name {padding: 0;text-align: left;}

/*---------------------------------------------------------
BROWSING HISTORY
-----------------------------------------------------------*/
.product-items .product-item img { position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto; max-height: 100%;width: auto;padding: 5px;}
.product-content {position: relative;}
.product-item .name {margin-bottom: 10px;line-height: 1.25;height: auto;text-align: center;overflow: visible;}

/*---------------------------------------------------------
SCROLLTOTOP
-----------------------------------------------------------*/
.scrollToTop {position: fixed;bottom: 60px;right: 5px;display: none;z-index: 999;text-align: center;color: #000;background-color: #f8a81a;border-radius: 50%;width: 60px;font-size: 40px;height: 60px;box-shadow: 0 0 0 4px rgb(255, 255, 255) inset;border: 2px solid #000;line-height: 50px;}
.scrollToTop:hover{text-decoration:none;color: #000;background-color: rgba(255, 255, 255, .8);-webkit-transition: opacity 1000ms ease-in-out;-moz-transition: opacity 1000ms ease-in-out;-o-transition: opacity 1000ms ease-in-out;-ms-transition: opacity 1000ms ease-in-out;transition: opacity 1000ms ease-in-out;}
.scrollToTop span {display: none;}
iframe {display: block;}


@media(min-width: 768px) {
.revealOnScroll {opacity:1;}
}
@media(max-width: 991px) {
}
@media(max-width: 768px) {
}
@media(max-width: 767px) {
}
@media(max-width: 567px) {
.product-items.product-items-1 .product-item,
.product-items.product-items-2 .product-item,
.product-items.product-items-3 .product-item,
.product-items.product-items-4 .product-item,
.product-items.product-items-5 .product-item,
.product-items.product-items-6 .product-item {max-width: 270px;}
}

/*---------------------------------------------------------
MODAL
-----------------------------------------------------------*/
.modal-dialog {top: 15%;}
.modal-backdrop.fade.in {z-index: 100;}
#loginModal .loginField.bt-flabels__wrapper {margin: 0 0 10px;}
.modal-content {border: 0px solid #ccc;}
button.close {float: right;font-size: 30px;opacity: 0.5;filter: alpha(opacity=50);}

#searchModal .modal-header {position: relative;padding: 7px 15px;border-bottom: 1px solid #e5e5e5;background: #000;}
#searchModal .modal-header .modal-title {color: #fff;}
#searchModal .modal-header button.close {margin-top: 0; height: 40px; line-height: 40px;width: 40px; text-align: center; color: #fff; position: absolute;  top: 0; right: 0;font-size: 14px;}
#searchModal .search-form .search-submit {position: absolute;top: 0;right: 0;width: 50px;height: 100%;text-align: center;font-size: 15px;padding: 0;line-height: 40px;}

/*---------------------------------------------------------
HEADER
-----------------------------------------------------------*/
.header-links {position: absolute;right: 0;top: 0; height: 30px;bottom: 0;margin: auto;z-index: 11;}
.header-links > ul {list-style: none;margin: 0;padding: 0;}
.header-links > ul > li {position: relative;float: left;padding: 0 10px;}
.header-links img {}
.loggedout-dot {background: #ff1100;height: 10px;width: 10px;position: absolute;bottom: 0;right: 2px;border-radius: 10px;margin: auto;top: 0;}
.loggedin-dot {background: #4db848;height: 10px;width: 10px;position: absolute;bottom: 0;right: 2px;border-radius: 10px;margin: auto;top: 0;}

@media(max-width: 767px) {
.header-links {height: 40px;}
.header-links > ul > li {padding: 0 8px;}
.header-links > ul > li a {height: 34px;width: 24px;display: inline-block;line-height: 34px;}
}

/*-------------------------------------------------
DAILY DEAL
---------------------------------------------------*/
.tcd-dailydeal {float: left;height: 480px;overflow: hidden;padding: 15px 0 10px;margin: 25px 0;position: relative;width: 100%;background: #fff;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}
.tcd-dailydeal-inner {left: 0;margin: 0 auto;max-width: 1200px;padding: 10px;position: absolute;right: 0;text-align: center;width: 100%;z-index: 2;border: 0px solid #9c8b77;}
.tcd-dailydeal-inner iframe { height: 430px;}

@media screen and (max-width:1024px) {
.tcd-dailydeal-inner iframe {height: 370px;}
.tcd-dailydeal {height: 420px;}
}
@media screen and (max-width: 767px) {
.tcd-dailydeal-inner iframe { height: 360px !important;}
}
@media screen and (max-width: 480px) {
.tcd-dailydeal {height: 700px; padding: 0;}
.tcd-dailydeal-inner iframe { height:660px !important;}
}

/*---------------------------------------------------------
HOME BLOG
-----------------------------------------------------------*/
.tcdblog-wrap {margin: 2% 0;}
.tcdblog-wrap .header-specials.header-blog {display: block;margin: 10px 0;}
.tcdblog-wrap .header-blog-sm {text-align: center;margin: 15px auto 5px;}
#tcdblog .tcd-single-blog {position: relative;}
#tcdblog .blog-image {position: relative;padding: 5px 5px 30px 5px;background: #fff;border: 1px solid #ccc;}
#tcdblog .blog-date {position: absolute;bottom: 0;padding: 0 5px;left: 5px;line-height: 30px;border-right: 1px solid #ccc;}
#tcdblog .blog-date a {color: #555;font-size: 13px;letter-spacing: 1px;}
#tcdblog .blog-cat {position: absolute;right: 5px;line-height: 30px;text-transform: uppercase;font-size: 11px;color: #333;padding: 0 5px;border-left: 1px solid #ccc;}
#tcdblog .title-desc a h4 {font-size: 16px;line-height: 1.3;color: #333;text-transform: uppercase;}
#tcdblog .comments-number {float: right;background: #202020;padding: 0px 5px;border-radius: 2px;}
#tcdblog .comments-number .fa.fa-comment {color: #121212;padding: 0 3px 0 0;}
#tcdblog .comments-number a {color: #fff;font-size: 12px;}
#tcdblog .author-name {font-size: 12px;font-weight: 600;}
#tcdblog .author-name a {margin: 0 0 0 1px;}
#tcdblog .blog-content p {max-height: 85px;overflow: hidden;}

/*---------------------------------------------------------
BLOG
-----------------------------------------------------------*/
.blogPost.blogarchive {border: 1px solid #ececec;float: left;width: 49%;padding: 10px;margin: 0.5%;background: #f4f4f4;border-radius: 15px;}
.blogPost.blogarchive.normal #postContent.post .content-section {max-height: 70px;overflow: hidden !important;}
#blog .post-content h2 {margin: 0;min-height: 50px;}
#blog .post-content h2 a {color: #000;font-size: 20px;font-weight: 600;float: left;width: 100%;}
#blog .post-readmore .btn.btn-default {background: #202020;color: #fff;border-radius: 2px;padding: 5px;}
#blog .post-comment-num a {color: #e74c3c;}

#blog .content-area .col-lg-12 .col-lg-9.col-sm-9 {width: 100%;}
#blog .content-area .col-lg-12 .col-sm-3 {display: none;}

@media (max-width:767px) {
#blog .content-area .row .col-lg-12 .row .col-sm-3 {display: inline-block;width: 100%;}
}
@media (max-width:567px) {
.blogPost.blogarchive {width: 100%;}
}

/*---------------------------------------------------------
EXTRA PAGE
-----------------------------------------------------------*/
.feed-page #extrapage .container {max-width: 1600px;}
.feed-page .page_header .container {max-width: 1600px;}

/*---------------------------------------------------------
INFO BLOCK
-----------------------------------------------------------*/
.info-wrap.info-footer {float: left;width: 100%;margin: 0;}
.info-wrap.info-footer .info-inner { float: left;width: 100%;background-color: #000; padding: 10px 0;  border: 1px solid #ccc;}
.info-wrap.info-footer .info-block {float: left;text-align: center;width: 25%;border-right: 1px solid #000;}
.info-wrap.info-footer .info-block:nth-last-of-type(1) {border: none;}
.info-wrap.info-footer .info-block-title {font-weight: 600;font-size: 14px;line-height: 14px;color: #fff;text-transform: uppercase;}
.info-wrap.info-footer .info-block-text {color: #eee;font-size: 12px;}
.info-wrap.info-footer .info-block-img {width: 100%;display: inline-block;height: 32px;top: 0;position: relative;}
.info-wrap.info-footer .info-block-img i {font-size: 23px;color:#f8a81a;position: absolute;left: 0;right: 0;top: 0;bottom: auto;height: 25px;}
.info-wrap.info-footer .info-block-detail {display: inline-block;}

@media(max-width: 991px) {
.info-wrap.info-footer .info-block-title {font-size: 17px;}
}
@media(max-width: 840px) {
.info-wrap.info-footer .info-inner {padding: 0;}
.info-wrap.info-footer .info-block {width: 50%;border: 1px solid #fff;padding: 5px 0;}
.info-wrap.info-footer .info-block:nth-last-of-type(1) {border: 1px solid #fff;}
}
@media (max-width:459px) {

.info-wrap.info-footer .info-block-title {font-size: 15px;font-size: 13px;}
}

/*---------------------------------------------------------
QUICK CART
-----------------------------------------------------------*/
#viewCartQuick .quickCartCheckout>h1 { margin: 0 0 10px; font-size: 18px;text-align: center;background-color: #eee; font-weight: 600;line-height: 1.25;border: 1px solid #ccc;display: none;}
#viewCartQuick {padding: 20px 10px;float: left; width: 100%;}
#viewCartQuick .page_header { margin: 0;}
#viewCartQuick h4 {font-size: 15px;font-weight: 700;border-bottom: 0px solid #ececec;}
section.qcart-youmayaslolike .price, section.qcart-youmayaslolike .status, section.qcart-youmayaslolike .reviews {  display: none;}
#viewCartQuick .quickCartItems span.item-fullname {display: block;font-size: 12px;line-height: 1.15;}
#viewCartQuick span.item-thumb {padding: 4px;}
#viewCartQuick span.item-name-right {padding: 0 !important; position: relative;left: 5px;width: 165px;float: left;}
#viewCartQuick .item-name-right .itemoptions {font-size: 10px;width: 180px;display: inline-block;}
#viewCartQuick .item-name-right .itemoptions b {font-size: 10px;}

/*---------------------------------------------------------
MAILING LIST
-----------------------------------------------------------*/
.ftr-logo-block {float: left;width: 100%; text-align: center;padding: 10px;position: relative;}
.ftr-logo-block img {position: relative;z-index: 2;}

/* =========================================
   NEWSLETTER SECTION - JOIN THE RIDE
   ========================================= */
.tcd-mailing-wrap {float: left;width: 100%;line-height: 1;padding: 0;margin: 0;position: relative;}
.tcd-mailing {
    background: url('/assets/images/nlbg3.webp') center/cover;
    padding: 60px 20px;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    width: 100%;
}
.tcd-mailing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}
.tcd-mailing > * {
    position: relative;
    z-index: 2;
}
.tcd-mailing-bg {display: none;}
.tcd-mailing-title {
    color: #fff;
    font-size: 36px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-align: center;
    width: 100%;
}
.tcd-mailing-subtext {
    color: #fff;
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center;
}
.mailist-box {
    width: 100%;
    max-width: 500px;
    padding: 0;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.mailinglist-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.mailinglist-input.form-control {
    width: 100%;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 14px 16px;
    height: auto;
    font-size: 14px;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0;
}
.mailinglist-input.form-control::placeholder {color: rgba(255,255,255,0.7);}
.mailinglist-submit,
.mailinglist-submit:hover {
    width: 100%;
    background: #f8a81a;
    color: #000;
    padding: 14px 16px;
    height: auto;
    line-height: normal;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0;
    position: static;
    border: none;
}
.mailinglist-submit:hover {background: #e69a00;}
.maillist-options {display: none;}
.mailinglist-response {color: #fff;background: transparent;text-align: center;margin: 10px 0;padding: 10px;}
.mailinglist-error span {color: #ff6b6b;}
.mailinglist-subscribed span,
.mailinglist-unsubscribed span {color: #69db7c;}
.maillist-options {display: none;margin: 5px 0 0;}
.subscribe {float: none;display: inline-block;margin-right: 20px;line-height: 13px;}
.subscribe input[type="radio"] {margin: 0;vertical-align: middle;}
.subscribe label {margin: 0;font-size: 14px;line-height: 13px;font-weight: 300;margin-left: 3px;color: #aaa;cursor: pointer;}

@media(max-width: 820px) {
.mailist-box h5 {padding: 5px;font-size: 13px;}
.tcd-mailing-text {font-size: 13px;}
.mailinglist-input.form-control {font-size: 15px;}
}

/*---------------------------------------------------------
FOOTER
-----------------------------------------------------------*/

.tcd-footer { float: left; width: 100%; padding: 20px 0 0;color: #fff; background: #000;}
.tcd-footer .container {margin: 0 auto;max-width: 1000px;width:100%;}
.tcd-ftr-links {float: left;width: 25%;}
.tcd-ftr-title {font-weight: 600;font-size: 18px;margin: 0 0 5px;text-transform: uppercase;color: #fff;}
.tcd-ftr-links ul { padding: 0; list-style: none;margin: 0;}
.tcd-ftr-links ul li i {margin: 0;width: 20px;float: left; text-align: center;position: relative;}
.tcd-ftr-links ul li a {font-size: 12px;padding: 0 2px;color: #ccc;}
.tcd-ftr-links ul li a:hover {color: #f8a81a;}
.tcd-footer a {color: #ccc;}
.tcd-footer a:hover {color: #f8a81a;}

.social-wrap {float: left;width: 100%;padding: 0;position: relative;}
.social_icons a {font-size: 10px; font-weight: 600; color: #fff;letter-spacing: 1px; line-height: 1.25;display: inline-block !important;position: relative; top: 0;}
.social_icons ul li a i { font-size: 15px; margin: 0 5px 0 0;position: relative; top: -1px;}

.copyright {position:relative;margin-top: 25px;border-top: 2px solid #222;padding-top: 0px;padding-bottom: 0px;text-align: center;color: #fff;font-size: 13px;font-weight: 600;background: #000;}
.copyright .row {display:block;}
.copyright_txt {float: left;width: 50%;line-height: 1.5;padding: 20px 0 15px;}
.copyright_cc {float: left;text-align: center;width: 50%;padding: 20px 0 15px;}
.copyright_txt a {display: block;color: #f8a81a;}

ul.payment-icons {text-align: center;color: #f8a81a;margin: 0;}
ul.payment-icons li {font-size: 34px;line-height: 36px;vertical-align: middle;}

@media(max-width: 991px) {
.tcd-ftr-title {border-bottom: 1px solid #000;}
.tcd-ftr-links {float: left;width: 100%;margin: 0 0 15px;}
.tcd-ftr-links ul li { float: left; width: 33.33%;}
}
@media(max-width: 767px) {
.copyright_txt {width: 100%;border-right: 0px solid rgba(255,255,255,0.5);}
.copyright_cc {width: 100%;padding: 0 0 15px;}
}
@media(max-width: 680px) {
.tcd-ftr-links ul li {width: 50%;padding: 5px 0;}
}
@media(max-width: 460px) {
.tcd-ftr-links:nth-of-type(1) ul li {width: 100%;}
}


/*---------------------------------------------------------
Contact
---------------------------------------------------------
.store-name i {display: none;}
.store_data .store-address, .store_data .store-location, .store_data .store-phone {display: none;}--*/

/*---------------------------------------------------------
CHECKOUT
-----------------------------------------------------------*/
.checkout-1 {padding: 0;font-size:12px;}
.checkout-1 .page-content {background: rgba(255,255,255,0.85);}
.checkout-1 #checkout-left {padding-bottom: 80px;background: #fff;}
.checkout-1 a {color:#111 !important}
.checkout-1 a:hover {color: #333 !important;}
.checkout-1 #checkoutSinglePage .container {max-width: 1400px;padding: 0;}
.checkout-1 .checkout-section {margin: 8px 0 0;}
.checkout-1 div#checkout-right {background: #eee;border: 0px solid #ccc;height: 100% !important;position:fixed;top:0;right:0;font-size: 12px;}
.checkout-1 .checkbox-format.checkbox-format-checkout {background-color: #fff;padding-left: 30px;padding-right: 10px;padding-top: 2px;padding-bottom: 2px;position: relative;cursor: pointer;margin-right: 3px;}
.checkout-1 .createNewAccount .col-sm-6 {padding: 0;}
.checkout-1 .account_login .btn-link {width: auto;text-transform: uppercase;padding: 0;font-weight: 500;font-size: 12px;margin: -2px 0 0;letter-spacing: -0.5px;text-decoration: underline;}
.checkout-1 #checkout-logo {border-bottom: 0px solid #ccc;height: auto;text-align: center;background: #fff;}
.checkout-1 #checkout-logo .logo {margin: 10px 0;height: auto;padding: 0;float: left;width: 100%;max-width: 100%;text-align: center;border: none;background: #eee;position: relative;top: 0;}
.checkout-1 #checkout-logo .logo img {position: relative;left: 0;right: 0;margin: 0 auto;width: auto;max-height: 100%;padding: 5px;top: 0;}
.checkout-1 .row {margin-left: 0;margin-right: 0;}
.checkout-1 .sameasbilling_radio {line-height: 30px;}
.checkout-1 .sameasbilling_radio input[type="radio"] {margin: -4px 0 0;}
.checkout-1 .required-indicator {color: red;display: inline-block;font-size: 15px;line-height: 13px;position: absolute;top: 0;bottom: 0;right: auto;margin: auto;left: 8px;height: 34px;border-right: 0px solid  #ccc;padding: 13px 2px 0 0;}
.checkout-1 .form-control {padding: 6px 0 6px 20px;height: 40px;border-radius: 0;border: 1px solid #bbb;box-shadow: none;}
.checkout-1 .createNewAccount .chkField.col-xs-12 {margin: 0 0 5px;}
.checkout-1 .checkbox-format.checkbox-format-checkout label {font-weight: 600;}
.checkout-1 .account_login.account_login1.checkout-section {padding: 0 0 0 30px;margin: 0;font-weight: 600;}
.checkout-1 .has-labelholder.floating .form-control {padding-left: 16px !important;}
.checkout-1 .chkField {padding: 0 5px 0 0;}
.checkout-1 .chkField, .chk-questions-section, .insurance-section {margin-bottom: 5px;}
.checkout-1 .ccgField:nth-of-type(3) {float: left;width: 65%;}
.checkout-1 .cc-details .ccgField .col-xs-6 {padding: 0 5px 0 0;width: 50%;max-width:100px;}
.checkout-1 .ccgField:nth-of-type(4) {float: right;text-align: left;width: 35%;max-width:100px;}
.checkout-1 .ccgField .form-control {padding: 6px 0 6px 8px;}
.checkout-1 #checkoutStep1 .header, #checkoutStep2 .header, #checkoutStep3 .header, .checkout-page .header, #checkoutStep2Multiple .header {margin-bottom: 0px;}
.checkout-1 div[name="divPaymentOption"] img {height: auto;max-width: 100%;}
.checkout-1 #divPaymentMethods > div {background: #eee;border: 1px solid #ccc;margin-bottom: 10px;}
.checkout-1 .has-labelholder::before {left: 17px !important;}
.checkout-1 .has-labelholder.floating::before {opacity: 1;}
.checkout-1 .page_heading {margin: 0 0 5px;font-weight: 600;text-transform: uppercase;padding: 6px 0 6px 8px;border-bottom: 2px solid #121212;position: relative;color: #fff !important;font-size: 15px;background-color: #121212;box-shadow: 0px -1px 1px 0 #fff inset;-webkit-box-shadow: 0px -1px 1px 0 #fff inset;border-radius: 3px 3px 0 0;}
.checkout-1 .page_heading::after {display: none;}
div#chkShoppingCart .cart-items {height: auto;line-height: normal;font-size: inherit;border-bottom: 1px dashed #ccc;}
.checkout-1 .icon-btn.icon-btn-refresh {color: #fff !important;padding: 0 10px 0 5px;font-size: 12px;border-left: 1px solid #fff;line-height: 18px;position: relative;}
.checkout-1 #mobile-menu {display: none;}
.checkout-1 .applyCoupon {padding-top: 10px; padding-bottom: 10px;border-bottom: 1px solid #ececec;margin-bottom: 0px;}
.checkout-1 .coupon-field .btn.btn-default {padding: 0;}
.checkout-1 .cart-tally { padding-bottom: 10px;}
.checkout-1 .cart-grandtotal { padding: 10px 0;}
.checkout-1 #spanCheckout .pull-right {float: right !important;width: 60%;}
.checkout-1 #spanCheckout .btn-primary {color: #ffffff;background-color: #018952;border-color: #333;width: 100%;font-size: 25px;font-weight: 800;}
.chkShoppingCart .product-image {position: relative;background: #fff;}
.chkShoppingCart .product-image img {width: auto;max-width: 100%;max-height: 80px;display: block;margin: 0 auto;}
.chkShoppingCart .product-image span {background: #018952;line-height: 20px;}
.checkout-1 .coupon-field input {font-size: 12px;}
.checkout-1 .site-footer {display: none;}
.checkout-1 .row-full.cart-toggle {width: 100%;left: 0;position: relative;right: 0;top: 0;background: transparent;border-bottom: 1px solid #ccc;margin: 0 0 5px;border-top: none;}
.checkout-1 .module-expand i {font-size: 21px;float: left;margin-right: 8px;margin-left: -8px;}
.checkout-1 .module-expand::before {line-height: 25px;font-size: 13px;}
.checkout-1 .secure-holder {padding: 10px;}
.checkout-1 .secure-holder-inner {background: #fff;height: 90px;border: 1px solid #ccc;text-align: center;width: 100%;}
.checkout-1 .account-block {display: inline-block;}
.checkout-1 .category-footer {background: #ffffff none repeat scroll 0 0;border: 2px solid #111;border-radius: 3px;margin: 5px 0 0;padding: 10px;text-align: center;}
.checkout-1 .category-footer .register-note {color: #111;font-size: 14px;font-weight: 600;}
.checkout-1 .tyinvoice-total {font-size: 35px;font-weight: 600;margin: 0;}
.checkout-1 .chkComments .form-control {height: auto;}
.checkout-1 .category-footer {display: none;}

 @media (max-width:991px) {
.checkout-1 div#checkout-right {padding: 0;position:relative;}
.checkout-1 .row.hidden-xs.order-summary-header {display: block !important;padding: 5px 0;}
.checkout-1 #checkout-logo {padding: 0;}
}
 @media (max-width:640px) {
.checkout-1 #spanCheckout .pull-right {width: 100%;}
}

/*---------------------------------------------------------
ADA COMPLIANCE
-----------------------------------------------------------*/
.ada-label {position: absolute;}

/*---------------------------------------------------------
THEME RESPONSIVE
-----------------------------------------------------------*/

@media(max-width: 991px) {
.head-mobile-nav {display: block;}
#mobile-menu-trigger {position: absolute;left: 10px;top: 29px;z-index: 100;color:#000;}
}

@media(max-width: 767px) {
.flex-direction-nav a:before {font-size: 18px;}
.flex-direction-nav a {width: 24px;height: 24px;line-height: 24px;margin: -12px 0 0;}
#mobile-menu-trigger {top: 16px;}
}

@media(max-width: 680px) {
}

/*---------------------------------------------------------
MICHELIN FITMENT GUIDE PAGE
-----------------------------------------------------------*/
.mc-button {
        background-color: #f8a81a;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
        display: block; /* Initially block-level for default full-width display */
        max-width: 500px; /* Width according to content size */
        text-align: center;
        margin: 10px; /* Vertical spacing */
    }

    .mc-button a {
        color: white;
        text-decoration: none;
        display: block;
    }

    .mc-button:hover {
        background-color: #555;
    }

    .document-container, .document-container2 {
        margin: auto;
        padding: 20px;
        border: 1px solid #ddd;
        background-color: #fff;
        text-align: center;
    }

    .responsive-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .responsive-td {
        padding: 10px;
        border: 1px solid #000;
        vertical-align: middle;
        text-align: left;
    }

    @media (max-width: 768px) {
        .responsive-td {
            display: flex;
            justify-content: space-between; /* Positions the title to the left and button to the right */
            align-items: center; /* Vertically centers content within the cell */
            flex-direction: row; /* Ensures the title and button are in a row */
            padding: 10px 5px; /* Adjusts padding for mobile */
        }
        .mc-button {
            margin: 5px; /* Reduced margin for mobile */
        }
    }

.dropdown-image {
    width: 100px;
    height: 100px;
}
/* ========================================================================== */
/* KFI BLOG  Farm & Trail (namespace: .kfi-blog)                             */
/* Paste this at the very bottom of your global stylesheet                    */
/* ========================================================================== */

/* Layout & typography */
.kfi-blog{max-width:980px;margin:0 auto;padding:1.25rem;color:#222;line-height:1.6}
.kfi-blog p{margin:0 0 1rem}
.kfi-blog ul{list-style:disc;padding-left:1.25rem;margin:0 0 1rem}
.kfi-blog li+li{margin-top:.25rem}
.kfi-blog h1{font-size:2rem;line-height:1.2;margin:.25rem 0 .75rem;letter-spacing:.2px}
.kfi-blog h2{font-size:1.375rem;margin:1.5rem 0 .5rem}
.kfi-blog h3{font-size:1.125rem;margin:1rem 0 .5rem;color:#333}

/* Callout note */
.kfi-blog .kfi-note{background:#fcfcfc;border:1px solid #e5e5e5;border-left:4px solid #f8a81a;padding:.75rem 1rem;border-radius:6px}

/* Links */
.kfi-blog a{text-decoration:underline;text-underline-offset:2px}
.kfi-blog a:hover{text-decoration:none}

/* ---------- Product grid polish (inside blog only) ---------- */
.kfi-blog .product-items{gap:16px}

/* Remove equalized fixed heights and prevent clipping */
.kfi-blog .product-item{
  height:auto !important;
  overflow:visible !important;
  display:flex;
  flex-direction:column;
  border:1px solid #eee;
  border-radius:8px;
  padding:10px;
  background:#fff;
  transition:box-shadow .15s ease, transform .15s ease;
}
.kfi-blog .product-item:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px)}

/* Image area */
.kfi-blog .product-item .img{display:block;text-align:center}
.kfi-blog .product-item .img img{
  width:100%;
  height:auto;
  aspect-ratio:auto !important; /* undo any previous rule */
  object-fit:contain;
}

/* Titles */
.kfi-blog .product-item .name{height:auto !important;min-height:0 !important}
.kfi-blog .product-item .name a{
  display:block;font-weight:600;line-height:1.35;margin:.25rem 0 .15rem;text-decoration:none
}
.kfi-blog .product-item .name a:hover{text-decoration:underline}

/* Price + CTA */
.kfi-blog .product-item .price{margin:.15rem 0 .35rem;font-size:1.05rem;font-weight:600}
.kfi-blog .product-item .action{margin-top:auto} /* push button to bottom */

/* CTA button */
.kfi-blog .product-item .add-to-cart.btn{
  display:block;width:100%;box-sizing:border-box;
  background:#f8a81a;color:#fff;border:none;border-radius:6px;
  padding:.6rem .9rem;text-align:center
}
.kfi-blog .product-item .add-to-cart.btn:hover{filter:brightness(.95)}

/* Hide "added" chip unless needed */
.kfi-blog .product-item .ajaxcart-added{display:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .kfi-blog{padding:1rem}
}
@media (max-width:640px){
  .kfi-blog h1{font-size:1.4rem}
  .kfi-blog h2{font-size:1.15rem}
  .kfi-blog .product-item{padding:10px}
}
/* ========================================================================== */
/* MODERN CARD CSS (Add to default_new.css)                                   */
/* ========================================================================== */
/* 1. CARD CONTAINER */
.product-items .product-item {
    border: 1px solid #e5e5e5 !important;
    background: #fff !important;
    padding: 20px !important;
    border-radius: 12px;
    margin-bottom: 30px !important;
    display: flex;
    flex-direction: column;
    width: 100%; 
    height: 100%; 
    box-sizing: border-box !important;
    overflow: hidden !important; 
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.product-items .product-item:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    transform: translateY(-5px);
    border-color: transparent !important;
    z-index: 5;
}

/* 2. IMAGE STAGE & FLIP */
.product-items .product-item .img {
    order: 1; 
    position: relative;
    background-color: #f9f9f9;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border: none !important;
    width: 100%;
}
.product-items .product-item .img a {
    display: flex; width: 100%; height: 100%;
    align-items: center; justify-content: center;
}
.product-items .product-item .img img {
    max-width: 80% !important;
    max-height: 80% !important;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: opacity 0.3s ease, transform 0.5s ease;
}
/* gen-3 hover-img system removed   superseded by FT8 slide-up reveal */

/* 3. TYPOGRAPHY */
.brand-label { 
    order: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
    color: #999; font-weight: 700; text-align: center; margin-bottom: 5px; min-height: 15px;
}
.product-items .product-item .name {
    order: 2; margin-bottom: 8px; flex-grow: 1;
    display: flex; align-items: flex-start; justify-content: center; width: 100%;
}
.product-items .product-item .name a {
    font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 600;
    color: #222; text-decoration: none; display: block; text-align: center; line-height: 1.4;
}

/* 4. REVIEWS */
.product-items .product-item .reviews {
    order: 3; display: flex !important; justify-content: center; align-items: center;
    width: 100% !important; margin: 0 0 10px 0 !important;
    background: transparent !important; position: static !important; min-height: 18px;
}
.product-items .product-item .reviews-stars {
    display: inline-block !important; color: #f8a81a !important;
    font-size: 13px; letter-spacing: 2px; line-height: 1;
}
.product-items .product-item .reviews-stars:before {
    color: #f8a81a !important; opacity: 1 !important;
    font-family: "fontello"; 
}
.reviews-count { display: none; }

/* 5. PRICE */
.product-items .product-item .price {
    order: 4; text-align: center; padding: 0;
    font-weight: 700; font-size: 17px; color: #111; margin-top: auto;
}
.sale-price { color: #d92027; }
del.regular-price { font-size: 13px; color: #aaa; font-weight: 400; margin-right: 5px; }

/* 6. BUTTON OVER IMAGE */
.product-items .product-item .action {
    position: absolute; bottom: -50px; left: 0; width: 100%; padding: 10px;
    z-index: 10; transition: bottom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: rgba(255,255,255,0.95);
}
.product-items .product-item:hover .action { bottom: 0; }
.modern-btn {
    display: block !important; width: 100%; background-color: #111 !important;
    color: #fff !important; text-transform: uppercase; font-weight: 700;
    font-size: 13px; padding: 10px 0 !important; text-align: center;
    border-radius: 6px; text-decoration: none !important; transition: background 0.2s;
}
.modern-btn:hover { background-color: #f8a81a !important; color: #000 !important; }

/* 7. INJECTED ELEMENTS (Badges/Status) */
.custom-stock {
    order: 5; text-align: center; font-size: 11px; font-weight: 700;
    margin-top: 8px; width: 100%; letter-spacing: 0.5px; text-transform: uppercase;
}
.custom-stock { color: #27ae60; } 
.custom-stock.stock-warn { color: #e67e22 !important; } 
.custom-stock.stock-bad { color: #c0392b !important; } 
.custom-stock::before {
    content: ''; display: inline-block; width: 6px; height: 6px;
    background-color: currentColor; border-radius: 50%;
    margin-right: 5px; vertical-align: middle; margin-top: -2px;
}
.discount-badge {
    position: absolute; top: 12px; right: 12px; background: #d92027;
    color: #fff; font-size: 11px; font-weight: 800; padding: 5px 10px;
    border-radius: 20px; z-index: 5; box-shadow: 0 4px 6px rgba(217, 32, 39, 0.3);
}

/* 8. GLASS QUICK VIEW (SVG STYLES) */
.product-item button.quickview { display: none !important; } 

.custom-qv-btn {
    position: absolute; top: 10px; left: 10px; width: 35px; height: 35px;
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.8); transition: all 0.3s ease;
    z-index: 20; box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer;
}
.custom-qv-btn svg { color: #333; }
.product-items .product-item:hover .custom-qv-btn { opacity: 1; transform: scale(1); }
.custom-qv-btn:hover { background: #fff; }
.custom-qv-btn:hover svg { color: #f8a81a; }

/* 9. HIDE CLUTTER */
.prod-id, .status, .freeshipping, .ajaxcart-added, .product-item .quickview, .on-sale-badge { 
    display: none !important; 
}
/* =========================================================
   HOME OWL CAROUSELS: 3-line clamp + hover slide-up + stable height
   ========================================================= */

/* Title clamp to 3 lines in home owl carousels */
#home .tcdprod-wrap .owl-carousel.product-items .product-item .name a{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  line-height: 1.4 !important;
  max-height: calc(1.4em * 3) !important;
}

/* Ensure slide-up action works inside owl */
#home .tcdprod-wrap .owl-carousel.product-items .product-item{
  position: relative !important;
  overflow: hidden !important;
}
#home .tcdprod-wrap .owl-carousel.product-items .product-item .img{
  position: relative !important;
}
/* Force action overlay behavior (undo any earlier "static" carousel overrides) */
#home .tcdprod-wrap .owl-carousel.product-items .product-item .action{
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  padding: 10px !important;
  background: rgba(255,255,255,0.95) !important;
  transition: bottom 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
  z-index: 10 !important;
  bottom: -50px !important;
}
#home .tcdprod-wrap .owl-carousel.product-items .product-item:hover .action{
  bottom: 0 !important;
}

/* Equal-height is applied per carousel via CSS variable set by JS */
#home .tcdprod-wrap .owl-carousel.product-items[data-owl-eqh="1"] .owl-item,
#home .tcdprod-wrap .owl-carousel.product-items[data-owl-eqh="1"] .owl-item .product-item{
  height: var(--owlCardH) !important;
}
#home .tcdprod-wrap .owl-carousel.product-items[data-owl-eqh="1"] .owl-stage-outer{
  height: var(--owlCardH) !important;
}
/* Advanced Search Results (search_adv.html): price float-collapse fix */
#results #products .product-item .price,
#results #products .product-item .price *{
  float: none !important;
}

#results #products .product-item .price{
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  clear: both !important;
}
/* ========================================================================== */
/* FARM & TRAIL - PRODUCT CARDS CSS (FINAL)                                   */
/* Shorter cards, Top Seller overlay, Quick View top-left, hide 0% badges     */
/* Replace existing product card CSS in default_new.css                       */
/* ========================================================================== */

/* === 1. CARD CONTAINER === */
.product-items .product-item {
    border: 1px solid #e5e5e5;
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-items .product-item:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    transform: translateY(-5px);
    border-color: transparent;
    z-index: 5;
}

/* === 2. TOP SELLER BADGE - Overlays top-left corner of card === */
.product-items .product-item .top-seller-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    display: inline-block;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 0 0 6px 0;
    margin: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    line-height: 1.2;
    z-index: 10;
}

/* === 3. PART NUMBER === */
.prod-id-top {
    order: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    min-height: 15px;
}

.prod-id-top .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* === 4. IMAGE CONTAINER - SHORTER HEIGHT === */
.product-items .product-item .img {
    order: 1;
    position: relative;
    background-color: #f9f9f9;
    border-radius: 6px;
    overflow: hidden;
    height: 150px;
    max-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border: none;
    width: 100%;
}

/* Product image link */
.product-items .product-item .img > a.product-img-link,
.product-items .product-item .img > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* === 5. IMAGE STYLES & HOVER EFFECT === */
.product-items .product-item .img img {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Main image - base styles */
.product-items .product-item .img .main-img {
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* Legacy JS-injected swap system removed (opacity:0 !important on .tcd-switch
   was overriding FT8 slide-up rules). Image swap now handled entirely by the
   FT8 block below: tcd-switch sits behind main-img, main-img slides up on hover. */

/* === 6. PRODUCT NAME === */
.product-items .product-item .name {
    order: 2;
    margin-bottom: 6px;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.product-items .product-item .name a {
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    display: block;
    text-align: center;
    line-height: 1.4;
    width: 100%;
    padding: 5px;
}

.product-items .product-item .name a:hover {
    color: #f8a81a;
}

/* === 7. REVIEWS === */
.product-items .product-item .reviews {
    order: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 0 8px 0;
    background: transparent;
    position: static;
    min-height: 18px;
}

.product-items .product-item .reviews-stars {
    display: inline-block;
    color: #f8a81a;
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 1;
    position: relative;
}

.product-items .product-item .reviews-stars:before {
    content: "\e803  \e803  \e803  \e803  \e803";
    font-family: "fontello";
    color: #ddd;
}

.product-items .product-item .reviews-stars::after {
    font-family: "fontello";
    position: absolute;
    left: 0;
    color: #f8a81a;
}

.product-items .product-item .reviews-stars.rating-5::after { content: "\e803  \e803  \e803  \e803  \e803"; }
.product-items .product-item .reviews-stars.rating-4::after { content: "\e803  \e803  \e803  \e803"; }
.product-items .product-item .reviews-stars.rating-3::after { content: "\e803  \e803  \e803"; }
.product-items .product-item .reviews-stars.rating-2::after { content: "\e803  \e803"; }
.product-items .product-item .reviews-stars.rating-1::after { content: "\e803"; }

/* Zero / no reviews: S4S emits rating-0 (or an empty rating- class) when a product
   has no reviews. None of the .rating-1..5:: after fills match, so only the gray
: before empty stars render - which reads as a real (but empty) rating and is
   misleading on a card. Hide the whole reviews row unless there is an actual
   1-5 star fill. Card grid / related items only; product detail page reviews are
   a different block and untouched.
   Scoped with the .product-item.product-item double-class + .card-body and
   !important to beat the FT8 rule
   '.product-items .product-item.product-item .card-body .reviews-stars { display:inline-block }'
   which otherwise holds the empty stars visible. */
.product-items .product-item.product-item .card-body .reviews-stars:not(.rating-1):not(.rating-2):not(.rating-3):not(.rating-4):not(.rating-5) {
    display: none !important;
}
.product-items .product-item.product-item .card-body .reviews:not(:has(.rating-1)):not(:has(.rating-2)):not(:has(.rating-3)):not(:has(.rating-4)):not(:has(.rating-5)) {
    display: none !important;
}

.reviews-count {
    font-size: 11px;
    color: #888;
    margin-left: 5px;
}

/* === 8. PRICE === */
.product-items .product-item .price {
    order: 4;
    text-align: center;
    padding: 0;
    font-weight: 700;
    font-size: 17px;
    color: #111;
    margin-top: auto;
    width: 100%;
    float: left;
    height: auto;
}

.product-items .product-item .price .regular-price {
    color: #111;
}

.product-items .product-item .price .sale-price {
    color: #d92027;
}

.product-items .product-item .price del.regular-price {
    font-size: 13px;
    color: #aaa;
    font-weight: 400;
    margin-right: 5px;
    text-decoration: line-through;
}

/* === 9. ADD TO CART BUTTON === */
.product-items .product-item .action {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    z-index: 10;
    background: rgba(255,255,255,0.95);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-items .product-item:hover .action {
    transform: translateY(0);
}

.product-items .product-item .action .add-to-cart {
    display: block;
    width: 100%;
    background-color: #111;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 0;
    text-align: center;
    border-radius: 6px;
    text-decoration: none;
    border: none;
    transition: background 0.2s;
}

.product-items .product-item .action .add-to-cart:hover {
    background-color: #f8a81a;
    color: #000;
}

/* === 10. DISCOUNT BADGE (Top Right of Image) === */
.product-items .product-item .discount-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    background: #d92027;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(217, 32, 39, 0.25);
}

/* Hide 0% discount badges */
.product-items .product-item .discount-badge.zero-discount {
    display: none !important;
}

/* === 11. QUICK VIEW BUTTON (Top Left of Image) === */
.product-items .product-item .img > .custom-qv-btn {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    width: 35px !important;
    height: 35px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: visible !important;
    transition: opacity 0.2s ease !important;
    z-index: 100 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    cursor: pointer !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-items .product-item .img > .custom-qv-btn svg {
    width: 18px !important;
    height: 18px !important;
    color: #333 !important;
    display: block !important;
}

/* Show on card hover */
.product-items .product-item:hover .img > .custom-qv-btn {
    opacity: 1 !important;
}

.product-items .product-item .img > .custom-qv-btn:hover {
    background: #fff !important;
}

.product-items .product-item .img > .custom-qv-btn:hover svg {
    color: #f8a81a !important;
}

/* === 12. HIDE CLUTTER === */
.product-items .product-item .status,
.product-items .product-item .freeshipping,
.product-items .product-item .custom-stock {
    display: none;
}

.product-items .product-item .ajaxcart-added {
    display: none;
}

.product-items .product-item .ajaxcart-added.incart {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 128, 0, 0.9);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 25;
}

.product-items .product-item .prev-purchased {
    margin-top: 8px;
    font-size: 11px;
    text-align: center;
    color: #666;
}

/* === 13. RESPONSIVE === */
@media (max-width: 991px) {
    .product-items .product-item .img {
        height: 140px;
        max-height: 140px;
    }
}

@media (max-width: 767px) {
    .product-items .product-item {
        padding: 12px;
    }
    
    .product-items .product-item .img {
        height: 130px;
        max-height: 130px;
    }
    
    .product-items .product-item .name a {
        font-size: 13px;
    }
    
    .product-items .product-item .price {
        font-size: 16px;
    }
    
    .product-items .product-item .top-seller-badge {
        font-size: 8px;
        padding: 2px 5px;
    }
    
    .product-items .product-item .discount-badge {
        font-size: 9px;
        padding: 3px 6px;
    }
}

@media (max-width: 567px) {
    .product-items .product-item {
        padding: 10px;
    }
    
    .product-items .product-item .img {
        height: 120px;
        max-height: 120px;
    }
    
    .product-items .product-item .name a {
        font-size: 12px;
    }
    
    .product-items .product-item .price {
        font-size: 15px;
    }
    
    .product-items .product-item .img > .custom-qv-btn {
        width: 30px !important;
        height: 30px !important;
    }
    
    .product-items .product-item .img > .custom-qv-btn svg {
        width: 15px !important;
        height: 15px !important;
    }
}


/* ========================================================================== */
/* ADVANCED SEARCH RESULTS FIX                                                */
/* ========================================================================== */

#results #products .product-item .price,
#results #products .product-item .price * {
    float: none;
}

#results #products .product-item .price {
    display: block;
    height: auto;
    overflow: visible;
    clear: both;
}

.store-search--advanced .product-items .product-item .name a {
    white-space: normal;
    overflow: visible;
    height: 70px;
    overflow: hidden;
}
/*===========================================================================
  KFI PLOW SYSTEMS - CORRECTED STREAMLINED DESIGN
  Fixed weather widget, visible pagination, sidebar actuator CTA
===========================================================================*/

/* ==================== GLOBAL RESETS ==================== */

.category-plow .breadcrumnb {
    margin-bottom: 25px;
}

.category-plow .breadcrumnb ol {
    padding: 8px 0;
    margin: 0;
}

.category-plow .subcategories_block,
.category-plow #featureBlock {
    display: none;
}

.category-plow + .browsing_historyBlock {
    display: none;
}

/* ==================== STREAMLINED HEADER SECTION ==================== */

.kfi-streamlined-header {
    background: #fff;
    margin-bottom: 30px;
}

/* ==================== HERO SECTION ==================== */

.kfi-hero {
    padding: 40px 0 35px 0;
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 50%, #fafafa 100%);
}

.hero-content {
    padding-right: 40px;
}

.hero-media {
    padding-left: 30px;
}

/* USA Badge */
.badge-usa {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* Hero Title - Modern Typography */
.hero-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    color: #0a0a0a;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
}

.accent-text {
    color: #f8a81a;
    display: inline-block;
}

/* Hero Lead */
.hero-lead {
    font-size: 17px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 25px;
    font-weight: 400;
}

.hero-lead strong {
    color: #0a0a0a;
    font-weight: 600;
}

/* Features Grid - Pills */
.features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 10px 18px;
    border-radius: 25px;
    border: 2px solid #e5e5e5;
    font-size: 14px;
    font-weight: 600;
    color: #0a0a0a;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-pill:hover {
    border-color: #f8a81a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(248, 168, 26, 0.2);
}

.feature-pill svg {
    color: #f8a81a;
}

/* ==================== VIDEO SECTION ==================== */

.video-container-modern {
    margin-bottom: 20px;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-caption {
    margin: 12px 0 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-align: center;
}

/* Trust Pills */
.trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
    justify-content: center; /* Center align under video */
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0fdf4;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid #d1fae5;
    font-size: 13px;
    font-weight: 600;
    color: #065f46;
}

.trust-pill svg {
    color: #10b981;
    flex-shrink: 0;
}

/* ==================== ACTUATOR BANNER (BOTTOM) ==================== */

.actuator-banner-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    padding: 30px 40px;
    border-radius: 12px;
    border: 2px solid #f8a81a;
    box-shadow: 0 4px 16px rgba(248, 168, 26, 0.15);
    margin-top: 50px;
    margin-bottom: 30px;
    gap: 30px;
}

.actuator-text {
    flex: 1;
}

.actuator-banner-bottom h3 {
    font-size: 24px;
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.sidebar-badge {
    display: inline-block;
    background: #f8a81a;
    color: #000;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    vertical-align: middle;
}

.actuator-banner-bottom p {
    font-size: 15px;
    line-height: 1.5;
    color: #444;
    margin-bottom: 12px;
    max-width: 600px;
}

.sidebar-note {
    font-size: 13px !important;
    font-style: italic;
    color: #92400e !important;
    background: rgba(255, 255, 255, 0.6);
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid #d97706;
    display: inline-block;
    margin-bottom: 0 !important;
}

.actuator-action {
    flex-shrink: 0;
}

.btn-sidebar-cta {
    display: inline-block;
    padding: 16px 32px;
    background: #000;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.btn-sidebar-cta:hover {
    background: #f8a81a;
    color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(248, 168, 26, 0.4);
    text-decoration: none;
}

/* ==================== WEATHER TICKER SECTION ==================== */

.weather-ticker-section {
    padding: 0;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    max-height: 60px;
    overflow: hidden;
}

.weather-ticker-section > div[id^="ww_"] {
    max-width: 100%;
    max-height: 60px;
}

/* ==================== PRICE OVERRIDE - "STARTING AT:" ==================== */

.category-plow .kfi-price-override {
    display: block !important;
}

.category-plow .kfi-price-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.category-plow .kfi-price-override .regular-price,
.category-plow .kfi-price-override .sale-price {
    display: inline-block;
}

/* ==================== CATEGORY TOOLBAR ==================== */

.category-plow .category-toolbar {
    margin-bottom: 25px;
    padding: 18px 24px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
}

/* ==================== PRODUCT ITEMS ==================== */

.category-plow .product-item {
    margin-bottom: 25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    overflow: hidden;
}

.category-plow .product-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ==================== PAGINATION - MODERN & VISIBLE ==================== */

.category-plow .category-pagination,
.category-plow .kfi-pagination {
    margin-top: 40px !important;
    margin-bottom: 30px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.category-plow .paging-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.category-plow .paging-controls {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.category-plow .paging-numbers {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.category-plow .paging-prev,
.category-plow .paging-next {
    display: inline-block !important;
    padding: 10px 20px;
    background: #fff;
    border: 2px solid #e5e5e5;
    color: #0a0a0a !important;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.5px;
}

.category-plow .paging-prev:hover,
.category-plow .paging-next:hover {
    background: #0a0a0a !important;
    color: #fff !important;
    border-color: #0a0a0a;
    transform: translateY(-2px);
}

.category-plow .paging-links {
    display: inline-block !important;
    padding: 10px 14px;
    background: #fff;
    border: 2px solid #e5e5e5;
    color: #0a0a0a !important;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 40px;
    text-align: center;
}

.category-plow .paging-links:hover {
    background: #f8a81a !important;
    color: #000 !important;
    border-color: #f8a81a;
    transform: translateY(-2px);
}

.category-plow .paging-current {
    display: inline-block !important;
    padding: 10px 14px;
    background: #0a0a0a !important;
    color: #fff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.category-plow .paging-dots {
    display: inline-block !important;
    padding: 0 6px;
    color: #ccc;
    font-weight: bold;
}

.category-plow .paging-viewall {
    display: flex !important;
    align-items: center;
}

.category-plow .category-viewall,
.category-plow .exit-viewall {
    display: inline-block !important;
    padding: 10px 20px;
    background: #f8a81a;
    color: #000 !important;
    border: 2px solid #f8a81a;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.5px;
}

.category-plow .category-viewall:hover,
.category-plow .exit-viewall:hover {
    background: #000 !important;
    color: #fff !important;
    border-color: #000;
    transform: translateY(-2px);
}

/* ==================== FOOTER ==================== */

.category-plow .category-footer {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 2px solid #e5e5e5;
}

/* ==================== RESPONSIVE DESIGN ==================== */

@media (max-width: 991px) {
    .kfi-hero {
        padding: 35px 0 30px 0;
    }
    .hero-content {
        padding-right: 15px;
        margin-bottom: 30px;
    }
    .hero-media {
        padding-left: 15px;
    }
    .hero-title {
        font-size: 32px;
    }
    .actuator-banner-bottom {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }
    .actuator-banner-bottom p {
        margin-left: auto;
        margin-right: auto;
    }
    .actuator-action {
        width: 100%;
    }
    .btn-sidebar-cta {
        display: block;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .kfi-hero {
        padding: 30px 0 25px 0;
    }
    .hero-title {
        font-size: 28px;
    }
    .hero-lead {
        font-size: 16px;
    }
    .features-grid {
        flex-direction: column;
        gap: 10px;
    }
    .feature-pill {
        justify-content: center;
    }
    .category-plow .category-toolbar {
        padding: 14px 18px;
    }
    .category-plow .paging-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    .category-plow .paging-controls {
        justify-content: center;
    }
    .category-plow .paging-viewall {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 24px;
    }
    .category-plow .paging-numbers {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* Fix dropdown clickability under sticky header */
.options.sub-section,
.listing-page-content {
    z-index: auto;
}

#divOptionsBlock:focus-within {
    position: relative;
    z-index: 1050;
}

#divOptionsBlock select:focus {
    position: relative;
    z-index: 1051;
}
/* Fix GetSiteControl blocking dropdowns on mobile */
  
    #divOptionsBlock select {
        position: relative;
        z-index: 999999;
    }
}
/* ========================================
   SHARE YOUR RIG FEATURED SECTION
   Full featured brand hero layout
   ======================================== */

.share-rig-featured {
    background: white;
    padding: 0;
    margin: 60px 0;
    overflow: hidden;
}

.share-rig-featured-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 350px;
    max-width: 100%;
}

/* Left Side - Image */
.share-rig-featured-image {
    overflow: hidden;
    position: relative;
}

.share-rig-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.share-rig-featured-image:hover img {
    transform: scale(1.05);
}

/* Right Side - Content */
.share-rig-featured-content {
    background: linear-gradient(135deg, #f8a81a 0%, #d68910 100%);
    color: white;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.share-rig-featured-content h2 {
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.share-rig-featured-content > p {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.95);
}

.share-rig-featured-benefits {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.share-rig-featured-benefits li {
    font-size: 0.9em;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
}

.share-rig-featured-benefits li::before {
    content: ' ';
    margin-right: 12px;
    font-weight: 700;
    font-size: 1.1em;
}

.share-rig-featured-btn {
    display: inline-block;
    padding: 16px 40px;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-radius: 0;
}

.share-rig-featured-btn:hover {
    background: white;
    color: #d68910;
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 850px) {
    .share-rig-featured-container {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .share-rig-featured-image {
        min-height: 300px;
    }
    
    .share-rig-featured-content {
        padding: 40px 30px;
    }
    
    .share-rig-featured-content h2 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }
    
    .share-rig-featured-content > p {
        font-size: 0.95em;
        margin-bottom: 18px;
    }
    
    .share-rig-featured-benefits li {
        font-size: 0.9em;
        margin-bottom: 8px;
    }
    
    .share-rig-featured-btn {
        padding: 13px 32px;
        font-size: 0.85em;
    }
}

@media (max-width: 650px) {
    .share-rig-featured {
        margin: 25px 0;
    }
    
    .share-rig-featured-container {
        height: auto;
    }
    
    .share-rig-featured-image {
        min-height: 250px;
    }
    
    .share-rig-featured-content {
        padding: 30px 25px;
    }
    
    .share-rig-featured-content h2 {
        font-size: 1.6em;
        margin-bottom: 12px;
    }
    
    .share-rig-featured-content > p {
        font-size: 0.9em;
        line-height: 1.5;
        margin-bottom: 15px;
    }
    
    .share-rig-featured-benefits {
        margin-bottom: 18px;
    }
    
    .share-rig-featured-benefits li {
        font-size: 0.85em;
        margin-bottom: 7px;
    }
    
    .share-rig-featured-btn {
        padding: 12px 28px;
        font-size: 0.82em;
    }
}

@media (max-width: 480px) {
    .share-rig-featured {
        margin: 20px 0;
    }
    
    .share-rig-featured-image {
        min-height: 220px;
    }
    
    .share-rig-featured-content {
        padding: 25px 20px;
    }
    
    .share-rig-featured-content h2 {
        font-size: 1.4em;
        margin-bottom: 10px;
    }
    
    .share-rig-featured-content > p {
        font-size: 0.85em;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    
    .share-rig-featured-benefits li {
        font-size: 0.8em;
        margin-bottom: 6px;
    }
    
    .share-rig-featured-benefits li::before {
        margin-right: 8px;
    }
    
    .share-rig-featured-btn {
        padding: 11px 24px;
        font-size: 0.78em;
    }
}

@media (max-width: 380px) {
    .share-rig-featured-image {
        min-height: 200px;
    }
    
    .share-rig-featured-content {
        padding: 20px 15px;
    }
    
    .share-rig-featured-content h2 {
        font-size: 1.2em;
        margin-bottom: 8px;
    }
    
    .share-rig-featured-content > p {
        font-size: 0.8em;
        margin-bottom: 10px;
    }
    
    .share-rig-featured-benefits li {
        font-size: 0.75em;
        margin-bottom: 5px;
    }
    
    .share-rig-featured-btn {
        padding: 10px 20px;
        font-size: 0.75em;
    }
}
/* ========================================
   FEATURED SEASONAL BRAND SECTION
   Split layout with image + content CTA
   ======================================== */

.featured-seasonal-brand {
    background: white;
    padding: 0;
    margin: 60px 0;
    overflow: hidden;
}

.featured-seasonal-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 350px;
    max-width: 100%;
}

/* Left Side - Image */
.featured-seasonal-image {
    overflow: hidden;
    position: relative;
}

.featured-seasonal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.featured-seasonal-image:hover img {
    transform: scale(1.05);
}

/* Right Side - Content */
.featured-seasonal-content {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: white;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.featured-seasonal-content h2 {
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.featured-seasonal-content p {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.95);
}

.featured-seasonal-btn {
    display: inline-block;
    padding: 16px 40px;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.featured-seasonal-btn:hover {
    background: white;
    color: #2563eb;
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 850px) {
    .featured-seasonal-container {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .featured-seasonal-image {
        min-height: 300px;
    }
    
    .featured-seasonal-content {
        padding: 40px 30px;
    }
    
    .featured-seasonal-content h2 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }
    
    .featured-seasonal-content p {
        font-size: 0.95em;
        margin-bottom: 18px;
    }
    
    .featured-seasonal-btn {
        padding: 13px 32px;
        font-size: 0.85em;
    }
}

@media (max-width: 650px) {
    .featured-seasonal-brand {
        margin: 25px 0;
    }
    
    .featured-seasonal-container {
        height: auto;
    }
    
    .featured-seasonal-image {
        min-height: 250px;
    }
    
    .featured-seasonal-content {
        padding: 30px 25px;
    }
    
    .featured-seasonal-content h2 {
        font-size: 1.6em;
        margin-bottom: 12px;
    }
    
    .featured-seasonal-content p {
        font-size: 0.9em;
        line-height: 1.5;
        margin-bottom: 15px;
    }
    
    .featured-seasonal-btn {
        padding: 12px 28px;
        font-size: 0.82em;
    }
}

@media (max-width: 480px) {
    .featured-seasonal-brand {
        margin: 20px 0;
    }
    
    .featured-seasonal-image {
        min-height: 220px;
    }
    
    .featured-seasonal-content {
        padding: 25px 20px;
    }
    
    .featured-seasonal-content h2 {
        font-size: 1.4em;
        margin-bottom: 10px;
    }
    
    .featured-seasonal-content p {
        font-size: 0.85em;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    
    .featured-seasonal-btn {
        padding: 11px 24px;
        font-size: 0.78em;
    }
}

@media (max-width: 380px) {
    .featured-seasonal-image {
        min-height: 200px;
    }
    
    .featured-seasonal-content {
        padding: 20px 15px;
    }
    
    .featured-seasonal-content h2 {
        font-size: 1.2em;
        margin-bottom: 8px;
    }
    
    .featured-seasonal-content p {
        font-size: 0.8em;
        margin-bottom: 10px;
    }
    
    .featured-seasonal-btn {
        padding: 10px 20px;
        font-size: 0.75em;
    }
}
.homepage-blog-posts {
    padding: 5px 0; margin: 15px 0 20px;
}
/* ========================================
   FARM & TRAIL SWIPER CAROUSEL STYLING
   ======================================== */

.ft-collections-section {
    background: #fff;
    padding-top: 30px; padding-bottom: 0;
    margin-top: 15px;
    position: relative;
    font-family: 'Barlow', sans-serif;
}

.ft-collections-accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #f8a81a;
}

.ft-collections-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
}

/* ========================================
   HEADER - TITLE + TABS
   ======================================== */

.ft-collections-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .ft-collections-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
    }
}

.ft-collections-title {
    font-size: 1.5em;
    font-weight: 900;
    text-transform: uppercase;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: 2px;
    font-family: 'Barlow', sans-serif;
}

/* ========================================
   NAVIGATION TABS
   ======================================== */

.ft-collections-nav {
    display: flex;
    gap: 20px;
    margin: 0;
    border: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    flex: 1;
}

@media (min-width: 768px) {
    .ft-collections-nav {
        justify-content: flex-end;
    }
}

@media (max-width: 767px) {
    .ft-collections-nav {
        flex: none;
        width: 100%;
    }
}

.ft-collections-nav::-webkit-scrollbar {
    height: 0px; 
}

.ft-collections-tab {
    background: none;
    border: none;
    padding: 6px 0;
    font-size: 1em;
    font-weight: 500;
    text-transform: capitalize;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
    font-family: 'Barlow', sans-serif;
    flex-shrink: 0;
}

.ft-collections-tab:hover {
    color: #f8a81a;
}

.ft-collections-tab.active {
    color: #f8a81a;
    font-weight: 600;
}

/* ========================================
   CAROUSEL CONTAINER
   ======================================== */

.ft-collections-container { position: relative; }
.ft-collection { position: relative; }
.ft-collection:not(.active) { display: none !important; }

.ft-carousel-wrapper {
    position: relative;
    margin: 0 0 30px 0;
    overflow: visible;
    min-height: 400px;
    max-width: 100%;
    width: 100%;
}

/* Swiper specific overrides */
.ft-swiper {
    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.swiper-slide {
    display: flex;
    align-items: stretch;
    height: auto;
}

/* Override Swiper default button styles - use [class*="swiper-button"] for higher specificity */
[class*="swiper-button"] {
    opacity: 0.5 !important;
    pointer-events: auto !important;
}

/* Also target disabled state */
.swiper-button-disabled {
    opacity: 0.5 !important;
}

/* Force next button visibility - it has inline opacity: 0 */
.swiper-button-next {
    opacity: 0.5 !important;
}

/* Custom nav buttons */
.ft-carousel-wrapper .swiper-button-prev,
.ft-carousel-wrapper .swiper-button-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    background: #f8a81a !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(248, 168, 26, 0.2) !important;
    transition: all 0.3s ease !important;
    z-index: 50 !important;
    opacity: 0.5 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    visibility: visible !important;
}

.ft-carousel-wrapper .swiper-button-next {
    right: -50px !important;
}

.ft-carousel-wrapper .swiper-button-prev {
    left: -50px !important;
}

/* Show buttons on hover */
.ft-carousel-wrapper:hover .swiper-button-prev,
.ft-carousel-wrapper:hover .swiper-button-next {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.ft-carousel-wrapper .swiper-button-prev:hover,
.ft-carousel-wrapper .swiper-button-next:hover {
    background: #d68910 !important;
    opacity: 1 !important;
}

.ft-carousel-wrapper .swiper-button-prev:after,
.ft-carousel-wrapper .swiper-button-next:after {
    font-size: 24px !important;
    color: white !important;
    opacity: 1 !important;
}

/* ========================================
   PRODUCT CARDS
   ======================================== */

.ft-product-card {
    background: #f5f5f5;
    border-radius: 0px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 0;
    text-decoration: none;
    color: inherit;
    border: none;
    height: 100%;
    min-height: 400px;
    max-height: 400px;
    user-select: none;
    -webkit-user-select: none;
}

.ft-product-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-tap-highlight-color: transparent;
}

.ft-product-card:hover {
    transform: translateY(-2px);
}

/* 1. MEDIA AREA (Image) */
.ft-product-image-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    background: transparent;
    overflow: hidden;
    margin-bottom: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ft-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
    padding: 10px;
    box-sizing: border-box;
    mix-blend-mode: multiply;
    pointer-events: auto;
    -webkit-user-drag: none;
}

.ft-product-card:hover .ft-product-image {
    transform: scale(1.05);
}

/* 2. INFO AREA (Content) */
.ft-card-info-wrap {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    text-align: center;
}

/* Title */
.ft-product-name {
    font-size: 0.9em;
    font-weight: 600;
    color: #121212;
    margin: 0 0 10px 0;
    line-height: 1.4;
    min-height: 2.8em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: 'Barlow', sans-serif;
    letter-spacing: 0.3px;
}

/* Stock Badge */
.ft-badge-stock {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    margin: 0 auto 10px auto;
    background: #e8f5e9;
    color: #2e7d32;
}

.ft-badge-out {
    background: #ffebee;
    color: #c62828;
}

/* Price Footer */
.ft-card-footer {
    margin-top: auto;
}

.ft-product-price {
    font-size: 1.1em;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    font-family: 'Barlow', sans-serif;
}

.ft-price-sup {
    font-size: 0.8em;
    font-weight: 400;
    color: #666;
    margin-right: 3px;
}

/* ========================================
   VIEW ALL CARD
   ======================================== */

.ft-view-all-card {
    background: #f8a81a !important;
    padding: 0 !important;
    min-height: 400px !important;
    max-height: 400px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
}

.ft-view-all-card a {
    justify-content: center;
    gap: 15px;
    height: 100%;
}

.ft-view-all-icon {
    font-size: 48px;
    color: white;
}

.ft-view-all-card .ft-product-name {
    color: white;
    font-weight: 700;
    margin: 0;
    font-size: 1.1em;
    min-height: auto;
}

/* ========================================
   MEDIA QUERIES
   ======================================== */

@media (min-width: 768px) {
    .ft-collections-section { 
        padding-top: 40px; padding-bottom: 0;
        margin-top: 15px; 
    }
    
    .ft-carousel-wrapper .swiper-button-prev,
    .ft-carousel-wrapper .swiper-button-next {
        width: 42px;
        height: 42px;
    }
    
    .ft-product-card { 
        min-height: 420px; 
        max-height: 420px; 
    }
    
    .ft-view-all-card {
        min-height: 420px !important;
        max-height: 420px !important;
    }
    
    .ft-product-image-wrapper { 
        height: 240px; 
    }
}

@media (min-width: 1200px) {
    .ft-carousel-wrapper .swiper-button-prev,
    .ft-carousel-wrapper .swiper-button-next {
        width: 50px;
        height: 50px;
    }
    
    .ft-product-card { 
        min-height: 450px; 
        max-height: 450px; 
    }
    
    .ft-view-all-card {
        min-height: 450px !important;
        max-height: 450px !important;
    }
    
    .ft-product-image-wrapper { 
        height: 260px; 
    }
    
    .ft-product-name { 
        font-size: 0.95em; 
    }
    
    .ft-product-price { 
        font-size: 1.2em; 
    }
}

/* MOBILE SPECIFIC FIXES */
@media (max-width: 767px) {
    .ft-carousel-wrapper .swiper-button-prev,
    .ft-carousel-wrapper .swiper-button-next {
        display: none !important;
    }
    
    .ft-carousel-wrapper {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 0;
        padding-bottom: 20px;
        overflow: visible;
        min-height: auto;
    }
    
    .ft-swiper {
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
    
    .swiper-wrapper {
        overflow: visible;
    }

    .ft-product-card {
        min-height: 489px !important;
        height: 100% !important;
        max-height: none !important;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
        background: #f5f5f5 !important;
        border-radius: 4px;
        touch-action: pan-x;
        flex: 1;
    }

    .ft-product-card a {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 0;
    }
    
    .ft-view-all-card a {
        height: 100% !important;
    }

    .ft-product-image-wrapper {
        width: 70% !important;
        margin: 10px auto 10px auto !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        background: #f9f9f9 !important;
    }

    .ft-product-image {
        padding: 0;
    }

    .ft-card-info-wrap {
        padding: 5px 15px 15px 15px;
        flex-grow: 0;
    }

    .ft-view-all-wrapper {
        width: 100% !important;
        height: 150px !important;
        margin: 0 !important;
        aspect-ratio: auto !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ft-view-all-card {
        height: 100% !important;
        min-height: 489px !important;
        background: #f8a81a !important;
        border-radius: 4px;
        padding: 0 !important;
    }
    
    .ft-view-all-card a {
        height: 100% !important;
    }

    .ft-product-name {
        font-size: 1.1em;
        max-height: none;
        -webkit-line-clamp: 3;
        min-height: 3.9em;
    }

    .ft-product-price { 
        font-size: 1.2em; 
    }
}
/* =====================================================
   FARM & TRAIL - HEADER SYSTEM (Consolidated v2.0)
   Last Updated: 2026-01-01
   ===================================================== */

/* Hide Original Header */
.navbar.navbar-inverse > .top-header,
.navbar.navbar-inverse > header.site-header,
.navbar.navbar-inverse,
.main-bar { display: none !important; }

/* ==================== HEADER BASE ==================== */
#new-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9000;
    font-family: 'Barlow', sans-serif;
    transition: box-shadow 0.3s ease;
}
#new-header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
#new-header * { box-sizing: border-box; }
#header-spacer { height: 180px !important; min-height: 180px !important; }

/* ==================== UTILITY BAR ==================== */
#new-header .nh-utility {
    background: #121212;
    color: #fff;
    font-size: 14px;
    padding: 0 20px;
    height: 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}
#new-header .nh-utility-left { display: flex; gap: 20px; }
#new-header .nh-utility-left a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    transition: color 0.2s;
}
#new-header .nh-utility-left a:hover { color: #f8a81a; }
#new-header .nh-utility-left a svg { transition: transform 0.2s; }
#new-header .nh-utility-left a:hover svg { transform: scale(1.1); }
#new-header .nh-utility-right {
    color: #f8a81a;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==================== MAIN HEADER ==================== */
#new-header .nh-main {
    background: #fff;
    padding: 15px 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    min-height: 80px;
}
#new-header .nh-logo a { display: block; }
#new-header .nh-logo img { max-height: 55px; width: auto; display: block; transition: transform 0.2s; }
#new-header .nh-logo a:hover img { transform: scale(1.02); }

/* Search Container */
#new-header .nh-search-container { display: flex; justify-content: center; width: 100%; }
#new-header .nh-search { width: 100%; max-width: 550px; position: relative; }
#new-header .nh-search #searchBox,
#new-header .nh-search .searchBox {
    width: 100% !important;
    float: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    height: auto !important;
}
#new-header .nh-search .search-form {
    display: flex !important;
    width: 100% !important;
    height: 48px !important;
    border: 2px solid #121212 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
#new-header .nh-search .search-form:focus-within {
    border-color: #f8a81a !important;
    box-shadow: 0 0 0 3px rgba(248, 168, 26, 0.2) !important;
}
#new-header .nh-search #searchlight {
    flex: 1 !important;
    border: none !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    font-family: 'Barlow', sans-serif !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 100% !important;
    min-width: 0 !important;
}
#new-header .nh-search #searchlight::placeholder { color: #888; }
#new-header .nh-search .search-submit {
    width: 55px !important;
    background: #f8a81a !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}
#new-header .nh-search .search-submit:hover { background: #e69a00 !important; }
#new-header .nh-search .clear { display: none !important; }
#new-header .nh-search .searchlight-balloon {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-top: 2px !important;
    z-index: 999999 !important;
}

/* ==================== HEADER ACTIONS ==================== */
#new-header .nh-actions { display: flex; align-items: center; gap: 8px; }
#new-header .nh-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #121212;
    padding: 8px 14px;
    border-radius: 8px;
    transition: background 0.2s, transform 0.2s;
    min-width: 60px;
    position: relative;
}
#new-header .nh-action:hover { background: #f5f5f5; transform: translateY(-2px); }
#new-header .nh-action svg { width: 26px; height: 26px; margin-bottom: 4px; }
#new-header .nh-action span { font-size: 10px; font-weight: 600; text-transform: uppercase; }
#new-header .nh-cart { position: relative; }
#new-header .nh-cart-count {
    position: absolute;
    top: 2px;
    right: 8px;
    background: #f8a81a;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#new-header .nh-mobile-toggle { display: none; }

/* ==================== DESKTOP NAVIGATION ==================== */
#new-header .nh-nav { background: #f8a81a; transition: all 0.3s ease; }
#new-header .nh-nav-inner { max-width: 1600px; margin: 0 auto; padding: 0 20px; }
#new-header .nh-nav-menu { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; }
#new-header .nh-nav-menu > li { position: relative; }
#new-header .nh-nav-menu > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 15px 20px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.2s;
}
#new-header .nh-nav-menu > li:hover > a { background: #121212; color: #fff; }
#new-header .nh-nav-menu > li > a .arrow-icon { width: 14px; height: 14px; transition: transform 0.3s; }
#new-header .nh-nav-menu > li:hover > a .arrow-icon { transform: rotate(180deg); }
@media (min-width: 992px) { #new-header .nh-nav-menu > li > a .expand-icon { display: none; } }

/* ==================== DESKTOP DROPDOWNS ==================== */
#new-header .nh-dropdown,
#new-header .nh-nav-menu .subMenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 12px 0;
    list-style: none;
    z-index: 9998;
    border-radius: 0 0 8px 8px;
}
@media (min-width: 992px) {
    #new-header .nh-nav-menu > li:hover > .nh-dropdown,
    #new-header .nh-nav-menu > li:hover > .subMenu { display: block; }
}
#new-header .nh-dropdown li a,
#new-header .nh-nav-menu .subMenu li a {
    display: block;
    padding: 10px 22px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}
#new-header .nh-dropdown li a:hover,
#new-header .nh-nav-menu .subMenu li a:hover { background: #f8a81a; color: #000; }
#new-header .nh-dropdown li.see-all-link { border-top: 1px solid #eee; margin-top: 5px; }
#new-header .nh-dropdown li.see-all-link a { font-weight: 700 !important; color: #f8a81a !important; padding-top: 12px !important; }
#new-header .nh-dropdown li.see-all-link a:hover { background: #f8a81a !important; color: #000 !important; }

/* ==================== MEGA MENU ==================== */
#new-header .mega-menu {
    display: none;
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
    padding: 0;
    z-index: 9999;
    border-top: 3px solid #f8a81a;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
#new-header .nh-nav-menu > li:hover > .mega-menu { display: block; }
@media (min-width: 992px) {
    #new-header .nh-nav-menu > li:has(.mega-menu) > .nh-dropdown,
    #new-header .nh-nav-menu > li:has(.mega-menu) > .subMenu { display: none !important; }
}
#new-header .mega-menu-inner { display: grid; grid-template-columns: 1fr 1fr 280px; max-width: 1200px; margin: 0 auto; align-items: start; }
#new-header .mega-menu-inner.four-col { grid-template-columns: 1fr 1fr 1fr 260px; }
#new-header .mega-menu-inner.five-col { grid-template-columns: 1fr 1fr 1fr 1fr 220px; }
#new-header .mega-menu-inner.five-col .mega-col { padding: 20px 22px; }
#new-header .mega-col { padding: 25px 30px; border-right: 1px solid #eee; }
#new-header .mega-col:last-child { border-right: none; padding: 0; align-self: stretch; }
#new-header .mega-col-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #999; letter-spacing: 1px; margin-bottom: 10px; }
#new-header .mega-col-subtitle { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #bbb; letter-spacing: 1px; margin: 12px 0 8px; padding-top: 10px; border-top: 1px solid #f0f0f0; }
#new-header .mega-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 20px; }
#new-header .mega-list li { break-inside: avoid; margin-bottom: 8px; }
#new-header .mega-list li a { color: #333; text-decoration: none; font-size: 13px; font-weight: 500; transition: color 0.15s ease; display: block; padding: 4px 0; }
#new-header .mega-list li a:hover { color: #f8a81a; }
#new-header .mega-list-compact { columns: 1; }
#new-header .mega-list-compact li { margin-bottom: 4px; }
#new-header .mega-list-compact li a { font-size: 12px; color: #555; padding: 2px 0; }
#new-header .mega-list-divider { height: 1px; background: #f0f0f0; margin: 6px 0; pointer-events: none; }
#new-header .mega-view-all { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; }
#new-header .mega-view-all a { color: #f8a81a; font-weight: 600; font-size: 12px; text-decoration: none; }
#new-header .mega-view-all a:hover { color: #121212; }

/* Mega Menu Featured Product */
#new-header .mega-featured { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; }
#new-header .mega-featured-link { display: flex; align-items: center; gap: 15px; text-decoration: none; padding: 12px; background: #f9f9f9; border-radius: 8px; transition: all 0.2s ease; }
#new-header .mega-featured-link:hover { background: #f0f0f0; }
#new-header .mega-featured-img { width: 80px; height: 80px; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#new-header .mega-featured-img img { max-width: 90%; max-height: 90%; object-fit: contain; }
#new-header .mega-featured-info { flex: 1; }
#new-header .mega-featured-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #f8a81a; letter-spacing: 0.5px; margin-bottom: 4px; }
#new-header .mega-featured-name { font-size: 13px; font-weight: 600; color: #333; line-height: 1.3; margin-bottom: 4px; }
#new-header .mega-featured-price { font-size: 14px; font-weight: 700; color: #121212; }
#new-header .mega-featured-link:hover .mega-featured-name { color: #f8a81a; }

/* Mega Menu Promo Column */
#new-header .mega-promo-col { padding: 0; border-right: none; }
#new-header .mega-promo { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); padding: 30px 25px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; min-height: 100%; }
#new-header .mega-promo-badge { background: #f8a81a; color: #000; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 4px 12px; border-radius: 3px; margin-bottom: 15px; letter-spacing: 0.5px; display: inline-block; }
#new-header .mega-promo-discount { font-size: 42px; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 8px; }
#new-header .mega-promo-text { font-size: 14px; color: #aaa; margin-bottom: 20px; line-height: 1.4; }
#new-header .mega-promo-text strong { color: #f8a81a; display: block; font-size: 16px; margin-top: 5px; }
#new-header .mega-promo-btn { display: inline-block; background: #f8a81a; color: #000; font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 12px 28px; border-radius: 4px; text-decoration: none; transition: all 0.2s ease; }
#new-header .mega-promo-btn:hover { background: #fff; color: #000; }
#new-header .mega-promo.compact { padding: 25px 20px; }
#new-header .mega-promo.compact .mega-promo-discount { font-size: 28px; }
#new-header .mega-promo.compact .mega-promo-text { font-size: 13px; margin-bottom: 15px; }
#new-header .mega-promo.compact .mega-promo-btn { padding: 10px 20px; font-size: 11px; }

/* Tweel Hero Promo   full-bleed background image card */
#new-header .mega-promo-hero { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 200px; background-size: cover; background-position: center; text-decoration: none; position: relative; border-radius: 0; overflow: hidden; }
#new-header .mega-promo-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.1) 100%); }
#new-header .mega-promo-hero-inner { position: relative; z-index: 1; padding: 24px 20px; }
#new-header .mega-promo-hero .mega-promo-badge { margin-bottom: 10px; }
#new-header .mega-promo-headline { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 8px; letter-spacing: -0.3px; }
#new-header .mega-promo-sub { font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.5; margin-bottom: 16px; }
#new-header .mega-promo-hero .mega-promo-btn { background: #f8a81a; color: #000; padding: 10px 20px; font-size: 11px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; }
#new-header .mega-promo-hero:hover .mega-promo-btn { background: #fff; }

/* Mega Menu Category Cards */
#new-header .mega-cat-card { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
#new-header .mega-cat-card:last-of-type { margin-bottom: 8px; padding-bottom: 8px; border-bottom: none; }
#new-header .mega-cat-thumb { width: 50px; height: 50px; background: #f5f5f5; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border: 1px solid #eee; }
#new-header .mega-cat-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
#new-header .mega-cat-content { flex: 1; min-width: 0; }
#new-header .mega-cat-title { font-size: 13px; font-weight: 700; color: #121212; margin-bottom: 5px; text-decoration: none; display: block; transition: color 0.15s ease; }
#new-header .mega-cat-title:hover { color: #f8a81a; }
#new-header .mega-cat-links { list-style: none; padding: 0; margin: 0; }
#new-header .mega-cat-links li { margin-bottom: 3px; }
#new-header .mega-cat-links li a { font-size: 12px; color: #666; text-decoration: none; transition: color 0.15s ease; }
#new-header .mega-cat-links li a:hover { color: #f8a81a; }

/* ==================== OVERLAY ==================== */
#new-header .nh-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
#new-header .nh-overlay.open { opacity: 1; visibility: visible; }

/* ==================== MOBILE STYLES ==================== */
@media (max-width: 991px) {
    #new-header .nh-utility { padding: 0 15px; height: 36px; }
    #new-header .nh-utility-right { display: none; }
    #new-header .nh-main { display: flex; flex-wrap: wrap; padding: 12px 15px; gap: 12px; min-height: auto; }
    #new-header .nh-mobile-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; order: 1; border-radius: 8px; }
    #new-header .nh-mobile-toggle .menu-icon { position: relative; width: 24px; height: 18px; }
    #new-header .nh-mobile-toggle .menu-icon span { display: block; position: absolute; height: 2px; width: 100%; background: #121212; border-radius: 2px; left: 0; transition: all 0.25s ease; }
    #new-header .nh-mobile-toggle .menu-icon span:nth-child(1) { top: 0; }
    #new-header .nh-mobile-toggle .menu-icon span:nth-child(2) { top: 8px; }
    #new-header .nh-mobile-toggle .menu-icon span:nth-child(3) { top: 16px; }
    #new-header .nh-mobile-toggle.active .menu-icon span:nth-child(1) { top: 8px; transform: rotate(45deg); }
    #new-header .nh-mobile-toggle.active .menu-icon span:nth-child(2) { opacity: 0; }
    #new-header .nh-mobile-toggle.active .menu-icon span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
    #new-header .nh-logo { order: 2; flex: 1; text-align: center; }
    #new-header .nh-logo img { max-height: 42px; margin: 0 auto; }
    #new-header .nh-actions { order: 3; gap: 4px; }
    #new-header .nh-action { padding: 8px; min-width: auto; }
    #new-header .nh-action svg { width: 26px; height: 26px; margin-bottom: 0; }
    #new-header .nh-action span { display: none; }
    #new-header .nh-action:hover { transform: none; }
    #new-header .nh-cart-count { top: 0; right: 0; }
    #new-header .nh-search-container { order: 4; width: 100%; flex-basis: 100%; }
    #new-header .nh-search { max-width: 100%; }
    #new-header .nh-search .search-form { height: 50px !important; }
    
    /* Mobile Nav Panel with Dynamic Viewport Height */
    #new-header .nh-nav {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        min-height: calc(var(--vh, 1vh) * 100) !important;
        background: #fff !important;
        z-index: 10001 !important;
        transition: left 0.3s ease !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 5px 0 25px rgba(0,0,0,0.15) !important;
        overflow: hidden !important;
    }
    #new-header .nh-nav.open { left: 0 !important; }
    
    /* Mobile Menu Header */
    #new-header .nh-menu-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 20px !important; background: #fff !important; border-bottom: 1px solid #eee !important; flex-shrink: 0 !important; }
    #new-header .nh-menu-header img { height: 40px !important; width: auto !important; }
    #new-header .nh-close-btn { width: 40px !important; height: 40px !important; background: transparent !important; border: 2px solid #121212 !important; border-radius: 50% !important; font-size: 22px !important; line-height: 1 !important; color: #121212 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; transition: all 0.2s ease !important; }
    #new-header .nh-close-btn:hover { background: #121212 !important; color: #fff !important; }
    
    /* Mobile Quick Actions */
    #new-header .nh-quick-actions { display: flex !important; border-bottom: 1px solid #eee !important; background: #f9f9f9 !important; flex-shrink: 0 !important; }
    #new-header .nh-quick-action { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 15px !important; text-decoration: none !important; color: #121212 !important; font-size: 14px !important; font-weight: 600 !important; border: none !important; background: transparent !important; cursor: pointer !important; transition: background 0.2s ease !important; }
    #new-header .nh-quick-action:first-child { border-right: 1px solid #eee !important; }
    #new-header .nh-quick-action:hover { background: #f0f0f0 !important; }
    #new-header .nh-quick-action svg { width: 20px !important; height: 20px !important; }
    
    /* Mobile Nav Inner (Scrollable) */
    #new-header .nh-nav-inner {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: calc(100vh - 130px) !important;
        max-height: calc(100dvh - 130px) !important;
        max-height: calc((var(--vh, 1vh) * 100) - 130px) !important;
    }
    #new-header .nh-nav-menu { flex-direction: column !important; padding: 10px 0 !important; margin: 0 !important; list-style: none !important; }
    #new-header .nh-nav-menu > li { border-bottom: 1px solid #f0f0f0 !important; }
    #new-header .nh-nav-menu > li > a { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 16px 20px !important; font-size: 15px !important; font-weight: 600 !important; color: #121212 !important; text-decoration: none !important; }
    #new-header .nh-nav-menu > li > a .arrow-icon { display: none !important; }
    #new-header .nh-nav-menu > li > a .expand-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; background: #f0f0f0 !important; border-radius: 6px !important; font-size: 18px !important; font-weight: 400 !important; color: #666 !important; transition: all 0.2s ease !important; cursor: pointer !important; margin-left: auto !important; }
    #new-header .nh-nav-menu > li.menu-open > a .expand-icon { background: #f8a81a !important; color: #000 !important; }
    
    /* Mobile Dropdowns */
    #new-header .nh-nav-menu .nh-dropdown,
    #new-header .nh-nav-menu .subMenu { display: none !important; position: static !important; box-shadow: none !important; background: #f5f5f5 !important; padding: 0 !important; margin: 0 !important; list-style: none !important; min-width: 100% !important; border-radius: 0 !important; }
    #new-header .nh-nav-menu > li.menu-open > .nh-dropdown,
    #new-header .nh-nav-menu > li.menu-open > .subMenu { display: block !important; }
    #new-header .nh-nav-menu .nh-dropdown li a,
    #new-header .nh-nav-menu .subMenu li a { display: block !important; padding: 12px 20px 12px 35px !important; font-size: 14px !important; font-weight: 500 !important; color: #444 !important; text-decoration: none !important; border-bottom: 1px solid #eee !important; }
    #new-header .nh-nav-menu .nh-dropdown li:last-child a,
    #new-header .nh-nav-menu .subMenu li:last-child a { border-bottom: none !important; }
    #new-header .nh-nav-menu > li:hover > a { background: transparent !important; color: #121212 !important; }
    #new-header .nh-nav-menu > li:hover:not(.menu-open) > .nh-dropdown,
    #new-header .nh-nav-menu > li:hover:not(.menu-open) > .subMenu { display: none !important; }
    
    /* Mobile: Hide Mega Menu */
    #new-header .mega-menu { display: none !important; }
    
    /* Mobile Overlay - Covers full dynamic viewport */
    #new-header .nh-overlay.open {
        z-index: 10000 !important;
        height: 100vh !important;
        height: 100dvh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
    }
}

/* Small Mobile */
@media (max-width: 767px) {
    #new-header .nh-utility { padding: 0 12px; height: 34px; }
    #new-header .nh-utility-left { gap: 12px; }
    #new-header .nh-utility-left a { font-size: 12px; }
    #new-header .nh-main { padding: 10px 12px; gap: 10px; }
    #new-header .nh-mobile-toggle { width: 40px; height: 40px; }
    #new-header .nh-logo img { max-height: 38px; }
    #new-header .nh-action { padding: 6px; }
    #new-header .nh-action svg { width: 24px; height: 24px; }
    #new-header .nh-search .search-form { height: 46px !important; }
    #new-header .nh-search #searchlight { font-size: 16px !important; }
}

@media (max-width: 480px) {
    /* Show the phone number on phones (trust signal); only Contact Us collapses to its icon */
    #new-header .nh-utility-left a + a span { display: none; }
    #new-header .nh-utility-left a[href^="tel:"] { font-size: 13px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
    #new-header .nh-logo img { max-height: 34px; }
    #new-header .nh-search .search-form { height: 44px !important; }
}

/* Desktop: Hide mobile menu elements */
@media (min-width: 992px) {
    #new-header .nh-menu-header,
    #new-header .nh-quick-actions { display: none !important; }
}

/* ==================== Z-INDEX FIXES ==================== */
/* Fix Termly/reCAPTCHA invisible overlay */
div:has(> iframe[data-termly-unknown-parent]) { pointer-events: none !important; }
div:has(> iframe[title*="recaptcha" i]) { pointer-events: none !important; }
iframe[data-termly-unknown-parent],
iframe[title*="recaptcha" i] { pointer-events: auto !important; }

/* Product dropdown z-index fix */
#divOptionsBlock,
#divOptionsBlock select,
.options select,
.dropdown-format select,
.options.sub-section,
#listing .options,
#listing select,
.listing-page select,
.product-details select { z-index: 100 !important; }

/* Quick Cart modal above header */
.qcart.qcart-modal.modal,
.qcart-modal.modal { z-index: 9999999 !important; }

/* Price Match Modal Fix */
#priceMatchModal { z-index: 9999999 !important; }
.modal-backdrop.in { z-index: 1040 !important; } /* Fixed: was 9999998 which blocked S4S modals */

/* Google Rating Badge positioning */
div[class*="ratingbadge"],
div[id*="ratingbadge"],
.___ratingbadge_0 {
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    z-index: 9999 !important;
}
/* ============================================================
   FARM & TRAIL - FOOTER v4.3 CSS
   Add this to the END of default_new.css
   All classes prefixed with ft- to avoid conflicts
   ============================================================ */

/* Hide old footer */
.tcd-footer { display: none !important; }

/* Hide footer newsletter on homepage (homepage has newsletter in main content) */
body.home-page .ft-newsletter-section { display: none; }

/* Hide footer newsletter on homepage (homepage has .home-page-content) */
body:has(.home-page-content) .ft-newsletter-section { display: none; }

/* ============================================================
   FOOTER BASE
   ============================================================ */
.ft-footer {
    background: #0d0d0d;
    color: #a0a0a0;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    position: relative;
    float: left;
    width: 100%;
}

.ft-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
    pointer-events: none;
}

.ft-footer * { box-sizing: border-box; }

.ft-accent {
    height: 4px;
    background: linear-gradient(90deg, #f8a81a 0%, #ff5e00 100%);
}

.ft-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 30px 0;
    position: relative;
}

/* ============================================================
   DESKTOP MAIN LAYOUT
   ============================================================ */
.ft-main {
    display: grid;
    grid-template-columns: 280px repeat(4, 1fr);
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #222;
}

/* ============================================================
   CONTACT BOX
   ============================================================ */
.ft-contact-box {
    background: linear-gradient(135deg, #1a1a1a 0%, #141414 100%);
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 28px 24px;
}

.ft-contact-box h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ft-contact-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.ft-phone-big {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #f8a81a;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
}

.ft-phone-big svg {
    width: 28px;
    height: 28px;
    stroke: #f8a81a;
    flex-shrink: 0;
}

.ft-phone-big:hover { color: #fff; }
.ft-phone-big:hover svg { stroke: #fff; }

.ft-contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #a0a0a0;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.ft-contact-link svg {
    width: 18px;
    height: 18px;
    stroke: #666;
    flex-shrink: 0;
}

.ft-contact-link:hover { color: #f8a81a; }
.ft-contact-link:hover svg { stroke: #f8a81a; }

.ft-hours {
    border-top: 1px solid #333;
    padding-top: 16px;
}

.ft-hours-title {
    color: #666;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.ft-hours-text { color: #a0a0a0; font-size: 14px; }
.ft-hours-text span { color: #fff; font-weight: 600; }

/* ============================================================
   LINK COLUMNS
   ============================================================ */
.ft-col { display: flex; flex-direction: column; }

.ft-col h4 {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 18px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #f8a81a;
}

.ft-col a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 0;
    transition: all 0.2s ease;
    display: block;
}

.ft-col a:hover {
    color: #f8a81a;
    padding-left: 6px;
}

/* ============================================================
   MOBILE CONTACT (Hidden on Desktop)
   ============================================================ */
.ft-mobile-contact { display: none; }

/* ============================================================
   MOBILE ACCORDION (Hidden on Desktop)
   ============================================================ */
.ft-accordion { display: none; }

/* ============================================================
   NEWSLETTER SECTION
   ============================================================ */
.ft-newsletter-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 30px 0;
    border-bottom: 1px solid #222;
}

.ft-newsletter-label {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.ft-nl-form-wrap { 
    width: 100%; 
    max-width: 380px; 
}

.ft-nl-form {
    display: flex;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.ft-nl-form .ft-nl-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    outline: none !important;
    min-width: 0;
    height: auto !important;
    box-shadow: none !important;
}

.ft-nl-form .ft-nl-input::placeholder { color: #666; }

.ft-nl-form .ft-nl-btn {
    background: #f8a81a !important;
    border: none !important;
    padding: 0 20px !important;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    min-width: 50px;
}

.ft-nl-form .ft-nl-btn:hover { background: #ff5e00 !important; }

.ft-nl-form .ft-nl-btn svg {
    width: 20px;
    height: 20px;
    stroke: #0d0d0d;
}

.ft-nl-form .ft-nl-btn-load {
    color: #0d0d0d;
    font-weight: bold;
}

.ft-nl-response {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
}

/* Hide subscribe/unsubscribe radio buttons in footer (keep it simple) */
.ft-maillist-options { display: none; }

/* Response messages */
.ft-nl-response { margin-top: 12px; text-align: center; font-size: 13px; }
.ft-nl-response .mailinglist-error { color: #ff6b6b; }
.ft-nl-response .mailinglist-subscribed { color: #69db7c; }
.ft-nl-response .mailinglist-unsubscribed { color: #69db7c; }
.ft-nl-response .hidden { display: none; }

/* ============================================================
   BOTTOM BAR (Social + Payments)
   ============================================================ */
.ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 0;
    border-bottom: 1px solid #222;
}

.ft-social { display: flex; gap: 12px; }

.ft-social a {
    width: 40px;
    height: 40px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ft-social a:hover {
    background: #f8a81a;
    border-color: #f8a81a;
}

/* All social icons use fill */
.ft-social svg {
    width: 18px;
    height: 18px;
    fill: #a0a0a0;
    stroke: none;
    transition: fill 0.2s ease;
}

.ft-social a:hover svg { 
    fill: #0d0d0d; 
    stroke: none;
}

.ft-payments { display: flex; gap: 8px; }

.ft-pay {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ft-pay-visa { color: #1a1f71; }
.ft-pay-mc { color: #eb001b; }
.ft-pay-amex { color: #006fcf; }
.ft-pay-disc { color: #ff6000; }
.ft-pay-paypal { color: #003087; }

/* ============================================================
   LEGAL BAR
   ============================================================ */
.ft-legal {
    background: #080808;
    padding: 20px 30px;
}

.ft-legal-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ft-copy { color: #666; font-size: 12px; }

.ft-legal-links { display: flex; gap: 25px; }

.ft-legal-links a {
    color: #666;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s ease;
}

.ft-legal-links a:hover { color: #f8a81a; }

/* ============================================================
   RESPONSIVE: TABLET (max-width: 1100px)
   ============================================================ */
@media (max-width: 1100px) {
    .ft-main {
        grid-template-columns: 260px repeat(2, 1fr);
        gap: 30px;
    }
    .ft-contact-box { grid-row: span 2; }
}

/* ============================================================
   RESPONSIVE: SMALLER TABLET (max-width: 960px)
   ============================================================ */
@media (max-width: 960px) {
    .ft-main { grid-template-columns: repeat(2, 1fr); }
    .ft-contact-box { grid-column: span 2; grid-row: auto; }
}

/* ============================================================
   RESPONSIVE: MOBILE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    .ft-container { padding: 0; }
    .ft-main { display: none; }
    
    /* Mobile Contact */
    .ft-mobile-contact {
        display: block;
        padding: 30px 20px;
        border-bottom: 1px solid #222;
    }
    
    .ft-mobile-contact-inner {
        background: linear-gradient(135deg, #1a1a1a 0%, #141414 100%);
        border: 1px solid #2a2a2a;
        border-radius: 12px;
        padding: 24px 20px;
        text-align: center;
    }
    
    .ft-mobile-contact h3 {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 16px 0;
        text-transform: uppercase;
    }
    
    .ft-mobile-phone {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: #f8a81a;
        color: #0d0d0d;
        font-size: 20px;
        font-weight: 700;
        text-decoration: none;
        padding: 14px 30px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    }
    
    .ft-mobile-phone svg {
        width: 24px;
        height: 24px;
        stroke: #0d0d0d;
    }
    
    .ft-mobile-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        padding-top: 16px;
        border-top: 1px solid #333;
    }
    
    .ft-mobile-info > a {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #a0a0a0;
        text-decoration: none;
        font-size: 13px;
    }
    
    .ft-mobile-info > a svg {
        width: 16px;
        height: 16px;
        stroke: #666;
    }
    
    .ft-mobile-hours {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
    
    .ft-mobile-hours-label {
        color: #666;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .ft-mobile-hours-text {
        color: #fff;
        font-size: 13px;
        font-weight: 600;
    }
    
    /* Mobile Accordion */
    .ft-accordion {
        display: block;
        border-bottom: 1px solid #222;
    }
    
    .ft-acc-item { border-bottom: 1px solid #222; }
    .ft-acc-item:last-child { border-bottom: none; }
    
    .ft-acc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    
    .ft-acc-header:hover { background: #1a1a1a; }
    
    .ft-acc-header h4 {
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .ft-acc-icon {
        width: 12px;
        height: 12px;
        position: relative;
    }
    
    .ft-acc-icon::before,
    .ft-acc-icon::after {
        content: '';
        position: absolute;
        background: #f8a81a;
        transition: transform 0.3s ease;
    }
    
    .ft-acc-icon::before { width: 12px; height: 2px; top: 5px; left: 0; }
    .ft-acc-icon::after { width: 2px; height: 12px; top: 0; left: 5px; }
    
    .ft-acc-item.open .ft-acc-icon::after { transform: rotate(90deg); }
    
    .ft-acc-content {
        display: none;
        padding: 0 20px 20px;
    }
    
    .ft-acc-item.open .ft-acc-content { display: block; }
    
    .ft-acc-content a {
        display: block;
        color: #a0a0a0;
        text-decoration: none;
        padding: 8px 0;
        font-size: 14px;
        border-bottom: 1px solid #1a1a1a;
    }
    
    .ft-acc-content a:last-child { border-bottom: none; }
    .ft-acc-content a:hover { color: #f8a81a; }
    
    /* Newsletter - Mobile */
    .ft-newsletter-section {
        flex-direction: column;
        gap: 12px;
        padding: 25px 20px;
    }
    
    .ft-newsletter-label { font-size: 14px; }
    .ft-nl-form-wrap { width: 100%; max-width: 100%; }
    
    /* Bottom bar - Mobile */
    .ft-bottom {
        flex-direction: column;
        gap: 20px;
        padding: 25px 20px;
    }
    
    .ft-social { gap: 10px; }
    .ft-social a { width: 44px; height: 44px; }
    
    .ft-payments { flex-wrap: wrap; justify-content: center; }
    
    /* Legal - Mobile */
    .ft-legal { padding: 20px; }
    
    .ft-legal-inner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .ft-legal-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
}

/* ============================================================
   RESPONSIVE: SMALL MOBILE (max-width: 400px)
   ============================================================ */
@media (max-width: 400px) {
    .ft-mobile-phone { font-size: 18px; padding: 12px 24px; }
    .ft-social a { width: 40px; height: 40px; }
    .ft-pay { padding: 5px 8px; font-size: 9px; }
}

/*                                                                
   HOME v7 ADDITIONS   appended to default_new.css
   All rules prefixed ft7- to avoid collisions with existing theme.
   Do not edit above this line.
                                                                   */


/*                                                                
   FARM & TRAIL   HOME v7 CUSTOM STYLES
   Prefix: ft7-
   Loaded inline in home.html. Appended after theme CSS.
                                                                   */

/*    Tokens    */
:root {
  --ft7-amber: #f8a81a;
  --ft7-amber-dk: #e09510;
  --ft7-black: #111111;
  --ft7-dark: #1c1c1c;
  --ft7-charcoal: #2a2828;
  --ft7-gray-70: #444444;
  --ft7-gray-50: #666666; /* was #777777: failed WCAG AA (4.48:1); #666 passes at 5.7:1 */
  --ft7-gray-20: #cccccc;
  --ft7-gray-10: #e8e8e8;
  --ft7-gray-05: #f5f5f2;
  --ft7-white: #ffffff;
  --ft7-rule: #e2e1da;
  --ft7-max: 1640px;
  --ft7-px: clamp(16px, 3vw, 48px);
}

/*    Overflow guard   prevent any ft7 element causing horizontal scroll    */
#home { overflow-x: hidden; }
.ft7-sec { overflow-x: hidden; }

/*    Section float fix   theme applies float:left to all <section> tags   
   Our <section> elements inherit this. Clear it and ensure block display.    */
section.ft7-sec { float: none !important; clear: both; display: block; }
div.ft7-sec     { float: none !important; display: block; }

/*    Base resets scoped to our sections    */
.ft7-sec { width: 100%; display: block; position: relative; }
.ft7-sec *, .ft7-sec *::before, .ft7-sec *::after { box-sizing: border-box; }
.ft7-sec img { border-radius: 0 !important; display: block; max-width: 100%; }
.ft7-sec a { text-decoration: none; }
.ft7-sec ul { list-style: none; margin: 0; padding: 0; }
.ft7-sec button { cursor: pointer; border: none; background: none; font-family: inherit; }

/*    Layout    */
.ft7-w {
  max-width: 1640px;
  max-width: var(--ft7-max, 1640px);
  margin: 0 auto;
  padding: 0 24px;
  padding: 0 var(--ft7-px, 24px);
  width: 100%;
  box-sizing: border-box;
}
.ft7-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  text-align: center;
}

/*    Typography    */
.ft7-kicker {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--ft7-amber);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.ft7-kicker::before { content: ''; width: 16px; height: 2px; background: var(--ft7-amber); flex-shrink: 0; }
.ft7-kicker-gray { color: var(--ft7-gray-50); }
.ft7-kicker-gray::before { background: var(--ft7-gray-20); }

.ft7-h-xl { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(32px,5vw,62px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.0; margin: 0; }
.ft7-h-lg { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(24px,3.5vw,44px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.05; margin: 0; }
.ft7-h-md { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(18px,2.5vw,28px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.1; margin: 0; }
.ft7-t-light { color: var(--ft7-white); }
.ft7-t-amber { color: var(--ft7-amber); }
.ft7-body { font-family: 'Barlow', sans-serif; font-size: 14px; line-height: 1.75; color: var(--ft7-gray-70); margin: 0; }
.ft7-body-light { color: rgba(255,255,255,0.6); }

/*    Buttons    */
.ft7-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  padding: 12px 24px; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.ft7-btn-amber  { background: var(--ft7-amber);  color: var(--ft7-black);  border: 2px solid var(--ft7-amber);  }
.ft7-btn-amber:hover  { background: var(--ft7-amber-dk); border-color: var(--ft7-amber-dk); color: var(--ft7-black); }
.ft7-btn-black  { background: var(--ft7-black);  color: var(--ft7-white);  border: 2px solid var(--ft7-black);  }
.ft7-btn-black:hover  { background: #333; border-color: #333; color: var(--ft7-white); }
.ft7-btn-outline { background: transparent; color: var(--ft7-dark); border: 2px solid var(--ft7-dark); }
.ft7-btn-outline:hover { background: var(--ft7-dark); color: var(--ft7-white); }
.ft7-btn-ghost  { background: transparent; color: var(--ft7-white); border: 2px solid rgba(255,255,255,.35); }
.ft7-btn-ghost:hover  { border-color: var(--ft7-amber); color: var(--ft7-amber); }

/*    Text links    */
.ft7-text-link {
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ft7-amber);
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; transition: gap .15s; text-decoration: none;
}
.ft7-text-link:hover { gap: 8px; color: var(--ft7-amber); }

/*    Topo textures    */
.ft7-topo-dark {
  background-color: #1c1c1c;
  background-color: var(--ft7-dark, #1c1c1c);
  overflow: hidden;
  background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20500'><g%20fill='none'%20stroke='%2523f8a81a'%20stroke-width='1.2'><path%20opacity='.18'%20d='M-50,120%20C20,80%2080,160%20160,140%20S280,60%20350,100%20S480,180%20560,140%20S680,50%20780,90%20S880,160%20950,120'/><path%20opacity='.12'%20d='M-50,160%20C30,110%20100,200%20180,175%20S310,90%20380,135%20S510,215%20590,175%20S710,80%20810,125%20S910,195%20980,160'/><path%20opacity='.18'%20d='M-50,200%20C40,145%20110,240%20200,210%20S340,120%20410,170%20S540,250%20620,210%20S740,110%20840,160%20S940,230%201010,200'/><path%20opacity='.12'%20d='M-50,240%20C50,180%20130,280%20220,245%20S370,150%20440,205%20S570,285%20650,245%20S770,140%20870,195%20S970,265%201040,240'/><path%20opacity='.18'%20d='M-50,280%20C60,215%20150,320%20240,280%20S400,180%20470,240%20S600,320%20680,280%20S800,170%20900,230%20S1000,300%201070,280'/><path%20opacity='.12'%20d='M-50,320%20C70,250%20160,360%20260,315%20S430,210%20500,275%20S630,355%20710,315%20S830,200%20930,265%20S1030,335%201100,320'/><path%20opacity='.18'%20d='M-50,360%20C80,285%20170,400%20280,350%20S460,240%20530,310%20S660,390%20740,350%20S860,230%20960,300%20S1060,370%201130,360'/><path%20opacity='.12'%20d='M-50,400%20C90,320%20180,440%20300,385%20S490,270%20560,345%20S690,425%20770,385%20S890,260%20990,335%20S1090,405%201160,400'/><path%20opacity='.22'%20d='M-50,80%20C80,20%20200,120%20320,70%20S520,160%20620,80%20S780,-20%20900,60%20S1040,140%201150,80'/><path%20opacity='.14'%20d='M100,0%20C80,60%20140,140%20180,100%20S240,20%20290,70%20S360,160%20400,100%20S460,10%20510,70%20S580,160%20620,90'/><path%20opacity='.22'%20d='M300,0%20C260,80%20340,180%20380,130%20S450,30%20510,90%20S590,190%20640,120%20S720,20%20780,80'/><path%20opacity='.14'%20d='M500,0%20C450,100%20540,200%20580,150%20S660,40%20720,110%20S800,200%20850,140'/><path%20opacity='.1'%20d='M-50,440%20C100,370%20250,480%20380,420%20S580,300%20660,380%20S820,490%20920,420'/><path%20opacity='.1'%20d='M650,0%20C600,120%20700,230%20750,170%20S840,50%20900,130%20S980,240%201020,180'/></g></svg>");
  background-size: 800px 500px;
  background-repeat: repeat;
}
.ft7-topo-light { position: relative; }
.ft7-topo-light::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('https://www.farmandtrail.com/assets/images/yello-topo-lines.webp');
  background-size: 860px auto;
  background-repeat: repeat;
  opacity: 0.11;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  max-width: 100%;
}
.ft7-topo-light > * { position: relative; z-index: 1; }
.ft7-topo-light-mid::before { opacity: 0.18; }

/*                                                           
   TRUST STRIP
                                                              */
.ft7-trust { border-bottom: 3px solid var(--ft7-amber); width: 100%; display: block; overflow: hidden; }
.ft7-trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}
.ft7-trust-item {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 20px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.ft7-trust-item:last-child { border-right: none; }
.ft7-trust-icon { color: var(--ft7-amber); flex-shrink: 0; }
.ft7-trust-icon svg { width: 22px; height: 22px; display: block; }
.ft7-trust-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ft7-white); line-height: 1.2;
  display: block;
}
.ft7-trust-sub { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 2px; display: block; }
@media (max-width: 767px) {
  .ft7-trust-inner { grid-template-columns: repeat(2,1fr); }
  .ft7-trust-item { padding: 14px; }
  .ft7-trust-item:nth-child(2) { border-right: none; }
  .ft7-trust-item:nth-child(3),
  .ft7-trust-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08); }
  .ft7-trust-item:nth-child(4) { border-right: none; }
}

/*                                                           
   DEPARTMENT CAROUSELS
                                                              */
.ft7-dept { background: var(--ft7-gray-05); padding: 48px 0 0; border-bottom: 1px solid var(--ft7-rule); }
.ft7-dept-tabs {
  display: flex; justify-content: flex-start; border-bottom: 2px solid var(--ft7-gray-10);
  overflow-x: auto; scrollbar-width: none; touch-action: pan-x; margin-bottom: 0;
  padding: 0 4px;
}
@media (min-width: 640px) {
  .ft7-dept-tabs { justify-content: center; }
}
.ft7-dept-tabs::-webkit-scrollbar { display: none; }
.ft7-dept-tab {
  display: inline-flex; align-items: center;
  padding: 0 22px; height: 42px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ft7-gray-50); border: none; border-bottom: 3px solid transparent;
  background: none; white-space: nowrap; flex-shrink: 0; cursor: pointer;
  transition: color .15s, background .15s; margin-bottom: -2px;
  border-radius: 2px 2px 0 0;
}
/* Hide icons */
.ft7-dept-tab svg { display: none; }
.ft7-dept-tab:hover { color: var(--ft7-black); background: rgba(248,168,26,0.08); }
.ft7-dept-tab.active {
  color: var(--ft7-black);
  background: var(--ft7-amber, #f8a81a);
  border-bottom-color: var(--ft7-amber, #f8a81a);
}
.ft7-dept-panel { display: none; }
.ft7-dept-panel.active { display: block; animation: ft7FadeUp .16s ease; }
@keyframes ft7FadeUp { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

.ft7-subnav {
  display: flex; align-items: center; justify-content: flex-start; overflow-x: auto;
  scrollbar-width: none; touch-action: pan-x;
  border-bottom: 1px solid var(--ft7-gray-10); gap: 0;
  padding: 0 4px;
}
@media (min-width: 640px) {
  .ft7-subnav { justify-content: center; }
}
.ft7-subnav::-webkit-scrollbar { display: none; }
.ft7-sub-tab {
  padding: 10px 14px; font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--ft7-gray-50); background: none; border: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
  flex-shrink: 0; cursor: pointer; transition: color .15s, border-color .15s; margin-bottom: -1px;
}
.ft7-sub-tab:hover { color: var(--ft7-black); }
.ft7-sub-tab.active { color: var(--ft7-amber-dk); border-bottom-color: var(--ft7-amber-dk); font-weight: 700; }
.ft7-view-all {
  margin-left: auto; padding: 10px 0 10px 14px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ft7-amber-dk); white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  transition: gap .15s; text-decoration: none;
}
.ft7-view-all:hover { gap: 8px; color: var(--ft7-amber-dk); }

.ft7-carousel-zone { position: relative; padding-bottom: 36px; }
.ft7-carousel-nav { display: flex; justify-content: flex-end; gap: 4px; padding: 14px 0 10px; }
.ft7-carousel-btn {
  width: 32px !important; height: 32px !important;
  background: #444 !important;
  border: 1px solid #555 !important;
  color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-indent: 0 !important;
  font-size: 0 !important;
}
.ft7-carousel-btn svg {
  width: 14px !important; height: 14px !important;
  pointer-events: none; flex-shrink: 0;
  display: block !important;
}
.ft7-carousel-btn:hover,
.ft7-carousel-btn:focus {
  background: #f8a81a !important;
  border-color: #f8a81a !important;
  color: #111 !important;
  opacity: 1 !important;
}

/* Product cards */
.ft7-prod-card {
  background: var(--ft7-white); border: 1px solid var(--ft7-gray-10);
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s; min-height: 270px;
}
.ft7-prod-card:hover { border-color: var(--ft7-amber); box-shadow: 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.ft7-prod-img { aspect-ratio: 1; overflow: hidden; background: var(--ft7-white); flex-shrink: 0; position: relative; }
.ft7-prod-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
/* Blur dissolve hover swap   mirrors the FT8 card system.
   ft7-img2 sits behind ft7-img1, hidden at rest to prevent multiply bleed.
   On hover: img1 blurs+fades out, img2 fades in sharp.
   Cards without a second image: img has no class, unaffected. */
.ft7-prod-img .ft7-img1 { position: absolute; top: 0; left: 0; z-index: 2; filter: blur(0); transition: opacity .35s ease, filter .3s ease; }
.ft7-prod-img .ft7-img2 { position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; filter: blur(0); transition: opacity .4s ease, filter .4s ease; }
.ft7-prod-card:hover .ft7-prod-img .ft7-img2 { opacity: 1; }
.ft7-prod-card:hover .ft7-prod-img .ft7-img2 ~ .ft7-img1 { opacity: 0; filter: blur(8px); }
.ft7-prod-body { padding: 8px 10px 12px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.ft7-prod-name {
  font-size: 11px; font-weight: 600; color: var(--ft7-dark); line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.6em;
}
.ft7-prod-stock { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #3a8a3a; }
.ft7-prod-stock.out { color: #b94040; }
.ft7-prod-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ft7-gray-10);
}
.ft7-prod-price { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 800; color: var(--ft7-black); }
.ft7-prod-price sup { font-size: 10px; font-weight: 500; color: var(--ft7-gray-50); vertical-align: super; margin-right: 1px; }
.ft7-prod-price.sale { display: flex; flex-direction: column; line-height: 1.05; }
.ft7-prod-was { font-size: 12px; font-weight: 500; color: var(--ft7-gray-50); text-decoration: line-through; }
.ft7-prod-now { font-size: 18px; font-weight: 800; color: #d92027; }
.ft7-prod-cta { display: inline-flex; align-items: center; gap: 5px; background: var(--ft7-amber); color: var(--ft7-black); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 6px 10px; white-space: nowrap; transition: background .15s; }
.ft7-prod-cta svg { width: 11px; height: 11px; flex-shrink: 0; }
.ft7-prod-card:hover .ft7-prod-cta { background: var(--ft7-amber-dk); }
.ft7-prod-viewall {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; min-height: 270px;
  background: var(--ft7-gray-05); border: 1px solid var(--ft7-gray-10);
  text-decoration: none; text-align: center; padding: 20px;
  transition: background .2s, border-color .2s;
}
.ft7-prod-viewall:hover { background: var(--ft7-amber); border-color: var(--ft7-amber); }
.ft7-prod-viewall-txt {
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ft7-black); line-height: 1.3;
}
.ft7-loading {
  display: flex; align-items: center; justify-content: center; min-height: 260px;
  color: var(--ft7-gray-20); font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; gap: 10px;
}
.ft7-loading::before {
  content: ''; width: 14px; height: 14px;
  border: 2px solid var(--ft7-gray-10); border-top-color: var(--ft7-amber);
  border-radius: 50%; animation: ft7Spin .7s linear infinite;
}
@keyframes ft7Spin { to { transform: rotate(360deg); } }
.ft7-swiper, .ft7-carousel-wrap { touch-action: pan-y !important; }
.ft7-swiper .swiper-wrapper { touch-action: pan-y !important; }
.ft7-collection:not(.active) { display: none !important; }

/*                                                           
   TWEEL VIDEO HERO
                                                              */
.ft7-tweel {
  position: relative; min-height: 420px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; border-top: 4px solid var(--ft7-amber);
}
.ft7-tweel-video-wrap { position: absolute; inset: 0; }
.ft7-tweel-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Suppress native controls on all browsers */
  -webkit-media-controls: none;
}
/* Hide browser play button overlay on mobile */
.ft7-tweel-video::-webkit-media-controls { display: none !important; }
.ft7-tweel-video::-webkit-media-controls-enclosure { display: none !important; }
.ft7-tweel-video::-webkit-media-controls-panel { display: none !important; }
.ft7-tweel-video::-webkit-media-controls-play-button { display: none !important; }
/* If video is hidden (autoplay blocked), show section bg color instead */
.ft7-tweel-video-wrap:has(video[style*="display: none"]) {
  background: #111;
}
.ft7-tweel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.65) 45%, rgba(0,0,0,.2) 100%);
}
.ft7-tweel-content-wrap { position: relative; z-index: 2; padding: 60px 0; }
.ft7-tweel-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.ft7-tweel-left { max-width: 480px; }
.ft7-tweel-badge {
  display: inline-block; background: var(--ft7-amber); color: var(--ft7-black);
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase; padding: 4px 12px;
}
.ft7-tweel-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.ft7-tweel-specs { flex-shrink: 0; }
.ft7-tweel-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1);
}
.ft7-tweel-stat {
  background: rgba(0,0,0,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 20px 24px; display: flex; flex-direction: column; gap: 4px;
}
.ft7-tweel-stat-num {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(28px,3.5vw,42px);
  font-weight: 900; color: var(--ft7-amber); line-height: 1;
}
.ft7-tweel-stat-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.55); line-height: 1.4;
}
@media (max-width: 767px) {
  .ft7-tweel { min-height: 320px; }
  .ft7-tweel-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .ft7-tweel-specs { width: 100%; }
  .ft7-tweel-stat-grid { grid-template-columns: repeat(4,1fr); }
  .ft7-tweel-stat { padding: 14px 16px; }
  .ft7-tweel-stat-num { font-size: 24px; }
}
@media (max-width: 480px) { .ft7-tweel-stat-grid { grid-template-columns: repeat(2,1fr); } }

/*                                                           
   SPRING SPOTLIGHT TILES
                                                              */
.ft7-spring { background: var(--ft7-white); border-bottom: 1px solid var(--ft7-rule); }
.ft7-spring-header { padding: 48px 0 28px; }
.ft7-spring-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* aspect-ratio replaces the old fixed 340px/340px (680px total) rows.
     12/5 keeps large-desktop height close to the previous look (~683px at
     1640px container) while scaling down proportionally on medium screens
     instead of staying rigidly 680px regardless of viewport. */
  aspect-ratio: 12 / 5;
  gap: 3px;
}
.ft7-spring-grid > *:first-child { grid-row: span 2; }
.ft7-tile {
  position: relative; overflow: hidden; background: var(--ft7-dark);
  text-decoration: none; color: var(--ft7-white);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ft7-tile-img { position: absolute; inset: 0; overflow: hidden; }
.ft7-tile-img img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .4s, transform .55s cubic-bezier(.25,.46,.45,.94); }
.ft7-tile:hover .ft7-tile-img img { opacity: .7; transform: scale(1.05); }
.ft7-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 50%, transparent 100%);
  pointer-events: none;
}
.ft7-tile::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0;
  width: 4px; background: var(--ft7-amber);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1); z-index: 3;
}
.ft7-tile:hover::before { transform: scaleY(1); }
.ft7-tile-body { position: relative; z-index: 2; padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.ft7-tile-tag {
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--ft7-amber); align-self: flex-start;
}
.ft7-tile-name {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(18px,2.2vw,26px);
  font-weight: 900; text-transform: uppercase; letter-spacing: .5px; line-height: 1.1; color: var(--ft7-white);
}
.ft7-spring-grid > *:first-child .ft7-tile-name { font-size: clamp(22px,2.8vw,36px); }
.ft7-tile-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.7);
  opacity: 0; transform: translateY(6px); transition: opacity .22s, transform .22s; margin-top: 4px;
}
.ft7-tile:hover .ft7-tile-cta { opacity: 1; transform: translateY(0); }
@media (max-width: 767px) {
  .ft7-spring-grid { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; }
  .ft7-spring-grid > *:first-child { grid-row: span 1; aspect-ratio: 4 / 3; }
  .ft7-tile { aspect-ratio: 16 / 10; }
  .ft7-tile-cta { opacity: 1; transform: translateY(0); }
}

/*                                                           
   BLOG STRIP
                                                              */
.ft7-blog { background: var(--ft7-gray-05); padding: 56px 0; border-top: 1px solid var(--ft7-rule); border-bottom: 1px solid var(--ft7-rule); }

/* Override platform blogList styles within our section */
.ft7-blog .ft7-blog-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 16px !important;
  margin: 0 !important; padding: 0 !important;
}
.ft7-blog-card {
  background: var(--ft7-white); border: 1px solid var(--ft7-rule);
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: border-color .18s, box-shadow .18s;
}
.ft7-blog-card:hover { border-color: var(--ft7-amber); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.ft7-blog-img { aspect-ratio: 16/9; overflow: hidden; background: var(--ft7-gray-10); }
.ft7-blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.ft7-blog-card:hover .ft7-blog-img img { transform: scale(1.04); }
.ft7-blog-body {
  padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column;
  gap: 6px; border-top: 3px solid var(--ft7-amber);
}
.ft7-blog-date { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ft7-gray-50); }
.ft7-blog-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .3px; color: var(--ft7-black);
  line-height: 1.25; flex: 1; margin: 0;
}
.ft7-blog-card:hover .ft7-blog-title { color: var(--ft7-amber-dk); }
.ft7-blog-read {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ft7-amber-dk); margin-top: 6px;
}
@media (max-width: 767px) { .ft7-blog .ft7-blog-grid { grid-template-columns: 1fr !important; } }
@media (min-width: 600px) and (max-width: 991px) { .ft7-blog .ft7-blog-grid { grid-template-columns: repeat(2,1fr) !important; } }

/*                                                           
   SHARE YOUR RIG
                                                              */
.ft7-rig { border-top: 3px solid var(--ft7-amber); }
.ft7-rig-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; }
.ft7-rig-img { position: relative; overflow: hidden; background: var(--ft7-charcoal); }
.ft7-rig-img img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .3s, transform .5s; display: block; }
.ft7-rig:hover .ft7-rig-img img { opacity: .9; transform: scale(1.03); }
.ft7-rig-content {
  padding: clamp(28px,4vw,64px); display: flex; flex-direction: column;
  justify-content: center; gap: 16px;
}
.ft7-rig-specs { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; margin-top: 4px; }
.ft7-rig-spec { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.65); }
.ft7-rig-spec svg { flex-shrink: 0; color: var(--ft7-amber); width: 15px; height: 15px; display: block; }
@media (max-width: 767px) {
  .ft7-rig-inner { grid-template-columns: 1fr; }
  .ft7-rig-img { aspect-ratio: 16/7; }
}

/*                                                           
   BRAND LOGOS
                                                              */
.ft7-brands { background: var(--ft7-white); padding: 36px 0; border-top: 1px solid var(--ft7-rule); border-bottom: 1px solid var(--ft7-rule); }
.ft7-brands-head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.ft7-brands-rule { flex: 1; height: 1px; background: var(--ft7-rule); }
.ft7-brands-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--ft7-gray-20); white-space: nowrap;
}
.ft7-brand-grid {
  display: grid; grid-template-columns: repeat(7,1fr);
  gap: 1px; background: var(--ft7-rule); border: 1px solid var(--ft7-rule);
}
.ft7-brand-item {
  background: var(--ft7-white); display: flex; align-items: center; justify-content: center;
  padding: 18px 20px; transition: background .2s; text-decoration: none;
}
.ft7-brand-item:hover { background: var(--ft7-gray-05); }
.ft7-brand-item img { max-height: 38px; width: auto; object-fit: contain; filter: grayscale(1) opacity(.45); transition: filter .25s; display: block; }
.ft7-brand-item:hover img { filter: grayscale(0) opacity(1); }
@media (max-width: 767px) { .ft7-brand-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 480px) { .ft7-brand-grid { grid-template-columns: repeat(3,1fr); } }

/*                                                           
   FLEET BANNER
                                                              */
.ft7-fleet {
  border-top: 3px solid var(--ft7-amber);
  padding: 52px 24px;
  padding: 52px var(--ft7-px, 24px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  max-width: 1640px;
  max-width: var(--ft7-max, 1640px);
  margin: 0 auto;
}
/* Outer fleet wrapper needs to be full-width */
.ft7-topo-dark.ft7-sec:has(.ft7-fleet) {
  display: flex;
  justify-content: center;
}
.ft7-fleet-left { max-width: 640px; }
.ft7-fleet-kicker {
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--ft7-amber); margin-bottom: 8px; display: block;
}
.ft7-fleet-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(22px,3vw,38px);
  font-weight: 900; text-transform: uppercase; color: var(--ft7-white);
  line-height: 1.05; margin-bottom: 10px;
}
.ft7-fleet-body { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.65; }
.ft7-fleet-body a { color: var(--ft7-amber); font-weight: 700; }
@media (max-width: 600px) { .ft7-fleet { flex-direction: column; align-items: flex-start; } }

/*                                                           
   NEWSLETTER
                                                              */
.ft7-nl {
  background: var(--ft7-gray-05); border-top: 1px solid var(--ft7-rule);
  padding: 56px 24px;
  padding: 56px var(--ft7-px, 24px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  box-sizing: border-box;
}
.ft7-nl-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(26px,4vw,44px);
  font-weight: 900; text-transform: uppercase; color: var(--ft7-black); margin: 4px 0;
}
.ft7-nl-sub { font-size: 14px; color: var(--ft7-gray-50); margin-bottom: 16px; max-width: 380px; }
.ft7-nl-form { display: flex; width: 100%; max-width: 440px; }
.ft7-nl-input {
  flex: 1; background: var(--ft7-white); border: 1px solid var(--ft7-gray-10);
  border-right: none; font-size: 14px; padding: 12px 16px; outline: none;
  transition: border-color .15s; color: var(--ft7-black);
}
.ft7-nl-input::placeholder { color: var(--ft7-gray-20); }
.ft7-nl-input:focus { border-color: var(--ft7-amber); }
.ft7-nl-btn {
  background: var(--ft7-amber); color: var(--ft7-black);
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; padding: 0 20px;
  border: 1px solid var(--ft7-amber); cursor: pointer; transition: background .15s; white-space: nowrap;
}
.ft7-nl-btn:hover { background: var(--ft7-amber-dk); border-color: var(--ft7-amber-dk); }
@media (max-width: 480px) {
  .ft7-nl-form { flex-direction: column; }
  .ft7-nl-input { border-right: 1px solid var(--ft7-gray-10); border-bottom: none; }
  .ft7-nl-btn { padding: 12px; }
}
/*    Newsletter   adapt platform's column layout to our light section   
   Base CSS stacks input then button vertically (flex-direction: column).
   We work with that layout, just restyling colors for the light bg.    */
.ft7-nl .mailinglist-form {
  max-width: 440px !important;
  width: 100% !important;
}
.ft7-nl .mailinglist-input.form-control {
  background: #ffffff !important;
  border: 2px solid #e8e8e8 !important;
  color: #111111 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  padding: 14px 16px !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
}
.ft7-nl .mailinglist-input.form-control::placeholder {
  color: #aaaaaa !important;
}
.ft7-nl .mailinglist-input.form-control:focus {
  border-color: #f8a81a !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}
.ft7-nl .mailinglist-submit,
.ft7-nl .mailinglist-submit.btn,
.ft7-nl .mailinglist-submit.btn-default,
.ft7-nl .mailinglist-submit.btn:hover,
.ft7-nl .mailinglist-submit.btn-default:hover {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #f8a81a !important;
  color: #111111 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  height: auto !important;
  line-height: normal !important;
  box-shadow: none !important;
  width: 100% !important;
  cursor: pointer !important;
}
.ft7-nl .mailinglist-submit:hover {
  background: #e09510 !important;
  color: #111111 !important;
  opacity: 1 !important;
}




/*                                                               
   FT7 PLATFORM CLASS OVERRIDES
   Reskin the live platform HTML classes (homepage-blog-posts,
   share-rig-featured, tcd-mailing-wrap) to match ft7 design.
   No HTML changes required.
                                                                  */

/*    BLOG   override homepage-blog-posts    */
.homepage-blog-posts {
  background: var(--ft7-gray-05, #f5f5f2) !important;
  padding: 28px 0 32px !important;
  margin: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  float: none !important;
  width: 100% !important;
  display: block !important;
}
/* Constrain content to site max-width, centered */
.homepage-blog-posts .container {
  max-width: 1640px !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px, 3vw, 48px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Section heading   centered to match ft7 section style */
.homepage-blog-posts .header-specials {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(24px, 3.5vw, 44px) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--ft7-black, #111) !important;
  text-align: center !important;
  border-bottom: none !important;
  padding: 0 0 16px 0 !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.05 !important;
  position: static !important;
}
.homepage-blog-posts .header-specials span {
  background: transparent !important;
  padding: 0 !important;
}

/* Grid   3 columns */
.homepage-blog-posts .blogList {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
}
/* Neutralize clearfix:: after   interferes with grid row calculation */
.homepage-blog-posts .blogList.clearfix::after,
.homepage-blog-posts .blogList.clearfix::before {
  display: none !important;
  content: none !important;
  clear: none !important;
}
@media (max-width: 991px) and (min-width: 568px) {
  .homepage-blog-posts .blogList { grid-template-columns: repeat(2, 1fr) !important; }
  /* S4S renders 3 posts via [blog_recentposts]; at 2 columns the third wraps to
     a lone half-row. Hide it here - two clean cards. Full 3-up above 991px,
     single-column stack (all 3 visible) below 568px via the next breakpoint. */
  .homepage-blog-posts .blogList .blogPost:nth-child(3) { display: none !important; }
}
@media (max-width: 567px) {
  .homepage-blog-posts .blogList { grid-template-columns: 1fr !important; }
}

/* Card */
/* Override core.css: .blogList li { float:left; width:33.3%; padding:15px } */
.homepage-blog-posts .blogList li,
.homepage-blog-posts .blogPost {
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}
.homepage-blog-posts .blogPost {
  background: var(--ft7-white, #fff) !important;
  border: 1px solid var(--ft7-rule, #e2e1da) !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color .18s, box-shadow .18s !important;
  overflow: hidden !important;
  align-self: start !important;
}
.homepage-blog-posts .blogPost:hover {
  border-color: var(--ft7-amber, #f8a81a) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
}

/* Post image */
.homepage-blog-posts .post-image {
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
  background: var(--ft7-gray-10, #e8e8e8) !important;
  flex-shrink: 0 !important;
  min-height: 0 !important;
}
/* Cards with no image   post-content gets the amber top border directly */
.homepage-blog-posts .blogPost .post-image:empty,
.homepage-blog-posts .blogPost:not(:has(.post-image img)) .post-content {
  border-top: 3px solid var(--ft7-amber, #f8a81a) !important;
}
.homepage-blog-posts .post-image-container {
  width: 100% !important;
  height: 100% !important;
}
.homepage-blog-posts .post-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .4s !important;
  border-radius: 0 !important;
}
.homepage-blog-posts .blogPost:hover .post-image img {
  transform: scale(1.04) !important;
}

/* Post content */
.homepage-blog-posts .post-content {
  padding: 16px 18px 20px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  /* Amber top border always on   works for posts with and without images */
  border-top: 3px solid var(--ft7-amber, #f8a81a) !important;
  /* Ensure consistent min-height so short-content cards don't collapse */
  min-height: 120px !important;
}

/* Title */
.homepage-blog-posts .post-content h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  color: var(--ft7-black, #111) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  flex: 1 !important;
}
.homepage-blog-posts .post-content h3 a {
  color: inherit !important;
  text-decoration: none !important;
}
.homepage-blog-posts .blogPost:hover .post-content h3 a {
  color: var(--ft7-amber-dk, #e09510) !important;
}

/* Date */
.homepage-blog-posts .postDate {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--ft7-gray-50, #777) !important;
  float: none !important;
}

/* Post info row */
.homepage-blog-posts .post-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  float: none !important;
}

/* Read more link */
.homepage-blog-posts .post-readmore .btn.btn-default {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--ft7-amber-dk, #e09510) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.homepage-blog-posts .post-readmore .btn.btn-default:hover {
  color: var(--ft7-black, #111) !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* Hide excerpt content block */
.homepage-blog-posts #postContent.post {
  display: none !important;
}

/*    SHARE YOUR RIG   override share-rig-featured    */
.share-rig-featured {
  background: var(--ft7-dark, #1c1c1c) !important;
  background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20500'><g%20fill='none'%20stroke='%2523f8a81a'%20stroke-width='1.2'><path%20opacity='.18'%20d='M-50,120%20C20,80%2080,160%20160,140%20S280,60%20350,100%20S480,180%20560,140%20S680,50%20780,90%20S880,160%20950,120'/><path%20opacity='.12'%20d='M-50,160%20C30,110%20100,200%20180,175%20S310,90%20380,135%20S510,215%20590,175%20S710,80%20810,125%20S910,195%20980,160'/><path%20opacity='.18'%20d='M-50,200%20C40,145%20110,240%20200,210%20S340,120%20410,170%20S540,250%20620,210%20S740,110%20840,160%20S940,230%201010,200'/><path%20opacity='.12'%20d='M-50,240%20C50,180%20130,280%20220,245%20S370,150%20440,205%20S570,285%20650,245%20S770,140%20870,195%20S970,265%201040,240'/><path%20opacity='.18'%20d='M-50,280%20C60,215%20150,320%20240,280%20S400,180%20470,240%20S600,320%20680,280%20S800,170%20900,230%20S1000,300%201070,280'/><path%20opacity='.12'%20d='M-50,320%20C70,250%20160,360%20260,315%20S430,210%20500,275%20S630,355%20710,315%20S830,200%20930,265%20S1030,335%201100,320'/><path%20opacity='.18'%20d='M-50,360%20C80,285%20170,400%20280,350%20S460,240%20530,310%20S660,390%20740,350%20S860,230%20960,300%20S1060,370%201130,360'/><path%20opacity='.12'%20d='M-50,400%20C90,320%20180,440%20300,385%20S490,270%20560,345%20S690,425%20770,385%20S890,260%20990,335%20S1090,405%201160,400'/><path%20opacity='.22'%20d='M-50,80%20C80,20%20200,120%20320,70%20S520,160%20620,80%20S780,-20%20900,60%20S1040,140%201150,80'/><path%20opacity='.14'%20d='M100,0%20C80,60%20140,140%20180,100%20S240,20%20290,70%20S360,160%20400,100%20S460,10%20510,70%20S580,160%20620,90'/><path%20opacity='.22'%20d='M300,0%20C260,80%20340,180%20380,130%20S450,30%20510,90%20S590,190%20640,120%20S720,20%20780,80'/><path%20opacity='.14'%20d='M500,0%20C450,100%20540,200%20580,150%20S660,40%20720,110%20S800,200%20850,140'/><path%20opacity='.1'%20d='M-50,440%20C100,370%20250,480%20380,420%20S580,300%20660,380%20S820,490%20920,420'/><path%20opacity='.1'%20d='M650,0%20C600,120%20700,230%20750,170%20S840,50%20900,130%20S980,240%201020,180'/></g></svg>") !important;
  background-size: 800px 500px !important;
  background-repeat: repeat !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 3px solid var(--ft7-amber, #f8a81a) !important;
}
.share-rig-featured-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 420px !important;
  height: auto !important;
  max-width: 100% !important;
}
.share-rig-featured-image {
  overflow: hidden !important;
  position: relative !important;
}
.share-rig-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: .8 !important;
  transition: opacity .3s, transform .5s !important;
  display: block !important;
}
.share-rig-featured:hover .share-rig-featured-image img {
  opacity: .9 !important;
  transform: scale(1.03) !important;
}
.share-rig-featured-content {
  background: transparent !important;
  padding: clamp(28px, 4vw, 64px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 14px !important;
  border-left: none !important;
}
.share-rig-featured-content h2 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(24px, 3.5vw, 44px) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  line-height: 1.05 !important;
  color: var(--ft7-white, #fff) !important;
  margin: 0 !important;
  letter-spacing: .5px !important;
}
.share-rig-featured-content > p {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.6) !important;
  margin: 0 !important;
  max-width: 440px !important;
}
.share-rig-featured-content .featured-seasonal-btn,
.share-rig-featured-content a.featured-seasonal-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 13px 24px !important;
  background: var(--ft7-amber, #f8a81a) !important;
  color: var(--ft7-black, #111) !important;
  border: 2px solid var(--ft7-amber, #f8a81a) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: background .15s, border-color .15s !important;
  margin-top: 6px !important;
}
.share-rig-featured-content .featured-seasonal-btn:hover,
.share-rig-featured-content a.featured-seasonal-btn:hover {
  background: var(--ft7-amber-dk, #e09510) !important;
  border-color: var(--ft7-amber-dk, #e09510) !important;
  color: var(--ft7-black, #111) !important;
}
@media (max-width: 767px) {
  .share-rig-featured-container { grid-template-columns: 1fr !important; }
  .share-rig-featured-image { aspect-ratio: 16/7 !important; min-height: 0 !important; height: auto !important; }
  .share-rig-featured-content { padding: 28px 20px 32px !important; }
}

/*    NEWSLETTER   dark topo theme, white text    */
.tcd-mailing-wrap {
  float: none !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}
.tcd-mailing {
  background-color: #1c1c1c !important;
  padding: 56px 24px !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  text-align: center !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-top: 3px solid #f8a81a !important;
}
.tcd-mailing::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 100%) !important;
  z-index: 1 !important;
}
.tcd-mailing > *,
.tcd-mailing .mailist-box,
.tcd-mailing form,
.tcd-mailing .mailinglist-form,
.tcd-mailing #mailinglist-response,
.tcd-mailing .mailinglist-response {
  position: relative !important;
  z-index: 2 !important;
}
.tcd-mailing-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(26px, 4vw, 44px) !important;
  font-weight: 900 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
}
.tcd-mailing-subtext {
  font-size: 14px !important;
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 24px !important;
}
.mailist-box {
  width: 100% !important;
  max-width: 440px !important;
}
.mailinglist-input.form-control {
  background: rgba(255,255,255,0.08) !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  padding: 14px 16px !important;
  height: auto !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
}
.mailinglist-input.form-control::placeholder {
  color: rgba(255,255,255,0.5) !important;
}
.mailinglist-input.form-control:focus {
  border-color: #f8a81a !important;
  background: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
  outline: none !important;
}
.mailinglist-submit,
.mailinglist-submit.btn,
.mailinglist-submit.btn-default,
.mailinglist-submit.btn:hover,
.mailinglist-submit.btn-default:hover {
  background: #f8a81a !important;
  color: #111111 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  height: auto !important;
  line-height: normal !important;
  box-shadow: none !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}
.mailinglist-submit:hover {
  background: #e09510 !important;
}
.tcd-mailing-wrap .mailinglist-response,
.mailinglist-response {
  color: rgba(255,255,255,0.8) !important;
  background: transparent !important;
  text-align: center !important;
  margin: 10px auto 0 !important;
  padding: 10px !important;
  max-width: 440px !important;
  font-size: 14px !important;
  position: relative !important;
  z-index: 3 !important;
}
/* Ensure Bootstrap .hidden removal works   don't override display on shown state */
.tcd-mailing .mailinglist-error:not(.hidden),
.tcd-mailing .mailinglist-subscribed:not(.hidden),
.tcd-mailing .mailinglist-unsubscribed:not(.hidden) {
  display: block !important;
  position: relative !important;
  z-index: 3 !important;
}
.tcd-mailing-wrap .mailinglist-error,
.tcd-mailing-wrap .mailinglist-error span {
  color: #ff6b6b !important;
  font-weight: 600 !important;
}
.tcd-mailing-wrap .mailinglist-subscribed,
.tcd-mailing-wrap .mailinglist-subscribed span,
.tcd-mailing-wrap .mailinglist-unsubscribed,
.tcd-mailing-wrap .mailinglist-unsubscribed span {
  color: #69db7c !important;
  font-weight: 600 !important;
}

/*    FLEET BANNER   dark ft7 theme    */
.fleetbanner-wrapper {
  clear: both !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}
.fleetbanner-wrapper .fleetbanner {
  background: #1c1c1c !important;
  color: #ffffff !important;
  border-top: 4px solid #f8a81a !important;
  padding: 52px clamp(16px, 3vw, 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  min-height: 0 !important;
}
.fleetbanner-wrapper .fleetbanner h1,
.fleetbanner-wrapper .fleetbanner h2 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(22px, 3vw, 38px) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  line-height: 1.05 !important;
  margin: 0 0 4px 0 !important;
  text-align: center !important;
  width: 100% !important;
}
.fleetbanner-wrapper .fleetbanner p {
  font-size: 14px !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 2px 0 !important;
  line-height: 1.65 !important;
  text-align: center !important;
}
.fleetbanner-wrapper .fleetbanner p a {
  color: #f8a81a !important;
  font-weight: 700 !important;
}
.fleetbanner-wrapper .fleetbanner .btn {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background: #f8a81a !important;
  color: #111111 !important;
  border: 2px solid #f8a81a !important;
  border-radius: 0 !important;
  padding: 13px 32px !important;
  margin-top: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.fleetbanner-wrapper .fleetbanner .btn:hover {
  background: #e09510 !important;
  border-color: #e09510 !important;
  color: #111111 !important;
  opacity: 1 !important;
}
@media (max-width: 640px) {
  .fleetbanner-wrapper .fleetbanner {
    padding: 32px 20px !important;
  }
  .fleetbanner-wrapper .fleetbanner .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/*    Newsletter response visibility   
   Platform removes .hidden on success/error via AJAX.
   Ensure revealed divs are visible against dark background.    */
.tcd-mailing-wrap #mailinglist-response {
  display: block !important;
  color: rgba(255,255,255,0.8) !important;
  text-align: center !important;
  margin: 12px auto 0 !important;
  padding: 8px !important;
  max-width: 440px !important;
  font-size: 14px !important;
  position: relative !important;
  z-index: 3 !important;
}
/* Individual message states   shown when .hidden is removed by platform JS */
.tcd-mailing-wrap .mailinglist-error:not(.hidden) {
  display: block !important;
  color: #ff8a80 !important;
  font-weight: 600 !important;
  padding: 8px 0 !important;
}
.tcd-mailing-wrap .mailinglist-subscribed:not(.hidden),
.tcd-mailing-wrap .mailinglist-unsubscribed:not(.hidden) {
  display: block !important;
  color: #69db7c !important;
  font-weight: 600 !important;
  padding: 8px 0 !important;
}
.tcd-mailing-wrap .mailinglist-error span,
.tcd-mailing-wrap .mailinglist-subscribed span,
.tcd-mailing-wrap .mailinglist-unsubscribed span {
  color: inherit !important;
}

/* Newsletter response state visibility fixes */
/* .hidden class (platform) keeps these hidden until JS removes it */
.tcd-mailing-wrap .mailinglist-response .hidden { display: none !important; }
.tcd-mailing-wrap .mailinglist-error:not(.hidden),
.tcd-mailing-wrap .mailinglist-subscribed:not(.hidden),
.tcd-mailing-wrap .mailinglist-unsubscribed:not(.hidden) {
  display: block !important;
  padding: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
}
.tcd-mailing-wrap .mailinglist-error:not(.hidden) {
  color: #ff6b6b !important;
}
.tcd-mailing-wrap .mailinglist-subscribed:not(.hidden),
.tcd-mailing-wrap .mailinglist-unsubscribed:not(.hidden) {
  color: #69db7c !important;
}
/* Also ensure the response container itself is visible when active */
.tcd-mailing-wrap #mailinglist-response {
  color: rgba(255,255,255,0.8) !important;
  position: relative !important;
  z-index: 3 !important;
}

/*                                                               
   COOLTOPS VIDEO FEATURE SECTION
                                                                  */
.ft7-ct-vid {
  background: #111111;
  padding: 0;
  overflow: hidden;
  border-top: 3px solid var(--ft7-amber, #f8a81a);
}
.ft7-ct-vid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 100%;
  /* Locks the WHOLE row's height to the video's own 16:9 ratio (32:9 across two
     half-width columns = each column works out to exactly 16:9). This makes the
     video authoritative for section height - text no longer grows the row taller
     than the video, which was causing letterbox bars above/below the video at
     medium desktop widths where full copy needed more vertical space than the
     video's natural height. align-items:stretch now fills both columns to this
     locked height with no side effects, since the height is fixed, not content-driven. */
  aspect-ratio: 32 / 9;
  align-items: stretch;
}

/*    Left: fills the parent's locked height exactly - no longer needs its own
   aspect-ratio, since .ft7-ct-vid-inner already guarantees a 16:9-shaped column. */
.ft7-ct-vid-left {
  position: relative;
  background: #000;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.ft7-ct-vid-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* fill -> cover: fill actively distorted the picture whenever the box
     wasn't exactly 16:9 (which the stretch bug above caused constantly).
     cover preserves the video's aspect ratio - with aspect-ratio:16/9 on
     the parent now matching the source exactly, cover renders pixel-
     identical to the undistorted video with zero cropping in practice. */
  object-fit: cover;
  display: block;
}
/* Suppress native controls */
.ft7-ct-vid-player::-webkit-media-controls { display: none !important; }
.ft7-ct-vid-player::-webkit-media-controls-enclosure { display: none !important; }

/*    Right: content   matches intrinsic video height    */
.ft7-ct-vid-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 64px);
  background: #1c1c1c;
  box-sizing: border-box;
  /* Row height is now fixed by the video's aspect-ratio (see .ft7-ct-vid-inner).
     overflow:hidden is a defensive clip - the copy-trim breakpoint below is the
     real mechanism keeping content within this fixed height at narrower widths. */
  overflow: hidden;
}

/*    Hide on mobile    */
@media (max-width: 767px) {
  .ft7-ct-vid { display: none !important; }
}

/* Copy scales down in tiers as the video-locked row gets shorter at narrower
   widths. Each threshold below was measured directly (rendered height vs content
   height) rather than guessed - full copy only actually fits above ~1900px;
   nearly every realistic desktop width needs some trimming once the row's height
   is locked to the video's own 16:9 ratio instead of growing to fit the text. */
@media (max-width: 1899px) {
  .ft7-ct-vid-right p.ft7-body-light { display: none; }
}
@media (max-width: 1499px) {
  .ft7-ct-bullets li:nth-child(4) { display: none; }
}
@media (max-width: 1299px) {
  .ft7-ct-bullets li:nth-child(3) { display: none; }
}
@media (max-width: 1109px) {
  .ft7-ct-bullets li:nth-child(2) { display: none; }
}
@media (max-width: 991px) {
  .ft7-ct-vid-right { padding: clamp(16px, 3vw, 32px); }
}

/* Kicker */
.ft7-ct-vid-right .ft7-kicker-gray {
  color: var(--ft7-gray-50, #777);
}

/* Bullet list */
.ft7-ct-bullets {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ft7-ct-bullets li {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.ft7-ct-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--ft7-amber, #f8a81a);
  border-radius: 50%;
}

/* CTA */
.ft7-ct-ctas {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/*    Mobile: stack vertically    */


/*                                                               
   AFFIRM FINANCING HERO
                                                                  */
.ft7-affirm {
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--ft7-amber, #f8a81a);
  padding: 0;
}
/* Lifestyle background image */
.ft7-affirm-bg {
  position: absolute;
  inset: 0;
  background: url('https://www.farmandtrail.com/assets/images/affirm-banner2.webp') center center / cover no-repeat;
  z-index: 0;
}
/* Dark gradient overlay   heavier on left for text legibility */
.ft7-affirm-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10,10,10,0.92) 0%,
    rgba(10,10,10,0.82) 45%,
    rgba(10,10,10,0.55) 100%
  );
  z-index: 1;
}
.ft7-affirm-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 52px) clamp(24px, 4vw, 72px);
  gap: clamp(32px, 5vw, 72px);
}

/*    Left column    */
.ft7-affirm-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ft7-affirm-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ft7-amber, #f8a81a);
  margin: 0;
}
.ft7-affirm-headline {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin: 0;
}
.ft7-affirm-sub {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  margin: 0;
  max-width: 400px;
}
.ft7-affirm-sub strong {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}
.ft7-affirm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.ft7-affirm-badges span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 10px;
  white-space: nowrap;
}
.ft7-affirm-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/*    Right column   3 steps    */
.ft7-affirm-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: clamp(20px, 2.5vw, 32px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ft7-affirm-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ft7-affirm-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ft7-affirm-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ft7-amber, #f8a81a);
  color: #111111;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ft7-affirm-step-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 5px;
}
.ft7-affirm-step-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ft7-affirm-step-text span {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}
/* Fine print disclosure */
.ft7-affirm-disclosure {
  font-size: 10px;
  line-height: 1.6;
  color: rgba(255,255,255,0.3);
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
}
.ft7-affirm-disclosure a {
  color: rgba(255,255,255,0.45);
  text-decoration: underline;
}

/*    Responsive    */
@media (max-width: 900px) {
  .ft7-affirm-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ft7-affirm-headline { font-size: clamp(34px, 8vw, 52px); }
  .ft7-affirm-right { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.cm_home #home {
  position: relative;
  top: -25px;
  margin-bottom: -25px;
}/* =============================================================================
   FARM & TRAIL LISTING FACELIFT   GLOBAL
   =============================================================================
   Append-only additions to default_new.css. Zero edits to existing rules.

   Activation: gated by body.ft-listing-active (added by JS in listing_0.html
   when DOMContentLoaded fires on a listing page). Pages without the class
   render exactly as before.

   Specificity strategy: chain "body.ft-listing-active #listing .target"
   = (1, 3, n). The existing site rules use "#listing .target" = (1, 2, n).
   Our chain wins by exactly one class without needing !important everywhere.
   We do use !important selectively where the global theme uses inline styles
   or where a future rule might be added that we want to keep losing to ours.

   Method-specific overrides (in listing_270.html) use body.method-listing
   which is independent   both classes can be present on Method merch parents,
   with method-listing's chain taking precedence over ft-listing-active.

   To revert: remove this entire section. To disable on a single page:
   add 'data-ft-listing-disable="1"' to the <body> tag and the JS will skip
   the body class entirely.
   ============================================================================= */

/* === Page background tone === */
body.ft-listing-active { background: #fafaf8; }

/* === 1. Compact meta row above the price =================================
   The HTML in listing_0.html now renders a single <p class="ft-listing-meta">
   with two inline links separated by a bullet:
       Ask A Question     Apply for PRO Program
   The phone link was removed (it lives in the site header + trust cell).
   "Outfitting a Fleet?" preamble was removed (the link is the action).
   ============================================================================ */
body.ft-listing-active #listing .ft-listing-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 4px 0 12px 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #777 !important;
    font-weight: 400 !important;
    /* Defense: the global theme floats various adjacent elements left/right.
       Force this paragraph to its own row at full width so nothing pushes it
       sideways (e.g., the H1 above is float:left width:100%, but if anything
       changes that, we need to be self-protecting). */
    float: none !important;
    clear: both !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
}
/* Defense for the moved create-review-link span: the global rule
   #listing span.create-review-link sets float:right + text-align:right.
   Once we move it into the flex row those should be ignored, but neutralize
   them explicitly to stop any rendering weirdness. */
body.ft-listing-active #listing .ft-listing-meta span.create-review-link {
    float: none !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
body.ft-listing-active #listing .ft-listing-meta-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #555 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 500 !important;
    padding: 2px 0 !important;
    transition: color 0.12s ease !important;
}
body.ft-listing-active #listing .ft-listing-meta-link:hover {
    color: #f8a81a !important;
    text-decoration: underline !important;
}
body.ft-listing-active #listing .ft-listing-meta-link i {
    color: #999 !important;
    font-size: 12px !important;
    margin: 0 !important;
}
body.ft-listing-active #listing .ft-listing-meta-link:hover i {
    color: #f8a81a !important;
}
body.ft-listing-active #listing .ft-listing-meta-sep {
    color: #ccc !important;
    margin: 0 12px !important;
    user-select: none !important;
    font-weight: 400 !important;
}
/* On very narrow viewports, separator hides and links wrap to their own lines */
@media (max-width: 380px) {
    body.ft-listing-active #listing .ft-listing-meta { gap: 4px 0 !important; flex-direction: column !important; align-items: flex-start !important; }
    body.ft-listing-active #listing .ft-listing-meta-sep { display: none !important; }
}

/* === 1b. Legacy p-tag fallback (in case any template still has the old
   two-paragraph structure during the rollout   keeps it from looking awful
   while pages get re-rendered/cached). Defensive: harmless if no <p> matches. */
body.ft-listing-active #listing .product-details > p:first-of-type,
body.ft-listing-active #listing .product-details > p:nth-of-type(2) {
    font-size: 13px !important;
    color: #777 !important;
    margin: 4px 0 !important;
    font-weight: 400 !important;
}
body.ft-listing-active #listing .product-details > p:first-of-type a,
body.ft-listing-active #listing .product-details > p:nth-of-type(2) a {
    color: #555 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}
body.ft-listing-active #listing .product-details > p:first-of-type strong,
body.ft-listing-active #listing .product-details > p:nth-of-type(2) strong {
    font-weight: 500 !important;
}
body.ft-listing-active #listing .product-details > p i {
    color: #999 !important;
}

/* === 2. Brand badge (eyebrow above the H1) ================================= */
.ft-listing-brand-badge {
    display: inline-block;
    background: #111111;
    color: #ffffff;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 3px;
    margin: 0 0 10px 0;
}

/* === 3. Title (H1) ========================================================= */
body.ft-listing-active #listing h1.page_headers {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: #111111 !important;
    letter-spacing: -0.2px !important;
    margin: 0 0 12px 0 !important;
    text-transform: none !important;
}

/* === 4. Reviews row (smaller, calmer) ======================================
   GLOBAL TO BEAT (default_new.css line 476):
     #listing .product-reviews {
         margin-top: 10px; margin-bottom: 15px; float: left; width: 100%;
         border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
         padding: 10px 0; display: flex; align-items: center; justify-content: space-between;
     }
   The two 1px borders bracket the row creating the visible divider lines
   above/below "Write a Review". We reset them and tighten margins.
   ============================================================================ */
body.ft-listing-active #listing .product-reviews {
    margin: 0 !important;
    font-size: 13px !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}
/* "Write a Review"   demote from amber pill to a small inline text-link
   that sits next to the star rating (or alone, when no reviews). */
body.ft-listing-active #listing span.create-review-link,
body.ft-listing-active #listing .product-reviews .create-review-link {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: left !important;
}
body.ft-listing-active #listing span.create-review-link a,
body.ft-listing-active #listing .product-reviews .createreview-link {
    background-color: transparent !important;
    background: none !important;
    color: #777 !important;
    font-weight: 500 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    float: none !important;
    display: inline !important;
}
body.ft-listing-active #listing span.create-review-link a:hover,
body.ft-listing-active #listing .product-reviews .createreview-link:hover {
    background: none !important;
    color: #f8a81a !important;
}
body.ft-listing-active #listing span.create-review-link a .icon {
    display: none !important;
}
/* The reviews count/stars block   sit nicely inline. Bottom margin only
   when this block actually has content (when reviews exist). */
body.ft-listing-active #listing .product-reviews span.reviews {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
}

/* === 5. SKU / product-id display ===========================================
   .product-id is moved by JS step 7 to sit directly under the meta row,
   grouping it with title metadata (brand badge   title   meta links   SKU).
   Visual treatment matches the meta row: small, gray, low-contrast.
   ============================================================================ */
body.ft-listing-active #listing .product-id {
    font-size: 12px !important;
    color: #888 !important;
    margin: 0 0 14px 0 !important;
    width: auto !important;
    float: none !important;
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}
body.ft-listing-active #listing .product-id strong {
    color: #555 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 11px !important;
    margin-right: 2px !important;
}
body.ft-listing-active #listing .product-id #product_id,
body.ft-listing-active #listing .product-id [itemprop="sku"] {
    font-family: 'Barlow', monospace !important;
    color: #555 !important;
}

/* === 5b. Availability info   neutralize the global half-width floated pair
   and re-render as a compact inline pill below the part number.

   GLOBAL TO BEAT (default_new.css line 497):
     #listing #availabilityInfo {
         float: right; width: 50%; padding: 2px 10px 2px 0;
         border-bottom: 1px solid #ccc; text-align: right; font-weight: 800;
     }
   That rule paired with .product-id's matching half-width to form a
   continuous line under both. Since we made .product-id full-width, the
   #availabilityInfo half is now stranded   a 50%-wide right-floated block
   with a half-line under it that overlaps surrounding content.
   ============================================================================ */
body.ft-listing-active #listing #availabilityInfo {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    font-weight: 400 !important;
    /* Sits between pricingBlock and the next element (accessories upsell or
       options). Generous vertical breathing room since it's now part of the
       primary buying-decision flow. */
    margin: 0 0 18px 0 !important;
    font-size: 13px !important;
    display: block !important;
}
/* Hide the "Availability:" header label   the colored text below is enough */
body.ft-listing-active #listing #availabilityInfo .availability-header {
    display: none !important;
}
/* Style the actual availability text as a pill. Since it now sits directly
   under the price (primary buying-decision area) it gets slightly more
   visual weight than a tiny tag   but stays a pill, not a banner. */
body.ft-listing-active #listing #availabilityInfo #availability,
body.ft-listing-active #listing #availabilityInfo .product_availability {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    line-height: 1.3 !important;
    background: #f2f2ed !important;
    color: #444 !important;
    border: 1px solid #e2e1da !important;
}
/* Status dot prefixed via:: before   color-keyed to state */
body.ft-listing-active #listing #availabilityInfo #availability::before,
body.ft-listing-active #listing #availabilityInfo .product_availability::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 8px;
    opacity: 0.85;
}
/* In-stock state   green */
body.ft-listing-active #listing #availabilityInfo #availability.fts-instock,
body.ft-listing-active #listing #availabilityInfo .product_availability.fts-instock {
    background: #ecf7e9 !important;
    color: #2c7a1f !important;
    border-color: #c5e3bb !important;
}
/* Backorder / call-for-availability state   amber */
body.ft-listing-active #listing #availabilityInfo #availability.fts-backorder,
body.ft-listing-active #listing #availabilityInfo .product_availability.fts-backorder {
    background: #fdf4e3 !important;
    color: #92590f !important;
    border-color: #f0d9a3 !important;
}
/* Out-of-stock state   red */
body.ft-listing-active #listing #availabilityInfo #availability.fts-outofstock,
body.ft-listing-active #listing #availabilityInfo .product_availability.fts-outofstock {
    background: #fbe9e9 !important;
    color: #a82828 !important;
    border-color: #e8b6b6 !important;
}
/* Free-shipping badge inside availabilityInfo   neutralize the absolute
   positioning and render inline next to the availability pill */
body.ft-listing-active #listing #availabilityInfo span.freeshipping.availability-item {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 6px !important;
    padding: 3px 10px !important;
    background-color: #46b727 !important;
    color: #fff !important;
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
}

/* === 6. Pricing block   bigger, more confident ============================ */
body.ft-listing-active #listing .pricingBlock {
    border-top: 1px solid #e2e1da !important;
    border-bottom: 1px solid #e2e1da !important;
    padding: 18px 0 !important;
    margin: 0 0 18px 0 !important;
    float: none !important;
    width: 100% !important;
}
body.ft-listing-active #listing .yourprice.price,
body.ft-listing-active #listing .saleprice.price {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1 !important;
    margin: 0 0 6px 0 !important;
    font-family: 'Barlow', sans-serif !important;
}
body.ft-listing-active #listing .retailprice {
    font-size: 13px !important;
    color: #777 !important;
    margin-top: 2px !important;
}
body.ft-listing-active #listing .savings {
    display: inline-block !important;
    background: #f8a81a !important;
    color: #111111 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 3px 9px !important;
    border-radius: 3px !important;
    margin-top: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Price match block   the platform renders:
     <p>Found a lower price? We'll try to match or beat it!
        <span onclick="openModal()">Request Price Match</span></p>
   On narrow viewports the link wraps mid-phrase ("Match" orphans). Fix: keep
   link together with white-space:nowrap, give it real link styling. */
body.ft-listing-active #listing .pricingBlock p {
    font-size: 12px !important;
    color: #777 !important;
    margin: 6px 0 0 0 !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}
body.ft-listing-active #listing span[onclick*="openModal"],
body.ft-listing-active #listing a[onclick*="priceMatchModal"] {
    font-size: 12px !important;
    color: #555 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    display: inline-block !important;
}
body.ft-listing-active #listing span[onclick*="openModal"]:hover,
body.ft-listing-active #listing a[onclick*="priceMatchModal"]:hover {
    color: #f8a81a !important;
}
/* Suppress the leading <br> that the platform inserts before the price match block */
body.ft-listing-active #listing .pricingBlock br {
    display: none !important;
}

/* === 6b. Accessories upsell block ("Complete Your Kit") ==================
   The platform renders this block (id #ft-acc-block) with inline styles
   including `margin: 20px 0 24px`. Visually that ends up flush against
   the next element below. Add a stronger bottom gap so the upsell breathes
   into the next section (options / part number / qty). Top margin already
   has space above (the relocated stock pill has 18px below itself).
   ============================================================================ */
body.ft-listing-active #listing #ft-acc-block,
body.ft-listing-active #listing .accessoriesBlock {
    margin-top: 4px !important;
    margin-bottom: 28px !important;
}

/* === 7. Options / dropdown styling ======================================== */
body.ft-listing-active #listing #divOptionsBlock.sub-section {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
    float: none !important;
    width: 100% !important;
}
body.ft-listing-active #listing #divOptionsBlock .header h4.page_heading {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #111111 !important;
    margin: 0 0 8px 0 !important;
}
body.ft-listing-active #listing .opt-regular .opt-label .label,
body.ft-listing-active #listing .opt-title .label {
    font-size: 13px !important;
    color: #444 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    display: block !important;
}
/* Required asterisk inside the label (moved by JS)   subdued red */
body.ft-listing-active #listing .opt-regular .opt-label .label .required,
body.ft-listing-active #listing .opt-title .label .required {
    color: #c14040 !important;
    font-weight: 700 !important;
    margin-left: 1px !important;
    display: inline !important;
}
/* Option-help (?) icon when moved inline inside the label by JS step 2.
   Renders as a small gray question-circle that sits right after the
   asterisk. Uses Bootstrap data-toggle for popover/tooltip so we leave
   the click behavior alone   just style the visual.

   Selectors cover BOTH cases: (a) the button has been moved inside <label>
   by our JS (primary case after init runs), AND (b) the button is still
   a direct child of .opt-label (before JS runs, or if it failed). Either
   way the button stays inline + gray + small. */
body.ft-listing-active #listing .opt-regular .opt-label .label .option-help,
body.ft-listing-active #listing .opt-title .label .option-help,
body.ft-listing-active #listing .opt-regular .opt-label > .option-help,
body.ft-listing-active #listing .opt-title > .option-help {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    margin: 0 0 0 6px !important;
    background: transparent !important;
    border: 0 !important;
    color: #999 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: color 0.12s ease !important;
    float: none !important;
    position: static !important;
    box-shadow: none !important;
    flex: 0 0 18px !important;
}
body.ft-listing-active #listing .opt-regular .opt-label .label .option-help:hover,
body.ft-listing-active #listing .opt-title .label .option-help:hover,
body.ft-listing-active #listing .opt-regular .opt-label > .option-help:hover,
body.ft-listing-active #listing .opt-title > .option-help:hover {
    color: #f8a81a !important;
}
body.ft-listing-active #listing .opt-regular .opt-label .label .option-help i,
body.ft-listing-active #listing .opt-regular .opt-label .label .option-help span,
body.ft-listing-active #listing .opt-title .label .option-help i,
body.ft-listing-active #listing .opt-title .label .option-help span,
body.ft-listing-active #listing .opt-regular .opt-label > .option-help i,
body.ft-listing-active #listing .opt-regular .opt-label > .option-help span,
body.ft-listing-active #listing .opt-title > .option-help i,
body.ft-listing-active #listing .opt-title > .option-help span {
    font-size: 13px !important;
    line-height: 1 !important;
    color: inherit !important;
    display: inline-block !important;
}

/* Force .opt-label / .opt-title to be a flex row so the help button (when
   still a direct sibling of .label, before our JS moves it inside) sits
   inline next to the label rather than wrapping to its own line. After
   the JS move, this is harmless   flex with one child still flows fine.

   Scoped to #divOptionsBlock to avoid affecting other .opt-label uses
   (e.g., the CAMSO help row's .opt-label which is hidden by other rules).

   Use flex-wrap:wrap (NOT nowrap) so that if the label text + help button
   exceed container width, they wrap to a new line cleanly instead of
   shrinking individual children to 1ch width (which causes word-per-line
   character stacking).

   Force the parent to full container width and labels to not shrink, to
   prevent any inherited width constraint from collapsing the row. */
body.ft-listing-active #listing #divOptionsBlock .opt-label,
body.ft-listing-active #listing #divOptionsBlock .opt-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}
body.ft-listing-active #listing #divOptionsBlock .opt-label > .label,
body.ft-listing-active #listing #divOptionsBlock .opt-title > .label {
    flex: 1 0 auto !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* The native <select>   explicit appearance:none + custom chevron so styling
   actually applies on macOS WebKit (which otherwise uses native widget) */
body.ft-listing-active #listing .opt-field select,
body.ft-listing-active #listing .dropdown-format select,
body.ft-listing-active #listing .dropdownimage-format select {
    width: 100% !important;
    height: 50px !important;
    padding: 0 44px 0 16px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 50px !important;
    font-family: 'Barlow', sans-serif !important;
    color: #111111 !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px 8px !important;
    border: 2px solid #cccccc !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body.ft-listing-active #listing .opt-field select:hover,
body.ft-listing-active #listing .dropdown-format select:hover,
body.ft-listing-active #listing .dropdownimage-format select:hover {
    border-color: #999999 !important;
}
body.ft-listing-active #listing .opt-field select:focus,
body.ft-listing-active #listing .dropdown-format select:focus,
body.ft-listing-active #listing .dropdownimage-format select:focus {
    border-color: #f8a81a !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(248, 168, 26, 0.18) !important;
}

/* === 8. Quantity + Add to Cart row ========================================
   Beats the global float-based layout from default_new.css lines 492-499.
   Specificity chain: "body.ft-listing-active #listing .qtybox-addcart.form-group"
   = (1, 3, 1) beats global "#listing .qtybox-addcart.form-group" = (1, 2, 1).
   ========================================================================== */

/* Cart block container   visual reset */
body.ft-listing-active #listing .addToCartBlock.sub-section {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    float: none !important;
    width: 100% !important;
    position: static !important;
}

/* The qty + button row   switch from float to flex */
body.ft-listing-active #listing .qtybox-addcart.form-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

/* The "Quantity" text label   full-width above the controls.
   Use a tight margin and explicit line-height so there's no extra
   visual whitespace between the label and the input row. */
body.ft-listing-active #listing .qtybox-addcart.form-group > label:first-child {
    flex: 1 0 100% !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #444 !important;
}

/* Quantity wrapper   fixed visual width so it doesn't get squeezed.
   Width = input(74px) + nav col(36px) + 2*border(2px) = 114px   116px. */
body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input {
    display: flex !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    width: 116px !important;
    min-width: 116px !important;
    height: 52px !important;
    margin: 0 !important;
    border: 2px solid #cccccc !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 0 !important;
}

/* Quantity input   beats the global (1,1,1) and the browser's default
   width derivation from size=20 attribute. */
body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input input#qty-0,
body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input input[type="text"] {
    flex: 0 0 74px !important;
    width: 74px !important;
    min-width: 0 !important;
    max-width: 74px !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-family: 'Barlow', sans-serif !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    -moz-appearance: textfield !important;
}
body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input input::-webkit-outer-spin-button,
body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* +/- nav column */
body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input > .qty-nav {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    border-left: 1px solid #cccccc !important;
    flex: 0 0 36px !important;
    width: 36px !important;
}
body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input > .qty-nav > .qty-up,
body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input > .qty-nav > .qty-down {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f5f5f2 !important;
    border: 0 !important;
    width: 100% !important;
    flex: 1 1 0 !important;
    color: #444 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background 0.1s ease !important;
}
body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input > .qty-nav > .qty-up:hover,
body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input > .qty-nav > .qty-down:hover {
    background: #e2e1da !important;
}
body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input > .qty-nav > .qty-down {
    border-top: 1px solid #cccccc !important;
}

/* Add to Cart button   flagship, capped at max-width:320px so it doesn't
   grow unboundedly on wide tablets/desktops. */
body.ft-listing-active #listing .qtybox-addcart.form-group > #Add.btn-addcart,
body.ft-listing-active #listing .qtybox-addcart.form-group > .btn.btn-addcart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 200px !important;
    min-width: 180px !important;
    max-width: 320px !important;
    width: auto !important;
    height: 52px !important;
    padding: 0 24px !important;
    margin: 0 !important;
    background: #f8a81a !important;
    background-color: #f8a81a !important;
    color: #111111 !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    box-shadow: 0 2px 0 0 #c98810 !important;
    float: none !important;
}
body.ft-listing-active #listing .qtybox-addcart.form-group > #Add.btn-addcart:hover,
body.ft-listing-active #listing .qtybox-addcart.form-group > .btn.btn-addcart:hover {
    background: #e09510 !important;
    background-color: #e09510 !important;
    color: #111111 !important;
}
body.ft-listing-active #listing .qtybox-addcart.form-group > #Add.btn-addcart i {
    margin-right: 8px !important;
    font-size: 18px !important;
}

/* === 9. Affirm callout (relocated into pricing block by JS) =============== */
body.ft-listing-active #listing .pricingBlock #affirmButton,
body.ft-listing-active #listing .pricingBlock .affirm-as-low-as {
    margin: 8px 0 0 0 !important;
    font-size: 13px !important;
    color: #444 !important;
}

/* === 10. Trust strip (injected after addtocart by JS) ===================== */
.ft-listing-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 4px 0 22px 0;
    border: 1px solid #e2e1da;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}
.ft-listing-trust-cell {
    padding: 14px 10px;
    text-align: center;
    border-right: 1px solid #e2e1da;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ft-listing-trust-cell:last-child { border-right: 0; }
.ft-listing-trust-cell svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #f8a81a;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ft-listing-trust-cell-label {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.25;
}
.ft-listing-trust-cell-detail {
    font-size: 10px;
    color: #777;
    line-height: 1.2;
}

/* === 11. Demote Save / Share / Quote special-actions =====================
   The global rule at default_new.css line 501 makes each .btn-link a big
   amber full-width block. We rewrite to small uppercase text-links. */
body.ft-listing-active #listing .special-actions.text-center {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 22px !important;
    width: 100% !important;
    border: 0 !important;
    border-top: 1px solid #e2e1da !important;
    margin: 16px 0 8px 0 !important;
    padding: 14px 0 0 0 !important;
    text-align: left !important;
}
body.ft-listing-active #listing .special-action {
    display: inline-block !important;
    margin: 0 !important;
    border-right: 0 !important;
    flex-grow: 0 !important;
}
body.ft-listing-active #listing .special-action .btn-link {
    font-size: 12px !important;
    float: none !important;
    width: auto !important;
    background-color: transparent !important;
    background: transparent !important;
    color: #777 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    padding: 4px 0 !important;
    text-decoration: none !important;
    border: 0 !important;
}
body.ft-listing-active #listing .special-action:hover .btn-link,
body.ft-listing-active #listing .special-action .btn-link:hover {
    background-color: transparent !important;
    background: transparent !important;
    color: #f8a81a !important;
}
body.ft-listing-active #listing .special-action .btn-link i {
    margin-right: 4px !important;
    font-size: 14px !important;
}

/* === 12. Sticky image column offset =======================================
   The global theme has (line 519-520):
     @media (min-width: 992px) {
         #listing .col-md-6.tcd-stuck { position: sticky; top: 110px; bottom: 0; }
     }
   But the actual sticky nav (utility bar + main header + main nav strip) is
   ~280px tall. The current top:110px causes the image to slide UNDER the nav
   as you scroll. We update to 280px at desktop, and below 992px (where the
   global stacks columns to full-width) we explicitly disable sticky to avoid
   leaving a sticky gap above the stacked image. */
@media (min-width: 992px) {
    body.ft-listing-active #listing .col-md-6.tcd-stuck {
        top: 280px !important;
    }
}
@media (max-width: 991px) {
    body.ft-listing-active #listing .col-md-6.tcd-stuck {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
    }
}

/* === 13. Responsive   tablet ============================================== */
@media (max-width: 1024px) {
    body.ft-listing-active .ft-listing-trust-cell { padding: 12px 8px; }
    body.ft-listing-active .ft-listing-trust-cell svg { width: 20px; height: 20px; }
    body.ft-listing-active .ft-listing-trust-cell-label { font-size: 10px; letter-spacing: 0.4px; }
    body.ft-listing-active .ft-listing-trust-cell-detail { font-size: 10px; }
}

/* === 14. Responsive   mobile ============================================= */
@media (max-width: 720px) {
    /* Typography */
    body.ft-listing-active #listing h1.page_headers { font-size: 22px !important; line-height: 1.18 !important; }
    body.ft-listing-active #listing .yourprice.price,
    body.ft-listing-active #listing .saleprice.price { font-size: 26px !important; }

    /* Brand badge */
    body.ft-listing-active .ft-listing-brand-badge { font-size: 10px; padding: 4px 10px; }

    /* Cart row: smaller qty stepper to give the button more room */
    body.ft-listing-active #listing .qtybox-addcart.form-group { gap: 10px !important; }
    body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input {
        width: 102px !important;
        min-width: 102px !important;
        height: 48px !important;
    }
    body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input input#qty-0,
    body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input input[type="text"] {
        flex: 0 0 64px !important;
        width: 64px !important;
        max-width: 64px !important;
        font-size: 16px !important;
    }
    body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input > .qty-nav {
        flex: 0 0 32px !important;
        width: 32px !important;
    }

    /* Add to Cart on mobile   fills available row, slightly shorter */
    body.ft-listing-active #listing .qtybox-addcart.form-group > #Add.btn-addcart,
    body.ft-listing-active #listing .qtybox-addcart.form-group > .btn.btn-addcart {
        height: 48px !important;
        font-size: 15px !important;
        letter-spacing: 0.6px !important;
        padding: 0 14px !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 0 !important;
    }
    body.ft-listing-active #listing .qtybox-addcart.form-group > #Add.btn-addcart i {
        margin-right: 6px !important;
        font-size: 16px !important;
    }

    /* Trust strip: compact 2x2 */
    body.ft-listing-active .ft-listing-trust-strip { grid-template-columns: repeat(2, 1fr); margin-bottom: 18px; }
    body.ft-listing-active .ft-listing-trust-cell {
        padding: 10px 6px;
        gap: 4px;
    }
    body.ft-listing-active .ft-listing-trust-cell svg { width: 18px; height: 18px; }
    body.ft-listing-active .ft-listing-trust-cell-label { font-size: 10px; line-height: 1.2; }
    body.ft-listing-active .ft-listing-trust-cell-detail { font-size: 9px; }
    body.ft-listing-active .ft-listing-trust-cell:nth-child(2) { border-right: 0; }
    body.ft-listing-active .ft-listing-trust-cell:nth-child(1),
    body.ft-listing-active .ft-listing-trust-cell:nth-child(2) { border-bottom: 1px solid #e2e1da; }

    /* Pricing block tighter on mobile */
    body.ft-listing-active #listing .pricingBlock { padding: 14px 0 !important; margin-bottom: 14px !important; }

    /* Dropdown a bit shorter */
    body.ft-listing-active #listing .opt-field select,
    body.ft-listing-active #listing .dropdown-format select,
    body.ft-listing-active #listing .dropdownimage-format select {
        height: 48px !important;
        line-height: 48px !important;
        font-size: 14px !important;
    }

    /* Save / Share row tighter spacing */
    body.ft-listing-active #listing .special-actions.text-center { gap: 18px !important; padding-top: 12px !important; margin-top: 12px !important; }
}

/* === 15. Very narrow phones ( 380px) ===================================== */
@media (max-width: 380px) {
    body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input {
        width: 92px !important;
        min-width: 92px !important;
    }
    body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input input#qty-0,
    body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input input[type="text"] {
        flex: 0 0 56px !important;
        width: 56px !important;
        max-width: 56px !important;
    }
    body.ft-listing-active #listing .qtybox-addcart.form-group > .qty-input > .qty-nav {
        flex: 0 0 30px !important;
        width: 30px !important;
    }
    body.ft-listing-active #listing .qtybox-addcart.form-group > #Add.btn-addcart {
        font-size: 14px !important;
        padding: 0 10px !important;
    }
    body.ft-listing-active .ft-listing-trust-cell-label { font-size: 9px; }
    body.ft-listing-active .ft-listing-trust-cell-detail { display: none; }
}

/* === 16. Responsive Tabs   raise accordion breakpoint ====================
   The responsiveTabs library (responsive-tabs.css) switches from horizontal
   tabs to vertical accordion at <768px. Between 768-1024px we have many
   products with 5-7 tabs that wrap awkwardly into mismatched rows of black
   bars. Force accordion mode earlier   at <1024px   so medium screens get
   the clean stacked look that already works on mobile.

   Mechanics: the rTabs library binds click handlers to BOTH the horizontal
   nav anchors AND the accordion-title anchors at init time, regardless of
   state. The breakpoint is implemented purely via CSS (display rules on
   .r-tabs-nav and .r-tabs-accordion-title). So we can override the visual
   mode with our own media query without touching the JS   both clickers
   were bound at init and remain functional.
   ============================================================================ */
@media only screen and (max-width: 1024px) {
    body.ft-listing-active .r-tabs .r-tabs-nav {
        display: none !important;
    }
    body.ft-listing-active .r-tabs .r-tabs-accordion-title {
        display: block !important;
    }
}
/* On wide enough screens ( 1025px) keep horizontal tabs and ensure accordion
   titles are hidden (in case the library set them visible). */
@media only screen and (min-width: 1025px) {
    body.ft-listing-active .r-tabs .r-tabs-nav {
        display: block !important;
    }
    body.ft-listing-active .r-tabs .r-tabs-accordion-title {
        display: none !important;
    }
}

/* === 17. Required-options validation feedback ============================
   Shown by JS step 8 when user clicks Add to Cart with unselected required
   options. Inline error banner above the cart row + red border highlight
   on the unselected dropdowns + smooth scroll to first unselected.
   ============================================================================ */
.ft-listing-cart-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 14px 0;
    padding: 12px 14px;
    background: #fbe9e9;
    color: #a82828;
    border: 1px solid #e8b6b6;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}
.ft-listing-cart-error svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-top: 1px;
}
.ft-listing-cart-error-text {
    flex: 1 1 auto;
}

/* Highlighted unselected option dropdown */
body.ft-listing-active #listing #divOptionsBlock .opt-regular.ft-opt-error select {
    border-color: #c14040 !important;
    box-shadow: 0 0 0 3px rgba(193, 64, 64, 0.15) !important;
    animation: ft-opt-error-shake 0.4s ease-out !important;
}
body.ft-listing-active #listing #divOptionsBlock .opt-regular.ft-opt-error .label {
    color: #a82828 !important;
}
body.ft-listing-active #listing #divOptionsBlock .opt-regular.ft-opt-error .required {
    color: #a82828 !important;
}
@keyframes ft-opt-error-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* =============================================================================
   END FARM & TRAIL LISTING FACELIFT
   ============================================================================= */

/* =========================================================
   FT8 CONVERGED PRODUCT CARD (category / search / grids)
   ft7 visual language applied to the sitewide .product-item.
   Doubled .product-item class = specificity 0,3,0 to beat all
   earlier card layers; !important only where earlier layers
   used it (border/padding/margin-bottom from MODERN CARD CSS).
   Markup: product_items.html (FT8). Image swap: native [image2].
   ========================================================= */
/* Meilisearch grid: force explicit align-items: stretch. Default 'normal' resolves
   to stretch per spec for flex, but Chromium sometimes leaves items un-stretched
   when the flex item has 'min-height: 0' set. Explicit stretch is defensive and
   ensures cards in the same row equalize to the tallest sibling's height. */
.product-items.meili-products-grid { align-items: stretch; }
.product-items .product-item.product-item {
  background: var(--ft7-white);
  border: 1px solid var(--ft7-gray-10) !important;
  border-radius: 0;
  padding: 0 !important;
  margin-bottom: 16px !important;
  display: flex; flex-direction: column; align-items: stretch;
  /* width/float deliberately NOT set here - card width comes from the layout
     context (core.css columns, Meili grid, .owl-item, bootstrap cols).
     height: auto is EXPLICIT, not omitted: legacy card layers set height:100%
     and omitting the property here lets them win, giving cards a wrong fixed
     height + overflow:hidden = clipped footers/part numbers. Grid/flex stretch
     from the container still equalizes rows (stretch applies to height:auto). */
  height: auto; min-height: 0; box-sizing: border-box;
  text-align: left; overflow: hidden; position: relative;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.product-items .product-item.product-item:hover { border-color: var(--ft7-amber) !important; box-shadow: 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
/* Enforce visual order: part# -> image -> body. Legacy PRODUCT CARDS (FINAL)
   section sets .img { order:1 }, which reorders the flex column; we set all
   three children explicitly so ordering is not inherited from earlier layers. */
.product-items .product-item.product-item > .prod-id-top { order: 1; }
.product-items .product-item.product-item > .img { order: 2; }
.product-items .product-item.product-item > .card-body { order: 3; }
.product-items .product-item.product-item > .prev-purchased, .product-items .product-item.product-item > script { order: 99; }
/* Same principle for card-body children: legacy layer sets .name{order:2} and
   .reviews{order:3}, our new .card-footer would fall to 0 and float above them.
   Set all three explicitly. */
.product-items .product-item.product-item > .card-body > .name { order: 1; }
.product-items .product-item.product-item > .card-body > .reviews { order: 2; }
.product-items .product-item.product-item > .card-body > .card-footer { order: 3; }

.product-items .product-item.product-item .prod-id-top { font-size: 10px; color: var(--ft7-gray-50); letter-spacing: .5px; padding: 8px 10px 0; margin: 0; text-align: left; min-height: 0; }

.product-items .product-item.product-item .img { aspect-ratio: 1 / 1; height: auto; max-height: none; min-height: 0; border: 0 !important; border-radius: 0; padding: 0; position: relative; overflow: hidden; background: var(--ft7-white); flex-shrink: 0; margin: 0; width: 100%; box-sizing: border-box; }
.product-items .product-item.product-item .img .product-img-link { display: block; width: 100%; height: 100%; position: relative; }
.product-items .product-item.product-item .img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; mix-blend-mode: multiply; transition: opacity .3s ease; transform: none; }
/* BLUR DISSOLVE IMAGE SWAP: main-img blurs out and fades while tcd-switch
   fades in sharp. All legacy hover layers (gen-2 opacity, gen-3 hover-img,
   JS-injected !important system) are removed so no cascade conflicts remain.
   tcd-switch at opacity:0 at rest prevents mix-blend-mode:multiply bleed. */
.product-items .product-item.product-item .img .tcd-switch { z-index: 1; opacity: 0; filter: blur(0); pointer-events: none; transition: opacity .4s ease, filter .4s ease; }
.product-items .product-item.product-item .img .main-img { z-index: 2; opacity: 1; filter: blur(0); transition: opacity .35s ease, filter .3s ease; }
/* Never show S4S "no image available" placeholders as the hover image */
.product-items .product-item.product-item .img .tcd-switch[src*="/nia."],
.product-items .product-item.product-item .img .tcd-switch[src*="noimage"],
.product-items .product-item.product-item .img .tcd-switch[src*="no_image"],
.product-items .product-item.product-item .img .tcd-switch[src*="no-image"] { display: none; }
/* On hover: tcd-switch fades in sharp; main-img blurs and fades out.
   Sibling selector ensures cards without a second image are unaffected. */
.product-items .product-item.product-item:hover .img .tcd-switch { opacity: 1; }
.product-items .product-item.product-item:hover .img .tcd-switch:not([src*="/nia."]):not([src*="noimage"]):not([src*="no_image"]):not([src*="no-image"]) ~ .main-img { opacity: 0; filter: blur(8px); }

.product-items .product-item.product-item .top-seller-badge { position: absolute; top: 52px; left: 10px; right: auto; bottom: auto; z-index: 6; font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 4px 8px; border-radius: 0; line-height: 1.2; width: auto; height: auto; transform: none; }

.product-items .product-item.product-item .card-body { padding: 8px 10px 12px; display: flex; flex-direction: column; flex: 1; gap: 4px; text-align: left; }
.product-items .product-item.product-item .card-body .name { float: none; width: auto; height: auto; margin: 0; padding: 0; text-align: left; min-height: 2.8em; position: static; }
.product-items .product-item.product-item .card-body .name a { float: none; width: auto; padding: 0; text-align: left; color: var(--ft7-dark); font-size: 12px; font-weight: 600; line-height: 1.4; height: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: normal; }

.product-items .product-item.product-item .card-body .reviews { display: flex; align-items: center; gap: 4px; min-height: 16px; position: static; margin: 0; width: auto; background: none; border-radius: 0; }
.product-items .product-item.product-item .card-body .reviews-stars { display: inline-block; line-height: 1; margin: 0; }
.product-items .product-item.product-item .card-body .reviews span.reviews-count { display: inline; font-size: 11px; color: var(--ft7-gray-50); margin-left: 2px; }

.product-items .product-item.product-item .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ft7-gray-10); }
.product-items .product-item.product-item .card-footer .price-wrap { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.product-items .product-item.product-item .card-footer .price-now { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 800; color: var(--ft7-black); white-space: nowrap; float: none; width: auto; padding: 0; margin: 0; text-align: left; height: auto; }
.product-items .product-item.product-item .card-footer .price-now.sale { color: #d92027; }
.product-items .product-item.product-item .card-footer del.price-was { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 500; color: var(--ft7-gray-50); text-decoration: line-through; }
.product-items .product-item.product-item .card-footer .cta { display: inline-flex; align-items: center; gap: 6px; background: var(--ft7-amber); color: var(--ft7-black); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 7px 12px; white-space: nowrap; text-decoration: none; border: none; border-radius: 0; min-width: 0; opacity: 1; transition: background .15s; }
.product-items .product-item.product-item .card-footer .cta svg { width: 11px; height: 11px; flex-shrink: 0; }
.product-items .product-item.product-item:hover .card-footer .cta, .product-items .product-item.product-item .card-footer .cta:hover { background: var(--ft7-amber-dk); color: var(--ft7-black); opacity: 1; }

@media (max-width: 567px) {
  .product-items .product-item.product-item .card-footer .cta { padding: 6px 9px; font-size: 11px; }
  .product-items .product-item.product-item .card-footer .price-now { font-size: 16px; }
  .product-items .product-item.product-item .card-body .name a { font-size: 11px; }
}
/* =========================================================================
   RELATED / ACCESSORIES card sizing (FT8)
   ---------------------------------------------------------------------------
   Problem: related_items0 / accessories_items0 render the shared FT8 card
   inside .product-items-[cols]. On the product page that resolves to 2 cols,
   so legacy rules (float:left; width:50%; .product-items-N .product-item
   {max-width:270px}) stretch two cards across the full width - oversized
   images that scale poorly on listing_x.

   Fix: give these two blocks the same grid treatment already used for the
   Meili grid, with a tighter cap. auto-fill + minmax caps each card and flows
   as many as fit regardless of the cols-number token. Scoped to .relatedBlock
   / .accessoriesBlock only - category listing grid and Meili grid untouched.
   Double-class .product-item.product-item matches FT8 base specificity to
   override the legacy float/width without !important.
   ========================================================================= */
.relatedBlock .product-items,
.accessoriesBlock .product-items {
  display: grid !important;
  /* auto-fit with a REAL max (not 1fr): fills the row when there are many items,
     but caps each card at 260px so a block with only 1-2 related items doesn't
     stretch them to half the page width. Left-aligned so the trailing gap on a
     partial last row reads as intentional. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  gap: 16px;
  justify-content: start;
  overflow: visible;
}
/* width/float forced with !important: the legacy @media(max-width:567px) rule
   sets .product-items .product-item { float:left; width:50% !important }, which
   otherwise wins over specificity alone and produced the narrow overlapping
   cards on small screens. */
.relatedBlock .product-items .product-item.product-item,
.accessoriesBlock .product-items .product-item.product-item {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin-bottom: 0 !important;
}

/* Small screens: force 2-up and stack the footer so the price and Shop Now CTA
   can't overlap in the narrower card. */
@media (max-width: 567px) {
  .relatedBlock .product-items,
  .accessoriesBlock .product-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .relatedBlock .product-items .product-item.product-item .card-footer,
  .accessoriesBlock .product-items .product-item.product-item .card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .relatedBlock .product-items .product-item.product-item .card-footer .cta,
  .accessoriesBlock .product-items .product-item.product-item .card-footer .cta {
    justify-content: center;
  }
}

/* =========================================================================
   CLS: reserve space for the Meilisearch widget swap
   ---------------------------------------------------------------------------
   On category pages the native S4S grid paints first, then meili-search.js adds
   body.meili-search-loaded (display:none on the native grid/toolbar/filters),
   builds .meili-container, and paints results. Between the hide and the paint the
   page collapses then re-expands - a large layout shift (measured 0.14 on
   .meili-container plus ~0.11 per sidebar filter group, inside a 0.61 total CLS).

   Reserving a min-height on #meili-search-container (which exists in the page HTML
   before JS runs) holds document height stable across the handoff. The reservation
   is released by body.meili-results-ready, which meili-search.js adds once results,
   facets and pagination have all painted - so short result sets get no dead space.
   ========================================================================= */
#meili-search-container {
  min-height: 900px;
}
body.meili-results-ready #meili-search-container {
  min-height: 0;
}
@media (max-width: 767px) {
  #meili-search-container { min-height: 700px; }
}

/* =========================================================================
   CLS: collapse the native category toolbar BEFORE first paint
   ---------------------------------------------------------------------------
   category_0.html runs an inline script (hideToolbarAndCollapse) that sets
   display:none + zero height/margin/padding on .category-toolbar, the paging
   .category-actions, and the grid/list view switches - but it runs AFTER those
   elements have already painted and occupied vertical space. Everything below
   then collapses upward: measured as a 0.10 layout shift on SECTION#category,
   the single largest remaining CLS source on category pages.

   Doing the hide in render-blocking CSS means they never paint, so there is
   nothing to collapse and no shift. The JS is left in place as a harmless
   no-op safety net (it re-applies inline styles to already-hidden elements).

   Why unconditional (not scoped to body.meili-search-loaded like the widget's
   own hide rules): the native product grid in category_0.html already carries a
   hardcoded style="display:none", so it never renders on ANY category page. The
   toolbar, view switches and paging are controls for that permanently-hidden
   grid, and the inline JS hides them on every load regardless. Hiding them up
   front therefore removes no functionality - it just stops them painting first.

   The earlier version of this rule used '.category-actions:first-of-type', which
   silently failed to match (the paging block's parent form has no class and the
: first-of-type qualifier did not resolve), so the paging kept painting and the
   0.10 shift on SECTION#category was unchanged. Selector now mirrors the widget's
   own working rule shape.
   ========================================================================= */
#category .category-toolbar,
#category .category-products > form > .category-actions,
#category .category-products > form > .paging,
#category .view-as-btn,
#category #grid-view,
#category #list-view {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#category section.category-products {
  padding-top: 0;
  margin-top: 0;
}

/* =========================================================================
   CLS: reserve space on the inline-page (feed-page) Meili container
   ---------------------------------------------------------------------------
   /site-search renders the Meili widget inside
   #extrapage > .ep-container > #content. .ep-container is defined in
   ft-inlinepages.css with padding only (no min-height), so before the widget
   paints it collapses to the height of the static content, then grows when
   results arrive - reflowing the whole section. Measured 0.111 on .ep-container,
   the dominant CLS source on /site-search (0.127 total).

   Same pattern as the category-page fix: hold a min-height until the widget
   signals it has fully rendered (body.meili-results-ready, set by meili-search.js),
   then release so the container sizes to real content.

   The: has(#meili-search-container) scope is important - it limits this to inline
   pages that actually MOUNT the widget. The other ft-inlinepages templates
   (Returns, Affirm, Warranty, Pro Accounts) have their own scoped layouts and
   must not get a phantom 1100px reservation.
   ========================================================================= */
body.feed-page #extrapage .ep-container:has(#meili-search-container) {
  min-height: 1100px;
}
body.feed-page.meili-results-ready #extrapage .ep-container:has(#meili-search-container) {
  min-height: 0;
}
@media (max-width: 767px) {
  body.feed-page #extrapage .ep-container:has(#meili-search-container) {
    min-height: 800px;
  }
}

/* ======================================================================
   ACCESSIBILITY CONTRAST OVERRIDES - 2026-08-14
   Fixes WAVE "very low contrast" errors from homepage audit.
   Amber (#f8a81a / #e09510) stays for backgrounds and accents, but is
   replaced as a TEXT color on light backgrounds (2.3-2.5:1, needs 4.5:1)
   with deep amber #8a5a00 (5.6:1 on white, 5.2:1 on #f5f5f2).
   ====================================================================== */
.ft7-sub-tab.active { color: #8a5a00; }
.ft7-view-all,
.ft7-view-all:hover { color: #8a5a00; }
.ft7-kicker { color: #8a5a00 !important; } /* !important: some homepage kickers carry inline amber styles */
.homepage-blog-posts .post-readmore .btn.btn-default { color: #8a5a00 !important; }
/* Gray kicker sitting on the dark video panel needs a LIGHT gray, not a darker one */
.ft7-ct-vid-right .ft7-kicker-gray { color: #9a9a9a !important; }
/* Kickers inside dark hero/panel sections stay light */
.ft7-t-light .ft7-kicker,
.ft7-dark .ft7-kicker { color: #f8a81a !important; }

/* Footer smallprint on near-black: #666 was 3.4:1, #9a9a9a passes at 5.6:1 */
.ft-copy { color: #9a9a9a; }
.ft-hours-title { color: #9a9a9a; }

/* Payment badges: brand colors on #1a1a1a failed as low as 1.2:1.
   Light chips restore real-world card-badge appearance and pass. */
.ft-pay { background: #ffffff; border-color: #cccccc; }
.ft-pay-mc { color: #c00014; }
.ft-pay-disc { color: #b34700; }
/* Footer legal links + mobile hours label: #666 on near-black was 3.4:1 */
.ft-legal-links a { color: #9a9a9a; }
.ft-legal-links a:hover { color: #f8a81a; }
.ft-mobile-hours-label { color: #9a9a9a; }

/* ======================================================================
   FOCUS VISIBILITY - WCAG 2.4.7 (AA) - 2026-08-14
   The theme carries a blanket ":focus { outline: none }", which left
   keyboard users with no indication of position.: focus-visible restores
   a clear indicator for keyboard/AT users only - mouse clicks stay clean.
   Placed last so it wins over the earlier outline:none rules.
   ====================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #8a5a00 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}
/* On dark surfaces the deep amber is too low-contrast: use bright amber */
.ft7-dark a:focus-visible,
.ft7-dark button:focus-visible,
#new-header a:focus-visible,
#new-header button:focus-visible,
#new-header input:focus-visible,
footer a:focus-visible,
footer button:focus-visible,
footer input:focus-visible {
  outline: 3px solid #f8a81a !important;
  outline-offset: 2px !important;
}
/* Inputs that explicitly cleared their focus outline need it back */
#new-header .nh-search #searchlight:focus-visible,
.ft-nl-form .ft-nl-input:focus-visible,
.ft7-nl-input:focus-visible,
.mailinglist-input.form-control:focus-visible,
select:focus-visible {
  outline: 3px solid #f8a81a !important;
  outline-offset: 1px !important;
}
/* ============================================================
   FARM & TRAIL - HOMEPAGE SLIDER COPY OVERLAY (append to default_new.css)
   Scoped to .homepage-slider. Uses existing --ft7-* tokens with fallbacks.
   Works with the native S4S flexslider markup; JS adds .ft-slov-slide and
   the .ft-slov overlay node. Overlay slides are a fixed 500px frame on
   desktop (clamped down with viewport width); the flexslider height
   calc sees the fixed li height, so no JS changes are needed. Slides without the pipe convention are not
   affected by any rule below.
   ============================================================ */

/* slide becomes the positioning context; image keeps its native flow
   sizing on desktop so flexslider height calc is unchanged */
/* Banner frame. Desktop caps at 500px tall. Below that the slide follows the
   source image's own 1880x858 ratio (so the photo scales proportionally and
   keeps its detail) with a min-height floor that guarantees room for the
   headline, sub-copy and CTA. Some top/bottom clipping at the floor is
   expected and intended. */
.homepage-slider .flexslider .slides > li.ft-slov-slide {position:relative;overflow:hidden;height:clamp(360px,34vw,500px);}
.homepage-slider .flexslider .slides > li.ft-slov-slide > a {display:block;position:absolute;inset:0;}
.homepage-slider .flexslider .slides > li.ft-slov-slide img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;}

/* legibility scrim, left-weighted, plus a soft bottom vignette */
.homepage-slider .flexslider .slides > li.ft-slov-slide::before {
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(88deg,rgba(15,14,12,.78) 0%,rgba(15,14,12,.52) 34%,rgba(15,14,12,.08) 66%,rgba(15,14,12,0) 100%),
    linear-gradient(180deg,rgba(15,14,12,0) 55%,rgba(15,14,12,.42) 100%);
}

/* overlay layer: never intercepts the slide link */
.homepage-slider .ft-slov {
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;align-items:center;
  padding:clamp(20px,4.5vw,72px);
}
.homepage-slider .ft-slov-box {
  max-width:min(600px,60%);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1.2vw,16px);
  border-left:4px solid var(--ft7-amber,#f8a81a);
  padding-left:clamp(14px,2vw,26px);
}
.homepage-slider .ft-slov-h {
  font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(28px,4.6vw,68px);line-height:.96;letter-spacing:.005em;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.homepage-slider .ft-slov-sub {
  font-family:'Barlow',Arial,sans-serif;font-weight:500;
  font-size:clamp(14px,1.35vw,19px);line-height:1.45;color:#ebe9e3;max-width:460px;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.homepage-slider .ft-slov-h,
.homepage-slider .ft-slov-sub {pointer-events:auto;cursor:text;user-select:text;}
.homepage-slider .ft-slov-cta {
  pointer-events:auto;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;margin-top:clamp(4px,.8vw,10px);
  font-family:'Barlow Condensed',Arial,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(13px,1.1vw,16px);letter-spacing:.09em;color:var(--ft7-black,#111111);
  background:var(--ft7-amber,#f8a81a);
  padding:clamp(11px,1.1vw,16px) clamp(18px,2vw,28px);min-height:46px;
  transition:background .15s,transform .15s;
}
.homepage-slider .ft-slov-cta svg {width:12px;height:12px;transition:transform .15s;}
.homepage-slider .flexslider .slides > li.ft-slov-slide:hover .ft-slov-cta,
.homepage-slider .ft-slov-cta:hover,
.homepage-slider .ft-slov-cta:focus {background:var(--ft7-amber-dk,#e09510);color:var(--ft7-black,#111111);text-decoration:none;}
.homepage-slider .ft-slov-cta:focus-visible {outline:3px solid #fff;outline-offset:2px;}
.homepage-slider .flexslider .slides > li.ft-slov-slide:hover .ft-slov-cta svg {transform:translateX(3px);}

/* tablet: widen the copy column and let the frame follow the image ratio */
@media (max-width: 991px) {
  /* 45.6vw is the 1880:858 source ratio, so the frame tracks the image's
     own proportions between the floor and the cap */
  .homepage-slider .flexslider .slides > li.ft-slov-slide {height:clamp(320px,45.6vw,420px);}
  .homepage-slider .ft-slov-box {max-width:min(520px,72%);}
}

/* mobile: the 1880x858 banner is too short for copy at phone widths, so
   the image becomes a cover-fit background and the slide takes a fixed
   height that fits headline + sub + CTA with room to breathe */
@media (max-width: 767px) {
  /* follow the image ratio down to a 260px floor: far less aggressive
     cropping than a fixed tall frame, so the photo stays legible */
  .homepage-slider .flexslider .slides > li.ft-slov-slide {height:clamp(280px,45.6vw,340px);}
  .homepage-slider .flexslider .slides > li.ft-slov-slide img {object-position:65% center;}
  /* copy is vertically centred, so the scrim is centre-weighted rather than
     bottom-weighted */
  .homepage-slider .flexslider .slides > li.ft-slov-slide::before {
    background:
      linear-gradient(180deg,rgba(15,14,12,.30) 0%,rgba(15,14,12,.62) 45%,rgba(15,14,12,.72) 100%);
  }
  .homepage-slider .ft-slov {align-items:center;padding:18px 16px;}
  /* the box is full width on mobile, so make its empty area click-through
     to the slide link underneath rather than swallowing taps */
  .homepage-slider .ft-slov-box {max-width:100%;pointer-events:none;gap:8px;padding-left:14px;}
  .homepage-slider .ft-slov-h {font-size:clamp(26px,7.4vw,36px);}
  .homepage-slider .ft-slov-sub {font-size:14.5px;max-width:100%;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .homepage-slider .ft-slov-cta {min-height:44px;padding:11px 18px;font-size:13px;}
}

@media (prefers-reduced-motion: reduce) {
  .homepage-slider .ft-slov-cta {transition:none;}
}

/* Desktop nav: keep top-level labels on one line at medium widths (2026-10-04) */
@media (min-width: 992px) {
  #new-header .nh-nav-menu > li > a { white-space: nowrap; line-height: 21px; } /* 38 + 91 + 51 = 180px, matches the fixed #header-spacer */
}
@media (min-width: 992px) and (max-width: 1099px) {
  #new-header .nh-nav-menu > li > a { padding: 15px 12px; font-size: 13px; gap: 4px; }
}

/* ==========================================================================
   FOOTER: medium-width layout (769-1199px) - added 2026-10-04
   Scoped to footer.ft-footer; overrides the max-width:1100/960 footer rules
   by specificity (no !important). Mobile (<=768) and wide (>=1200) untouched.
   Backup: templates/farmandtrail-core/css/default_new_bk_20261004_footer.css
   ========================================================================== */
@media (min-width: 769px) {
  /* phone + email already shown in the contact card */
  footer.ft-footer .ft-main .ft-col-cs a[href^="tel:"],
  footer.ft-footer .ft-main .ft-col-cs a[href*="mailfarmandtrail"] { display: none; }
}
@media (min-width: 769px) and (max-width: 1199px) {
  footer.ft-footer .ft-main { display: grid; column-gap: 28px; row-gap: 32px; align-items: start; }
  footer.ft-footer .ft-main > .ft-col { grid-column: auto; grid-row: auto; margin: 0; min-width: 0; }
  footer.ft-footer .ft-main > .ft-col a { overflow-wrap: anywhere; }

  /* contact card: label > phone > hours on the left, buttons on the right */
  footer.ft-footer .ft-main > .ft-contact-box {
    grid-column: 1 / -1; grid-row: auto; height: auto; margin: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto auto;
    column-gap: 12px; row-gap: 4px; align-items: center;
    padding: 26px 28px; border: 1px solid #2a2a2a; border-radius: 12px;
  }
  footer.ft-footer .ft-contact-box .ft-contact-main { display: contents; }
  footer.ft-footer .ft-contact-box h3 {
    grid-column: 1; grid-row: 1; align-self: end; margin: 0;
    font-size: 12px; line-height: 1.3; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; color: #8c8c8c;
  }
  footer.ft-footer .ft-contact-box .ft-phone-big {
    grid-column: 1; grid-row: 2; justify-self: start; margin: 0;
    font-size: 34px; line-height: 1.1; gap: 12px; white-space: nowrap;
  }
  footer.ft-footer .ft-contact-box .ft-phone-big svg { width: 30px; height: 30px; }
  footer.ft-footer .ft-contact-box .ft-hours { grid-column: 1; grid-row: 3; align-self: start; margin: 6px 0 0; padding: 0; border: 0; font-size: 13px; min-width: 0; }
  footer.ft-footer .ft-contact-box .ft-hours-title { display: none; }
  footer.ft-footer .ft-contact-box .ft-hours-text { color: #8c8c8c; }
  footer.ft-footer .ft-contact-box .ft-contact-link {
    grid-row: 1 / 4; align-self: center; margin: 0;
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
    border: 1px solid #3a3a3a; border-radius: 8px; color: #e6e6e6; font-size: 14px; white-space: nowrap;
    transition: border-color .2s, color .2s;
  }
  footer.ft-footer .ft-contact-box .ft-contact-link:hover { border-color: rgb(248, 168, 26); color: #fff; }
  footer.ft-footer .ft-contact-box .ft-contact-main > a:nth-child(2) { grid-column: 2; }
  footer.ft-footer .ft-contact-box .ft-contact-main > a:nth-child(3) { grid-column: 3; }

  /* Information links in two columns */
  footer.ft-footer .ft-main > .ft-col-info { grid-column: span 2; display: block; column-count: 2; column-gap: 28px; }
  footer.ft-footer .ft-main > .ft-col-info > h4 { column-span: all; }
  footer.ft-footer .ft-main > .ft-col-info > a { display: block; break-inside: avoid; }

  /* legal row: links drop to their own line instead of squeezing the copyright */
  footer.ft-footer .ft-legal-inner { flex-wrap: wrap; gap: 12px 32px; align-items: baseline; }
  footer.ft-footer .ft-copy { flex: 1 1 420px; min-width: 0; }
  footer.ft-footer .ft-legal-links { flex: 0 0 auto; }
  footer.ft-footer .ft-legal-links a { white-space: nowrap; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  footer.ft-footer .ft-main { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 769px) and (max-width: 1099px) {
  footer.ft-footer .ft-main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  footer.ft-footer .ft-main > .ft-col-shop,
  footer.ft-footer .ft-main > .ft-col-info { grid-row: span 2; }
  footer.ft-footer .ft-main > .ft-col-company { grid-column: 2; }
}

/* ==========================================================================
   HEADER: shipping message rotator (2026-10-04)
   Markup + script in frame.html (#ftShipRot). Hidden <=991px with .nh-utility-right.
   Backup: templates/farmandtrail-core/css/default_new_bk_20261004_sbm.css
   ========================================================================== */
#new-header .ft-shiprot { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 22px; min-width: 470px; }
#new-header .ft-shiprot-msg {
  position: absolute; right: 56px; top: 50%; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  color: #f8a81a; text-decoration: none; font-weight: 600; font-size: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-30%);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
#new-header .ft-shiprot-msg.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .45s ease, transform .45s ease, visibility 0s; }
#new-header .ft-shiprot-msg em { font-style: normal; font-weight: 500; color: #cfcfcf; }
#new-header .ft-shiprot-msg svg { width: 16px; height: 16px; flex: 0 0 16px; }
#new-header .ft-shiprot-msg:hover span, #new-header .ft-shiprot-msg:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
#new-header .ft-shiprot-dots { display: flex; gap: 4px; }
#new-header .ft-shiprot-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #555; transition: background .3s; }
#new-header .ft-shiprot-dots i.is-on { background: #f8a81a; }
@media (prefers-reduced-motion: reduce) { #new-header .ft-shiprot-msg, #new-header .ft-shiprot-msg.is-on { transition: none; } }
/* FT 2026-10-05: product option dropdowns all the same (full) width - label wrapper no longer shrinks to its longest option */
#listing .dropdown-format > label,
#listing .dropdownimage-format > label {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-right: 0;
}