/* =========================================================
   BikeKing — Modern UI layer (public website)
   Visual-only overrides loaded after the theme CSS.
   No markup / behaviour changes. Every colour below comes
   from the original theme palette (main.css :root) — tints
   are those same colours at reduced opacity.
========================================================= */

:root{
  /* original palette — values unchanged */
  --mk-brand:        #ed1c24;          /* --bs-primary            */
  --mk-brand-rgb:    237,28,36;
  --mk-brand-hover:  #fc2636;          /* theme .btn-primary hover */
  --mk-brand-active: #fd3341;          /* theme .btn-primary active*/
  --mk-ink:          #0c0800;          /* --bs-black-rgb           */
  --mk-ink-rgb:      12,8,0;
  --mk-navy:         #0b163f;          /* --bs-dark / gray-800     */
  --mk-navy-rgb:     11,22,63;
  --mk-black:        #000;             /* footer .bg-black         */
  --mk-text:         #575757;          /* --bs-body-color          */
  --mk-muted:        #94a3b8;          /* --bs-gray-500            */
  --mk-line:         #e2e8f0;          /* --bs-gray-300            */
  --mk-canvas:       #f8fafc;          /* --bs-gray-100            */
  --mk-canvas-2:     #f8f9fa;          /* --bs-gray-200            */
  --mk-surface:      #fff;
  --mk-success:      #5cc9a7;
  --mk-warning:      #ffb116;

  /* tints of the brand */
  --mk-brand-soft:   rgba(var(--mk-brand-rgb),.07);
  --mk-brand-soft-2: rgba(var(--mk-brand-rgb),.14);

  /* system */
  --mk-radius-xs:    8px;
  --mk-radius-sm:    12px;
  --mk-radius:       16px;
  --mk-radius-lg:    22px;
  --mk-shadow-sm:    0 1px 2px rgba(var(--mk-navy-rgb),.04), 0 2px 10px rgba(var(--mk-navy-rgb),.04);
  --mk-shadow:       0 6px 16px rgba(var(--mk-navy-rgb),.06), 0 14px 36px rgba(var(--mk-navy-rgb),.07);
  --mk-shadow-lg:    0 22px 54px rgba(var(--mk-navy-rgb),.16);
  --mk-shadow-brand: 0 8px 22px rgba(var(--mk-brand-rgb),.28);
  --mk-ring:         0 0 0 4px rgba(var(--mk-brand-rgb),.12);
  --mk-ease:         cubic-bezier(.2,.7,.2,1);

  --bs-border-radius: var(--mk-radius-sm);
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; }
body{
  background:var(--mk-canvas);
  color:var(--mk-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  color:var(--mk-ink);
  letter-spacing:-.02em;
}
::selection{ background:var(--mk-brand); color:#fff; }
a{ transition:color .2s var(--mk-ease), background-color .2s var(--mk-ease); }
:focus-visible{ outline:2px solid rgba(var(--mk-brand-rgb),.55); outline-offset:2px; }

*{ scrollbar-width:thin; scrollbar-color:#c0c0c5 transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:#c0c0c5; border-radius:99px; }
*::-webkit-scrollbar-track{ background:transparent; }

.rounded, .rounded-3{ border-radius:var(--mk-radius) !important; }
.border{ border-color:var(--mk-line) !important; }

/* ---------- Buttons ---------- */
.btn{
  border-radius:999px;
  font-weight:600;
  letter-spacing:.01em;
  transition:transform .2s var(--mk-ease), box-shadow .2s var(--mk-ease), background-color .2s, color .2s, border-color .2s;
}
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ box-shadow:var(--mk-ring) !important; }

.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#fff;
  --bs-btn-active-color:#fff;
  color:#fff;
  box-shadow:var(--mk-shadow-brand);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(var(--mk-brand-rgb),.34); color:#fff; }

.btn-outline-primary{
  --bs-btn-color:var(--mk-brand);
  --bs-btn-border-color:rgba(var(--mk-brand-rgb),.3);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--mk-brand);
  --bs-btn-hover-border-color:var(--mk-brand);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--mk-brand-active);
  --bs-btn-active-border-color:var(--mk-brand-active);
  background:var(--mk-brand-soft);
}
.btn-outline-primary:hover{ transform:translateY(-2px); box-shadow:var(--mk-shadow-brand); }

.outline-btn{
  border-radius:999px;
  border:1px solid var(--mk-line);
  background:var(--mk-surface);
  color:var(--mk-ink);
}
.outline-btn:hover{ transform:translateY(-2px); border-color:var(--mk-ink); background:var(--mk-ink); color:#fff; }

.btn-sm{ padding:.5rem 1.05rem; font-size:.78rem; }
.input-group .btn{ border-radius:0 var(--mk-radius-sm) var(--mk-radius-sm) 0; }

.listing-btn{
  border-radius:999px;
  padding:11px 22px;
  letter-spacing:.05em;
  font-size:.75rem;
  background:var(--mk-brand);
  box-shadow:var(--mk-shadow-brand);
  transition:background-color .25s var(--mk-ease), box-shadow .25s var(--mk-ease), transform .25s var(--mk-ease);
}
.listing-btn:hover{ background:var(--mk-ink); box-shadow:0 10px 24px rgba(var(--mk-ink-rgb),.25); transform:translateY(-1px); }

.explore-link{
  display:inline-flex;
  align-items:center;
  padding:8px 16px 8px 10px;
  border-radius:999px;
  background:var(--mk-brand-soft);
  font-size:.82rem;
  font-weight:600;
  color:var(--mk-brand);
}
.explore-link:hover{ background:var(--mk-brand); color:#fff; }
.explore-link:hover svg circle,
.explore-link:hover svg path{ stroke:#fff; }
.explore-link svg{ transition:transform .25s var(--mk-ease); }
.explore-link:hover svg{ transform:translateX(3px); }

/* ---------- Forms ---------- */
.form-control,
.form-select,
.login-form input,
.ct-form-wrapper .input-field input,
.ct-form-wrapper .input-field textarea,
.modal-body input:not([type=checkbox]):not([type=radio]),
.modal-body select,
.modal-body textarea{
  border:1px solid var(--mk-line) !important;
  border-radius:var(--mk-radius-sm) !important;
  background-color:var(--mk-surface);
  color:var(--mk-ink);
  transition:border-color .2s, box-shadow .2s;
}
.login-form input:not([type=checkbox]):not([type=radio]),
.modal-body input:not([type=checkbox]):not([type=radio]):not([type=file]),
.modal-body select{ min-height:46px; padding-left:14px; padding-right:14px; }
.form-control:hover,
.form-select:hover,
.login-form input:hover{ border-color:#c0c0c5 !important; }
.form-control:focus,
.form-select:focus,
.login-form input:focus,
.ct-form-wrapper .input-field input:focus,
.ct-form-wrapper .input-field textarea:focus,
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus{
  border-color:rgba(var(--mk-brand-rgb),.55) !important;
  box-shadow:var(--mk-ring) !important;
  outline:0;
}
::placeholder{ color:var(--mk-muted) !important; }

label{ color:var(--mk-ink); }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius-sm);
  min-height:46px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:44px; padding-left:14px; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:44px; right:8px; }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple{
  border-color:rgba(var(--mk-brand-rgb),.55);
  box-shadow:var(--mk-ring);
}
.select2-dropdown{ border-color:var(--mk-line); border-radius:var(--mk-radius-sm); overflow:hidden; box-shadow:var(--mk-shadow); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--mk-brand); }

/* ---------- Header ---------- */
.header-style-one{
  background:rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--mk-line);
}
.header-sticky.sticky-on{ box-shadow:0 10px 30px rgba(var(--mk-navy-rgb),.08); }

