/* :root {
  --bs-customPrimary: #f7a823;
  --customPrimary-300: #fbd68a;
  --customPrimary-500: #f7a823;
  --customPrimary-600: #e0940f;
} */
body {
    line-height: 1.5;
    color: #212529 !important;
    font-size: 13pt !important;
    font-family: 'Open Sans', sans-serif;    
    font-weight: 300 !important;
}
body.tpp{
  --bs-customPrimary: #fcc114;
  --customPrimary-300: #fbd68a;
  --customPrimary-500: #fcc114;
  --customPrimary-600: #fcc114;
}

body.rtp {   
  --bs-customPrimary: #d61f27;
  --customPrimary-300: #d61f27;
  --customPrimary-500: #d61f27;
  --customPrimary-600: #d61f27;
}

body.oem {   
  --bs-customPrimary: #f05523;
  --customPrimary-300: #f05523;
  --customPrimary-500: #f05523;
  --customPrimary-600: #f05523;
}
/* ===== Brand color helpers (replace Tailwind customPrimary-* classes) ===== */
.bg-customPrimary-500 { background-color: var(--customPrimary-500) !important; }
.bg-customPrimary-600:hover { background-color: var(--customPrimary-600) !important; }
.bg-customPrimary-300 { background-color: var(--customPrimary-300) !important; }
.text-customPrimary,
.text-customPrimary-500 { color: var(--customPrimary-500) !important; }
.hover-customPrimary:hover { color: var(--customPrimary-500) !important; }
.btn-customPrimary {
  background-color: var(--customPrimary-500);
  color: #000;
}
.btn-customPrimary:hover { background-color: var(--customPrimary-600); color:#000; }

/* ===== Header top strip ===== */
/*.top-strip { height: 10px; width: 100%; background-color: var(--customPrimary-500); }*/

/* ===== Nav link underline animation (was group-hover Tailwind trick) ===== */
.nav-underline-link { position: relative; text-decoration: none; color: #495057; }
.nav-underline-link span.underline-el {
  position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: #000; transition: width .3s ease;
}
.nav-underline-link:hover { color: #000; }
.nav-underline-link:hover span.underline-el { width: 100%; }

/* ===== Cart badge ===== */
#cartBtn { position: relative; background: none; border: none; padding: 0; }
#cartBtn img { width: 45px; }
#cartBtn .cart-count {
  position: absolute; top: 0; right: 6px; width: 25px; text-align: center;
  font-weight: 700; color: #000;
}

/* ===== Cart drawer / Mobile menu (slide-in panels) ===== */
#cartOverlay, #overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 1050; display: none;
}
#overlay { background: rgba(0,0,0,.4); }

#cartDrawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 100%;
  background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,.2);
  transform: translateX(100%); transition: transform .3s ease;
  z-index: 1055; display: flex; flex-direction: column;
}

