/* === ROOT VARIABLES === */
:root {
  --brand-testo-primary: #f08900;
  --brand-testo-primary-light: #ffb029;
  --brand-testo-header-bg: #ffac28;
  --brand-testo-gradient: linear-gradient(90deg, #ff841c 0%, #ffb029 100%);
  --brand-testo-gradient-reverse: linear-gradient(
    270deg,
    #ff841c 0%,
    #ffb029 100%
  );
  --brand-testo-accent: #2d4f63;
  --brand-testo-bg-light: #f4f3f1;
  --brand-testo-border: #e8e8e8;
  --brand-testo-text-dark: #231e19;
  --brand-testo-text-muted: rgb(35 30 25 / 85%);
  --brand-testo-white: #fff;
  --brand-testo-divider-light: rgba(255, 255, 255, 0.35);
  --brand-testo-font: "Roboto", sans-serif;
}

.testo-sws-page * {
  padding: 0;
  margin: 0;
  font-family: var(--brand-testo-font);
  box-sizing: border-box;
}

.testo-sws-page {
  container-type: inline-size;
  max-width: 1140px;
  margin: 0 auto;
}

.testo-sws-page img,
.testo-header-wrapper img {
  max-width: none !important;
}

.testo-sws-page h1,
.testo-sws-page h2,
.testo-sws-page h3,
.testo-sws-page h4,
.testo-header-wrapper h4 {
  font-weight: 400;
}

.testo-sws-store #myCarousel .carousel-control-new.right {
  right: 2%;
  left: auto;
  border-radius: 50%;
  border: 2px solid var(--brand-testo-white);
  transition: all 0.3s ease-in;
}

.testo-sws-store #myCarousel .carousel-control-new.right:hover,
.testo-sws-store #myCarousel .carousel-control-new.left:hover {
  border-width: 3px;
}

.testo-sws-store #myCarousel .carousel-control-new.left {
  left: 2%;
  right: auto;
  border-radius: 50%;
  border: 2px solid var(--brand-testo-primary);
  filter: brightness(0) saturate(100%) invert(58%) sepia(52%) saturate(1370%)
    hue-rotate(357deg) brightness(92%) contrast(105%);
  transition: all 0.3s ease-in;
}

.testo-sws-store #myCarousel .testo-hero-content .testo-hero-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: pointer;
}

.testo-sws-store .carousel-control-new {
  color: var(--brand-testo-white);
  font-size: 20px;
  position: absolute;
  filter: hue-rotate(50);
  top: 50%;
  transform: translateY(-50%);
  text-shadow: none !important;
  outline: none !important;
  width: 35px;
  height: 35px;
  z-index: 10;
  background: none;
}

/* ....................navigation menu.............................. */

/* --------------TESTO MOBILE ACCORDION NAV STYLES ------------------*/

.testo-mega-menu .testo-mega-panel a.testo-accent-all,
.testo-mega-menu .testo-mega-sub-panel a.testo-accent-all {
  color: var(--brand-testo-primary);
  transition: all 0.3s ease-in;
}

.testo-mobile #SWS-mobile-nav-button-adjust {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  border: none;
  border-radius: 6px;
  background: var(--brand-testo-primary);
}

.testo-mobile #SWS-mobile-nav-button-adjust > li:not(.testo-mobile-panel) {
  display: flex;
  margin: 0;
  padding: 0;
  position: relative;
}

.testo-mobile #SWS-mobile-nav-button-adjust > li.testo-mobile-home {
  flex: 0 0 50px;
}

.testo-mobile #SWS-mobile-nav-button-adjust > li.testo-mobile-btn {
  flex: 1;
}

.testo-mobile #SWS-mobile-nav-button-adjust > li.testo-mobile-panel {
  flex: 0 0 100%;
  width: 100%;
  display: block;
  background-color: var(--brand-testo-bg-light);
}

.testo-mobile
  #SWS-mobile-nav-button-adjust
  > li:not(.testo-mobile-panel)
  + li:not(.testo-mobile-panel) {
  border-left: 1px solid var(--brand-testo-divider-light);
}

.testo-mobile #SWS-mobile-nav-button-adjust > li > a,
.testo-mobile #SWS-mobile-nav-button-adjust > li > .nav-home-icon {
  display: flex;
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 4px;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--brand-testo-white);
  font-weight: 700;
  font-size: 0.8125rem;
}

.testo-mobile #SWS-mobile-nav-button-adjust > li > a:hover,
.testo-mobile #SWS-mobile-nav-button-adjust > li > .nav-home-icon:hover {
  background-color: var(--brand-testo-primary-light) !important;
  color: var(--brand-testo-white) !important;
}

.testo-mobile .testo-mobile-home-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* -------------------- MOBILE PRODUCTS SUB-ACCORDION -----------------------*/

/* --------------------  TESTO MOBILE ACCORDION NAV STYLES -------------------- */

