
:root{--red:#ed1721}
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;max-width:100%;margin:0;padding:0;overflow-x:hidden}
img{max-width:100%}
body.shell-body{padding-top:80px!important;min-height:100vh;background:#fff}
/* One stable navbar for the whole site shell */
.main-nav{position:fixed!important;top:26px!important;left:0!important;right:0!important;z-index:5000!important;height:54px!important;min-height:54px!important;background:#fff!important;box-shadow:0 1px 5px rgba(0,0,0,.12)!important}
.main-nav>.container-fluid{height:54px!important;min-height:54px!important;display:flex;align-items:center}
.main-nav .navbar-collapse{height:54px!important;min-height:54px!important;display:flex;align-items:center}
.main-nav .brand{height:54px!important;min-width:192px!important;display:flex!important;align-items:center!important;gap:7px!important;white-space:nowrap!important;text-decoration:none!important}
.main-nav .brand-text{font-size:20px!important;font-weight:900!important;line-height:.88!important;white-space:nowrap!important;font-style:italic!important;letter-spacing:-.8px!important}
.main-nav .brand-text small{display:block;color:var(--red)!important;font-size:9px!important;letter-spacing:1px!important;text-align:right!important;margin-top:4px!important}
.main-nav .nav-links{display:flex!important;align-items:center!important;gap:0!important;margin:0 auto!important;padding:0!important}
.main-nav .nav-links .nav-item{position:relative!important;margin:0!important}
.main-nav .nav-links .nav-link{height:54px!important;display:flex!important;align-items:center!important;padding:0 9px!important;margin:0!important;white-space:nowrap!important;font:700 10px/1 Arial,Helvetica,sans-serif!important;color:#171717!important;text-decoration:none!important;letter-spacing:0!important}
.main-nav .nav-links .nav-link:hover,.main-nav .nav-links .nav-link.active,.main-nav .nav-links .nav-item.dropdown:hover>.dropdown-toggle{color:var(--red)!important}
.main-nav .nav-links .nav-link.active:not(.dropdown-toggle):after{content:"";position:absolute;left:9px;right:9px;bottom:7px;height:2px;background:var(--red)}
.main-nav .nav-actions{display:flex!important;align-items:center!important;gap:10px!important;white-space:nowrap!important;margin-left:auto!important}
.main-nav .icon-btn{margin:0!important;background:transparent!important;border:0!important;font-size:17px!important;position:relative!important;padding:5px!important;color:#111!important}
.main-nav .cart-btn span{position:absolute!important;right:-2px!important;top:-2px!important;width:14px!important;height:14px!important;line-height:14px!important;background:var(--red)!important;color:#fff!important;border-radius:50%!important;font-size:8px!important;text-align:center!important}
.main-nav .nav-book{white-space:nowrap!important;padding:10px 17px!important;font-size:10px!important}
/* Desktop hover dropdown: no click needed */
@media(min-width:992px){
  .main-nav .nav-item.dropdown>.dropdown-menu{display:block!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;position:absolute!important;top:54px!important;left:0!important;margin:0!important;min-width:220px!important;padding:7px 0!important;transform:translateY(7px)!important;transition:opacity .15s ease,transform .15s ease,visibility .15s ease!important;z-index:7000!important}
  .main-nav .nav-item.dropdown:hover>.dropdown-menu{visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:translateY(0)!important}
  /* Focus must not keep Services open after a click/navigation. Hover is the only desktop trigger. */
  .main-nav .nav-item.dropdown:focus-within:not(:hover)>.dropdown-menu{visibility:hidden!important;opacity:0!important;pointer-events:none!important;transform:translateY(7px)!important}
  .main-nav .service-dropdown .dropdown-item{display:block!important;font:700 11px/1.2 Arial,Helvetica,sans-serif!important;padding:9px 15px!important;white-space:nowrap!important}
  .main-nav .service-dropdown .dropdown-item:hover{background:#f6f6f6!important;color:var(--red)!important}
}
.main-nav .service-dropdown .dropdown-item i{width:18px;margin-right:6px;color:var(--red)}
@media(max-width:1100px) and (min-width:992px){.main-nav .brand{min-width:172px!important}.main-nav .nav-links .nav-link{padding:0 6px!important;font-size:9px!important}.main-nav .nav-actions{gap:6px!important}.main-nav .nav-book{padding:9px 11px!important}}
@media(max-width:991.98px){
  body.shell-body{padding-top:80px!important}
  .main-nav{height:auto!important;min-height:54px!important}
  .main-nav>.container-fluid{height:auto!important;min-height:54px!important}
  .main-nav .navbar-collapse{height:auto!important;min-height:0!important}
  /* Let Bootstrap's collapse component actually control the mobile menu. */
  .main-nav .navbar-collapse.collapse:not(.show){display:none!important}
  .main-nav .navbar-collapse.collapse.show{display:block!important}
  .main-nav .nav-links{display:block!important;margin:0!important}
  .main-nav .nav-links .nav-link{height:auto!important;padding:10px 5px!important;font-size:11px!important}
  .main-nav .nav-links .nav-link.active:after{display:none!important}
  .main-nav .nav-actions{padding:8px 0!important;justify-content:flex-start!important;flex-wrap:wrap!important}
  .main-nav .nav-item.dropdown>.dropdown-menu{position:static!important;transform:none!important;min-width:0!important;display:none!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .main-nav .nav-item.dropdown.show>.dropdown-menu{display:block!important}
  .main-nav .navbar-toggler{border:0!important;font-size:20px!important}
}
/* Embedded page content never creates a second visible navbar/footer. */
body.embed-mode{padding-top:0!important;margin:0!important}
body.embed-mode>.topbar,body.embed-mode>.main-nav,body.embed-mode>.footer,body.embed-mode>footer,body.embed-mode footer,.embed-mode .topbar,.embed-mode .main-nav,.embed-mode .footer{display:none!important}
html.embed-mode,html.embed-mode body{background:#fff!important}
/* Full desktop frame, not a mobile-width box */
#siteFrameWrap,.site-frame-wrap{width:100%!important;max-width:none!important;background:#fff!important;overflow:visible!important}
.site-frame{display:block;width:100%!important;max-width:none!important;border:0!important;margin:0!important;padding:0!important;min-height:1px;height:1px;background:#fff!important}
/* General card image rule: image fully occupies its media area without half-hidden overflow. */
.page-card .service-card-image{height:190px!important;overflow:hidden!important;background:#f4f4f4!important;display:flex!important;align-items:center!important;justify-content:center!important}
.page-card .service-card-image img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important}
/* Wheel-alignment package images are intentionally contained so the complete wheel is visible. */
.wa-card-img{height:118px!important;overflow:hidden!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important}
.wa-card-img img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;display:block!important}
@media(max-width:991.98px){.site-frame{min-height:1px;height:1px}.page-card .service-card-image{height:210px!important}.wa-card-img{height:190px!important}}
@media(max-width:575.98px){.site-frame{min-height:1px;height:1px}.page-card .service-card-image{height:220px!important}}

/* HOME SCREENSHOT MATCH — verified HD local imagery */
.winter-promo{background-image:linear-gradient(90deg,rgba(3,12,20,.90),rgba(4,14,22,.25)),url("../assets/page-images/home-promo-winter-hd.jpg")!important;background-size:cover;background-position:center;}
.match-promo{background-image:linear-gradient(90deg,rgba(8,8,8,.88),rgba(10,10,10,.18)),url("../assets/page-images/home-promo-match-hd.jpg")!important;background-size:cover;background-position:center;}
.category-img img{width:100%;height:100%;object-fit:cover;display:block;}
.category-card:nth-child(1) .category-img img,.category-card:nth-child(2) .category-img img{object-fit:contain;background:#fff;padding:4px;}
.category-card:nth-child(4) .category-img img{object-fit:cover;}


/* User-provided NORTH TIRES AND RIMS logo — consistent header/footer branding */
.main-nav .brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:160px!important;
  min-width:160px!important;
  max-width:160px!important;
  flex:0 0 160px!important;
  gap:0!important;
  padding:0!important;
  margin-right:clamp(8px,1vw,16px)!important;
  overflow:visible!important;
}
.main-nav .brand .brand-logo{
  display:block!important;
  width:154px!important;
  min-width:154px!important;
  max-width:154px!important;
  height:52px!important;
  max-height:52px!important;
  object-fit:contain!important;
  object-position:left center!important;
  flex:0 0 154px!important;
  margin:0!important;
  padding:0!important;
}
.footer-logo{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:0!important;
  line-height:1!important;
}
.footer .footer-logo .footer-logo-image,
.shell-footer .footer-logo .footer-logo-image,
.footer-logo .footer-logo-image{
  display:block!important;
  width:195px!important;
  max-width:100%!important;
  height:auto!important;
  max-height:72px!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin:0!important;
  padding:0!important;
}
@media(max-width:991.98px){
  .main-nav .brand{
    width:148px!important;
    min-width:148px!important;
    max-width:148px!important;
    flex-basis:148px!important;
    margin-right:6px!important;
  }
  .main-nav .brand .brand-logo{
    width:144px!important;
    min-width:144px!important;
    max-width:144px!important;
    height:48px!important;
    max-height:48px!important;
    flex-basis:144px!important;
  }
}
@media(max-width:380px){
  .main-nav .brand{
    width:128px!important;
    min-width:128px!important;
    max-width:128px!important;
    flex-basis:128px!important;
  }
  .main-nav .brand .brand-logo{
    width:124px!important;
    min-width:124px!important;
    max-width:124px!important;
    height:42px!important;
    max-height:42px!important;
    flex-basis:124px!important;
  }
}


/* Click-to-call phone number updates */
.site-phone-link{color:inherit;text-decoration:none;}
.site-phone-link:hover,.site-phone-link:focus{text-decoration:underline;color:var(--red,#ed1727);}
.tf-fit-card .tf-red-btn.tf-call-price-btn{width:100%;min-height:46px;margin-top:auto;padding:6px 5px;display:flex;flex-direction:column;gap:2px;line-height:1.1;text-align:center;white-space:normal;}
.tf-call-price-btn .tf-call-label{display:block;font-size:8px;font-weight:900;letter-spacing:.1px;}
.tf-call-price-btn .tf-call-number{display:block;font-size:12px;font-weight:900;line-height:1.15;white-space:nowrap;}
.tf-call-price-btn .tf-call-arrow{display:none;}
@media(max-width:420px){.tf-call-price-btn .tf-call-number{font-size:11px;}}
