/* ********* CSS VARIABLES ********* */

:root {
  --brand-mastercool-blue: #15478E;
  --brand-mastercool-dark: #000;
  --brand-mastercool-white: #FFFFFF;
  --brand-mastercool-btn-ligther-gray: #F0F0F0;
  --brand-mastercool-bg-color: #EBEEF2;
  --brand-mastercool-btn-dark-gray: #777;
  --brand-mastercool-font: "Helvetica Neue LT Std", sans-serif;

}



/* ********* HEADER ********* */

.mastercool-header a {
  outline: none;
  text-decoration: none;
}

.mastercool-header a:focus,
.mastercool-header a:visited {
  outline: none;
}

#store-banner .brandlogo {
  margin-left: 0.4rem;

}

.mastercool-header {
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  left: 50%;
  box-sizing: border-box;
  padding: 15px 0;
  border: 0;
  background-color: var(--brand-mastercool-bg-color);
  font-family: var(--brand-mastercool-font);

}

.mastercool-header>.row-fluid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.mastercool-header .span4.logo-mastercool-sws {
  width: 27%;  
}

/* ********* NAV ********* */

.navbar .nav.navbar-mastercool-subsite {
  margin-right: 0;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  -webkit-box-flex-wrap: nowrap;
  -moz-box-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.navbar .nav.navbar-mastercool-subsite>li {
  flex: 0;
  display: flex;
  text-align: center;
  align-items: center;
  width: 100%;
  height: 36px;
  border-top: none;
  border-bottom: none;
  border-left: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
}

.navbar .nav.navbar-mastercool-subsite>li>a {
  padding: 0.125em 0.6875em;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  text-transform: none;
}



.mastercool-header .row-fluid .navbar.navbar-inner-mastercool-subsite {
  float: right;
  margin-bottom: 0;
}

.mastercool-header .subheading-nav {
  width: 70%;
  float: right;
  align-items: center;
  margin-bottom: 15px;

}

.nav-arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid #1f5fbf;
  border-bottom: 2px solid #1f5fbf;
  transform: rotate(45deg);
  transition: transform .25s, border-color .25s;
}

.dropdown.open .nav-arrow {
  transform: rotate(225deg);
  border-color: #000;
}


.mastercool-header .row-fluid .navbar .nav-collapse.sws.collapse {
  margin-top: 0.625em;
}

.navbar-mastercool-subsite a.nav-home-icon>i {
  display: inline-block;

}

.navbar-mastercool-subsite a.nav-home-icon img {
  filter: brightness(0);
  transition: filter 0.2s ease;
}

.navbar-mastercool-subsite a.nav-home-icon:hover img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(70%) saturate(1800%) hue-rotate(190deg) brightness(75%) contrast(130%);

}

.navbar.navbar-inner-mastercool-subsite .nav>li>a {
  text-shadow: none;
  color: var(--brand-mastercool-dark);
  font-weight: 400;
  display: block;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  white-space: nowrap;
}


.navbar.navbar-inner-mastercool-subsite .nav>li>a>img {
  width: 18px;
  height: auto;
}

/* S-2 fix: raised to (0,4,1) to beat subsites.css compiled rule at (0,3,2) */
.navbar.navbar-inner-mastercool-subsite .navbar-mastercool-subsite .hover-underline-animation>a {
  padding: 0.8125em;
  padding-left: 1.8em;
  padding-right: 1.8em;
}

.navbar.navbar-inner-mastercool-subsite .navbar-mastercool-subsite #about-mastercool-nav>a {

  padding-right: 3.6em;
}

.dropdown .dropdown-menu.mastercool-categories-menu .mastercool-cat-item .mastercool-cat-link {
  padding: 0.5125em 0.8125em ;
}

/* NAV HOVER COLOURS */
.navbar.navbar-inner-mastercool-subsite .nav>li>a:hover,
.navbar.navbar-inner-mastercool-subsite .nav>li>a:focus {
  background-color: transparent;
  background-image: none;
  color: var(--brand-mastercool-blue);

}

.navbar.navbar-inner-mastercool-subsite .nav>li>a:hover .nav-arrow,
.navbar.navbar-inner-mastercool-subsite .nav>li>a:focus .nav-arrow {
  border-color: #000;
}

.navbar.navbar-inner-mastercool-subsite .nav>li>a:active,
.navbar .nav.navbar-mastercool-subsite li.dropdown.open>.dropdown-toggle,
.navbar .nav.navbar-mastercool-subsite li.dropdown.active>.dropdown-toggle,
.navbar .nav.navbar-mastercool-subsite li.dropdown.open.active>.dropdown-toggle {
  color: var(--brand-mastercool-blue);
  background-color: transparent;
  background-image: none;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: var(--brand-mastercool-blue);
}

.hover-underline-animation::before {
  display: none;
}

.hover-underline-animation:hover::before {
  display: none;
}


/* ── DROPDOWN ITEM HOVER & OPEN STATES ── */

/* 1. Apply background ONLY when the list item is actively hovered OR has .open */
.navbar-inner-mastercool-subsite .mastercool-categories-menu li:hover > a,
.navbar-inner-mastercool-subsite .mastercool-categories-menu li.open > a {
  background-color: #F0F0F0 !important;  
  color: var(--brand-mastercool-dark) !important;
  text-decoration: none;
}


/* ======= MASTERCOOL CATEGORIES DROPDOWN — 2 LEVELS ======= */

.mastercool-categories-menu {
  min-width: 16.5em;
  padding: 0.25em 0 0.5em;
  border-radius: 0;
  border: 0px;
  border-top: 8px solid var(--brand-mastercool-blue);
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
  background-color: var(--brand-mastercool-white);  
 left: 0 !important; 
  top: 120%;
}




.mastercool-categories-menu::after {
  display: none !important;

}

/* Category list items */
.mastercool-categories-menu .mastercool-cat-item {
  list-style: none;
  text-align: left;
}