/* top bar (hidden by the theme; kept consistent if it is ever shown) */
.at_topbar{ background:var(--mk-surface); }
.top_nav_link li a{ font-size:.82rem !important; font-weight:500; }
.top_nav_link li.dealer a{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  background:var(--mk-brand-soft); color:var(--mk-brand);
}
.top_nav_link li.dealer a:hover{ background:var(--mk-brand); color:#fff; }

#searchForm #searchBox{
  height:38px;
  padding:0 96px 0 16px;
  border-radius:999px !important;
}
#searchForm .listing-btn{
  top:4px !important; right:4px !important; height:30px !important;
  padding:0 16px; font-size:.7rem; box-shadow:none;
}
#suggestions{
  top:calc(100% + 6px);
  border-radius:var(--mk-radius);
  overflow:hidden;
  box-shadow:var(--mk-shadow-lg);
  border:1px solid var(--mk-line);
}
#suggestions .list-group-item{ border:0; border-bottom:1px solid var(--mk-line); padding:10px 14px; }
#suggestions .list-group-item:hover{ background:var(--mk-brand-soft); color:var(--mk-brand); }

/* main nav */
.at_header_nav{ background:transparent; }
.logo-wrapper img{ max-height:52px; width:auto; }
.at_nav_menu ul li a{
  font-weight:600;
  font-size:.84rem;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--mk-ink);
  padding:26px 15px;
}
.at_nav_menu > ul > li > a{ position:relative; }
.at_nav_menu > ul > li > a::after{
  content:"";
  position:absolute;
  left:15px; right:15px; bottom:18px;
  height:2px; border-radius:2px;
  background:var(--mk-brand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--mk-ease);
}
.at_nav_menu > ul > li:hover > a::after{ transform:scaleX(1); }
.at_nav_menu > ul > li:hover > a{ color:var(--mk-brand); }

.at_nav_menu ul li.has-submenu .submenu-wrapper{
  background:var(--mk-surface);
  border-radius:var(--mk-radius);
  padding:8px;
  border:1px solid var(--mk-line);
  box-shadow:var(--mk-shadow-lg);
  min-width:230px;
}
.at_nav_menu ul li.has-submenu .submenu-wrapper li a{
  color:var(--mk-text);
  padding:10px 14px;
  border-radius:10px;
  font-weight:500;
}
.at_nav_menu ul li.has-submenu .submenu-wrapper li a::after{ display:none; }
.at_nav_menu ul li.has-submenu .submenu-wrapper li:hover > a{
  background:var(--mk-brand-soft);
  color:var(--mk-brand);
}
.at_nav_menu .submenu-wrapper .badge{
  background:var(--mk-brand) !important;
  color:#fff; border-radius:999px; font-weight:600;
}

.at_header_right .listing-btn{ white-space:nowrap; }
.header-toggle-btn{
  width:42px; height:42px;
  border-radius:12px;
  background:var(--mk-canvas-2);
  border:1px solid var(--mk-line);
  display:inline-flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:4px;
  padding:0 9px;
}
.header-toggle-btn span{ background:var(--mk-ink) !important; float:none; width:22px; }
.header-toggle-btn span+span{ margin-top:0; }
.header-toggle-btn span:nth-child(2){ width:17px; }
.header-toggle-btn span:nth-child(3){ width:12px; }
.header-toggle-btn:hover span{ width:22px; }

/* mobile menu */
.mobile-menu{
  border-radius:0 var(--mk-radius-lg) var(--mk-radius-lg) 0;
  box-shadow:var(--mk-shadow-lg) !important;
}
.mobile-menu .close-menu{
  width:38px; height:38px; border-radius:50%;
  background:var(--mk-canvas-2); color:var(--mk-ink);
  display:inline-flex; align-items:center; justify-content:center;
  border:0;
}
.mobile-menu-wrapper ul li a{ font-weight:600; color:var(--mk-ink); }
.mobile-menu-wrapper ul li a:hover{ color:var(--mk-brand); }
.mobile-menu .contact-info{ padding:18px; border-radius:var(--mk-radius); background:var(--mk-canvas); }
.mobile-menu .contact-info p{ font-size:.85rem; margin-bottom:6px; }

@media (max-width:575.98px){
  .at_header_right .listing-btn{ padding:9px 14px; font-size:.68rem; margin-left:10px !important; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
  .header-toggle-btn{ margin-left:10px !important; }
}

/* ---------- Hero banner ---------- */
.cycle-hero .banner_block{ padding:16px 16px 0; max-width:1600px; margin-inline:auto; }
.cycle-hero .mySwiper{
  border-radius:var(--mk-radius-lg);
  overflow:hidden;
  box-shadow:var(--mk-shadow);
}
.cycle-hero .mySwiper::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:35%;
  background:linear-gradient(to top, rgba(var(--mk-ink-rgb),.6), transparent);
  pointer-events:none; z-index:1;
}
.cycle-hero .swiper-slide img{ height:72vh; }
.cycle-hero .swiper-pagination{
  z-index:2;
  bottom:18px !important;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  padding:0 16px;
}
.cycle-hero .swiper-pagination .swiper-pagination-bullet{
  width:auto; height:auto;
  padding:8px 16px;
  margin:0 !important;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:.75rem; font-weight:600;
  opacity:1;
  transition:all .3s var(--mk-ease);
}
.cycle-hero .swiper-pagination .swiper-pagination-bullet:hover{ background:rgba(255,255,255,.26); }
.cycle-hero .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background:var(--mk-brand);
  border-color:var(--mk-brand);
  box-shadow:0 6px 18px rgba(var(--mk-brand-rgb),.4);
}
@media (max-width:767.98px){
  .cycle-hero .banner_block{ padding:10px 10px 0; }
  .cycle-hero .swiper-slide img{ height:42vh; }
  .cycle-hero .swiper-pagination .swiper-pagination-bullet{ padding:5px 10px; font-size:.68rem; }
}

/* ---------- Section boxes ---------- */
.bs-brands,
.categories-slider-box,
.motor-parts-box{
  background:var(--mk-surface);
  border-radius:var(--mk-radius-lg) !important;
  border:1px solid var(--mk-line) !important;
  box-shadow:var(--mk-shadow-sm);
}
.bs-brands{ padding:28px; }
.categories-slider-box{ padding:28px 28px 6px; }
.motor-parts-box{ padding:32px; }
@media (max-width:575.98px){
  .bs-brands, .motor-parts-box{ padding:20px; }
  .categories-slider-box{ padding:20px 20px 4px; }
}

.title-top h2,
.slider-box-top h2{
  position:relative;
  padding-left:14px;
}
.title-top h2::before,
.slider-box-top h2::before{
  content:"";
  position:absolute; left:0; top:.2em; bottom:.2em;
  width:4px; border-radius:4px;
  background:var(--mk-brand);
}

/* brand tiles */
.bs-brand-wrapper{
  height:auto !important;
  min-height:112px;
  padding:16px !important;
  border-radius:var(--mk-radius) !important;
  border:1px solid var(--mk-line) !important;
  transition:transform .25s var(--mk-ease), box-shadow .25s var(--mk-ease), border-color .25s;
}
.bs-brands .bs-brand-wrapper:hover{
  transform:translateY(-4px);
  box-shadow:var(--mk-shadow) !important;
  border-color:rgba(var(--mk-brand-rgb),.25) !important;
}
.bs-brand-wrapper .brand-link img{ max-height:48px; object-fit:contain; margin:0 auto; display:block; }
.brand-name{ margin-top:8px; font-size:.78rem; font-weight:600; color:var(--mk-text); }
.bs-brand-wrapper:hover .brand-name{ color:var(--mk-brand); }