/* Strip tap highlight, focus rings, and active states on mobile accordion links */
.testo-mobile .testo-mobile-cat-list a,
.testo-mobile .testo-mobile-sub-collapse a,
.testo-mobile .testo-mobile-cat-toggle {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none !important;
}

.testo-mobile .testo-mobile-cat-list a:active,
.testo-mobile .testo-mobile-sub-collapse a:active,
.testo-mobile .testo-mobile-cat-toggle:active,
.testo-mobile .testo-mobile-cat-list a:focus,
.testo-mobile .testo-mobile-sub-collapse a:focus,
.testo-mobile .testo-mobile-cat-toggle:focus {
  background-color: transparent;
  box-shadow: none !important;
  outline: none !important;
}

.testo-mobile #SWS-mobile-nav-button-adjust {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  border: none;
  border-radius: 6px;
  background: transparent;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.testo-mobile #SWS-mobile-nav-button-adjust > li:not(.testo-mobile-panel) {
  display: flex;
  margin: 0;
  padding: 0;
  position: relative;
}

.testo-mobile #SWS-mobile-nav-button-adjust > li.testo-mobile-home {
  flex: 0 0 50px;
}

.testo-mobile #SWS-mobile-nav-button-adjust > li.testo-mobile-btn {
  flex: 1;
}

.testo-mobile #SWS-mobile-nav-button-adjust > li.testo-mobile-panel {
  flex: 0 0 100%;
  width: 100%;
  display: block;
  background-color: var(--brand-testo-bg-light) !important;
  border-radius: 0 0 22px 22px;
}

.testo-mobile
  #SWS-mobile-nav-button-adjust
  > li:not(.testo-mobile-panel)
  + li:not(.testo-mobile-panel) {
  border-left: 1px solid var(--brand-testo-border);
}

.testo-mobile #SWS-mobile-nav-button-adjust > li > a,
.testo-mobile #SWS-mobile-nav-button-adjust > li > .nav-home-icon {
  display: flex;
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 4px;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  color: var(--brand-testo-text-muted);
  font-family: var(--brand-testo-font);
  font-weight: 400;
  font-size: 18px;
}

.testo-mobile #SWS-mobile-nav-button-adjust > li > a:hover,
.testo-mobile #SWS-mobile-nav-button-adjust > li > .nav-home-icon:hover {
  background-color: transparent !important;
  color: var(--brand-testo-primary) !important;
}

.testo-header-wrapper .navbar-inner-testo-subsite .nav > li > a:focus,
.testo-header-wrapper .navbar-inner-testo-subsite .nav > li > a:hover {
  background-color: transparent !important;
  color: var(--brand-testo-primary) !important;
}

.testo-header-wrapper .dropdown-menu li > a {
  line-height: revert;
}

.testo-header-wrapper .dropdown-menu li:nth-last-child(3) a,
.testo-header-wrapper .itm-persistent-nav li:nth-last-child(3) > a {
  padding-bottom: 0.5rem !important;
}

.testo-header-wrapper .navbar-testo-subsite .dropdown-menu li > a:hover,
.testo-header-wrapper .navbar-testo-subsite .dropdown-menu li > a:focus,
.testo-header-wrapper .navbar-testo-subsite .dropdown-submenu li > a:focus,
.testo-header-wrapper .navbar-testo-subsite .dropdown-menu li > a:active,
.testo-header-wrapper .navbar-testo-subsite .dropdown-submenu li > a:active {
  background-color: var(--brand-testo-bg-light) !important;
  color: inherit !important;
}

.testo-header-wrapper .dropdown-menu li:nth-last-child(1) a,
.testo-header-wrapper .dropdown-menu li:nth-last-child(2) a {
  padding-top: 7px;
  padding-bottom: 7px;
  position: static;
  border-top: none;
}

.testo-mobile .testo-mobile-home-icon {
  width: 20px;
  height: 20px;
}

/* --------------------  MOBILE PRODUCTS SUB-ACCORDION -------------------- */
.testo-mobile .testo-mobile-cat-list {
  list-style: none;
  margin: 0;
  padding: 20px;
}

.testo-mobile .testo-mobile-cat-toggle,
.testo-mobile .testo-mobile-cat-direct > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--brand-testo-text-dark);
  border-radius: 50px;
  text-transform: none;
  text-decoration: none;
  margin-bottom: 4px;
}

.testo-mobile .testo-mobile-cat-toggle:hover,
.testo-mobile .testo-mobile-cat-direct > a:hover {
  background-color: var(--brand-testo-bg-light);
  background-image: none;
  color: var(--brand-testo-primary) !important;
}

/* Arrow indicator matching desktop chevron style */
.testo-mobile .testo-mobile-cat-toggle::after {
  content: "\203A";
  font-size: 18px;
  color: var(--brand-testo-text-muted);
  margin-left: 20px;
  transition: transform 0.3s ease;
  flex: 0 0 auto;
}