/* Category links — first level */
.mastercool-categories-menu .mastercool-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--brand-mastercool-font);
  font-size: 14px;
  font-weight: 500!important;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--brand-mastercool-dark);
  text-decoration: none;
  background-color: transparent;
  line-height: 1.3;
  border: none;
  box-shadow: none;
  white-space: normal;
}

.mastercool-categories-menu .mastercool-cat-link:hover,
.mastercool-categories-menu .mastercool-cat-link:focus {
  background-color: #F0F0F0 !important;
  color: var(--brand-mastercool-dark) !important;
  text-decoration: none;
}


.navbar-inner-mastercool-subsite .mastercool-categories-menu .dropdown-submenu:hover>.mastercool-cat-link,
.navbar-inner-mastercool-subsite .mastercool-categories-menu .dropdown-submenu.open>.mastercool-cat-link {
  background-color: #F0F0F0 !important;
  background-image: none !important;
  color: var(--brand-mastercool-dark) !important;
  text-decoration: none;
  font-weight: 500 !important;
}

/* Hover previews the L2 panel; click locks it open via .open (chevron rotation stays tied to .open only) */
.navbar-inner-mastercool-subsite .mastercool-categories-menu .dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

/* Open when JS adds .open (click-locked, persists after hover moves away) */
.navbar-inner-mastercool-subsite .mastercool-categories-menu .dropdown-submenu.open>.dropdown-menu {
  display: block;
}

/* Bootstrap Icons chevron-right SVG — floated right, rotates on open */
.mastercool-chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-left: 0.5em;
  -webkit-transition: -webkit-transform 0.2s ease;
  -moz-transition: -moz-transform 0.2s ease;
  transition: transform 0.2s ease;
  line-height: 0;
}

/* Chevron rotates 90° when submenu is open */
.dropdown-submenu.open>.mastercool-cat-link .mastercool-chevron {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* Hide Bootstrap's auto-generated triangle arrow on submenu triggers */
.mastercool-categories-menu .dropdown-submenu>a::after {
  display: none;
}

/* Chevron color on hover and when open */
.mastercool-categories-menu .dropdown-submenu:hover>.mastercool-cat-link .mastercool-chevron,
.mastercool-categories-menu .dropdown-submenu.open>.mastercool-cat-link .mastercool-chevron {
  color: var(--brand-mastercool-blue);
}

/* Second-level submenu panel */
.mastercool-submenu {
  left: 100%;
  right: auto;
  min-width: 220px;
  padding: 0.25rem 0 0.5rem;
  background-color: var(--brand-mastercool-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1001;
}

/* S-7/8/9 fix: (0,5,0) beats Bootstrap .navbar .pull-right > li > .dropdown-menu .dropdown-menu (0,4,2)
   which sets right:100%; left:auto — flipping the submenu to the left side of the panel */
.navbar.navbar-inner-mastercool-subsite .mastercool-categories-menu>.mastercool-cat-item>.mastercool-submenu {
  left: 100%;
  right: auto;
  border-radius: 0;
}

/* Second-level links */
.mastercool-submenu li a {
  display: block;
  font-family: var(--brand-mastercool-font);
  /* font-size: 14px; */
  font-size: 0.875rem;
  font-weight: 500!important;
  color: var(--brand-mastercool-dark);
  text-decoration: none;
  background-color: transparent;
  text-align: left;
  text-transform: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.5125em 0.8125em ;
  white-space: normal;
  line-height: 1.3!important;
}


.navbar-inner-mastercool-subsite .mastercool-submenu li a:hover,
.navbar-inner-mastercool-subsite .mastercool-submenu li a:focus {
  background-color: #F0F0F0 !important;
  color: var(--brand-mastercool-dark) !important;
}

/* "View All" link in blue */
.mastercool-submenu .mastercool-view-all a {
  color: var(--brand-mastercool-blue);
  font-style: italic;
  font-weight: 600;
}

.mastercool-submenu .mastercool-view-all a:hover {
  color: var(--brand-mastercool-blue) !important;
  /* subsites.css: color white !important */
  background-color: var(--brand-mastercool-btn-ligther-gray) !important;
  /* subsites.css: background red !important */
}

/* ======= END MASTERCOOL CATEGORIES DROPDOWN ======= */

/* ********* SEARCH BAR ********* */
.mastercool-search form#ProductDisplayForm button.btn.btn-default {
  border: 1px solid #ABB8C3;
  border-left: none !important;
  background-color: var(--brand-mastercool-bg-color);
  border-radius: 0;
  margin-top: 0px;
  height: 36px !important;
  /* platform refined-search injects style="height:34px" */
  box-sizing: border-box;
}

.mastercool-search form#ProductDisplayForm button.btn.btn-default i.icon-search,
.mastercool-mobile .mobile-search button .icon-search {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2315478E' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: center;
  vertical-align: middle;
  margin-top: 0 !important;
}


.mastercool-search.input-append {
  margin-left: 0;
  padding-right: 0;
}

.mastercool-search input#ProductSearch.appendInputButton {
  border-right: none !important;
  border-radius: 0;
  border: 1px solid #ABB8C3;
  background-color: var(--brand-mastercool-bg-color);
  height: 36px !important;
  /* platform refined-search injects style="height:24px" */
  width: 170px !important;
  /* platform refined-search injects style="width:100%" */
  box-sizing: border-box;
  line-height: 36px;
  padding: 0 10px;
}

.mastercool-search input#ProductSearch.appendInputButton::placeholder {
  color: var(--brand-mastercool-blue);
}


.mastercool-search input.refine-search.appendInputButton:focus,
.mastercool-search input.refine-search.appendInputButton:focus:invalid:focus {
  box-shadow: inset 0 0 5px rgba(21, 71, 142, 0.2);
  ;

}

.mastercool-search input.refine-search.appendInputButton::-webkit-input-placeholder {
  /* Chrome, Opera, Safari */
  color: var(--brand-mastercool-blue);
}