/* sidebar "Popular Bikes By Brands" (blog) — top 4, 2x2 */
.bk-pop-brands{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin:24px 0;
}
.bk-pop-brand{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 12px 14px;
  border-radius:var(--mk-radius);
  border:1px solid var(--mk-line);
  background:var(--mk-surface);
  text-decoration:none;
  transition:transform .25s var(--mk-ease), box-shadow .25s var(--mk-ease), border-color .25s;
}
.bk-pop-brand-rank{
  position:absolute; top:8px; left:8px;
  padding:2px 7px;
  border-radius:999px;
  background:var(--mk-brand-soft);
  color:var(--mk-brand);
  font-size:.68rem; font-weight:700; line-height:1.4;
}
.bk-pop-brand-logo{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:72px;
  margin-bottom:4px;
  border-radius:var(--mk-radius-sm);
  background:var(--mk-canvas);
  transition:background-color .25s var(--mk-ease);
}
.bk-pop-brand-logo img{
  max-width:70%; max-height:44px;
  object-fit:contain;
  transition:transform .3s var(--mk-ease);
}
.bk-pop-brand-name{
  max-width:100%;
  font-size:.86rem; font-weight:600; line-height:1.2;
  color:var(--mk-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s;
}
.bk-pop-brand-count{ font-size:.74rem; color:var(--mk-muted); }
.bk-pop-brand:hover,
.bk-pop-brand:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(var(--mk-brand-rgb),.3);
  box-shadow:var(--mk-shadow);
}
.bk-pop-brand:hover .bk-pop-brand-logo{ background:var(--mk-brand-soft); }
.bk-pop-brand:hover .bk-pop-brand-logo img{ transform:scale(1.08); }
.bk-pop-brand:hover .bk-pop-brand-name{ color:var(--mk-brand); }

/* brand grid v2 (home "Best Selling Brands") */
.bk-brands-head{ margin-bottom:24px; }
.bk-brands-sub{ font-size:.86rem; color:var(--mk-muted); padding-left:14px; }

.bk-brand-grid{
  display:grid;
  grid-template-columns:repeat(8, minmax(0,1fr));
  gap:12px;
}
.bk-brand-tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:14px 10px 12px;
  border-radius:var(--mk-radius);
  border:1px solid var(--mk-line);
  background:var(--mk-surface);
  text-decoration:none;
  transition:transform .25s var(--mk-ease), box-shadow .25s var(--mk-ease), border-color .25s, background-color .25s;
}
.bk-brand-logo{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:64px;
  border-radius:var(--mk-radius-sm);
  background:var(--mk-canvas);
  transition:background-color .25s var(--mk-ease);
}
.bk-brand-logo img{
  max-width:76%; max-height:40px;
  object-fit:contain;
  filter:grayscale(.15);
  transition:transform .3s var(--mk-ease), filter .3s;
}
.bk-brand-name{
  font-size:.8rem; font-weight:600; line-height:1.2;
  color:var(--mk-ink);
  text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  transition:color .2s;
}
.bk-brand-tile::after{
  content:"";
  position:absolute; top:10px; right:10px;
  width:6px; height:6px; border-radius:50%;
  background:var(--mk-brand);
  opacity:0; transform:scale(.4);
  transition:opacity .25s, transform .25s var(--mk-ease);
}
.bk-brand-tile:hover,
.bk-brand-tile:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(var(--mk-brand-rgb),.3);
  box-shadow:var(--mk-shadow);
}
.bk-brand-tile:hover .bk-brand-logo{ background:var(--mk-brand-soft); }
.bk-brand-tile:hover .bk-brand-logo img{ transform:scale(1.08); filter:none; }
.bk-brand-tile:hover .bk-brand-name{ color:var(--mk-brand); }
.bk-brand-tile:hover::after{ opacity:1; transform:scale(1); }

/* collapsed: show two rows per breakpoint */
.bk-brand-grid.is-collapsed .bk-brand-tile:nth-child(n+17){ display:none; }

.bk-brand-more{
  position:relative;
  display:flex; justify-content:center;
  margin-top:20px;
}
.bk-brand-more::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  border-top:1px dashed var(--mk-line);
}
.bk-brand-toggle{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px;
  border-radius:999px;
  border:1px solid var(--mk-line);
  background:var(--mk-surface);
  color:var(--mk-ink);
  font-size:.82rem; font-weight:600;
  box-shadow:var(--mk-shadow-sm);
  transition:background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.bk-brand-toggle svg{ transition:transform .25s var(--mk-ease); }
.bk-brand-toggle:hover{ background:var(--mk-brand); border-color:var(--mk-brand); color:#fff; box-shadow:var(--mk-shadow-brand); }
.bk-brand-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

@media (max-width:1199.98px){
  .bk-brand-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); }
  .bk-brand-grid.is-collapsed .bk-brand-tile:nth-child(n+13){ display:none; }
}
@media (max-width:767.98px){
  .bk-brand-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
  .bk-brand-grid.is-collapsed .bk-brand-tile:nth-child(n+9){ display:none; }
  .bk-brand-logo{ height:52px; }
  .bk-brand-logo img{ max-height:32px; }
}
@media (max-width:575.98px){
  .bk-brand-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  .bk-brand-grid.is-collapsed .bk-brand-tile:nth-child(n+10){ display:none; }
  .bk-brand-tile{ padding:10px 6px; gap:8px; }
  .bk-brand-name{ font-size:.72rem; }
  .bk-brands-sub{ display:none; }
}

/* city slider */
.parts-single{
  background:var(--mk-canvas);
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius) !important;
  padding:22px 16px !important;
  transition:transform .25s var(--mk-ease), box-shadow .25s var(--mk-ease), background-color .25s;
}
.parts-single:hover{ background:var(--mk-surface); transform:translateY(-4px); box-shadow:var(--mk-shadow); }
.parts-single img{ max-height:64px; margin:0 auto; }
.parts-single p{ color:var(--mk-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.parts-single .h6{ color:var(--mk-ink); font-weight:700; }

/* slider arrows */
.flash-controls,
.motor-parts-box .slide-control{
  background:var(--mk-surface) !important;
  color:var(--mk-ink) !important;
  border:1px solid var(--mk-line);
  box-shadow:var(--mk-shadow-sm);
  transition:all .2s var(--mk-ease);
}
.flash-controls:hover,
.motor-parts-box .slide-control:hover{
  background:var(--mk-brand) !important;
  color:#fff !important;
  border-color:var(--mk-brand);
}
.motor-parts-box .slide-control{ width:38px; height:38px; line-height:1; border-radius:50%; }

/* ---------- Bike cards ---------- */
.filter-card-item{
  border-radius:var(--mk-radius-lg) !important;
  border:1px solid var(--mk-line) !important;
  background:var(--mk-surface);
  transition:transform .3s var(--mk-ease), box-shadow .3s var(--mk-ease), border-color .3s;
}
.filter-card-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--mk-shadow-lg);
  border-color:transparent !important;
}
.filter-card-item .feature-thumb{
  width:auto;
  height:190px;
  margin:10px 10px 0;
  border-radius:var(--mk-radius);
  background:var(--mk-canvas);
}
.filter-card-item .feature-thumb img{ width:100%; height:100%; object-fit:contain; padding:10px; transition:transform .5s var(--mk-ease); }
.filter-card-item:hover .feature-thumb img{ transform:scale(1.06); }
.filter-card-item .filter-card-content{ padding:0 18px 20px; }
.filter-card-item .filter-card-content h3{ font-size:1.02rem; font-weight:700; }
.filter-card-item .filter-card-content a:hover h3{ color:var(--mk-brand); }
.filter-card-item .meta-content strong,
.listing_card_item .meta-content strong{ color:var(--mk-brand); font-weight:800; }
.filter-card-item .spacer{ opacity:1; border-color:var(--mk-line); }
.filter-card-item .date{
  z-index:2;
  border-radius:999px;
  padding:4px 10px;
  font-weight:700;
  background:var(--mk-ink) !important;
  color:#fff !important;
  box-shadow:var(--mk-shadow-sm);
}
.card-feature-box{ gap:4px; flex-wrap:nowrap; }
.card-feature-box .icon-box{
  padding:5px 7px;
  white-space:nowrap;
  min-width:0;
  letter-spacing:-.01em;
  border-radius:999px;
  background:var(--mk-canvas);
  border:1px solid var(--mk-line);
  font-size:.74rem;
  font-weight:600;
  color:var(--mk-text);
}
.card-feature-box .icon-box i{ color:var(--mk-brand); }
.card-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.card-btns .btn{ flex:1 1 auto; text-align:center; }
.card-btns .ms-2{ margin-left:0 !important; }
/* Product detail page: compact CTA buttons instead of full-width */
.product_view_right .card-btns .btn{ flex:0 0 auto; min-width:150px; padding-inline:24px; }