.testo-mobile
  .testo-mobile-cat-has-sub.sub-open
  > .testo-mobile-cat-toggle::after {
  transform: rotate(90deg);
  color: var(--brand-testo-primary);
}

.testo-mobile .testo-mobile-sub-collapse {
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
}

.testo-mobile .testo-mobile-sub-collapse > li {
  padding: 0;
}

.testo-mobile .testo-mobile-sub-collapse > li > a {
  display: block;
  color: var(--brand-testo-text-dark);
  font-size: 14px;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 50px;
  margin: 0 -20px;
}

.testo-mobile .testo-mobile-sub-collapse > li > a:hover {
  background-color: var(--brand-testo-bg-light) !important;
  background-image: none;
  color: var(--brand-testo-primary) !important;
}

.testo-mobile .testo-mobile-sub-collapse > li.testo-mob-view-all > a {
  font-weight: 500;
  color: var(--brand-testo-primary);
}

/*------------------- Navigation Desktop -------------------*/

/* Permanently strip browser focus outlines from top navigation links */
.testo-mega-dropdown > a:focus,
.testo-mega-dropdown > a:active,
.testo-mega-dropdown > a:focus-visible,
.testo-mega-dropdown .dropdown-toggle:focus,
.testo-mega-dropdown .dropdown-toggle:active,
.testo-mega-dropdown .dropdown-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Control visibility using .is-open class instead of native hover bugs */
.testo-mega-dropdown .testo-mega-menu {
  display: none;
}

.testo-mega-dropdown.is-open .testo-mega-menu {
  display: flex !important;
  gap: 1rem;
}

/* Arrow rotation tied to .is-open */
.testo-mega-dropdown.is-open .dropdown-toggle img {
  transform: rotate(180deg);
  transition: transform 0.3s ease-in-out;
}

/* Top-level text color tied to .is-open */
.testo-mega-dropdown.is-open .dropdown-toggle {
  color: var(--brand-testo-primary) !important;
  transition: color 0.3s ease-in-out;
}

.testo-header-wrapper .open > .dropdown-menu {
  display: flex;
}

.testo-mega-dropdown {
  position: static;
}

.testo-mega-menu {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--brand-testo-white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  border-radius: 0 0 22px 22px;
  width: 100%;
  height: max-content;
  z-index: 9999;
  margin-top: 26px;
  float: unset !important;
}

.testo-mega-menu::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 50px;
  background: transparent;
}

.testo-mega-dropdown:hover .testo-mega-menu,
.testo-mega-dropdown:focus-within .testo-mega-menu,
.testo-mega-dropdown.open .testo-mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  float: unset !important;
}

.testo-mega-dropdown:hover .dropdown-toggle img,
.testo-mega-dropdown:focus-within .dropdown-toggle img {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.testo-mega-dropdown .dropdown-toggle {
  transition: color 0.3s ease-in-out;
}

.testo-mega-dropdown:hover .dropdown-toggle,
.testo-mega-dropdown:focus-within .dropdown-toggle {
  color: var(--brand-testo-primary) !important;
}

.testo-mega-menu
  :is(.testo-mega-left-item, .testo-mega-panel a, .testo-mega-sub-panel a) {
  font-size: 14px;
  padding: 7px 20px;
  display: flex;
}

.testo-mega-menu.has-ext-right .testo-mega-ext-right {
  display: flex;
}

.testo-mega-left {
  flex: 0 0 auto;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
}

.testo-mega-left-item {
  padding: 12px 20px;
  font-size: 20px;
  color: var(--brand-testo-text-dark);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 50px;
}

.testo-mega-left-item.active,
.testo-mega-left-item:hover,
.testo-mega-right-item:active,
.testo-mega-right-item:hover,
.testo-mega-panel a.active,
.testo-mega-panel a:hover {
  background-color: var(--brand-testo-bg-light);
  color: var(--brand-testo-accent);
  outline: none;
}

.testo-mega-right,
.testo-mega-ext-right {
  padding: 20px 15px;
  display: flex;
  align-items: flex-start;
}

.testo-mega-panel,
.testo-mega-sub-panel {
  display: none;
  flex-direction: column;
}

.testo-mega-panel.active,
.testo-mega-sub-panel.active {
  display: flex;
}

.testo-mega-panel a,
.testo-mega-sub-panel a {
  font-size: 14px;
  color: var(--brand-testo-text-dark);
  padding: 12px 25px;
  border-radius: 50px;
  margin: 0 -20px;
}

.testo-mega-panel a:hover,
.testo-mega-sub-panel a:hover {
  background-color: var(--brand-testo-bg-light);
  color: var(--brand-testo-primary);
}

.testo-mega-chevron {
  color: var(--brand-testo-text-muted);
  font-size: 18px;
  margin-left: 20px;
}

.testo-header-wrapper {
  max-width: 1140px !important;
  margin-right: auto;
  margin-left: auto;
}

.testo-header-wrapper .testo-mega-left-list,
.testo-header-wrapper .testo-mega-panels,
.testo-header-wrapper .testo-mega-panel ul,
.testo-header-wrapper .testo-mega-sub-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.testo-header-wrapper .testo-mega-left-list > li,
.testo-header-wrapper .testo-mega-panel ul > li,
.testo-header-wrapper .testo-mega-sub-panel ul > li {
  display: block;
  float: none;
}

.testo-header-wrapper .testo-mega-panel ul > li > a,
.testo-header-wrapper .testo-mega-sub-panel ul > li > a {
  display: block;
}

.testo-header-inner > .span3,
.testo-header-inner > .span9 {
  width: auto;
  float: none;
  margin-left: 0;
}

.testo-header-wrapper .testo-search-box .span10 {
  float: none;
  margin-left: 0;
  min-height: 0;
}

.testo-header-wrapper > .row-fluid::before,
.testo-header-wrapper > .row-fluid::after {
  display: none;
}

.testo-header-wrapper .navbar {
  margin-bottom: 0;
}

.testo-header-wrapper .navbar .navbar-testo-subsite {
  float: none;
  margin: 0;
}

.testo-header-wrapper .navbar-testo-subsite > li {
  float: none;
}

.testo-header-wrapper .testo-mega-menu.dropdown-menu {
  float: none;
  min-width: 0;
  padding: 0;
  border: none;
}

.testo-header-wrapper .navbar .nav > li > .dropdown-menu::after {
  display: none !important;
}

.testo-header-wrapper .navbar .nav > li > .testo-mega-menu::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 50px;
  background: transparent;
  border: none;
}