.mastercool-search input.refine-search.appendInputButton:-moz-placeholder {
  /* Firefox 4-18 */
  color: var(--brand-mastercool-blue);
}

.mastercool-search input.refine-search.appendInputButton::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--brand-mastercool-blue);
}

.mastercool-search input.refine-search.appendInputButton:-ms-input-placeholder {
  /* IE 10-11 */
  color: var(--brand-mastercool-blue);
}

.mastercool-search input.refine-search.appendInputButton::-ms-input-placeholder {
  /* MS Edge */
  color: var(--brand-mastercool-dark);
}

.mastercool-search input.refine-search.appendInputButton::placeholder {
  /* your styles */
  color: var(--brand-mastercool-blue);
}

/* ********* END SEARCH BAR ********* */


/* ********* END HEADER ********* */
/* ********* HEROS ********* */

.mastercool-sws-store.carousel-top .carousel {
  margin-bottom: 0px;
}

.mastercool-sws-store .hero-content .mastercool-hero-link {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* Set a fixed height for the carousel inner to prevent jumping */
.mastercool-sws-store #myCarousel .carousel-inner.hero-section,
.mastercool-sws-store #myCarousel .carousel-inner.hero-section-french {
  margin-top: 0;
  height: 500px;
}

.mastercool-sws-store .sws-carousel-drop-shadow {
  overflow: hidden;
}

.mastercool-sws-store #myCarousel .hero-content {
  width: 1170px;
  display: grid;
  grid-template-columns: 5fr 3fr;
  grid-template-rows: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.mastercool-sws-store #myCarousel .hero-content .product-image {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: unset;
}

/* Fix inline gap: <a> wrapping the image must be block */
.mastercool-sws-store #myCarousel .product-image a {
  display: block;
  line-height: 0;
}

/* 975 Combo Roll Groover — vertically centered */
.mastercool-sws-store #myCarousel .carousel-02 .product-image {
  align-items: center;
}

/* Global: all product images stay within the 500px hero height */
.mastercool-sws-store #myCarousel .product-image img.desk-img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* K-750: portrait image — 496px, higher specificity via .hero-content */
.mastercool-sws-store #myCarousel .carousel-01 .hero-content .product-image img.desk-img {
  height: 410px;
  width: auto;
  max-width: none;
}

/* 975 Combo Roll Groover: landscape image — higher specificity via .hero-content */
.mastercool-sws-store #myCarousel .carousel-02 .hero-content .product-image img.desk-img {
  height: 400px;
  width: auto;
  max-width: none;
}




.mastercool-sws-store #myCarousel .text-content {
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 2.5em;
  max-width: 460px;
  position: relative;
  z-index: 3;
}

.mastercool-sws-store .carousel-item-main-mobile {
  height: 100%;
}

.carousel-control-new {
  color: white;
  font-size: 40px;
  position: absolute;
  top: 50%;
  text-shadow: 1px 0px 2px rgba(0, 0, 0, 1);
  z-index: 3;
}

.carousel-control-new.left {
  left: 10px;
}

.carousel-control-new.right {
  right: 10px;
}

.carousel-top.mastercool-sws-store {
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  left: 50%;
  margin-top: -15px;
  margin-bottom: 0px;
  background-image: url(/images/pages/mastercool/background-image-hero.webp);
  background-size: cover;
  background-position: center 93%;
  background-color: var(--brand-mastercool-bg-color);
}



/* Other Carousel Styles */
.mastercool-sws-store #myCarousel h1 {
  font-size: clamp(2rem, 3vw, 2.4rem);
  margin-bottom: 0.9rem;
  margin-top: 0.9rem;
  color: var(--brand-mastercool-white);
  letter-spacing: 0.0225em;
  font-weight: 700;
  font-family: var(--brand-mastercool-font);
  line-height: 1.125;
}

.mastercool-sws-store #myCarousel h2 {
  color: var(--brand-mastercool-white);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.5vw, 1.25rem);
  line-height: 1.3;
  font-family: var(--brand-mastercool-font);
  padding-bottom: 0.9rem;
  padding-right: 1em;
  white-space: normal;
  margin-top: 0px;
}

.mastercool-sws-store #myCarousel .carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.07em 1.4em;
  color: var(--brand-mastercool-blue);
  background-color: var(--brand-mastercool-white) !important;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
  border-radius: 8px;
  font-family: var(--brand-mastercool-font);
  line-height: 1;
}

.mastercool-sws-store #myCarousel .text-content-btn {
  position: relative;
  top: 2px;

}

.mastercool-sws-store #myCarousel .hero-content:hover .carousel-btn {
  background-color: var(--brand-mastercool-blue) !important;
  color: var(--brand-mastercool-white) !important;
  box-shadow:
    inset 0 0 0 1px var(--brand-mastercool-white),
    0 0.25em 0.625em rgba(0, 0, 0, 0.25);
}

/* ********* END Heroes ********* */

/* ********* CATEGORY BUTTONS ********* */

.mastercool-category-section {
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  left: 50%;
  box-sizing: border-box;
  padding: 30px 15px;
  border: 0;
  background-color: var(--brand-mastercool-bg-color);
  font-family: var(--brand-mastercool-font);
  margin-bottom: -15px;
}

.mastercool-category-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;

}

.mastercool-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  gap: 2%;
  align-items: stretch;
  box-sizing: border-box;
}


/* =========================
   Category Cards
   ========================= */

.mastercool-category-card {
  box-sizing: border-box;
  border: 1px solid var(--brand-mastercool-blue);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--brand-mastercool-white);
}