/* Equal-height cards inside sliders: buttons pinned to bottom */
.swiper-wrapper:has(> .filter-card-item){ align-items:stretch; }
.filter-card-item.swiper-slide{ height:auto; display:flex; flex-direction:column; }
.filter-card-item.swiper-slide .feature-thumb{ flex-shrink:0; }
.filter-card-item.swiper-slide .filter-card-content{ flex:1 1 auto; display:flex; flex-direction:column; }

.badge-soft-primary{
  display:inline-block;
  position:absolute; left:12px; top:12px; z-index:2;
  padding:4px 10px !important;
  border-radius:999px;
  font-size:.68rem !important;
  font-weight:700;
  box-shadow:0 4px 12px rgba(var(--mk-brand-rgb),.3);
}

.listing_card_item{
  border-radius:var(--mk-radius-lg) !important;
  border:1px solid var(--mk-line) !important;
  background:var(--mk-surface);
  transition:transform .3s var(--mk-ease), box-shadow .3s var(--mk-ease);
}
.listing_card_item:hover{ transform:translateY(-4px); box-shadow:var(--mk-shadow-lg); }
.listing_card_item .thumb-wrapper{ background:var(--mk-canvas); position:relative; border-radius:var(--mk-radius); }

/* ---------- Listing / filters ---------- */
.iv2_sidebar,
.iv_listing .iv2_sidebar{
  border-radius:var(--mk-radius-lg) !important;
  border:1px solid var(--mk-line);
  background:var(--mk-surface);
  box-shadow:var(--mk-shadow-sm);
}
.iv2_sidebar_widget{ border-color:var(--mk-line) !important; }
.iv2_sidebar_accordion .accordion-item{
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius-sm) !important;
  overflow:hidden;
  margin-bottom:10px;
}
.iv2_sidebar_accordion .accordion-button{
  font-weight:700; color:var(--mk-ink);
  background:var(--mk-surface); box-shadow:none;
}
.iv2_sidebar_accordion .accordion-button:not(.collapsed){ color:var(--mk-brand); background:var(--mk-brand-soft); }
.iv2_sidebar_accordion .accordion-button:focus{ box-shadow:none; }
.iv2_sidebar_list li label,
.iv2_checkfilter_widget label{ cursor:pointer; }
.ct-checkbox{ border-radius:6px !important; }

.iv_listing_filter_menu{ gap:10px; }
.iv_listing_filter_menu .form-select{ min-height:40px; border-radius:999px !important; padding-left:16px; }
.iv_listing_filter_menu .nav-tabs{ border:0; gap:6px; }
.iv_listing_filter_menu .grid_btn{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px !important;
  border:1px solid var(--mk-line);
  background:var(--mk-surface);
  color:var(--mk-ink);
}
.iv_listing_filter_menu .grid_btn.active{
  background:var(--mk-brand) !important; color:#fff !important; border-color:var(--mk-brand);
}

.pagination,
.template-pagination{ gap:6px; flex-wrap:wrap; }
.pagination .page-link,
.template-pagination a,
.template-pagination span{
  border-radius:12px !important;
  border:1px solid var(--mk-line);
  background:var(--mk-surface);
  color:var(--mk-ink);
  min-width:40px; text-align:center;
  transition:all .2s;
}
.template-pagination li,
.template-pagination li.active{ background:transparent; border:0; padding:0; }
.template-pagination ul li a,
.template-pagination ul li.pager-arrow span{
  width:auto; height:auto; min-width:40px; min-height:40px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:none;
}
.template-pagination ul li.pager-arrow.disabled span{
  border:1px solid var(--mk-line); opacity:.45; cursor:not-allowed;
}
.template-pagination ul li.pager-arrow i{ font-size:.85rem; }
.pagination .page-item.active .page-link,
.template-pagination a.active,
.template-pagination ul li.active a,
.template-pagination.pg-style-2 ul li.active a,
.template-pagination.pg-style-2 ul li a.active,
.pagination .page-link:hover,
.template-pagination a:hover,
.template-pagination.pg-style-2 ul li a:hover{
  background:var(--mk-brand); border-color:var(--mk-brand); color:#fff;
  box-shadow:0 6px 18px rgba(var(--mk-brand-rgb),.3);
}