.topmenu-a{color:#777 !important;font-size:12pt;font-size:600;}

.btm-small-logos > *{
    flex: 0 0 auto;
    width: 14.28%;
}
.lft-btm-nav h3 {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #000;
}
.lft-btm-nav ul {
  padding-left: 0;
  list-style: none;
  text-decoration: none;
}
.lft-btm-nav a {
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  color: #333;
}
.btm-nav h3 {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #000;
}
.btm-nav ul {
  padding-left: 0;
  list-style: none;
  text-decoration: none;
}
.btm-nav ul {
  list-style: none;
}
.btm-nav a {
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  color: #333;
}
.ft-social li {
  background: #ddd;
  border-radius: 25px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 56px;
}
.logo-ft img {
  filter: grayscale(1);
  opacity: 0.6;
}
.foot-copyrit {
  font-size: 10pt;
  margin-top: 10px;
}
.paymnt-icons {
  justify-content: flex-end;
  display: flex;
  align-items: center;
}
.paymnt-icons i {
  font-size: 25pt;
  margin: 0 5pt;
  color: #c7c7c7;
}
.googlePay {
  display: flex;
  font-size: 18pt !important;
  min-width: 47px;
}
.foot-copyrit a:link, .foot-copyrit a:visited {
  color: #000;
}

/* TOP BELT CSS START */

.colps-div {
  width: 100%;
  border-bottom: 5px solid #c3c3c3;
  line-height: 20px;
}
.colps-div div {
  background: #c3c3c3;
  color: #fff;
  font-weight: 700;
}
a.clos-btn {
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.6;
}


a.promo-colaps:after {
  content: "PROMO";
}
a.promo-colaps:after {
  content: "PROMO";
  position: absolute;
  width: auto;
  height: auto;
  background-color: #c3c3c3;
  top: 0px;
  color: #fff;
  padding: 5px 15px 5px 15px;
  font-size: 13px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  letter-spacing: 4px;
  font-weight: 700;
  left: calc(50% - 49px);
}

/* TOP BELT CSS END */

.login-info a {    
    color: #000;
    font-weight: 600;
}
.h-46 {
height:46px;
}
.top-cart-icon {
    margin: 12px 0 0 7px;
    max-width: 45px;
}
.min-width-60 {
min-width:60px;
}
.color-777 {
color:#777 !important;
}

.crt-counter {
 bottom:5px;
}

@media (min-width: 576px) {
    #cartDrawer { width: 300px; } }
@media (min-width: 768px) { #cartDrawer { width: 400px; } }
@media (min-width: 992px) { #cartDrawer { width: 500px; } }
#cartDrawer.open { transform: translateX(0); }

#mobileMenu {
  position: fixed; top: 0; left: 0; height: 100%; width: 288px;
  background: rgba(0,0,0,.95); box-shadow: 4px 0 20px rgba(0,0,0,.3);
  transform: translateX(-100%); transition: transform .3s ease;
  z-index: 1055;
}
#mobileMenu.open { transform: translateX(0); }
@media (min-width: 992px) { #mobileMenu, #overlay { display: none !important; } }

/* ===== Brand cards (glow + grayscale-to-color logo) ===== */
.brand-card { position: relative; overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.brand-card:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); transform: translateY(-8px); }
.brand-card .glow {
  position: absolute; top: -80px; right: -80px; width: 192px; height: 192px;
  background: var(--customPrimary-500); border-radius: 50%; opacity: .5;
  transition: transform .5s ease;
}
.brand-card:hover .glow { transform: scale(1.25); }
.brand-card .glow.blue { background: #cfe2ff; }
.brand-logo-fade {
  filter: grayscale(100%);
  transition: filter .3s ease, transform .3s ease;
}
.brand-card:hover .brand-logo-fade { filter: grayscale(0%); transform: scale(1.05); }
.min-h-desc { min-height: 120px; }

/* ===== Small brand grid tiles ===== */
.brand-tile {
  border-bottom: 1px dashed #dee2e6;
  border-right: 1px dashed #dee2e6;
  transition: color .2s ease;
}
.brand-tile:nth-child(6n) { border-right: none; }
.brand-tile img { transition: filter .3s ease, transform .3s ease; filter: grayscale(100%); }
.brand-tile:hover img { filter: grayscale(0%); transform: scale(1.1); }
.brand-tile:hover h3 { color: var(--customPrimary-500); }

/* ===== Makita / DeWalt section headers (sticky bg strips) ===== */
.makita-bg { background: #0068b4; color: #fff; position: sticky; top: 0; z-index: 5; }
.dewalt-bg { background: #fdb913; position: sticky; top: 0; z-index: 5; }

.list-row:nth-of-type(odd) { background: #f8f9fa; }
.list-row:nth-of-type(even) { background: #fff; }

/* ===== Hero carousel ===== */
#carousel { position: relative; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; }
@media (min-width: 768px) { #carousel { aspect-ratio: auto; height: 360px; } }
.carousel-item-custom {
  position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease;
}
.carousel-item-custom.active { opacity: 1; }
.carousel-item-custom img { width: 100%; height: 100%; object-fit: cover; }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none !important; border: none; color: #fff;
  width: 48px; height: 48px; border-radius: 50%; 
}
.carousel-arrow:hover { background: rgba(255,255,255,.4); }
.carousel-arrow.prev { left: 1rem; }
.carousel-arrow.next { right: 1rem; }
.carousel-indicator {
  width: 30px; height: 3px;  background: rgba(255,255,255,.5); border: none;
}
.carousel-indicator.active { background: #fff; }
.start-15 {left: 15% !important;}

/* ===== Scroll to top ===== */
#scrollTopBtn {
    position: fixed;
    width: 48px;
    height: 48px;
    color: #fff;
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    bottom: 65px;
    left: 35px;
    z-index: 98;
    padding: 21px;
    background-color: #f05523;
}
#scrollTopBtn:hover { background: #343a40; }

/* ===== Misc ===== */
.text-red { color: #dc3545; }
.grayscale-img { filter: grayscale(100%); }
footer h3.footer-heading { font-size: 1.5rem; font-weight: 700; }

.text-muted {
    color: #6c757d !important;
}