.mastercool-category-header {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
  padding-right: 20px;
  gap: 4%;
  align-items: center;
  min-height: 4.5em;
  background-color: var(--brand-mastercool-blue);
  color: var(--brand-mastercool-white);
  border-radius: 7px 7px 0 0;
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

.mastercool-category-header i {
  flex: 0 0 auto;
  font-size: 1.4em;

}

.mastercool-category-links {
  list-style: none;
  margin: 0;
  padding: 20px;
}

.mastercool-category-links li {
  margin: 0 0 0.5em;
  padding: 0;
}

.mastercool-category-links li a {
  display: inline;
  align-items: center;
  padding: 0;
  color: var(--brand-mastercool-btn-dark-gray);
  font-size: 1.15rem;
  line-height: 1.5;
  text-decoration: none;
}

.mastercool-category-links li a::after {
  content: "→";

  margin-left: 0.3em;
  color: var(--brand-mastercool-btn-dark-gray);
  font-size: 1em;
  transition: transform 0.2s ease, color 0.2s ease;
}

.mastercool-category-links li a:hover {
  color: var(--brand-mastercool-blue);
}


.mastercool-category-links li a:hover::after {
  color: var(--brand-mastercool-blue);  
}

/* car moving animatation */

.mastercool-category-card:hover .fa-car-side {
  animation: carMove 0.6s ease-in-out infinite alternate;
}

@keyframes carMove {
  from {
    transform: translateX(-0.15em);
  }

  to {
    transform: translateX(0.15em);
  }
}

/* fan icon spinning animatation */
.mastercool-category-card:hover .fa-fan {
  animation: fanSpin 1.4s linear infinite;
}

@keyframes fanSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* =========================
   Side Ad
   ========================= */

.mastercool-category-side-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 1em;
  padding-right: 1em;
  background-color: var(--brand-mastercool-white);
  border: 1px solid var(--brand-mastercool-blue);
  border-radius: 8px;
  text-align: center;
  box-sizing: border-box;
  justify-content: center;

}

.mastercool-side-ad-title {
  max-width: 11em;

  color: var(--brand-mastercool-blue);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;

}

.mastercool-side-ad-subtitle {
  max-width: 16em;
  margin-top: 0.8em;

  color: var(--brand-mastercool-blue);
  font-size: 1.15rem;
  line-height: 1.15;

}

.mastercool-side-ad-img {
  width: 100%;
  margin: 1em 0 1.2em;
}

.mastercool-side-ad-img img {
  display: block;
  width: 100%;
  max-width: 18em;
  height: auto;
  margin: 0 auto;
}

.mastercool-side-ad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.07em 1.4em;
  color: var(--brand-mastercool-white);
  background-color: var(--brand-mastercool-blue) !important;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
  border-radius: 8px;
  font-family: var(--brand-mastercool-font);
  line-height: 1;
  

}
.mastercool-side-ad-btn .mastercool-side-ad-btn-text{
position: relative;
  top:2px;
}

.mastercool-side-ad-link:hover .mastercool-side-ad-btn {
  background-color: var(--brand-mastercool-white) !important;
  color: var(--brand-mastercool-blue);

  box-shadow:
    inset 0 0 0 1px var(--brand-mastercool-blue),
    0 0.25em 0.625em rgba(0, 0, 0, 0.15);
  text-decoration: none;

}




/* *** END SIDE AD *** */

/* Buttons hover */

/* Overlay: darken on hover for better text contrast */
.mastercool-item.btn:hover::before {
  background-color: rgba(0, 0, 0, 0.80);
}

/* Accent bar: slightly darker on hover */
.mastercool-item.btn:hover::after {
  background-color: var(--brand-mastercool-blue);
}

/****** French ******/


/****** end French ******/
/* ********* END BUTTONS ********* */

/* ********* About Page ********* */

/* Hide breadcrumbs on About page */
.mastercool-header-nav .row-fluid.navbar.taxonomy-breadcrumbs,
.row-fluid.navbar.taxonomy-breadcrumbs.sws-breadcrumbs {
  display: none !important;
}
.row-fluid > .mastercool-about{
  margin-bottom: -15px !important;
  font-family: var(--brand-mastercool-font);
}
.mastercool-about .about-mastercool-hero {
  background-image: url(/images/pages/mastercool/about-us-3.webp);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: center;
  height: 355px;
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  align-items: center;
}


.mastercool-hero-container {
  margin-top: -15px;
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  left: 50%;
}

.row-fluid.about-mastercool-hero h1 {
  font-family: var(--brand-mastercool-font);
  font-size: clamp(2rem, 3vw, 2.4rem);
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  line-height: 120%;
  padding-bottom: 0.5em;
  color: var(--brand-mastercool-white);
  margin: 0px;
}



.about-mastercool {
  margin-top: 0px;
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  left: 50%;
  background:var(--brand-mastercool-bg-color);
  font-family: var(--brand-mastercool-font);
}

.about-mastercool-3 {
  margin-top: 0px;
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  left: 50%;
  background-color: #EAEAEA;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 25%;
  
}

.about-mastercool-heading {
  display: flex;
  align-items: center;
  justify-content:flex-start ;
  padding:0 1em;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1em;
}

.about-mastercool-heading i {
  flex: 0 0 auto;
  color: var(--brand-mastercool-blue);
  font-size: 24px;
  line-height: 1;  
  display: inline-flex;
}
.about-mastercool-heading .text-with-indicator{
  position: relative;
  top:2px
}
.row-fluid.about-mastercool-container p {
  color: #000000;
  font-size: 16px;
  line-height: 150%;
  text-align: left;
  padding: 0 1em;
  font-family: var(--brand-mastercool-font);
}

.row-fluid.about-mastercool-container h2 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--brand-mastercool-blue);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1 !important;
  text-align: left;
  font-family: var(--brand-mastercool-font);
  text-transform: uppercase;
}

.row-fluid.about-mastercool-2 .row-fluid.about-mastercool-container h2 {
  color: var(--brand-mastercool-blue);
  font-size: 24px;
  font-weight: 700;
  line-height: 120%;
  text-align: left;
  margin-top: 0;
  font-family: var(--brand-mastercool-font);
  text-transform: uppercase;
}

.row-fluid.about-mastercool-2 .row-fluid.about-mastercool-container p {
  color: #000;
  font-size: 16px;
  line-height: 150%;
  text-align: left;
  font-family: var(--brand-mastercool-font);
}