/* ---------- Breadcrumb / page hero ---------- */
.breadcrumb-section{
  padding:64px 0;
  margin:16px 16px 0;
  border-radius:var(--mk-radius-lg);
  overflow:hidden;
}
.breadcrumb-section::before{
  background:radial-gradient(900px 340px at 85% -10%, rgba(var(--mk-brand-rgb),.28), transparent 60%),
             linear-gradient(180deg,var(--bs-black) 0,rgba(17,16,16,0.81) 100%) !important;
}
.breadcrumb-content-wrapper h1,
.breadcrumb-content-wrapper h2{ color:#fff; font-weight:800; letter-spacing:-.03em; }
.breadcrumb{
  display:inline-flex;
  flex-wrap:wrap;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.breadcrumb-section .breadcrumb-item,
.breadcrumb-section .breadcrumb-item a{ color:rgba(255,255,255,.7); font-weight:500; }
.breadcrumb-section .breadcrumb-item a:hover{ color:#fff; }
.breadcrumb-section .breadcrumb-item.active{ color:#fff; }
@media (max-width:767.98px){
  .breadcrumb-section{ margin:10px 10px 0; padding:44px 0; }
}

/* ---------- Section title ---------- */
.at-section-title .at-subtitle{
  display:inline-block;
  font-size:.78rem !important;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:999px;
  background:var(--mk-brand-soft);
  color:var(--mk-brand) !important;
}
.at-section-title h2{ font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight:800; }

/* ---------- Blog ---------- */
.blog-section.bg-white{ background:transparent !important; }
.blog-card{
  background:var(--mk-surface);
  border-radius:var(--mk-radius-lg);
  border:1px solid var(--mk-line);
  padding:14px 14px 18px !important;
  height:100%;
  transition:transform .3s var(--mk-ease), box-shadow .3s var(--mk-ease);
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--mk-shadow-lg); }
.blog-card .feature-img{ border-radius:var(--mk-radius) !important; height:190px; }
.blog-card .feature-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--mk-ease); }
.blog-card:hover .feature-img img{ transform:scale(1.06); }
.blog-card .small-btn-meta{
  border-radius:999px;
  padding:4px 12px;
  font-size:.7rem; font-weight:600;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.blog-card .blog-title{ color:var(--mk-ink); line-height:1.4; }
.blog-card a:hover .blog-title{ color:var(--mk-brand); }
.blog-card .date{ color:var(--mk-muted); font-size:.75rem; }
.blog-explore-btn{ background:var(--mk-canvas-2); color:var(--mk-ink); }
.blog-explore-btn:hover{ background:var(--mk-brand); color:#fff; transform:rotate(-45deg); }

.sidebar-widget,
.blog-sidebar .sidebar-widget{
  border-radius:var(--mk-radius-lg) !important;
  border:1px solid var(--mk-line);
  background:var(--mk-surface);
}
.recent_posts_list li{ border-color:var(--mk-line) !important; }
.recent_posts_list img{ border-radius:var(--mk-radius-sm); }

/* Blog sidebar — spacing between widgets + refined cards */
.blog-sidebar .sidebar-widget{ box-shadow:var(--mk-shadow-sm); }
.blog-sidebar .sidebar-widget + .sidebar-widget{ margin-top:20px !important; }
.blog-sidebar .widget-padding{ padding:20px; }

.blog-sidebar .tmg-search-widget{ padding:6px !important; }
.blog-sidebar .tmg-search-widget form{
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius) !important;
  background:var(--mk-canvas);
  transition:border-color .2s var(--mk-ease), box-shadow .2s var(--mk-ease);
}
.blog-sidebar .tmg-search-widget form:focus-within{ border-color:var(--mk-brand); box-shadow:var(--mk-ring); background:var(--mk-surface); }
.blog-sidebar .tmg-search-widget input[type="text"]{
  flex:1; width:auto; height:46px; padding:0 16px;
  border:0; outline:0; background:transparent; font-size:.9rem;
}
.blog-sidebar .tmg-search-widget input[type="text"]::placeholder{ color:var(--mk-muted); }
.blog-sidebar .tmg-search-widget form button{
  width:46px; height:46px; margin:0; flex-shrink:0;
  border-radius:var(--mk-radius-sm) !important;
  box-shadow:var(--mk-shadow-brand);
}

.blog-sidebar .sidebar-widget:has(> img){ padding:12px; }
.blog-sidebar .sidebar-widget > img{ border-radius:var(--mk-radius) !important; display:block; }

.blog-sidebar .recent_post-widget .widget-top h5{ font-size:1.1rem; font-weight:700; }
.blog-sidebar .recent_posts_list{ margin-top:16px !important; margin-bottom:16px !important; }
.blog-sidebar .recent_posts_list li{
  padding:10px; border:1px solid transparent !important;
  border-radius:var(--mk-radius-sm);
  transition:background .2s var(--mk-ease), border-color .2s var(--mk-ease);
}
.blog-sidebar .recent_posts_list li + li{ margin-top:8px; }
.blog-sidebar .recent_posts_list li + li::before{ top:-5px; left:10px; width:calc(100% - 20px); background:var(--mk-line); opacity:1; }
.blog-sidebar .recent_posts_list li:hover{ background:var(--mk-brand-soft); border-color:var(--mk-brand-soft-2) !important; }
.blog-sidebar .recent_posts_list li:hover::before,
.blog-sidebar .recent_posts_list li:hover + li::before{ opacity:0; }
.blog-sidebar .recent_posts_list.style_bike li .thumb-wrapper{
  width:84px; background:var(--mk-canvas); border-radius:var(--mk-radius-xs);
}
.blog-sidebar .recent_posts_list.style_bike li .thumb-wrapper a{ width:84px; height:60px; }
.blog-sidebar .recent_posts_list.style_bike li .thumb-wrapper img{ object-fit:contain; border-radius:0; }
.blog-sidebar .recent_posts_list li .rp_content{ margin-left:14px; min-width:0; }
.blog-sidebar .recent_posts_list li .rp_content a{ font-size:.875rem; font-weight:500; color:var(--mk-text); margin-bottom:2px; }
.blog-sidebar .recent_posts_list li:hover .rp_content a{ color:var(--mk-brand); }
.blog-sidebar .recent_posts_list li .rp_content h6{ font-size:1rem; font-weight:700; color:var(--mk-ink); }

/* ---------- Highlights strip ---------- */
.autoparts-office-info{ gap:16px !important; }
.autoparts-office-info li{
  flex:1 1 220px;
  background:var(--mk-surface);
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius);
  padding:18px 20px;
  transition:transform .25s var(--mk-ease), box-shadow .25s var(--mk-ease);
}
.autoparts-office-info li:hover{ transform:translateY(-4px); box-shadow:var(--mk-shadow); }
.autoparts-office-info li .icon-wrapper{
  width:56px; height:56px; flex-shrink:0;
  border-radius:var(--mk-radius);
  background:var(--mk-brand-soft);
  font-size:26px !important;
  align-items:center !important;
}

/* ---------- About ---------- */
.about-icon-box{
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius);
  background:var(--mk-surface);
  transition:transform .25s var(--mk-ease), box-shadow .25s var(--mk-ease);
}
.about-icon-box:hover{ transform:translateY(-4px); box-shadow:var(--mk-shadow); }
.about-left img{ border-radius:var(--mk-radius-lg); }

/* ---------- Product detail ---------- */
.single_block,
.iv_info_item,
.product-variant-box{
  border-radius:var(--mk-radius-lg) !important;
}
/* Specifications card: title bar, tab list on the left, scrolling spec panel on the right
   (tab -> panel scrolling lives in single-product.php) */
.bk-specs{
  background:var(--mk-surface);
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius-lg);
  box-shadow:var(--mk-shadow-sm);
  overflow:hidden;
}
.bk-specs__head{ padding:18px 24px; border-bottom:1px solid var(--mk-line); }
.bk-specs__head h3{ margin:0; font-size:1.35rem; font-weight:800; color:var(--mk-ink); letter-spacing:-.02em; }
.bk-specs__body{ display:flex; align-items:flex-start; }
.bk-specs__nav{ flex:0 0 31%; max-width:31%; padding:18px 0 18px 0; }
.bk-specs__main{ flex:1 1 auto; min-width:0; }