.testo-mega-menu .testo-mega-left-item,
.testo-mega-menu .testo-mega-panel a,
.testo-mega-menu .testo-mega-sub-panel a {
  color: var(--brand-testo-text-dark);
}

.testo-mega-menu .testo-mega-left-item:hover,
.testo-mega-menu .testo-mega-left-item.active,
.testo-mega-menu .testo-mega-right-item:hover,
.testo-mega-menu .testo-mega-right-item:active {
  background-color: var(--brand-testo-bg-light) !important;
  background-image: none !important;
  color: var(--brand-testo-accent) !important;
}

.testo-mega-menu .testo-mega-panel a:hover,
.testo-mega-menu .testo-mega-sub-panel a:hover {
  background-color: var(--brand-testo-bg-light);
  background-image: none;
  color: var(--brand-testo-primary);
}

.testo-mega-menu .testo-mega-panel a.active {
  background-color: var(--brand-testo-bg-light);
  background-image: none;
  color: var(--brand-testo-accent);
}

.testo-nav-menu .navbar-testo-subsite > .testo-nav-item > a:hover {
  color: var(--brand-testo-text-muted);
  background-color: transparent;
}

.testo-nav-menu .navbar-testo-subsite > li.dropdown.open > .dropdown-toggle {
  background-color: transparent;
}

.testo-logo-container img.brandlogo {
  margin: 0;
}

/* end nav menu */

.testo-sws-store.carousel-top {
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  left: 50%;
  background-color: var(--brand-testo-white);
  overflow: hidden;
}

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

/* === SWS HEADER === */

.testo-header-wrapper {
  background: var(--brand-testo-white);
  padding: 15px 0 0 0;
  position: relative;
}

.testo-header-inner,
.testo-header-inner > div:last-of-type {
  display: flex;
  align-items: center;
  gap: 20px;
}

.testo-header-inner {
  justify-content: space-between;
}

.testo-logo-container {
  width: 70px;
  height: 70px;
}

.testo-logo-container img {
  height: 100%;
  width: auto;
}

.testo-home-btn {
  width: 30px;
  height: 30px;
}

.testo-nav-menu {
  margin-top: unset;
}

.testo-nav-menu .testo-nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 30px;
  background-color: transparent;
}

.testo-nav-menu .navbar-testo-subsite > .testo-nav-item > a {
  color: var(--brand-testo-text-muted);
  font-size: 18px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  text-shadow: none;
  float: none;
}
.testo-nav-item svg {
  stroke: var(--brand-testo-primary);
}

.testo-nav-menu .testo-nav-list > .testo-search-container {
  margin-left: -10px;
  display: flex;
  align-items: center;
}

.testo-search-box .span10 {
  width: auto !important;
}

.testo-search-box form {
  margin-left: 0;
}

.testo-search-box .input-append input {
  font-family: var(--brand-testo-font);
  font-size: 16px;
  padding: 0 20px !important;
}