.row-fluid.about-mastercool-container {
  margin: 0 auto;
  max-width: 1170px;
  width: 100%;
  box-sizing: border-box;
  padding: 40px 20px;
}

.row-fluid.about-mastercool-main-content h2 {
  color: var(--brand-mastercool-blue);
  font-weight: 700;  
  font-size: 38px;
  line-height: 120%; 
}

.row-fluid.about-mastercool-main-content p {
  text-align: center;
  font-size: 18px;
  padding-bottom: 1em;
  font-family: var(--brand-mastercool-font);
}

.about-us-blue-col {
  background: #c8cfde;
}

.about-us-application-title p {
  text-align: center;
  font-size: 15px;
  padding: 5px 20px 20px;
}

p.about-us-application-title-p {
  color: #ffffff;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  padding-bottom: 0.2em;
}

.row-fluid.about-mastercool-hero.about-us-hero {
  height: 300px;
  margin-bottom: 0;
}

.row-fluid.about-mastercool-main-content.last-p p {
  font-size: 16px;
  line-height: 150%;
}

/* French locale overrides */
.french-about-us .row-fluid.about-mastercool-hero h1 {
  font-size: 68px;
}

.french-about-us span.hero-h1 {
  font-size: 80px;
}


@media (max-width: 480px) {
  .row-fluid.about-mastercool-hero h1 {
    padding-left:20px;
    padding-right:20px;
  }
  .french-about-us .row-fluid.about-mastercool-hero h1 {
    font-size: 36px;
    line-height: 120%;
  }

  .french-about-us span.hero-h1 {
    font-size: 64px;
  }
}

@media (max-width: 979px) {
  .mastercool-about .about-mastercool-hero {
    height: 250px;
  }

  .about-us-logo img {
    width: 28%;
  }
}

@media (max-width: 768px) {
  .mastercool-hero-container {
    margin-top: 0;
  }

  .mastercool-about .about-mastercool-hero {
    height: 220px;
  }

  .about-us-logo img {
    width: 36%;
  }

  .row-fluid.about-mastercool-container {
    padding: 28px 16px;
  }

  .row-fluid.about-mastercool-container h2,
  .row-fluid.about-mastercool-2 .row-fluid.about-mastercool-container h2 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .mastercool-about .about-mastercool-hero {
    height: 180px;
  }

  .about-us-logo img {
    width: 50%;
  }

  .row-fluid.about-mastercool-container {
    padding: 20px 14px;
  }

  .row-fluid.about-mastercool-container h2,
  .row-fluid.about-mastercool-2 .row-fluid.about-mastercool-container h2 {
    font-size: 18px;
    padding: 0 0.5em 0 20px;
  }

  .row-fluid.about-mastercool-container p {
    font-size: 15px;
  }
}

/* ********* END About Page ********* */

/* =============================== RESPONSIVE BREAKPOINTS =============================== */

@media (min-width: 1200px) {
  .mastercool-item.side-ad {
    max-height: none;
  }
}

@media (max-width: 1199px) {

  /* ********* HEADER ********* */
  .mastercool-header>.row-fluid {
    max-width: 940px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .mastercool-header .span4.logo-mastercool-sws {
    width: 25%;
    margin-top: 0;
    margin-left: 0;
    padding-top: 0;
  }

  .mastercool-header .row-fluid .navbar.navbar-inner-mastercool-subsite {
    width: 100%;
  }

  .span8.subheading-nav,
  .mastercool-header .span8.subheading-nav {   
    width: 75%
  }

  .navbar .nav.navbar-mastercool-subsite {
    justify-content: flex-end;
  }

  .navbar .nav.navbar-mastercool-subsite>li:last-child {
    margin-left: 0;
  }

  .mastercool-header .row-fluid .navbar .nav-collapse.sws.collapse {
    margin-top: 0;
  }

  /* ********* END HEADER ********* */

  .mastercool-sws-store #myCarousel .carousel-01 .product-image img {
    margin-top: 20px;
  }

  .mastercool-sws-store #myCarousel .text-content {
    padding-left: 2em;
  }

  .mastercool-sws-store #myCarousel .hero-content {
    grid-template-columns: 1fr 1fr;
    width: 940px;
  }

  .sws-mastercool-buttons-fr .mastercool-item.side-ad .mastercool-side-ad-title p.application-title {
    font-size: 22px;
    line-height: 28px;
  }

  .mastercool-category-inner {
    max-width: 940px;
    padding: 20px;
  }

}