.bk-specs .feature_navlink{
  background:var(--mk-canvas);
  border-radius:0 var(--mk-radius-sm) var(--mk-radius-sm) 0;
  list-style:none;
}
.bk-specs .feature_navlink li + li{ border-top:1px solid var(--mk-line); }
.bk-specs .feature_navlink li a{
  padding:12px 24px;
  font-size:.9rem;
  font-weight:500;
  color:var(--mk-text);
  transition:color .2s, background-color .2s;
}
.bk-specs .feature_navlink li a:hover{ color:var(--mk-ink); }
.bk-specs .feature_navlink li a.active{ color:#fff; font-weight:600; border-radius:var(--mk-radius-xs); }
.bk-specs .feature_navlink li a.active:after{ right:-10px; border-left:10px solid #24272c; }
.bk-specs .feature_navlink li:has(a.active),
.bk-specs .feature_navlink li:has(a.active) + li{ border-top-color:transparent; }

.all_feature_points{
  position:relative;
  max-height:min(560px, 72vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:8px 24px 16px 28px;
}
.all_feature_points .single_block{
  background:transparent;
  border:0;
  border-radius:0 !important;
  margin:0 !important;
  padding:12px 0 8px;
}
/* Heading: plain text with a rule running to the right edge */
.all_feature_points .bld-title{
  display:flex !important;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0 0 10px;
  text-transform:none !important;
  font-size:.95rem;
  font-weight:700;
  color:var(--mk-ink);
}
.all_feature_points .bld-title::before{ display:none; }
.all_feature_points .bld-title::after{
  position:static;
  flex:1 1 auto;
  width:auto;
  height:1px;
  background:var(--mk-line);
}
/* Rows: no borders, no shaded label column */
.all_feature_points .ppr-table tr td{
  background:transparent !important;
  padding:11px 0 !important;
  font-size:.92rem !important;
  color:var(--mk-ink);
  font-weight:400;
}
.all_feature_points .ppr-table tr td:first-child{ width:45%; padding-right:16px !important; }
.all_feature_points .ppr-table tr:hover td{ background:transparent !important; }

@media (max-width: 767.98px){
  .bk-specs__head{ padding:14px 16px; }
  .bk-specs__head h3{ font-size:1.1rem; }
  .bk-specs__body{ display:block; }
  .bk-specs__nav{ max-width:none; padding:10px 0 0; }
  /* tabs become a horizontal scroller */
  .bk-specs .feature_navlink{ display:flex; overflow-x:auto; border-radius:0; padding:6px 12px; gap:6px; }
  .bk-specs .feature_navlink li + li{ border-top:0; }
  .bk-specs .feature_navlink li a{ white-space:nowrap; padding:8px 14px; border-radius:var(--mk-radius-xs); }
  .bk-specs .feature_navlink li a.active:after{ display:none; }
  .all_feature_points{ padding:4px 16px 12px; max-height:65vh; }
  .all_feature_points .ppr-table{ min-width:0; }
}
.product_title{ font-weight:800; letter-spacing:-.03em; }
.product_view_right .iv_info_item{
  border-radius:var(--mk-radius) !important;
  transition:background-color .2s;
}
.product_view_right .iv_info_item:hover{ background:var(--mk-canvas); }
.single-bike-thumb,
.single-bike-thumb img{ border-radius:var(--mk-radius-lg); }
/* No borders inside the specs — the .single_block box is the only border */
.ppr-table{
  border-collapse:separate !important;
  border-spacing:0;
  border:0;
}
.ppr-table tr td{ border:0 !important; padding:11px 16px; }
.ppr-table tr td:first-child{ background:var(--mk-canvas); color:var(--mk-ink); font-weight:600; }
.ppr-table tr:hover td:not(:first-child){ background:var(--mk-brand-soft); }
.nav-tabs .nav-link{ border-radius:10px 10px 0 0; font-weight:600; }
.nav-tabs .nav-link.active{ color:var(--mk-brand); }
.bld-title{ font-weight:800; }

/* ---------- Compare page ---------- */
.bike-container{
  width:calc(100% - 32px);
  margin:24px auto 40px !important;
  border-radius:var(--mk-radius-lg);
  border:1px solid var(--mk-line);
  box-shadow:var(--mk-shadow-sm);
  background:var(--mk-surface);
  overflow:hidden;
}
.bike-container .header{
  padding:24px 30px !important;
  border-bottom:1px solid var(--mk-line) !important;
  background:linear-gradient(180deg,var(--mk-canvas),var(--mk-surface));
}
.bike-container .header h1{
  margin:0;
  font-size:1.6rem !important;
  font-weight:800 !important;
  color:var(--mk-ink) !important;
  line-height:1.3;
}

/* cards sit on the same grid as the rows below: label column + 3 bike columns */
.bikes-section{
  grid-template-columns:200px repeat(3,minmax(0,1fr)) !important;
  gap:20px !important;
  border-bottom:1px solid var(--mk-line) !important;
}
.bikes-section::before{ content:""; }
.bike-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px !important;
  border-radius:var(--mk-radius);
  background:var(--mk-surface) !important;
  border:1px solid var(--mk-line);
  transition:box-shadow .25s var(--mk-ease), transform .25s var(--mk-ease), border-color .25s;
}
.bike-card:hover{ box-shadow:var(--mk-shadow); transform:translateY(-2px); border-color:rgba(var(--mk-brand-rgb),.25); }
.bike-image{
  height:150px !important;
  margin:0 !important;
  padding:12px !important;
  background:var(--mk-canvas) !important;
  border-radius:var(--mk-radius-sm) !important;
}
.bike-price{
  margin:0 !important;
  font-size:1.35rem !important;
  font-weight:800 !important;
  color:var(--mk-ink) !important;
  letter-spacing:-.02em;
}
.view-offers-btn,
.download-btn{
  border-radius:999px !important;
  font-weight:600;
  min-height:42px;
  border-color:var(--mk-brand) !important;
  color:var(--mk-brand) !important;
  background:var(--mk-surface) !important;
  transition:background-color .2s, color .2s, box-shadow .2s;
}
.view-offers-btn:hover,
.download-btn:hover{
  background:var(--mk-brand) !important;
  color:var(--mk-surface) !important;
  box-shadow:var(--mk-shadow-brand);
}

/* select2 dropdown inside the card */
.bike-card .select2-container{ width:100% !important; }
/* main.css forces padding/height/border with !important on every select2 box,
   which pushes the text off-centre — reset them here and centre with flex */
.bike-card .select2-container .select2-selection--single{
  display:flex !important;
  align-items:center;
  height:44px !important;
  min-height:0;
  padding:0 !important;
  border:1px solid var(--mk-line) !important;
  border-radius:var(--mk-radius-sm);
  background:var(--mk-canvas) !important;
  transition:border-color .2s, box-shadow .2s;
}
.bike-card .select2-container .select2-selection--single .select2-selection__rendered{
  flex:1;
  min-width:0;
  line-height:1.3 !important;
  padding:0 32px !important;
  text-align:center;
  color:var(--mk-ink);
  font-weight:600;
  font-size:.9rem;
}
.bike-card .select2-container .select2-selection--single .select2-selection__arrow{ top:0; height:100% !important; right:8px; }
.bike-card .select2-container .select2-selection--single .select2-selection__arrow b{ top:50% !important; margin-top:-2px; }
.bike-card .select2-container--open .select2-selection--single,
.bike-card .select2-selection--single:hover{ border-color:var(--mk-brand) !important; box-shadow:var(--mk-ring); }

/* keep the box fully rounded while open — the list floats below it */
.bike-card .select2-container--open .select2-selection--single{ border-radius:var(--mk-radius-sm) !important; }
.bike-card .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:var(--mk-muted) transparent transparent;
  transition:transform .2s;
}
.bike-card .select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color:var(--mk-brand) transparent transparent !important;
  border-width:5px 4px 0 !important;
  transform:rotate(180deg);
}