.testo-header-wrapper input[type="text"]:focus,
.testo-header-wrapper input[type="search"]:focus,
.testo-header-wrapper input[type="password"]:focus,
.testo-search-box input:focus,
.testo-search-box .refine-search:focus {
  border-color: var(--brand-testo-border) !important;
  outline: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

div.testo-search-box input:focus {
  border-color: var(--brand-testo-border) !important;
  outline: none !important;
  box-shadow: none !important;
}

.testo-search-box input#ProductSearch {
  border-radius: 50px;
}

.testo-search-box .refine-search {
  border-radius: 50px;
  border: 1px solid var(--brand-testo-border);
  padding: 8px 20px;
  width: 250px !important;
  outline: none;
  height: 45px !important;
}

.testo-main-layout.container:before,
.testo-main-layout.container:after {
  content: unset;
}

.testo-header-wrapper .testo-search-box input[type="text"],
.testo-header-wrapper .testo-search-box input[type="search"],
.testo-header-wrapper .testo-search-box .refine-search {
  background-image: url("/images/pages/testo/search-icon.svg") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  padding-right: 35px !important;
  cursor: pointer !important;
}

.testo-header-wrapper .testo-search-box button {
  display: none !important;
}

/* ------------------- FULL-WIDTH HERO / CAROUSEL ------------------- */

.testo-carousel {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 400px;
  background-color: var(--brand-testo-bg-light);
  margin-bottom: 40px;
  overflow: hidden;
}

.testo-hero-shape {
  position: absolute;
  top: 50%;
  left: calc(50vw + 206px);
  right: 0;
  transform: translateY(-50%);
  height: 233px;
  background: var(--brand-testo-gradient);
  border-radius: 120px 0 0 120px;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
}

.testo-hero-content {
  max-width: 1140px;
  height: 400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  transition: all 60ms cubic-bezier();
}

.testo-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px;
  flex: 2;
  padding-right: 50px;
  margin-top: unset;
  -webkit-margin-before: 0 !important;
  -webkit-margin-after: 0 !important;
  padding-top: 10px;
  gap: 1rem;
}

.testo-hero-subtitle {
  color: var(--brand-testo-text-muted);
  font-size: 24px;
}
.testo-hero-subtitle b {
  color: var(--brand-testo-primary);
}

.testo-hero-title {
  color: var(--brand-testo-text-dark);
  font-size: calc(20px + 1.0417vw);
  line-height: 1.2;
  margin-bottom: auto;
  margin-top: unset;
  -webkit-margin-before: unset;
  -webkit-margin-after: auto;
  width: 30ch;
}

.testo-hero-image {
  flex: 1;
  position: relative;
  text-align: right;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testo-hero-image img {
  max-height: 350px;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

.testo-cta-carousel-btn {
  width: 225px;
  height: 66px;
  border-radius: 33px;
  padding: 0 30px;
  background: var(--brand-testo-gradient);
  color: var(--brand-testo-text-dark) !important;
}

.testo-cta-carousel-btn {
  font-size: 20px;
  transition: all 0.3s ease;
}

.testo-cta-carousel-btn,
.testo-cta-side-ad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.testo-hero-content:hover .testo-cta-carousel-btn {
  background: transparent;
  border: 3px solid var(--brand-testo-primary);
}

/* ------------------- category items & solutions cards ------------------*/

.testo-main-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 363px));
  grid-template-rows: repeat(6, 180px);
  grid-auto-flow: column;
  gap: 25px;
  margin: 0 auto 25px auto;
  max-width: 1140px;
  justify-content: center;
  padding-bottom: 15px;
}

.testo-category-item {
  width: 100%;
  height: 100%;
}

.testo-category-item {
  border-radius: 22px;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.12);
}

.testo-category-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 3px solid transparent;
  transition: border-color 0.25s ease;
  pointer-events: none;
  z-index: 10;
}

.testo-category-item:hover::after {
  border-color: var(--brand-testo-primary);
}

.testo-category-item.testo-cat-solutions:hover::after {
  border-color: var(--brand-testo-accent);
}

.testo-cat-img-wrap {
  position: absolute;
  overflow: hidden;
  inset: 0;
  border-radius: 22px;
  z-index: 1;
}
.testo-cat-img {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  display: block;
}