@media (max-width: 979px) {

  /* ********* HEADER ********* */
  .navbar-inner.mastercool-mobile {
    background: var(--brand-mastercool-bg-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;
  }

  .sws-mobile-header-nav .dropdown {
    box-sizing: border-box;
  }

  .mastercool-mobile .span4 {
    margin: 0 15px 0 0;
    padding: 18px 0;
    width: 36%;
    max-width: 316px;
    flex-shrink: 0;
  }

  .mastercool-mobile img.brand.mobile-logo {
    width: 100%;
    padding: 0 20px 0 0;
    margin-left: 0px;
    display: block;
  }

  .mastercool-mobile .span8 {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    float: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .mastercool-mobile .mastercool-search form.input-append.span10 {
    width: 100%;
    margin-left: 0;
  }

  .mastercool-mobile .navbar-search {
    position: relative;
    float: left;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100%;
    margin-left: 0px;
    padding-left: 0px;
    padding-top: 0px;
    background-color: white;
  }

  .mastercool-mobile .input-append input {
    border-radius: 4px 0 0 4px;
  }


  .mastercool-mobile .mobile-search .navbar-search #ProductSearch {
    border-radius: 4px 0 0 4px;
    color: var(--brand-mastercool-dark);
    border: 2px solid var(--brand-mastercool-light-red);
  }

  .mastercool-mobile .mobile-search .navbar-search #ProductSearch::placeholder {
    color: var(--brand-mastercool-dark);

  }

  .mastercool-mobile .mobile-search .navbar-search #ProductSearch:focus:invalid:focus {
    box-shadow: unset;
  }

  .carousel-top.mastercool-sws-store {
    margin-top: 16px;
  }

  .mastercool-mobile-sub-nav#mobile-sws-1 {
    border-top: 1px solid white;
  }

  .mastercool-mobile-sub-nav {
    margin-top: -1px;
  }

  /* *** English *** */
  li.home-btn.active-animation.dropdown {
    width: 10%;
  }

   .mastercool-mobile #SWS-mobile-nav-button-adjust > .mastercool-mobile-sub-nav {
    float: none;
    clear: both;
    display: block;
    width: 100%;
  }

  .mastercool-mobile #SWS-mobile-first-nav {
    width: 40%;
    border-left: 1px solid white;

  }

  .mastercool-mobile #SWS-mobile-second-nav {
    width: 25%;
    border-right: 1px solid white;
    border-left: 1px solid white;
  }

  .mastercool-mobile #SWS-mobile-third-nav {
    width: 25%;
  }

  .home-btn.active-animation.dropdown img {
    margin: auto;
    filter: brightness(0) invert(1);
    height: 16px;

  }

  /* *** End English *** */

  /* *** HAMBURGER *** */
  .mastercool-mobile .sws-mobile-header-nav .btn-navbar {
    background-color: var(--brand-mastercool-blue);
    border-image: initial;
    outline: none;
    margin: 0px;
    padding: 4px 0px;
    width: 100%;
    float: none;
    box-sizing: border-box;
    border-radius: 0;
    border: none;
    margin-block: 0px;
    height: 27px;
    margin-top: -1px;
  }

  .navbar .mastercool-mobile .btn-navbar .icon-bar {
    width: 100%;
    max-width: 20px;
    background-color: #000;
    box-shadow: none;
    margin: 3px auto 3px;
  }

  /* *** END HAMBURGER *** */

  .mastercool-mobile .sws-mobile-header-nav .navbar-mastercool-subsite-mobile {
    box-sizing: border-box;
    background-color: var(--brand-mastercool-blue);
    width: 100%;
    left: 0px;
    border-radius: 0px;
    margin: 0 auto;
    ;
  }

  /* Safari */
  @supports (-webkit-touch-callout: none) {
    .mastercool-mobile .sws-mobile-header-nav .navbar-mastercool-subsite-mobile {
      margin-bottom: 0px;

    }
  }

  .mastercool-header-nav .sws-mobile-header-nav {
    margin-top: 5px;
  }

  .mastercool-header-nav .row-fluid.sws-mobile-header-nav.accordion {
    background-color: var(--brand-mastercool-blue);
    /* height: 20px; */
    color: var(--brand-mastercool-white);

  }

  .mastercool-mobile .sws-mobile-header-nav .nav>li>a {
    background: var(--brand-mastercool-blue);
    font-size: clamp(0.875rem, 3.8vw, 0.9375rem);
    text-align: center;
    text-transform: uppercase;
    border: none;
    font-weight: 500!important;
    font-family: var(--brand-mastercool-font);
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 10px;
    padding-top: 10px;
  }
.mastercool-mobile .sws-mobile-header-nav .nav>li>a>span{
  position: relative;
  top:2px;
}
  .mastercool-mobile .sws-mobile-header-nav .nav>li>a:hover,
  .mastercool-mobile .sws-mobile-header-nav .btn-navbar:hover {
    background-color: var(--brand-mastercool-dark);
    /* margin-block: 0px; */
    color: var(--brand-mastercool-white);

  }



  .mastercool-mobile li.home-btn.active-animation.dropdown:hover i.icon-home.icon-blue {
    background-image: url(/images/pages/mastercool/mastercool-glyphicons-halflings-white.png);
  }

  .mastercool-mobile .sws-mobile-header-nav .nav>li:nth-child(3):hover a {
    margin-right: -1px;
  }

  /* ===== MOBILE 2-LEVEL PRODUCTS MENU ===== */
  .mastercool-mobile .mastercool-mobile-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: var(--brand-mastercool-btn-ligther-gray);
  }

  .mastercool-mobile .mastercool-mobile-cat-list>li {
    border-bottom: 1px solid #d0d0d0;
    list-style: none;
  }

  .mastercool-mobile .mastercool-mobile-cat-list>li:last-child {
    border-bottom: none;
  }

  /* Direct-link items */
  .mastercool-mobile .mastercool-mobile-cat-direct>a {
    display: block;
    padding: 11px 15px;
    color: var(--brand-mastercool-dark);
    font-size: 14px;
    font-weight: 500!important;
    text-decoration: none;
    background: #f5f5f5;
  }

  .mastercool-mobile .mastercool-mobile-cat-direct>a:hover {
    background: #ebebeb;
    color: var(--brand-mastercool-blue);
  }

  /* Toggle items (has sub) */
  .mastercool-mobile .mastercool-mobile-cat-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 15px;
    color: var(--brand-mastercool-dark);
    font-size: 14px;
    font-weight: 500!important;
    text-decoration: none;
    background: #f5f5f5;
    cursor: pointer;
  }

  .mastercool-mobile .mastercool-mobile-cat-toggle:hover {
    background: #ebebeb;
    color: var(--brand-mastercool-blue);
  }

  /* Chevron rotation */
  .mastercool-mobile .mastercool-mobile-chevron {
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.2s ease;
    color: var(--brand-mastercool-blue);
  }

  .mastercool-mobile .mastercool-mobile-chevron svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1;
  }

  .mastercool-mobile .mastercool-mobile-cat-has-sub.sub-open>.mastercool-mobile-cat-toggle .mastercool-mobile-chevron {
    transform: rotate(90deg);
  }

  /* Sub-collapse list */
  .mastercool-mobile .mastercool-mobile-sub-collapse {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ebebeb;
  }

  .mastercool-mobile .mastercool-mobile-sub-collapse>li {
    list-style: none;
    border-bottom: 1px solid #d8d8d8;
  }

  .mastercool-mobile .mastercool-mobile-sub-collapse>li:last-child {
    border-bottom: none;
  }

  .mastercool-mobile .mastercool-mobile-sub-collapse>li>a {
    display: block;
    padding: 9px 15px 9px 28px;
    color: var(--brand-mastercool-dark);
    font-size: 13px;
    text-decoration: none;
  }

  .mastercool-mobile .mastercool-mobile-sub-collapse>li>a:hover {
    background: #ddd;
    color: var(--brand-mastercool-blue);
  }

  /* View All row */
  .mastercool-mobile .mastercool-mobile-sub-collapse>li.mastercool-mob-view-all>a {
    font-weight: 600;
    color: var(--brand-mastercool-blue);
    padding-left: 28px;
  }

  .mastercool-mobile .mastercool-mobile-sub-collapse>li.mastercool-mob-view-all>a:hover {
    text-decoration: underline;
  }

  /* ===== END MOBILE 2-LEVEL PRODUCTS MENU ===== */

  /* ********* END HEADER ********* */

  .mastercool-sws-store #myCarousel .hero-content {
    width: 95vw;
    padding-inline: 20px;
  }

  .mastercool-sws-store #myCarousel .carousel-inner.hero-section,
  .mastercool-sws-store #myCarousel .carousel-inner.hero-section-french {
    margin-top: -18px;
  }

  .mastercool-sws-store #myCarousel .carousel-02 .text-content,
  .mastercool-sws-store #myCarousel .carousel-01 .text-content {
    padding-left: 3em;
  }

  .mastercool-sws-store {
    padding-top: 0px;
    margin-top: -27px;
  }



  .mastercool-sws-store #myCarousel .carousel-inner.hero-section,
  .mastercool-sws-store #myCarousel .carousel-inner.hero-section-french {
    height: 450px;
  }



  .mastercool-sws-store #myCarousel .hero-content {
    grid-template-columns: 1.25fr 1fr;
  }



  .mastercool-sws-store #myCarousel .carousel-01 .hero-content .product-image img.desk-img {
    height: auto;
    width: 93%;
    max-width: none;
  }

  /* 975 Combo Roll Groover */
  .mastercool-sws-store #myCarousel .carousel-02 .hero-content .product-image img.desk-img {
    height: 300px;
    width: auto;
    max-width: none;
  }


  .mastercool-category-inner {
    padding: 20px 0px;
  }


  /* ********* END HERO ********* */


}