/* select2 list (appended to <body>, so scoped to the compare page) */
body:has(.bike-container) .select2-container--open .select2-dropdown{
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius-sm);
  box-shadow:var(--mk-shadow-lg);
  overflow:hidden;
  background:var(--mk-surface);
}
body:has(.bike-container) .select2-container--open .select2-dropdown--below{ margin-top:6px; }
body:has(.bike-container) .select2-container--open .select2-dropdown--above{ margin-top:-6px; }
body:has(.bike-container) .select2-search--dropdown{
  padding:10px;
  border-bottom:1px solid var(--mk-line);
  background:var(--mk-canvas);
}
body:has(.bike-container) .select2-search--dropdown .select2-search__field{
  height:38px;
  padding:6px 12px;
  border:1px solid var(--mk-line) !important;
  border-radius:var(--mk-radius-xs);
  background:var(--mk-surface);
  color:var(--mk-ink);
  font-size:.875rem;
  outline:0;
  transition:border-color .2s, box-shadow .2s;
}
body:has(.bike-container) .select2-search--dropdown .select2-search__field:focus{
  border-color:var(--mk-brand) !important;
  box-shadow:var(--mk-ring);
}
body:has(.bike-container) .select2-results > .select2-results__options{
  max-height:280px;
  padding:6px;
  scrollbar-width:thin;
  scrollbar-color:#c0c0c5 transparent;
}
body:has(.bike-container) .select2-container--default .select2-results__option{
  position:relative;
  margin:1px 0;
  padding:9px 32px 9px 12px;
  border-radius:var(--mk-radius-xs);
  color:var(--mk-text);
  font-size:.875rem;
  line-height:1.35;
  transition:background-color .12s, color .12s;
}
body:has(.bike-container) .select2-container--default .select2-results__option[aria-selected=true]{
  background:var(--mk-brand-soft-2);
  color:var(--mk-brand);
  font-weight:700;
}
body:has(.bike-container) .select2-container--default .select2-results__option[aria-selected=true]::after{
  content:"\2713";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-weight:700;
}
body:has(.bike-container) .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--mk-brand-soft);
  color:var(--mk-ink);
}
body:has(.bike-container) .select2-container--default .select2-results__option--highlighted[aria-selected=true]{ color:var(--mk-brand); }
body:has(.bike-container) .select2-container--default .select2-results__option[aria-disabled=true]{ color:var(--mk-muted); }
body:has(.bike-container) .select2-results__message{ color:var(--mk-muted); font-size:.85rem; text-align:center; padding:14px; }

.bike-card.add-bike{ border:1.5px dashed #c0c0c5 !important; background:var(--mk-canvas) !important; min-height:100%; }
.bike-card.add-bike:hover{ border-color:var(--mk-brand) !important; background:var(--mk-brand-soft) !important; }
.add-bike-icon{
  margin:0 !important;
  width:64px !important;
  height:64px !important;
  border:2px solid #c0c0c5 !important;
  background:var(--mk-surface);
  color:var(--mk-muted) !important;
  transition:all .25s var(--mk-ease);
}
.bike-card.add-bike:hover .add-bike-icon{
  border-color:var(--mk-brand) !important;
  background:var(--mk-brand);
  color:var(--mk-surface) !important;
  transform:rotate(90deg);
}
.add-bike-text{ font-weight:600; color:var(--mk-text) !important; }
.add-bike-picker{ display:none; width:100%; }
.bike-card.add-bike.picking{ cursor:default; border-color:var(--mk-brand) !important; background:var(--mk-surface) !important; }
.bike-card.add-bike.picking .add-bike-icon,
.bike-card.add-bike.picking .add-bike-text{ display:none !important; }
.bike-card.add-bike.picking .add-bike-picker{ display:block; }
.bike-card{ position:relative; }
.remove-bike{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--mk-surface);
  border:1px solid var(--mk-line);
  color:var(--mk-text);
  font-size:18px;
  line-height:1;
  text-decoration:none;
  transition:all .2s;
}
.remove-bike:hover{ background:var(--mk-brand); border-color:var(--mk-brand); color:var(--mk-surface); }

.hide-common{
  padding:14px 30px !important;
  border-bottom:1px solid var(--mk-line) !important;
  background:var(--mk-canvas);
}
.hide-common label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border:1px solid var(--mk-line);
  border-radius:999px;
  background:var(--mk-surface);
  color:var(--mk-text) !important;
  font-weight:500;
}
.hide-common input{ margin:0 !important; accent-color:var(--mk-brand); }

/* comparison table */
.comparison-table{ padding:8px 30px 30px !important; }
.section-header{
  margin:16px 0 8px !important;
  padding:12px 16px !important;
  border:0 !important;
  border-left:4px solid var(--mk-brand) !important;
  border-radius:var(--mk-radius-xs);
  background:var(--mk-brand-soft);
  color:var(--mk-ink) !important;
  font-size:1rem !important;
  font-weight:700 !important;
}
.comparison-row{
  grid-template-columns:200px repeat(3,minmax(0,1fr)) !important;
  padding:14px 0 !important;
  border-bottom:1px solid var(--mk-line) !important;
  border-radius:var(--mk-radius-xs);
  transition:background-color .15s;
}
.comparison-row:nth-child(even){ background:var(--mk-canvas); }
.comparison-row:hover{ background:var(--mk-brand-soft); }
.comparison-row .row-label{
  padding-left:16px;
  color:var(--mk-text) !important;
  font-weight:600;
}
.comparison-row .row-value{ color:var(--mk-ink) !important; overflow-wrap:anywhere; }
.comparison-row .row-value strong{ font-weight:800; }
.comparison-row .row-value:empty{ visibility:hidden; }
.body-type-link,
.view-all-link,
.insurance-link,
.emi-info{ color:var(--mk-brand) !important; font-weight:600; }
.body-type-link:hover,
.view-all-link:hover{ color:var(--mk-brand-hover) !important; text-decoration:underline; }
.color-dot{ border:2px solid var(--mk-surface) !important; box-shadow:0 0 0 1px var(--mk-line); }

@media (max-width:991.98px){
  .bikes-section,
  .comparison-row{ grid-template-columns:130px repeat(3,minmax(0,1fr)) !important; gap:12px !important; }
}
/* phones: keep values side by side, put the label on its own line */
@media (max-width:767.98px){
  .bike-container .header{ padding:18px 16px !important; }
  .bike-container .header h1{ font-size:1.15rem !important; }
  .bikes-section{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; padding:16px !important; }
  .bikes-section::before{ display:none; }
  .bike-card{ padding:8px !important; gap:8px; }
  .bike-image{ height:72px !important; padding:6px !important; }
  .bike-price{ font-size:.85rem !important; }
  .view-offers-btn{ font-size:.68rem !important; min-height:34px; padding:6px 4px !important; }
  .bike-card .select2-container .select2-selection--single{ height:36px !important; }
  .bike-card .select2-container .select2-selection--single .select2-selection__rendered{ font-size:.72rem; padding:0 20px 0 8px !important; }
  .bike-card .select2-container .select2-selection--single .select2-selection__arrow{ right:2px; }
  .add-bike-icon{ width:44px !important; height:44px !important; font-size:22px !important; }
  .add-bike-text{ font-size:.75rem !important; }
  .hide-common{ padding:12px 16px !important; text-align:left !important; }
  .comparison-table{ padding:8px 16px 20px !important; }
  .comparison-row{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:4px 8px !important; padding:12px 10px !important; text-align:left !important; }
  .comparison-row .row-label{
    grid-column:1 / -1;
    padding-left:0;
    margin:0 !important;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--mk-muted) !important;
  }
  .comparison-row .row-value{ text-align:left !important; font-size:.82rem; }
  .color-dots{ justify-content:flex-start !important; }
}

/* ---------- Auth pages ---------- */
.login-section .bg-primary-blur{ opacity:.5; }
.login-form-area{
  background:var(--mk-surface);
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius-lg);
  padding:36px 32px;
  box-shadow:var(--mk-shadow);
}
.login-form-area h2{ font-weight:800; letter-spacing:-.03em; }
.login-form label{ color:var(--mk-ink) !important; font-size:.82rem; }
.login-form .btn-primary{ padding:12px 32px; }
.login-form .field-icon,
.login-form .toggle-password{ color:var(--mk-muted); cursor:pointer; }
.login-form-right img{ border-radius:var(--mk-radius-lg); }
.forgot-pass{ color:var(--mk-brand); font-weight:600; }
.login-form p.text-xl-start{ text-align:left !important; }
.login-form .cookies-area,
.login-form .cookies-area .iv2_sidebar_list,
.login-form .cookies-area li{ background:transparent !important; box-shadow:none !important; }
@media (max-width:575.98px){ .login-form-area{ padding:26px 20px; } }