.testo-cat-title-wrap {
  position: relative;
  z-index: 2;
  height: clamp(2.5rem, 5vw, 3.125rem);
  background-color: var(--brand-testo-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 0 0 22px 22px;
  margin-top: -1px;
}

.testo-cat-title {
  color: var(--brand-testo-text-dark);
  font-size: clamp(1rem, 2.2vw, 1.1875rem);
  line-height: 1.2;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: max-content;
  flex-shrink: 0;
}

/* --------------- TESTO SIDE AD RESPONSIVE STYLES -------------------- */

.testo-category-item:focus,
.testo-category-item:active,
.testo-category-item:focus-visible,
.testo-category-item:focus-within,
.testo-solution-card:focus,
.testo-solution-card:active,
.testo-solution-card:focus-visible,
.testo-solution-card:focus-within,
.testo-side-ad:focus,
.testo-side-ad:active,
.testo-side-ad:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.testo-side-ad {
  grid-row: span 3;
  grid-column: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  gap: 1rem;
  align-items: center;
  height: 100%;
  outline: none !important;
  background: var(--brand-testo-bg-light);
  border-radius: 22px;
  padding: 4.325rem 20px 20px 20px;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  cursor: pointer;
}

.ad-bg-shape {
  position: absolute;
  top: -53%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(240px, 45vw, 385px);
  height: clamp(240px, 45vw, 370px);
  border-radius: 50%;
  background: var(--brand-testo-gradient-reverse);
}

.testo-side-ad h3,
.testo-side-ad h4 {
  text-align: center;
}

.testo-side-ad h3 {
  font-size: clamp(1.325rem, 1.8vw, 1.875rem);
  color: var(--brand-testo-text-dark);
  line-height: 1.2;
}

.testo-side-ad h4 {
  font-size: clamp(1.15rem, 1.3vw, 1.375rem);
  color: var(--brand-testo-text-muted);
}

.testo-side-ad-img-container {
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 15px;
}

.testo-side-ad-img-container img {
  width: 100%;
  min-height: 170px;
  max-height: 250px;
  object-fit: contain;
}

.testo-cta-side-ad-btn {
  background-color: var(--brand-testo-accent);
  color: var(--brand-testo-primary-light);
  width: 160px;
  height: auto;
  font-weight: 400;
  font-size: clamp(1rem, calc(0.35rem + 1.25vw), 1.125rem);
  border-radius: 28px;
  padding: 16px 28px;
  transition: all 0.3s ease;
  box-sizing: content-box;
}

.testo-side-ad:hover .testo-cta-side-ad-btn {
  background-color: transparent;
  box-shadow: inset 0 0 0 3px var(--brand-testo-primary);
  color: var(--brand-testo-accent);
}

/* ---------------TESTO ABOUT PAGE----------------- */

.testo-about {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > div.container.master > div {
  padding-bottom: 0;
}

.testo-about .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
}

.testo-about .container.testo-about-section-inner {
  width: 100%;
}

.testo-about-wrapper {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}

/* ==================== HERO ==================== */
.testo-about-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  height: 400px;
  background: var(--brand-testo-header-bg);
  overflow: hidden;
  border-bottom: 20px solid var(--brand-testo-accent);
}

.testo-about-hero-inner {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.testo-about-hero-text {
  max-width: 55ch;
}

.testo-about-hero-text h1 {
  font-size: 40px;
  color: var(--brand-testo-text-dark);
  margin-bottom: 20px;
  line-height: 1.2;
}

.testo-about-hero-text p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--brand-testo-text-dark);
}

.testo-about-hero-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(50vw + 90px);
  right: 0;
  height: 310px;
  border-radius: 155px 0 0 155px;
  overflow: hidden;
  z-index: 1;
}

.testo-about-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==================== CONTENT SECTIONS ==================== */

.testo-about-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
  height: 376px;
  display: flex;
  align-items: center;
}

.testo-about-blob {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--brand-testo-bg-light);
  z-index: 0;
}

.testo-about-blob-right {
  left: 0;
  width: 67%;
  border-radius: 0 188px 188px 0;
}

.testo-about-blob-left {
  right: 0;
  width: 67%;
  border-radius: 188px 0 0 188px;
}

.testo-about-section-inner {
  position: relative;
  z-index: 2;
}

.testo-about-section-inner h2 {
  font-size: 34px;
  color: var(--brand-testo-text-dark);
  margin-bottom: 20px;
  line-height: 1.2;
  max-width: 30ch;
}

.testo-about-section-inner p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--brand-testo-text-dark);
  max-width: 560px;
}

.testo-about-section-right .testo-about-section-inner {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

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

.testo-about-footer {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: var(--brand-testo-accent);
  padding: 24px 0;
  margin-top: 40px;
}

.testo-about-footer span {
  color: var(--brand-testo-primary-light);
  font-size: 16px;
  font-weight: 500;
}

/*........ Responsive media query ......*/

@media (min-width: 1200px) {
  .testo-sws-page .span10 {
    width: fit-content;
  }
}

@media (max-width: 1199px) {
  .testo-sws-page {
    max-width: 940px;
    margin: auto;
  }

  /* About page */
  .testo-about .container {
    max-width: 940px;
  }
  .testo-about-hero-image {
    left: calc(50vw + 66px);
  }
  .testo-about-blob-right,
  .testo-about-blob-left {
    width: 80%;
  }
  /* end about page */

  .testo-header-wrapper .testo-logo-container {
    padding-left: 20px;
  }
  .testo-hero-content {
    max-width: 940px;
    padding: 30px 20px;
  }
  .testo-hero-shape {
    left: clamp(67%, 50vw, 15%);
  }
  .testo-main-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: column;
    padding: 0 20px 0 0;
  }
  .testo-side-ad {
    padding-top: 3rem;
  }

  .testo-category-item {
    width: 100%;
    aspect-ratio: 363 / 180;
  }

  .testo-side-ad {
    grid-row: 1 / span 3;
  }
}