@media (min-width: 768px) and (max-width: 979px)  {

  .mastercool-category-side-ad {
    height: 100%; /* Ensures outer container fills available space */
    padding-top: 3.5em;
    padding-bottom: 3.5em;
    box-sizing: border-box;
  }

  .mastercool-side-ad-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Evenly spreads top, middle, and bottom items */
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  /* Text section */
  .master-side-ad-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .mastercool-side-ad-title {
    margin: 0;
  }

  .mastercool-side-ad-subtitle {
    margin-top: 0.5em;
    margin-bottom: 0;
  }

  /* Image section */
  .mastercool-side-ad-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
  }

  .mastercool-side-ad-img img {
    display: block;
    width: 100%;
    max-width: 18em;
    height: auto;
    margin: 0;
  }

  /* Button section */
  .mastercool-side-ad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0;
  }
}


@media (max-width: 767px) {

  /* ********* HEADER ********* */
  .navbar-inner.mastercool-mobile {
    margin-left: -20px;
    margin-right: -20px;

  }

  .mastercool-mobile .sws-mobile-header-nav .navbar-mastercool-subsite-mobile {    
    z-index: 9;
  }

  /* ********* END HEADER ********* */

  /* Reset negative margins inherited from 979px block */
  .mastercool-sws-store {
    margin-top: 0;
  }

  .mastercool-sws-store #myCarousel .carousel-inner.hero-section,
  .mastercool-sws-store #myCarousel .carousel-inner.hero-section-french {
    margin-top: 0;
  }

  /* ********* HERO ********* */
  .mastercool-sws-store #myCarousel .hero-section,
  .mastercool-sws-store #myCarousel .product-image {
    justify-content: start;
  }

  .mastercool-sws-store #myCarousel .product-image img {
    height: 300px;
    box-shadow: none;
  }

  /* Fix: product-image container matches hero height */
  .mastercool-sws-store #myCarousel .hero-content .product-image {
    height: 340px;
  }



  /* 975: center vertically (override desktop flex-end) + fix max-width */
  .mastercool-sws-store #myCarousel .carousel-02 .hero-content .product-image {
    align-items: center;
  }

  .mastercool-sws-store #myCarousel .carousel-02 .hero-content .product-image img.desk-img {
    max-width: 100%;
    width: 90%;
    height: auto;
  }

  .mastercool-sws-store #myCarousel .text-content,
  .mastercool-sws-store #myCarousel .carousel-02 .text-content {
    padding-top: 0;
    padding-right: 0;
  }

  .mastercool-sws-store #myCarousel .carousel-inner.hero-section,
  .mastercool-sws-store #myCarousel .carousel-inner.hero-section-french {
    box-shadow: none;
    height: 340px;
  }

  .mastercool-sws-store #myCarousel .text-content {
    margin-left: 0;
  }

  .mastercool-sws-store .sws-carousel-drop-shadow img {
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
  }



  .row-fluid.mastercool-sws-store.carousel-top ol.carousel-indicators.mshow.ipad-view-setting {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  /* ********* END HERO ********* */
  /* ********* BUTTONS ********* */


  .mastercool-category-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2em;
  }

  .mastercool-category-side-ad {
    display: none;
  }

  .carousel-top.mastercool-sws-store {
    margin-top: 0px;
    margin-bottom: 0px;
  }


  .mastercool-sws-store #myCarousel h1 {
    font-size: clamp(1.5rem, 5vw, 1.7rem);
  }


  .mastercool-sws-store #myCarousel h2 {
    font-size: clamp(0.875rem, 3.5vw, 1.125rem);
  }





  /* ********* END BUTTONS ********* */

}