/* ---------- Contact ---------- */
.contact-form-area,
.contact-sidebar-widget{
  border-radius:var(--mk-radius-lg) !important;
  border:1px solid var(--mk-line);
  box-shadow:var(--mk-shadow-sm);
  background:var(--mk-surface);
}
.map-area iframe{ border-radius:var(--mk-radius-lg); }

/* ---------- Modals ---------- */
.modal.show{
  background-color:rgba(var(--mk-ink-rgb),.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.modal-content{
  border:0;
  border-radius:var(--mk-radius-lg);
  padding:6px;
  box-shadow:var(--mk-shadow-lg);
}
.modal-header{ border-bottom:1px solid var(--mk-line); padding:16px 20px; }
.modal-title{ font-weight:800; letter-spacing:-.02em; }
.modal-footer{ border-top:1px solid var(--mk-line); padding:14px 20px; }
.modal-body{ padding:20px; }
.modal-body .modalBikeImage,
.modal-body img.modalBikeImage{ border-radius:var(--mk-radius); background:var(--mk-canvas); }
.btn-close{
  border-radius:50%;
  background-color:var(--mk-canvas-2);
  padding:10px;
  opacity:.8;
}
.btn-close:hover{ opacity:1; }

/* ---------- Account dashboard (/user/dashboard) ----------
   The page keeps its own sidebar colours (#2c3e50 / #34495e);
   only shape, spacing and states are refined here. */
.login-section .sidebar{
  width:100%;
  border-radius:var(--mk-radius-lg);
  padding:22px 16px;
  position:sticky;
  top:100px;
  box-shadow:var(--mk-shadow);
}
.login-section .sidebar h5{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.7;
  padding:0 12px;
  margin-bottom:14px;
}
.login-section .sidebar a{
  display:flex;
  align-items:center;
  padding:11px 14px;
  margin:3px 0;
  border-radius:var(--mk-radius-sm);
  font-weight:500;
  font-size:.9rem;
  opacity:.85;
}
.login-section .sidebar a:hover{ opacity:1; }
.login-section .sidebar a.active{ opacity:1; box-shadow:inset 3px 0 0 var(--mk-brand); }
.login-section .sidebar a i{ width:20px; text-align:center; }
.login-section .sidebar a.logout{ margin-top:12px; border-top:1px solid rgba(255,255,255,.08); border-radius:0 0 var(--mk-radius-sm) var(--mk-radius-sm); padding-top:16px; }

.login-section .col-md-9.card{
  background:transparent;
  box-shadow:none;
  padding:0 0 0 12px;
}
.login-section .section > h5{ font-size:1.25rem; font-weight:800; margin-bottom:18px !important; }
.login-section #dashboard .card{
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius-lg);
  background:var(--mk-surface);
  padding:22px;
  box-shadow:var(--mk-shadow-sm);
  font-weight:600;
  color:var(--mk-text);
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
  overflow:hidden;
}
.login-section #dashboard .card::after{
  content:"";
  position:absolute; right:-30px; top:-30px;
  width:110px; height:110px; border-radius:50%;
  background:var(--mk-brand-soft);
}
.login-section #dashboard .card strong{ font-size:2rem; font-weight:800; color:var(--mk-brand); line-height:1; }
.login-section #data-list,
.login-section #data-list2{ overflow-x:auto; }
.login-section table{ border-radius:var(--mk-radius); overflow:hidden; background:var(--mk-surface); }
.login-section th{ background:var(--mk-canvas); color:var(--mk-ink); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }
.login-section td, .login-section th{ border-color:var(--mk-line) !important; }
@media (max-width:767.98px){
  .login-section .sidebar{ position:static; margin-bottom:18px; display:flex; flex-wrap:wrap; gap:6px; padding:14px; }
  .login-section .sidebar h5{ flex-basis:100%; margin-bottom:6px; }
  .login-section .sidebar a{ flex:1 1 calc(50% - 6px); margin:0; justify-content:center; font-size:.82rem; }
  .login-section .sidebar a.logout{ margin-top:0; border-top:0; padding-top:11px; border-radius:var(--mk-radius-sm); }
  .login-section .sidebar a.active{ box-shadow:inset 0 -3px 0 var(--mk-brand); }
  .login-section .col-md-9.card{ padding:0; }
}

/* ---------- Generic cards / tables ---------- */
.card{
  border:1px solid var(--mk-line);
  border-radius:var(--mk-radius-lg);
  box-shadow:var(--mk-shadow-sm);
}
.tablink{ transition:all .2s; }
.table{ --bs-table-border-color:var(--mk-line); }
.table thead th{ background:var(--mk-canvas); color:var(--mk-ink); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }
.table-responsive{ border-radius:var(--mk-radius); }

/* ---------- Showrooms ---------- */
.style_bike,
.bs-post-item{
  border-radius:var(--mk-radius-lg) !important;
  border:1px solid var(--mk-line);
  background:var(--mk-surface);
  transition:transform .25s var(--mk-ease), box-shadow .25s var(--mk-ease);
}
.style_bike:hover,
.bs-post-item:hover{ transform:translateY(-4px); box-shadow:var(--mk-shadow); }

/* ---------- Footer (original .bg-black) ---------- */
.footer-section{
  background:
    radial-gradient(900px 340px at 0% 0%, rgba(var(--mk-brand-rgb),.16), transparent 60%),
    var(--mk-black) !important;
  margin-top:40px;
  border-radius:28px 28px 0 0;
}
.footer-section p{ color:rgba(255,255,255,.62); line-height:1.75; }
.footer-section .phone-box .icon-wrapper{
  width:48px; height:48px;
  box-shadow:0 8px 22px rgba(var(--mk-brand-rgb),.4);
}
.footer-sb-form input[type="email"]{
  height:52px;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  padding-left:20px;
}
.footer-sb-form input[type="email"]:focus{ border-color:rgba(255,255,255,.3) !important; outline:0; }
.footer-sb-form .btn{
  position:absolute; right:5px; top:5px; bottom:5px;
  border-radius:999px; padding:0 22px;
}
.footer-social .footer-social-list li a{
  width:38px; height:38px; line-height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  transition:all .2s var(--mk-ease);
}
.footer-social .footer-social-list li a:hover{
  background:var(--mk-brand); border-color:var(--mk-brand); transform:translateY(-3px);
}
.footer-section .widget-title{ font-size:.95rem; letter-spacing:.02em; }
.footer-nav li{ margin-bottom:8px; }
.footer-nav li a{ color:rgba(255,255,255,.62); font-size:.86rem; }
.footer-nav li a:hover{ color:#fff; padding-left:4px; }
.footer-copyright{
  border-top:1px solid rgba(255,255,255,.08);
  padding:20px 0;
}
.footer-copyright p,
.footer-copyright .copyright-links a{ color:rgba(255,255,255,.55); font-size:.8rem; }
.footer-copyright .copyright-links a{ margin-left:14px; }
.footer-copyright .copyright-links a:hover{ color:#fff; }
@media (max-width:575.98px){
  .footer-section{ border-radius:20px 20px 0 0; }
  .footer-sb-form{ width:100%; }
  .footer-copyright .copyright-links a{ margin:0 14px 0 0; display:inline-block; }
}

/* ---------- Toasts / misc ---------- */
.load-wrapp{ border-radius:var(--mk-radius); box-shadow:var(--mk-shadow-lg); }
.my-loader{ -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.cookies-area{ border-radius:var(--mk-radius-lg); box-shadow:var(--mk-shadow-lg); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ---------- No box-shadows anywhere ---------- */
*,*::before,*::after,
*:hover,*:focus,*:active{ box-shadow:none !important; }