@media (max-width: 979px) {
  .testo-header-nav {
    margin-bottom: 0;
    font-family: var(--brand-testo-font);
  }

  .testo-main-layout {
    padding: 0;
  }

  .navbar-inner.testo-mobile {
    background-image: none !important;
    background-color: var(--brand-testo-white) !important;
    background-repeat: no-repeat !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 10px 15px;
  }

  /* ---------- top row: logo + search ---------- */

  .testo-mobile .testo-mobile-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 15px;
    margin-bottom: 10px;
  }

  .testo-mobile .testo-mobile-logo,
  .testo-mobile .testo-mobile-search {
    width: auto;
    float: none;
    margin-left: 0;
    min-width: 0;
  }

  .testo-mobile .testo-mobile-logo {
    flex: 0 0 56px;
  }

  .testo-mobile img.brand.mobile-logo {
    width: 56px;
    height: auto;
    padding: 0;
    margin: 0;
  }

  .testo-mobile .testo-mobile-search {
    flex: 1;
  }

  .testo-mobile .testo-search-box .refine-search {
    border-radius: 50px;
    width: 95% !important;
    padding: 8px 20px 8px 20px;
  }

  .testo-mobile .testo-search-box .span10,
  .testo-mobile .testo-search-box form {
    width: 100% !important;
    margin-left: 0;
    float: none;
  }

  .testo-mobile .testo-search-box button {
    display: none !important;
  }

  .testo-mobile .testo-search-box .refine-search {
    background-image: url("/images/pages/testo/search-icon.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
  }

  /* ---------- button bar ---------- */
  .testo-mobile .sws-mobile-header-nav {
    margin-bottom: 0;
  }

  .testo-mobile #SWS-mobile-nav-button-adjust {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    border-radius: 22px;
    overflow: hidden;
    background-color: transparent;
  }

  /* Target the top-level row elements specifically to keep them orange */
  .testo-mobile #SWS-mobile-nav-button-adjust > li.testo-mobile-home,
  .testo-mobile #SWS-mobile-nav-button-adjust > li.testo-mobile-btn {
    background-color: var(--brand-testo-primary);
  }

  .testo-mobile #SWS-mobile-nav-button-adjust > li.testo-mobile-home {
    flex: 0 0 48px;
    display: flex;
  }

  .testo-mobile #SWS-mobile-nav-button-adjust > li.testo-mobile-btn {
    flex: 1;
    display: flex;
    border-left: 1px solid var(--brand-testo-divider-light);
  }

  .testo-mobile #SWS-mobile-nav-button-adjust > .testo-mobile-panel {
    flex: 0 0 100%;
    width: 100%;
    display: block;
  }

  .testo-mobile #SWS-mobile-nav-button-adjust > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 0.55em 0.4em !important;
    color: var(--brand-testo-white) !important;
    background-color: transparent !important;
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
  }

  .testo-mobile #SWS-mobile-nav-button-adjust > li > a:hover,
  .testo-mobile #SWS-mobile-nav-button-adjust > li > a:focus {
    background-color: var(--brand-testo-primary-light) !important;
    color: var(--brand-testo-white) !important;
    box-shadow: none;
  }

  .testo-mobile #SWS-mobile-nav-button-adjust > li.testo-mobile-home > a {
    padding: 0.4em !important;
  }

  .testo-mobile .testo-mobile-home-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
  }

  /* ---------- collapse panels ---------- */

  .testo-mobile .testo-mobile-panel {
    background-color: var(--brand-testo-bg-light);
    float: none;
  }

  .testo-mobile #SWS-mobile-nav-button-adjust .testo-mobile-list {
    margin: 0;
    padding: 12px 14px;
    border: none;
    border-top: none;
    list-style: none;
    column-count: 2;
    column-gap: 18px;
  }

  .testo-mobile #SWS-mobile-nav-button-adjust .testo-mobile-list--single {
    column-count: 1;
  }

  .testo-mobile #SWS-mobile-nav-button-adjust .testo-mobile-list > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    float: none;
    margin: 0;
  }

  .testo-mobile #SWS-mobile-nav-button-adjust .testo-mobile-list > li > a {
    display: block;
    min-height: 0;
    padding: 0.5em 0.7em !important;
    color: var(--brand-testo-text-dark) !important;
    background-color: transparent !important;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    text-decoration: none;
  }

  .testo-mobile #SWS-mobile-nav-button-adjust .testo-mobile-list > li > a:hover,
  .testo-mobile
    #SWS-mobile-nav-button-adjust
    .testo-mobile-list
    > li
    > a:focus {
    background-color: var(--brand-testo-white) !important;
    color: var(--brand-testo-primary) !important;
    box-shadow: none;
  }
}