@media (min-width: 601px) and (max-width:767px) {

  .row-fluid.ipad-view-setting.sws-mastercool-buttons {
    height: auto;
  }
}

@media (max-width: 600px) {
  .mastercool-mobile .span4 {
    width: 45%;

  }



  .mastercool-mobile img.brand.mobile-logo {
    width: 85%;
  }

  .mastercool-sws-store #myCarousel .product-image {
    order: -1;
    justify-content: center;
  }

  .mastercool-sws-store #myCarousel .product-image img {
    height: 250px;
    box-shadow: none;
  }

  .mastercool-sws-store #myCarousel .hero-content .product-image {
    height: fit-content;
    justify-content: center;
  }

  .mastercool-sws-store .sws-carousel-drop-shadow img {
    height: 173px;
    width: auto;
  }



  .mastercool-sws-store #myCarousel .carousel-01 .text-content,
  .mastercool-sws-store #myCarousel .carousel-02 .text-content {
    padding: 0.5em 0 1em 0;
    display: flex;
    align-items: center;
  }

  .mastercool-sws-store #myCarousel .text-content {
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 7vw;
  }

  .mastercool-sws-store #myCarousel .hero-content {
    flex-direction: column;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 2fr;
    padding: 0px;
    text-align: center;
    align-items: center;
  }

  .mastercool-sws-store #myCarousel .carousel-01 .hero-content .product-image img.desk-img {
    height: auto;
    width: 55%;
    max-width: none;
  }

  /* Reset flex-start inherited from 979px breakpoint — centers product image horizontally */
  .mastercool-sws-store #myCarousel .carousel-01 .hero-content .product-image {
    justify-content: center;
  }

  /* carousel-02/03/04: align-self centers the container within its grid cell */
  .mastercool-sws-store #myCarousel .carousel-02 .hero-content .product-image {
    align-self: center;
    justify-content: center;
  }

  .mastercool-sws-store #myCarousel .carousel-02 .hero-content .product-image img.desk-img {
    width: 48%;
    height: auto;
    max-width: 100%;
  }

  .mastercool-sws-store #myCarousel .carousel-inner.hero-section-french {
    box-shadow: none;
  }

  .mastercool-sws-store #myCarousel .carousel-inner.hero-section,
  .mastercool-sws-store #myCarousel .carousel-inner.hero-section-french {
    height: 500px;
  }

  .mastercool-sws-store #myCarousel .carousel-btn {
    padding: 0.75em 2.125em;
    display: flex;
    justify-content: center;
    width: 40%;
  }

  .mastercool-flex-container {
    height: fit-content;
  }



  .mastercool-category-grid {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }

}




@media (max-width: 480px) {


  .mastercool-sws-store #myCarousel .carousel-btn {
    width: 50%;
  }


  /* *** Header: logo + search bar on same row *** */
  .mastercool-header-nav .navbar-inner.mastercool-mobile {
    display: flex;
    flex-wrap: wrap;
    padding: 0 12px;
  }

  .navbar-inner.mastercool-mobile .span4 {
    width: 50%;
    min-width: 0;
    /* allows flex item to shrink below SVG intrinsic width */
    overflow: hidden;
    /* clips SVG if it exceeds 145px */
    padding: 10px 0;
    margin-right: 15px;
    float: none !important;
    /* overrides inline style="float:left" */
  }

  .mastercool-mobile img.brand.mobile-logo {
    width: 90%;
    padding-right: 0;
  }

  .navbar-inner.mastercool-mobile .span8 {
    flex: 1 1 0%;
    width: 0;
    min-width: 0;
  }

  /* Make search chain fill its container */
  .navbar-inner.mastercool-mobile .mastercool-search,
  .navbar-inner.mastercool-mobile .mastercool-search .navbar-search {
    width: 100%;
  }

  /* Flex on the form so input fills and button stays visible */
  .navbar-inner.mastercool-mobile .mastercool-search form.input-append.span10 {
    display: flex;
    width: 100%;
    max-width: 100%;
  }

  .navbar-inner.mastercool-mobile .mastercool-search #ProductSearch {
    flex: 1 1 0%;
    min-width: 0;
    width: 0;
  }


.mastercool-mobile #SWS-mobile-first-nav {
    width: 40%;
    border-left: 1px solid white;

  }

  .mastercool-mobile #SWS-mobile-second-nav {
    width: 17%;
    border-right: 1px solid white;
    border-left: 1px solid white;
  }

  .mastercool-mobile #SWS-mobile-third-nav {
    width: 33%;
  }
}

@media (max-width: 399px) {

  /* *** Header: stack logo above search bar *** */
  .mastercool-header-nav .navbar-inner.mastercool-mobile {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 6px;
  }

  .navbar-inner.mastercool-mobile .span4 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    overflow: visible;
    margin-right: 0;
    padding: 0;
  }

  .mastercool-mobile img.brand.mobile-logo {
    width: 200px;
  }

  .navbar-inner.mastercool-mobile .span8 {
    flex: 0 0 auto;
    width: 100%;
  }

  .navbar-inner.mastercool-mobile .row-fluid.sws-mobile-header-nav {
    width: 100%;
  }

  .mastercool-sws-store #myCarousel .carousel-01 .hero-content .product-image img.desk-img {
    height: auto;
    width: 74%;
    max-width: none;
  }

  .mastercool-sws-store #myCarousel .carousel-02 .hero-content .product-image img.desk-img {
    width: 67%;
    height: auto;
    max-width: 100%;
  }

}

@media (max-width: 329px) { 
 
  .mastercool-sws-store #myCarousel .carousel-01 .hero-content .product-image img.desk-img {
    height: auto;
    width: 81%;
    max-width: none;
  }

  .mastercool-sws-store #myCarousel .carousel-02 .hero-content .product-image img.desk-img {
    width: 78%;
    height: auto;
    max-width: 100%;
  }
}