@media (min-width: 930px) and (max-width: 1199px) {
  .ad-bg-shape {
    top: clamp(-330.5px, calc(-365px + (100vw - 931px) * 0.155), -288.9px);
  }
}

@media (max-width: 930px) {
  .testo-cta-side-ad-btn {
    padding: 12px 28px;
    border-radius: 28px;
    width: clamp(110px, 0.5vw, 180px);
  }
}

@media (min-width: 768px) and (max-width: 929px) {
  .ad-bg-shape {
    top: -56%;
  }
}

@media (max-width: 767px) {
  /* About Page */

  .testo-about.span10 {
    margin-bottom: 0;
  }

  .testo-about-hero {
    height: auto;
    padding: 40px 0 36px 0;
  }

  .testo-about-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }

  .testo-about-hero-text {
    max-width: 650px;
  }

  .testo-about-hero-text h1 {
    font-size: 28px;
  }

  .testo-about-hero-text p {
    font-size: 16px;
  }

  .testo-about-hero-image {
    position: static;
    width: 100%;
    height: 188px;
    border-radius: 94px 0 0 94px;
    margin-top: 20px;
    transform: none;
  }

  /* background masking shape  */
  .testo-about-section {
    height: auto;
    display: block;
    padding: 50px 0;
    background: var(--brand-testo-bg-light);
  }

  .testo-about .container.testo-about-section-inner {
    width: auto;
  }

  .testo-about-blob {
    display: none;
  }

  .testo-about-section-left {
    border-radius: 0 190px 190px 0;
  }

  .testo-about-section-right {
    border-radius: 190px 0 0 190px;
  }

  .testo-about-section-inner {
    padding: 0 28px;
  }

  .testo-about-section-inner h2 {
    font-size: 24px;
  }

  .testo-about-section-inner p {
    font-size: 14px;
  }

  /* End About Page */

  .testo-mobile .testo-mobile-top {
    margin-bottom: unset;
  }

  .testo-mobile .testo-search-box .span10,
  .testo-mobile .testo-search-box form {
    margin-left: 5px;
  }

  .testo-mobile .testo-search-box .refine-search {
    height: 30px !important;
  }

  .testo-header-nav .row-fluid.sws-mobile-header-nav.accordion {
    margin-top: unset;
  }

  .testo-main-layout {
    margin-top: 40px;
  }

  .testo-search-box .input-append.span10 input {
    width: 95% !important;
    padding: 8px 0 8px 20px !important;
  }

  .testo-main-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: calc((100cqw - 25px) / 2 * 180 / 363);
    grid-template-rows: none;
    grid-auto-flow: row;
    padding-left: 15px;
    padding-right: 15px;
  }

  .testo-mobile-tail {
    order: 1;
  }

  .testo-side-ad {
    display: none;
  }

  .testo-hero-content {
    height: auto;
  }

  .testo-hero-text {
    flex: unset;
    height: 250px;
  }

  .testo-hero-title {
    font-size: clamp(24px, calc(20.17px + 1.0204vw), 30px);
  }

  .testo-hero-subtitle {
    font-size: clamp(20px, calc(16.17px + 1.0204vw), 24px);
  }

  .testo-hero-image img {
    max-height: 250px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .testo-hero-shape {
    top: 26%;
    left: clamp(25%, 50vw, 15%);
    right: 0;
    width: auto;
    height: 35%;
    border-radius: 175px 0 0 175px;
  }

  .testo-hero-content {
    flex-direction: column-reverse;
    text-align: center;
    justify-content: center;
  }

  .testo-hero-text {
    padding-right: 0;
  }

  .testo-cta-carousel-btn {
    align-self: center;
  }

  .testo-carousel {
    height: fit-content;
  }

  .testo-hero-image {
    justify-content: center;
    margin-bottom: 20px;
  }

  .testo-mobile #SWS-mobile-nav-button-adjust > li > a {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .testo-main-layout {
    grid-template-columns: minmax(0, 383px);
    grid-auto-rows: 180px;
  }

  .testo-mobile .testo-mobile-cat-toggle,
  .testo-mobile .testo-mobile-cat-direct > a,
  .testo-mobile #SWS-mobile-nav-button-adjust .testo-mobile-list > li > a {
    font-size: 14px;
  }

  .testo-mobile .testo-search-box .span10,
  .testo-mobile .testo-search-box form {
    margin-left: -5px;
  }

  .testo-hero-title {
    width: auto;
  }
}

@media (max-width: 390px) {
  .testo-about .testo-about-section-inner p {
    max-width: 42ch;
  }
}

@media (max-width: 399px) {
  .testo-mobile #SWS-mobile-nav-button-adjust .testo-mobile-list {
    column-count: 1;
  }
}